/* Platform Zero handbook: palette p8, typography p6, patterns p9. Paint and typography only. */
:root,.inner-page{--forest:#3b1780;--ink:#28282e;--lime:#00f0b2;--paper:#faf9fc;--muted:#68616f;--line:#e4dceb;--brand-purple:#3b1780;--brand-green:#00f0b2;--brand-lavender:#bca8d0;--brand-forest:#00402e}
body,.inner-page{font-family:'Open Sans',Arial,sans-serif;color:var(--ink)}
h1,h2,h3,.inner-page h1,.inner-page h2,.inner-page h3{font-family:'Bebas Neue','Arial Narrow',sans-serif;font-weight:400;letter-spacing:0}
h1 em,h2 em,h3 em,.inner-page h1 em,.inner-page h2 em,.inner-page h3 em{font-family:inherit;font-style:normal;font-weight:400}
button,input,select,textarea{font-family:'Open Sans',Arial,sans-serif}
.chapter-art text{font-family:'Open Sans',Arial,sans-serif}
.button,.pz-button{color:#3b1780;background:#00f0b2}
.button:hover,.pz-button:hover{color:#3b1780;background:#bca8d0}
.text-link{color:#3b1780}
.hero .text-link,.page-hero .text-link,.join-section .text-link{color:inherit}
.site-footer,.pz-footer{background:#241044}
.join-section{background:#241044}
.hero-film,.sector:nth-child(3) video{filter:none}
/* The supplied pattern is unfiltered and used at modest scale. */
.newsletter{background-color:#f5f1fa;background-image:url('brand/wave-pattern.png');background-repeat:repeat-x;background-position:left bottom;background-size:auto 7px}
.site-footer,.pz-footer{background-image:url('brand/wave-pattern.png');background-repeat:repeat-x;background-position:left bottom;background-size:auto 7px}
:focus-visible{outline-color:#3b1780}
::selection{background:#00f0b2;color:#3b1780}

h1 em,h2 em,h3 em{letter-spacing:inherit}
.home-page .intro h2,.home-page .platform-top h2,.home-page .frontiers h2,.home-page .campus-copy h2,.home-page .community-section h2,.home-page .journal h2,.home-page .newsletter h2{color:#3b1780}
.newsletter,.site-footer,.pz-footer{position:relative;background-image:none}
.newsletter::after,.site-footer::after,.pz-footer::after{content:none}
/* Condensed brand headlines need neutral tracking rather than the previous sans-serif tightening. */
h1,h2,h3,.inner-page h1,.inner-page h2,.inner-page h3{letter-spacing:.01em!important}
h1 em,h2 em,h3 em{letter-spacing:inherit!important}
.muted-text{color:#68616f}

/* A quicker five-scene film edit, retaining decoded crossfades and compact phone controls. */
.hero-film{transition-duration:1.2s}
.film-selector{gap:18px}
.film-selector button{min-width:62px}
@media(max-width:760px){.home-page .film-selector{left:6%;right:6%;gap:12px}.film-selector button{min-width:0;flex:1;font-size:9px}}

/* short-viewport fix: keep a height floor on the home hero so the
   bottom-anchored film selector can never ride up into the copy */
.home-page .hero{min-height:720px}
@media(max-width:760px){.home-page .hero{min-height:740px}}

/* headline second lines: brand mint, never grey */
h1 .muted-text,h2 .muted-text,h3 .muted-text{color:#00f0b2}


/* ===== back-to-top rocket (ported from the original site) ===== */
:root{--ease-spring:cubic-bezier(.34,1.56,.64,1)}
/* back to top */
#toTop{position:fixed;right:24px;bottom:24px;z-index:900;width:58px;height:58px;flex:none;
  border-radius:999px;box-sizing:border-box;border:none;cursor:pointer;padding:0;
  display:grid;place-items:center;isolation:isolate;
  background:linear-gradient(135deg,#3b1780 0%,#53299c 48%,#0aa77c 100%);
  box-shadow:0 14px 32px -12px rgba(26,22,40,.55),0 0 0 6px rgba(0,240,178,.08);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .4s,transform .4s var(--ease-spring),filter .4s ease,box-shadow .4s}
#toTop.show{opacity:1;transform:none;pointer-events:auto}
#toTop:hover{transform:translateY(-5px);filter:saturate(1.15) brightness(1.08);
  box-shadow:0 20px 38px -12px rgba(26,22,40,.68),0 0 0 9px rgba(0,240,178,.14)}
#toTop .ttk{width:41px;height:41px;overflow:visible;position:relative;top:-2px;transition:transform .35s var(--ease-spring)}
#toTop:hover .ttk{transform:translateY(-3px)}
/* exhaust: separate svgs, positioned under the nozzle */
#toTop .tt-flame{transform-box:fill-box;transform-origin:50% 0}
#toTop .fl-outer{transform-box:fill-box;transform-origin:50% 0;
  animation:flOuter .34s ease-in-out infinite alternate}
#toTop .fl-tongue{transform-box:fill-box;transform-origin:50% 0;
  animation:flTongue .19s ease-in-out infinite alternate}
#toTop .fl-sp{animation:flSpark 1s linear infinite}
#toTop .fl-sp2{animation-duration:1.3s;animation-delay:.35s}
#toTop .fl-sp3{animation-duration:.85s;animation-delay:.6s}
#toTop:hover .fl-outer{animation-duration:.2s}
#toTop:hover .fl-tongue{animation-duration:.12s}
/* blast off on click */
#toTop.launch .ttk{animation:ttLaunch .78s cubic-bezier(.35,0,.6,1) forwards}
#toTop.launch .fl-outer{animation-duration:.09s}
#toTop.launch .fl-tongue{animation-duration:.07s}
#toTop{transition:opacity .3s}
#toTop:hover{transform:none}
#toTop .fl-outer,#toTop .fl-tongue,#toTop .fl-sp{animation:none}
@keyframes ttLaunch{
  0%{transform:translateY(0)}
  14%{transform:translateY(3px) scale(.95)}
  100%{transform:translateY(-58px) scale(1.06);opacity:0}
}
@keyframes flOuter{
  from{transform:scaleY(.72) scaleX(.9);opacity:.8}
  to{transform:scaleY(1.14) scaleX(1.06);opacity:1}
}
@keyframes flTongue{
  from{transform:scaleY(.55) scaleX(.8);opacity:.55}
  to{transform:scaleY(1.15) scaleX(1.05);opacity:.95}
}
@keyframes flSpark{
  0%{opacity:0;transform:translateY(-3px) scale(.5)}
  25%{opacity:.9}
  100%{opacity:0;transform:translateY(9px) scale(.35)}
}

/* headings missed by the indigo list above */
.home-page .builders h2,.home-page .newsletter-section h2{color:#3b1780}

/* ===== headline highlight system =====
   Rule: each headline highlights its final payoff phrase in brand mint via <em>
   (or legacy .muted-text). Everything else: indigo on light, white on dark. */
h1 em,h2 em,h3 em{color:#00f0b2;font-style:normal}

/* film selector: underlines are countdown bars, mint drains as the clip runs out */
.film-selector button i{overflow:hidden}
.film-selector button[aria-pressed=true] i{background:#ffffff40;height:2px}
.film-selector button i::after{content:'';position:absolute;inset:0;background:#00f0b2;
  transform:scaleX(0);transform-origin:left;will-change:transform}
.film-selector button i.run::after{animation:pzBarFill var(--dur,5.25s) linear forwards;
  animation-play-state:var(--play,running)}
@keyframes pzBarFill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.film-selector button:not([aria-pressed=true]) i::after{opacity:0;transition:opacity .35s ease}
@media(prefers-reduced-motion:reduce){.film-selector button i.run::after{animation:none;transform:scaleX(1)}}


/* ===== circle brand logo + wave ripple: one canonical block for ALL pages =====
   Home page uses .brand, inner pages use .pz-brand. Both get the same circle
   logo at the same size; the ripple layer sits on top, masked to the wave bands. */
.brand-fx{position:relative;display:block;line-height:0}
.brand,.pz-brand{display:flex;align-items:center;line-height:0}
.brand img.brand-circle,.pz-brand img.brand-circle{width:96px;height:96px;filter:none;border-radius:50%;object-fit:contain}
.footer-top>.brand img.brand-circle,.pz-footer .pz-brand img.brand-circle{width:64px;height:64px}


/* inner header is a fixed height: give it room for the larger mark */
/* keep the mark in exactly the same place as the home page, so it does not
   shift when you move between pages */
.inner-page .pz-header{height:152px;padding:28px 5%}
.inner-page .pz-menu{padding-top:186px}
@media(max-width:760px){
  .brand img.brand-circle,.pz-brand img.brand-circle{width:62px;height:62px}
  .inner-page .pz-header{height:102px;padding:23px 6%}
  .inner-page .pz-menu{padding-top:136px}
}
@media(prefers-reduced-motion:reduce){}

/* ===== arrow links: invite the click =====
   On hover the mark flies out along its own diagonal and loops back in from the
   opposite corner, while a mint line sweeps across the underline. */
.text-link,.hero-explore{position:relative}
.text-link span,.hero-explore span{position:relative;display:inline-grid;place-items:center;
  width:24px;height:24px;overflow:hidden}
.text-link .ui-arrow,.hero-explore .ui-arrow{display:block}
.text-link:hover .ui-arrow,.text-link:focus-visible .ui-arrow,
.hero-explore:hover .ui-arrow,.hero-explore:focus-visible .ui-arrow{animation:pzArrowLoop .55s cubic-bezier(.22,1,.36,1)}
@keyframes pzArrowLoop{
  0%{transform:translate(0,0)}
  45%{transform:translate(150%,-150%)}
  46%{transform:translate(-150%,150%)}
  100%{transform:translate(0,0)}
}
.text-link::after,.hero-explore::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:#00f0b2;transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.text-link:hover::after,.text-link:focus-visible::after,
.hero-explore:hover::after,.hero-explore:focus-visible::after{transform:scaleX(1)}
@media(prefers-reduced-motion:reduce){
  .text-link:hover .ui-arrow,.hero-explore:hover .ui-arrow{animation:none}
  .text-link::after,.hero-explore::after{transition:none}
}

/* ===== sector chips: each field tinted in its own colour, legible at all times =====
   These are labels, not controls, so the hover is a light lift rather than a fill
   that would wipe out the text. */
.inner-page .chips span,.chips span{
  display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:2px;
  font:600 .82rem/1 'Open Sans',sans-serif;letter-spacing:.03em;
  color:var(--chip,#3b1780);
  background:var(--chip-soft,#ebe8f2);
  border:1px solid var(--chip-line,#cec5df);
  transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.inner-page .chips span::before,.chips span::before{
  content:'';flex:none;width:9px;height:9px;border-radius:50%;
  background:var(--chip,#3b1780);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
.inner-page .chips span:nth-child(1),.chips span:nth-child(1){
  --chip:#14449e;--chip-soft:#e8ecf5;--chip-line:#c4d0e7}   /* maritime */
.inner-page .chips span:nth-child(2),.chips span:nth-child(2){
  --chip:#53299c;--chip-soft:#eeeaf5;--chip-line:#d4cae6}   /* digitalization */
.inner-page .chips span:nth-child(3),.chips span:nth-child(3){
  --chip:#0a7050;--chip-soft:#e7f2ef;--chip-line:#c2dfd7}   /* electrification */
.inner-page .chips span:nth-child(4),.chips span:nth-child(4){
  --chip:#3b1780;--chip-soft:#ebe8f2;--chip-line:#cec5df}   /* other radical tech */
.inner-page .chips span:hover,.chips span:hover{
  transform:translateY(-2px);
  border-color:var(--chip);
  box-shadow:0 10px 20px -14px var(--chip);
}
.inner-page .chips span:hover::before,.chips span:hover::before{transform:scale(1.25)}
@media(prefers-reduced-motion:reduce){
  .inner-page .chips span,.chips span,.chips span::before{transition:none}
  .inner-page .chips span:hover,.chips span:hover{transform:none}
}


/* ===== Explore menu: proper section headings, and a ground with some depth ===== */
.home-page .mobile-nav,.inner-page .pz-menu{
  background:
    radial-gradient(85% 65% at 10% 0%, rgba(0,240,178,.14), transparent 62%),
    radial-gradient(75% 65% at 100% 100%, rgba(83,41,156,.6), transparent 66%),
    linear-gradient(162deg,#2a0f5a 0%,#3b1780 52%,#2b1164 100%);
}
/* the group name now reads as a heading rather than a tag above the links */
.home-page .menu-groups .menu-group-label,
.inner-page .menu-groups .menu-group-label{
  display:flex;align-items:center;gap:12px;
  font:600 13px/1 'Open Sans',sans-serif;letter-spacing:.17em;text-transform:uppercase;
  color:#00f0b2;margin:0 0 16px;padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,.15);
}
.home-page .menu-groups .menu-group-label::after,
.inner-page .menu-groups .menu-group-label::after{
  content:'';flex:1;height:1px;background:linear-gradient(90deg,rgba(0,240,178,.45),transparent);
}
@media(max-width:760px){
  .home-page .menu-groups .menu-group-label,
  .inner-page .menu-groups .menu-group-label{font-size:11px;letter-spacing:.15em;margin-bottom:12px;padding-bottom:9px}
}

/* ===== Explore menu links: the brand's wave slash grows in beside the one you are on ===== */
.home-page .mobile-nav .menu-groups a,
.inner-page .pz-menu .menu-groups a{
  position:relative;display:inline-flex;align-items:center;width:fit-content;
  transition:color .25s ease,opacity .25s ease;
}
.home-page .mobile-nav .menu-groups a::before,
.inner-page .pz-menu .menu-groups a::before{
  content:'';flex:none;width:0;height:.72em;margin-right:0;
  background:#00f0b2;border-radius:2px;transform:skewX(-18deg);
  transition:width .32s cubic-bezier(.22,1,.36,1),margin-right .32s cubic-bezier(.22,1,.36,1);
}
/* the rest of the list steps back so the active one carries the eye */
.home-page .mobile-nav .menu-groups:hover a,
.inner-page .pz-menu .menu-groups:hover a{opacity:.42}
.home-page .mobile-nav .menu-groups a:hover,
.home-page .mobile-nav .menu-groups a:focus-visible,
.inner-page .pz-menu .menu-groups a:hover,
.inner-page .pz-menu .menu-groups a:focus-visible{opacity:1;color:#00f0b2}
.home-page .mobile-nav .menu-groups a:hover::before,
.home-page .mobile-nav .menu-groups a:focus-visible::before,
.inner-page .pz-menu .menu-groups a:hover::before,
.inner-page .pz-menu .menu-groups a:focus-visible::before{width:10px;margin-right:16px}
@media(prefers-reduced-motion:reduce){
  .home-page .mobile-nav .menu-groups a,.inner-page .pz-menu .menu-groups a,
  .home-page .mobile-nav .menu-groups a::before,.inner-page .pz-menu .menu-groups a::before{transition:none}
}

/* ---------- article pages ----------
   One page serves every story. It reads the row from the team's news sheet and
   rebuilds the Google Doc behind it, so publishing an article is writing one. */
.page-article .article-hero{background:#3b1780;color:#fff;padding:168px 0 58px}
.page-article .article-hero h1{color:#fff;font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.05;max-width:20ch}
.page-article .article-back{display:inline-flex;align-items:center;gap:9px;margin-bottom:34px;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.75);transition:color .3s var(--ease-out,ease)}
.page-article .article-back:hover{color:#00f0b2}
.page-article .article-back svg{width:17px;height:17px}
.page-article .article-meta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px;margin-bottom:26px;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.78)}
/* the kicker carries the brand's skewed mint slash rather than a chip box */
.page-article .article-tag{position:relative;padding-left:24px;color:#00f0b2}
.page-article .article-tag::before{content:"";position:absolute;left:0;top:50%;width:13px;height:2px;
  background:#00f0b2;transform:translateY(-50%) skewX(-24deg)}
.page-article .article-lead{margin-top:22px;max-width:62ch;font-size:clamp(1.02rem,1.6vw,1.24rem);
  line-height:1.6;color:rgba(255,255,255,.86)}
.page-article .article-byline{margin-top:24px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#00f0b2}

/* the picture lifts into the indigo band, so the two read as one piece */
.page-article .article-figure{width:min(1120px,88%);margin:-44px auto 0;position:relative;z-index:2}
.page-article .article-figure img{width:100%;aspect-ratio:2/1;object-fit:cover;
  box-shadow:0 30px 70px -34px rgba(26,22,40,.5)}
.page-article .article:not([data-state="ready"]) .article-figure{display:none}

/* a comfortable measure to actually read at */
.page-article .article-body{width:min(33em,100%);margin:48px auto 78px;color:#28282e;
  font-size:1.19rem;line-height:1.66;overflow-wrap:anywhere}
/* the opening paragraph carries the reader in */
.page-article .article-body > p:first-of-type{font-size:1.32rem;line-height:1.55;color:#3b1780}
.page-article .article-body > :first-child{margin-top:0}
.page-article .article-body p{margin-bottom:1.3em}
.page-article .article-body h1,.page-article .article-body h2{font-size:clamp(1.55rem,2.6vw,2.05rem);
  line-height:1.16;margin:1.55em 0 .45em;color:#3b1780}
.page-article .article-body h2 + p{margin-top:0}
.page-article .article-body h3,.page-article .article-body h4{font-size:1.24rem;line-height:1.3;margin:2em 0 .55em}
.page-article .article-body ul,.page-article .article-body ol{margin:0 0 1.5em 1.35em}
.page-article .article-body li{margin-bottom:.5em}
.page-article .article-body a{color:#0a8160;text-decoration:underline;text-underline-offset:3px}
.page-article .article-body a:hover{color:#3b1780}
.page-article .article-body strong{font-weight:700;color:#3b1780}
.page-article .article-body blockquote{margin:2.2em 0;padding-left:26px;border-left:3px solid #00f0b2;
  font-size:1.22rem;line-height:1.5;color:#3b1780}
/* a picture gets room to breathe, but is never blown up past its own size */
.page-article .article-body figure{margin:2.1em 0}
.page-article .article-body figure img{max-width:100%;height:auto;margin-inline:auto}
.page-article .article-body table{width:100%;border-collapse:collapse;margin:2em 0;font-size:.95rem}
.page-article .article-body td,.page-article .article-body th{border:1px solid #e4dceb;padding:11px 14px;text-align:left}
.page-article .article-body hr{border:0;border-top:1px solid #e4dceb;margin:2.6em 0}
@media(max-width:760px){
  .page-article .article-hero{padding:138px 0 42px}
  .page-article .article-figure{margin-top:-30px}
  .page-article .article-body{margin:34px auto 58px;font-size:1.08rem}
}
.page-article .article-body figcaption{margin-top:12px;font-size:12px;letter-spacing:.04em;
  line-height:1.5;color:#756c8c}
.page-article .article-body figcaption a{color:#756c8c;text-decoration:underline;text-underline-offset:2px}
.page-article .article-body figcaption a:hover{color:#3b1780}
/* a picture that cannot carry the full width is shown at a size it can */
.page-article .article-figure.is-modest{width:min(880px,88%)}
.page-article .article-figure.is-modest img{aspect-ratio:auto}

/* the newsletter's check-it-over step, shown before anything is sent */
.nl-check{margin-top:16px;padding:17px 19px;background:#f6f3fb;border:1px solid #e4dceb}
.nl-check[hidden]{display:none}
.nl-check-q{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#68616f;margin:0 0 7px}
.nl-check-mail{font-size:17px;font-weight:600;color:#3b1780;margin:0;word-break:break-all;line-height:1.35}
.nl-check-hint{margin:11px 0 0;font-size:13px;color:#28282e;line-height:1.5}
.nl-fix{background:none;border:0;padding:0;font:inherit;color:#0a8160;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.nl-fix:hover{color:#3b1780}
.nl-check-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:15px}
.nl-yes{background:#00f0b2;color:#3b1780;border:0;padding:12px 19px;cursor:pointer;
  font:600 12px 'Open Sans',sans-serif;transition:background .3s,color .3s}
.nl-yes:hover{background:#3b1780;color:#fff}
.nl-edit{background:none;border:0;padding:12px 0;cursor:pointer;color:#68616f;
  font:12px 'Open Sans',sans-serif;text-decoration:underline;text-underline-offset:3px}
.nl-edit:hover{color:#3b1780}