:root { --navy:#283f61; --navy-deep:#172b47; --gold:#b88e5c; --cream:#f4f0e8; --paper:#fbfaf7; --ink:#20334f; --muted:#6f7884; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:"Noto Sans TC","PingFang TC","Microsoft JhengHei",sans-serif; }
a { color:inherit; text-decoration:none; }
.site-header { position:absolute; z-index:20; top:0; left:0; right:0; height:98px; display:flex; align-items:center; justify-content:space-between; padding:0 5.5vw; color:white; border-bottom:1px solid rgba(255,255,255,.22); }
.brand { display:flex; align-items:center; gap:13px; }
.brand-logo { width:44px; height:44px; display:block; object-fit:cover; }
.brand-copy { display:flex; flex-direction:column; gap:3px; }.brand-copy strong { font-family:"Noto Serif TC","Songti TC",serif; font-size:20px; letter-spacing:.32em; }.brand-copy small { font-family:Georgia,serif; font-size:8px; letter-spacing:.2em; opacity:.65; }
nav { display:flex; align-items:center; gap:34px; font-size:13px; letter-spacing:.12em; } nav a { transition:.25s; } nav a:hover { color:#d4b180; }.nav-cta { padding:12px 18px; border:1px solid rgba(255,255,255,.55); }.nav-cta span { margin-left:12px; color:#d4b180; }
.hero { min-height:780px; height:100vh; max-height:980px; overflow:hidden; position:relative; padding:190px 8vw 100px; color:white; background:radial-gradient(circle at 71% 43%,rgba(100,126,159,.55),transparent 29%),linear-gradient(125deg,var(--navy-deep),#304c72 68%,#263b5b); }
.hero::before { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:25vw 100%; pointer-events:none; }
.hero-copy { position:relative; z-index:2; max-width:850px; }
.kicker,.eyebrow { font-size:12px; letter-spacing:.28em; font-weight:600; }.kicker { color:#d1b184; display:flex; gap:14px; align-items:center; }.kicker span { width:36px; height:1px; background:#d1b184; }
h1,h2,h3,p { margin-top:0; }.hero h1 { margin:33px 0 28px; font-family:"Noto Serif TC","Songti TC",serif; font-size:clamp(52px,6.3vw,94px); line-height:1.2; letter-spacing:.03em; font-weight:500; }.hero h1 span { display:inline-block; color:#c9a16d; }
.hero-lead { width:760px; max-width:100%; color:rgba(255,255,255,.72); font-size:16px; line-height:2; letter-spacing:.08em; white-space:nowrap; }
.hero-actions { display:flex; align-items:center; gap:36px; margin-top:45px; }.button { min-width:190px; display:inline-flex; align-items:center; justify-content:space-between; padding:17px 21px; font-size:13px; letter-spacing:.12em; transition:.25s; }.button-gold { background:var(--gold); color:white; }.button-gold:hover { background:#c09a69; transform:translateY(-2px); }.text-link { font-size:13px; letter-spacing:.1em; border-bottom:1px solid rgba(255,255,255,.35); padding:10px 0; }.text-link span { margin-left:12px; color:#d4b180; }
.hero-orbit { position:absolute; width:760px; height:310px; right:-70px; top:310px; border:1px solid rgba(206,174,132,.34); border-radius:50%; transform:rotate(-16deg); }.hero-orbit i { position:absolute; width:9px; height:9px; background:#c69a64; transform:rotate(45deg); }.hero-orbit i:nth-child(1){left:3%;top:49%}.hero-orbit i:nth-child(2){right:5%;top:23%}.hero-orbit i:nth-child(3){left:55%;bottom:-4px}
.hero-seal { position:absolute; right:7vw; bottom:96px; display:flex; flex-direction:column; align-items:center; gap:5px; padding:22px 15px; font-family:"Noto Serif TC",serif; font-size:15px; letter-spacing:.1em; border:1px solid rgba(255,255,255,.35); color:#d3b17f; }.hero-index { position:absolute; bottom:35px; right:8vw; font:10px Georgia,serif; letter-spacing:.25em; opacity:.5; }
.origin,.principle,.portfolio,.impact { padding:120px 8vw; }.section-label { display:flex; align-items:center; gap:18px; margin-bottom:76px; color:#8a9199; font:10px Georgia,serif; letter-spacing:.24em; }.section-label::after { content:""; height:1px; flex:1; background:#d8d6cf; }.section-label b { font-weight:400; }
.origin-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:10vw; }.origin-title .eyebrow { line-height:2; color:var(--gold); }.origin-title h2,.section-heading h2,.principle h2,.portfolio h2,.impact h2,.contact h2 { font-family:"Noto Serif TC","Songti TC",serif; font-weight:500; letter-spacing:.05em; line-height:1.45; }.origin-title h2 { font-size:clamp(40px,5vw,68px); margin-top:28px; }.origin-story { max-width:600px; }.origin-story>p { font-size:15px; line-height:2.2; color:#586474; letter-spacing:.07em; margin-bottom:24px; }.origin-story blockquote { margin:50px 0 0; padding:25px 0 25px 28px; border-left:2px solid var(--gold); color:var(--navy); font:22px/1.8 "Noto Serif TC",serif; }.origin-term { color:var(--gold); font:30px/1 "Noto Serif TC","Songti TC",serif; letter-spacing:.05em; white-space:nowrap; }
.services { background:var(--navy-deep); color:white; padding:120px 8vw 130px; }.light-heading { display:grid; grid-template-columns:1fr 1fr; gap:7vw; align-items:end; }.light-heading .section-label { grid-column:1/-1; width:100%; margin-bottom:35px; color:rgba(255,255,255,.4); }.light-heading .section-label::after { background:rgba(255,255,255,.2); }.light-heading .eyebrow { color:#cba574; }.light-heading h2 { font-size:clamp(38px,4.3vw,61px); margin:20px 0 0; }.light-heading h2 span { display:block; white-space:nowrap; }.light-heading>p { justify-self:end; color:rgba(255,255,255,.55); font-size:13px; line-height:2; letter-spacing:.02em; white-space:nowrap; }
.service-list { margin-top:85px; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.2); }.service-card { min-height:440px; padding:34px 28px 30px; border-right:1px solid rgba(255,255,255,.18); position:relative; transition:.3s; }.service-card:first-child { border-left:1px solid rgba(255,255,255,.18); }.service-card:hover { background:rgba(255,255,255,.05); transform:translateY(-6px); }.service-no { color:#cba574; font:12px Georgia,serif; }.service-en { margin:72px 0 10px; font:9px Georgia,serif; letter-spacing:.16em; color:rgba(255,255,255,.38); }.service-card h3 { font:30px "Noto Serif TC",serif; letter-spacing:.1em; }.service-summary { color:#cba574; font-size:13px; letter-spacing:.12em; }.service-text { margin-top:27px; color:rgba(255,255,255,.58); font-size:13px; line-height:1.9; }.service-tags { position:absolute; left:28px; bottom:28px; display:flex; flex-wrap:wrap; gap:7px; }.service-tags span { padding:6px 9px; border:1px solid rgba(255,255,255,.18); color:rgba(255,255,255,.58); font-size:10px; letter-spacing:.08em; }
.principle { background:var(--cream); }.principle-grid { display:grid; grid-template-columns:.4fr 1.7fr .7fr; gap:4vw; align-items:start; }.principle-grid .eyebrow { color:var(--gold); }.principle h2 { font-size:clamp(38px,4.1vw,58px); margin:0; }.principle h2 span { display:block; white-space:nowrap; }.principle-grid>div p { color:#697381; font-size:15px; line-height:2.1; }.gold-line { display:block; width:70px; height:1px; background:var(--gold); margin-top:34px; }
.portfolio { background:var(--paper); }.portfolio-heading { display:grid; grid-template-columns:1.2fr .7fr; align-items:end; gap:12vw; }.portfolio-heading .eyebrow { color:var(--gold); }.portfolio h2 { font-size:clamp(40px,5vw,70px); margin:18px 0 0; }.portfolio-heading>p { color:#687382; font-size:14px; line-height:2; }.portfolio-cards { margin-top:78px; padding-top:32px; border-top:1px solid #d8d6cf; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }.portfolio-card { display:block; min-width:0; }.portfolio-cover { aspect-ratio:4 / 5; position:relative; overflow:hidden; background:#ddd7ce; }.portfolio-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 55%,rgba(18,37,62,.42)); pointer-events:none; }.portfolio-cover img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .7s ease; }.portfolio-card:hover .portfolio-cover img { transform:scale(1.04); }.work-status { position:absolute; z-index:1; left:18px; bottom:18px; padding:8px 11px; background:rgba(23,43,71,.82); color:white; font-size:10px; letter-spacing:.14em; backdrop-filter:blur(8px); }.portfolio-cover b { position:absolute; z-index:1; right:15px; top:15px; width:31px; height:31px; display:grid; place-items:center; background:rgba(255,255,255,.9); color:var(--navy); font:11px Georgia,serif; }.portfolio-card-copy { padding:18px 3px 0; }.portfolio-card-copy p { margin:0 0 8px; color:var(--gold); font-size:11px; letter-spacing:.12em; }.portfolio-card-copy h3 { margin:0 0 8px; font:27px "Noto Serif TC",serif; font-weight:500; letter-spacing:.06em; }.portfolio-card-copy span { color:#7b8490; font-size:12px; letter-spacing:.08em; }.portfolio-note { margin-top:34px; color:#999; font-size:11px; }
.case-page { min-height:100vh; background:var(--paper); }.case-header { min-height:92px; padding:0 7vw; display:flex; align-items:center; justify-content:space-between; background:var(--navy-deep); color:white; }.case-brand { display:flex; flex-direction:column; gap:4px; }.case-brand span { font:24px "Noto Serif TC",serif; letter-spacing:.3em; }.case-brand small { font:8px Georgia,serif; letter-spacing:.2em; color:rgba(255,255,255,.56); }.case-back { padding:11px 0; border-bottom:1px solid rgba(255,255,255,.42); font-size:12px; letter-spacing:.1em; }.case-intro { padding:108px 8vw 74px; max-width:920px; }.case-kicker { margin-bottom:18px; color:var(--gold); font:11px Georgia,serif; letter-spacing:.18em; }.case-location { margin-bottom:17px; color:#7b8490; font-size:13px; letter-spacing:.13em; }.case-intro h1 { margin:0; color:var(--navy); font:clamp(44px,6vw,76px)/1.28 "Noto Serif TC",serif; font-weight:500; letter-spacing:.05em; }.case-subtitle { margin:22px 0 30px; color:var(--gold); font-size:16px; letter-spacing:.14em; }.case-summary { max-width:590px; margin:0; color:#687382; font-size:15px; line-height:2.15; letter-spacing:.06em; }.case-gallery { padding:0 8vw 120px; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:260px; gap:14px; }.case-photo { position:relative; overflow:hidden; margin:0; background:#ddd7ce; }.case-photo.featured { grid-column:span 2; grid-row:span 2; }.case-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .7s ease; }.case-photo:hover img { transform:scale(1.02); }.case-photo figcaption { position:absolute; right:15px; top:14px; width:30px; height:30px; display:grid; place-items:center; background:rgba(255,255,255,.9); color:var(--navy); font:11px Georgia,serif; }.case-next { padding:80px 8vw; background:var(--cream); text-align:center; }.case-next p { margin-bottom:22px; color:#6b7480; font-size:14px; letter-spacing:.1em; }.case-next a { display:inline-flex; min-width:210px; align-items:center; justify-content:space-between; padding:17px 20px; background:var(--navy); color:white; font-size:13px; letter-spacing:.12em; }.case-next a span { color:#d4b180; }
.impact { background:#efede7; display:grid; grid-template-columns:minmax(250px,.82fr) minmax(0,2.18fr); column-gap:5vw; row-gap:38px; align-items:start; }.impact .section-label { grid-column:1/-1; width:100%; margin-bottom:2px; }.impact-copy .eyebrow { color:var(--gold); }.impact h2 { font-size:clamp(36px,4vw,56px); margin:24px 0 34px; }.impact-copy>p:last-child { color:#697381; font-size:14px; line-height:2; max-width:420px; }.impact-stories { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:14px; align-content:start; }.impact-story { position:relative; min-width:0; min-height:180px; overflow:hidden; background:var(--navy); box-shadow:0 7px 18px rgba(18,37,62,.055); transition:transform .32s ease, box-shadow .32s ease; }.impact-story::after { content:""; position:absolute; z-index:0; inset:0; background:linear-gradient(180deg,rgba(14,30,48,.02) 28%,rgba(14,30,48,.86) 100%); pointer-events:none; }.impact-story:hover { transform:translateY(-7px); box-shadow:0 16px 30px rgba(18,37,62,.17); }.impact-story img { display:block; width:100%; height:100%; min-height:180px; object-fit:cover; transition:transform .45s ease; }.impact-story:hover img { transform:scale(1.055); }.impact-story>div { position:absolute; z-index:1; right:0; bottom:0; left:0; padding:15px 14px 14px; }.impact-story h3 { margin:0; color:white; font:16px/1.45 "Noto Serif TC",serif; letter-spacing:.04em; text-shadow:0 1px 8px rgba(0,0,0,.15); }.impact-story p { max-height:0; margin:0; overflow:hidden; opacity:0; color:rgba(255,255,255,.82); font-size:10px; line-height:1.7; letter-spacing:.03em; transition:max-height .3s ease, opacity .25s ease, margin-top .3s ease; }.impact-story:hover p { max-height:70px; margin-top:7px; opacity:1; }
.contact { padding:130px 8vw; text-align:center; background:var(--navy); color:white; position:relative; overflow:hidden; }.contact::before { content:""; position:absolute; width:65vw; height:260px; border:1px solid rgba(202,161,107,.28); border-radius:50%; left:17.5vw; top:34%; transform:rotate(-7deg); }.contact>* { position:relative; }.contact-star { color:#cba574; font-size:30px; margin-bottom:25px; }.contact .eyebrow { color:#cba574; }.contact h2 { font-size:clamp(42px,5vw,70px); margin:22px 0 28px; }.contact>p:not(.eyebrow) { color:rgba(255,255,255,.62); font-size:14px; line-height:2; }.contact-actions { display:flex; justify-content:center; gap:12px; margin-top:38px; }.button-outline { border:1px solid rgba(255,255,255,.4); color:white; }.button-outline:hover { border-color:white; }
footer { min-height:150px; background:#12253e; color:white; padding:40px 8vw; display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:30px; border-top:1px solid rgba(255,255,255,.12); }.footer-brand { justify-self:start; }.footer-brand .brand-logo { width:44px; height:44px; }footer>p { margin:0; font-size:11px; letter-spacing:.12em; color:rgba(255,255,255,.45); text-align:center; }footer>div { display:flex; flex-direction:column; align-items:flex-end; gap:10px; font-size:11px; color:rgba(255,255,255,.48); }
@media (max-width:980px){ nav a:not(.nav-cta){display:none}.hero{padding-left:7vw}.hero-lead{white-space:normal}.origin-grid,.principle-grid,.portfolio-heading,.impact{grid-template-columns:1fr}.service-list{grid-template-columns:1fr 1fr}.light-heading{grid-template-columns:1fr}.light-heading>p{justify-self:start;white-space:normal}.light-heading h2 span,.principle h2 span{white-space:normal}.impact .section-label{grid-column:auto}.impact-stories{max-width:760px;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto}.impact-story{min-height:235px}.impact-story img{min-height:235px}.principle-grid{gap:28px}.portfolio-cards{grid-template-columns:repeat(2,1fr)}.case-gallery{grid-template-columns:repeat(2,1fr)}.case-photo.featured{grid-column:1/-1;grid-row:span 2} }
@media (max-width:640px){.site-header{height:78px;padding:0 20px}.brand-copy strong{font-size:17px}.brand-copy small{font-size:7px}.nav-cta{padding:10px 12px;font-size:11px}.hero{min-height:720px;height:92vh;padding:145px 24px 80px}.hero h1{font-size:44px;line-height:1.35}.hero-lead{font-size:14px;white-space:normal}.hero-actions{align-items:flex-start;flex-direction:column;gap:10px}.hero-seal{right:23px;bottom:55px}.hero-index{right:24px;bottom:25px}.hero-orbit{width:520px;right:-320px}.origin,.principle,.portfolio,.impact{padding:85px 24px}.section-label{margin-bottom:50px}.origin-grid{gap:48px}.origin-title h2{font-size:43px}.origin-story blockquote{font-size:18px;margin-top:35px}.services{padding:85px 24px}.light-heading{display:block}.light-heading .section-label{margin-bottom:50px}.light-heading>p{margin-top:28px}.service-list{grid-template-columns:1fr;margin-top:55px}.service-card,.service-card:first-child{min-height:390px;border-left:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18)}.service-en{margin-top:48px}.portfolio-cards{grid-template-columns:1fr;margin-top:55px;gap:36px}.portfolio-cover{aspect-ratio:4/3}.portfolio-card-copy h3{font-size:30px}.case-header{min-height:78px;padding:0 24px}.case-brand span{font-size:20px}.case-back{font-size:11px}.case-intro{padding:78px 24px 54px}.case-intro h1{font-size:43px}.case-subtitle{font-size:14px;line-height:1.8}.case-gallery{padding:0 24px 80px;grid-auto-rows:190px;gap:8px}.case-photo.featured{grid-row:span 2}.case-next{padding:70px 24px}.impact{gap:40px}.impact .section-label{margin-bottom:10px}.impact-stories{grid-template-columns:1fr;gap:12px}.impact-story{min-height:220px}.impact-story img{min-height:220px}.impact-story>div{padding:17px 16px}.impact-story p{max-height:70px;margin-top:7px;opacity:1}.impact-words span{font-size:16px}.contact{padding:100px 24px}.contact h2{font-size:40px}.contact-actions{flex-direction:column;align-items:center}.contact-actions .button{width:230px}footer{grid-template-columns:1fr;text-align:left}footer>p{text-align:left}footer>div{align-items:flex-start}}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}.button,.service-card,.project-photo img,.impact-story,.impact-story img{transition:none}}

/* GitHub Pages static-export additions */
.portfolio-card { border:0; padding:0; background:transparent; color:inherit; text-align:left; font:inherit; cursor:pointer; }
.project-dialog { width:min(1140px,calc(100vw - 34px)); max-height:92vh; padding:0; border:0; background:var(--paper); color:var(--ink); box-shadow:0 24px 80px rgba(12,26,44,.42); }
.project-dialog::backdrop { background:rgba(10,24,43,.78); backdrop-filter:blur(4px); }
#dialogContent { padding:78px 7vw 64px; }
.dialog-close { position:fixed; z-index:5; top:max(18px,calc(50vh - 46vh)); right:max(24px,calc(50vw - 545px)); width:42px; height:42px; border:0; border-radius:50%; background:var(--navy); color:#fff; font:30px/1 Arial,sans-serif; cursor:pointer; box-shadow:0 8px 18px rgba(0,0,0,.18); }
.dialog-gallery { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:230px; gap:12px; margin-top:52px; }
.dialog-photo { position:relative; overflow:hidden; margin:0; background:#ddd7ce; }
.dialog-photo.featured { grid-column:span 2; grid-row:span 2; }
.dialog-photo img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dialog-photo:hover img { transform:scale(1.03); }
.dialog-photo figcaption { position:absolute; top:12px; right:12px; display:grid; width:28px; height:28px; place-items:center; background:rgba(255,255,255,.9); color:var(--navy); font:11px Georgia,serif; }
.dialog-open { overflow:hidden; }
@media (max-width:640px) { #dialogContent { padding:64px 24px 42px; } .dialog-close { position:absolute; top:14px; right:14px; } .dialog-gallery { grid-auto-rows:150px; gap:8px; margin-top:36px; } .dialog-photo.featured { grid-column:1/-1; grid-row:span 2; } }