/* ==========================================================================
   everconnected — "DIA" designer direction (sample build)
   Editorial serif + grainy pastel gradient meshes + hand-drawn line art.
   ========================================================================== */

/* ----- Tokens ----------------------------------------------------------- */
:root{
  color-scheme: light;      /* render as designed; opt out of browser auto/forced dark mode */
  --paper:#ebe9e7;          /* warm off-white base — matches the designer's page + extracted art bg */
  --paper-2:#e4e2dd;
  --ink:#17160f;            /* near-black headings/text */
  --ink-soft:#46443d;       /* muted body */
  --black:#0b0b0a;          /* buttons / footer */

  /* pastels */
  --mint:#aee6c9; --teal:#b6e3dd; --sky:#a9e2ef; --sky-2:#bfeaf4;
  --lemon:#f3ea5c; --lemon-2:#f7ec46;
  --lav:#c6b8ef; --lav-2:#d9d0f4; --peri:#8ea7ec;
  --pink:#f4b6d2; --pink-2:#f7c9df; --green:#7ee3bb; --peach:#f6c7a6;

  --serif:"Fraunces", Georgia, "Times New Roman", serif;   /* display */
  --body:"EB Garamond", Georgia, serif;                    /* reading */
  --sans:ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --gutter:clamp(20px, 5vw, 64px);
  --maxw:1180px;
  --r:18px; --r-lg:30px;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:clamp(1.06rem,1rem + .25vw,1.22rem);
  line-height:1.62; font-weight:430;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}

/* film grain — subtle, and kept below the header so the logo + button stay crisp */
body::after{
  content:""; position:fixed; inset:0; z-index:40; pointer-events:none;
  opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.32'/%3E%3C/svg%3E");
}

/* ----- Type ------------------------------------------------------------- */
h1,h2,h3{font-family:var(--serif); font-weight:380; color:var(--ink); margin:0;
  font-optical-sizing:auto; letter-spacing:-.005em; line-height:1.04;}
.display{font-size:clamp(2.9rem, 1.8rem + 4.6vw, 5.4rem); font-weight:360; letter-spacing:-.015em;}
h2,.h2{font-size:clamp(2.1rem, 1.5rem + 2.6vw, 3.5rem); font-weight:360;}
h3,.h3{font-size:clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight:400;}
.lead{font-size:clamp(1.16rem,1.05rem + .5vw,1.42rem); color:var(--ink-soft); line-height:1.5;}
.serif-i{font-style:italic}
p{margin:0 0 1rem}
.muted{color:var(--ink-soft)}

/* small uppercase sans labels */
.kicker{font-family:var(--sans); text-transform:uppercase; letter-spacing:.18em;
  font-size:.72rem; font-weight:600; color:var(--ink-soft);}

/* ----- Layout ----------------------------------------------------------- */
.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,9vw,140px); position:relative}
.section--tight{padding-block:clamp(44px,6vw,90px)}
.center{text-align:center}
.measure{max-width:62ch}
.stack>*+*{margin-top:1.1rem}

/* ----- Buttons ---------------------------------------------------------- */
.btn{display:inline-flex; align-items:center; gap:.6em; cursor:pointer;
  font-family:var(--sans); text-transform:uppercase; letter-spacing:.14em;
  font-size:.72rem; font-weight:600; line-height:1;
  padding:1.05em 1.9em; border-radius:999px; border:1.5px solid var(--black);
  transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease);}
.btn--dark{background:var(--black); color:#fff}
.btn--dark:hover{transform:translateY(-2px); background:#23221d}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper)}
.btn--light{background:#fff; color:var(--black); border-color:#fff}
.btn--light:hover{transform:translateY(-2px)}
.btn__arrow{display:inline-grid; place-items:center; width:1.7em; height:1.7em;
  border:1.5px solid currentColor; border-radius:999px; margin-right:.3em; margin-left:-.5em}
.btn__arrow svg{width:.8em;height:.8em}

/* ----- Header ----------------------------------------------------------- */
.site-head{position:absolute; top:0; left:0; right:0; z-index:50; padding-top:clamp(18px,2.5vw,30px)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:.5em}
.brand__logo{height:clamp(22px,2.4vw,27px); width:auto; display:block}
.brand__mark{width:34px;height:22px;flex:none}
.nav{display:flex; align-items:center; gap:clamp(16px,2.4vw,34px)}
.nav__links{display:flex; align-items:center; gap:clamp(16px,2.4vw,34px)}
.nav__links a{font-family:var(--sans); font-size:.86rem; letter-spacing:.02em; color:var(--ink); opacity:.8; transition:opacity .25s}
.nav__links a:hover,.nav__links a[aria-current]{opacity:1}
.nav .btn{padding:.8em 1.4em}
.burger{display:none}

/* ----- Hero ------------------------------------------------------------- */
.hero{position:relative; padding-top:clamp(150px,20vh,250px); padding-bottom:clamp(60px,9vw,120px); text-align:center; overflow:hidden}
.hero__glow{position:absolute; left:50%; top:clamp(40px,8vw,90px); translate:-50% 0;
  width:min(880px,92vw); height:clamp(320px,42vw,520px); z-index:0; filter:blur(46px) saturate(1.05); opacity:.95;
  background:
    radial-gradient(38% 56% at 28% 42%, var(--mint), transparent 72%),
    radial-gradient(40% 58% at 62% 32%, var(--sky), transparent 72%),
    radial-gradient(34% 50% at 50% 64%, var(--lemon), transparent 70%),
    radial-gradient(30% 48% at 80% 58%, var(--pink), transparent 72%),
    radial-gradient(34% 52% at 16% 70%, var(--lav), transparent 72%);}
.hero .wrap{position:relative; z-index:1}
.hero__mark{width:120px; height:74px; margin:0 auto clamp(14px,2vw,26px)}
.hero .display{margin:0 auto}
.hero__sub{font-family:var(--body); font-style:italic; font-size:clamp(1.05rem,1rem + .4vw,1.35rem); color:var(--ink-soft); margin:.7rem auto 0}
.hero .btn{margin-top:clamp(22px,3vw,38px)}

/* the overlapping-circle brand motif */
.infinity{display:block}
.infinity circle{fill:none; stroke:var(--ink); stroke-width:2}

/* ----- Split feature ---------------------------------------------------- */
.split{display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(28px,5vw,72px); align-items:center}
.split>*,.bigrow>*,.hero-split>*,.soulband>*{min-width:0}
.split--rev .split__media{order:-1}
/* extracted art shares the exact paper bg, so it sits seamlessly without keying */
.section__title{font-size:clamp(1.8rem,1.3rem + 2vw,2.9rem); margin-bottom:1.1rem}
.rule{height:1px;background:rgba(20,18,12,.22); border:0; margin:1.4rem 0}

/* ----- Cards ------------------------------------------------------------ */
.cards{display:grid; gap:clamp(16px,2vw,26px)}
.cards--3{grid-template-columns:repeat(3,1fr)}
.cards--2{grid-template-columns:repeat(2,1fr)}
.card{background:var(--lav-2); border-radius:var(--r); padding:clamp(22px,2.4vw,34px); position:relative}
.card--stagger:nth-child(2){transform:translateY(26px)}
.card--stagger:nth-child(3){transform:translateY(52px)}
.card__ico{width:54px;height:54px;margin-bottom:1rem; color:var(--ink)}
.card__ico svg{width:100%;height:100%; stroke:var(--ink); stroke-width:1.4; fill:none}
.card h3{margin-bottom:.4rem}
.card p{margin:0; color:var(--ink-soft); font-size:1.04rem; line-height:1.5}
.card--mint{background:#c7ecd8} .card--green{background:#bdead2}
.card--lav{background:var(--lav-2)} .card--sky{background:#cdeaf2}
.card__tag{font-family:var(--serif); font-size:1.5rem; display:block; margin-bottom:.5rem}
.card .btn{margin-top:1.2rem; padding:.75em 1.35em}

/* numbered step cards */
.step{border-radius:var(--r); padding:clamp(22px,2.4vw,32px); min-height:150px}
.step__n{font-family:var(--sans); font-size:.78rem; letter-spacing:.16em; opacity:.6}
.step h3{margin:.5rem 0 .4rem}
.step p{margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.45}

/* ----- Checklist -------------------------------------------------------- */
.checks{display:grid; grid-template-columns:1fr 1fr; gap:18px 48px; max-width:880px; margin:0 auto}
.check{display:flex; gap:14px; align-items:flex-start; font-size:1.1rem}
.check::before{content:""; flex:none; width:16px;height:16px; margin-top:.34em; border-radius:50%;
  background:radial-gradient(circle at 40% 35%, #fff6a8, var(--lemon-2)); box-shadow:0 0 12px rgba(243,234,92,.8)}

/* ----- "What makes special" big rows ------------------------------------ */
.bigrow{display:grid; grid-template-columns:1fr 1fr; gap:clamp(26px,5vw,70px); align-items:center; margin-top:clamp(40px,6vw,86px)}
.bigrow--rev .bigrow__art{order:-1}
.bignum{font-family:var(--serif); font-size:clamp(2.2rem,1.6rem + 2vw,3.2rem); display:block; line-height:1}
.bigrow h3{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem); margin:.1rem 0 1rem}
.bigrow p{color:var(--ink-soft)}
.bigrow__art{display:grid; place-items:center; min-height:200px}

/* decorative art (CSS) */
.orbs{display:flex; gap:6px; flex-wrap:wrap; justify-content:center}
.orb{width:clamp(76px,24vw,120px); height:clamp(76px,24vw,120px); border-radius:50%; filter:blur(2px)}
.orb--y{background:radial-gradient(circle at 42% 38%, #fff7b0, var(--lemon) 62%, transparent 75%)}
.orb--o{background:radial-gradient(circle at 42% 38%, #ffd9a0, var(--peach) 62%, transparent 75%)}
.orb--p{background:radial-gradient(circle at 42% 38%, #ffd0e6, var(--pink) 62%, transparent 75%)}
.pinkdisc{width:min(330px,80%); aspect-ratio:1; border-radius:50%; background:var(--pink);
  display:grid; place-items:center; padding:14%}
.pinkdisc svg{width:100%;height:auto; stroke:var(--ink); stroke-width:1.4; fill:none}
.brainloop{position:relative; width:min(360px,90%); aspect-ratio:1.4/1; display:grid; place-items:center}
.brainloop svg{width:100%;height:100%; overflow:visible}
.brainloop .bl-brain{stroke-width:1.5; fill:none}

/* ----- Loneliness / antidote ------------------------------------------- */
.antidote{text-align:center}
.antidote .quote{font-family:var(--serif); font-size:clamp(1.5rem,1.1rem + 2vw,2.4rem); line-height:1.25; max-width:18ch; margin:0 auto}
.hl{padding:.05em .35em; border-radius:6px; box-decoration-break:clone; -webkit-box-decoration-break:clone}
.hl--mint{background:var(--mint)} .hl--lemon{background:var(--lemon)}
.antidote__src{font-family:var(--sans); font-size:.8rem; letter-spacing:.1em; opacity:.7; margin-top:1rem; display:flex; gap:.5em; justify-content:center; align-items:center}
.arrowdown{margin:clamp(20px,4vw,40px) auto; width:64px; color:var(--ink)}

/* ----- For-organisations band ------------------------------------------ */
.band-soft{background:linear-gradient(180deg,transparent, rgba(174,230,201,.22) 40%, transparent)}

/* ----- Founders --------------------------------------------------------- */
.founders__grid{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(30px,4vw,60px); max-width:720px; margin:clamp(38px,5vw,68px) auto 0}
.founder{margin:0; text-align:center}
.founder__photo{width:118px; height:118px; border-radius:50%; margin:0 auto 1.1rem; display:grid; place-items:center;
  background:radial-gradient(circle at 32% 28%, var(--lav-2), var(--sky) 68%, var(--mint)); box-shadow:0 18px 40px -22px rgba(20,18,12,.3)}
.founder__photo span{font-family:var(--serif); font-weight:500; font-size:1.9rem; color:var(--ink); opacity:.5; letter-spacing:.02em}
.founder__name{font-size:clamp(1.3rem,1.1rem + .8vw,1.7rem); margin:0}
.founder__role{font-family:var(--sans); text-transform:uppercase; letter-spacing:.12em; font-size:.74rem; color:var(--peri); margin:.45rem 0 .85rem; font-weight:700}
.founder__bio{color:var(--ink-soft); max-width:34ch; margin-inline:auto}
.founders__note{font-family:var(--sans); font-size:.82rem; color:var(--ink-soft); opacity:.7; margin-top:clamp(30px,4vw,50px)}
@media (max-width:620px){ .founders__grid{grid-template-columns:1fr; gap:34px} }

/* ----- Footer ----------------------------------------------------------- */
.foot{background:var(--black); color:#f3f1ec; text-align:center; padding:clamp(56px,8vw,100px) var(--gutter)}
.foot__logo{height:clamp(26px,3vw,34px); width:auto; margin:0 auto .7rem; display:block}
.foot__tag{font-family:var(--body); font-style:italic; opacity:.8; margin-bottom:1.8rem}
.foot .btn{margin-bottom:2rem}
.foot__soc{display:flex; gap:22px; justify-content:center}
.foot__soc a{width:24px;height:24px;opacity:.85; transition:opacity .25s}
.foot__soc a:hover{opacity:1}
.foot__soc svg{width:100%;height:100%; fill:#fff}

/* ----- Page themes / About --------------------------------------------- */
.sec--yellow{background:#f9da49; color:#17160f}
.sec--green{background:#86e3bf; color:#17160f}

.hero--green{background:#86e3bf}
.hero--green .hero__glow{filter:blur(34px); opacity:.92;
  background:
   radial-gradient(26% 46% at 10% 42%, #f6ec5a, transparent 62%),
   radial-gradient(26% 46% at 90% 44%, #f6ec5a, transparent 62%),
   radial-gradient(54% 64% at 50% 26%, #aef0d4, transparent 72%)}
.hero--green .display,.hero--green .lead{color:#17160f}
.hero--green .hero__sub{color:#2c4a3d}

.video-ph{max-width:580px; margin:clamp(22px,4vw,44px) auto 0; aspect-ratio:16/9; border-radius:18px;
  background:rgba(23,40,33,.16); display:grid; place-items:center}
.video-ph__play{width:84px;height:84px;border-radius:50%; border:2px solid rgba(23,40,33,.5); display:grid; place-items:center}
.video-ph__play svg{width:26px;height:26px; margin-left:5px; fill:rgba(23,40,33,.6)}

.prose{max-width:64ch; margin-inline:auto}
.prose p{margin:0 0 1.25rem}
.prose ul{margin:0 0 1.25rem; padding-left:1.1em; list-style:none}
.prose li{margin:.45rem 0; position:relative; padding-left:1.1em}
.prose li::before{content:"•"; position:absolute; left:0; opacity:.6}
.uline{text-decoration:underline; text-decoration-color:#e8533a; text-decoration-thickness:2px; text-underline-offset:4px}
.uline--green{text-decoration-color:#2f9e4f}
.circ{box-shadow:inset 0 0 0 2px #e8533a; border-radius:46% 54% 52% 48%; padding:.04em .4em; margin:0 .05em}
.hl--coral{background:#f2a48f; padding:.04em .25em; border-radius:5px; -webkit-box-decoration-break:clone; box-decoration-break:clone}

.orb-frames{display:flex; gap:24px; justify-content:center; margin:clamp(28px,4vw,46px) 0}
.orb-frame{width:118px;height:118px;border:1.5px solid #17160f; border-radius:8px; display:grid; place-items:center}
.orb-frame span{width:80px;height:80px;border-radius:50%; filter:blur(1px);
  background:radial-gradient(circle at 42% 36%, #fff7b0, #f3ea5c 58%, rgba(243,234,92,.15) 80%)}

.lensflare{height:150px; margin:clamp(18px,4vw,38px) 0; filter:blur(28px); opacity:.8; pointer-events:none;
  background:
   radial-gradient(circle at 20% 50%, #f3ea5c, transparent 19%),
   radial-gradient(circle at 38% 50%, #f6c7a6, transparent 16%),
   radial-gradient(circle at 55% 50%, #f4b6d2, transparent 16%),
   radial-gradient(circle at 71% 50%, #c6b8ef, transparent 16%),
   radial-gradient(circle at 86% 50%, #a9e2ef, transparent 17%)}

.scene{margin:clamp(26px,5vw,56px) auto}
.scene img{margin-inline:auto}
.scene--conn img{max-width:740px;width:100%}
.scene--bridge img{max-width:420px;width:100%}

/* ----- Science ---------------------------------------------------------- */
.hero--sci{background:linear-gradient(118deg,#9a93ec 0%,#7fa6ee 52%,#b3a2f3 100%)}
.hero--sci .display,.hero--sci .lead,.hero--sci .hero__sub{color:#161534}
.hero--sci .hero__glow{display:none}
.hero-split{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,5vw,60px); align-items:center; text-align:left}
.sci-box{background:#cdbff0; border-radius:20px; padding:clamp(16px,2vw,26px); display:grid; place-items:center}
.sci-box img{mix-blend-mode:multiply; max-width:80%; height:auto}

.sec--lilac{background:#e2a9f1; color:#17160f}
.sec--lime{background:#7ed957; color:#143018}
.sec--lime .display,.sec--lime h2{color:#143018}

.sci-h{font-family:var(--serif); text-align:center; font-weight:400; font-size:clamp(1.5rem,1.2rem + 1.4vw,2.2rem); margin:clamp(48px,7vw,96px) 0 clamp(22px,3vw,42px)}
.sci-h:first-child{margin-top:0}
.sci-diagram{margin-inline:auto; display:block; width:100%}
.sci-diagram--oval{max-width:900px}
.sci-diagram--circle{max-width:470px}
.sci-diagram--recipe{max-width:840px}

.mtn-band img{width:100%; height:clamp(260px,34vw,460px); object-fit:cover; object-position:center; display:block}

.btn__arrow--down svg{transform:rotate(90deg)}

/* ----- Communities ------------------------------------------------------ */
.hero--cyan{background:linear-gradient(155deg,#c7f1fa 0%,#bfeede 60%,#cdebe0 100%)}
.hero--cyan .display,.hero--cyan .lead,.hero--cyan .hero__sub{color:#0f302f}
.hero--cyan .hero__glow{display:none}
.orbgrid{display:grid; grid-template-columns:1fr 1fr; gap:26px; width:min(330px,100%); margin-left:auto}
.orbgrid span{aspect-ratio:1; border-radius:50%; display:block; filter:blur(2px);
  background:radial-gradient(circle at 42% 36%, #fffdf0, var(--c) 60%, transparent 78%)}

.symbols{display:flex; justify-content:center; align-items:center; gap:clamp(20px,4.5vw,58px); flex-wrap:wrap; margin-top:clamp(34px,5vw,64px)}
.symbol{position:relative; display:grid; place-items:center; font-family:var(--serif); font-size:clamp(2rem,1.4rem + 1.6vw,3rem); color:#17160f; width:64px; height:64px}
.symbol--glow::before{content:""; position:absolute; inset:-26%; border-radius:50%; filter:blur(13px); opacity:.9; background:radial-gradient(circle, var(--g), transparent 68%); z-index:-1}
.symbol .soul-fig{width:34px;height:auto}
.symbol .soul-fig svg{width:100%;height:auto}

.combox img{width:100%; height:auto; display:block; border-radius:14px}

.quote-jung{font-family:var(--serif); font-style:italic; text-align:center; max-width:22ch; margin:clamp(54px,9vw,120px) auto;
  font-size:clamp(1.45rem,1.1rem + 1.7vw,2.3rem); line-height:1.32; font-weight:380}
.quote-jung cite{display:block; font-style:normal; font-size:.5em; letter-spacing:.04em; margin-top:1.2rem; opacity:.7}

.bubble{position:relative; width:min(440px,82vw); aspect-ratio:1; border:2px solid #17160f; border-radius:50%;
  display:grid; place-items:center; text-align:center; padding:16%; margin:clamp(20px,4vw,40px) auto}
.bubble p{margin:0; font-size:clamp(1rem,.9rem + .4vw,1.2rem)}
.bubble::before,.bubble::after{content:""; position:absolute; border:2px solid #17160f; border-radius:50%}
.bubble::before{width:46px;height:46px; right:6%; top:-6%}
.bubble::after{width:24px;height:24px; right:18%; top:8%}

/* ----- Events ----------------------------------------------------------- */
.hero--paper{background:var(--paper)}
.hero--paper .hero__glow{display:none}
.greenbox{background:#bfe7cf; border-radius:20px; aspect-ratio:4/3; display:grid; place-items:center; position:relative; overflow:hidden}
.greenbox .twoglow{width:70%; height:60%; filter:blur(8px);
  background:radial-gradient(circle at 38% 50%, #fff39a, #f3ea5c 46%, transparent 60%),
             radial-gradient(circle at 64% 52%, #fff39a, #f3ea5c 46%, transparent 60%)}
.photo-card img{width:100%; border-radius:14px; display:block}

.sec--soul{background:#9bf0ff; color:#1a1aa8}
.soulband{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,64px); align-items:center}
.soulband__art{display:grid; place-items:center}
.soulband__art img{max-width:100%}
.soul-wordmark{font-family:var(--sans); font-weight:800; color:#2a17d6; font-size:clamp(2.6rem,1.8rem + 4vw,5rem); line-height:1; letter-spacing:-.02em}
.soul-by{font-family:var(--body); font-style:italic; color:#fff; letter-spacing:.12em; font-size:.95rem; margin-bottom:.3rem}
.sec--soul p{color:#2a17d6; font-weight:500}
.btn--soul{background:#fff; color:#2a17d6; border-color:#fff}
.btn--soul:hover{transform:translateY(-2px)}

/* ----- Reveal ----------------------------------------------------------- */
.reveal{opacity:0; transform:translateY(22px); transition:opacity .9s var(--ease), transform .9s var(--ease)}
html:not(.js) .reveal{opacity:1; transform:none}
.reveal.in{opacity:1; transform:none}

/* ----- Responsive ------------------------------------------------------- */
@media (max-width:880px){
  .split,.bigrow,.bigrow--rev .bigrow__art,.split--rev .split__media{grid-template-columns:1fr}
  .bigrow__art,.split__media{order:0 !important}
  .cards--3{grid-template-columns:1fr}
  .card--stagger{transform:none !important}
  .checks{grid-template-columns:1fr; gap:14px}
  .nav__links{display:none}
  .site-head .nav .btn--dark{display:none}
  .burger{display:inline-grid; place-items:center; width:44px;height:44px; border:1.5px solid var(--ink); border-radius:999px; background:transparent}
  .burger span{width:18px;height:1.6px;background:var(--ink); display:block; position:relative}
  .burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:var(--ink)}
  .burger span::before{top:-5px}.burger span::after{top:5px}
}
@media (max-width:560px){
  .cards--2{grid-template-columns:1fr}
  .hero{padding-top:140px}
}

/* ===== Theme toggle ===================================================== */
.theme-toggle{width:42px;height:42px;flex:none;border-radius:999px;border:1.5px solid var(--ink);background:transparent;display:grid;place-items:center;color:var(--ink);cursor:pointer;transition:transform .3s var(--ease),border-color .3s}
.theme-toggle:hover{transform:translateY(-2px)}
.theme-toggle svg{width:18px;height:18px}
.theme-toggle__sun{display:none}
:root[data-theme="dark"] .theme-toggle{border-color:rgba(255,255,255,.42)}
:root[data-theme="dark"] .theme-toggle__moon{display:none}
:root[data-theme="dark"] .theme-toggle__sun{display:block}
/* header logo swaps to the light wordmark in dark mode */
.brand__logo--light{display:none}
:root[data-theme="dark"] .brand__logo--dark{display:none}
:root[data-theme="dark"] .brand__logo--light{display:block}

/* ===== Dark theme (editorial) ========================================== */
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#15140f; --paper-2:#1d1b15; --ink:#f1eee5; --ink-soft:#ada695;
}
:root[data-theme="dark"] body::after{mix-blend-mode:overlay; opacity:.5}
:root[data-theme="dark"] .hero__glow{opacity:.55}
:root[data-theme="dark"] .rule{background:rgba(255,255,255,.16)}
/* buttons */
:root[data-theme="dark"] .btn{border-color:rgba(255,255,255,.35)}
:root[data-theme="dark"] .btn--dark{background:#f1eee5; color:#15140f; border-color:#f1eee5}
:root[data-theme="dark"] .btn--dark:hover{background:#fff}
:root[data-theme="dark"] .btn--ghost{color:var(--ink); border-color:rgba(255,255,255,.4)}
:root[data-theme="dark"] .btn--ghost:hover{background:var(--ink); color:#15140f}
/* heroes -> dark, each keeps its hue identity */
:root[data-theme="dark"] .hero--green{background:#102a20}
:root[data-theme="dark"] .hero--green .display,:root[data-theme="dark"] .hero--green .lead,:root[data-theme="dark"] .hero--green .hero__sub{color:#e9f6ef}
:root[data-theme="dark"] .hero--sci{background:linear-gradient(118deg,#1a1840 0%,#1a2350 52%,#221a48 100%)}
:root[data-theme="dark"] .hero--sci .display,:root[data-theme="dark"] .hero--sci .lead,:root[data-theme="dark"] .hero--sci .hero__sub{color:#e7e6fb}
:root[data-theme="dark"] .hero--cyan{background:linear-gradient(155deg,#0c2a2c 0%,#0e2826 60%,#103230 100%)}
:root[data-theme="dark"] .hero--cyan .display,:root[data-theme="dark"] .hero--cyan .lead,:root[data-theme="dark"] .hero--cyan .hero__sub{color:#e3f4f0}
:root[data-theme="dark"] .hero--paper{background:var(--paper)}
/* cards -> dark tints (text auto-flips to light --ink) */
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .card--lav{background:#1f1c33}
:root[data-theme="dark"] .card--mint{background:#10271d}
:root[data-theme="dark"] .card--green{background:#11271c}
:root[data-theme="dark"] .card--sky{background:#0f2530}
/* dark-on-light decorative elements */
:root[data-theme="dark"] .symbol{color:var(--ink)}
:root[data-theme="dark"] .bubble,:root[data-theme="dark"] .bubble::before,:root[data-theme="dark"] .bubble::after{border-color:rgba(255,255,255,.55)}
:root[data-theme="dark"] .greenbox{background:#13291f}
:root[data-theme="dark"] .foot{border-top:1px solid rgba(255,255,255,.08)}
/* baked-light-bg illustrations -> framed plates so they read intentionally on dark */
:root[data-theme="dark"] .split__media img,
:root[data-theme="dark"] .bigrow__art img,
:root[data-theme="dark"] .hero-split img,
:root[data-theme="dark"] .sci-diagram,
:root[data-theme="dark"] .combox img,
:root[data-theme="dark"] .photo-card img{border-radius:var(--r); box-shadow:0 16px 50px rgba(0,0,0,.55)}
/* remaining coloured sections -> dark, each keeps its hue identity */
:root[data-theme="dark"] .sec--green{background:#102a20; color:#e9f6ef}
:root[data-theme="dark"] .sec--yellow{background:#2a2410; color:#f3eede}
:root[data-theme="dark"] .sec--lilac{background:#241a33; color:#efe6fb}
:root[data-theme="dark"] .sec--lime{background:#16280f; color:#e7f6dd}
:root[data-theme="dark"] .sci-box{background:#1f1a33}
/* text highlights stay legible: dark text on the light marks */
:root[data-theme="dark"] .hl--mint,
:root[data-theme="dark"] .hl--lemon,
:root[data-theme="dark"] .hl--coral{color:#15140f}


/* --- research page (ported from the lab design) --- */
.hero--research .hero__glow{ filter:blur(66px) saturate(.74); opacity:.58;
  background:
    radial-gradient(48% 62% at 50% 38%, var(--lav), transparent 70%),
    radial-gradient(42% 54% at 66% 56%, var(--sky), transparent 72%),
    radial-gradient(40% 52% at 32% 62%, var(--mint), transparent 74%); }
:root[data-theme="dark"] .hero--research .hero__glow{ opacity:.5; filter:blur(74px) saturate(.66) }
.hero__tree{display:flex; justify-content:center; margin:clamp(-6px,0vw,0) auto clamp(8px,1.6vw,18px); animation:tree-float 8s var(--ease) infinite}
.hero__tree .tree{width:clamp(208px,28vw,330px); height:auto; color:var(--ink); overflow:visible; filter:drop-shadow(0 18px 40px rgba(124,92,255,.18))}
@keyframes tree-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
@media (prefers-reduced-motion:reduce){.hero__tree{animation:none}}
:root[data-theme="dark"] .hero__tree .tree{filter:drop-shadow(0 18px 46px rgba(124,92,255,.42))}
.hero__cta{display:inline-flex; gap:14px; flex-wrap:wrap; align-items:center; justify-content:center}
.hero .hero__cta{margin-top:clamp(22px,3vw,34px)}
.pillars{display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(20px,2.6vw,34px)}
.pillar{display:flex; gap:1rem; align-items:flex-start}
.pillar__n{font-family:var(--serif); font-weight:500; font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem); line-height:1; color:var(--peri); flex:none; min-width:1.6em}
.pillar h3{font-size:1.18rem; margin:.1rem 0 .35rem}
.pillar p{margin:0; color:var(--ink-soft); font-size:1.02rem; line-height:1.55}
.src-note{font-family:var(--body); font-style:italic; opacity:.85; text-align:center; margin-top:clamp(28px,3.5vw,48px)}
.src-note a{font-style:normal; font-weight:600; color:var(--ink)}
@media (max-width:760px){ .pillars{grid-template-columns:1fr} }


/* --- contact lead form --- */
.lead-form{display:flex; flex-direction:column; gap:clamp(15px,2vw,20px)}
.lead-form .field-row{display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,20px)}
.lead-form .field{display:flex; flex-direction:column; gap:.45rem}
.lead-form label{font-family:var(--sans); font-size:.74rem; font-weight:700; letter-spacing:.08em; color:var(--ink); text-transform:uppercase}
.lead-form label .opt{text-transform:none; font-weight:400; opacity:.55; letter-spacing:0}
.lead-form input, .lead-form select, .lead-form textarea{font-family:var(--body); font-size:1.06rem; color:var(--ink); background:#fff; border:1.5px solid var(--paper-2); border-radius:14px; padding:.75em 1em; width:100%; transition:border-color .2s var(--ease), box-shadow .2s var(--ease)}
.lead-form input::placeholder, .lead-form textarea::placeholder{color:var(--ink-soft); opacity:.5}
.lead-form input:focus, .lead-form select:focus, .lead-form textarea:focus{outline:none; border-color:var(--peri); box-shadow:0 0 0 3px rgba(142,167,236,.28)}
.lead-form textarea{resize:vertical; min-height:130px; line-height:1.5}
.lead-form select{appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%2346443d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1em center; padding-right:2.6em}
.form-foot{display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; margin-top:.5rem}
.form-status{margin:0; font-family:var(--body); font-style:italic; color:var(--ink-soft); font-size:1rem}
.form-status.ok{color:#2e7d52; font-style:normal} .form-status.err{color:#c0392b}
.form-status a, .form-alt a{color:inherit; text-decoration:underline}
.form-alt{font-family:var(--sans); font-size:.84rem; opacity:.7; margin:.4rem 0 0}
.lead-form.sent .field-row, .lead-form.sent .field, .lead-form.sent .form-foot button{opacity:.45; pointer-events:none}
:root[data-theme="dark"] .lead-form input, :root[data-theme="dark"] .lead-form select, :root[data-theme="dark"] .lead-form textarea{background:var(--paper-2); border-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .lead-form select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%23ada695' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 8l4 4 4-4'/%3E%3C/svg%3E")}
@media(max-width:560px){ .lead-form .field-row{grid-template-columns:1fr} }