:root {
   --green: #4c8223;
   --green-bright: #7ed957;
   --green-soft: #4c822329;
   --amber: #fbb307;
   --amber-bright: #ffce4d;
   --amber-soft: #fbb30729;
   --navy: #001a4b;
   --navy-deep: #00112f;
   --gold: #de9d2c;
   --bg-900: #070b06;
   --bg-800: #0b110a;
   --bg-700: #111a0f;
   --panel: #121c0fa8;
   --panel-solid: #0f160d;
   --ink: #eaf3e3;
   --ink-soft: #9fb094;
   --ink-dim: #6f7e66;
   --line: #7ed95729;
   --line-strong: #7ed95757;
   --display: "Space Grotesk", system-ui, sans-serif;
   --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
   --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
   --mono: "Space Mono", ui-monospace, "Courier New", monospace;
   --container: 1180px;
   --radius: 16px;
   --grad: linear-gradient(120deg, var(--green-bright), var(--amber));
   --glow-green: 0 0 0 1px #7ed9574d, 0 0 28px #4c822359;
   --glow-amber: 0 0 0 1px #fbb30759, 0 0 28px #fbb30747;
   --shadow-md: 0 20px 60px #0000008c;
   --ease: cubic-bezier(.22, .61, .36, 1)
}

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

html {
   scroll-behavior: smooth
}

body {
   font-family: var(--sans);
   color: var(--ink);
   background: var(--bg-900);
   -webkit-font-smoothing: antialiased;
   text-rendering: optimizelegibility;
   margin: 0;
   line-height: 1.65;
   position: relative;
   overflow-x: hidden
}

body:before {
   content: "";
   z-index: -2;
   background: radial-gradient(60% 50% at 15% 0%, #4c822338, transparent 60%), radial-gradient(50% 45% at 90% 10%, #fbb30724, transparent 60%), var(--bg-900);
   position: fixed;
   inset: 0
}

body:after {
   content: "";
   z-index: -1;
   pointer-events: none;
   background-image: linear-gradient(#7ed9570d 1px, #0000 1px), linear-gradient(90deg, #7ed9570d 1px, #0000 1px);
   background-size: 56px 56px;
   position: fixed;
   inset: 0;
   -webkit-mask-image: radial-gradient(120% 90% at 50% 0, #000 35%, #0000 80%);
   mask-image: radial-gradient(120% 90% at 50% 0, #000 35%, #0000 80%)
}

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

a {
   color: inherit;
   text-decoration: none
}

h1,
h2,
h3 {
   font-family: var(--display);
   letter-spacing: -.01em;
   margin: 0 0 .5em;
   font-weight: 600;
   line-height: 1.1
}

p {
   margin: 0 0 1em
}

.container {
   width: min(var(--container), 100% - 3rem);
   margin-inline: auto
}

.skip-link {
   z-index: 100;
   background: var(--amber);
   color: #1a1300;
   transition: top .2s var(--ease);
   border-radius: 0 0 8px 8px;
   padding: .6rem 1rem;
   font-weight: 700;
   position: absolute;
   top: -3rem;
   left: 1rem
}

.skip-link:focus {
   top: 0
}

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

#main {
   outline: none
}

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

.eyebrow {
   font-family: var(--mono);
   text-transform: uppercase;
   letter-spacing: .28em;
   color: var(--amber);
   align-items: center;
   gap: .6rem;
   margin: 0 0 1rem;
   font-size: .7rem;
   font-weight: 700;
   display: inline-flex
}

.eyebrow:before {
   content: "";
   background: var(--amber);
   width: 22px;
   height: 1px;
   box-shadow: 0 0 8px var(--amber)
}

.lead {
   color: var(--ink-soft);
   font-size: clamp(1.05rem, 1.6vw, 1.3rem)
}

.note {
   color: var(--ink-dim);
   font-family: var(--mono);
   font-size: .82rem
}

.grad-text {
   background: var(--grad);
   color: #0000;
   -webkit-background-clip: text;
   background-clip: text
}

.btn {
   letter-spacing: .02em;
   font-size: .92rem;
   font-weight: 600;
   font-family: var(--display);
   transition: transform .2s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease), color .2s var(--ease);
   cursor: pointer;
   border: 1px solid #0000;
   border-radius: 999px;
   align-items: center;
   gap: .5rem;
   padding: .85rem 1.7rem;
   display: inline-flex;
   position: relative
}

.btn--gold {
   background: var(--grad);
   color: #0a1206;
   box-shadow: 0 8px 26px #fbb30747
}

.btn--gold:hover {
   transform: translateY(-2px);
   box-shadow: 0 12px 34px #fbb30773, 0 0 22px #7ed95766
}

.btn--ghost {
   border-color: var(--line-strong);
   color: var(--ink);
   background: #7ed9570a
}

.btn--ghost:hover {
   border-color: var(--green-bright);
   color: var(--green-bright);
   box-shadow: var(--glow-green);
   transform: translateY(-2px)
}

.top-band {
   background: linear-gradient(90deg, #3c7c21 0%, #f1a800 50%, #001a4b 100%);
   border-bottom: 1px solid #ffffff1f
}

.top-band__inner {
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   min-height: 40px;
   padding: .25rem 0;
   display: flex
}

.top-band__tag {
   font-family: var(--mono);
   letter-spacing: .05em;
   color: #ffffffe0;
   margin: 0;
   font-size: .72rem
}

.social {
   align-items: center;
   gap: .5rem;
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex
}

.social__link {
   color: #f3fbe9;
   width: 28px;
   height: 28px;
   transition: transform .2s var(--ease), color .2s var(--ease), filter .2s var(--ease);
   place-items: center;
   display: grid
}

.social__link svg {
   width: 17px;
   height: 17px
}

.social__link:hover {
   color: #fff;
   filter: drop-shadow(0 3px 8px #00000059);
   transform: translateY(-2px)
}

.site-header {
   z-index: 50;
   -webkit-backdrop-filter: blur(14px);
   backdrop-filter: blur(14px);
   border-bottom: 1px solid var(--line);
   color: var(--ink);
   background: #070b06b8;
   position: sticky;
   top: 0
}

.site-header__inner {
   justify-content: space-between;
   align-items: center;
   gap: 1rem;
   min-height: 88px;
   padding-block: .85rem;
   display: flex
}

.brand {
   color: inherit;
   align-items: center;
   gap: .7rem;
   display: inline-flex
}

.brand__mark {
   filter: drop-shadow(0 0 8px #7ed95759);
   flex: none;
   place-items: center;
   width: 68px;
   height: 68px;
   display: grid
}

.brand__mark img {
   object-fit: contain;
   width: 100%;
   height: 100%
}

.brand__name {
   flex-direction: column;
   line-height: 1.05;
   display: flex
}

.brand__name strong {
   font-family: var(--serif);
   letter-spacing: .04em;
   text-transform: uppercase;
   font-size: 1.2rem;
   font-weight: 700;
   line-height: 1
}

.brand__name em {
   font-style: normal;
   font-family: var(--mono);
   letter-spacing: .34em;
   text-transform: uppercase;
   color: var(--amber);
   font-size: .62rem
}

.primary-nav ul {
   flex-wrap: nowrap;
   gap: .15rem;
   margin: 0;
   padding: 0;
   list-style: none;
   display: flex
}

.primary-nav li {
   align-items: center;
   display: flex
}

.primary-nav li+li:before {
   content: "";
   background: var(--line-strong);
   flex: none;
   width: 1px;
   height: 15px;
   margin-inline: .2rem
}

.primary-nav a {
   white-space: nowrap;
   color: var(--ink-soft);
   transition: color .2s var(--ease), background .2s var(--ease);
   border-radius: 8px;
   padding: .5rem .6rem;
   font-size: .8rem;
   font-weight: 500;
   display: block;
   position: relative
}

.primary-nav a:hover {
   color: var(--ink);
   background: #7ed95714
}

.nav-link--home {
   align-items: center;
   display: inline-flex
}

.nav-home-icon {
   width: 20px;
   height: 20px;
   display: block
}

.primary-nav a.is-active {
   color: var(--green-bright)
}

.primary-nav .nav-link--home.is-active {
   filter: drop-shadow(0 0 6px var(--green-bright))
}

.primary-nav a.is-active:after {
   content: "";
   background: var(--grad);
   height: 2px;
   box-shadow: 0 0 8px var(--green-bright);
   border-radius: 2px;
   position: absolute;
   bottom: .1rem;
   left: .7rem;
   right: .7rem
}

.nav-toggle {
   border: 1px solid var(--line-strong);
   cursor: pointer;
   background: 0 0;
   border-radius: 10px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 5px;
   width: 44px;
   height: 44px;
   display: none
}

.nav-toggle span {
   background: var(--green-bright);
   width: 20px;
   height: 2px;
   transition: transform .2s var(--ease), opacity .2s var(--ease);
   border-radius: 2px
}

.nav-toggle[aria-expanded=true] span:first-child {
   transform: translateY(7px)rotate(45deg)
}

.nav-toggle[aria-expanded=true] span:nth-child(2) {
   opacity: 0
}

.nav-toggle[aria-expanded=true] span:nth-child(3) {
   transform: translateY(-7px)rotate(-45deg)
}

.hero {
   padding: clamp(3.5rem, 8vw, 6.5rem) 0 clamp(3.5rem, 8vw, 6rem);
   position: relative;
   overflow: hidden
}

.hero__glow {
   pointer-events: none;
   background: radial-gradient(38% 50% at 20% 0, #fbb3072e, #0000 70%), radial-gradient(40% 50% at 90% 70%, #4c82234d, #0000 70%), radial-gradient(30% 40% at 10% 80%, #7ed95724, #0000 70%);
   position: absolute;
   inset: 0
}

.hero__mesh {
   z-index: 0;
   pointer-events: none;
   width: 52%;
   height: 100%;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   -webkit-mask-image: linear-gradient(90deg, #0000, #000 32%);
   mask-image: linear-gradient(90deg, #0000, #000 32%)
}

.hero__inner {
   z-index: 1;
   grid-template-columns: 1.3fr .7fr;
   align-items: start;
   gap: clamp(1.5rem, 4vw, 3rem);
   display: grid;
   position: relative
}

.hero__copy {
   min-width: 0
}

.hero__brand {
   align-items: center;
   gap: .9rem;
   margin: 1.4rem 0 1.2rem;
   display: flex
}

.hero__brand .eyebrow {
   margin: 0
}

.hero__monogram {
   width: 76px;
   height: 76px;
   color: var(--amber);
   animation: floaty 6s var(--ease) infinite;
   flex-shrink: 0;
   place-items: center;
   margin: 0;
   font-size: 2.3rem;
   display: inline-grid
}

.hero__monogram img {
   object-fit: contain;
   width: 100%;
   height: 100%
}

@keyframes floaty {

   0%,
   to {
      transform: translateY(0)
   }

   50% {
      transform: translateY(-8px)
   }
}

.hero__rotator {
   margin: .4rem 0 1.6rem;
   display: grid
}

.hero-text-slide {
   opacity: 0;
   transition: opacity .7s var(--ease), transform .7s var(--ease);
   pointer-events: none;
   grid-area: 1/1;
   transform: translateY(16px)
}

.hero-text-slide.is-active {
   opacity: 1;
   pointer-events: auto;
   transform: translateY(0)
}

.hero__rotator .hero__title {
   margin: 0 0 1.1rem
}

.hero__rotator .hero__lead {
   margin: 0
}

.hero__title {
   font-family: var(--display);
   letter-spacing: -.02em;
   margin: .4rem 0 1.1rem;
   font-size: clamp(1.7rem, 3.6vw, 2.8rem);
   font-weight: 700
}

.hero__title span {
   background: var(--grad);
   color: #0000;
   -webkit-background-clip: text;
   background-clip: text
}

.hero__lead {
   max-width: 560px;
   color: var(--ink-soft);
   margin: 0 0 2rem;
   font-size: clamp(.92rem, 1.2vw, 1.02rem)
}

.hero__actions {
   flex-wrap: wrap;
   gap: 1rem;
   display: flex
}

.hero-slider {
   position: relative;
   width: 100%;
   min-width: 0
}

.hero-slider__viewport {
   aspect-ratio: 4/5;
   min-height: 320px;
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: var(--shadow-md);
   position: relative;
   overflow: hidden
}

.hero-slider__track {
   display: flex;
   width: 100%;
   height: 100%;
   transition: transform .7s var(--ease)
}

.hero-slide {
   flex: 0 0 100%;
   width: 100%;
   height: 100%;
   align-items: flex-end;
   margin: 0;
   display: flex;
   position: relative;
   overflow: hidden
}

.hero-slide--tech {
   background: linear-gradient(150deg, #16361a, #0a1206 70%)
}

.hero-slide--earth {
   background: linear-gradient(150deg, #1c3a12, #07110a 70%)
}

.hero-slide--wisdom {
   background: linear-gradient(150deg, #3a2c06, #100a02 70%)
}

.hero-slide--group {
   background: linear-gradient(150deg, #16361a, #1a1206 70%)
}

.hero-slide__img {
   object-fit: cover;
   width: 100%;
   height: 100%;
   display: block;
   position: absolute;
   inset: 0
}

.hero-slide__cap {
   z-index: 1;
   background: linear-gradient(0deg, #070b06 50%, #070b06d9 78%, #070b0600 100%);
   gap: .2rem;
   width: 100%;
   padding: 2.6rem 1.2rem 1.1rem;
   display: grid;
   position: relative
}

.hero-slide__kicker {
   font-family: var(--mono);
   letter-spacing: .14em;
   text-transform: uppercase;
   color: var(--amber);
   font-size: .64rem
}

.hero-slide__title {
   font-family: var(--display);
   color: var(--ink);
   font-size: 1.5rem
}

.hero-slide__caption {
   color: var(--ink-soft);
   font-size: .92rem
}

.hero-slider__nav {
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   border: 1px solid var(--line-strong);
   width: 34px;
   height: 34px;
   color: var(--ink);
   cursor: pointer;
   transition: background .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
   background: #070b0699;
   border-radius: 50%;
   place-items: center;
   font-size: 1.1rem;
   line-height: 1;
   display: grid;
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 2
}

.hero-slider__nav:hover {
   color: var(--green-bright);
   box-shadow: var(--glow-green)
}

.hero-slider__nav--prev {
   left: .5rem
}

.hero-slider__nav--next {
   right: .5rem
}

.hero-slider__dots {
   justify-content: center;
   gap: .5rem;
   margin-top: 1rem;
   display: flex
}

.hero-slider__dot {
   cursor: pointer;
   background: var(--line-strong);
   width: 26px;
   height: 5px;
   transition: background .2s var(--ease), box-shadow .2s var(--ease);
   border: 0;
   border-radius: 999px;
   padding: 0
}

.hero-slider__dot.is-active {
   background: var(--grad);
   box-shadow: 0 0 10px #7ed95799
}

.section {
   padding: clamp(3.5rem, 7vw, 6rem) 0;
   position: relative
}

.section--alt {
   border-block: 1px solid var(--line);
   background: linear-gradient(#7ed9570a, #fbb30708)
}

.section__head {
   max-width: 780px;
   margin: 0 0 2.6rem
}

.section__head h2 {
   font-size: clamp(1.7rem, 3.6vw, 2.6rem)
}

.section--serif .prose p {
   font-size: 1.1rem
}

.section--light {
   color: #1a2230;
   background: linear-gradient(#fff 0%, #f4f8ee 100%);
   border-block: 1px solid #4c82232e
}

.section--light:after {
   content: "";
   z-index: 2;
   background: linear-gradient(90deg, #4c8223 0 25%, #10b981 25% 50%, #0a0f0a 50% 75%, #22d3ee 75% 100%);
   height: 4px;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   box-shadow: 0 0 12px #22d3ee4d
}

.section--light .section__head h2 {
   color: #0f1a2e
}

.section--light .eyebrow {
   color: var(--green)
}

.section--light .eyebrow:before {
   background: var(--green);
   box-shadow: 0 0 8px #4c822373
}

.section--light .prose p {
   color: #3a4658
}

.section--light .prose strong {
   color: #0f1a2e
}

.section--light .prose a {
   color: var(--green)
}

.section--light .prose__signoff {
   color: #b9810a
}

.section--light .note {
   color: #6b7686
}

.section--light .feature,
.section--light .pillar,
.section--light .metric,
.section--light .insight-card,
.section--light .value-chip,
.section--light .principle-row,
.section--light .entity-card,
.section--light .contact-aside,
.section--light .contact-entity {
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   background: #fff;
   border-color: #4c822333;
   box-shadow: 0 10px 26px #14280a14
}

.section--light .feature h3,
.section--light .insight-card h3,
.section--light .principle-row__body h3,
.section--light .entity-card h3,
.section--light .contact-entity h3 {
   color: #0f1a2e
}

.section--light .entity-card--wisdom h3 {
   color: #b9810a
}

.section--light .entity-card--tech h3,
.section--light .entity-card--earth h3 {
   color: var(--green)
}

.section--light .feature p,
.section--light .insight-card p,
.section--light .pillar p,
.section--light .metric span,
.section--light .principle-row__body>p:last-child,
.section--light .entity-card__focus,
.section--light .contact-entity p {
   color: #3a4658
}

.section--light .principle-row__essence,
.section--light .insight-card__tag,
.section--light .insight-card__meta,
.section--light .entity-card__id,
.section--light .metric strong,
.section--light .principle-row__body h3 em {
   color: var(--green)
}

.section--light .pillar span,
.section--light .principle-row__index span {
   color: #b9810a
}

.section--light .entity-card__tagline {
   color: #1a2230
}

.section--light .pillar:before {
   background: radial-gradient(60% 60% at 50% 0, #4c82231a, #0000 70%)
}

.section--light .value-chip {
   color: #1a2230
}

.section--light .value-chip:hover {
   border-color: var(--amber);
   color: #b9810a;
   box-shadow: 0 6px 18px #fbb30738
}

.section--light .feature:hover,
.section--light .pillar:hover,
.section--light .metric:hover,
.section--light .insight-card:hover,
.section--light .entity-card:hover,
.section--light .principle-row:hover {
   border-color: #4c82236b;
   box-shadow: 0 16px 36px #14280a24
}

.section--light .director__body p {
   color: #3a4658
}

.section--light .director__plate strong {
   color: #0f1a2e
}

.section--light .director__quote {
   color: #0f1a2e;
   text-shadow: none
}

.section--light .field label {
   color: #1a2230
}

.section--light .field input,
.section--light .field select,
.section--light .field textarea {
   color: #1a2230;
   background: #fff;
   border-color: #4c822347
}

.section--light .field input::placeholder,
.section--light .field textarea::placeholder {
   color: #8a93a3
}

.section--light .field select option {
   color: #1a2230;
   background: #fff
}

.section--light .contact-aside h3,
.section--light .contact-aside a {
   color: var(--green)
}

.section--light .contact-form__status {
   color: #3a4658
}

.section--light .contact-form__status.is-success {
   color: #2e7d32
}

.section--light .btn--ghost {
   color: var(--green);
   background: #4c82230f;
   border-color: #4c82236b
}

.section--light .btn--ghost:hover {
   color: #fff;
   background: var(--green);
   border-color: var(--green);
   box-shadow: 0 8px 22px #4c82234d
}

.section--light .principle-row {
   box-shadow: none;
   background: linear-gradient(150deg, #40ae7e 0%, #3c7c21 100%);
   border-color: #ffffff3d
}

.section--light .principle-row__body h3 {
   color: #fff
}

.section--light .principle-row__body h3 em {
   color: #eafbe0
}

.section--light .principle-row__index span {
   color: #ffe6a8
}

.section--light .principle-row__essence {
   color: #ffffffd1
}

.section--light .principle-row__body>p:last-child {
   color: #ffffffeb
}

.section--light .principle-row:hover {
   box-shadow: none;
   border-color: #ffffff80
}

#philo-values,
#research-ip,
#insights-pub {
   background: linear-gradient(120deg, #3c7c21 0%, #f1a800 100%);
   border-block: 1px solid #fff3
}

#research-ip,
#insights-pub {
   position: relative;
   overflow: hidden
}

#research-ip .section__head,
#research-ip .feature-grid,
#insights-pub .section__head,
#insights-pub .feature-grid {
   z-index: 1;
   position: relative
}

#insights-pub .feature {
   background: #fffffff2;
   border: 1px solid #ffffff8c;
   box-shadow: 0 12px 30px #14280a33
}

#insights-pub .feature h3 {
   color: #0f1a2e
}

#insights-pub .feature p {
   color: #3a4658
}

#insights-pub .feature .note {
   color: #6b7686
}

#research-collab .collab-net-split {
   grid-template-columns: 1fr 1fr;
   align-items: center;
   gap: clamp(1.6rem, 4vw, 3.2rem);
   display: grid
}

#research-collab .collab-net-split .img-slider {
   margin-top: 0
}

#research-collab .collab-net-text .section__head {
   margin-bottom: 1rem
}

.cnet {
   justify-self: center;
   width: min(360px, 100%)
}

.cnet svg {
   filter: drop-shadow(0 0 4px #ffffff59)drop-shadow(0 8px 20px #00000040);
   width: 100%;
   height: auto;
   display: block
}

.cnet__ring {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 26s linear infinite cnet-spin
}

.cnet__spokes line {
   animation: 2.4s linear infinite cnet-flow
}

.cnet__hub {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 4s ease-in-out infinite cnet-pulse
}

.cnet__node {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 3.6s ease-in-out infinite cnet-node
}

.cnet__node--1 {
   animation-delay: 0s
}

.cnet__node--2 {
   animation-delay: .5s
}

.cnet__node--3 {
   animation-delay: 1s
}

.cnet__node--4 {
   animation-delay: 1.5s
}

.cnet__node--5 {
   animation-delay: 2s
}

.cnet__node--6 {
   animation-delay: 2.5s
}

@keyframes cnet-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes cnet-flow {
   to {
      stroke-dashoffset: -26px
   }
}

@keyframes cnet-pulse {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.12)
   }
}

@keyframes cnet-node {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.16)
   }
}

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

   .cnet__ring,
   .cnet__spokes line,
   .cnet__hub,
   .cnet__node {
      animation: none
   }
}

@media (width<=760px) {
   #research-collab .collab-net-split {
      grid-template-columns: 1fr
   }
}

#research-ip .section__head h2,
#research-ip .eyebrow,
#insights-pub .section__head h2,
#insights-pub .eyebrow {
   color: #fff
}

#research-ip .eyebrow:before,
#insights-pub .eyebrow:before {
   background: #fff;
   box-shadow: 0 0 8px #fff9
}

#philo-values {
   padding-block: clamp(2.2rem, 4.5vw, 3.2rem);
   position: relative;
   overflow: hidden
}

#philo-values .section__head,
#philo-values .value-grid {
   z-index: 1;
   position: relative
}

#philo-values .value-grid {
   transform: translate(clamp(0px, 5vw, 70px))
}

.cloth-mesh {
   z-index: 0;
   pointer-events: none;
   color: #ffffff80;
   filter: drop-shadow(0 0 4px #ffffff38);
   width: 100%;
   height: 34%;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   -webkit-mask-image: linear-gradient(#0000 0%, #000 68%);
   mask-image: linear-gradient(#0000 0%, #000 68%)
}

.cloth-mesh polyline {
   vector-effect: non-scaling-stroke;
   stroke-width: 1px
}

#philo-values .section__head {
   text-align: center;
   margin-inline: auto;
   max-width: none;
   margin-bottom: clamp(3.2rem, 6vw, 5rem)
}

#philo-values .eyebrow {
   color: #fff
}

#philo-values .eyebrow:before {
   background: #fff;
   box-shadow: 0 0 8px #fff9
}

#philo-values .section__head h2 {
   color: #fff
}

#philo-values .value-chip__front {
   color: #fff;
   background: 0 0;
   border: 0
}

#philo-values .value-chip__back {
   color: #ffe6a8;
   background: 0 0;
   border: 0
}

#philo-principles {
   overflow: hidden
}

#philo-principles .section__head,
#philo-principles .principle-rows {
   z-index: 1;
   position: relative
}

.philo-tri-deco {
   pointer-events: none;
   z-index: 0;
   width: 46%;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0
}

.philo-tri {
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
   position: absolute
}

.philo-tri--1 {
   clip-path: polygon(100% 0, 100% 100%, 0 0);
   filter: drop-shadow(0 8px 22px #4c822340);
   background: linear-gradient(150deg, #4c82238c, #4c82231f);
   width: 190px;
   height: 190px;
   top: 5%;
   right: 4%;
   transform: rotate(8deg)
}

.philo-tri--2 {
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #10b98180, #10b9811a);
   width: 122px;
   height: 122px;
   top: 30%;
   right: 26%
}

.philo-tri--3 {
   clip-path: polygon(0 0, 100% 0, 0 100%);
   background: linear-gradient(150deg, #fbb30780, #fbb30714);
   width: 88px;
   height: 88px;
   top: 2%;
   right: 31%;
   transform: rotate(-12deg)
}

.philo-tri--4 {
   clip-path: polygon(100% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #22d3ee73, #22d3ee14);
   width: 152px;
   height: 152px;
   bottom: 9%;
   right: 7%
}

.philo-tri--5 {
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #7ed9578c, #7ed9571a);
   width: 68px;
   height: 68px;
   top: 47%;
   right: 39%;
   transform: rotate(18deg)
}

.philo-tri--6 {
   clip-path: polygon(100% 0, 0 100%, 100% 100%);
   background: linear-gradient(150deg, #3c7c2180, #3c7c2114);
   width: 108px;
   height: 108px;
   bottom: 27%;
   right: 30%
}

.philo-tri--7 {
   clip-path: polygon(0 0, 100% 100%, 100% 0);
   background: linear-gradient(150deg, #40ae7e80, #40ae7e14);
   width: 132px;
   height: 132px;
   top: 16%;
   right: 0;
   transform: rotate(-6deg)
}

.philo-tri--8 {
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #fff9, #ffffff29);
   width: 58px;
   height: 58px;
   bottom: 3%;
   right: 41%
}

.principle-row__index {
   align-self: center
}

.principle-row__icon {
   justify-content: start;
   place-items: center;
   display: grid
}

.principle-row__icon svg {
   width: 52px;
   height: 52px
}

.section--light .principle-row .principle-row__icon {
   color: #fff
}

.prose {
   max-width: 780px
}

.prose p {
   color: var(--ink)
}

.prose strong {
   color: var(--ink)
}

.prose__signoff {
   font-family: var(--display);
   color: var(--amber);
   font-size: 1.15rem;
   font-style: italic
}

.prose a {
   color: var(--green-bright)
}

.director {
   grid-template-columns: .78fr 1.22fr;
   align-items: center;
   gap: clamp(1.6rem, 4vw, 3.2rem);
   display: grid
}

.director__media {
   margin: 0
}

.director__photo {
   aspect-ratio: 4/5;
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: var(--shadow-md), inset 0 0 40px #7ed9570f;
   background: linear-gradient(160deg, #7ed9571f, #fbb3070f);
   place-items: center;
   display: grid;
   position: relative;
   overflow: hidden
}

.director__photo:after {
   content: "";
   background: var(--grad);
   height: 3px;
   position: absolute;
   inset: auto 0 0
}

.director__photo img {
   object-fit: cover;
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0
}

.director__photo svg {
   width: 46%;
   height: 46%;
   color: var(--ink-soft);
   opacity: .5
}

.director__plate {
   margin-top: 1.1rem
}

.director__plate strong {
   font-family: var(--display);
   color: var(--ink);
   font-size: 1.18rem;
   display: block
}

.director__plate span {
   font-family: var(--mono);
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--amber);
   font-size: .72rem
}

.director__body p {
   color: var(--ink-soft);
   margin: 0 0 1.7rem;
   font-size: 1.05rem
}

.founder {
   background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 72%);
   border-block: 1px solid #de9d2c52;
   position: relative;
   overflow: hidden
}

.founder>.container {
   z-index: 1;
   position: relative
}

.founder .eyebrow {
   color: var(--gold)
}

.founder .eyebrow:before {
   background: var(--gold);
   box-shadow: 0 0 8px var(--gold)
}

.founder .section__head h2 {
   color: #eaf1ff
}

.founder .director__body p,
.founder .prose p {
   color: #c2d0ea
}

.founder .note {
   color: #8ea3c8
}

.founder .director__photo {
   box-shadow: var(--shadow-md), inset 0 0 40px #de9d2c14;
   border-color: #de9d2c73
}

.founder .director__photo:after {
   background: linear-gradient(120deg, var(--gold), #ffe6a8)
}

.founder .director__plate strong {
   color: #fff
}

.founder .director__plate span {
   color: var(--gold)
}

.founder .director__quote {
   border-left-color: var(--gold);
   color: #fff;
   text-shadow: 0 0 18px #de9d2c47
}

.founder .btn--gold {
   background: linear-gradient(120deg, var(--gold), #f4c869);
   color: var(--navy);
   box-shadow: 0 8px 26px #de9d2c4d
}

.founder .btn--gold:hover {
   box-shadow: 0 12px 34px #de9d2c80
}

.founder__mesh {
   z-index: 0;
   pointer-events: none;
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0;
   -webkit-mask-image: radial-gradient(110% 100%, #000 50%, #0000 100%);
   mask-image: radial-gradient(110% 100%, #000 50%, #0000 100%)
}

.director__quote {
   border-left: 3px solid var(--amber);
   font-family: var(--serif);
   color: var(--ink);
   text-shadow: 0 0 18px #fbb3072e;
   margin: 0 0 1.7rem;
   padding: .2rem 0 .2rem 1.3rem;
   font-size: clamp(1.2rem, 2.4vw, 1.55rem);
   font-style: italic;
   line-height: 1.4
}

.director--compact {
   grid-template-columns: .55fr 1.45fr;
   gap: clamp(1.2rem, 3vw, 2.2rem)
}

.director--founder {
   grid-template-columns: 1.55fr .45fr;
   align-items: start
}

.director--founder .director__media {
   max-width: 240px
}

.director--founder .director__body p {
   text-align: justify;
   margin: 0 0 1rem;
   font-size: .98rem;
   line-height: 1.6
}

.director--founder .director__text .section__head {
   margin-bottom: 1.2rem
}

#about-founder {
   position: relative;
   overflow: hidden
}

#about-founder>.container {
   z-index: 1;
   position: relative
}

#contact-inquiries {
   position: relative;
   overflow: hidden
}

#contact-inquiries>.container {
   z-index: 1;
   position: relative
}

#contact-careers .section__head {
   text-align: center;
   max-width: none
}

@media (width<=760px) {
   .director--founder {
      grid-template-columns: 1fr
   }
}

#philo-knowledge {
   position: relative;
   overflow: hidden
}

#philo-knowledge .container {
   padding-right: clamp(0px, 42%, 600px)
}

.knowledge-split {
   display: block
}

.knowledge-text {
   flex-direction: column;
   justify-content: center;
   display: flex
}

.knowledge-text .section__head {
   margin-bottom: 1.4rem
}

.knowledge-media {
   width: clamp(320px, 46%, 640px);
   margin: 0;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0
}

.knowledge-media__frame {
   background: linear-gradient(160deg, #fff, #eef6e2);
   border-radius: 0;
   height: 100%;
   position: relative;
   overflow: hidden
}

.knowledge-media__frame:after {
   content: "";
   background: var(--grad);
   height: 3px;
   position: absolute;
   inset: auto 0 0
}

.knowledge-media__frame img {
   object-fit: cover;
   object-position: left center;
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0
}

@media (width<=760px) {
   #philo-knowledge {
      overflow: visible
   }

   #philo-knowledge .container {
      padding-right: 0
   }

   .knowledge-media {
      width: auto;
      margin: 0 0 1.6rem;
      position: static
   }

   .knowledge-media__frame {
      aspect-ratio: 16/9;
      height: auto
   }
}

.page-hero {
   border-bottom: 1px solid var(--line-strong);
   padding: clamp(4rem, 9vw, 6.5rem) 0 clamp(3rem, 6vw, 4.5rem);
   position: relative;
   overflow: hidden
}

.page-hero:before {
   content: "";
   z-index: 0;
   pointer-events: none;
   background: radial-gradient(50% 80% at 12% 0%, var(--green-soft), transparent 60%), radial-gradient(40% 70% at 92% 20%, var(--amber-soft), transparent 60%);
   position: absolute;
   inset: 0
}

.page-hero__mesh {
   z-index: 0;
   pointer-events: none;
   width: 58%;
   height: 100%;
   position: absolute;
   top: 0;
   bottom: 0;
   right: 0;
   -webkit-mask-image: linear-gradient(90deg, #0000, #000 38%);
   mask-image: linear-gradient(90deg, #0000, #000 38%)
}

.page-hero__deco {
   pointer-events: none;
   z-index: 0;
   opacity: .9;
   width: 360px;
   height: 300px;
   position: absolute;
   top: -50px;
   right: -40px
}

.page-hero .container {
   z-index: 1;
   position: relative
}

.page-hero__icon {
   width: 60px;
   height: 60px;
   color: var(--green-bright);
   background: var(--green-soft);
   border: 1px solid var(--line-strong);
   box-shadow: var(--glow-green);
   border-radius: 16px;
   place-items: center;
   margin-bottom: 1.2rem;
   display: inline-grid
}

.page-hero__icon svg {
   width: 32px;
   height: 32px
}

.page-hero__eye {
   z-index: 0;
   pointer-events: none;
   width: min(440px, 42vw);
   position: absolute;
   top: 50%;
   right: 11%;
   transform: translateY(-50%)
}

.scifi-eye {
   filter: drop-shadow(0 0 3px #d6ffe199)drop-shadow(0 0 11px #7ed957b3)drop-shadow(0 0 22px #22d3ee6b);
   width: 100%;
   height: auto;
   display: block
}

.scifi-eye__ring {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 26s linear infinite eye-spin
}

.scifi-eye__lid {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 5.5s ease-in-out infinite eye-blink
}

@keyframes eye-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes eye-blink {

   0%,
   90%,
   to {
      transform: scaleY(1)
   }

   94%,
   95% {
      transform: scaleY(.06)
   }

   98% {
      transform: scaleY(1)
   }
}

.page-hero__trinity {
   z-index: 0;
   pointer-events: none;
   width: min(420px, 40vw);
   position: absolute;
   top: 50%;
   right: 9%;
   transform: translateY(-50%)
}

.trinity {
   filter: drop-shadow(0 0 3px #d6ffe180)drop-shadow(0 0 12px #7ed9578c)drop-shadow(0 0 24px #22d3ee59);
   width: 100%;
   height: auto;
   display: block
}

.trinity__ring {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 30s linear infinite tri-spin
}

.trinity__web {
   animation: 2.6s linear infinite tri-flow
}

.trinity__spokes line {
   animation: 2.2s linear infinite tri-flow
}

.trinity__core {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 4s ease-in-out infinite tri-pulse
}

.trinity__node {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 3.4s ease-in-out infinite tri-node
}

.trinity__node--tech {
   animation-delay: 0s
}

.trinity__node--earth {
   animation-delay: 1.1s
}

.trinity__node--wisdom {
   animation-delay: 2.2s
}

@keyframes tri-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes tri-flow {
   to {
      stroke-dashoffset: -32px
   }
}

@keyframes tri-pulse {

   0%,
   to {
      opacity: .9;
      transform: scale(1)
   }

   50% {
      opacity: 1;
      transform: scale(1.12)
   }
}

@keyframes tri-node {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.08)
   }
}

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

   .trinity__ring,
   .trinity__web,
   .trinity__spokes line,
   .trinity__core,
   .trinity__node {
      animation: none
   }
}

@media (width<=760px) {
   .page-hero__trinity {
      opacity: .5;
      right: -6%
   }
}

.page-hero__atom {
   z-index: 0;
   pointer-events: none;
   width: min(440px, 42vw);
   position: absolute;
   top: 50%;
   right: 10%;
   transform: translateY(-50%)
}

.atom {
   filter: drop-shadow(0 0 3px #d6ffe180)drop-shadow(0 0 12px #7ed9578c)drop-shadow(0 0 24px #22d3ee59);
   width: 100%;
   height: auto;
   display: block
}

.atom__orbit {
   transform-box: view-box;
   transform-origin: 120px 120px
}

.atom__orbit--1 {
   animation: 6s linear infinite atom-spin
}

.atom__orbit--2 {
   animation: 8.5s linear infinite reverse atom-spin
}

.atom__orbit--3 {
   animation: 7.2s linear infinite atom-spin
}

.atom__nucleus {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 3.6s ease-in-out infinite atom-pulse
}

@keyframes atom-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes atom-pulse {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.14)
   }
}

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

   .atom__orbit,
   .atom__nucleus {
      animation: none
   }
}

@media (width<=760px) {
   .page-hero__atom {
      opacity: .5;
      right: -6%
   }
}

.page-hero__planet {
   z-index: 0;
   pointer-events: none;
   width: min(440px, 42vw);
   position: absolute;
   top: 50%;
   right: 10%;
   transform: translateY(-50%)
}

.planet {
   filter: drop-shadow(0 0 3px #d6ffe180)drop-shadow(0 0 14px #7ed95799)drop-shadow(0 0 26px #4c822359);
   width: 100%;
   height: auto;
   display: block
}

.planet__orbit {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 16s linear infinite planet-spin
}

.planet__leaf {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 16s linear infinite reverse planet-spin
}

.planet__globe {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 6.5s ease-in-out infinite planet-bob
}

@keyframes planet-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes planet-bob {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.04)
   }
}

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

   .planet__orbit,
   .planet__leaf,
   .planet__globe {
      animation: none
   }
}

@media (width<=760px) {
   .page-hero__planet {
      opacity: .5;
      right: -6%
   }
}

.page-hero__foundation {
   z-index: 0;
   pointer-events: none;
   width: min(430px, 41vw);
   position: absolute;
   top: 50%;
   right: 10%;
   transform: translateY(-50%)
}

.foundation {
   filter: drop-shadow(0 0 3px #d6ffe1a6)drop-shadow(0 0 12px #7ed957cc)drop-shadow(0 0 26px #39ff7873);
   width: 100%;
   height: auto;
   display: block
}

.foundation__rays {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 44s linear infinite found-spin
}

.foundation__halo {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 30s linear infinite reverse found-spin
}

.foundation__star {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 3.4s ease-in-out infinite found-twinkle
}

.foundation__book {
   transform-box: view-box;
   transform-origin: 120px 132px;
   animation: 6s ease-in-out infinite found-bob
}

@keyframes found-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes found-twinkle {

   0%,
   to {
      opacity: .85;
      transform: scale(1)
   }

   50% {
      opacity: 1;
      transform: scale(1.25)
   }
}

@keyframes found-bob {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.03)
   }
}

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

   .foundation__rays,
   .foundation__halo,
   .foundation__star,
   .foundation__book {
      animation: none
   }
}

@media (width<=760px) {
   .page-hero__foundation {
      opacity: .5;
      right: -6%
   }
}

.page-hero__insights {
   z-index: 0;
   pointer-events: none;
   width: min(420px, 40vw);
   position: absolute;
   top: 50%;
   right: 11%;
   transform: translateY(-50%)
}

.insight {
   filter: drop-shadow(0 0 3px #d6ffe180)drop-shadow(0 0 12px #7ed9578c)drop-shadow(0 0 24px #22d3ee59);
   width: 100%;
   height: auto;
   display: block
}

.insight__ripple {
   transform-box: view-box;
   transform-origin: 120px 120px;
   opacity: 0;
   animation: 3.3s ease-out infinite insight-ripple
}

.insight__ripple--2 {
   animation-delay: 1.1s
}

.insight__ripple--3 {
   animation-delay: 2.2s
}

.insight__orbit {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 18s linear infinite insight-spin
}

.insight__core {
   transform-box: view-box;
   transform-origin: 120px 120px;
   animation: 3.6s ease-in-out infinite insight-pulse
}

@keyframes insight-ripple {
   0% {
      opacity: 0;
      transform: scale(.32)
   }

   14% {
      opacity: .7
   }

   to {
      opacity: 0;
      transform: scale(1.55)
   }
}

@keyframes insight-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes insight-pulse {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.1)
   }
}

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

   .insight__ripple,
   .insight__orbit,
   .insight__core {
      animation: none
   }

   .insight__ripple {
      opacity: .4
   }
}

@media (width<=760px) {
   .page-hero__insights {
      opacity: .5;
      right: -6%
   }
}

.page-hero h1 {
   max-width: 18ch;
   font-size: clamp(2.1rem, 5vw, 3.5rem)
}

.page-hero .lead {
   max-width: 680px
}

.page-hero--tech:before {
   background: radial-gradient(60% 80% at 12% 0, #7ed95742, #0000 60%)
}

.page-hero--earth .eyebrow {
   color: var(--green-bright)
}

.page-hero--earth .eyebrow:before {
   background: var(--green-bright);
   box-shadow: 0 0 8px var(--green-bright)
}

.page-hero--earth:before {
   background: radial-gradient(60% 80% at 12% 0, #4c822352, #0000 60%)
}

.page-hero--wisdom:before {
   background: radial-gradient(60% 80% at 12% 0%, var(--amber-soft), transparent 60%)
}

.page-hero--wisdom .page-hero__icon {
   color: var(--amber-bright);
   background: var(--amber-soft);
   box-shadow: var(--glow-amber);
   border-color: #fbb30757
}

.page-hero--heritage:before {
   background: radial-gradient(58% 80% at 12% 0, #de9d2c33, #0000 62%), radial-gradient(46% 70% at 90% 16%, #001a4b6b, #0000 64%)
}

.page-hero--heritage .eyebrow {
   color: var(--gold)
}

.page-hero--heritage .eyebrow:before {
   background: var(--gold);
   box-shadow: 0 0 8px var(--gold)
}

.page-hero--heritage .page-hero__icon {
   color: var(--gold);
   background: #de9d2c24;
   border-color: #de9d2c6b;
   box-shadow: 0 0 0 1px #de9d2c4d, 0 0 28px #de9d2c40
}

.vision2050__top {
   grid-template-columns: 1.5fr .5fr;
   align-items: center;
   gap: clamp(1.5rem, 4vw, 3rem);
   margin-bottom: 2.6rem;
   display: grid
}

.vision2050__intro {
   min-width: 0
}

.vision2050__statement {
   font-family: var(--display);
   max-width: 24ch;
   margin-bottom: 0;
   font-size: clamp(1.5rem, 3.6vw, 2.6rem);
   font-weight: 500
}

.vision2050__art {
   justify-content: center;
   display: flex
}

.vision-illu {
   filter: drop-shadow(0 14px 30px #2e7d522e);
   width: 100%;
   max-width: 300px;
   height: auto
}

.vi-chakra {
   transform-origin: 180px 180px;
   animation: 28s linear infinite vi-spin
}

@keyframes vi-spin {
   to {
      transform: rotate(360deg)
   }
}

.vi-star {
   transform-origin: 300px 84px;
   animation: 3.2s ease-in-out infinite vi-pulse
}

@keyframes vi-pulse {

   0%,
   to {
      opacity: .65;
      transform: scale(.9)
   }

   50% {
      opacity: 1;
      transform: scale(1.15)
   }
}

.timeline {
   grid-template-columns: repeat(4, 1fr);
   gap: 1.5rem;
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid;
   position: relative
}

.timeline:before {
   content: "";
   background: var(--grad);
   height: 1px;
   position: absolute;
   top: 10px;
   left: 0;
   right: 0;
   box-shadow: 0 0 10px #7ed95780
}

.timeline li {
   padding-top: 2rem;
   position: relative
}

.timeline li:before {
   content: "";
   background: var(--bg-900);
   border: 2px solid var(--amber);
   width: 15px;
   height: 15px;
   box-shadow: 0 0 12px var(--amber);
   border-radius: 50%;
   position: absolute;
   top: 3px;
   left: 0
}

.timeline span {
   font-family: var(--display);
   color: var(--green-bright);
   font-size: 1.5rem;
   font-weight: 700;
   display: block
}

.timeline p {
   color: var(--ink-soft);
   margin: .3rem 0 0;
   font-size: .9rem
}

.vision2050 {
   color: #1a2230;
   background: #fff;
   border-block: 1px solid #4c82232e;
   position: relative;
   overflow: hidden
}

.vision2050 .container {
   z-index: 1;
   position: relative
}

.vision2050:after {
   content: "";
   z-index: 2;
   background: linear-gradient(90deg, #4c8223 0 25%, #10b981 25% 50%, #0a0f0a 50% 75%, #22d3ee 75% 100%);
   height: 4px;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   box-shadow: 0 0 12px #22d3ee59
}

.vision2050__deco {
   pointer-events: none;
   z-index: 0;
   width: 360px;
   height: 330px;
   position: absolute;
   top: -50px;
   right: -50px
}

.v-tri {
   clip-path: polygon(100% 0, 100% 100%, 0 0);
   -webkit-backdrop-filter: blur(7px);
   backdrop-filter: blur(7px);
   position: absolute
}

.v-tri--1 {
   filter: drop-shadow(0 8px 20px #4c822340);
   background: linear-gradient(160deg, #4c822380, #4c82231a);
   width: 260px;
   height: 260px;
   top: 0;
   right: 0
}

.v-tri--2 {
   filter: drop-shadow(0 8px 18px #10b9814d);
   background: linear-gradient(160deg, #10b98185, #10b9811a);
   width: 190px;
   height: 190px;
   top: 28px;
   right: 58px
}

.v-tri--3 {
   background: linear-gradient(160deg, #2e9e5b73, #2e9e5b14);
   width: 140px;
   height: 140px;
   top: -12px;
   right: 92px
}

.v-tri--4 {
   filter: drop-shadow(0 0 1px #fffc);
   background: linear-gradient(160deg, #ffffff8c, #ffffff1f);
   width: 120px;
   height: 120px;
   top: 64px;
   right: 4px
}

.vision2050 .eyebrow {
   color: var(--green)
}

.vision2050 .eyebrow:before {
   background: var(--green);
   box-shadow: 0 0 8px #4c822373
}

.vision2050 .vision2050__statement {
   background: linear-gradient(110deg, #4c8223 0%, #2e9e5b 45%, #10b981 100%);
   color: #0000;
   -webkit-background-clip: text;
   background-clip: text
}

.vision2050 .timeline span {
   color: var(--green)
}

.vision2050 .timeline p {
   color: #4a5568
}

.vision2050 .timeline:before {
   box-shadow: none
}

.vision2050 .timeline li:before {
   border-color: var(--amber);
   background: #fff;
   box-shadow: 0 0 10px #fbb30766
}

.principle-card,
.feature,
.metric,
.insight-card,
.entity-card,
.value-chip,
.contact-aside,
.contact-entity,
.principle-row {
   background: var(--panel);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   border: 1px solid var(--line)
}

.principle-grid {
   grid-template-columns: repeat(auto-fit, minmax(186px, 1fr));
   gap: 1.2rem;
   display: grid
}

.principle-card {
   border-radius: var(--radius);
   transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
   padding: 1.7rem 1.4rem;
   display: block;
   position: relative;
   overflow: hidden
}

.principle-card:before {
   content: "";
   background: var(--grad);
   width: 3px;
   position: absolute;
   inset: 0 auto 0 0
}

.principle-card:hover {
   border-color: var(--line-strong);
   box-shadow: var(--glow-green);
   transform: translateY(-6px)
}

.principle-card__index {
   font-family: var(--mono);
   color: var(--amber);
   font-size: 1.3rem;
   font-weight: 700
}

.principle-card h3 {
   margin: .3rem 0 .2rem;
   font-size: 1.4rem
}

.principle-card__pandava {
   color: var(--ink-soft);
   margin: 0 0 .6rem;
   font-style: italic
}

.principle-card__essence {
   font-family: var(--mono);
   letter-spacing: .02em;
   color: var(--green-bright);
   margin: 0;
   font-size: .74rem
}

.principle-rows {
   gap: 1.2rem;
   display: grid
}

.principle-row {
   border-radius: var(--radius);
   transition: border-color .25s var(--ease), box-shadow .25s var(--ease);
   grid-template-columns: 80px 1fr;
   align-items: start;
   gap: 1.5rem;
   padding: 1.7rem;
   display: grid
}

.principle-row:hover {
   border-color: var(--line-strong);
   box-shadow: var(--glow-green)
}

.principle-row__index span {
   font-family: var(--mono);
   color: var(--amber);
   font-size: 2.4rem;
   font-weight: 700
}

.principle-row__body h3 {
   font-size: 1.5rem
}

.principle-row__body h3 em {
   color: var(--green-bright);
   font-size: 1.05rem;
   font-style: italic;
   font-weight: 500
}

.principle-row__essence {
   font-family: var(--mono);
   text-transform: uppercase;
   letter-spacing: .1em;
   color: var(--ink-soft);
   font-size: .7rem
}

.principle-row__body>p:last-child {
   color: var(--ink-soft);
   margin-bottom: 0
}

.value-grid {
   grid-template-columns: repeat(5, clamp(5.5rem, 12vw, 8.5rem));
   justify-content: center;
   gap: .4rem;
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid
}

.value-chip {
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   perspective: 850px;
   background: 0 0;
   border: 0;
   outline: none;
   width: auto;
   height: clamp(5.8rem, 13vw, 8rem);
   padding: 0;
   font-size: .88rem;
   font-weight: 500;
   line-height: 1.25
}

.value-chip__inner {
   width: 100%;
   height: 100%;
   transform-style: preserve-3d;
   transition: transform .65s var(--ease);
   position: relative
}

.value-chip:hover .value-chip__inner,
.value-chip:focus-visible .value-chip__inner {
   transform: rotateY(180deg)
}

.value-chip__face {
   text-align: center;
   backface-visibility: hidden;
   border-radius: 16px;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: .5rem;
   padding: .6rem;
   display: flex;
   position: absolute;
   inset: 0
}

.value-chip__back {
   transform: rotateY(180deg)
}

.value-chip__icon {
   flex: none;
   place-items: center;
   display: inline-grid
}

.value-chip__icon svg {
   width: 46px;
   height: 46px;
   display: block
}

.value-chip__label {
   place-items: center;
   min-height: 2.3em;
   display: grid
}

.snapshot-grid,
.entity-grid {
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1.4rem;
   display: grid
}

.snapshot-card {
   border-radius: var(--radius);
   color: var(--ink);
   border: 1px solid var(--line);
   background: var(--panel);
   -webkit-backdrop-filter: blur(8px);
   backdrop-filter: blur(8px);
   transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
   padding: 1.9rem;
   display: block;
   position: relative;
   overflow: hidden
}

.snapshot-card:after {
   content: "";
   background: var(--grad);
   transform-origin: 0;
   height: 3px;
   transition: transform .3s var(--ease);
   position: absolute;
   inset: auto 0 0;
   transform: scaleX(0)
}

.snapshot-card:hover {
   border-color: var(--line-strong);
   box-shadow: var(--shadow-md);
   transform: translateY(-6px)
}

.snapshot-card:hover:after {
   transform: scaleX(1)
}

.snapshot-card__media {
   background: linear-gradient(150deg, #ffffff2e, #ffffff05);
   border-bottom: 1px solid #fff3;
   justify-content: center;
   align-items: center;
   height: 132px;
   margin: -1.9rem -1.9rem 1.3rem;
   display: flex
}

.snapshot-card__media svg {
   color: #fff;
   opacity: .95;
   filter: drop-shadow(0 3px 8px #0000004d);
   width: 70px;
   height: 70px;
   transition: transform .25s var(--ease)
}

.snapshot-card:hover .snapshot-card__media svg {
   transform: scale(1.08)
}

.snapshot-card__id {
   font-family: var(--mono);
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--amber);
   font-size: .7rem
}

.snapshot-card h3 {
   margin: .5rem 0;
   font-size: 1.5rem
}

.snapshot-card p {
   color: var(--ink-soft);
   margin: 0
}

.snapshot-card__btn {
   font-family: var(--display);
   color: #fff;
   transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
   background: #ffffff1a;
   border: 1px solid #ffffff80;
   border-radius: 999px;
   align-items: center;
   gap: .4rem;
   margin-top: 1.2rem;
   padding: .5rem 1.1rem;
   font-size: .85rem;
   font-weight: 600;
   display: inline-flex
}

.snapshot-card__btn svg {
   width: 15px;
   height: 15px;
   transition: transform .2s var(--ease)
}

.snapshot-card__btn:hover {
   color: #3a661a;
   background: #fff;
   border-color: #fff
}

.snapshot-card__btn:hover svg {
   transform: translate(3px)
}

.snapshot-card--tech h3,
.snapshot-card--earth h3 {
   color: var(--green-bright)
}

.snapshot-card--wisdom h3 {
   color: var(--amber-bright)
}

.entity-card {
   border-radius: var(--radius);
   transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
   padding: 2.1rem;
   position: relative;
   overflow: hidden
}

.entity-card:before {
   content: "";
   background: var(--green);
   height: 4px;
   box-shadow: 0 0 14px var(--green-bright);
   position: absolute;
   inset: 0 0 auto
}

.entity-card--tech:before {
   background: var(--green-bright)
}

.entity-card--earth:before {
   background: var(--green)
}

.entity-card--wisdom:before {
   background: var(--amber);
   box-shadow: 0 0 14px var(--amber)
}

.entity-card:hover {
   border-color: var(--line-strong);
   box-shadow: var(--shadow-md);
   transform: translateY(-5px)
}

.entity-card__id {
   font-family: var(--mono);
   letter-spacing: .12em;
   text-transform: uppercase;
   color: var(--amber);
   font-size: .7rem
}

.entity-card h3 {
   margin: .6rem 0 .4rem;
   font-size: 1.55rem
}

.entity-card--wisdom h3 {
   color: var(--amber-bright)
}

.entity-card--tech h3,
.entity-card--earth h3 {
   color: var(--green-bright)
}

.entity-card__tagline {
   color: var(--ink);
   font-style: italic
}

.entity-card__focus {
   color: var(--ink-soft);
   margin: 0
}

.entity-grid .entity-card {
   box-shadow: none;
   perspective: 1200px;
   background: 0 0;
   border: 0;
   padding: 0;
   text-decoration: none;
   display: block;
   overflow: visible
}

.entity-grid .entity-card:before {
   display: none
}

.entity-grid .entity-card:hover {
   box-shadow: none;
   border: 0;
   transform: none
}

.entity-card__inner {
   width: 100%;
   min-height: 380px;
   transform-style: preserve-3d;
   transition: transform .7s var(--ease);
   position: relative
}

.entity-card:hover .entity-card__inner,
.entity-card:focus-visible .entity-card__inner {
   transform: rotateY(180deg)
}

.entity-card__face {
   backface-visibility: hidden;
   border-radius: var(--radius);
   background: #fff;
   border: 1px solid #4c822333;
   flex-direction: column;
   gap: .5rem;
   padding: 2.1rem;
   display: flex;
   position: relative;
   overflow: hidden;
   box-shadow: 0 10px 26px #14280a14
}

.entity-card__face:before {
   content: "";
   height: 4px;
   position: absolute;
   inset: 0 0 auto
}

.entity-card--tech .entity-card__face:before {
   background: var(--green-bright);
   box-shadow: 0 0 14px var(--green-bright)
}

.entity-card--earth .entity-card__face:before {
   background: var(--green);
   box-shadow: 0 0 14px var(--green)
}

.entity-card--wisdom .entity-card__face:before {
   background: var(--amber);
   box-shadow: 0 0 14px var(--amber)
}

.entity-card__front {
   min-height: 380px;
   padding: 0
}

.entity-card__media {
   position: absolute;
   inset: 0;
   overflow: hidden
}

.entity-card__media img {
   object-fit: cover;
   width: 100%;
   height: 100%;
   display: block
}

.entity-card__back {
   justify-content: flex-start;
   gap: .4rem;
   padding: 1.7rem;
   position: absolute;
   inset: 0;
   transform: rotateY(180deg)
}

.entity-card__back .entity-card__id {
   font-size: .68rem
}

.entity-card__back h3 {
   margin: .3rem 0 .1rem;
   font-size: 1.25rem;
   line-height: 1.2
}

.entity-card__back .entity-card__tagline {
   font-size: .92rem
}

.entity-card__back .entity-card__focus {
   margin-top: .3rem;
   font-size: .86rem;
   line-height: 1.5
}

.entity-card__back .entity-card__cta {
   margin-top: auto
}

.entity-card:hover .entity-card__face,
.entity-card:focus-visible .entity-card__face {
   border-color: #4c822380;
   box-shadow: 0 16px 38px #14280a29
}

.entity-card__hint {
   font-family: var(--mono);
   letter-spacing: .08em;
   text-transform: uppercase;
   color: var(--green);
   opacity: .85;
   margin-top: auto;
   font-size: .72rem
}

.entity-card__cta {
   font-family: var(--mono);
   letter-spacing: .04em;
   color: #fff;
   background: linear-gradient(120deg, var(--green-bright), var(--amber));
   transition: transform .2s var(--ease), box-shadow .2s var(--ease);
   border-radius: 9px;
   align-self: flex-start;
   margin-top: auto;
   padding: .55rem .95rem;
   font-size: .76rem;
   box-shadow: 0 6px 18px #4c822347
}

.entity-card--wisdom .entity-card__cta {
   background: linear-gradient(120deg, var(--amber), #f4c869);
   color: #2a1e00
}

.entity-card:hover .entity-card__cta {
   transform: translateY(-2px);
   box-shadow: 0 10px 24px #4c822366
}

@media (prefers-reduced-motion:reduce) {
   .entity-card__inner {
      transition: none
   }
}

.feature-grid {
   grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
   gap: 1.2rem;
   display: grid
}

#sdg-framework .feature-grid {
   grid-template-columns: repeat(3, minmax(0, 1fr))
}

#sdg-framework .feature {
   background: linear-gradient(160deg, #fff 0%, #e9f4d8 100%);
   border: 1px solid #4c82233d
}

#sdg-framework .feature:hover {
   border-color: #4c822380;
   box-shadow: 0 14px 32px #4c822329
}

@media (width<=720px) {
   #sdg-framework .feature-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr))
   }
}

@media (width<=460px) {
   #sdg-framework .feature-grid {
      grid-template-columns: 1fr
   }
}

.feature {
   border-radius: var(--radius);
   transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
   padding: 1.6rem;
   position: relative;
   overflow: hidden
}

.feature:before {
   content: "";
   background: var(--grad);
   transform-origin: top;
   width: 3px;
   transition: transform .3s var(--ease);
   position: absolute;
   inset: 0 auto 0 0;
   transform: scaleY(0)
}

.feature:hover {
   border-color: var(--line-strong);
   box-shadow: var(--glow-green);
   transform: translateY(-5px)
}

.feature:hover:before {
   transform: scaleY(1)
}

.feature h3 {
   color: var(--ink);
   margin-bottom: .4rem;
   font-size: 1.15rem
}

.feature p {
   color: var(--ink-soft);
   margin: 0;
   font-size: .95rem
}

.feature__icon {
   width: 44px;
   height: 44px;
   color: var(--green-bright);
   background: var(--green-soft);
   border: 1px solid var(--line-strong);
   border-radius: 12px;
   place-items: center;
   margin-bottom: .9rem;
   display: grid
}

.feature__icon svg {
   width: 24px;
   height: 24px
}

.section--light .feature__icon {
   color: var(--green);
   background: #4c82231a;
   border-color: #4c822338
}

.pillars {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1.2rem;
   display: grid
}

.pillar {
   text-align: center;
   border-radius: var(--radius);
   background: var(--panel);
   border: 1px solid var(--line);
   transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
   padding: 2.2rem 1.5rem;
   position: relative;
   overflow: hidden
}

.pillar:before {
   content: "";
   background: radial-gradient(60% 60% at 50% 0%, var(--green-soft), transparent 70%);
   position: absolute;
   inset: 0
}

.pillar:after {
   content: "";
   background: var(--grad);
   transform-origin: 0;
   height: 3px;
   transition: transform .3s var(--ease);
   position: absolute;
   inset: 0 0 auto;
   transform: scaleX(0)
}

.pillar:hover {
   border-color: var(--line-strong);
   box-shadow: var(--glow-green);
   transform: translateY(-5px)
}

.pillar:hover:after {
   transform: scaleX(1)
}

.pillar span {
   font-family: var(--display);
   color: var(--amber);
   margin-bottom: .5rem;
   font-size: 1.5rem;
   display: block;
   position: relative
}

.pillar p {
   color: var(--ink-soft);
   margin: 0;
   font-size: .94rem;
   position: relative
}

.metrics {
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
   gap: 1.2rem;
   display: grid
}

.metric {
   border-radius: var(--radius);
   transition: transform .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease);
   padding: 1.7rem;
   position: relative;
   overflow: hidden
}

.metric:before {
   content: "";
   background: var(--grad);
   transform-origin: top;
   width: 3px;
   transition: transform .3s var(--ease);
   position: absolute;
   inset: 0 auto 0 0;
   transform: scaleY(0)
}

.metric:hover {
   border-color: var(--line-strong);
   box-shadow: var(--glow-green);
   transform: translateY(-5px)
}

.metric:hover:before {
   transform: scaleY(1)
}

.metric strong {
   font-family: var(--display);
   color: var(--green-bright);
   margin-bottom: .3rem;
   font-size: 1.4rem;
   display: block
}

.metric span {
   color: var(--ink-soft)
}

.insight-grid {
   grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
   gap: 1.4rem;
   display: grid
}

.insight-card {
   border-radius: var(--radius);
   transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
   padding: 1.9rem
}

.insight-card:hover {
   border-color: var(--line-strong);
   box-shadow: var(--glow-green);
   transform: translateY(-5px)
}

.insight-card__tag {
   font-family: var(--mono);
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--amber);
   font-size: .7rem
}

.insight-card h3 {
   margin: .5rem 0 .6rem;
   font-size: 1.32rem
}

.insight-card p {
   color: var(--ink-soft)
}

.insight-card__meta {
   font-family: var(--mono);
   color: var(--green-bright);
   margin: 0;
   font-size: .74rem
}

.motto-band {
   text-align: center;
   border-block: 1px solid var(--line);
   background: radial-gradient(42% 60% at 16% 8%, #fbb30729, transparent 70%), radial-gradient(46% 64% at 88% 88%, #4c82234d, transparent 70%), radial-gradient(38% 50% at 8% 90%, #7ed95724, transparent 70%), var(--bg-900);
   padding: clamp(3.5rem, 7vw, 5.5rem) 0;
   position: relative;
   overflow: hidden
}

.motto-band__mesh {
   z-index: 0;
   pointer-events: none;
   width: 100%;
   height: 100%;
   position: absolute;
   inset: 0;
   -webkit-mask-image: radial-gradient(120% 100%, #000 55%, #0000 100%);
   mask-image: radial-gradient(120% 100%, #000 55%, #0000 100%)
}

.motto-band__text {
   z-index: 1;
   font-family: var(--display);
   background: var(--grad);
   color: #0000;
   -webkit-background-clip: text;
   background-clip: text;
   max-width: 26ch;
   margin: 0 auto;
   font-size: clamp(1.3rem, 3vw, 2rem);
   font-style: italic;
   position: relative
}

.cta-band {
   padding: clamp(2.5rem, 6vw, 4.5rem) 0;
   position: relative
}

.cta-band__inner {
   box-shadow: var(--shadow-md);
   background: linear-gradient(120deg, #fff 0%, #fff5db 52%, #f3cf6b 100%);
   border: 1px solid #de9d2c73;
   border-radius: 22px;
   flex-wrap: wrap;
   justify-content: space-between;
   align-items: center;
   gap: 2rem;
   padding: clamp(2rem, 4vw, 3.2rem);
   display: flex;
   position: relative;
   overflow: hidden
}

.cta-band__inner:after {
   content: "";
   background: linear-gradient(120deg, var(--gold), #fff0c4);
   height: 4px;
   position: absolute;
   inset: 0 0 auto
}

.founder__cta {
   padding: clamp(1.8rem, 4vw, 2.8rem) 0 0
}

.founder__cta-lead {
   align-items: center;
   gap: 1.8rem;
   min-width: 0;
   display: flex
}

.founder__cta-icon {
   color: var(--navy);
   flex: none;
   place-items: center;
   display: grid
}

.founder__cta-icon svg {
   width: 84px;
   height: 84px
}

.cta-band h2 {
   color: #14213d;
   margin-bottom: .4rem;
   font-size: clamp(1.4rem, 3vw, 2rem)
}

.cta-band p {
   color: #4a4636;
   max-width: 48ch;
   margin: 0
}

.principles,
.ecosystem-snapshot,
.cta-band,
.motto-band {
   position: relative;
   overflow: hidden
}

.principles {
   border-block-color: #ffffff29;
   background: linear-gradient(135deg, #498023 0%, #749f2c 100%);
   border-top: 0
}

.principles .prose p {
   color: #ffffffeb;
   z-index: 1;
   position: relative
}

.principles .prose strong {
   color: #fff
}

.name-heritage {
   grid-template-columns: .85fr 1.15fr;
   align-items: center;
   gap: clamp(1.8rem, 5vw, 4rem);
   display: grid
}

.name-heritage__text .section__head {
   margin-bottom: 1.4rem
}

.name-heritage__art {
   justify-content: center;
   margin: 0;
   display: flex
}

.name-heritage__art svg {
   color: #ffffffe6;
   width: 100%;
   max-width: 320px;
   height: auto
}

.name-heritage__art .nh-ring {
   stroke: #ffffff52;
   stroke-width: 1.5px
}

.name-heritage__art .nh-ring--outer {
   stroke: #ffffff80;
   stroke-width: 2px
}

.name-heritage__art .nh-ring--faint {
   stroke: #ffffff2e;
   stroke-dasharray: 3 7
}

.name-heritage__art .nh-ticks line {
   stroke: #ffffff8c;
   stroke-width: 2px
}

.name-heritage__art .nh-pentad {
   stroke: #fbb307;
   stroke-width: 2px;
   fill: #fbb30714
}

.name-heritage__art .nh-spokes line {
   stroke: #fff6;
   stroke-width: 1.5px
}

.name-heritage__art .nh-nodes circle {
   fill: #fbb307;
   stroke: #0f200859;
   stroke-width: 1.5px
}

.name-heritage__art .nh-core {
   fill: #fff;
   stroke: #fbb307;
   stroke-width: 2.5px
}

@media (width<=760px) {
   .name-heritage {
      grid-template-columns: 1fr;
      gap: 2rem
   }

   .name-heritage__art {
      order: -1
   }

   .name-heritage__art svg {
      max-width: 240px
   }
}

#found-programs {
   background: linear-gradient(160deg, #40ae7e 0%, #3c7c21 100%)
}

#found-programs .section__head h2,
#found-programs .eyebrow {
   color: #fff
}

#found-programs .eyebrow:before {
   background: #fff;
   box-shadow: 0 0 8px #fff9
}

.principle-card--reveal .principle-card__front {
   text-align: center;
   justify-content: center;
   align-items: center;
   gap: 1.1rem
}

.principle-card--reveal .principle-card__front .principle-card__icon {
   justify-content: center;
   margin: 0
}

.principle-card--reveal .principle-card__front .principle-card__icon svg {
   width: 58px;
   height: 58px
}

.principle-card--reveal .principle-card__front h3 {
   margin: 0
}

.principle-card--reveal .principle-card__back {
   justify-content: flex-start
}

.principle-card--reveal .principle-card__icon--sm {
   margin-bottom: .5rem
}

.principle-card--reveal .principle-card__icon--sm svg {
   width: 24px;
   height: 24px
}

#eco-collab:before,
#eco-collab:after,
#research-collab:before,
#research-collab:after,
#found-programs:before,
#found-programs:after,
#about-name:before,
#about-name:after {
   display: none
}

#eco-collab .collab-split {
   z-index: 1;
   grid-template-columns: 1fr minmax(170px, 250px);
   align-items: center;
   gap: clamp(1.6rem, 4vw, 3.4rem);
   display: grid;
   position: relative
}

#eco-collab .collab-text .section__head {
   margin-bottom: 1rem
}

.collab-art svg {
   filter: drop-shadow(0 0 4px #ffffff59)drop-shadow(0 6px 16px #00000040);
   width: 100%;
   height: auto;
   display: block
}

.collab-art__flow {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 22s linear infinite collab-spin
}

.collab-art__rings {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 5s ease-in-out infinite collab-pulse
}

.collab-art__core {
   transform-box: fill-box;
   transform-origin: 50%;
   animation: 5s ease-in-out infinite collab-core
}

@keyframes collab-spin {
   to {
      transform: rotate(360deg)
   }
}

@keyframes collab-pulse {

   0%,
   to {
      transform: scale(1)
   }

   50% {
      transform: scale(1.035)
   }
}

@keyframes collab-core {

   0%,
   to {
      opacity: .95;
      transform: scale(1)
   }

   50% {
      opacity: 1;
      transform: scale(1.3)
   }
}

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

   .collab-art__flow,
   .collab-art__rings,
   .collab-art__core {
      animation: none
   }
}

@media (width<=760px) {
   #eco-collab .collab-split {
      grid-template-columns: 1fr
   }

   .collab-art {
      max-width: 220px;
      margin-top: .6rem;
      transform: none
   }
}

.principles__mesh {
   z-index: 0;
   pointer-events: none;
   width: 100%;
   height: 58%;
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   -webkit-mask-image: linear-gradient(#0000 0%, #000 72%);
   mask-image: linear-gradient(#0000 0%, #000 72%)
}

.principles .principle-card {
   box-shadow: none;
   perspective: 1200px;
   -webkit-backdrop-filter: none;
   backdrop-filter: none;
   background: 0 0;
   border: 0;
   padding: 0;
   overflow: visible
}

.principles .principle-card:before {
   display: none
}

.principles .principle-card:hover {
   box-shadow: none;
   border: 0;
   transform: none
}

.principle-card__inner {
   width: 100%;
   min-height: 230px;
   transform-style: preserve-3d;
   transition: transform .75s var(--ease);
   display: block;
   position: relative
}

.principle-card:hover .principle-card__inner,
.principle-card:focus-visible .principle-card__inner {
   transform: rotateY(180deg)
}

.principle-card__face {
   backface-visibility: hidden;
   border-radius: var(--radius);
   background: linear-gradient(160deg, #fff 0%, #e7f3d6 100%);
   border: 1px solid #4c822338;
   flex-direction: column;
   padding: 1.6rem 1.3rem;
   display: flex;
   overflow: hidden;
   box-shadow: inset 0 0 32px #b4ffbe66, 0 12px 30px #14280a38
}

.principle-card__front {
   min-height: 230px;
   position: relative
}

.principle-card__back {
   position: absolute;
   inset: 0;
   transform: rotateY(180deg)
}

.principle-card:hover .principle-card__face,
.principle-card:focus-visible .principle-card__face {
   border-color: #4c822380
}

.principle-card__icon {
   color: #4c8223;
   filter: drop-shadow(0 1px 2px #4c822340);
   justify-content: start;
   place-items: center;
   margin-bottom: .9rem;
   display: grid
}

.principle-card__icon svg {
   width: 34px;
   height: 34px
}

.principles .principle-card__index {
   color: #fbb307;
   font-size: 1rem;
   position: absolute;
   top: 1.3rem;
   right: 1.4rem
}

.principles .principle-card h3 {
   color: #0f2008
}

.principles .principle-card__pandava {
   color: #233619
}

.principles .principle-card__essence {
   color: #1d3a10
}

.principle-card__back h3 {
   margin: 0 0 .5rem
}

.principle-card__desc {
   color: #233619;
   -webkit-line-clamp: 5;
   -webkit-box-orient: vertical;
   margin: 0;
   font-size: .84rem;
   line-height: 1.42;
   display: -webkit-box;
   overflow: hidden
}

.principle-card__more {
   font-family: var(--display);
   color: #fff;
   opacity: 0;
   transition: opacity .3s var(--ease), transform .3s var(--ease);
   background: linear-gradient(135deg, #5e9e2e, #4c8223);
   border-radius: 999px;
   align-self: center;
   align-items: center;
   gap: .35rem;
   margin-top: auto;
   padding: .45rem 1rem;
   font-size: .8rem;
   font-weight: 600;
   display: inline-flex;
   transform: translateY(8px);
   box-shadow: 0 6px 16px #4c82234d
}

.principle-card__more svg {
   width: 14px;
   height: 14px
}

.principle-card:hover .principle-card__more,
.principle-card:focus-visible .principle-card__more {
   opacity: 1;
   transition-delay: .45s;
   transform: translateY(0)
}

.principles>.container,
.ecosystem-snapshot>.container,
.cta-band>.container,
.motto-band>.container {
   z-index: 1;
   position: relative
}

.principles:before,
.principles:after,
.ecosystem-snapshot:before,
.ecosystem-snapshot:after,
.cta-band:before,
.cta-band:after {
   content: "";
   pointer-events: none;
   z-index: 0;
   -webkit-backdrop-filter: blur(7px);
   backdrop-filter: blur(7px);
   position: absolute
}

.principles:before {
   clip-path: polygon(0 0, 100% 0, 0 100%);
   filter: drop-shadow(0 8px 20px #4c822340);
   background: linear-gradient(330deg, #4c82231a, #4c82236b);
   width: 250px;
   height: 250px;
   top: -50px;
   left: -50px
}

.principles:after {
   clip-path: polygon(0 0, 100% 0, 0 100%);
   background: linear-gradient(330deg, #10b98114, #10b98175);
   width: 140px;
   height: 140px;
   top: -18px;
   left: 44px
}

.ecosystem-snapshot {
   color: #1a2230;
   background: linear-gradient(#fff 0%, #f4f8ee 100%);
   border-block: 1px solid #4c82232e
}

.ecosystem-snapshot .section__head h2 {
   color: #0f1a2e
}

.ecosystem-snapshot .eyebrow {
   color: var(--green)
}

.ecosystem-snapshot .eyebrow:before {
   background: var(--green);
   box-shadow: 0 0 8px #4c822373
}

.ecosystem-snapshot .snapshot-card {
   border-color: #ffffff2e
}

.ecosystem-snapshot .snapshot-card h3 {
   color: #fff
}

.ecosystem-snapshot .snapshot-card p {
   color: #ffffffd9
}

.ecosystem-snapshot .snapshot-card--tech {
   background: linear-gradient(155deg, #20a99a 0%, #0f766e 55%, #0b4a46 100%)
}

.ecosystem-snapshot .snapshot-card--earth {
   background: linear-gradient(155deg, #5e9e2e 0%, #4c8223 55%, #355f18 100%)
}

.ecosystem-snapshot .snapshot-card--wisdom {
   background: linear-gradient(155deg, #e3ad2f 0%, #c2870c 55%, #8a5e02 100%)
}

.ecosystem-snapshot:before,
.ecosystem-snapshot:after {
   display: none
}

.eco-deco {
   z-index: 0;
   pointer-events: none;
   width: 56%;
   height: 92%;
   position: absolute;
   bottom: 0;
   right: 0
}

.eco-tri {
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   position: absolute
}

.eco-tri--1 {
   clip-path: polygon(100% 0, 100% 100%, 0 100%);
   filter: drop-shadow(0 8px 22px #4c822338);
   background: linear-gradient(150deg, #4c822380, #4c82231a);
   width: 300px;
   height: 300px;
   bottom: 0;
   right: 3%
}

.eco-tri--2 {
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #10b98175, #10b98114);
   width: 220px;
   height: 220px;
   bottom: 4%;
   right: 30%
}

.eco-tri--3 {
   clip-path: polygon(100% 0, 100% 100%, 0 45%);
   background: linear-gradient(150deg, #fbb30766, #fbb3070f);
   width: 190px;
   height: 190px;
   bottom: 34%;
   right: -2%
}

.eco-tri--4 {
   clip-path: polygon(0 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #22d3ee61, #22d3ee0f);
   width: 170px;
   height: 170px;
   bottom: 0;
   right: 16%
}

.eco-tri--5 {
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #7ed95775, #7ed95714);
   width: 150px;
   height: 150px;
   bottom: 0;
   right: 42%
}

.eco-tri--6 {
   clip-path: polygon(100% 0, 0 100%, 100% 100%);
   background: linear-gradient(150deg, #14a0786b, #14a0780f);
   width: 140px;
   height: 140px;
   bottom: 40%;
   right: 8%
}

.eco-tri--7 {
   clip-path: polygon(0 0, 100% 0, 50% 100%);
   background: linear-gradient(150deg, #ffffff80, #ffffff1a);
   width: 120px;
   height: 120px;
   bottom: 26%;
   right: 34%
}

.eco-tri--8 {
   clip-path: polygon(100% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #fbb30757, #fbb3070d);
   width: 120px;
   height: 120px;
   bottom: 6%;
   right: 52%
}

.eco-tri--9 {
   clip-path: polygon(50% 0, 100% 100%, 0 100%);
   background: linear-gradient(150deg, #4c822366, #4c82230f);
   width: 100px;
   height: 100px;
   bottom: 30%;
   right: 22%
}

.cta-band:before,
.cta-band:after {
   display: none
}

.img-slider {
   z-index: 1;
   border-radius: var(--radius);
   border: 1px solid #ffffff38;
   margin-top: clamp(1.6rem, 4vw, 2.6rem);
   position: relative;
   overflow: hidden;
   box-shadow: 0 16px 40px #00000047
}

.img-slider__viewport {
   overflow: hidden
}

.img-slider__track {
   transition: transform .6s var(--ease);
   will-change: transform;
   display: flex
}

.img-slide {
   aspect-ratio: 16/9;
   background: #0003;
   flex: 0 0 100%;
   margin: 0
}

.img-slide img {
   object-fit: cover;
   width: 100%;
   height: 100%;
   display: block
}

.img-slider__nav {
   color: #fff;
   cursor: pointer;
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
   width: 44px;
   height: 44px;
   transition: background .2s var(--ease), transform .2s var(--ease);
   background: #070b0673;
   border: 1px solid #fff6;
   border-radius: 50%;
   place-items: center;
   font-size: 1.5rem;
   line-height: 1;
   display: grid;
   position: absolute;
   top: 50%;
   transform: translateY(-50%)
}

.img-slider__nav:hover {
   background: #070b06b3
}

.img-slider__nav--prev {
   left: 14px
}

.img-slider__nav--next {
   right: 14px
}

.img-slider__nav--prev:hover {
   transform: translateY(-50%)translate(-2px)
}

.img-slider__nav--next:hover {
   transform: translateY(-50%)translate(2px)
}

.img-slider__dots {
   gap: .5rem;
   display: flex;
   position: absolute;
   bottom: 14px;
   left: 50%;
   transform: translate(-50%)
}

.img-slider__dot {
   cursor: pointer;
   width: 9px;
   height: 9px;
   transition: background .2s var(--ease), transform .2s var(--ease);
   background: 0 0;
   border: 1px solid #ffffffb3;
   border-radius: 50%;
   padding: 0
}

.img-slider__dot.is-active {
   background: #fff;
   transform: scale(1.25)
}

@media (width<=560px) {
   .img-slider__nav {
      width: 36px;
      height: 36px;
      font-size: 1.2rem
   }
}

#iraa-global {
   background: linear-gradient(120deg, #3c7c21 0%, #f1a800 100%);
   border-block: 1px solid #fff3;
   position: relative;
   overflow: hidden
}

#iraa-global .section__head,
#iraa-global .feature-grid {
   z-index: 1;
   position: relative
}

#iraa-global .section__head {
   text-align: center;
   max-width: none;
   margin-inline: auto
}

#iraa-global .section__head h2,
#iraa-global .eyebrow {
   color: #fff
}

#iraa-global .eyebrow:before {
   background: #fff;
   box-shadow: 0 0 8px #fff9
}

#iraa-global .feature {
   background: #fffffff2;
   border: 1px solid #ffffff8c;
   flex-direction: column;
   display: flex;
   box-shadow: 0 12px 30px #14280a2e
}

#iraa-global .feature__head {
   align-items: center;
   gap: .85rem;
   margin-bottom: .7rem;
   display: flex
}

#iraa-global .feature__head .feature__icon {
   flex: none;
   margin-bottom: 0
}

#iraa-global .feature__head h3 {
   margin: 0
}

#iraa-global .feature__icon {
   color: var(--green);
   background: #4c82231a;
   border-color: #4c822338
}

#iraa-global .feature h3 {
   color: #0f1a2e
}

#iraa-global .feature p {
   color: #34433a
}

#iraa-global .feature strong {
   color: #0f1a2e
}

#iraa-global .feature .note {
   color: #6b7686
}

.feature__btn {
   font-family: var(--display);
   color: #fff;
   transition: transform .2s var(--ease), box-shadow .2s var(--ease);
   background: linear-gradient(135deg, #5e9e2e, #4c8223);
   border-radius: 999px;
   align-self: center;
   align-items: center;
   gap: .4rem;
   margin-top: auto;
   padding: .5rem 1.05rem;
   font-size: .82rem;
   font-weight: 600;
   text-decoration: none;
   display: inline-flex;
   box-shadow: 0 6px 16px #4c82234d
}

.feature__btn:hover {
   transform: translateY(-2px);
   box-shadow: 0 10px 22px #4c822373
}

.feature__btn span {
   transition: transform .2s var(--ease)
}

.feature__btn:hover span {
   transform: translate(3px)
}

#eco-entities,
#research-pillars,
#found-mission,
#found-welfare,
#found-sdg,
#insights-thought,
#about-story {
   overflow: hidden
}

#eco-entities>.container,
#research-pillars>.container,
#found-mission>.container,
#found-welfare>.container,
#found-sdg>.container,
#insights-thought>.container,
#about-story>.container {
   z-index: 1;
   position: relative
}

#found-welfare .eco-deco {
   width: 42%;
   height: 64%;
   inset: 0 auto auto 0
}

#found-welfare .eco-tri {
   bottom: auto;
   right: auto
}

#found-welfare .eco-tri--1 {
   width: 210px;
   height: 210px;
   top: -34px;
   left: -34px
}

#found-welfare .eco-tri--2 {
   width: 120px;
   height: 120px;
   top: 34px;
   left: 138px
}

#found-welfare .eco-tri--3 {
   width: 92px;
   height: 92px;
   top: 96px;
   left: 28px
}

#found-sdg .feature {
   background: linear-gradient(160deg, #40ae7e 0%, #3c7c21 100%);
   border: 1px solid #ffffff47
}

#found-sdg .feature h3 {
   color: #fff
}

#found-sdg .feature p {
   color: #ffffffe6
}

#found-sdg .feature__icon {
   color: #fff;
   background: #ffffff29;
   border-color: #ffffff61
}

.principles .section__head h2:after,
.ecosystem-snapshot .section__head h2:after,
#found-mission .section__head h2:after {
   content: "";
   background: var(--grad);
   border-radius: 3px;
   width: 64px;
   height: 3px;
   margin-top: .9rem;
   display: block;
   box-shadow: 0 0 10px #7ed95780
}

.contact-layout {
   grid-template-columns: 1.6fr 1fr;
   align-items: start;
   gap: 2.5rem;
   display: grid
}

.contact-form {
   gap: 1.1rem;
   display: grid
}

.field {
   gap: .4rem;
   display: grid
}

.field label {
   color: var(--ink);
   font-size: .88rem;
   font-weight: 600
}

.field input,
.field select,
.field textarea {
   font: inherit;
   border: 1px solid var(--line);
   color: var(--ink);
   transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
   background: #070b0699;
   border-radius: 10px;
   padding: .78rem .95rem
}

.field input::placeholder,
.field textarea::placeholder {
   color: var(--ink-dim)
}

.field input:focus,
.field select:focus,
.field textarea:focus {
   border-color: var(--green-bright);
   box-shadow: var(--glow-green);
   outline: none
}

.field textarea {
   resize: vertical
}

.field select option {
   background: var(--bg-800);
   color: var(--ink)
}

.contact-form .btn {
   justify-self: start
}

.contact-form__title {
   margin: 0;
   font-size: 1.5rem
}

.contact-form__status {
   color: var(--ink-soft);
   margin: 0;
   font-weight: 500
}

.contact-form__status.is-success {
   color: var(--green-bright)
}

.contact-aside {
   border-radius: var(--radius);
   padding: 1.7rem
}

.contact-aside h3 {
   color: var(--amber);
   margin-bottom: .3rem;
   font-size: 1.15rem
}

.contact-aside a {
   color: var(--green-bright);
   font-weight: 600
}

.contact-entities {
   grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
   gap: 1.2rem;
   display: grid
}

.contact-entity {
   border-radius: var(--radius);
   border-left: 3px solid var(--green);
   padding: 1.6rem
}

.contact-entity--tech {
   border-left-color: var(--green-bright)
}

.contact-entity--earth {
   border-left-color: var(--green)
}

.contact-entity--wisdom {
   border-left-color: var(--amber)
}

.contact-entity h3 {
   color: var(--ink);
   margin-bottom: .3rem;
   font-size: 1.22rem
}

.contact-entity p {
   color: var(--ink-soft);
   margin: 0
}

.site-footer {
   border-top: 1px solid var(--line);
   color: var(--ink-soft);
   background: linear-gradient(#0000, #070b06e6);
   padding: clamp(3rem, 6vw, 4rem) 0 1.5rem;
   position: relative;
   overflow: hidden
}

.footer-deco {
   z-index: 0;
   pointer-events: none;
   opacity: .6;
   transform-origin: bottom;
   width: 56%;
   height: 92%;
   position: absolute;
   bottom: 0;
   left: -12%;
   transform: scale(-.85, .85)
}

.footer-deco--tr {
   opacity: .6;
   width: 44%;
   height: 88%;
   inset: 0 0 auto auto;
   transform: none
}

.ftr-tri {
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px);
   position: absolute
}

.ftr-tri--a {
   clip-path: polygon(100% 0, 100% 100%, 0 0);
   filter: drop-shadow(0 8px 22px #4c822333);
   background: linear-gradient(150deg, #4c82236b, #4c82230f);
   width: 140px;
   height: 140px;
   top: 6%;
   right: 4%;
   transform: rotate(22deg)
}

.ftr-tri--b {
   clip-path: polygon(100% 0, 100% 100%, 0 0);
   background: linear-gradient(150deg, #fbb30761, #fbb3070d);
   width: 105px;
   height: 105px;
   top: 14%;
   right: 17%;
   transform: rotate(-37deg)
}

.ftr-tri--c {
   clip-path: polygon(100% 0, 0 0, 100% 100%);
   background: linear-gradient(150deg, #ffffff80, #ffffff14);
   width: 90px;
   height: 90px;
   top: 30%;
   right: 8%;
   transform: rotate(58deg)
}

.site-footer__inner,
.site-footer__legal {
   z-index: 1;
   position: relative
}

.site-footer__inner {
   grid-template-columns: 1.4fr 1fr 1.3fr;
   gap: 2.5rem;
   display: grid
}

.site-footer .brand {
   margin-bottom: 1rem
}

.footer-form {
   align-content: start;
   gap: .7rem;
   display: grid
}

.site-footer__heading {
   font-family: var(--display);
   color: var(--ink);
   margin: 0;
   font-size: 1.05rem
}

.footer-form__intro {
   color: var(--ink-soft);
   margin: 0 0 .2rem;
   font-size: .88rem
}

.footer-form .field {
   gap: 0
}

.footer-form .field input,
.footer-form .field textarea {
   padding: .6rem .8rem;
   font-size: .9rem
}

.footer-form .btn {
   justify-self: start;
   padding: .6rem 1.4rem;
   font-size: .85rem
}

.footer-form__status {
   color: var(--ink-soft);
   min-height: 1em;
   margin: .1rem 0 0;
   font-size: .84rem
}

.footer-form__status.is-success {
   color: var(--green-bright)
}

.site-footer__tag {
   font-family: var(--display);
   color: var(--ink);
   max-width: 36ch;
   font-size: 1.15rem
}

.site-footer__motto {
   font-family: var(--mono);
   color: var(--ink-dim);
   max-width: 56ch;
   font-size: .78rem
}

.site-footer__nav {
   grid-template-columns: 1fr 1fr;
   gap: .6rem;
   display: grid
}

.site-footer__nav ul {
   gap: .3rem;
   margin: 0;
   padding: 0;
   list-style: none;
   display: grid
}

.site-footer__nav a {
   color: var(--ink-soft);
   transition: color .2s var(--ease);
   font-size: .9rem
}

.site-footer__nav a:hover {
   color: var(--green-bright)
}

.site-footer__legal {
   border-top: 1px solid var(--line);
   flex-wrap: wrap;
   justify-content: space-between;
   gap: 1rem;
   margin-top: 2.5rem;
   padding-top: 1.5rem;
   display: flex
}

.site-footer__legal p {
   font-family: var(--mono);
   color: var(--ink-dim);
   margin: 0;
   font-size: .74rem
}

@media (width<=980px) {

   .contact-layout,
   .site-footer__inner {
      grid-template-columns: 1fr
   }

   .timeline {
      grid-template-columns: repeat(2, 1fr)
   }

   .hero__inner {
      grid-template-columns: 1fr;
      gap: 2.5rem
   }

   .hero__lead {
      max-width: none
   }

   .hero__mesh {
      opacity: .5;
      width: 75%
   }

   .page-hero__eye {
      opacity: .55;
      width: min(300px, 48vw)
   }

   .philo-tri-deco {
      opacity: .5;
      width: 60%
   }

   .eco-deco {
      opacity: .5;
      width: 92%;
      height: 70%
   }

   .vision2050__top {
      grid-template-columns: 1fr;
      gap: 1.5rem
   }

   .vision2050__art {
      order: -1
   }

   .vision-illu {
      max-width: 220px
   }

   .director {
      grid-template-columns: 1fr;
      gap: 1.8rem
   }

   .director__photo {
      max-width: 320px
   }
}

@media (width<=860px) {
   .nav-toggle {
      display: flex
   }

   .primary-nav {
      -webkit-backdrop-filter: blur(14px);
      backdrop-filter: blur(14px);
      border-bottom: 1px solid var(--line-strong);
      max-height: 0;
      transition: max-height .3s var(--ease);
      background: #0b110a;
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      overflow: hidden;
      z-index: 60
   }

   .primary-nav.is-open {
      max-height: 72vh;
      overflow-y: auto
   }

   .primary-nav ul {
      flex-direction: column;
      gap: 0;
      padding: .5rem 1.5rem 1.5rem
   }

   .primary-nav li {
      display: block
   }

   .primary-nav li+li:before {
      display: none
   }

   .primary-nav a {
      border-bottom: 1px solid var(--line);
      padding: .85rem .5rem;
      font-size: .95rem;
      display: block
   }

   .primary-nav a.is-active:after {
      display: none
   }

   .site-header__inner {
      flex-wrap: wrap
   }

   .value-grid {
      grid-template-columns: repeat(3, clamp(6rem, 22vw, 9.5rem))
   }

   .value-chip {
      border: 0
   }
}

@media (width<=600px) {
   .top-band__tag {
      display: none
   }

   .top-band__inner {
      justify-content: center
   }

   .principle-row {
      grid-template-columns: 1fr;
      gap: .5rem
   }

   .principle-row__index span {
      font-size: 2rem
   }

   .timeline {
      grid-template-columns: 1fr
   }

   .timeline:before {
      display: none
   }

   .vision2050__deco {
      opacity: .6;
      width: 200px;
      height: 180px;
      top: -30px;
      right: -30px
   }

   .page-hero__deco {
      opacity: .6;
      width: 220px;
      height: 190px;
      top: -30px;
      right: -30px
   }

   .page-hero__mesh {
      opacity: .5;
      width: 80%
   }

   .page-hero__eye {
      opacity: .3;
      width: 230px;
      top: 20%;
      right: -8%;
      transform: none
   }

   .philo-tri-deco {
      opacity: .3;
      width: 80%
   }

   .value-grid {
      grid-template-columns: repeat(2, clamp(6rem, 34vw, 9.5rem))
   }

   .cta-band__inner {
      flex-direction: column;
      align-items: flex-start
   }

   .site-footer__legal {
      flex-direction: column
   }
}

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

   *,
   :before,
   :after {
      transition-duration: .001ms !important;
      animation-duration: .001ms !important;
      animation-iteration-count: 1 !important
   }

   html {
      scroll-behavior: auto
   }
}

/* --- Dynamic "More" nav dropdown (added for CMS multi-page overflow) --- */
.nav-more {
   position: relative
}

.nav-more__toggle {
   font: inherit;
   color: var(--ink-soft);
   background: 0 0;
   border: 0;
   cursor: pointer;
   white-space: nowrap;
   border-radius: 8px;
   padding: .5rem .6rem;
   font-size: .8rem;
   font-weight: 500;
   display: inline-flex;
   align-items: center;
   gap: .3rem;
   transition: color .2s var(--ease), background .2s var(--ease)
}

.nav-more__toggle:hover {
   color: var(--ink);
   background: #7ed95714
}

.nav-more.is-open .nav-more__toggle {
   color: var(--green-bright)
}

.nav-more .nav-more__menu {
   list-style: none;
   margin: 0;
   padding: .5rem;
   position: absolute;
   top: 100%;
   right: 0;
   min-width: 200px;
   background: #0b110a;
   border: 1px solid var(--line-strong);
   border-radius: 12px;
   box-shadow: 0 16px 40px #00000047;
   display: none;
   flex-direction: column;
   gap: .1rem;
   z-index: 70
}

.nav-more.is-open .nav-more__menu {
   display: flex
}

.nav-more__menu a {
   white-space: nowrap;
   color: var(--ink-soft);
   border-radius: 8px;
   padding: .55rem .7rem;
   font-size: .85rem;
   font-weight: 500;
   display: block
}

.nav-more__menu a:hover {
   color: var(--ink);
   background: #7ed95714
}

.nav-more__menu a.is-active {
   color: var(--green-bright)
}

@media (width<=860px) {
   .nav-more__toggle {
      width: 100%;
      justify-content: space-between;
      border-bottom: 1px solid var(--line);
      padding: .85rem .5rem;
      font-size: .95rem;
      border-radius: 0
   }

   .nav-more .nav-more__menu {
      position: static;
      border: 0;
      background: 0 0;
      box-shadow: none;
      padding: 0 0 0 1rem;
      display: none
   }

   .nav-more.is-open .nav-more__menu {
      display: flex
   }

   .nav-more__menu a {
      border-bottom: 1px solid var(--line);
      padding: .7rem .5rem;
      font-size: .9rem
   }
}

/* --- Home hero banner slider caption + generic page prose spacing (CMS content) --- */
.page-body {
   max-width: none
}

.page-body>p,
.page-body>h3,
.page-body>blockquote {
   max-width: 780px
}

.page-body .feature-grid {
   margin: 1.6rem 0;
   max-width: none;
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr))
}

.page-body .page-body-media {
   margin: 1.6rem 0;
   max-width: none
}

.page-body .page-body-media img {
   width: 100%
}

.page-body h3 {
   margin-top: 2.2rem;
   padding-left: 1rem;
   border-left: 3px solid var(--green-bright);
   font-size: 1.4rem
}

.page-body>h3:first-child {
   margin-top: 0
}

.page-body p {
   margin: .8rem 0
}

.page-body .feature p {
   margin: .4rem 0
}

.page-body .feature {
   display: flex;
   flex-direction: column
}

.page-body .feature .btn {
   margin-top: auto;
   align-self: flex-start
}

.section:not(.section--light) .page-body .feature {
   background: linear-gradient(160deg, #101c0d 0%, #0b120a 100%);
   border: 1px solid var(--line-strong);
   box-shadow: 0 14px 32px #00000042
}

.page-body .feature:before {
   content: "";
   width: 100%;
   height: 3px;
   background: var(--grad);
   position: absolute;
   top: 0;
   left: 0
}

.page-body .feature h3 {
   margin: 0 0 .5rem;
   padding: 0;
   border: 0;
   font-size: 1.1rem
}

.section:not(.section--light) .page-body .feature:hover {
   transform: translateY(-4px);
   box-shadow: 0 20px 40px #0000005c, var(--glow-green)
}

.section--light .page-body .feature:hover {
   transform: translateY(-4px)
}

/* Vivid gradient section — a third rotating theme alongside plain-dark and
   section--light, echoing the original design's colorful mid-page sections.
   Uses deep, saturated tones (not the bright brand greens/ambers) so white
   text stays legible across the whole gradient, not just one end of it. */
.section--vivid {
   background: linear-gradient(120deg, #1f3d10 0%, #5c4108 100%);
   border-block: 1px solid #ffffff26;
   color: #fff
}

.section--vivid .eyebrow {
   color: #ffe6a8
}

.section--vivid .page-body h3 {
   border-left-color: #ffe6a8;
   color: #fff
}

.section--vivid .prose p {
   color: #f1f5ec
}

.section--vivid .prose strong {
   color: #fff
}

.section--vivid .prose a {
   color: #ffe6a8;
   text-decoration: underline
}

.section--vivid .page-body .feature {
   background: #00000038;
   border: 1px solid #ffffff3d;
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px)
}

.section--vivid .page-body .feature h3 {
   color: #fff
}

.section--vivid .page-body .feature p {
   color: #f1f5ecd9
}

.section--vivid .page-body .feature:hover {
   transform: translateY(-4px);
   border-color: #ffffff70
}

/* Homepage Five Strengths cards: a contained logo badge on top of always-
   visible text (each card carries the venture's own brand mark, not a mood
   photo, so it must stay fully legible rather than hide behind a hover scrim). */
.feature-grid--imaged {
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1.6rem
}

.feature-grid--imaged .feature {
   flex-direction: column;
   padding: 1.8rem;
   display: flex;
   position: relative;
   transition: transform .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease)
}

.feature-grid--imaged .feature:hover {
   border-color: var(--amber);
   box-shadow: var(--glow-amber);
   transform: translateY(-6px)
}

/* On the desktop wheel each card's base transform *is* its orbit position
   (translate() computed from --angle/--r) — the plain translateY(-6px) hover
   above would overwrite that entirely, snapping the card to the wrong place,
   which pushes the cursor off it and un-hovers it, snapping back... a flicker
   loop. Recombine the same orbit translate with the lift instead. */
.feature-grid--imaged .feature__square {
   width: 100%;
   aspect-ratio: 16/10;
   border-radius: 12px;
   border: 0;
   box-shadow: 0 10px 26px #00000047;
   background: #fff;
   margin: 0 0 1.3rem;
   display: block;
   position: relative;
   overflow: hidden;
   flex: 0 0 auto
}

.feature-grid--imaged .feature__square img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   object-position: center;
   padding: .9rem;
   opacity: 1;
   display: block;
   transition: transform .4s var(--ease)
}

.feature-grid--imaged .feature:hover .feature__square img {
   transform: scale(1.05)
}

.feature-grid--imaged .feature__body {
   position: relative
}

.feature-grid--imaged .feature h3 {
   margin-bottom: .4rem;
   font-size: 1.32rem
}

.feature-grid--imaged .feature p {
   color: var(--ink-soft);
   font-size: .96rem;
   line-height: 1.55
}

.feature-grid--imaged .feature__company {
   color: var(--amber-bright);
   font-family: var(--mono);
   letter-spacing: .05em;
   text-transform: uppercase;
   font-size: .74rem;
   margin-top: .8rem;
   display: block
}

/* A company without its own distinct sub-brand logo shows a representative
   photo here instead — full-bleed cover, not a padded white logo badge. */
.feature-grid--imaged .feature__square--photo {
   background: #0b120a
}

.feature-grid--imaged .feature__square--photo img {
   object-fit: cover;
   padding: 0
}

/* About page: entity card front-face name caption */
.entity-card__front-label {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 1.3rem 1.4rem;
   background: linear-gradient(0deg, #0b110af5, #0b110a00);
   color: #fff;
   font-family: var(--display);
   font-weight: 600;
   font-size: 1.05rem;
   z-index: 1
}

/* About page: Vision / Mission / Goal cards */
.vmg-grid {
   grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
   gap: 1.6rem;
   margin-top: 1.4rem;
   display: grid
}

.vmg-card {
   background: #00000038;
   border: 1px solid #ffffff3d;
   border-radius: var(--radius);
   padding: 1.6rem;
   -webkit-backdrop-filter: blur(6px);
   backdrop-filter: blur(6px)
}

.vmg-card__icon {
   width: 64px;
   height: 64px;
   color: #ffe6a8;
   background: #ffffff1a;
   border: 1px solid #ffffff47;
   border-radius: 16px;
   box-shadow: 0 10px 24px #00000033;
   margin-bottom: 1.3rem;
   place-items: center;
   display: inline-grid
}

.vmg-card__icon svg {
   width: 30px;
   height: 30px
}

.vmg-card h3 {
   color: #fff;
   margin-bottom: .5rem
}

.vmg-card p {
   color: #f1f5ecd9;
   margin: 0;
   font-size: .92rem
}

/* About page: FAQ accordion */
.faq-list {
   max-width: 820px;
   flex-direction: column;
   gap: .7rem;
   margin-top: 1.4rem;
   display: flex
}

.faq-item {
   background: #101c0d;
   border: 1px solid var(--line-strong);
   border-radius: 12px;
   overflow: hidden
}

.faq-item summary {
   cursor: pointer;
   color: var(--ink);
   font-family: var(--display);
   align-items: center;
   gap: 1rem;
   padding: 1.1rem 1.4rem;
   font-weight: 600;
   list-style: none;
   display: flex;
   justify-content: space-between;
   transition: color .2s var(--ease)
}

.faq-item summary::-webkit-details-marker {
   display: none
}

.faq-item summary:hover {
   color: var(--green-bright)
}

.faq-item__icon {
   width: 18px;
   height: 18px;
   flex: 0 0 auto;
   position: relative
}

.faq-item__icon:before,
.faq-item__icon:after {
   content: "";
   background: var(--green-bright);
   position: absolute;
   transition: transform .25s var(--ease)
}

.faq-item__icon:before {
   top: 50%;
   left: 0;
   width: 100%;
   height: 2px;
   transform: translateY(-50%)
}

.faq-item__icon:after {
   top: 0;
   left: 50%;
   width: 2px;
   height: 100%;
   transform: translateX(-50%)
}

.faq-item[open] .faq-item__icon:after {
   transform: translateX(-50%) scaleY(0)
}

.faq-item__body {
   padding: 0 1.4rem 1.3rem
}

.faq-item__body p {
   color: var(--ink-soft);
   margin: 0;
   font-size: .94rem;
   line-height: 1.6
}

.faq-item__body a {
   color: var(--green-bright);
   text-decoration: underline
}

/* About page: one dedicated zigzag section per company */
.company-block {
   grid-template-columns: 1fr 1fr;
   gap: clamp(2rem, 5vw, 4rem);
   align-items: center;
   display: grid
}

.company-block--reverse .company-block__media {
   order: 2
}

.company-block__media {
   aspect-ratio: 1/1;
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: 0 20px 50px #00000047;
   background: #fff;
   overflow: hidden
}

.company-block__media img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   padding: 2.2rem;
   display: block
}

.company-block__media--photo img {
   object-fit: cover;
   padding: 0
}

.company-block__tagline {
   font-family: var(--display);
   color: var(--ink);
   margin: .6rem 0;
   font-size: 1.2rem
}

.company-block__focus {
   color: var(--ink-soft);
   margin: 0 0 1rem;
   font-size: 1rem;
   line-height: 1.7
}

.company-block__tags {
   font-family: var(--mono);
   letter-spacing: .04em;
   text-transform: uppercase;
   color: var(--green-bright);
   margin: 0 0 1.6rem;
   font-size: .78rem;
   display: block
}

.section--light .company-block__tagline {
   color: #0f1a2e
}

.section--light .company-block__focus {
   color: #3a4658
}

.section--light .company-block__tags {
   color: var(--green)
}

.section--vivid .company-block__tagline {
   color: #fff
}

.section--vivid .company-block__focus {
   color: #f1f5ecd9
}

.section--vivid .company-block__tags {
   color: #ffe6a8
}

@media (width<=860px) {
   .company-block {
      grid-template-columns: 1fr
   }

   .company-block--reverse .company-block__media {
      order: 0
   }

   .company-block__media {
      max-width: 340px;
      margin-inline: auto
   }
}

/* Home hero: responsive layout (previously had no mobile rules at all, and the
   old 3D-cube slider math broke visually whenever the banner count changed). */
@media (width<=980px) {
   .hero__inner {
      grid-template-columns: 1fr;
      gap: 2.2rem
   }

   .hero-slider {
      max-width: 460px;
      margin-inline: auto
   }
}

@media (width<=760px) {
   .hero-slider__viewport {
      aspect-ratio: 1/1;
      min-height: 260px
   }

   .hero-slide__cap {
      padding: 1.8rem .95rem .9rem
   }

   .hero-slide__title {
      font-size: 1.2rem
   }

   .hero-slider__nav {
      width: 30px;
      height: 30px;
      font-size: 1rem
   }
}

/* Five Strengths: sun centered with the five cards arranged around it in an
   orbit on wide screens; falls back to the normal responsive card grid below
   981px, where there isn't room to spread cards around a center point. */
.strength-wheel {
   position: relative
}

.strength-wheel__sun {
   display: none
}

@media (width>=981px) {
   .strength-wheel {
      --r: clamp(280px, 33vw, 420px);
      min-height: calc(var(--r) * 2 + 380px);
      display: grid;
      place-items: center
   }

   .strength-wheel__sun {
      display: grid;
      place-items: center;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: clamp(210px, 20vw, 300px);
      height: clamp(210px, 20vw, 300px)
   }

   .strength-wheel__sun svg {
      width: 100%;
      height: 100%
   }

   .strength-wheel .feature-grid {
      position: absolute;
      inset: 0;
      display: block
   }

   .strength-wheel .feature {
      position: absolute;
      top: 50%;
      left: 50%;
      z-index: 1;
      width: clamp(230px, 21vw, 300px);
      margin: 0;
      --angle: calc(var(--i) * 72deg - 90deg);
      transform: translate(calc(-50% + cos(var(--angle)) * var(--r)), calc(-50% + sin(var(--angle)) * var(--r)))
   }

   .strength-wheel .feature:hover {
      transform: translate(calc(-50% + cos(var(--angle)) * var(--r)), calc(-50% + sin(var(--angle)) * var(--r) - 6px))
   }
}

/* Page body photos (company pages): source photos come in whatever aspect
   ratio they were shot at, which looks messy stacked at full width. Crop
   every one into the same size "card" instead, so a gallery of unrelated
   photos reads as one consistent design rather than a wall of random sizes. */
/* Five Strengths section: lighten the background so the amber/gold chakra at
   the wheel's centre (previously a green-tinted glow on a similar-toned green
   background — effectively camouflaged) actually reads against it, matching
   how the same graphic reads against the white Vision 2050 section above. */
.principles {
   background: linear-gradient(150deg, #eef6e2 0%, #d7ecc0 100%)
}

.principles .section__head h2 {
   color: #0f1a2e
}

.principles .eyebrow {
   color: var(--green)
}

.principles .eyebrow:before {
   background: var(--green);
   box-shadow: 0 0 8px #4c822373
}

/* Shows each photo at its own natural aspect ratio (portrait or landscape) so
   nothing is ever cropped — a fixed 16:9 box previously cover-cropped tall
   portrait shots down to a sliver of their real content. */
.page-body__photo {
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: var(--shadow-md);
   background: #0b120a;
   margin: 1.8rem 0;
   overflow: hidden;
   display: flex;
   justify-content: center
}

.page-body__photo img {
   max-width: 100%;
   max-height: 640px;
   width: auto;
   height: auto;
   display: block;
   margin: 0 auto
}

@media (width<=560px) {
   .page-body__photo img {
      max-height: 480px
   }
}

/* Two-up photo layout (col-6 / col-6) for a group of related images within a
   section, instead of stacking them full-width one after another. */
.photo-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1.4rem;
   margin: 1.8rem 0
}

.photo-grid .page-body__photo {
   margin: 0;
   height: 100%
}

.photo-grid .page-body__photo img {
   max-height: 340px
}

@media (width<=680px) {
   .photo-grid {
      grid-template-columns: 1fr
   }
}

/* Multiple videos shown side by side instead of stacked full-width. Portrait
   clips mixed with landscape ones get a shared aspect-ratio box (cropped to
   fill) so every tile is the same size instead of some being a narrow strip
   surrounded by black letterbox bars. */
.video-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 1.4rem;
   margin: 1.8rem 0
}

.video-grid .page-body__video {
   margin: 0;
   aspect-ratio: 4/3;
   overflow: hidden
}

.video-grid .page-body__video video {
   width: 100%;
   height: 100%;
   object-fit: cover
}

@media (width<=900px) {
   .video-grid {
      grid-template-columns: 1fr 1fr
   }
}

@media (width<=600px) {
   .video-grid {
      grid-template-columns: 1fr
   }
}

/* .ecosystem-snapshot is a light-background section but its .prose p text
   was still inheriting the site's default near-white --ink color, making it
   nearly invisible — give it the same dark text .section--light already uses. */
.ecosystem-snapshot .prose p {
   color: #3a4658
}

.ecosystem-snapshot .prose strong {
   color: #0f1a2e
}

/* Full, uncropped reference graphic (e.g. a dense infographic) — shown at its
   natural aspect ratio instead of the 16:9 cover-crop used for photo cards. */
.page-body__infographic {
   max-width: 640px;
   margin: 1.8rem auto;
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: var(--shadow-md);
   overflow: hidden
}

.page-body__infographic img {
   width: 100%;
   height: auto;
   display: block;
   margin: 0
}

.page-body__infographic--full {
   max-width: 100%
}

.page-body__video {
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: var(--shadow-md);
   background: #000;
   margin: 1.8rem 0;
   overflow: hidden
}

.page-body__video video {
   width: 100%;
   display: block
}

/* Data table for reference content (e.g. a spec/fact table lifted from a source
   document) — a scroll wrapper keeps it from breaking mobile layout. Gradient
   header + icon badges + zebra striping + hover accent give it some presence
   instead of reading like a plain spec sheet. */
.page-body .table-scroll {
   overflow-x: auto;
   margin: 1.8rem 0;
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: var(--shadow-md)
}

.page-body table {
   width: 100%;
   min-width: 640px;
   border-collapse: separate;
   border-spacing: 0;
   font-size: .94rem
}

.page-body table th,
.page-body table td {
   padding: 1.05rem 1.3rem;
   text-align: left;
   vertical-align: top
}

.page-body table thead th {
   background: var(--grad);
   color: #0a1206;
   font-family: var(--mono);
   letter-spacing: .05em;
   text-transform: uppercase;
   font-size: .7rem;
   font-weight: 700
}

.page-body table tbody td {
   border-bottom: 1px solid var(--line-strong);
   border-left: 3px solid transparent;
   transition: background .2s var(--ease), border-color .2s var(--ease)
}

.page-body table tbody tr:last-child td {
   border-bottom: 0
}

.page-body table tbody tr:nth-child(even) td {
   background: #7ed9570a
}

.page-body table tbody tr:hover td {
   background: #7ed95717;
   border-left-color: var(--amber)
}

.page-body table td:first-child {
   font-weight: 700;
   color: var(--ink);
   white-space: nowrap
}

.page-body table td {
   color: var(--ink-soft);
   line-height: 1.7
}

.page-body table .table-icon {
   width: 30px;
   height: 30px;
   color: var(--green-bright);
   background: #7ed9571f;
   border: 1px solid var(--line-strong);
   border-radius: 9px;
   place-items: center;
   margin-right: .7rem;
   display: inline-grid;
   vertical-align: middle
}

.page-body table .table-icon svg {
   width: 16px;
   height: 16px
}

.section--light .page-body table tbody td {
   color: #3a4658;
   border-bottom-color: #00000014
}

.section--light .page-body table tbody tr:hover td {
   background: #4c82231f
}

.section--light .page-body table td:first-child {
   color: #0f1a2e
}

.section--vivid .page-body table tbody td {
   border-bottom-color: #ffffff29
}

@media (width<=680px) {
   .page-body table td:first-child {
      white-space: normal
   }
}

/* Infographic-style "at a glance" panel: dark header bar + colour-coded icon
   rows on the left, a photo panel with an overlay statement + icon strip on
   the right — richer than a plain data table. */
.glance-panel {
   display: grid;
   grid-template-columns: 1fr;
   border-radius: var(--radius);
   overflow: hidden;
   box-shadow: var(--shadow-md);
   border: 1px solid var(--line-strong);
   margin: 1.8rem 0;
   background: #fff
}

.glance-panel__header {
   grid-column: 1/-1;
   background: linear-gradient(100deg, var(--navy) 0%, #0a1230 100%);
   border-left: 5px solid var(--amber);
   padding: 1.1rem 1.6rem;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
   display: flex
}

.glance-panel__title {
   align-items: center;
   gap: .7rem;
   color: #fff;
   font-family: var(--display);
   font-weight: 800;
   font-size: 1.05rem;
   letter-spacing: .02em;
   text-transform: uppercase;
   display: flex
}

.glance-panel__title svg {
   width: 24px;
   height: 24px;
   color: var(--amber-bright)
}

.glance-panel__tagline {
   color: #cfe3ff;
   font-family: var(--mono);
   font-size: .72rem;
   letter-spacing: .06em;
   text-transform: uppercase
}

.glance-row {
   grid-template-columns: 44px 1fr;
   gap: 1rem;
   padding: 1rem 1.4rem;
   border-bottom: 1px solid #00000014;
   align-items: start;
   display: grid
}

.glance-row:last-child {
   border-bottom: 0
}

.glance-row:nth-child(odd) {
   background: #f4f8ee
}

.glance-row__icon {
   width: 40px;
   height: 40px;
   border-radius: 9px;
   color: #fff;
   margin-top: .1rem;
   place-items: center;
   display: grid
}

.glance-row__icon svg {
   width: 20px;
   height: 20px
}

.glance-row__icon--navy {
   background: var(--navy)
}

.glance-row__icon--green {
   background: var(--green)
}

.glance-row__icon--gold {
   background: var(--gold)
}

/* This panel is a self-contained light card, always styled the same regardless
   of whether the page.php section wrapping it is dark/light/vivid themed —
   !important because .prose p/strong (and the more specific .section--light/
   .section--vivid variants) would otherwise win and, on a dark-themed section,
   render this text in near-invisible light-on-white or dark-on-dark colors. */
.glance-row__title {
   font-family: var(--display);
   font-weight: 700;
   font-size: .86rem;
   letter-spacing: .02em;
   text-transform: uppercase;
   margin-bottom: .35rem;
   color: #0f1a2e !important
}

.glance-row__desc {
   font-size: .86rem;
   line-height: 1.6;
   margin: 0;
   color: #3a4658 !important
}

.glance-row__desc strong {
   color: #0f1a2e !important
}

.glance-panel__media {
   position: relative
}

.glance-panel__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   position: absolute;
   inset: 0
}

.glance-panel__media-overlay {
   height: 100%;
   padding: 1.6rem;
   background: linear-gradient(180deg, #001a4b66 0%, #001a4b1a 40%, #001a4bcc 100%);
   flex-direction: column;
   justify-content: space-between;
   position: relative;
   display: flex
}

.glance-panel__media-text {
   font-family: var(--display);
   font-weight: 700;
   font-size: 1.3rem;
   line-height: 1.3;
   text-align: right;
   text-shadow: 0 2px 10px #00000080;
   color: #fff !important
}

.glance-icons {
   justify-content: space-between;
   gap: .6rem;
   display: flex
}

.glance-icon {
   flex-direction: column;
   align-items: center;
   gap: .35rem;
   color: #fff;
   font-family: var(--mono);
   font-size: .62rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   display: flex
}

.glance-icon svg {
   width: 22px;
   height: 22px;
   color: var(--amber-bright)
}

@media (width<=860px) {
   .glance-panel {
      grid-template-columns: 1fr
   }

   .glance-panel__media {
      min-height: 280px
   }
}

/* .prose a{color:...} (and .section--light/.section--vivid .prose a, which is
   even more specific) outranks the single-class .btn--gold rule, so a gold CTA
   button placed inside body prose was getting green link text on its gold/green
   gradient background — effectively invisible. !important guarantees the
   button's own color always wins, regardless of which section theme wraps it. */
.prose a.btn--gold {
   color: #0a1206 !important
}

.prose a.btn--ghost {
   color: var(--green) !important
}

.eyebrow {
   font-size: .85rem
}

.page-body ul {
   margin: 0 0 1.2em;
   padding-left: 1.4em
}

.page-body ul li {
   margin-bottom: .5em;
   line-height: 1.7;
   color: var(--ink-soft)
}

.page-body ul li::marker {
   color: var(--amber)
}

.section--light .page-body ul li {
   color: #3a4658
}

.section--light .page-body ul li::marker {
   color: var(--gold)
}

/* Gallery carousel: keep a fixed 16:9 slide height (needed for the sliding
   transition to stay smooth), but letterbox each photo instead of cropping it
   so portrait shots stay fully visible. */
.img-slide img {
   object-fit: contain;
   background: #0b120a
}

/* Page body icon cards: equal-size capability/service tiles (used instead of
   photos for pillar-style grids), each with a small icon badge + short tag. */
.page-body .feature__icon {
   width: 48px;
   height: 48px;
   color: var(--green-bright);
   background: #7ed95714;
   border: 1px solid var(--line-strong);
   border-radius: 12px;
   place-items: center;
   margin-bottom: .9rem;
   display: inline-grid
}

.page-body .feature__icon svg {
   width: 24px;
   height: 24px
}

.page-body .feature__tag {
   font-family: var(--mono);
   letter-spacing: .06em;
   text-transform: uppercase;
   color: var(--amber);
   font-size: .68rem;
   margin: .1rem 0 .6rem;
   display: block
}

.section--light .page-body .feature__icon {
   background: #4c82231a;
   border-color: #4c82233d
}

.section--vivid .page-body .feature__icon {
   background: #ffffff26;
   border-color: #ffffff40;
   color: #fff
}

.section--vivid .page-body .feature__tag {
   color: #ffe6a8
}

/* About page: Mentors as full profiles (photo + complete multi-paragraph
   bio), zigzagging left/right per mentor — not equal-size cards, since a
   condensed card can't hold a whole biography. Reuses the same alternating
   layout mechanic as the company sections above it. */
.mentor-profile {
   grid-template-columns: .85fr 1.15fr;
   gap: clamp(2rem, 5vw, 4rem);
   align-items: start;
   margin-top: 3.2rem;
   display: grid
}

.mentor-profile:first-of-type {
   margin-top: 0
}

.mentor-profile--reverse .mentor-profile__media {
   order: 2
}

.mentor-profile__media {
   aspect-ratio: 1/1;
   border-radius: var(--radius);
   border: 1px solid var(--line-strong);
   box-shadow: 0 20px 50px #00000047;
   background: #101c0d;
   color: var(--ink-dim);
   place-items: center;
   overflow: hidden;
   display: grid
}

.mentor-profile__media img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block
}

.mentor-profile__media svg {
   width: 30%;
   height: 30%
}

/* Used when a profile photo's own aspect ratio is already close to portrait,
   so the box matches it instead of forcing a 1:1 square crop. */
.mentor-profile__media--portrait {
   aspect-ratio: 4/5
}

.mentor-profile__body h3 {
   margin-bottom: .9rem;
   font-size: 1.4rem
}

.mentor-profile__role {
   color: var(--amber-bright);
   font-family: var(--mono);
   font-size: .76rem;
   letter-spacing: .04em;
   text-transform: uppercase;
   line-height: 1.6;
   margin-bottom: .4rem;
   display: block
}

.mentor-profile__bio p {
   color: var(--ink-soft);
   font-size: .98rem;
   line-height: 1.75;
   margin: 0 0 1.1em
}

.mentor-profile__bio p:last-child {
   margin-bottom: 0
}

.mentor-profile__bio strong {
   color: var(--ink)
}

.section--light .mentor-profile__media {
   background: #fff
}

.section--light .mentor-profile__role {
   color: var(--green)
}

.section--light .mentor-profile__body h3 {
   color: #0f1a2e
}

.section--light .mentor-profile__bio p {
   color: #3a4658
}

.section--light .mentor-profile__bio strong {
   color: #0f1a2e
}

@media (width<=860px) {
   .mentor-profile {
      grid-template-columns: 1fr
   }

   .mentor-profile--reverse .mentor-profile__media {
      order: 0
   }

   .mentor-profile__media {
      max-width: 320px;
      margin-inline: auto
   }
}




.callBtn {
   width: 50px;
   height: 50px;
   line-height: 45px;
   background: #25d366;
   display: block;
   position: fixed;
   bottom: 80px;
   /* 👈 Higher than WhatsApp */
   left: 15px;
   z-index: 9999;
   text-align: center;
   border-radius: 50%;
   font-size: 22px;
   color: #fff;
   animation: bounce 2s infinite;
}

.whatsAppBtn {
   width: 50px;
   height: 50px;
   line-height: 45px;
   background: #25d366;
   display: block;
   position: fixed;
   bottom: 20px;
   left: 15px;
   z-index: 9999;
   text-align: center;
   border-radius: 50%;
   font-size: 22px;
   color: #fff;
   animation: bounce 2s infinite;
}

@keyframes bounce {

   0%,
   100%,
   20%,
   50%,
   80% {
      transform: translateY(0)
   }

   40% {
      transform: translateY(-20px)
   }

   60% {
      transform: translateY(-10px)
   }
}