/* Layout idea: left-aligned editorial columns on a night-flight ground; the one bold
   element is the live globe on the home page. Everything else stays quiet. */
:root{
  color-scheme: dark;
  --ink:#080b12;
  --ink-2:#0e131d;
  --pearl:#eef0f3;
  --mist:#939bab;
  --line:rgba(238,240,243,.13);
  --ice:#86e1ff;
  --rose:#ffb1c8;
  --champagne:#ffe3a6;
  --open:#7ff0c0;
  --alert:#ff9b9b;
  --foil:linear-gradient(100deg,var(--ice),var(--rose) 55%,var(--champagne));
  --display:"Bodoni Moda","Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  --body:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --gutter:clamp(20px,5vw,72px);
  --max:1240px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--pearl);font-family:var(--body);font-size:16px;line-height:1.85;overflow-x:hidden}
a{color:inherit}
img{max-width:100%}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px;border-radius:2px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist)}
h1,h2,h3{font-family:var(--display);font-weight:500;margin:0;text-wrap:balance;letter-spacing:.01em;word-break:auto-phrase}
h2{font-size:clamp(1.9rem,4.2vw,3.2rem);line-height:1.3}
p{margin:0}
.lede{color:var(--mist);max-width:36em}
.foil{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(8,11,18,.72);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.brand{display:flex;align-items:center;gap:14px;text-decoration:none}
.brand .mark{height:34px;width:auto;fill:var(--pearl)}
.brand .word{height:11px;width:auto;fill:var(--pearl)}
.nav nav{display:flex;gap:26px;margin-left:auto}
.nav nav a{text-decoration:none;font-size:.82rem;color:var(--mist);transition:color .2s}
.nav nav a:hover{color:var(--pearl)}
.lang{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden}
.lang button{font:inherit;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;background:none;border:0;color:var(--mist);padding:6px 12px;cursor:pointer}
.lang button[aria-pressed="true"]{background:var(--pearl);color:var(--ink)}
@media (max-width:860px){.nav nav{display:none}.lang{margin-left:auto}}

.btn{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font:inherit;font-size:.9rem;font-weight:500;padding:13px 24px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--pearl);cursor:pointer;transition:border-color .2s,background .2s}
.btn:hover{border-color:var(--pearl)}
.btn.solid{background:var(--pearl);color:var(--ink);border-color:var(--pearl)}
.btn.solid:hover{background:#fff}
.btn[disabled]{opacity:.5;cursor:wait}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}

/* hero (home) */
.hero{position:relative;overflow:hidden;padding:clamp(48px,8vw,104px) 0 clamp(40px,6vw,72px)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:center}
.hero h1{font-size:clamp(2.2rem,5.2vw,4.5rem);line-height:1.2;margin:22px 0 28px}
.hero h1 span{display:block;white-space:nowrap;animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(2){animation-delay:.12s}
.hero h1 span:nth-child(3){animation-delay:.24s}
@keyframes rise{from{transform:translateY(.5em);clip-path:inset(0 0 100% 0)}to{transform:none;clip-path:inset(-10% 0 -10% 0)}}
.hero .lede{max-width:34em}
.hero .lede + .lede{margin-top:14px}
.hero .close{color:var(--pearl);margin-top:18px;font-weight:500}
.globe{position:relative;margin-right:calc(var(--gutter) * -1.6)}
.globe canvas{display:block;width:100%;aspect-ratio:1;cursor:grab;touch-action:pan-y}
.globe canvas:active{cursor:grabbing}
.legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:4px;padding-right:calc(var(--gutter) * 1.6)}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:middle;border:1px solid var(--pearl)}
.legend i.base{background:var(--pearl)}
@media (max-width:860px){
  .hero .wrap{grid-template-columns:1fr}
  .hero h1 span{white-space:normal}
  .globe{margin:0 calc(var(--gutter) * -1) 0 12%}
  .legend{padding-right:var(--gutter)}
}

/* markets strip */
.markets{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-2)}
.markets ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr))}
.markets li{padding:18px 16px 16px;border-left:1px solid var(--line);display:grid;gap:2px}
.markets li:first-child{border-left:0;padding-left:0}
.markets .t{font-family:var(--mono);font-size:1.2rem;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.pill{justify-self:start;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;padding:2px 8px;border-radius:999px;border:1px solid var(--line);color:var(--mist)}
.pill.on{color:var(--ink);background:var(--open);border-color:var(--open)}
.pill.on::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ink);margin-right:6px;vertical-align:middle}
.markets .note{padding:0 0 14px;font-size:.7rem;color:var(--mist)}
@media (max-width:960px){
  .markets ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .markets li{border-left:0;border-top:1px solid var(--line);padding:14px 0}
  .markets li:nth-child(-n+3){border-top:0}
}
@media (max-width:520px){
  .markets ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .markets li:nth-child(3){border-top:1px solid var(--line)}
}

section{padding:clamp(72px,10vw,136px) 0}
.head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,64px)}
.alt{background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}

/* name / three arrows */
.name{position:relative;overflow:hidden}
.ghost{position:absolute;right:-12%;top:50%;height:120%;transform:translateY(-50%);opacity:.6;fill:none;stroke:var(--line);stroke-width:1.5;pointer-events:none}
.name h2{font-size:clamp(1.8rem,4vw,3.2rem)}
.name .latin{font-family:var(--display);font-style:italic;font-size:1.25rem;color:var(--pearl)}
.arrows{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);position:relative}
.arrows > div{padding:30px 28px 8px;border-left:1px solid var(--line);display:grid;gap:12px;align-content:start}
.arrows > div:first-child{border-left:0;padding-left:0}
.arrows .num{font-family:var(--display);font-style:italic;font-size:1.5rem;color:var(--mist)}
.arrows h3{font-size:1.7rem}
.arrows p{color:var(--mist);font-size:.94rem}
@media (max-width:760px){.arrows{grid-template-columns:1fr}.arrows > div{border-left:0;padding-left:0;border-top:1px solid var(--line)}.arrows > div:first-child{border-top:0}}

/* fields */
.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.fields article{background:var(--ink-2);padding:28px 26px 30px;display:grid;gap:10px;align-content:start;position:relative;overflow:hidden}
.fields .en{font-family:var(--display);font-size:1.9rem;line-height:1.1}
.fields article:nth-child(2) .en{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.fields h3{font-family:var(--body);font-size:.95rem;font-weight:500;color:var(--pearl);letter-spacing:.04em}
.fields p{color:var(--mist);font-size:.9rem}
@media (max-width:860px){.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.fields{grid-template-columns:1fr}}

/* project index */
.plist{display:grid;border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:150px minmax(0,1fr) minmax(0,1.1fr) 28px;gap:20px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;position:relative}
.prow::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--foil);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.prow:hover::after,.prow:focus-visible::after{transform:scaleX(1)}
.prow h3{font-family:var(--body);font-weight:500;font-size:1.15rem;letter-spacing:0;line-height:1.5}
.prow p{color:var(--mist);font-size:.9rem}
.prow .go{font-family:var(--mono);color:var(--mist);transition:transform .3s,color .3s}
.prow:hover .go{transform:translateX(4px);color:var(--pearl)}
@media (max-width:860px){
  .prow{grid-template-columns:minmax(0,1fr) 24px;gap:6px 16px}
  .prow .mono{grid-column:1/-1}
  .prow p{grid-column:1}
  .prow .go{grid-row:2;grid-column:2}
}
.more{margin-top:22px;color:var(--mist);font-size:.86rem}

/* founders */
.founders .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,6vw,96px);align-items:end}
.founders h2{margin:18px 0 26px}
.partners{border-top:1px solid var(--line)}
.partners div{display:flex;justify-content:space-between;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.86rem;letter-spacing:.06em}
.partners div span:last-child{color:var(--mist);font-size:.7rem;letter-spacing:.14em}
.partners .mono{display:block;padding:0 0 12px}
.partners p.note{padding-top:14px;color:var(--mist);font-size:.82rem}
@media (max-width:860px){.founders .wrap{grid-template-columns:1fr}}

/* contact form */
.contact .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(32px,6vw,96px)}
.contact h2{font-size:clamp(2rem,4.6vw,3.6rem);margin:18px 0 20px}
form{display:grid;gap:18px}
.frow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.field{display:grid;gap:6px}
.field label,.field .lbl{font-size:.82rem;color:var(--mist)}
.field label b{color:var(--rose);font-weight:500;margin-left:6px;font-size:.72rem}
input,select,textarea{font:inherit;color:var(--pearl);background:var(--ink);border:1px solid var(--line);border-radius:8px;padding:12px 14px;width:100%}
textarea{min-height:170px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ice)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mist) 50%),linear-gradient(135deg,var(--mist) 50%,transparent 50%);background-position:calc(100% - 20px) 50%,calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:40px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.consent{font-size:.8rem;color:var(--mist)}
.fstatus{font-size:.9rem;min-height:1.6em}
.fstatus.ok{color:var(--open)}
.fstatus.err{color:var(--alert)}
@media (max-width:860px){.contact .wrap{grid-template-columns:1fr}.frow{grid-template-columns:1fr}}

/* project pages */
.crumb{padding-top:28px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--mist);text-transform:uppercase}
.crumb a{text-decoration:none}
.crumb a:hover{color:var(--pearl)}
.phero{position:relative;overflow:hidden;padding:clamp(40px,6vw,80px) 0 clamp(56px,8vw,104px);border-bottom:1px solid var(--line)}
.phero h1{font-size:clamp(2.2rem,5.4vw,4.4rem);line-height:1.2;margin:18px 0 10px;max-width:14em}
.phero .by{font-family:var(--display);font-style:italic;color:var(--mist);font-size:1.05rem;margin-bottom:28px}
.phero .ghost{right:-8%;height:150%}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);margin-top:40px;max-width:820px}
.facts div{padding:16px 20px 0 0;display:grid;gap:4px}
.facts div + div{padding-left:20px;border-left:1px solid var(--line)}
.facts dd{margin:0;font-size:.95rem}
.facts dt{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;color:var(--mist);text-transform:uppercase}
@media (max-width:640px){.facts{grid-template-columns:1fr}.facts div + div{padding-left:0;border-left:0;border-top:1px solid var(--line);padding-top:14px}}
.prose{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:30px 0;border-top:1px solid var(--line)}
.prose:first-of-type{border-top:0}
.prose h2{font-family:var(--body);font-size:1.05rem;font-weight:500;letter-spacing:.02em;line-height:1.6}
.prose p{color:var(--mist);max-width:40em}
.prose p + p{margin-top:12px}
.prose ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--mist)}
.prose li{padding-left:18px;position:relative}
.prose li::before{content:"";position:absolute;left:0;top:.85em;width:9px;height:1px;background:var(--mist)}
@media (max-width:760px){.prose{grid-template-columns:1fr;gap:10px}}
.tracks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.tracks article{background:var(--ink-2);padding:30px 28px 34px;display:grid;gap:14px;align-content:start}
.tracks .tag{font-family:var(--display);font-size:2.4rem;line-height:1}
.tracks h3{font-size:1.3rem;line-height:1.45}
.tracks ul{margin:0;padding:0;list-style:none;color:var(--mist);font-size:.92rem;display:grid;gap:6px}
.tracks li{padding-left:16px;position:relative}
.tracks li::before{content:"";position:absolute;left:0;top:.85em;width:8px;height:1px;background:var(--mist)}
@media (max-width:860px){.tracks{grid-template-columns:1fr}}
.rail ol{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));position:relative}
.rail ol::before{content:"";position:absolute;left:0;right:0;top:5px;height:1px;background:var(--line)}
.rail ol::after{content:"";position:absolute;top:4px;left:0;width:18%;height:3px;border-radius:3px;background:var(--foil);animation:run 7s linear infinite}
@keyframes run{from{left:-18%}to{left:100%}}
.rail li{padding-top:26px;position:relative;font-size:.95rem;font-weight:500}
.rail li::before{content:"";position:absolute;top:0;left:0;width:11px;height:11px;border-radius:50%;background:var(--ink);border:1px solid var(--pearl);z-index:1}
.rail li small{display:block;font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;color:var(--mist);font-weight:400}
@media (max-width:760px){
  .rail ol{grid-template-columns:1fr;gap:18px;padding-left:2px}
  .rail ol::before{left:5px;right:auto;top:0;bottom:0;width:1px;height:auto}
  .rail ol::after{display:none}
  .rail li{padding:0 0 0 30px}
  .rail li::before{top:.45em}
}
.updating{margin-top:clamp(40px,6vw,64px);padding:18px 20px;border:1px solid var(--line);border-radius:10px;color:var(--mist);font-size:.88rem;display:flex;gap:14px;align-items:baseline}
.updating .mono{white-space:nowrap}
.pcta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:24px;align-items:end}
.pcta h2{font-size:clamp(1.7rem,3.6vw,2.6rem);max-width:16em}

footer{border-top:1px solid var(--line);padding:34px 0 46px;color:var(--mist);font-size:.76rem}
footer .wrap{display:grid;gap:14px}
footer .brand .mark{height:26px;fill:var(--mist)}
footer .brand .word{height:9px;fill:var(--mist)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1 span{animation:none}
  .rail ol::after{animation:none;display:none}
  .prow::after,.prow .go{transition:none}
}

/* ---------- China sourcing page ---------- */
.pname{font-family:var(--mono);font-size:.78rem;letter-spacing:.12em;color:var(--pearl);margin-top:18px}
.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pains li{background:var(--ink);padding:22px 22px 24px 50px;position:relative;color:var(--pearl);font-size:.95rem;line-height:1.7}
.pains li::before{content:"?";position:absolute;left:18px;top:20px;width:20px;height:20px;border-radius:50%;border:1px solid var(--mist);color:var(--mist);font-family:var(--mono);font-size:.7rem;display:grid;place-items:center;line-height:1}
.answer{margin-top:32px;font-family:var(--display);font-size:clamp(1.3rem,2.6vw,1.9rem);line-height:1.5;text-wrap:balance;word-break:auto-phrase}
.answer span{background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}

.route{display:grid;grid-template-columns:minmax(0,1fr) clamp(56px,10vw,140px) minmax(0,1fr);align-items:stretch;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:var(--ink)}
.route .zone{padding:22px 24px 26px}
.route .zone > .mono{display:block;margin-bottom:14px;color:var(--pearl)}
.route ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:r}
.route li{display:flex;justify-content:space-between;gap:12px;align-items:baseline;padding:12px 14px;border:1px solid var(--line);border-radius:8px;background:var(--ink-2)}
.route li b{font-weight:500;font-size:.95rem}
.route li i{font-style:normal;font-family:var(--mono);font-size:.68rem;color:var(--mist);letter-spacing:.08em;white-space:nowrap}
.route .sea{position:relative;border-left:1px solid var(--line);border-right:1px solid var(--line);background:repeating-linear-gradient(180deg,transparent 0 10px,rgba(134,225,255,.05) 10px 11px)}
.route .sea::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--foil);opacity:.7}
.route .sea span{position:absolute;top:50%;left:0;width:9px;height:9px;margin-top:-4px;border-radius:50%;background:#fff;box-shadow:0 0 12px var(--ice);animation:sail 3.6s cubic-bezier(.45,0,.55,1) infinite}
@keyframes sail{from{left:-4px}to{left:calc(100% - 5px)}}
.route-note{margin-top:12px;font-size:.78rem;color:var(--mist)}
@media (max-width:760px){
  .route{grid-template-columns:1fr}
  .route .sea{height:56px;border:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(134,225,255,.05) 10px 11px)}
  .route .sea::before{left:50%;right:auto;top:0;bottom:0;width:1px;height:auto}
  .route .sea span{left:50%;margin-left:-4px;top:0;margin-top:0;animation-name:sailv}
  @keyframes sailv{from{top:-4px}to{top:calc(100% - 5px)}}
}

.pillars{display:grid;border-top:1px solid var(--line)}
.pillars article{display:grid;grid-template-columns:clamp(70px,10vw,140px) minmax(0,1fr);gap:20px;padding:30px 0 32px;border-bottom:1px solid var(--line)}
.pillars .no{font-family:var(--display);font-size:clamp(2.4rem,5vw,3.8rem);line-height:1;background:var(--foil);-webkit-background-clip:text;background-clip:text;color:transparent}
.pillars h3{font-size:clamp(1.3rem,2.4vw,1.75rem);margin-bottom:10px}
.pillars p{color:var(--mist);max-width:42em}
.chips{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font-size:.78rem;padding:5px 12px;border:1px solid var(--line);border-radius:999px;color:var(--pearl)}

.reasons{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--line)}
.reasons > div{padding:24px 22px 6px;border-left:1px solid var(--line);display:grid;gap:10px;align-content:start}
.reasons > div:first-child{border-left:0;padding-left:0}
.reasons h3{font-size:1.3rem}
.reasons p{color:var(--mist);font-size:.9rem}
@media (max-width:960px){.reasons{grid-template-columns:repeat(2,minmax(0,1fr))}.reasons > div:nth-child(3){border-left:0;padding-left:0}.reasons > div{border-top:1px solid var(--line)}.reasons > div:nth-child(-n+2){border-top:0}}
@media (max-width:520px){.reasons{grid-template-columns:1fr}.reasons > div{border-left:0;padding-left:0}.reasons > div:nth-child(2){border-top:1px solid var(--line)}}
.who{margin-top:clamp(40px,6vw,64px)}

.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-weight:500}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:16px;font-family:var(--mono);font-size:1.2rem;color:var(--mist);transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--mist);padding:0 0 22px;max-width:44em}
@media (max-width:760px){.pillars article{grid-template-columns:1fr;gap:6px}}
@media (prefers-reduced-motion:reduce){.route .sea span{animation:none;left:calc(50% - 4px)}}

/* ---------- navigation ---------- */
.skip{position:absolute;left:12px;top:-60px;z-index:50;background:var(--pearl);color:var(--ink);padding:8px 14px;border-radius:6px;text-decoration:none;font-size:.85rem}
.skip:focus{top:12px}
.nav .wrap{gap:22px}
.gnav{display:flex;align-items:center;gap:4px;margin-left:auto}
.gnav > a,.dd-top{position:relative;text-decoration:none;font-size:.84rem;color:var(--mist);padding:8px 12px;border-radius:999px;transition:color .2s,background .2s}
.gnav > a:hover,.dd-top:hover,.dd:focus-within .dd-top{color:var(--pearl);background:rgba(238,240,243,.06)}
.gnav [aria-current]{color:var(--pearl)}
.gnav [aria-current]::after{content:"";position:absolute;left:12px;right:12px;bottom:2px;height:1px;background:var(--foil)}
.dd{position:relative;display:flex;align-items:center}
.dd-top{padding-right:4px}
.dd-btn{background:none;border:0;color:var(--mist);padding:8px 8px 8px 2px;cursor:pointer;display:grid;place-items:center}
.dd-btn svg{width:10px;height:6px;transition:transform .25s}
.dd.open .dd-btn svg,.dd:hover .dd-btn svg{transform:rotate(180deg)}
.dd-panel{position:absolute;top:calc(100% + 10px);left:50%;width:min(560px,90vw);transform:translate(-50%,6px);opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility 0s .2s;background:rgba(14,19,29,.97);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 24px 60px rgba(0,0,0,.45)}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd:hover .dd-panel,.dd.open .dd-panel{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .2s,transform .2s}
.dd-panel > .mono{padding:0 10px 8px}
.dd-panel ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd-panel li a{display:grid;gap:0;padding:10px 12px;border-radius:9px;text-decoration:none;font-size:.88rem;line-height:1.5;transition:background .2s}
.dd-panel li a .mono{font-size:.6rem}
.dd-panel li a:hover,.dd-panel li a[aria-current]{background:rgba(238,240,243,.07)}
.dd-all{display:block;margin-top:10px;padding:10px 12px 2px;border-top:1px solid var(--line);font-size:.8rem;color:var(--mist);text-decoration:none}
.dd-all:hover{color:var(--pearl)}
.btn.sm{padding:8px 16px;font-size:.8rem}
.burger{display:none;width:42px;height:42px;border:1px solid var(--line);border-radius:999px;background:none;cursor:pointer;position:relative;flex:none}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--pearl);transition:transform .3s,top .3s}
.burger span:first-child{top:16px}
.burger span:last-child{top:24px}
.burger[aria-expanded="true"] span:first-child{top:20px;transform:rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{top:20px;transform:rotate(-45deg)}
.mmenu{position:fixed;inset:64px 0 0;z-index:19;background:var(--ink);overflow-y:auto;padding:28px 0 48px;animation:mmin .3s cubic-bezier(.2,.7,.2,1)}
.mmenu[hidden]{display:none}
@keyframes mmin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.mm-main{list-style:none;margin:0 0 30px;padding:0;border-top:1px solid var(--line)}
.mm-main a{display:flex;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line);text-decoration:none;font-family:var(--display);font-size:1.6rem}
.mm-proj{list-style:none;margin:10px 0 30px;padding:0;display:grid;gap:2px}
.mm-proj a{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-size:.95rem}
.mm-proj .mono{font-size:.6rem;text-align:right}
body.menu-open{overflow:hidden}
@media (max-width:980px){
  .gnav,.nav-cta{display:none}
  .lang{margin-left:auto}
  .burger{display:block}
}
@media (min-width:981px){.mmenu{display:none !important}}

/* ---------- project cards ---------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.pcard{position:relative;display:grid;grid-template-rows:auto auto 1fr auto;gap:10px;padding:22px 22px 20px;border:1px solid var(--line);border-radius:14px;background:var(--ink-2);text-decoration:none;overflow:hidden;transition:border-color .3s,transform .3s,background .3s}
.pcard::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--foil);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.pcard:hover,.pcard:focus-visible{border-color:rgba(238,240,243,.3);transform:translateY(-3px);background:#121826}
.pcard:hover::before,.pcard:focus-visible::before{transform:scaleX(1)}
.pcard h3{font-family:var(--body);font-weight:500;font-size:1.1rem;letter-spacing:0;line-height:1.5}
.pcard p{color:var(--mist);font-size:.86rem;line-height:1.75}
.more-link{display:flex;justify-content:space-between;align-items:center;margin-top:8px;padding-top:14px;border-top:1px solid var(--line);font-size:.82rem;font-weight:500}
.more-link i{font-style:normal;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .3s,color .3s,border-color .3s}
.pcard:hover .more-link i{background:var(--pearl);color:var(--ink);border-color:var(--pearl)}
.ghostcard{background:transparent;border-style:dashed}
.ghostcard h3{font-family:var(--display);font-size:1.3rem}

/* related links inside field tiles */
.rel{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px}
.rel a{font-size:.8rem;color:var(--pearl);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .2s}
.rel a:hover{border-color:var(--pearl)}

/* pager */
.pager{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:stretch}
.pager a{display:grid;gap:4px;padding:18px 20px;border:1px solid var(--line);border-radius:12px;text-decoration:none;transition:border-color .2s,background .2s}
.pager a:hover{border-color:rgba(238,240,243,.3);background:var(--ink-2)}
.pager .nx{text-align:right}
.pager-all{place-items:center;font-size:.85rem}
@media (max-width:640px){.pager{grid-template-columns:1fr 1fr}.pager-all{grid-column:1/-1;grid-row:2}}

/* footer sitemap */
.fgrid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:28px;padding-bottom:28px;border-bottom:1px solid var(--line);margin-bottom:8px}
.fgrid ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px}
.fgrid a{text-decoration:none;color:var(--mist)}
.fgrid a:hover{color:var(--pearl)}
.fbrand p{margin-top:12px;font-family:var(--display);font-size:.95rem;color:var(--pearl)}
.totop{display:inline-block;margin-top:18px;font-size:.78rem}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}.fbrand{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){.pcard,.pcard::before,.dd-panel,.mmenu{transition:none;animation:none}}