:root{
  --bg:#0a0a09;
  --bg-elev:#11110f;
  --bg-soft:#171714;
  --paper:#f1eee7;
  --paper-2:#e7e1d7;
  --ink:#f4f0e8;
  --ink-dark:#151513;
  --muted:#aaa59b;
  --muted-dark:#6f6a62;
  --line:rgba(255,255,255,.13);
  --line-dark:rgba(21,21,19,.16);
  --accent:#caa56a;
  --accent-2:#e1c99a;
  --shadow:0 28px 80px rgba(0,0,0,.28);
  --max:1380px;
  --pad:clamp(20px,4vw,64px);
  --radius:2px;
  color-scheme:dark;
}
html[data-theme="light"]{
  --bg:#f4f1eb;
  --bg-elev:#ffffff;
  --bg-soft:#eae5dd;
  --paper:#121210;
  --paper-2:#1b1b18;
  --ink:#161614;
  --ink-dark:#f3efe7;
  --muted:#6e6960;
  --muted-dark:#b7b0a5;
  --line:rgba(18,18,16,.14);
  --line-dark:rgba(255,255,255,.14);
  --shadow:0 28px 80px rgba(40,32,20,.12);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Microsoft JhengHei",Arial,sans-serif;line-height:1.5;letter-spacing:-.01em}
body.menu-open{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
button{font:inherit}
.wrap{width:min(var(--max),calc(100% - var(--pad)*2));margin-inline:auto}
.gold{color:var(--accent)}
.eyebrow{font-size:11px;font-weight:650;letter-spacing:.18em;text-transform:uppercase;color:var(--accent);margin-bottom:18px}
.muted{color:var(--muted)}
.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* navigation */
.nav{position:fixed;inset:0 0 auto 0;height:84px;z-index:1000;background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.navin{height:100%;display:grid;grid-template-columns:minmax(230px,1fr) auto minmax(230px,1fr);align-items:center;gap:28px}
.brand{display:flex;align-items:flex-end;gap:14px;min-width:0}
.logo{font-size:25px;letter-spacing:-.045em;font-weight:720;line-height:1;white-space:nowrap}
.logo b{font-weight:720;color:var(--accent)}
.brand .tag{font-size:9px;line-height:1.2;letter-spacing:.14em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.menu{display:flex;gap:26px;align-items:center;justify-content:center}
.menu a{font-size:12px;color:var(--muted);transition:.25s ease}
.menu a:hover,.menu a.active{color:var(--ink)}
.controls{display:flex;justify-content:flex-end;gap:9px;align-items:center}
.icon-btn,.lang-btn,.menu-btn{height:38px;min-width:38px;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer;display:grid;place-items:center;transition:.2s ease}
.lang-btn{padding:0 12px;font-size:11px;letter-spacing:.07em}
.icon-btn:hover,.lang-btn:hover,.menu-btn:hover{border-color:var(--accent);color:var(--accent)}
.menu-btn{display:none}
.btn{min-height:42px;padding:0 18px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:10px;font-size:12px;letter-spacing:.02em;transition:.25s ease}
.btn:hover{border-color:var(--accent);transform:translateY(-1px)}
.btn.fill{background:var(--accent);color:#15120d;border-color:var(--accent);font-weight:680}
.btn.fill:hover{background:var(--accent-2)}
.mobile-panel{display:none}

/* type */
h1,h2,h3,p{margin-top:0}
h1{font-size:clamp(56px,7.7vw,126px);line-height:.88;letter-spacing:-.065em;font-weight:460;margin-bottom:28px;max-width:1050px}
h2{font-size:clamp(42px,5.5vw,82px);line-height:.96;letter-spacing:-.052em;font-weight:460;margin-bottom:22px}
h3{font-weight:520;letter-spacing:-.025em}
.lead{font-size:clamp(18px,2vw,26px);line-height:1.35;color:#ddd6ca;max-width:760px}
html[data-theme="light"] .lead{color:#514d46}
.section-copy,.dark-copy{font-size:15px;line-height:1.65;max-width:510px;color:var(--muted)}

/* hero */
.hero{min-height:100svh;position:relative;display:flex;align-items:flex-end;padding:150px 0 64px;overflow:hidden;background:#090909}
.hero-media{position:absolute;inset:0}
.hero-media img{object-position:center 54%;filter:saturate(.82) contrast(1.06)}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.5) 50%,rgba(0,0,0,.16) 100%),linear-gradient(0deg,rgba(0,0,0,.86) 0%,transparent 48%)}
.heroin{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.8fr) minmax(300px,.62fr);gap:7vw;align-items:end;color:#f5f2ec}
.hero .lead{color:#ded8cf}
.hero-aside{padding:28px 0 4px;border-top:1px solid rgba(255,255,255,.36);font-size:14px;color:#cfc8bd}
.hero-aside b{display:block;color:white;font-size:12px;letter-spacing:.08em;margin-bottom:12px}
.hero-kicker{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.hero-kicker span{font-size:10px;letter-spacing:.12em;border:1px solid rgba(255,255,255,.24);padding:8px 10px;color:#e6dfd5}
.scroll-note{position:absolute;right:var(--pad);bottom:25px;color:#beb7ad;font-size:9px;letter-spacing:.18em;writing-mode:vertical-rl;z-index:3}

.ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg-elev)}
.ticker-track{display:flex;width:max-content;gap:30px;white-space:nowrap;padding:12px 0;font-size:10px;letter-spacing:.15em;color:var(--muted);animation:ticker 32s linear infinite}
@keyframes ticker{to{transform:translateX(-50%)}}

/* shared sections */
.section{padding:clamp(80px,9vw,140px) 0;background:var(--bg)}
.section.paper{background:var(--paper);color:var(--ink-dark)}
.section.paper .eyebrow{color:#9a7645}
.section.paper .section-copy{color:var(--muted-dark)}
.section.soft{background:var(--bg-soft)}
.section.compact{padding-top:80px;padding-bottom:80px}
.section-head{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:80px;align-items:end;margin-bottom:60px}
.section-head h2{margin-bottom:0}

/* capabilities */
.cap-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark)}
.cap{min-height:250px;padding:28px;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);position:relative;overflow:hidden;transition:.25s ease}
.cap::after{content:"";position:absolute;left:0;bottom:0;width:0;height:3px;background:var(--accent);transition:.3s ease}
.cap:hover{background:rgba(255,255,255,.035)}
.cap:hover::after{width:100%}
.cap .num{font-size:11px;color:#8c8173;letter-spacing:.1em}
.cap h3{font-size:24px;margin:64px 0 10px;max-width:260px}
.cap p{font-size:13px;color:var(--muted-dark);max-width:300px;margin:0}

/* work */
.visual-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:18px}
.visual-side{display:grid;gap:18px}
.vcard{position:relative;min-height:680px;overflow:hidden;background:#111}
.visual-side .vcard{min-height:331px}
.vcard img{transition:transform .8s cubic-bezier(.2,.7,.2,1);filter:saturate(.88)}
.vcard:hover img{transform:scale(1.025)}
.vcard::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.05) 60%)}
.vmeta{position:absolute;z-index:2;inset:auto 28px 26px;color:white}
.vmeta small{font-size:9px;letter-spacing:.18em;color:#d7b77e}
.vmeta h3{font-size:31px;margin:8px 0 4px}
.vmeta p{font-size:12px;color:#c7c0b6;margin:0}

/* connection */
.connection{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.connection-copy{position:sticky;top:130px}
.connection-flow{border-top:1px solid var(--line)}
.connect-node{display:grid;grid-template-columns:80px 1fr auto;gap:26px;align-items:center;padding:22px 0;border-bottom:1px solid var(--line)}
.connect-node .index{color:var(--accent);font-size:11px}
.connect-node b{font-size:clamp(22px,2.3vw,34px);font-weight:470;letter-spacing:-.035em}
.connect-node span{font-size:12px;color:var(--muted);text-align:right}

/* split story */
.story{display:grid;grid-template-columns:1.05fr .95fr;min-height:760px;background:var(--bg-soft)}
.story-media{position:relative;min-height:620px;overflow:hidden}
.story-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(0,0,0,.2))}
.story-copy{padding:clamp(70px,8vw,120px);display:flex;flex-direction:column;justify-content:center}
.story-copy>p{color:var(--muted);max-width:620px;font-size:16px;line-height:1.75}
.story-pairs{margin-top:34px;border-top:1px solid var(--line)}
.pair{display:grid;grid-template-columns:180px 1fr;gap:30px;padding:18px 0;border-bottom:1px solid var(--line)}
.pair b{font-size:11px;letter-spacing:.08em;color:var(--accent)}
.pair span{font-size:13px;color:var(--muted)}

/* industries */
.industries{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark)}
.industry{min-height:160px;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);padding:25px;display:flex;flex-direction:column;justify-content:space-between}
.industry b{font-size:18px;font-weight:520}
.industry span{font-size:12px;color:var(--muted-dark)}

/* dev teaser */
.dev-teaser{display:grid;grid-template-columns:.92fr 1.08fr;min-height:650px;background:#0c0d0d;color:#f4f1eb}
.dev-teaser-copy{padding:clamp(70px,8vw,120px);display:flex;flex-direction:column;justify-content:center}
.dev-teaser-copy p{max-width:590px;color:#aaa59b;font-size:16px;line-height:1.7}
.dev-teaser-media{min-height:540px;position:relative;overflow:hidden}
.dev-teaser-media img{filter:saturate(.65) contrast(1.08)}
.dev-teaser-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(12,13,13,.32),transparent)}

/* process */
.process{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.step{min-height:245px;padding:26px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.step .n{font-size:28px;color:var(--accent);font-weight:400}
.step h3{font-size:20px;margin:72px 0 8px}
.step p{font-size:12px;color:var(--muted);margin:0}

/* CTA / contact */
.cta{padding:clamp(90px,11vw,170px) 0;background:var(--paper);color:var(--ink-dark)}
.cta h2{max-width:1050px}
.cta .lead{color:var(--muted-dark);max-width:780px}
.contact-grid{margin-top:48px;display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:end}
.contact-actions{display:flex;flex-wrap:wrap;gap:10px}
.contact-meta{border-top:1px solid var(--line-dark)}
.contact-row{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:13px 0;border-bottom:1px solid var(--line-dark);font-size:12px}
.contact-row span:first-child{color:var(--muted-dark)}

.footer{padding:32px 0 44px;background:var(--bg);border-top:1px solid var(--line)}
.footerin{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.footer .tag{font-size:9px;color:var(--muted);letter-spacing:.12em;margin-top:8px}
.footlinks{display:flex;gap:22px;flex-wrap:wrap;justify-content:flex-end}
.footlinks a{font-size:11px;color:var(--muted)}
.footlinks a:hover{color:var(--accent)}
.copyright{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px;margin-top:8px;display:flex;justify-content:space-between;gap:24px;font-size:9px;color:var(--muted);letter-spacing:.06em}

/* DEV PAGE */
.dev-hero{min-height:100svh;padding:150px 0 70px;display:flex;align-items:center;position:relative;overflow:hidden;background:#080a0b;color:#f5f2ec}
.dev-hero::before{content:"";position:absolute;width:720px;height:720px;border-radius:50%;background:radial-gradient(circle,rgba(202,165,106,.15),transparent 68%);right:-80px;top:80px;pointer-events:none}
.dev-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:.9fr 1.1fr;gap:7vw;align-items:center}
.dev-hero h1{max-width:760px}
.dev-hero .lead{color:#c9c4bb;max-width:660px}
.dev-hero-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:32px}
.device-stage{min-height:630px;position:relative}
.device-photo{position:absolute;inset:40px 0 70px 10%;overflow:hidden;box-shadow:var(--shadow)}
.device-photo img{filter:saturate(.55) brightness(.66) contrast(1.12)}
.device-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,rgba(4,5,6,.72),transparent 55%)}
.phone-mock{position:absolute;right:3%;top:12%;width:255px;height:520px;background:#111518;border:1px solid #4c4b47;border-radius:38px;padding:10px;box-shadow:0 36px 90px rgba(0,0,0,.55);transform:rotate(3deg)}
.phone-screen{height:100%;border-radius:29px;background:linear-gradient(165deg,#171c20,#0a0c0e);padding:26px 18px;overflow:hidden;position:relative}
.phone-screen::before{content:"";position:absolute;top:9px;left:50%;width:78px;height:18px;border-radius:20px;background:#050607;transform:translateX(-50%)}
.mini-label{font-size:8px;letter-spacing:.16em;color:#8d8f90;margin-top:18px}
.phone-screen h3{font-size:30px;line-height:.98;margin:30px 0 18px;font-weight:460}
.ui-pill{height:8px;border-radius:10px;background:#caa56a;width:45%;margin:12px 0}
.ui-card{height:78px;border:1px solid rgba(255,255,255,.12);margin-top:12px;background:linear-gradient(135deg,#12171b,#1b1812)}
.web-mock{position:absolute;left:1%;bottom:0;width:78%;height:330px;background:#0e1113;border:1px solid #4a4a48;box-shadow:0 36px 90px rgba(0,0,0,.5);transform:perspective(900px) rotateY(7deg) rotateX(2deg);padding:12px}
.web-screen{height:100%;border:1px solid #252a2d;background:#0b0e10;padding:20px;display:grid;grid-template-columns:110px 1fr;gap:14px}
.web-side{border-right:1px solid #252a2d}
.web-content{display:grid;grid-template-rows:70px 1fr;gap:14px}
.web-top{border:1px solid #262d31;background:#11161a}
.web-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.web-cards div{border:1px solid #262d31;background:linear-gradient(145deg,#11161a,#17130d)}

.dev-service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.dev-service{min-height:280px;padding:28px;border:1px solid var(--line);background:var(--bg-elev);position:relative;overflow:hidden}
.dev-service .service-icon{font-size:24px;color:var(--accent)}
.dev-service b{display:block;font-size:10px;letter-spacing:.12em;color:var(--accent);margin-top:42px}
.dev-service h3{font-size:25px;margin:8px 0 12px}
.dev-service p{font-size:13px;color:var(--muted);max-width:320px}

.dev-proof{display:grid;grid-template-columns:1fr 1fr;min-height:720px;background:var(--paper);color:var(--ink-dark)}
.dev-proof-media{position:relative;overflow:hidden}
.dev-proof-media img{filter:saturate(.65) contrast(1.05)}
.dev-proof-copy{padding:clamp(70px,8vw,120px);display:flex;flex-direction:column;justify-content:center}
.dev-proof-copy p{font-size:16px;line-height:1.7;color:var(--muted-dark);max-width:590px}
.checklist{margin-top:28px;border-top:1px solid var(--line-dark)}
.check{display:grid;grid-template-columns:26px 1fr;gap:14px;padding:13px 0;border-bottom:1px solid var(--line-dark);font-size:13px}
.check span:first-child{color:#9a7645}

.project-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:18px}
.project-main,.project-small{position:relative;overflow:hidden;background:#0c0c0b}
.project-main{min-height:650px}
.project-side{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.project-small{min-height:316px}
.project-main img,.project-small img{filter:saturate(.6) contrast(1.05);transition:transform .7s ease}
.project-main:hover img,.project-small:hover img{transform:scale(1.025)}
.project-main::after,.project-small::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.8),transparent 65%)}
.project-meta{position:absolute;z-index:2;inset:auto 24px 22px;color:white}
.project-meta small{color:#d7b77e;font-size:9px;letter-spacing:.15em}
.project-meta h3{margin:7px 0 4px;font-size:26px}
.project-meta p{margin:0;color:#c8c1b8;font-size:11px}

.build-manage{display:grid;grid-template-columns:.8fr 1.2fr;gap:90px;align-items:start}
.build-manage h2{position:sticky;top:130px}
.lifecycle{border-top:1px solid var(--line)}
.life-row{padding:26px 0;border-bottom:1px solid var(--line);display:grid;grid-template-columns:70px 190px 1fr;gap:20px}
.life-row .n{color:var(--accent);font-size:11px}
.life-row b{font-size:18px;font-weight:500}
.life-row span{font-size:13px;color:var(--muted)}

.stack{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:1px solid var(--line-dark);padding:10px 13px;font-size:11px;color:var(--muted-dark);background:transparent}
.faq{display:grid;grid-template-columns:1fr 1fr;gap:0 50px;border-top:1px solid var(--line)}
.faq-item{padding:23px 0;border-bottom:1px solid var(--line)}
.faq-item h3{font-size:17px;margin-bottom:8px}
.faq-item p{font-size:13px;color:var(--muted);margin:0}

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

@media(max-width:1100px){
  .navin{grid-template-columns:1fr auto}.menu{display:none}.controls .desktop-cta{display:none}.menu-btn{display:grid}
  .mobile-panel{position:fixed;display:block;z-index:999;inset:84px 0 0;background:var(--bg);padding:36px var(--pad);transform:translateX(100%);transition:transform .32s ease;border-top:1px solid var(--line)}
  .mobile-panel.open{transform:none}.mobile-panel nav{display:flex;flex-direction:column}.mobile-panel nav a{font-size:clamp(34px,7vw,70px);line-height:1.15;padding:8px 0;border-bottom:1px solid var(--line);letter-spacing:-.045em}.mobile-panel .mobile-contact{margin-top:32px;color:var(--muted);font-size:12px}
  .heroin,.dev-hero-grid{grid-template-columns:1fr}.hero-aside{max-width:640px}.scroll-note{display:none}
  .device-stage{min-height:560px}
  .cap-grid,.dev-service-grid{grid-template-columns:repeat(2,1fr)}
  .industries{grid-template-columns:repeat(2,1fr)}
  .process{grid-template-columns:repeat(3,1fr)}
  .section-head{grid-template-columns:1fr;gap:24px}
  .story,.dev-proof,.dev-teaser{grid-template-columns:1fr}.story-media,.dev-proof-media,.dev-teaser-media{min-height:560px}.story-copy,.dev-proof-copy,.dev-teaser-copy{padding:70px var(--pad)}
  .connection,.build-manage{grid-template-columns:1fr;gap:45px}.connection-copy,.build-manage h2{position:static}
  .project-grid{grid-template-columns:1fr}.project-side{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .nav{height:72px}.mobile-panel{inset:72px 0 0}.navin{gap:14px}.brand .tag{display:none}.logo{font-size:22px}.controls{gap:6px}.lang-btn{padding:0 10px}
  .hero{padding:128px 0 46px;min-height:850px}.heroin{gap:40px}.hero-media img{object-position:58% center}.hero-media::after{background:linear-gradient(0deg,rgba(0,0,0,.9),rgba(0,0,0,.28)),linear-gradient(90deg,rgba(0,0,0,.55),transparent)}
  h1{font-size:clamp(52px,15vw,86px)}h2{font-size:clamp(39px,12vw,62px)}.lead{font-size:17px}.section{padding:74px 0}.section-head{margin-bottom:38px}
  .cap-grid,.dev-service-grid{grid-template-columns:1fr}.cap{min-height:210px}.cap h3{margin-top:45px}
  .visual-grid{grid-template-columns:1fr}.vcard,.visual-side .vcard{min-height:480px}
  .connect-node{grid-template-columns:40px 1fr}.connect-node span{grid-column:2;text-align:left}
  .industries{grid-template-columns:1fr 1fr}.industry{min-height:135px}
  .story-media,.dev-proof-media,.dev-teaser-media{min-height:440px}.story-copy,.dev-proof-copy,.dev-teaser-copy{padding:64px var(--pad)}.pair{grid-template-columns:1fr;gap:5px}
  .process{grid-template-columns:1fr}.step{min-height:175px}.step h3{margin-top:38px}
  .contact-grid{grid-template-columns:1fr;gap:40px}.footerin{grid-template-columns:1fr}.footlinks{justify-content:flex-start}.copyright{flex-direction:column;gap:7px}
  .dev-hero{padding:118px 0 60px}.device-stage{min-height:500px}.device-photo{inset:40px 10% 95px 0}.phone-mock{width:180px;height:390px;right:0;top:38px;border-radius:29px}.phone-screen{border-radius:21px;padding:20px 13px}.phone-screen h3{font-size:22px}.web-mock{width:88%;height:245px}.web-screen{grid-template-columns:64px 1fr;padding:12px}.web-cards{gap:5px}
  .project-main{min-height:520px}.project-side{grid-template-columns:1fr}.project-small{min-height:420px}
  .life-row{grid-template-columns:40px 1fr}.life-row span{grid-column:2}.faq{grid-template-columns:1fr}
}
@media(max-width:430px){.industries{grid-template-columns:1fr}.hero-kicker{gap:6px}.hero-kicker span{font-size:8px}.contact-actions .btn{width:100%}.web-mock{width:95%}.project-small{min-height:360px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* V3.1 — user supplied photography system */
.hero-media img{object-position:center center;filter:saturate(.96) contrast(1.035) brightness(.92)}
.hero-media::after{background:linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.12) 76%,rgba(0,0,0,.06) 100%),linear-gradient(0deg,rgba(0,0,0,.72) 0%,transparent 52%)}
.vcard img,.story-media img,.dev-teaser-media img,.industry-photo img{filter:saturate(.98) contrast(1.025)}
.story-media img{object-position:58% center}
.dev-teaser-media img{object-position:center center}

.industry-photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:34px}
.industry-photo{margin:0;min-height:300px;position:relative;overflow:hidden;background:#0c0c0b}
.industry-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 58%)}
.industry-photo figcaption{position:absolute;z-index:2;left:22px;right:22px;bottom:20px;color:#fff;display:flex;flex-direction:column;gap:4px}
.industry-photo figcaption b{font-size:12px;letter-spacing:.08em}
.industry-photo figcaption span{font-size:10px;color:#d0c6b8}

.dev-hero{min-height:100svh;padding:145px 0 80px;display:flex;align-items:center;position:relative;overflow:hidden;background:#070808;color:#f5f2ec}
.dev-hero::before{display:none}
.dev-hero-media{position:absolute;inset:0;z-index:0}
.dev-hero-media img{object-position:center center;filter:saturate(.97) contrast(1.04) brightness(.86)}
.dev-hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.88) 0%,rgba(0,0,0,.72) 30%,rgba(0,0,0,.25) 53%,rgba(0,0,0,.04) 75%),linear-gradient(0deg,rgba(0,0,0,.62),transparent 45%)}
.dev-hero-grid{position:relative;z-index:2;display:block}
.dev-hero-copy{max-width:650px}
.dev-hero-copy h1{font-size:clamp(54px,6.4vw,104px);max-width:700px}
.dev-hero-copy .lead{max-width:610px}
.dev-proof-media img{filter:saturate(.98) contrast(1.02);object-position:center center}
.project-main img,.project-small img{filter:saturate(.96) contrast(1.03)}
.project-main img{object-position:center center}
.project-side .project-small:nth-child(1) img{object-position:65% center}
.project-side .project-small:nth-child(2) img{object-position:55% center}
.project-side .project-small:nth-child(3) img{object-position:center center}
.project-side .project-small:nth-child(4) img{object-position:center center}

@media(max-width:900px){
  .industry-photo-grid{grid-template-columns:1fr 1fr}.industry-photo:last-child{grid-column:1/-1}
  .dev-hero-media img{object-position:62% center}
  .dev-hero-media::after{background:linear-gradient(90deg,rgba(0,0,0,.89),rgba(0,0,0,.54) 66%,rgba(0,0,0,.18)),linear-gradient(0deg,rgba(0,0,0,.7),transparent 55%)}
}
@media(max-width:640px){
  .industry-photo-grid{grid-template-columns:1fr}.industry-photo:last-child{grid-column:auto}.industry-photo{min-height:270px}
  .hero-media img{object-position:66% center}
  .dev-hero{min-height:820px;align-items:flex-end;padding-bottom:64px}
  .dev-hero-media img{object-position:68% center}
  .dev-hero-media::after{background:linear-gradient(0deg,rgba(0,0,0,.94) 0%,rgba(0,0,0,.64) 53%,rgba(0,0,0,.18) 100%)}
  .dev-hero-copy{max-width:100%}
}

/* V3.2 — iPhone / narrow-screen typography + grid fixes */
body{overflow-x:hidden}

@media(max-width:720px){
  /* Prevent a long display word from forcing the single-column hero wider than the viewport. */
  .heroin{grid-template-columns:minmax(0,1fr);min-width:0}
  .heroin>*{min-width:0}
  .hero h1{
    max-width:100%;
    font-size:clamp(43px,12vw,52px);
    line-height:.91;
    letter-spacing:-.064em;
  }
  .hero .lead,.hero-aside{max-width:100%}

  /* HUMIANX connection list: index / title / description each get their own grid area. */
  .connect-node{
    grid-template-columns:42px minmax(0,1fr);
    grid-template-areas:
      "index title"
      ". description";
    column-gap:14px;
    row-gap:7px;
    align-items:start;
    padding:25px 0;
  }
  .connect-node .index{
    grid-area:index;
    align-self:start;
    padding-top:4px;
    font-size:11px;
    line-height:1.2;
  }
  .connect-node b{
    grid-area:title;
    min-width:0;
    font-size:clamp(26px,7.2vw,32px);
    line-height:1.02;
  }
  .connect-node > span:not(.index){
    grid-area:description;
    min-width:0;
    text-align:left;
    font-size:13px;
    line-height:1.45;
  }

  /* DEV lifecycle list: same mobile placement correction. */
  .life-row{
    grid-template-columns:42px minmax(0,1fr);
    grid-template-areas:
      "number title"
      ". description";
    column-gap:14px;
    row-gap:7px;
    align-items:start;
    padding:25px 0;
  }
  .life-row .n{
    grid-area:number;
    align-self:start;
    padding-top:3px;
    font-size:11px;
    line-height:1.2;
  }
  .life-row b{
    grid-area:title;
    min-width:0;
    font-size:20px;
    line-height:1.15;
  }
  .life-row > span:not(.n){
    grid-area:description;
    min-width:0;
    font-size:13px;
    line-height:1.5;
  }
}

@media(max-width:430px){
  /* Tuned for iPhone widths around 375–430 CSS px. */
  .hero h1{font-size:clamp(42px,11.7vw,49px)}
  .hero .eyebrow{font-size:10px;line-height:1.45}
  .connect-node b{font-size:28px}
}


/* V3.3 — hard mobile fallback, intentionally block-flow instead of grid */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
@media(max-width:720px){
  .connect-node,.life-row{display:block}
  .connect-node .index,.connect-node b,.connect-node>span:not(.index),
  .life-row .n,.life-row b,.life-row>span:not(.n){display:block;width:auto;grid-column:auto;grid-row:auto}
}