:root{--ink:#092530;--deep:#061a24;--ocean:#0b3540;--aqua:#7ed0d2;--sand:#e6e7e1;--white:#f7f9f7}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--white);background:var(--deep);font:15px/1.7 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,select,textarea{font:inherit}button{cursor:pointer}img{max-width:100%}.prebar{padding:8px 5%;font-size:10px;letter-spacing:.16em;text-align:center;background:#b5c9c4;color:#14313a;text-transform:uppercase}.nav{position:sticky;top:0;z-index:40;background:#061d28ed;border-bottom:1px solid #b6d5d52c;backdrop-filter:blur(20px)}.nav-in{max-width:1500px;margin:auto;padding:12px 4%;display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{display:flex;align-items:center;gap:12px;min-width:200px}.brand-mark{width:63px;height:55px;background:#fff;border-radius:2px;display:flex;align-items:center;justify-content:center;padding:4px}.brand-mark img{width:100%;height:100%;object-fit:contain}.brand-name{font-size:18px;line-height:1.1;letter-spacing:.17em;font-weight:800}.brand-name small{display:block;font-size:9px;letter-spacing:.11em;margin-top:8px;color:#a2bec4;font-weight:500}.nav-links{display:flex;gap:22px;align-items:center}.nav-links a{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#d4e3e5}.nav-links a:hover{color:#7ed0d2}.lang button{background:transparent;border:1px solid #668d95;color:white;padding:8px 10px;font-size:11px}.lang button.active{background:#c7e9df;color:#0b313a}.hero{min-height:88vh;position:relative;display:flex;align-items:center;overflow:hidden;isolation:isolate}.hero-image{position:absolute;inset:-3%;background:url('assets/projects/ruilin-05.jpg') center/cover;transform:scale(1.05);animation:heroDrift 20s ease-in-out infinite alternate;z-index:-2}.hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#04151fe8 5%,#061c25bd 40%,#061c2566 85%),linear-gradient(0deg,#061a24,transparent 50%)}.hero-content{width:min(1360px,100%);margin:auto;padding:90px 5%}.overline{font-size:11px;letter-spacing:.27em;color:#91d8d3;text-transform:uppercase;font-weight:700}.hero h1{font:400 clamp(50px,7.5vw,116px)/1.05 Georgia,"Times New Roman",serif;letter-spacing:-.035em;margin:26px 0;max-width:900px}.hero h1 em{font-style:italic;color:#b2e7db}.hero p{font-size:17px;max-width:610px;color:#d2e0e0;line-height:1.9}.btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 25px;min-height:49px;border:1px solid #b9e0d9;font-size:11px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;background:#bfe3da;color:#092a34;transition:transform .25s,background .25s}.btn:hover{transform:translateY(-3px);background:white}.btn.outline{background:transparent;color:white}.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:35px}.hero-rail{position:absolute;bottom:35px;right:5%;font-size:10px;letter-spacing:.14em;color:#d7e3e1}.wrap{max-width:1370px;margin:auto;padding:105px 5%}.section-head{display:flex;align-items:end;justify-content:space-between;gap:35px;margin-bottom:35px}.section-head p{max-width:580px;color:#a9c0c3}.section-head h2,h2.serif{font:400 clamp(36px,5vw,72px)/1.1 Georgia,serif;letter-spacing:-.03em;margin:17px 0 0}.intro{max-width:900px;font-size:17px;color:#b6ced0}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{position:relative;background:linear-gradient(145deg,#163b46,#092733);border:1px solid #779da12e;overflow:hidden;transition:transform .35s,box-shadow .35s;transform-style:preserve-3d}.card:hover{transform:perspective(1000px) rotateY(-3deg) rotateX(2deg) translateY(-9px);box-shadow:20px 25px 45px #0006}.card-copy{padding:30px}.card h3{font:400 27px/1.25 Georgia,serif;margin:15px 0}.card p{color:#b3c9cc;line-height:1.85}.card small{color:#8fcac8;letter-spacing:.13em}.card-photo{height:275px;width:100%;object-fit:cover;display:block;transition:transform .7s}.card:hover .card-photo{transform:scale(1.055)}.light{background:#e8eeea;color:#15343e}.light .overline{color:#367a84}.light .card{background:#fff;color:#173540;border-color:#cedcd7}.light .card p{color:#5e7a7e}.light .intro,.light .section-head p{color:#5d777d}.photo-feature{min-height:610px;background:linear-gradient(90deg,#061b27e0,#0d2e3980),url('assets/projects/qingliang-13.jpg') center/cover;display:flex;align-items:center}.photo-feature .wrap{width:100%}.photo-feature p{max-width:610px;font-size:18px;color:#e3ecec}.stats{display:flex;flex-wrap:wrap;gap:45px;margin-top:35px}.stat strong{font:400 38px Georgia,serif;display:block}.stat span{font-size:11px;letter-spacing:.1em;color:#c0d5d7}.filterbar{display:flex;gap:9px;flex-wrap:wrap;margin:25px 0}.filterbar button{background:transparent;color:#c1d5d6;border:1px solid #6e9aa058;padding:10px 15px;font-size:12px}.filterbar button.active{background:#c3e6dc;color:#0b2934}.gallery{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.gallery-item{padding:0;background:#12313c;border:1px solid #ffffff22;overflow:hidden;text-align:left;color:white;position:relative;aspect-ratio:4/3}.gallery-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s}.gallery-item:hover img{transform:scale(1.08)}.gallery-item span{position:absolute;bottom:0;left:0;right:0;padding:30px 13px 12px;background:linear-gradient(transparent,#061b26d9);font-size:11px;letter-spacing:.04em}.source{font-size:12px;color:#a5c0c3;margin-top:18px}.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}.split img{width:100%;height:520px;object-fit:cover;box-shadow:24px 28px 0 #17404b}.steps{counter-reset:step;display:grid;gap:13px}.step{border-bottom:1px solid #537a804d;padding:16px 0}.step:before{counter-increment:step;content:counter(step,decimal-leading-zero);color:#7bbfbd;font-size:11px;margin-right:15px}.tech{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.tech .card{padding:25px}.tech h3{font:400 27px Georgia,serif}.contact-section{background:#0c2c37}.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px}.contact-list{display:grid;gap:12px}.contact-list a,.contact-list div{border-bottom:1px solid #648b914a;padding:11px 0;overflow-wrap:anywhere}.contact-list small{display:block;color:#8cbabf;font-size:11px;letter-spacing:.12em;text-transform:uppercase}.contact-form{display:grid;gap:12px}.contact-form input,.contact-form textarea,.contact-form select{width:100%;background:#08202b;color:#f0f7f4;border:1px solid #65888c;padding:14px;min-height:47px}.contact-form textarea{min-height:140px}.contact-form button{width:100%}.foot{padding:35px 5%;background:#04151e;border-top:1px solid #33545d;display:flex;justify-content:space-between;gap:20px;font-size:12px;color:#94b1b5}.foot a{text-decoration:underline}.modal{position:fixed;inset:0;z-index:90;background:#031017eb;display:none;align-items:center;justify-content:center;padding:40px}.modal.show{display:flex}.modal img{max-height:90vh;max-width:90vw;object-fit:contain}.modal button{position:absolute;top:20px;right:20px;background:#d2e9e4;color:#092731;border:0;padding:8px 17px}.pill{display:inline-block;padding:6px 10px;background:#153f49;color:#c1e3df;font-size:11px;letter-spacing:.08em;margin:3px 6px 3px 0}.note{font-size:12px;color:#9bb7ba}.light .note{color:#597980}[hidden]{display:none!important}@keyframes heroDrift{from{transform:scale(1.05) translateX(-1%)}to{transform:scale(1.13) translateX(1%)}}@media(max-width:1050px){.nav-links{display:none}.gallery{grid-template-columns:repeat(3,1fr)}}@media(max-width:720px){.wrap{padding:65px 20px}.hero-content{padding:70px 20px}.hero{min-height:75vh}.hero h1{font-size:52px}.grid,.split,.contact-grid,.tech{grid-template-columns:1fr}.gallery{grid-template-columns:repeat(2,1fr)}.split{gap:35px}.split img{height:330px}.section-head{display:block}.foot{display:block}.brand-name{font-size:15px}.brand-mark{width:53px;height:49px}.hero-rail{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* iPad / mobile: keep every primary section reachable instead of hiding navigation. */
@media(max-width:1050px){.nav-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px 12px}.nav-links{display:flex;grid-column:1/-1;grid-row:2;gap:20px;overflow-x:auto;white-space:nowrap;scrollbar-width:thin;padding:7px 0 11px;scroll-snap-type:x proximity}.nav-links a{flex:none;scroll-snap-align:start;font-size:12px}.nav-in .lang{grid-column:2;grid-row:1;white-space:nowrap}.nav-in .brand{min-width:0}.nav{backdrop-filter:blur(14px)}}
@media(max-width:540px){.nav-in{padding:10px 16px}.brand-name{font-size:13px;letter-spacing:.09em}.brand-name small{font-size:7px;letter-spacing:.05em}.brand-mark{width:44px;height:43px;flex:none}.lang button{padding:6px;font-size:10px}.nav-links{gap:18px}.nav-links a{font-size:11px}.gallery-item{min-height:150px}.hero h1{font-size:clamp(42px,12vw,58px)}.hero-content{padding:56px 20px 70px}.contact-list a{overflow-wrap:anywhere}}

/* Compact home portfolio */
.compact-home .hero{min-height:0}
.compact-home .hero-content{padding-block:clamp(38px,7vh,84px)}
.compact-home .hero h1{font-size:clamp(40px,6vw,84px);margin-block:16px}
.compact-home .hero p{margin-block:10px}
.home-showcase{padding-block:26px 40px}
.home-showcase h2{margin:0 0 16px;font-size:clamp(25px,4vw,38px)}
.showcase-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.showcase-card{display:block;position:relative;isolation:isolate;overflow:hidden;min-height:168px;aspect-ratio:1.95;color:white;text-decoration:none;border:1px solid #4e7479;border-radius:10px;background:#102f39;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease}
.showcase-media{position:absolute;inset:0;display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:2px;overflow:hidden}
.showcase-media img{width:100%;height:100%;min-height:0;object-fit:cover;transition:transform .65s cubic-bezier(.2,.75,.25,1)}
.showcase-media img:first-child{grid-row:span 2}
.showcase-media svg{grid-area:1/1/-1/-1;width:100%;height:100%;transition:transform .65s cubic-bezier(.2,.75,.25,1)}
.showcase-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#061a24fa 0%,#061a2466 62%,transparent 100%);pointer-events:none}
.showcase-label{position:absolute;inset:auto 16px 13px;z-index:1}
.showcase-label h3{margin:0;font-size:clamp(19px,2.4vw,30px)}
.showcase-more{display:inline-block;color:#d2f4e9;margin-top:5px;transition:transform .35s ease,opacity .35s ease}
@media (hover:hover){.showcase-more{opacity:.75;transform:translateY(3px)}.showcase-card:hover{transform:translateY(-4px);border-color:#a4d7ca;box-shadow:0 10px 22px #0005}.showcase-card:hover .showcase-media>*{transform:scale(1.045)}.showcase-card:hover .showcase-more{opacity:1;transform:translateY(0)}}
.showcase-card:focus-visible{outline:2px solid #c7f8e9;outline-offset:3px}
@media(max-width:650px){.showcase-grid{grid-template-columns:1fr;gap:8px}.showcase-card{min-height:0;aspect-ratio:auto;height:104px}.showcase-label{bottom:9px}.compact-home .hero-rail{display:none}}
@media(prefers-reduced-motion:reduce){.compact-home .hero-image{animation:none}.showcase-card,.showcase-media>*,.showcase-more{transition:none!important;transform:none!important}}

.profile-main{padding-block:clamp(32px,6vw,72px)}
.profile-main h1{font:400 clamp(2rem,5vw,4rem)/1.12 Georgia,serif;margin:24px 0 16px}
.profile-main h2{margin-block:12px}
.profile-main>p{max-width:72ch}
.profile-main section{margin-block:48px}
.profile-grid,.drawing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:18px;margin-block:24px}
.profile-card,.drawing-grid figure{display:block;margin:0;border:1px solid #456b73;background:#102e3a;color:#eaf7f5;overflow:hidden}
.profile-card{padding:18px}
a.profile-card:hover,a.profile-card:focus-visible{border-color:#a7e2d7}
.profile-card img{width:100%;aspect-ratio:16/10;object-fit:cover}
.team-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,166px),1fr))}
.team-grid img{aspect-ratio:1;object-position:center 30%}
.drawing-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr))}
.drawing-grid img{display:block;width:100%;aspect-ratio:4/3;object-fit:contain;background:#0a222c}
.drawing-grid figcaption{padding:12px 16px}
.portfolio-entry{padding-block:24px}

#engineering-drawings{scroll-margin-top:120px}
.engineering-plates{border-block-end:1px solid #466e76;padding-block:12px;color:#dcebea}
.engineering-plates summary{cursor:pointer;font-size:1.05rem;padding:8px 0}
.engineering-plates summary span{font-size:.8rem;color:#a4c6c7;margin-inline-start:10px}
.engineering-plates summary:focus-visible{outline:2px solid #c7f8e9}
.engineering-plates p{color:#bdd3d6}
.engineering-plates .drawing-grid img{aspect-ratio:16/9;background:#102e3a}
@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .showcase-card::before{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(113deg,transparent 37%,#d4f5e331 50%,transparent 61%);transform:translateX(-105%);transition:transform .8s cubic-bezier(.24,.62,.25,1)}
  .showcase-card:hover::before{transform:translateX(105%)}
  .showcase-card:hover .showcase-media img:first-child{transform:scale(1.085) translateX(-1.3%)}
  .showcase-card:hover .showcase-media img:not(:first-child){transform:scale(1.04) translateX(1.2%)}
}

/* Keep the full site navigation visible at every width. */
.nav-in > .lang { flex-shrink: 0; white-space: nowrap; }
.nav-links { flex-wrap: wrap; column-gap: clamp(12px, 1.2vw, 22px); row-gap: 3px; }
.nav-links a { white-space: nowrap; padding-block: 4px; }
.nav-links a[aria-current] { color: #a4e8df; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 1050px) {
  .nav-in .nav-links { overflow: visible; padding-block: 0; }
}

/* Daylight palette for the homepage and featured collection landing page. */
.daylight { background:#f4faff; color:#15344b; }
.daylight .prebar { background:#dceef8; color:#234b66; }
.daylight .nav { background:#f7fcfff5; border-color:#d5e7f0; }
.daylight .brand-name,.daylight .nav-links a { color:#183e59; }
.daylight .brand-name small { color:#466d85; }
.daylight .nav-links a:hover,.daylight .nav-links a[aria-current] { color:#11659c; }
.daylight .lang button { border-color:#94b8ce; color:#224d68; }
.daylight .lang button.active,.daylight .btn { background:#176894; color:white; border-color:#176894; }
.daylight .btn:hover { background:#11577d; color:white; }
.daylight .btn.outline { background:transparent; color:#175d87; }
.daylight .overline { color:#245e80; }
.daylight .foot { background:#e7f3fa; color:#234b66; border-color:#ccdfeb; }

.daylight.compact-home .hero {
  width:min(1450px,100%); margin:auto; padding:clamp(24px,5vw,64px) 5%;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.14fr);
  gap:clamp(22px,5vw,70px); align-items:center;
}
.daylight .hero::before { content:none; }
.daylight.compact-home .hero-content { padding:0; grid-column:1; grid-row:1; }
.daylight .hero h1 { line-height:1.06; }
.daylight .hero h1 em { color:#246e99; }
.daylight .hero p { color:#385a70; }
.daylight .home-hero-image { margin:0; grid-column:2; grid-row:1; overflow:hidden; border-radius:18px; background:white; box-shadow:0 15px 40px #285f801c; }
.daylight .home-hero-image img { display:block; width:100%; aspect-ratio:1.45; object-fit:cover; }
.daylight .home-hero-image figcaption { padding:9px 16px; font-size:12px; color:#385a70; }
.daylight .showcase-grid { gap:16px; }
.daylight .showcase-card { min-height:0; height:auto; aspect-ratio:auto; border:1px solid #d3e5f0; background:white; color:#183e59; }
.daylight .showcase-card::after { content:none; }
.daylight .showcase-media { position:relative; aspect-ratio:2.2; }
.daylight .showcase-label { position:relative; inset:auto; padding:12px 16px 16px; }
.daylight .showcase-label h3 { font-size:clamp(18px,2vw,26px); }
.daylight .home-card-index { color:#326785; font-size:11px; letter-spacing:.12em; }
.daylight .showcase-more { color:#175d87; opacity:1; }
.daylight .showcase-card:hover { border-color:#82b7d4; box-shadow:0 10px 24px #285f801c; }
.daylight a:focus-visible,.daylight button:focus-visible { outline:2px solid #146b9f; outline-offset:3px; }
.daylight-products .subhero { padding:clamp(30px,5vw,65px) 5%; background:linear-gradient(125deg,#edf8ff,#d8edf9); }
.daylight-products .subhero p,.daylight-products .intro,.daylight-products .smallnote,
.daylight-products .spec p,.daylight-products .tile p,.daylight-products .checklist { color:#375b71; }
.daylight-products .collection-card,.daylight-products .tile { background:#fff; border-color:#cedfeb; color:#183e59; }
.daylight-products .collection-card-copy p:not(.collection-kicker) { color:#375b71; }
.daylight-products .collection-kicker,.daylight-products .collection-text-link,.daylight-products .tile .ey { color:#25658b; }
.daylight-products .collection-card { box-shadow:0 6px 18px #285f8010; }
.daylight-products .mini-footer { color:#385a70; background:#e7f3fa; border-color:#ccdfeb; }
.daylight-products .mini-footer a { color:#175d87; }
@media (max-width:760px) {
  .daylight.compact-home .hero { grid-template-columns:1fr; }
  .daylight .home-hero-image { grid-column:1; grid-row:2; }
  .daylight .home-hero-image img { aspect-ratio:1.8; }
  .daylight .showcase-card { height:auto; }
}