@font-face{
  font-family:'Public Sans';
  src:url('PublicSans-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:'Public Sans';
  src:url('PublicSans-Italic-VariableFont_wght.ttf') format('truetype-variations');
  font-weight:100 900;
  font-style:italic;
  font-display:swap;
}

:root{
  --bg:#ffffff;
  --bg-raised:#f5f6ef;
  --bg-raised-2:#eef0e3;
  --bg-raised-3:#e1e4d0;
  --border:#e4e4da;
  --border-soft:#cfd3ba;
  --ink:#181a10;
  --ink-soft:#454a37;
  --ink-faint:#70765c;
  --accent:#40e0d0;
  --accent-bright:#40e0d0;
  --accent-ink:#ffffff;
  --btn-hover-ink:#03181b; /* dark text on the turquoise fill of hovered buttons (darkest petrol of the gradient) */
  --glass:rgba(0,0,0,.035);
  --glass-border:rgba(0,0,0,.09);
  --font-display:'Public Sans',ui-sans-serif,system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  --measure:640px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;background:var(--bg)}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }

/* .yoda-site is the top-level wrapper — works as <body class="yoda-site">
   on a standalone page, or as a plain <div class="yoda-site"> pasted
   inside any WordPress page/theme. */
.yoda-site{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-mono);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

.yoda-site a{color:inherit}
.yoda-site h1,.yoda-site h2,.yoda-site h3,.yoda-site h4{font-family:var(--font-display);margin:0;color:var(--ink);text-wrap:balance}
.yoda-site p{margin:0}
.yoda-site img,.yoda-site svg{display:block;max-width:100%}

.yoda-site :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}

.yoda-site .eyebrow{
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--accent);
}
.yoda-site .objective-heading{font-size:16px}
/* short line before the heading, same 1px / 80% as the line after it */
.yoda-site .objective-arrow{
  display:inline-block;position:relative;width:25px;height:1px;margin-right:10px;
  background:currentColor;opacity:.8;vertical-align:middle;top:-1px;
}
/* desktop: title centred over box 01, 16px from a line on each side. The left line fills
   the space from the column edge; the right line runs on through the gap and across
   the 2 right columns (span::after inside column 1 + heading::after over columns 2-3) */
@media (min-width:821px){
  .yoda-site .objective-heading{display:grid;grid-template-columns:repeat(3,1fr);column-gap:36px;align-items:center}
  .yoda-site .objective-heading > span{display:flex;align-items:center;gap:16px;white-space:nowrap}
  .yoda-site .objective-heading .objective-arrow{flex:1;width:auto;margin:0;top:0}
  .yoda-site .objective-heading > span::after{content:"";flex:1;height:1px;background:currentColor;opacity:.8}
  .yoda-site .objective-heading::after{content:"";grid-column:2 / 4;height:1px;background:currentColor;opacity:.8;margin-left:-36px}
}
/* mobile: title at the left edge of the box, line from 16px after it to the right edge */
@media (max-width:820px){
  .yoda-site .objective-heading > span{display:flex;align-items:center;gap:16px;white-space:nowrap}
  .yoda-site .objective-heading .objective-arrow{display:none}
  .yoda-site .objective-heading > span::after{content:"";flex:1;height:1px;background:currentColor;opacity:.8}
}

.yoda-site .wrap{max-width:1100px;margin:0 auto;padding-inline:32px}
/* mobile side margin: 28px, shared by .wrap, the nav bar, the mobile menu and the hero */
@media (max-width:640px){ .yoda-site .wrap{padding-inline:28px} }

.yoda-site .section{padding-block:80px 120px}
/* menu anchors stop right under the fixed nav (96px), so each section starts where the nav ends */
.yoda-site section[id]{scroll-margin-top:96px}
@media (max-width:640px){
  .yoda-site .section{padding-block:49px 80px}
  .yoda-site #timeline{padding-block:54px 85px}
}
/* equal space above and below: the last block in a section adds no extra bottom margin */
.yoda-site .section .wrap > :last-child{margin-bottom:0}
/* About and Team (and Contact, further down) on the .light-bg layer (the dark gradient only,
   no image — see the rules below), text in ink */
.yoda-site #how-it-works,
.yoda-site #team{background:var(--bg);position:relative;isolation:isolate}
/* About, Team and Contact on a dark night-blue ground instead of white: the colour tokens are
   redefined inside these sections, so every rule that uses them (titles, text, borders, glass
   boxes) switches to light-on-dark without touching the rules themselves */
.yoda-site #how-it-works,
.yoda-site #team,
.yoda-site #involve{
  --bg:#0b1a1f;
  --ink:#ffffff;
  --ink-soft:rgba(255,255,255,.78);
  --ink-faint:rgba(255,255,255,.6);
  --border:rgba(255,255,255,.1);
  --glass:rgba(255,255,255,.04);
  --glass-border:rgba(255,255,255,.12);
}
/* dark gradient shared by the hero and About/Team/Contact: deep petrol at the corners, darker
   petrol across the middle, tilted 35° from vertical (145deg). Intermediate stops follow an
   ease-in-out curve (#0a2d31 ↔ #03181b), so the change is gradual with no visible peak */
.yoda-site{
  --bg-ground:linear-gradient(145deg,
    #0a2d31 0%,#092b2f 10%,#082629 20%,#051f23 30%,#041a1d 40%,#03181b 50%,
    #041a1d 60%,#051f23 70%,#082629 80%,#092b2f 90%,#0a2d31 100%);
}
.yoda-site #how-it-works .light-bg,
.yoda-site #team .light-bg,
.yoda-site #involve .light-bg{background:var(--bg-ground)}
.yoda-site #how-it-works .about-intro{color:var(--ink)}
/* Scientific objectives boxes: same dark glass, border and hover as the Team cards
   (white text; number and short line in turquoise, like the roles in Team) */
.yoda-site #how-it-works .obj-item{background:var(--glass);border-color:var(--glass-border)}
.yoda-site #how-it-works .obj-item:hover{border-color:var(--accent);background-color:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--accent),0 0 36px 4px rgba(64,224,208,.35);transform:none}
.yoda-site #how-it-works .obj-item p{color:var(--ink)}
/* full-width image between About and Team (hero_03, 2160×1213). The image fills the
   full width without zoom; the box is shallower (3.6:1) so the image's extra height lets
   script.js slide it inside the box (parallax).
   Without JS / with reduced motion the image sits centred in the box.
   The quote on top can make the box taller than 3.6:1 (narrow screens): the image then
   grows to at least 115% of the box (object-fit:cover, no stretching) to keep the parallax */
.yoda-site .about-banner{position:relative;overflow:hidden;aspect-ratio:3.6 / 1;background:#000;display:flex;align-items:center}
.yoda-site .about-banner img{
  position:absolute;left:0;top:50%;width:100%;height:auto;min-height:115%;object-fit:cover;max-width:none;
  transform:translateY(-50%);will-change:transform;
}
/* quote over the image: Public Sans a little smaller than the section titles, in white,
   centred across all 3 columns (lines fill the full width, no balancing) */
.yoda-site .about-banner .wrap{position:relative;z-index:1;width:100%;padding-block:48px}
/* mobile: a much taller box (most of the screen), quote centred in it; the image is the
   portrait hero_mobile_02 (<picture> in index.html) */
@media (max-width:640px){
  .yoda-site .about-banner{aspect-ratio:auto;min-height:80vh;min-height:80svh}
  .yoda-site .about-banner .wrap{padding-block:80px 90px}
}
.yoda-site .banner-quote{
  font-family:var(--font-display);font-size:36px;line-height:1.25;font-weight:700;letter-spacing:-.01em;
  color:#fff;max-width:none;text-align:center;
}
@media (max-width:640px){ .yoda-site .banner-quote{font-size:26px} }
/* turquoise lines above and under the quote, same as the section titles' .rule, centred,
   28px from the text */
.yoda-site .about-banner .rule{width:44px;height:2px;background:var(--accent);margin:28px auto 0}
.yoda-site .about-banner .rule:first-child{margin:0 auto 28px}
/* the #id in each selector keeps these above the boxes' own transition (.objectives .obj-item) */
.js-ready .yoda-site #hero .hero-reveal,.js-ready .yoda-site #how-it-works .about-reveal,.js-ready .yoda-site #team .team-reveal{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease;transition-delay:var(--reveal-delay,0ms)}
.js-ready .yoda-site #hero .hero-reveal.is-visible,.js-ready .yoda-site #how-it-works .about-reveal.is-visible,.js-ready .yoda-site #team .team-reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js-ready .yoda-site #hero .hero-reveal,.js-ready .yoda-site #how-it-works .about-reveal,.js-ready .yoda-site #team .team-reveal{opacity:1;transform:none;transition:none} }
.yoda-site #timeline{--tl-step:600ms}
/* timeline on the accent ground, like About: content switched to white */
.yoda-site #timeline{background:var(--accent);color:var(--accent-ink);position:relative;overflow:hidden;isolation:isolate}
/* background image behind the timeline content, always at its original proportions
   (2160×1213, height:auto, never stretched or cropped by object-fit). It spans the full width;
   only when the section is taller than that (narrow screens) does it grow past the width,
   staying centred, so it's always tall enough for the parallax in script.js: the image
   moves at 20% of the scroll speed over the viewport + section height, so it needs the
   section height + 20% of (100vh + section height). The speed must match the one passed
   to addBoxParallax in script.js; a lower speed means a smaller (less zoomed) image.
   The footer background (.footer-bg) uses the same rules */
.yoda-site #timeline .timeline-bg,
.yoda-site footer .footer-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#000;container-type:size}
/* About/Team/Contact background layer: just the gradient (set above), no image */
.yoda-site .light-bg{position:absolute;inset:0;z-index:-1;background:var(--bg)}
.yoda-site #timeline .timeline-bg img,
.yoda-site footer .footer-bg img{
  --bg-w:max(100cqw, (100cqh + .2 * (100vh + 100cqh)) * 2160 / 1213);
  position:absolute;top:50%;left:calc((100cqw - var(--bg-w)) / 2);
  width:var(--bg-w);height:auto;max-width:none;
  transform:translateY(-50%);will-change:transform;
}
/* mobile: the timeline and the footer use the portrait hero_mobile_03 (1200×2260, <picture> in index.html) */
@media (max-width:640px){
  .yoda-site #timeline .timeline-bg img,
  .yoda-site footer .footer-bg img{--bg-w:max(100cqw, (100cqh + .2 * (100vh + 100cqh)) * 1200 / 2260)}
}
.yoda-site #timeline .section-head h2,
.yoda-site #timeline .milestone h4{color:var(--accent-ink)}
.yoda-site #timeline .section-head .rule{background:var(--accent-ink)}
.yoda-site #timeline .milestone .date{color:var(--accent-ink);font-weight:600}
.yoda-site #timeline .milestone p{color:rgba(255,255,255,.82)}
.yoda-site #timeline .milestone::before,
.yoda-site #timeline .milestone::after{background:rgba(255,255,255,.5)}
.yoda-site #timeline .milestone .node{background:var(--accent-ink);box-shadow:0 0 0 4px rgba(255,255,255,.25)}
/* hover: white glow on the node and the title */
.yoda-site #timeline .milestone:hover .node{box-shadow:0 0 0 4px rgba(255,255,255,.25),0 0 14px 4px rgba(255,255,255,.75)}
.yoda-site #timeline .milestone:hover h4{text-shadow:0 0 12px rgba(255,255,255,.85)}
.js-ready .yoda-site #timeline .timeline-reveal:not(.milestone){opacity:0;transform:translateY(24px);transition:opacity .42s ease,transform .42s ease;transition-delay:var(--reveal-delay,0ms)}
.js-ready .yoda-site #timeline .timeline-reveal.is-visible:not(.milestone){opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){ .js-ready .yoda-site #timeline .timeline-reveal:not(.milestone){opacity:1;transform:none;transition:none} }

.yoda-site .section-head{margin-bottom:56px}
.yoda-site .section-head h2{font-size:42px;line-height:1.15;font-weight:700;letter-spacing:-.01em}
@media (max-width:640px){ .yoda-site .section-head h2{font-size:32px} }
.yoda-site .section-head .rule{width:44px;height:2px;background:var(--accent);margin-top:18px}
.yoda-site .section-head p.lede{max-width:var(--measure);color:var(--ink-soft);font-size:17px;line-height:1.65;margin-top:16px}

.yoda-site .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:9px 18px;border-radius:999px;
  font-family:var(--font-mono);font-size:11px;font-weight:600;
  letter-spacing:.13em;text-transform:uppercase;
  text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.yoda-site .btn-solid{background:var(--accent);color:var(--accent-ink)}
.yoda-site .btn-solid:hover{box-shadow:0 0 0 1px var(--accent), 0 0 26px rgba(64,224,208,.45)}
.yoda-site .btn-outline{background:transparent;color:var(--accent);border-color:var(--accent)}
.yoda-site .btn-outline:hover{background:var(--accent);color:var(--btn-hover-ink)}
/* line button: same look as the Biography buttons in Team (.biography summary) —
   turquoise text, faint turquoise outline, filled turquoise with dark text on hover */
.yoda-site .btn.btn-line{
  background:transparent;color:var(--accent);border:1px solid rgba(64,224,208,.35);
  padding:7px 12px;font-size:10.5px;font-weight:600;letter-spacing:.12em;
}
.yoda-site .btn.btn-line:hover{background:var(--accent);border-color:var(--accent);color:var(--btn-hover-ink)}

/* ---------- NAV ---------- */
.yoda-site .nav{
  position:fixed;inset:0 0 auto 0;z-index:50;
  /* dark glass: translucent black with the page blurred behind it */
  background:rgba(0,0,0,.6);
  backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.yoda-site .nav-inner{max-width:1100px;margin:0 auto;padding:0 32px;height:96px;display:flex;align-items:center;justify-content:space-between}
@media (max-width:640px){ .yoda-site .nav-inner{padding:0 28px} }
.yoda-site .brand{display:flex;align-items:center;width:112px;height:21px;color:var(--accent);text-decoration:none}
/* the turquoise logo file shown in white, back to its own turquoise on hover */
.yoda-site .brand img{display:block;width:100%;height:100%;object-fit:contain;filter:brightness(0) invert(1);transition:filter .2s ease}
.yoda-site .brand:hover img{filter:none}
/* desktop: logo slightly larger (same proportions) */
@media (min-width:821px){ .yoda-site .brand{width:120px;height:23px} }
.yoda-site .nav-links{display:flex;align-items:center;gap:30px;list-style:none;margin:0;padding:0}
.yoda-site .nav-links a{
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;
  color:#fff;padding-bottom:5px;border-bottom:1px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.yoda-site .nav-links a:hover{color:var(--accent);border-color:var(--accent)}
.yoda-site .nav-links a.active{color:var(--accent);border-color:var(--accent)}
.yoda-site .nav-cta{display:flex;align-items:center;gap:18px}
.yoda-site .nav-toggle{display:none;background:none;border:0;color:var(--accent);font-family:var(--font-mono);font-size:20px;line-height:1;cursor:pointer;padding:6px;transition:color .2s ease}
.yoda-site .nav-toggle:hover{color:#fff}
.yoda-site .nav-mobile{display:none}

@media (max-width:820px){
  .yoda-site .nav-links, .yoda-site .nav-cta .btn{display:none}
  .yoda-site .nav-toggle{display:block;font-size:32px;padding:8px;color:#fff}
  .yoda-site .nav-toggle:hover{color:var(--accent)}  .yoda-site .nav-mobile{
    display:none;flex-direction:column;gap:2px;padding:8px 20px 32px;
    border-top:1px solid rgba(255,255,255,.1);
  }
  .yoda-site .nav-mobile.open{display:flex}
  .yoda-site .nav-mobile a{
    padding:12px 0;font-size:12px;letter-spacing:.1em;text-transform:uppercase;
    color:#fff;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.1);
    transition:color .2s ease;
  }
  .yoda-site .nav-mobile a:hover{color:var(--accent)}
  /* section currently on screen: turquoise text and turquoise line */
  .yoda-site .nav-mobile a.active{color:var(--accent);border-bottom-color:var(--accent)}
  /* Contact button (hidden in the bar on mobile) shown at the end of the menu */
  /* (same line style as the Biography buttons, see .btn-line) */
  .yoda-site .nav-mobile a.nav-mobile-cta{
    margin-top:30px;width:100px;align-self:flex-start;padding:7px 12px;border:1px solid rgba(64,224,208,.35);color:var(--accent);
    font-size:10.5px;letter-spacing:.12em;font-weight:600;
    transition:background .25s ease,color .25s ease,border-color .25s ease;
  }
  .yoda-site .nav-mobile a.nav-mobile-cta:hover{background:var(--accent);border-color:var(--accent);color:var(--btn-hover-ink)}
}
@media (max-width:640px){ .yoda-site .nav-mobile{padding-inline:28px} }

/* ---------- HERO ---------- */
/* hero starts at the top of the page, behind the glass nav (so the nav shows black, not the
   white page), and fills the screen; the nav height (96px) is added to the top padding so the
   content stays centred in the area under the nav (equal space above and below) */
.yoda-site .hero{
  position:relative;margin-top:0;padding-top:calc(96px + 40px);padding-bottom:40px;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
  background:#000;
}
/* background image (hero_01) behind the ring video, which blends over it (screen);
   script.js fades it in once loaded and moves it at 40% of the scroll speed (parallax) */
.yoda-site .hero-bg{
  position:absolute;inset:0;
  background:url('hero_01.png?v=1') center / cover no-repeat;
  will-change:transform;
}
/* mobile: portrait image (hero_mobile_01) made for the tall hero, without parallax (script.js),
   raised 20px: the layer reaches 20px past the hero top and bottom (same centre) and the
   image sits 20px above that centre, so it moves up without leaving a gap at the bottom */
@media (max-width:640px){
  .yoda-site .hero-bg{
    background-image:url('hero_mobile_01.png?v=2');
    top:-20px;bottom:-20px;background-position:center calc(50% - 20px);
  }
}
.js-ready .yoda-site .hero-bg{opacity:0;transition:opacity 1.4s ease}
.js-ready .yoda-site .hero-bg.is-loaded{opacity:1}
@media (prefers-reduced-motion:reduce){ .js-ready .yoda-site .hero-bg{transition:none} }
/* mobile: tighter padding, content stays centred like on desktop */
@media (max-width:640px){ .yoda-site .hero{padding-top:calc(96px + 32px);padding-bottom:32px} }
/* centred column: logo + ring video, turquoise rule, description */
/* no z-index here: it would isolate the video's blend (below) from the hero's gradient */
.yoda-site .hero-inner{
  position:relative;width:100%;max-width:1100px;margin:0 auto;padding:0 32px;
  display:flex;flex-direction:column;align-items:center;text-align:center;
  --logo-w:min(576px, 72vw);
  --ring-size:95%;  /* video width as a share of the logo width — tweak to resize the ring */
}
/* mobile: bigger logo (and ring video), filling the column between the 28px side margins */
@media (max-width:640px){ .yoda-site .hero-inner{padding:0 28px;--logo-w:84vw} }

/* logo block; the top margin leaves some room for the part of the ring above the letters */
.yoda-site .hero-mark{
  position:relative;width:var(--logo-w);max-width:none;margin:calc(var(--logo-w) * .2) 0 0;
  font-size:0;line-height:0;
}
.yoda-site .hero-logo{position:relative;z-index:1;display:block;width:100%;height:auto}
/* square ring video, centred on the letters (29.7% down the logo, above the tagline);
   mix-blend-mode:screen drops the video's black so only the glowing ring shows over the
   hero gradient, and the radial mask fades the video's edges */
.yoda-site .hero-video{
  position:absolute;left:50%;top:29.7%;
  width:var(--ring-size);height:auto;aspect-ratio:1/1;object-fit:cover;
  transform:translate(-50%,-50%);pointer-events:none;opacity:.9;mix-blend-mode:screen;
  /* own fade-in (the logo uses .hero-reveal): a fading parent would isolate the blend
     and show the video's black square while it animates */
  animation:hero-video-in 1.2s ease .15s both;
  -webkit-mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 82%,transparent 100%);
}
@keyframes hero-video-in{from{opacity:0}to{opacity:.9}}
@media (prefers-reduced-motion:reduce){ .yoda-site .hero-video{animation:none} }

/* rule and text sit in front of the ring video (which overlaps them) */
.yoda-site .hero-rule{position:relative;z-index:1;width:72px;height:2px;background:var(--accent-bright);margin-top:clamp(44px, 6vw, 72px)}

.yoda-site .hero p.dek{
  position:relative;z-index:1;
  /* 60ch (mono font) fits the text in exactly 3 balanced lines on desktop; narrower screens wrap more */
  max-width:60ch;text-wrap:balance;font-size:clamp(13px, 1vw, 16px);line-height:1.6;color:#fff;
  margin:clamp(24px, 3vw, 36px) auto 0;
}
.yoda-site .hero .cta-row{position:relative;z-index:1;margin-top:clamp(28px, 3vw, 40px)}
/* mobile: rule, text and button further from the logo, larger text, more space between them */
@media (max-width:640px){
  .yoda-site .hero-rule{margin-top:92px}
  .yoda-site .hero p.dek{font-size:14px;margin-top:32px}
  .yoda-site .hero .cta-row{margin-top:36px}
}

/* ---------- ABOUT ---------- */
.yoda-site .objectives{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-bottom:64px}
@media (max-width:820px){ .yoda-site .objectives{grid-template-columns:1fr;gap:28px} }
/* title in the 1st column, intro text in the 2 right columns (same grid as .objectives) */
.yoda-site .about-top{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;align-items:start;margin-bottom:80px}
.yoda-site .about-top .section-head{margin-bottom:0}
.yoda-site .about-intro{grid-column:2 / 4;margin:10px 0 0}
@media (max-width:820px){
  .yoda-site .about-top{grid-template-columns:1fr;gap:28px}
  .yoda-site .about-intro{grid-column:auto;margin-top:0}
}
.yoda-site .objectives .obj-item{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:22px;
  padding:30px 24px;display:flex;flex-direction:column;justify-content:flex-start;
  transition:background .25s ease,border-color .25s ease,box-shadow .25s ease,transform .25s ease;
}
.yoda-site .objectives .obj-item:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 16px 32px rgba(0,0,0,.16);transform:scale(1.03)}
.yoda-site .objective-number{font-family:var(--font-mono);font-size:24px;line-height:1;font-weight:400;color:var(--accent)}
.yoda-site .objective-rule{display:block;width:28px;height:2px;background:var(--accent);margin:16px 0 44px}
.yoda-site .obj-item p{font-size:13px;line-height:1.65;color:var(--ink)}

.yoda-site .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:820px){ .yoda-site .cards3{grid-template-columns:1fr} }
/* same look as the team cards (.member), at rest and on hover */
.yoda-site .card{
  position:relative;background:var(--glass);border:1px solid var(--glass-border);
  border-radius:22px;padding:30px;
  display:flex;flex-direction:column;gap:12px;overflow:hidden;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
/* hover: turquoise outline and glow on the dark ground (Team cards use the same) */
.yoda-site .card:hover{border-color:var(--accent);background-color:rgba(255,255,255,.07);box-shadow:0 0 0 1px var(--accent),0 0 36px 4px rgba(64,224,208,.35)}
.yoda-site .card h3{font-size:19px;font-weight:700}
.yoda-site .card p{font-size:14.5px;line-height:1.6;color:var(--ink-soft)}

/* ---------- TEAM ---------- */
.yoda-site .team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:start}
@media (max-width:820px){ .yoda-site .team-grid{grid-template-columns:1fr} }
.yoda-site .member{
  background:var(--glass);border:1px solid var(--glass-border);border-radius:22px;
  padding:14px 14px 28px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;
  transition:border-color .25s ease,box-shadow .25s ease,background-color .25s ease;
}
.yoda-site #team .member{position:relative;background:var(--glass)}
/* desktop only: open cards share the tallest open height, and View CV is pinned to the
   bottom so it lines up across them
   (padding-bottom 66px = 28px bottom space + 20px link line + 18px gap above it) */
@media (min-width:821px){
  .yoda-site #team .member:has(.biography[open]){min-height:var(--team-open-h,auto);padding-bottom:66px}
  .yoda-site #team .member .cv-link{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);margin-top:0;white-space:nowrap}
}
/* mobile: same margin on every side of the card's contents; open cards keep their own height */
@media (max-width:820px){
  .yoda-site #team .member{padding:20px}
}
.yoda-site .member:hover{border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 36px 4px rgba(64,224,208,.35)}
.yoda-site #team .member:hover{background-color:rgba(255,255,255,.07)}
.yoda-site .avatar-frame{
  width:100%;height:auto;aspect-ratio:4 / 3;border-radius:18px;overflow:hidden;
}
.yoda-site .avatar{
  width:100%;height:100%;aspect-ratio:4 / 3;border-radius:18px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:700;font-size:24px;color:#0d1006;
}
.yoda-site img.avatar{object-fit:cover;transition:transform .3s ease}
.yoda-site img.avatar:hover{transform:scale(1.06)}
@media (prefers-reduced-motion:reduce){ .yoda-site img.avatar{transition:none} }
.yoda-site .member h3{
  font-size:18px;font-weight:700;color:var(--ink);margin-bottom:-5px;margin-top:5px;
  line-height:1.25;width:100%;
}
.yoda-site .member .role,.yoda-site .cards3 .card .role{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:-3px;margin-bottom:12px}
/* contact cards: role sits on its own line under the name */
.yoda-site .cards3 .card .role{display:block;margin:6px 0 0}
.yoda-site .biography{width:100%;margin-top:14px}
.yoda-site .biography summary{
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--accent);font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  list-style:none;border:1px solid rgba(64,224,208,.35);border-radius:999px;padding:7px 12px;
  transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.yoda-site .biography summary::-webkit-details-marker{display:none}
.yoda-site .biography summary::after{content:"+";font-size:14px;line-height:1;margin-left:8px}
.yoda-site .biography[open] summary::after{content:"-"}
.yoda-site .biography summary:hover,
.yoda-site .member:hover .biography summary{background:var(--accent);border-color:var(--accent);color:var(--btn-hover-ink)}
/* biography text left-aligned; name, role, Biography button and View CV stay centred */
.yoda-site .member p.bio{font-size:12px;line-height:1.55;color:var(--ink-soft);margin-top:22px;text-align:left}
/* mobile (single-column Team): biography text slightly larger */
@media (max-width:820px){ .yoda-site .member p.bio{font-size:12.75px} }
.yoda-site .member .cv-link{display:inline-block;margin-top:18px;font-size:12.5px;color:var(--accent);text-decoration:none;transition:color .25s ease}
.yoda-site .member .cv-link:hover{color:#fff}

/* ---------- TIMELINE ---------- */
.yoda-site .timeline-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:32px 24px;position:relative;
}
@media (max-width:820px){ .yoda-site .timeline-grid{grid-template-columns:1fr;gap:0} }
.yoda-site .tl-row{display:grid;grid-column:1/-1;grid-template-columns:repeat(4,1fr);gap:32px 24px;position:relative}
@media (max-width:820px){
  .yoda-site .tl-row{display:block;position:relative}
}
.yoda-site .milestone{position:relative;padding-top:26px}
@media (max-width:820px){
  .yoda-site .milestone{padding-top:0;padding-left:26px;margin-bottom:44px}
  .yoda-site .tl-row:last-child .milestone:last-child{margin-bottom:0}
  /* outgoing line segment: grows down from this node into the next one (across row
     boundaries too, so the timeline reads as one continuous line), so the next ball
     only reveals once the line has visually "arrived" at it (own delay already equals
     the next node's reveal delay minus one step, since --tl-step is a uniform stride
     across the whole sequence) */
  .yoda-site .milestone::after{
    content:"";position:absolute;top:7px;left:4.5px;width:1px;height:calc(100% + 44px);
    background:var(--border-soft);transform-origin:0 0;z-index:1;
  }
  .yoda-site .tl-row:last-child .milestone:last-child::after{content:none}
  .js-ready .yoda-site .milestone::after{
    transform:scaleY(0);
    transition:transform var(--tl-step,600ms) linear;
    transition-delay:var(--reveal-delay,0ms);
  }
  .js-ready .yoda-site .milestone.is-visible::after{transform:scaleY(1)}
}
@media (max-width:820px) and (prefers-reduced-motion:reduce){
  .js-ready .yoda-site .milestone::after{transform:none;transition:none}
}
/* incoming line segment: grows from the previous node into this one, so the ball
   only reveals once the line has visually "arrived" (delay = own reveal delay minus one step) */
.yoda-site .milestone:not(:first-child)::before{
  content:"";position:absolute;top:0;left:calc(-100% - 19px);width:calc(100% + 24px);height:1px;
  background:var(--border-soft);transform-origin:0 0;z-index:0;
}
.js-ready .yoda-site .milestone:not(:first-child)::before{
  transform:scaleX(0);
  transition:transform var(--tl-step,600ms) linear;
  transition-delay:calc(var(--reveal-delay,0ms) - var(--tl-step,600ms));
}
.js-ready .yoda-site .milestone.is-visible:not(:first-child)::before{transform:scaleX(1)}
@media (max-width:820px){ .yoda-site .milestone::before{display:none} }
@media (prefers-reduced-motion:reduce){ .js-ready .yoda-site .milestone:not(:first-child)::before{transform:none;transition:none} }
.yoda-site .milestone .node{
  position:absolute;top:0;left:0;width:10px;height:10px;border-radius:999px;z-index:2;
  background:var(--accent);box-shadow:0 0 0 4px rgba(64,224,208,.15);transform:translateY(-5px);
}
@media (max-width:820px){
  .yoda-site .milestone .node{left:0;top:2px;transform:none}
}
.yoda-site .milestone .date{font-size:11px;letter-spacing:.06em;color:var(--accent);margin-bottom:8px}
.yoda-site .milestone h4{font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.yoda-site .milestone p{font-size:13px;line-height:1.55;color:var(--ink-faint)}
/* content (ball + date/title/text) fades in on its own, independent of .milestone's own
   opacity — the milestone box must stay visible so its ::before line segment can be
   seen growing in real time instead of popping in with the box */
/* node starts fading in exactly when the incoming line reaches its centre: segments run
   centre-to-centre at a constant (linear) speed and end at the node's own reveal delay */
.js-ready .yoda-site .milestone.timeline-reveal .node{opacity:0;transition:opacity .42s ease-out var(--reveal-delay,0ms),box-shadow .25s ease}
.js-ready .yoda-site .milestone.timeline-reveal.is-visible .node{opacity:1}
.js-ready .yoda-site .milestone.timeline-reveal .date,
.js-ready .yoda-site .milestone.timeline-reveal h4,
.js-ready .yoda-site .milestone.timeline-reveal p{opacity:0;transition:opacity .42s ease;transition-delay:var(--reveal-delay,0ms)}
/* reveal delay only applies to the fade, so the hover glow reacts immediately */
.js-ready .yoda-site .milestone.timeline-reveal h4{transition:opacity .42s ease var(--reveal-delay,0ms),text-shadow .25s ease}
.js-ready .yoda-site .milestone.timeline-reveal.is-visible .date,
.js-ready .yoda-site .milestone.timeline-reveal.is-visible h4,
.js-ready .yoda-site .milestone.timeline-reveal.is-visible p{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js-ready .yoda-site .milestone.timeline-reveal .node{opacity:1;transition:none}
  .js-ready .yoda-site .milestone.timeline-reveal .date,
  .js-ready .yoda-site .milestone.timeline-reveal h4,
  .js-ready .yoda-site .milestone.timeline-reveal p{opacity:1;transition:none}
}

/* ---------- INSTITUTIONS ---------- */
.yoda-site .inst-grid{display:grid;grid-template-columns:.85fr 1.6fr;gap:56px}
@media (max-width:820px){ .yoda-site .inst-grid{grid-template-columns:1fr;gap:32px} }
.yoda-site .inst-panel{background:var(--glass);border:1px solid var(--glass-border);border-radius:6px;padding:40px}
.yoda-site .inst-panel p{font-size:17px;line-height:1.7;color:var(--ink)}
.yoda-site .inst-panel p + p{margin-top:20px;font-size:14.5px;color:var(--ink-faint)}
.yoda-site .inst-panel em{color:var(--accent);font-style:normal}

/* ---------- INVOLVE ---------- */
.yoda-site .cards3 .card{justify-content:space-between}
.yoda-site .cards3 .card h3{font-size:16px}
.yoda-site .cards3 .card .btn{width:100%;margin-top:20px}
/* hovering the card triggers its button's hover state */
.yoda-site .cards3 .card:hover .btn-outline{background:var(--accent);color:var(--btn-hover-ink)}

/* ---------- CONTACT + FOOTER ---------- */
/* Contact on its own light background (.light-bg, like About and Team), with the default
   ink/accent styles; the footer has its own hero_03 background (.footer-bg), sized and moved
   against the footer alone, exactly like the timeline background */
.yoda-site .contact-footer{background:var(--accent);color:var(--accent-ink);position:relative;overflow:hidden;isolation:isolate}
.yoda-site #involve{background:var(--bg);color:var(--ink);position:relative;isolation:isolate}

.yoda-site footer{padding-block:104px 80px;color:var(--accent-ink);position:relative;overflow:hidden;isolation:isolate}
@media (max-width:640px){ .yoda-site footer{padding-block:60px 90px} }
.yoda-site .footer-grid{display:grid;grid-template-columns:2fr 1fr;gap:48px;padding-bottom:64px;border-bottom:1px solid rgba(255,255,255,.35)}
@media (max-width:720px){ .yoda-site .footer-grid{grid-template-columns:1fr;gap:36px} }
/* logos row below the line; the files share one canvas size, so equal widths keep them equal */
.yoda-site .footer-partners{padding-bottom:44px;border-bottom:1px solid rgba(255,255,255,.35)}
/* same gap between each line and the label below it */
.yoda-site .footer-partners,.yoda-site .footer-funding{padding-top:20px}
.yoda-site footer .footer-partners-label{font-family:var(--font-display);font-weight:600;font-size:12px;letter-spacing:.12em;color:var(--accent-ink);margin:0 0 24px}
.yoda-site .footer-logos{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:20px}
.yoda-site .footer-logos .logo-box{flex:0 1 auto;min-width:0;height:84px;display:flex;align-items:center;justify-content:center;padding:8px 20px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.18);border-radius:14px;text-decoration:none;transition:background-color .25s ease,box-shadow .25s ease}
.yoda-site .footer-logos .logo-box:hover,.yoda-site .footer-logos .logo-box:focus-visible{background:rgba(255,255,255,.16);box-shadow:0 0 18px rgba(255,255,255,.35)}
/* fixed box height for every logo; the image keeps its proportions (object-fit) if the box has to narrow */
.yoda-site .footer-logos img{display:block;height:66px;width:auto;max-width:100%;object-fit:contain}
/* wide logo without built-in margins: smaller image so it matches the others visually, width follows the logo */
.yoda-site .footer-logos .logo-box--wide{height:84px}
.yoda-site .footer-logos .logo-box--wide img{height:36px}
/* CETRAD logo has no built-in margins either */
.yoda-site .footer-logos .logo-box--cetrad img{height:54px}
/* Critical Software logo has no built-in margins either */
.yoda-site .footer-logos .logo-box--critical img{height:38px}
/* partner and funding logos drop to the next line instead of shrinking */
.yoda-site .footer-partners .footer-logos,.yoda-site .footer-funding .footer-logos{flex-wrap:wrap}
.yoda-site .footer-partners .footer-logos .logo-box,.yoda-site .footer-funding .footer-logos .logo-box{flex-shrink:0;max-width:100%}
/* partner boxes all share one width and fill the row, so the last box lines up with the right end of the line above */
.yoda-site .footer-partners .footer-logos .logo-box{flex:1 1 0;width:auto}
/* tablet: two boxes per row, still equal and full width */
@media (max-width:960px){ .yoda-site .footer-partners .footer-logos .logo-box{flex:1 1 calc(50% - 10px)} }
/* funding boxes follow the partner columns: FCT is one column wide, Lisboa 2030 spans two columns plus the gap between them */
.yoda-site .footer-funding .footer-logos .logo-box{flex:0 0 calc((100% - 60px) / 4)}
.yoda-site .footer-funding .footer-logos .logo-box--wide{flex-basis:calc((100% - 60px) / 2 + 20px)}
/* tablet: partner columns are halves, so FCT takes one half and Lisboa 2030 the full row */
@media (max-width:960px){
  .yoda-site .footer-funding .footer-logos .logo-box{flex-basis:calc(50% - 10px)}
  .yoda-site .footer-funding .footer-logos .logo-box--wide{flex-basis:100%}
}
/* mobile: one logo per line, every box full width */
@media (max-width:640px){
  .yoda-site .footer-logos{flex-direction:column;align-items:stretch}
  .yoda-site .footer-logos .logo-box,.yoda-site .footer-partners .footer-logos .logo-box,.yoda-site .footer-funding .footer-logos .logo-box{width:100%;flex:none}
}
.yoda-site footer .footer-brand{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.2;color:var(--accent-ink)}
.yoda-site footer .footer-title{font-family:var(--font-display);font-weight:600;font-size:19px;line-height:1.2;margin-top:0;color:var(--accent-ink)}
.yoda-site footer .footer-tagline{font-size:16px;line-height:1.6;margin-top:8px;color:var(--accent-ink)}
.yoda-site footer .footer-copy{font-size:13.5px;margin-top:22px;color:rgba(255,255,255,.8)}