/* 13 Consultancy — cinematic dark theme (ref: editorial agency layout) */
:root{
  --bg:#06090D;
  --bg-2:#0B1016;
  --text:#ECEBE6;
  --soft:#B7BBBE;
  --mute:#7D848A;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.18);
  --gold:#CFAE6A;
  --serif:"Noto Serif TC","Songti TC",serif;
  --italic:"Instrument Serif","Times New Roman",serif;
  --sans:"Noto Sans TC","PingFang HK",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --gutter:clamp(22px,5.2vw,75px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:16px;line-height:1.8;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.wrap{max-width:1440px;margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-999px;top:0;background:var(--text);color:var(--bg);padding:8px 16px;z-index:100}
.skip:focus{left:8px}
mark.todo{background:#FFE58A;color:#4A3800;padding:0 .3em;border-radius:2px;font-weight:500}

/* type */
.label{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.d1,.d2,.d3{font-family:var(--serif);font-weight:500;line-height:1.28;letter-spacing:.01em;color:var(--text)}
.d1{font-size:clamp(44px,6.4vw,92px);line-height:1.18}
.d2{font-size:clamp(32px,3.9vw,56px)}
.d3{font-size:clamp(24px,2.4vw,34px)}
.en{display:block;font-family:var(--italic);font-style:italic;font-weight:400;color:var(--soft);letter-spacing:0;line-height:1.15}
.d1 .en{font-size:.62em;margin-top:.28em}
.d2 .en{font-size:.7em;margin-top:.3em}
.lede{font-size:clamp(16px,1.25vw,18.5px);color:var(--soft);max-width:34em}
.body-lg{font-size:clamp(17px,1.35vw,20px);line-height:1.85;color:var(--text)}
.body-sm{color:var(--mute);font-size:15px;line-height:1.9}

/* buttons */
.btns{display:flex;flex-wrap:wrap;gap:14px}
.pill{display:inline-flex;align-items:center;gap:12px;height:46px;padding:0 24px;border-radius:999px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--text);transition:background .25s,color .25s,border-color .25s}
.pill:hover{border-color:var(--text)}
.pill.solid{background:var(--text);color:var(--bg);border-color:var(--text)}
.pill.solid:hover{background:#fff}
.pill .zh{font-family:var(--sans);letter-spacing:.08em;font-size:14px;text-transform:none}
.textlink{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid var(--line-2);padding-bottom:4px}
.textlink:hover{border-color:var(--text)}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;background:linear-gradient(rgba(6,9,13,.85),rgba(6,9,13,.55));backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.hdr .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.logo{display:flex;align-items:center;gap:12px}
.logo .mk{font-family:var(--italic);font-size:34px;line-height:1;letter-spacing:-.02em}
.logo .wm{display:flex;flex-direction:column;line-height:1.1;font-size:13px;font-weight:700;letter-spacing:.06em}
.logo .wm small{font-family:var(--mono);font-weight:400;font-size:9.5px;letter-spacing:.2em;color:var(--mute);text-transform:uppercase;margin-top:3px}
.nav{display:flex;align-items:center;gap:34px}
.nav>ul{display:flex;gap:30px;list-style:none}
.nav>ul>li{position:relative}
.nav>ul>li>a{display:block;padding:26px 0;font-size:14px;letter-spacing:.08em;color:var(--soft)}
.nav>ul>li>a:hover,.nav>ul>li>a[aria-current]{color:var(--text)}
.nav>ul>li>a .plus{font-family:var(--mono);font-size:11px;margin-left:6px;color:var(--mute)}
.drop{position:absolute;top:100%;left:-24px;min-width:260px;background:rgba(9,13,18,.97);border:1px solid var(--line);padding:14px 0;list-style:none;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav li:hover>.drop,.nav li:focus-within>.drop{opacity:1;visibility:visible;transform:none}
.drop a{display:flex;gap:16px;padding:9px 24px;font-size:14.5px;color:var(--soft)}
.drop a:hover{color:var(--text);background:rgba(255,255,255,.03)}
.drop .n{font-family:var(--mono);font-size:11px;color:var(--mute);padding-top:3px}
.menu-btn{display:none;background:none;border:1px solid var(--line-2);color:var(--text);border-radius:999px;padding:8px 18px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;cursor:pointer}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:140px 0 120px;overflow:hidden}
.hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 60%;opacity:.85}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg) 0%,rgba(6,9,13,.92) 30%,rgba(6,9,13,.35) 65%,rgba(6,9,13,.25) 100%),linear-gradient(0deg,var(--bg) 0%,transparent 35%,transparent 80%,rgba(6,9,13,.7) 100%)}
.hero .wrap{position:relative;width:100%}
.hero .label{margin-bottom:28px}
.hero .lede{margin:34px 0 40px}
.scroll{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);font-family:var(--mono);font-size:10.5px;letter-spacing:.3em;color:var(--mute)}
.scroll::after{content:"";display:block;width:1px;height:34px;background:linear-gradient(var(--mute),transparent);margin:10px auto 0}

/* statement */
.statement{position:relative;min-height:88vh;display:grid;place-items:center;text-align:center;padding:120px 0;overflow:hidden;border-bottom:1px solid var(--line)}
.statement .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55;-webkit-mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 55% at 50% 50%,#000 30%,transparent 75%)}
.statement .wrap{position:relative}
.statement .label{margin-bottom:26px}

/* editorial row: label column + content */
.row{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:40px;padding:130px 0}
.row+.row{padding-top:0}
.row>.label{padding-top:14px}
.row .content{max-width:880px}
.row .content>*+*{margin-top:30px}
.divider{border-top:1px solid var(--line)}

/* numbered list */
.list{list-style:none;border-top:1px solid var(--line);margin-top:56px}
.list a{display:grid;grid-template-columns:60px 1fr 40px;align-items:center;gap:10px;padding:28px 0;border-bottom:1px solid var(--line);transition:padding .3s}
.list a:hover{padding-left:10px}
.list .n{font-family:var(--mono);font-size:11px;color:var(--mute)}
.list h3{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2vw,28px);line-height:1.3}
.list h3 .en{display:inline;font-size:.78em;margin-left:14px;color:var(--mute)}
.list p{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--mute);margin-top:8px}
.list .arr{justify-self:end;color:var(--soft);font-size:18px}
.list.compact a{padding:17px 0}
.list.compact h3{font-family:var(--sans);font-size:16px;font-weight:400}

/* momentum */
.momentum{position:relative;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.momentum .side{position:absolute;right:0;top:0;bottom:0;width:38%;object-fit:cover;opacity:.9;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%);mask-image:linear-gradient(90deg,transparent,#000 45%)}
.momentum .row{position:relative}
.stats{border-left:1px solid var(--line-2);margin-top:56px;max-width:560px}
.stat{display:grid;grid-template-columns:150px 1fr;align-items:center;gap:20px;padding:26px 0 26px 26px;border-bottom:1px solid var(--line)}
.stat:last-child{border-bottom:0}
.stat b{font-family:var(--italic);font-weight:400;font-size:clamp(46px,4.4vw,64px);line-height:1;letter-spacing:-.01em}
.stat b small{font-family:var(--serif);font-size:.38em;margin-left:4px;color:var(--soft)}
.stat span{font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;color:var(--mute);line-height:1.8}

/* industries split */
.split{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center;padding:130px 0}
.orb{width:min(100%,520px);aspect-ratio:1;object-fit:cover;border-radius:50%;justify-self:center}

/* founder */
.founder-card{display:grid;grid-template-columns:200px 1fr;gap:44px;align-items:start}
.portrait{aspect-ratio:4/5;background:var(--bg-2);border:1px solid var(--line);display:grid;place-items:center;font-family:var(--italic);font-size:84px;color:var(--soft);position:relative}
.portrait small{position:absolute;bottom:12px;left:0;right:0;text-align:center;font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--mute)}

/* CTA */
.cta{position:relative;text-align:center;padding:170px 0 210px;overflow:hidden;border-top:1px solid var(--line)}
.cta .bg{position:absolute;left:0;right:0;bottom:0;width:100%;height:85%;object-fit:cover;object-position:center 70%;opacity:.75;-webkit-mask-image:linear-gradient(transparent,#000 55%);mask-image:linear-gradient(transparent,#000 55%)}
.cta .wrap{position:relative}
.cta .label{margin-bottom:26px}
.cta .lede{margin:28px auto 40px}
.cta .btns{justify-content:center}

/* inner page hero */
.page-hero{position:relative;padding:210px 0 110px;overflow:hidden;border-bottom:1px solid var(--line)}
.page-hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.32;-webkit-mask-image:linear-gradient(90deg,transparent 20%,#000 80%);mask-image:linear-gradient(90deg,transparent 20%,#000 80%)}
.page-hero .wrap{position:relative}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.16em;color:var(--mute);margin-bottom:30px;text-transform:uppercase}
.crumbs a:hover{color:var(--text)}
.page-hero .lede{margin-top:30px}

/* detail blocks (services / industries) */
.detail{display:grid;grid-template-columns:minmax(150px,1fr) 3fr;gap:40px;padding:110px 0;border-bottom:1px solid var(--line)}
.detail .num{font-family:var(--mono);font-size:11.5px;letter-spacing:.18em;color:var(--mute);padding-top:16px}
.detail .inner{display:grid;grid-template-columns:1.1fr 1fr;gap:56px;align-items:start}
.detail .inner>div>*+*{margin-top:24px}
.detail figure{border:1px solid var(--line);overflow:hidden}
.detail figure img{width:100%;aspect-ratio:3/2;object-fit:cover;filter:saturate(.9)}
.cols2{display:grid;grid-template-columns:1fr 1fr;gap:32px}
.cols2 h4{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;color:var(--mute);text-transform:uppercase;padding-bottom:12px;border-bottom:1px solid var(--line)}
.cols2 ul{list-style:none}
.cols2 li{padding:11px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--soft)}

/* process (true sequence) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:56px}
.steps li{list-style:none;padding:30px 26px 0 0}
.steps li+li{padding-left:26px;border-left:1px solid var(--line)}
.steps .n{font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.14em}
.steps h3{font-family:var(--serif);font-weight:500;font-size:22px;margin:14px 0 10px}
.steps p{font-size:14.5px;color:var(--mute);line-height:1.85}

/* values grid */
.vgrid{display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--line);margin-top:56px}
.vgrid>div{padding:34px 34px 38px 0;border-bottom:1px solid var(--line)}
.vgrid>div:nth-child(even){padding-left:34px;padding-right:0;border-left:1px solid var(--line)}
.vgrid h3{font-family:var(--serif);font-weight:500;font-size:24px;margin-bottom:10px}
.vgrid h3 .en{display:inline;font-size:.75em;margin-left:12px;color:var(--mute)}
.vgrid p{color:var(--mute);font-size:15px}

/* timeline */
.tl{list-style:none;border-top:1px solid var(--line);margin-top:56px}
.tl li{display:grid;grid-template-columns:200px 1fr;gap:30px;padding:30px 0;border-bottom:1px solid var(--line)}
.tl .yr{font-family:var(--italic);font-size:36px;line-height:1.1}
.tl h3{font-family:var(--serif);font-weight:500;font-size:21px;margin-bottom:6px}
.tl p{color:var(--mute);font-size:15px}
.tl li.now .yr{color:var(--gold)}

/* tables */
.reg{width:100%;border-collapse:collapse;border-top:1px solid var(--line);margin-top:48px}
.reg th,.reg td{text-align:left;padding:18px 0;border-bottom:1px solid var(--line);vertical-align:top;font-size:15.5px}
.reg th{width:32%;font-family:var(--mono);font-weight:400;font-size:11.5px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase;padding-top:21px}
.reg a{border-bottom:1px solid var(--line-2)}

/* legal */
.legal{max-width:780px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:22px;margin:52px 0 14px}
.legal p,.legal li{color:var(--soft);margin-top:10px}
.legal ul{margin-left:1.3em}
.legal a{border-bottom:1px solid var(--line-2)}

/* footer */
.ftr{border-top:1px solid var(--line);background:var(--bg)}
.ftr .brand{padding:70px 0;border-bottom:1px solid var(--line)}
.ftr .brand .logo .mk{font-size:58px}
.ftr .brand .logo .wm{font-size:20px}
.ftr .brand .logo .wm small{font-size:11px}
.ftr-top{padding:64px 0 10px;max-width:440px}
.ftr-top .label{margin-bottom:16px}
.ftr-top a.mail{font-family:var(--mono);font-size:13px;border-bottom:1px solid var(--line-2);padding-bottom:3px}
.ftr-top p{color:var(--mute);font-size:14.5px;margin-top:18px}
.ftr-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;padding:56px 0}
.ftr-cols h2{font-family:var(--mono);font-weight:400;font-size:11px;letter-spacing:.18em;color:var(--mute);text-transform:uppercase;padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:16px}
.ftr-cols ul{list-style:none}
.ftr-cols li{margin:9px 0;font-size:14.5px;color:var(--soft)}
.ftr-cols a:hover{color:var(--text)}
.ftr-cols address{font-style:normal;font-size:14.5px;color:var(--soft);line-height:2}
.ftr-legal{border-top:1px solid var(--line);padding:30px 0}
.ftr-legal p{color:var(--mute);font-size:13.5px;max-width:720px}
.ftr-bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;border-top:1px solid var(--line);padding:26px 0 34px;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;color:var(--mute);text-transform:uppercase}
.ftr-bar a:hover{color:var(--text)}

/* entrance: one orchestrated hero reveal */
@media (prefers-reduced-motion:no-preference){
  .hero .reveal{opacity:0;transform:translateY(18px);animation:rise 1s cubic-bezier(.2,.7,.2,1) forwards}
  .hero .reveal:nth-child(2){animation-delay:.12s}
  .hero .reveal:nth-child(3){animation-delay:.28s}
  .hero .reveal:nth-child(4){animation-delay:.42s}
  .hero .bg{animation:drift 22s ease-out forwards}
  @keyframes rise{to{opacity:1;transform:none}}
  @keyframes drift{from{transform:scale(1.08)}to{transform:scale(1)}}
}

@media (max-width:1080px){
  .menu-btn{display:block}
  .nav{position:fixed;inset:74px 0 auto;background:rgba(6,9,13,.98);border-bottom:1px solid var(--line);display:none;flex-direction:column;align-items:stretch;gap:0;padding:10px var(--gutter) 28px;max-height:calc(100vh - 74px);overflow:auto}
  .nav.open{display:flex}
  .nav>ul{flex-direction:column;gap:0}
  .nav>ul>li>a{padding:14px 0;border-bottom:1px solid var(--line)}
  .drop{position:static;opacity:1;visibility:visible;transform:none;border:0;background:none;padding:4px 0 10px;min-width:0}
  .drop a{padding:7px 0 7px 14px}
  .nav .pill{margin-top:20px;justify-content:center}
  .row,.detail{grid-template-columns:1fr;gap:22px;padding:90px 0}
  .row>.label{padding-top:0}
  .detail .inner{grid-template-columns:1fr;gap:36px}
  .split{grid-template-columns:1fr;padding:90px 0}
  .orb{width:min(70%,380px)}
  .momentum .side{width:60%;opacity:.35}
  .steps{grid-template-columns:1fr 1fr;row-gap:36px}
  .steps li:nth-child(3){padding-left:0;border-left:0}
  .ftr-cols{grid-template-columns:1fr 1fr}
  .founder-card{grid-template-columns:150px 1fr;gap:28px}
}
@media (max-width:640px){
  .hero{padding:120px 0 100px}
  .hero::before{background:linear-gradient(0deg,var(--bg) 5%,rgba(6,9,13,.75) 60%,rgba(6,9,13,.6))}
  .list a{grid-template-columns:40px 1fr 24px}
  .list h3 .en{display:block;margin:4px 0 0}
  .stat{grid-template-columns:110px 1fr;padding-left:18px}
  .steps,.vgrid,.cols2,.ftr-cols{grid-template-columns:1fr}
  .steps li,.steps li+li{padding-left:0;border-left:0}
  .vgrid>div,.vgrid>div:nth-child(even){padding:28px 0;border-left:0}
  .tl li{grid-template-columns:1fr;gap:6px}
  .founder-card{grid-template-columns:1fr}
  .founder-card .portrait{max-width:200px}
  .reg th{width:40%}
}

/* fixes */
.ftr .wrap.brand{padding:70px var(--gutter)}
.orb{border-radius:0;mix-blend-mode:lighten;-webkit-mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 71%);mask-image:radial-gradient(circle at 50% 50%,#000 55%,transparent 71%)}
.hero .bg{opacity:.72}
@media (max-width:640px){
  .hero::before{background:linear-gradient(0deg,var(--bg) 0%,rgba(6,9,13,.88) 45%,rgba(6,9,13,.72) 100%)}
  .hero .bg{object-position:62% 50%}
}

/* ===== Hero v2: black sky, skyline in the corner, sailing junk ===== */
:root{--bg:#040506;--bg-2:#0A0C0F}
.hero{background:#000}
.hero::before{display:none}
.hero .scene{position:absolute;right:0;bottom:0;width:min(80vw,1560px);aspect-ratio:3/2;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 32%),linear-gradient(0deg,transparent 0%,#000 14%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent 0%,#000 32%),linear-gradient(0deg,transparent 0%,#000 14%);mask-composite:intersect}
.hero .scene .city{width:100%;height:100%;object-fit:cover}
/* --water / --boat-w tuned to the generated image */
.hero .sail{position:absolute;top:var(--water,68%);left:88%;width:var(--boat-w,10%);transform:translateY(-78%)}
.hero .boat{width:100%;mix-blend-mode:screen}
@media (prefers-reduced-motion:no-preference){
  .hero .sail{animation:sail 90s linear infinite}
  .hero .boat{animation:bob 5s ease-in-out infinite}
  @keyframes sail{0%{left:92%;opacity:0}6%{opacity:1}90%{opacity:1}100%{left:30%;opacity:0}}
  @keyframes bob{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-4%) rotate(.6deg)}}
  .hero .scene .city{animation:drift 22s ease-out forwards}
}
@media (max-width:640px){
  .hero .scene{width:170vw;right:-35vw;opacity:.75}
  .hero::before{display:block;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.55) 40%,transparent 70%)}
}
.hero{--water:71%;--boat-w:9%}
.hero .sail{transform:translateY(-72%)}
.hero .sail{mix-blend-mode:screen}
.hero .boat{mix-blend-mode:normal}
.hero{--boat-w:7.5%}
.hero .scene{width:min(68vw,1500px)}
.hero .lede{max-width:30em}
@keyframes sail{0%{left:94%;opacity:0}6%{opacity:1}88%{opacity:1}100%{left:24%;opacity:0}}
@media (max-width:640px){
  .hero .scene{width:190vw;right:-55vw;bottom:-4vh;opacity:.6}
  .hero{--boat-w:9%}
}
.hero .sail{mix-blend-mode:normal;filter:drop-shadow(0 0 18px rgba(220,60,30,.25))}
.hero{--water:86%;--boat-w:10%}
@media (max-width:640px){.hero{--boat-w:12%}}
@media (prefers-reduced-motion:no-preference){.hero .sail{animation-duration:65s}}
.page-hero .bg{opacity:.55;object-position:right 60%}

/* ===== Texture: film grain, stars, shooting stars ===== */
body::after{content:"";position:fixed;inset:-50%;z-index:60;pointer-events:none;opacity:.09;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1.1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");}
.stars{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.stars i{position:absolute;left:0;top:0;width:1px;height:1px;border-radius:50%;background:transparent}
.stars .s1{box-shadow:530px 595px rgba(255,255,255,.4),1335px 472px rgba(255,255,255,.4),1780px 461px rgba(255,255,255,.4),266px 145px rgba(255,255,255,.4),1525px 603px rgba(255,255,255,.25),883px 258px rgba(255,255,255,.25),564px 300px rgba(255,255,255,.25),1784px 537px rgba(255,255,255,.7),1525px 894px rgba(255,255,255,.4),1625px 525px rgba(255,255,255,.55),1740px 479px rgba(255,255,255,.7),1839px 879px rgba(255,255,255,.55),1819px 880px rgba(255,255,255,.55),1341px 240px rgba(255,255,255,.55),1678px 538px rgba(255,255,255,.7),1135px 276px rgba(255,255,255,.7),1386px 908px rgba(255,255,255,.4),600px 414px rgba(255,255,255,.4),1070px 729px rgba(255,255,255,.55),760px 940px rgba(255,255,255,.55),1240px 573px rgba(255,255,255,.7),1821px 267px rgba(255,255,255,.7),1126px 482px rgba(255,255,255,.4),1815px 398px rgba(255,255,255,.55),268px 150px rgba(255,255,255,.7),1333px 949px rgba(255,255,255,.7),4px 868px rgba(255,255,255,.25),460px 290px rgba(255,255,255,.7),1650px 911px rgba(255,255,255,.55),327px 846px rgba(255,255,255,.55),1814px 718px rgba(255,255,255,.4),1444px 767px rgba(255,255,255,.4),1846px 486px rgba(255,255,255,.7),433px 87px rgba(255,255,255,.25),735px 699px rgba(255,255,255,.4),604px 395px rgba(255,255,255,.4),1612px 229px rgba(255,255,255,.4),342px 141px rgba(255,255,255,.7),1317px 79px rgba(255,255,255,.7),1690px 702px rgba(255,255,255,.25),1078px 6px rgba(255,255,255,.4),636px 248px rgba(255,255,255,.7),617px 550px rgba(255,255,255,.25),1921px 962px rgba(255,255,255,.55),1744px 73px rgba(255,255,255,.25),654px 685px rgba(255,255,255,.4),1016px 1091px rgba(255,255,255,.7),456px 424px rgba(255,255,255,.55),1635px 65px rgba(255,255,255,.7),1026px 321px rgba(255,255,255,.4),529px 871px rgba(255,255,255,.4),529px 870px rgba(255,255,255,.4),728px 500px rgba(255,255,255,.55),876px 417px rgba(255,255,255,.55),871px 78px rgba(255,255,255,.55),814px 943px rgba(255,255,255,.25),140px 93px rgba(255,255,255,.25),1338px 627px rgba(255,255,255,.4),920px 984px rgba(255,255,255,.7),681px 125px rgba(255,255,255,.55),1081px 890px rgba(255,255,255,.4),303px 107px rgba(255,255,255,.25),754px 320px rgba(255,255,255,.4),630px 621px rgba(255,255,255,.7),595px 68px rgba(255,255,255,.55),262px 204px rgba(255,255,255,.55),1005px 904px rgba(255,255,255,.7),89px 718px rgba(255,255,255,.55),264px 100px rgba(255,255,255,.55),341px 257px rgba(255,255,255,.25)}
.stars .s2{width:2px;height:2px;box-shadow:1832px 508px rgba(255,255,255,.4),183px 980px rgba(255,255,255,.55),144px 706px rgba(255,255,255,.55),1642px 437px rgba(255,255,255,.25),1471px 487px rgba(255,255,255,.4),1064px 902px rgba(255,255,255,.4),1174px 805px rgba(255,255,255,.25),1719px 106px rgba(255,255,255,.25),1256px 280px rgba(255,255,255,.55),1092px 812px rgba(255,255,255,.55),305px 610px rgba(255,255,255,.55),177px 763px rgba(255,255,255,.25),1908px 62px rgba(255,255,255,.4),1488px 31px rgba(255,255,255,.25),1073px 555px rgba(255,255,255,.25),683px 869px rgba(255,255,255,.4),1274px 594px rgba(255,255,255,.25),224px 193px rgba(255,255,255,.55),830px 793px rgba(255,255,255,.7),798px 548px rgba(255,255,255,.4),1607px 306px rgba(255,255,255,.7),616px 7px rgba(255,255,255,.25)}
.stars .shoot{position:absolute;width:160px;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.75));opacity:0;transform:rotate(152deg)}
.stars .shoot.a{top:14%;left:62%}
.stars .shoot.b{top:30%;left:86%;width:110px}
@media (prefers-reduced-motion:no-preference){
  body::after{animation:grain 1s steps(6) infinite}
  @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
  .stars .s2{animation:twinkle 4.5s ease-in-out infinite}
  .stars .s1{animation:twinkle 7s ease-in-out infinite reverse}
  @keyframes twinkle{0%,100%{opacity:1}50%{opacity:.35}}
  .stars .shoot.a{animation:shoot 11s ease-out 3s infinite}
  .stars .shoot.b{animation:shoot 14s ease-out 8s infinite}
  @keyframes shoot{0%{opacity:0;translate:0 0}2%{opacity:1}7%{opacity:0;translate:-260px 140px}100%{opacity:0;translate:-260px 140px}}
}
.hero .scene .city{filter:contrast(1.05) brightness(.95)}

body::after{opacity:.055}

/* desktop: match the moodier small-screen look */
.hero .scene{opacity:.68}
.hero .scene .city{filter:contrast(1.1) saturate(.85) brightness(.95)}
.hero .scene::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:overlay;opacity:.55;background-size:300px 300px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>")}
@media (max-width:640px){.hero .scene{opacity:.6}.hero .scene::after{background-size:220px 220px}}

/* dark cinematic illustrations: no frame, edges dissolve into black */
.detail figure{border:0;background:#000}
.detail figure img{filter:contrast(1.06) saturate(.88);-webkit-mask-image:radial-gradient(ellipse 75% 75% at 55% 50%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 75% 75% at 55% 50%,#000 55%,transparent 100%)}

/* founder photo */
.founder-card{grid-template-columns:280px 1fr;gap:56px}
.portrait-img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 30%;background:#000;
  -webkit-mask-image:radial-gradient(ellipse 85% 80% at 50% 42%,#000 60%,transparent 100%);mask-image:radial-gradient(ellipse 85% 80% at 50% 42%,#000 60%,transparent 100%)}
@media (max-width:1080px){.founder-card{grid-template-columns:200px 1fr;gap:32px}}
@media (max-width:640px){.founder-card{grid-template-columns:1fr}.portrait-img{max-width:280px}}

/* founder photo: fade out on all four sides (no hard edge) */
.portrait-img{
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 22%,#000 78%,transparent 100%),linear-gradient(180deg,transparent 0%,#000 16%,#000 74%,transparent 100%);
  mask-composite:intersect;background:transparent}

/* ===== Founder feature: full-bleed black & white ===== */
.founder-feature{position:relative;min-height:92vh;display:flex;align-items:center;overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#000}
.founder-feature .ph{position:absolute;left:0;top:0;height:100%;width:64%;object-fit:cover;object-position:35% 30%;
  -webkit-mask-image:linear-gradient(90deg,#000 40%,transparent 98%),linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 40%,transparent 98%),linear-gradient(180deg,transparent 0%,#000 14%,#000 82%,transparent 100%);mask-composite:intersect}
.founder-feature .wrap{position:relative;width:100%;display:grid;grid-template-columns:1.15fr 1fr}
.founder-feature .ff-text{grid-column:2;padding:120px 0}
.founder-feature .ff-text>*+*{margin-top:26px}
.founder-feature .ff-text .label{margin-bottom:6px}
.founder-feature + .wrap > .row:first-child{padding-top:130px}
@media (max-width:900px){
  .founder-feature{display:block;min-height:0}
  .founder-feature .ph{position:relative;width:100%;height:75vh;object-position:30% 25%;
    -webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .founder-feature .wrap{display:block;margin-top:-18vh}
  .founder-feature .ff-text{padding:0 0 90px}
}
@media (max-width:900px){
  .founder-feature .ph{-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 12%,#000 55%,transparent 100%)}
}