/* Proteso — hi-fi design system
   DNA: black + cyan + Poppins 400/800 + tilted parallelogram motif
   ------------------------------------------------------------ */

:root{
  --bg:#000;
  --bg-2:#0a0a0a;
  --ink:#fff;
  --ink-2:#b8b8b8;
  --ink-3:#6a6a6a;
  --line:#1f1f1f;
  --line-2:#2a2a2a;
  --cyan:#00B8FF;
  --cyan-2:#00A3E3;
  --cyan-soft:rgba(0,184,255,0.12);
  --magenta:#FF2E85; /* used very sparingly in technical drawings */
  --paper:#f5f5f2;
  --paper-ink:#0a0a0a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:'Poppins',sans-serif;font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit}

/* type scale — only 400 / 800 */
.xb{font-weight:800;letter-spacing:-0.02em;line-height:1}
.eyebrow{font-weight:400;font-size:12px;letter-spacing:0.22em;text-transform:uppercase;color:var(--cyan)}
.eyebrow.muted{color:var(--ink-3)}
h1,h2,h3,h4{font-weight:800;letter-spacing:-0.02em;line-height:1;margin:0}
p{margin:0 0 1em;color:var(--ink-2);max-width:62ch}
.lead{color:var(--ink);font-size:18px;line-height:1.55}

.h-display{font-weight:800;font-size:clamp(72px,14vw,200px);letter-spacing:-0.045em;line-height:0.88}
.h1{font-weight:800;font-size:clamp(44px,6.5vw,88px);letter-spacing:-0.03em;line-height:0.95}
.h2{font-weight:800;font-size:clamp(32px,4.2vw,56px);letter-spacing:-0.02em;line-height:1}
.h3{font-weight:800;font-size:clamp(22px,2.2vw,30px);letter-spacing:-0.01em;line-height:1.1}

/* dual-tone headline helper: use <em> for cyan part */
h1 em, h2 em, h3 em, .h1 em, .h2 em, .h3 em{font-style:normal;color:var(--cyan)}

/* layout */
.wrap{max-width:1320px;margin:0 auto;padding:0 32px}
.wrap-narrow{max-width:960px;margin:0 auto;padding:0 32px}
section{position:relative}
.section{padding:112px 0}
.section.tight{padding:72px 0}
@media (max-width:760px){.section{padding:72px 0}.wrap,.wrap-narrow{padding:0 20px}}

.paper{background:var(--paper);color:var(--paper-ink)}
.paper p{color:#3a3a3a}
.paper .eyebrow{color:var(--cyan-2)}
.paper hr.rule{border-color:rgba(0,0,0,0.12)}

hr.rule{border:0;border-top:1px solid var(--line);margin:32px 0}
.rule-cyan{border:0;border-top:1px solid var(--cyan);opacity:0.6;margin:32px 0}

/* ---- parallelogram motif ---- */
.para{display:inline-block;width:36px;height:22px;background:var(--cyan);transform:skewX(-22deg);vertical-align:middle}
.para.sm{width:20px;height:12px}
.para.lg{width:58px;height:36px}
.para.xl{width:96px;height:60px}
.para.ghost{background:transparent;border:2px solid var(--cyan)}
.para.white{background:var(--ink)}

/* cluster — the signature decorative element (echoes rollup) */
.para-cluster{display:inline-flex;gap:10px;align-items:center}
.para-cluster .para{animation:para-float 6s ease-in-out infinite}
.para-cluster .para:nth-child(2){animation-delay:.8s}
.para-cluster .para:nth-child(3){animation-delay:1.6s}
@keyframes para-float{0%,100%{transform:skewX(-22deg) translateY(0)}50%{transform:skewX(-22deg) translateY(-6px)}}

/* absolute-positioned hero decor */
.para-deco{position:absolute;pointer-events:none;z-index:1}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 22px;font-weight:800;font-size:14px;letter-spacing:0.04em;text-transform:uppercase;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;
  transition:transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  position:relative;overflow:hidden;
}
.btn .arrow{display:inline-block;width:22px;height:10px;position:relative}
.btn .arrow::before{content:"";position:absolute;inset:0;background:var(--ink);
  clip-path:polygon(0 45%, 72% 45%, 72% 20%, 100% 50%, 72% 80%, 72% 55%, 0 55%);
  transition:background .15s ease, transform .2s ease;
}
.btn:hover{background:var(--ink);color:var(--bg)}
.btn:hover .arrow::before{background:var(--bg);transform:translateX(3px)}
.btn.primary{background:var(--cyan);border-color:var(--cyan);color:var(--bg)}
.btn.primary .arrow::before{background:var(--bg)}
.btn.primary:hover{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn.primary:hover .arrow::before{background:var(--bg);transform:translateX(3px)}
.btn.ghost-light{border-color:rgba(255,255,255,0.3);color:var(--ink)}
.btn.ghost-light:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.paper .btn{border-color:var(--paper-ink);color:var(--paper-ink)}
.paper .btn .arrow::before{background:var(--paper-ink)}
.paper .btn:hover{background:var(--paper-ink);color:var(--paper)}
.paper .btn:hover .arrow::before{background:var(--paper)}
.paper .btn.primary{background:var(--cyan);border-color:var(--cyan);color:#000}
.paper .btn.primary:hover{background:var(--paper-ink);border-color:var(--paper-ink);color:var(--paper)}
.paper .btn.primary:hover .arrow::before{background:var(--paper)}

/* ---- header ---- */
header.site{
  position:sticky;top:0;z-index:50;background:rgba(0,0,0,0.8);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--line);
}
header.site .bar{display:flex;align-items:center;gap:28px;height:74px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:22px;letter-spacing:-0.01em}
.logo .mark{width:28px;height:28px;position:relative;display:inline-block}
.logo .mark::before{content:"";position:absolute;inset:3px 14px 3px 0;background:var(--cyan);transform:skewX(-22deg)}
.logo .mark::after{content:"";position:absolute;inset:9px 2px 9px 16px;background:var(--ink);transform:skewX(-22deg)}
.logo-text{font-weight:800;font-size:22px;letter-spacing:0.02em}
.logo-text em{font-style:normal;color:var(--cyan)}
nav.primary{display:flex;gap:28px;margin-left:24px}
nav.primary a{font-weight:400;font-size:14px;color:var(--ink-2);padding:6px 0;position:relative;transition:color .15s}
nav.primary a:hover{color:var(--ink)}
nav.primary a.active{color:var(--ink)}
nav.primary a.active::after{content:"";position:absolute;left:0;right:0;bottom:-26px;height:2px;background:var(--cyan)}
.header-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.lang{position:relative}
.lang-btn{background:transparent;border:1px solid var(--line-2);color:var(--ink-2);padding:8px 12px;font-size:12px;font-weight:400;letter-spacing:0.12em;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;gap:8px}
.lang-btn:hover{color:var(--ink);border-color:var(--cyan)}
.lang-menu{position:absolute;right:0;top:calc(100% + 8px);background:#0a0a0a;border:1px solid var(--line-2);min-width:160px;display:none}
.lang.open .lang-menu{display:block}
.lang-menu a{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;font-size:13px;color:var(--ink-2);border-bottom:1px solid var(--line)}
.lang-menu a:last-child{border-bottom:0}
.lang-menu a:hover{color:var(--ink);background:rgba(255,255,255,0.03)}
.lang-menu a .stub{font-size:10px;color:var(--ink-3);letter-spacing:0.12em;text-transform:uppercase}
.lang-menu a.active{color:var(--cyan)}

.mobile-toggle{display:none;background:transparent;border:1px solid var(--line-2);color:var(--ink);width:40px;height:40px;cursor:pointer;align-items:center;justify-content:center}
.mobile-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.mobile-toggle span::before,.mobile-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink)}
.mobile-toggle span::before{top:-6px}.mobile-toggle span::after{top:6px}

@media (max-width:900px){
  nav.primary{display:none;position:absolute;left:0;right:0;top:74px;background:#0a0a0a;flex-direction:column;gap:0;margin-left:0;padding:8px 20px 16px;border-bottom:1px solid var(--line)}
  header.site.open nav.primary{display:flex}
  nav.primary a{padding:14px 0;border-bottom:1px solid var(--line)}
  nav.primary a.active::after{display:none}
  .mobile-toggle{display:inline-flex}
  .header-right .btn.demo{display:none}
}

/* ---- footer ---- */
footer.site{background:#050505;border-top:1px solid var(--line);padding:72px 0 36px;margin-top:0}
footer.site .cols{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px}
@media (max-width:900px){footer.site .cols{grid-template-columns:1fr 1fr}}
@media (max-width:560px){footer.site .cols{grid-template-columns:1fr}}
footer.site h4{font-size:12px;font-weight:400;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-3);margin-bottom:16px}
footer.site a{color:var(--ink-2);display:block;padding:4px 0;font-size:14px}
footer.site a:hover{color:var(--cyan)}
footer.site .addr{color:var(--ink-2);font-size:14px;line-height:1.7}
footer.site .addr strong{color:var(--ink);font-weight:400}
footer.site .bottom{border-top:1px solid var(--line);margin-top:56px;padding-top:24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--ink-3);letter-spacing:0.04em}
footer.site .bottom a{display:inline;color:var(--ink-3)}
footer.site .bottom a:hover{color:var(--ink-2)}
footer.site .socials{display:flex;gap:10px}
footer.site .socials a{width:36px;height:36px;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;padding:0}
footer.site .socials a:hover{border-color:var(--cyan);color:var(--cyan)}
footer.site .logo-mark{margin-bottom:16px}

/* ---- stat block (rollup-style) ---- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.stats.two{grid-template-columns:repeat(2,1fr)}
.stats .cell{padding:28px 24px;border-right:1px solid var(--line)}
.stats .cell:last-child{border-right:0}
.stats .k{font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.stats .n{font-weight:800;font-size:clamp(40px,5vw,64px);color:var(--cyan);line-height:1;letter-spacing:-0.03em}
.stats .n .u{font-size:0.4em;color:var(--ink);margin-left:4px;font-weight:800;letter-spacing:0}
.stats .sub{font-size:12px;color:var(--ink-3);margin-top:10px;line-height:1.4}
@media (max-width:760px){.stats{grid-template-columns:repeat(2,1fr)}.stats .cell:nth-child(2){border-right:0}.stats .cell:nth-child(1),.stats .cell:nth-child(2){border-bottom:1px solid var(--line)}}

/* ---- benefit tile (icon + label) ---- */
.benefits{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media (max-width:900px){.benefits{grid-template-columns:repeat(2,1fr)}}
.benefit{padding:28px 24px;border:1px solid var(--line);background:var(--bg-2);transition:border-color .2s}
.benefit:hover{border-color:var(--cyan)}
.benefit .ico{width:44px;height:44px;margin-bottom:22px;color:var(--cyan)}
.benefit .lbl{font-weight:800;font-size:13px;letter-spacing:0.12em;text-transform:uppercase;line-height:1.35}

/* ---- press strip ---- */
.press{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:28px;padding:24px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.press .item{opacity:0.6;font-weight:800;font-size:20px;letter-spacing:-0.01em;color:var(--ink);transition:opacity .2s, color .2s;font-style:italic}
.press .item.sans{font-style:normal;letter-spacing:0.04em;font-weight:800}
.press .item:hover{opacity:1;color:var(--cyan)}

/* ---- big image wells ---- */
.well{
  background:linear-gradient(135deg,#0f0f0f,#050505);
  border:1px solid var(--line);
  position:relative;overflow:hidden;
}
.well.stripe{background:
  repeating-linear-gradient(135deg,rgba(0,184,255,0.06) 0 12px,transparent 12px 28px),
  linear-gradient(135deg,#0f0f0f,#050505)
}
.well .ph{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  font-size:11px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-3);text-align:center
}
.well .corner{position:absolute;top:16px;left:16px;font-size:10px;letter-spacing:0.22em;text-transform:uppercase;color:var(--ink-3)}
.well .corner.tr{left:auto;right:16px;text-align:right}

/* ---- hero video placeholder ---- */
.hero-media{aspect-ratio:16/9;min-height:420px}
.hero-media.portrait{aspect-ratio:3/4;min-height:520px}

/* ---- badges ---- */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge{border:1px solid var(--line-2);color:var(--ink-2);padding:8px 14px;font-size:12px;letter-spacing:0.1em;text-transform:uppercase}
.paper .badge{border-color:rgba(0,0,0,0.15);color:#444}

/* ---- form ---- */
form.proteso{display:grid;grid-template-columns:1fr 1fr;gap:22px}
@media (max-width:760px){form.proteso{grid-template-columns:1fr}}
form.proteso .full{grid-column:1/-1}
form.proteso label{display:block;font-size:11px;letter-spacing:0.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:8px}
form.proteso input,form.proteso select,form.proteso textarea{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-2);color:var(--ink);
  padding:10px 0 12px;font-size:16px;font-family:inherit;font-weight:400;
  transition:border-color .15s;
}
form.proteso input:focus,form.proteso select:focus,form.proteso textarea:focus{outline:0;border-bottom-color:var(--cyan)}
form.proteso textarea{resize:vertical;min-height:96px}
form.proteso .check{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:13px;line-height:1.5}
form.proteso .check input{width:16px;height:16px;flex:0 0 auto;margin-top:2px;border:1px solid var(--line-2);background:transparent}
.paper form.proteso input,.paper form.proteso select,.paper form.proteso textarea{color:#0a0a0a;border-bottom-color:rgba(0,0,0,0.15)}
.paper form.proteso label{color:#6a6a6a}
.paper form.proteso .check{color:#3a3a3a}

/* ---- cards ---- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media (max-width:900px){.card-grid{grid-template-columns:1fr}}
.card{background:var(--bg-2);border:1px solid var(--line);padding:32px;transition:border-color .2s, transform .2s;position:relative}
.card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.card .cno{font-weight:800;font-size:12px;letter-spacing:0.2em;color:var(--cyan);margin-bottom:20px}
.card h3{margin-bottom:12px}
.card p{font-size:14px}
.paper .card{background:#fff;border-color:rgba(0,0,0,0.08)}
.paper .card p{color:#3a3a3a}

/* ---- tabs ---- */
.tabs-head{display:flex;flex-wrap:wrap;gap:4px;border-bottom:1px solid var(--line);margin-bottom:40px}
.tabs-head button{background:transparent;border:0;color:var(--ink-3);padding:16px 22px;font-weight:800;font-size:13px;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs-head button.on{color:var(--ink);border-bottom-color:var(--cyan)}
.tab-panel{display:none}
.tab-panel.on{display:block}

/* ---- accordion / FAQ ---- */
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{list-style:none;cursor:pointer;padding:24px 0;display:flex;justify-content:space-between;align-items:center;gap:20px;font-weight:800;font-size:18px;letter-spacing:-0.01em}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item .plus{width:22px;height:22px;position:relative;flex:0 0 auto;color:var(--cyan)}
.faq-item .plus::before,.faq-item .plus::after{content:"";position:absolute;background:currentColor;transition:transform .2s}
.faq-item .plus::before{left:0;right:0;top:10px;height:2px}
.faq-item .plus::after{top:0;bottom:0;left:10px;width:2px}
.faq-item[open] .plus::after{transform:rotate(90deg)}
.faq-item .ans{padding:0 0 24px;max-width:72ch;color:var(--ink-2)}
.paper .faq-item{border-color:rgba(0,0,0,0.1)}

/* ---- utility ---- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.grid-5-7{display:grid;grid-template-columns:5fr 7fr;gap:64px;align-items:center}
.grid-6-6{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
@media (max-width:900px){.grid-2,.grid-5-7,.grid-6-6,.grid-3{grid-template-columns:1fr;gap:40px}}
.mt-xs{margin-top:8px}.mt-s{margin-top:16px}.mt{margin-top:24px}.mt-l{margin-top:40px}.mt-xl{margin-top:64px}
.center{text-align:center}
.caption{font-size:12px;letter-spacing:0.12em;text-transform:uppercase;color:var(--ink-3)}

/* ---- page intro block ---- */
.page-intro{padding:120px 0 72px;position:relative;overflow:hidden}
.page-intro .eyebrow{margin-bottom:20px;display:block}
.page-intro h1{max-width:18ch}

/* ---- technical drawing (SVG-style outline of exoskeleton placeholder) ---- */
.tech-draw{width:100%;height:auto;display:block}

/* marquee for press */
.marquee{overflow:hidden;position:relative;padding:28px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.marquee-track{display:flex;gap:72px;width:max-content;animation:marq 40s linear infinite}
.marquee-track:hover{animation-play-state:paused}
.marquee .item{flex:0 0 auto;font-weight:800;font-size:22px;letter-spacing:-0.01em;opacity:0.55;transition:opacity .2s,color .2s;font-style:italic;white-space:nowrap}
.marquee .item.sans{font-style:normal;letter-spacing:0.02em}
.marquee .item:hover{opacity:1;color:var(--cyan)}
@keyframes marq{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* diagonal divider (parallelogram-inspired) */
.diag{height:6px;background:var(--cyan);transform:skewX(-22deg);width:96px;margin-bottom:28px}

/* highlight phrase */
.hl{color:var(--cyan)}
.hl-box{background:var(--cyan-soft);color:var(--cyan);padding:2px 8px}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .7s ease, transform .7s ease}
.reveal.in{opacity:1;transform:none}

/* banner with rotating parallelograms decoration */
.para-bg{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.para-bg .p{position:absolute;background:var(--cyan);transform:skewX(-22deg);opacity:0.9}
.para-bg .p.ghost{background:transparent;border:2px solid var(--cyan)}
.para-bg .p.sm{width:40px;height:24px}
.para-bg .p.md{width:80px;height:48px}
.para-bg .p.lg{width:140px;height:84px}
.page-intro > .wrap,.section > .wrap{position:relative;z-index:2}

/* ---- real media inside wells ---- */
.well > img.fill,.well > video.fill{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.well > .corner{z-index:2;color:rgba(255,255,255,0.8);text-shadow:0 1px 6px rgba(0,0,0,0.6)}

/* ---- team ---- */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px 32px}
@media (max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.team-grid{grid-template-columns:1fr}}
.team-grid .portrait{aspect-ratio:1/1;overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.team-grid .portrait img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s}
.team-grid .member:hover .portrait img{filter:none}
.team-grid .name{font-weight:800;font-size:18px;margin-top:20px}

/* ---- partners ---- */
.partner-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
@media (max-width:760px){.partner-grid{grid-template-columns:1fr}}
.partner{background:#fff;border:1px solid rgba(0,0,0,0.08);padding:28px 32px;display:grid;grid-template-columns:140px 1fr;gap:28px;align-items:center}
@media (max-width:520px){.partner{grid-template-columns:1fr}}
.partner img{max-height:64px;width:auto;max-width:140px;object-fit:contain}
.partner h3{font-size:16px;letter-spacing:0;margin-bottom:6px;color:#0a0a0a}
.partner p{font-size:14px;margin:0;color:#3a3a3a}

/* press marquee items can be links */
a.item{color:var(--ink)}

/* ---- article (long-form) ---- */
.article{max-width:72ch}
.article p{max-width:none;font-size:17px;line-height:1.7}
.article h2{margin:56px 0 20px}
.article ul{color:var(--ink-2);padding-left:20px;line-height:1.8}
.article figure{margin:40px 0}
.article figure img{width:100%;border:1px solid var(--line);background:#fff}
.article figcaption{margin-top:12px}
.calc{border:1px solid var(--cyan);background:rgba(0,184,255,0.04);padding:32px;margin:32px 0}
.calc .eq{font-weight:800;font-size:clamp(22px,3vw,36px);letter-spacing:-0.02em;color:var(--ink);margin-top:12px}
.calc .eq em{font-style:normal;color:var(--cyan)}

/* ---- document downloads ---- */
.doc-list{display:grid;gap:16px}
.doc{display:flex;align-items:center;gap:24px;padding:28px 32px;border:1px solid var(--line);background:var(--bg-2);transition:border-color .2s}
.doc:hover{border-color:var(--cyan)}
.doc .tag{font-weight:800;font-size:12px;letter-spacing:0.2em;color:var(--cyan);border:1px solid var(--cyan);padding:6px 10px;flex:0 0 auto}
.doc .meta{font-size:13px;color:var(--ink-3);margin-top:4px}
.doc .btn{margin-left:auto;flex:0 0 auto}
@media (max-width:640px){.doc{flex-wrap:wrap}.doc .btn{margin-left:0}}

/* ---- bilingual inline copy (EN/IT), driven by data-lang on <html> ---- */
html:not([data-lang="it"]) .t-it, html[data-lang="it"] .t-en{display:none}
/* row of buttons: the spacing must apply to the buttons inside each language span */
.btn-row, .btn-row > span{display:flex;gap:16px;flex-wrap:wrap;align-items:center}

/* ---- team: initials chip when no photo is available ---- */
.team-grid .portrait .initials{display:flex;align-items:center;justify-content:center;width:100%;height:100%;font-weight:800;font-size:clamp(40px,6vw,72px);letter-spacing:0.04em;color:var(--cyan)}
.advisors{margin-top:64px;padding-top:32px;border-top:1px solid var(--line)}
.advisor-row{display:grid;grid-template-columns:repeat(4,1fr);gap:24px 32px;margin-top:20px}
.advisor-row .name{font-weight:800;font-size:16px}
@media (max-width:900px){.advisor-row{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.advisor-row{grid-template-columns:1fr}}

/* ---- timeline (about) ---- */
.timeline{list-style:none;margin:0;padding:0;border-left:2px solid var(--cyan-2);max-width:880px}
.tl-item{display:grid;grid-template-columns:120px 1fr;gap:24px;padding:0 0 36px 32px;position:relative}
.tl-item::before{content:"";position:absolute;left:-8px;top:8px;width:14px;height:9px;background:var(--cyan-2);transform:skewX(-22deg)}
.tl-year{font-weight:800;font-size:22px;letter-spacing:-0.01em;color:var(--cyan-2);line-height:1.3}
.tl-item h3{font-size:18px;font-weight:800;margin:0 0 6px;color:#0a0a0a}
.tl-item p{font-size:15px;margin:0;color:#3a3a3a;max-width:64ch}
.tl-item a{color:var(--cyan-2)}
.tl-item:last-child{padding-bottom:0}
@media (max-width:640px){.tl-item{grid-template-columns:1fr;gap:4px}}

/* ---- DRAFT marker: content not yet approved. Visible on staging; remove every .draft before go-live ---- */
.draft{outline:1px dashed #ffb000;outline-offset:2px;color:#ffb000}
.draft::after{content:"DRAFT";font-size:9px;font-weight:800;letter-spacing:0.15em;margin-left:6px;padding:1px 4px;background:#ffb000;color:#000;vertical-align:middle}
.draft-block{outline:1px dashed #ffb000;outline-offset:12px;position:relative}
.draft-block::before{content:"DRAFT · PLACEHOLDER";position:absolute;top:-30px;left:0;font-size:9px;font-weight:800;letter-spacing:0.15em;padding:1px 4px;background:#ffb000;color:#000;line-height:1.6}

/* ---- milestone path (about): two rows that wind like a road, vertical on phones ---- */
.path{position:relative;margin-top:8px}
.path-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;padding-top:34px}
.path-row::before{content:"";position:absolute;left:0;right:0;top:12px;height:2px;background:var(--cyan-2)}
.path-row.rev{direction:rtl;margin-top:56px}
.path-row.rev > *{direction:ltr}
/* the U-turn joining the end of row 1 to the start of row 2 */
.path-row:first-child::after{content:"";position:absolute;right:-28px;top:12px;width:56px;height:calc(100% + 58px);
  border:2px solid var(--cyan-2);border-left:0;border-radius:0 60px 60px 0}
.path-row.rev::before{left:0;right:0}
.ms{position:relative;padding:0 24px 0 0}
.ms::before{content:"";position:absolute;left:0;top:-30px;width:26px;height:16px;background:var(--cyan-2);transform:skewX(-22deg)}
.ms.now::before{background:var(--paper-ink)}
.ms .yr{font-weight:800;font-size:34px;letter-spacing:-0.03em;line-height:1;color:var(--cyan-2);margin-top:6px}
.ms.now .yr{color:var(--paper-ink)}
.ms h3{font-size:17px;font-weight:800;margin:10px 0 6px;color:#0a0a0a;letter-spacing:-0.01em}
.ms p{font-size:14px;line-height:1.5;margin:0;color:#3a3a3a;max-width:30ch}
@media (max-width:900px){
  .path-row,.path-row.rev{grid-template-columns:1fr;direction:ltr;padding:0 0 0 36px;margin-top:0;gap:28px}
  .path-row.rev{padding-top:28px}
  .path-row::before{left:8px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .path-row:first-child::after{display:none}
  .ms::before{left:-36px;top:6px}
}
details.full-history{margin-top:56px;border-top:1px solid rgba(0,0,0,0.12)}
details.full-history summary{list-style:none;cursor:pointer;padding:20px 0;display:flex;align-items:center;gap:12px;font-weight:800;font-size:15px;color:#0a0a0a}
details.full-history summary::-webkit-details-marker{display:none}
details.full-history .plus{width:14px;height:14px;position:relative;color:var(--cyan-2)}
details.full-history .plus::before,details.full-history .plus::after{content:"";position:absolute;background:currentColor;transition:transform .2s}
details.full-history .plus::before{left:0;right:0;top:6px;height:2px}
details.full-history .plus::after{top:0;bottom:0;left:6px;width:2px}
details.full-history[open] .plus::after{transform:rotate(90deg)}
details.full-history .timeline{margin-top:16px}

/* ---- phones / small tablets ---- */
@media (max-width:900px){
  /* grid columns may shrink below their content's natural width (prevents sideways overflow) */
  .grid-2 > *, .grid-3 > *, .grid-5-7 > *, .grid-6-6 > *{min-width:0}
  /* hero picture: keep its shape without the desktop minimum height (which forced it to 960px wide) */
  .hero-media{min-height:0 !important;aspect-ratio:4/3}
}
@media (max-width:760px){
  /* decorative parallelograms sit behind headlines on small screens: hide them there */
  .page-intro > .para-bg{display:none}
}

/* ---- advisors: small portrait (or initials until a photo is available) next to the name ---- */
.advisor-row > div{display:flex;gap:16px;align-items:center}
.advisor-row .pic{width:72px;height:72px;flex:0 0 auto;border:1px solid var(--line);background:var(--bg-2);overflow:hidden;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px;letter-spacing:0.04em;color:var(--ink-3)}
.advisor-row .pic img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:filter .3s}
.advisor-row > div:hover .pic img{filter:none}