/* =========================================================
   Erasmus — shared styles for inner pages (case studies, contact)
   Tokens and components copied from the home page (index.html),
   which follows the Revena report theme. Keep the two in step:
   if you change a token there, change it here too.
   The sidebar menu lives in /assets/menu.css (loaded on every page).
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

:root{
  --teal:#3EB6A0; --teal-d:#2E8B7A; --teal-dd:#236B5E;
  --coral:#F4A0A0; --coral-d:#E07F7F;
  --yellow:#E8C35A; --blue:#4A90B8; --grey:#B8C0C8;
  --ink:#2B2B2B; --slate:#6B7280; --line:#E4EEEC; --line2:#C9DCD8;
  --mist:#F2F7F6; --paper:#FFFFFF; --card:#FFFFFF;
  /* Erasmus splash identity. Fixed in both themes. */
  --splash:#0E2620; --splash-2:#123832; --splash-3:#0A1F1B;
  --mint:#4FD8B8; --mint-dim:#2FA890; --mauve:#C9A6A6; --gold:#D9C46A;
  --on-splash:#EAF3F0; --on-splash-muted:#9FBDB5; --hair-splash:rgba(234,243,240,.14);
  --nav-h:68px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --teal:#4CC7B0; --teal-d:#6FD6C2; --teal-dd:#1C5A4F;
    --coral:#E88F8F; --coral-d:#F4A0A0;
    --ink:#E7ECEB; --slate:#9AA5B1; --line:#2A3634; --line2:#2F4A45;
    --mist:#18211F; --paper:#101716; --card:#141C1B; --grey:#56606A;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --teal:#4CC7B0; --teal-d:#6FD6C2; --teal-dd:#1C5A4F;
  --coral:#E88F8F; --coral-d:#F4A0A0;
  --ink:#E7ECEB; --slate:#9AA5B1; --line:#2A3634; --line2:#2F4A45;
  --mist:#18211F; --paper:#101716; --card:#141C1B; --grey:#56606A;
  color-scheme:dark;
}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px))}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Poppins","Segoe UI",system-ui,-apple-system,sans-serif;color:var(--ink);
  background:var(--paper);line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px)}
a{color:var(--teal-d)}
img{display:block;max-width:100%}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.wrap{max-width:1040px;margin:0 auto;padding:0 32px}

/* ===== Top nav (same as home page) ===== */
.topnav{position:fixed;top:0;left:0;right:0;z-index:50;
  padding:env(safe-area-inset-top,0px) 0 0;
  background:rgba(14,38,32,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--hair-splash)}
.topnav .wrap{height:var(--nav-h);display:flex;align-items:center;gap:24px;max-width:1180px}
.brand{display:flex;align-items:center;gap:10px;color:var(--on-splash);text-decoration:none;font-weight:600;letter-spacing:.14em;font-size:.95rem}
.brand .logo{width:22px;height:22px}
.nav-cta{font-size:.84rem;font-weight:600;color:var(--splash);background:var(--mint);padding:9px 16px;border-radius:8px;text-decoration:none;white-space:nowrap;margin-left:auto}
.nav-cta:hover{background:#7EE9CE}

/* ===== Splash hero, page-sized (shorter than the home page) ===== */
.hero{position:relative;overflow:hidden;background:var(--splash);color:var(--on-splash);
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 76px) 0 68px}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;opacity:.9}
.hero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 32px;width:100%}
.hero .kicker{display:flex;align-items:center;gap:10px;color:var(--mint);font-weight:600;font-size:.92rem;margin-bottom:14px}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.4rem);font-weight:700;line-height:1.08;letter-spacing:-.02em;max-width:18ch}
.hero .lede{margin-top:18px;font-size:1.2rem;font-weight:500;color:var(--mint);max-width:40ch;line-height:1.45}
.hero .sub{margin-top:14px;font-size:1.02rem;color:var(--on-splash-muted);max-width:56ch}

/* ===== Revena report section pattern ===== */
section.s{padding:64px 0 16px}
section.s>.wrap>h2, section.band>.wrap>h2, .h2{display:flex;align-items:center;gap:12px;font-size:1.7rem;font-weight:700;color:var(--teal-d);letter-spacing:-.01em;margin-bottom:12px;line-height:1.2}
.glyph{width:26px;height:14px;flex:none}
.glyph circle{fill:currentColor} .glyph line{stroke:currentColor;stroke-width:.8}
h2 .glyph{color:var(--teal)}
h3{font-size:1.08rem;color:var(--teal-d);margin:30px 0 8px;line-height:1.3}
p.body{max-width:72ch;margin:10px 0}
.takeaway{background:var(--mist);border-left:4px solid var(--teal);border-radius:0 8px 8px 0;
  padding:14px 18px;margin:6px 0 22px;font-size:1.04rem;font-weight:500;max-width:78ch}
.takeaway b{color:var(--teal-d);font-weight:700}
.figshows{font-size:.9rem;color:var(--slate);margin-top:12px;max-width:78ch}
.figshows b{color:var(--ink);font-weight:600}

/* ===== Buttons and pills ===== */
.actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.btn{display:inline-block;font:inherit;font-size:.9rem;font-weight:600;text-decoration:none;padding:11px 18px;border-radius:8px;border:1px solid var(--teal);cursor:pointer}
.btn.primary{background:var(--mint);border-color:var(--mint);color:var(--splash)}
.btn.primary:hover{background:#7EE9CE;border-color:#7EE9CE}
.btn.secondary{background:var(--card);color:var(--teal-d);border-color:var(--line2)}
.btn.secondary:hover{border-color:var(--teal)}
.pill{display:inline-block;padding:1px 9px;border-radius:20px;font-size:.74rem;font-weight:600;white-space:nowrap}
.pill.t0{background:var(--teal);color:#fff}
.pill.t1{background:var(--yellow);color:#3a2f00}
.pill.t2{background:var(--line);color:var(--slate)}

/* ===== Splash band ===== */
section.band{background:var(--splash);color:var(--on-splash);padding:80px 0 72px;margin-top:64px}
section.band>.wrap>h2{color:var(--on-splash)}
section.band h2 .glyph{color:var(--mint)}

/* ===== Footer ===== */
main{display:block}
footer{background:var(--splash-3);color:var(--on-splash-muted);font-size:.8rem;padding:22px 0;margin-top:80px}
footer .wrap{display:flex;align-items:center;gap:10px;max-width:1180px}
footer .logo{width:16px;height:16px}

@media (max-width:900px){
  .wrap,.hero-inner{padding:0 20px}
  .hero{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 48px)}
}