@import url('https://fonts.googleapis.com/css2?family=Inter:wght@600;700;800&family=Noto+Sans+TC:wght@400;500;600;700;800&family=Noto+Serif+TC:wght@600;700;800&display=swap');
:root{--bg:#f7f5ea;--ink:#172315;--muted:#6f7465;--green:#566348;--green-dark:#3f4b36;--line:#d6d4c5;--card:#fffef7;--inner:min(1680px,calc(100vw - 120px));}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:'Noto Sans TC',Inter,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}
.site-header{align-items:center;background:rgba(247,245,234,.9);border-bottom:1px solid rgba(23,35,21,.2);display:flex;height:74px;justify-content:space-between;left:0;padding:0 max(42px,calc((100vw - 1680px)/2 + 42px));position:fixed;right:0;top:0;z-index:20;backdrop-filter:blur(14px)}.brand{display:grid;letter-spacing:.03em;line-height:1.05}.brand strong{font-family:Inter,sans-serif;font-size:18px;font-weight:800}.brand span{font-size:14px;font-weight:800}nav{display:flex;gap:48px;font-size:15px;font-weight:800}nav a{padding:27px 0 23px;position:relative}nav a::after{background:var(--green);bottom:17px;content:'';height:2px;left:0;opacity:0;position:absolute;transform:scaleX(.35);transform-origin:left;transition:.25s;width:100%}nav a.active::after,nav a:hover::after{opacity:1;transform:scaleX(1)}
.hero{align-items:center;display:grid;min-height:1120px;overflow:hidden;place-items:center;position:relative;text-align:center}.hero-bg{height:100%;inset:0;object-fit:cover;position:absolute;width:100%;z-index:0}.hero::before{background:radial-gradient(ellipse at 50% 47%,rgba(247,245,234,.84) 0%,rgba(247,245,234,.68) 20%,rgba(247,245,234,.2) 45%,rgba(247,245,234,0) 68%);content:'';inset:0;pointer-events:none;position:absolute;z-index:1}.hero::after{background:linear-gradient(180deg,rgba(247,245,234,.05),rgba(247,245,234,.14) 62%,var(--bg));content:'';inset:0;position:absolute;z-index:1}.hero-copy{display:grid;justify-items:center;margin-top:-80px;max-width:820px;padding:46px 78px;position:relative;z-index:2}.hero-copy::before{background:radial-gradient(ellipse at center,rgba(247,245,234,.92) 0%,rgba(247,245,234,.78) 42%,rgba(247,245,234,.22) 78%,rgba(247,245,234,0) 100%);content:'';filter:blur(10px);inset:-34px -70px;position:absolute;z-index:-1}h1{font-family:'Noto Serif TC',serif;font-size:clamp(52px,5.2vw,104px);font-weight:800;letter-spacing:.02em;line-height:1.13;text-shadow:0 2px 18px rgba(247,245,234,.85)}.hero p{background:rgba(247,245,234,.66);border-radius:999px;color:var(--ink);display:inline-block;font-size:28px;font-weight:800;line-height:1.45;margin:24px 0 34px;padding:10px 26px;backdrop-filter:blur(8px)}.hero-actions{display:flex;gap:16px;justify-content:center}.pill{border:1px solid var(--green);border-radius:999px;display:inline-flex;font-weight:800;justify-content:center;min-height:58px;min-width:166px;padding:17px 32px}.pill.dark{background:var(--green-dark);color:#fff}
.section{border-top:1px solid rgba(23,35,21,.12);margin:0 auto;padding:112px 0;width:var(--inner)}.section-heading{align-items:center;display:grid;gap:14px;justify-items:center;margin-bottom:62px;text-align:center}.section-heading h2,.sub-hero h1{font-family:'Noto Serif TC',serif;font-size:clamp(38px,3.4vw,62px);font-weight:800;line-height:1.2}.section-heading span{background:var(--ink);height:2px;width:42px}.section-heading p{max-width:820px}p{color:var(--muted);font-size:18px;line-height:1.9}h3{font-family:'Noto Serif TC',serif;font-size:28px;line-height:1.25}
.concept-grid{display:grid;gap:36px;grid-template-columns:repeat(3,minmax(0,1fr))}.concept-grid article,.work-card,.values-grid article,.photo-grid article{background:var(--card);border:1px solid rgba(86,99,72,.14);border-radius:12px;box-shadow:0 18px 50px rgba(38,48,33,.08);overflow:hidden}.concept-grid img{height:320px;object-fit:cover;width:100%}.concept-grid div,.work-card div,.values-grid article,.photo-grid div{padding:26px}.brand-story{font-size:22px;margin:62px auto 0;max-width:1040px;text-align:center}
.split-story{align-items:center;display:grid;gap:90px;grid-template-columns:.75fr 1.25fr}.split-story.reverse{grid-template-columns:1.25fr .75fr}.story-list h2{font-family:'Noto Serif TC',serif;font-size:42px;line-height:1.7}.dot-label{font-weight:800;letter-spacing:.08em}.dot-label::before{border:1px solid var(--green);border-radius:999px;content:'';display:inline-block;height:14px;margin-right:10px;vertical-align:-1px;width:14px}.blob-image{display:block;overflow:hidden}.blob-image img{height:520px;object-fit:cover;width:100%}.blob-right img{border-radius:170px 0 170px 0}.blob-left img{border-radius:0 170px 0 170px}
.sub-hero{margin:0 auto;padding:190px 24px 92px;text-align:center;width:var(--inner)}.sub-hero p{color:var(--green);font-family:Inter,sans-serif;font-size:14px;font-weight:800;letter-spacing:.24em;margin-bottom:18px}.sub-hero span{color:var(--muted);display:block;font-size:24px;font-weight:700;margin-top:22px}.narrow-copy{max-width:980px;padding-top:0;text-align:center}.filter-tabs{display:flex;gap:18px;justify-content:center;margin:0 auto 68px;width:var(--inner)}.filter-tabs a{border:1px solid var(--line);border-radius:999px;font-weight:800;padding:14px 26px}.filter-tabs a.active{background:var(--green);color:#fff}
.works-masonry{align-items:stretch;display:grid;gap:36px;grid-template-columns:repeat(2,minmax(0,1fr));margin:0 auto 120px;width:var(--inner)}.work-card{display:grid;grid-template-rows:auto 1fr}.work-card img{aspect-ratio:16/10;height:auto;max-height:520px;object-fit:cover;width:100%}.work-card div{display:flex;flex-direction:column;justify-content:center;min-height:176px}.work-card span{color:var(--green);font-size:14px;font-weight:800}
.photo-band{padding-top:20px}.photo-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.photo-grid img{aspect-ratio:4/3;height:auto;object-fit:cover;width:100%}.photo-grid strong{display:block;font-family:'Noto Serif TC',serif;font-size:24px;margin-bottom:8px}.photo-grid p{font-size:16px;line-height:1.75}
.process-pills{align-items:center;display:flex;gap:18px;justify-content:center}.process-pills a{background:var(--card);border:1px solid var(--green);border-radius:999px;font-size:18px;font-weight:800;padding:18px 30px}.process-pills span{background:var(--green);border-radius:50%;height:6px;width:6px}.logo-grid{display:grid;gap:18px;grid-template-columns:repeat(4,minmax(0,1fr))}.logo-grid span{align-items:center;background:rgba(255,254,247,.72);border:1px solid rgba(86,99,72,.16);border-radius:10px;color:rgba(23,35,21,.54);display:flex;font-family:Inter,sans-serif;font-size:14px;font-weight:800;height:92px;justify-content:center;letter-spacing:.12em}.team-grid{display:grid;gap:28px;grid-template-columns:repeat(3,minmax(0,1fr))}.team-grid article{background:var(--card);border:1px solid rgba(86,99,72,.14);border-radius:18px;padding:32px}.team-grid strong{display:block;font-family:'Noto Serif TC',serif;font-size:28px;margin-bottom:8px}.team-grid span{color:var(--green);font-weight:800}.team-grid p{font-size:16px;margin-top:14px}.consult-cta{align-items:center;background:linear-gradient(135deg,#fffef7,#ece7d8);border:1px solid rgba(86,99,72,.16);border-radius:28px;display:flex;gap:40px;justify-content:space-between;margin:48px auto 0;padding:42px 52px;width:var(--inner)}.consult-cta span{color:var(--green);font-family:Inter,sans-serif;font-size:13px;font-weight:800;letter-spacing:.22em}.consult-cta h2{font-family:'Noto Serif TC',serif;font-size:38px;margin:8px 0 10px}.consult-cta p{max-width:760px}.floating-consult{align-items:center;background:var(--green);border-radius:999px;bottom:28px;box-shadow:0 16px 38px rgba(28,38,24,.22);color:#fff;display:flex;font-weight:800;height:58px;justify-content:center;position:fixed;right:28px;width:88px;z-index:30}
.detail-copy{display:grid;gap:34px;grid-template-columns:repeat(3,minmax(0,1fr));padding-top:30px}.detail-copy div,.service-list article,.process-list article{border-top:1px solid var(--line);padding-top:28px}.detail-copy h2,.service-list h2,.process-list h2,.contact-layout h2,.about-layout h2{font-family:'Noto Serif TC',serif;font-size:34px;line-height:1.4;margin-bottom:16px}
.service-list,.process-list{display:grid;gap:54px;margin:0 auto 120px;width:var(--inner)}.service-list article{align-items:center;display:grid;gap:24px;grid-template-columns:90px .65fr 1fr .7fr 1fr}.service-list span,.process-list span{color:var(--green);font-family:Inter,sans-serif;font-size:26px;font-weight:800}.service-list strong{color:var(--ink);font-size:17px;line-height:1.8}.service-list img{aspect-ratio:16/10;border-radius:14px;object-fit:cover;width:100%}
.about-layout{align-items:center;display:grid;gap:74px;grid-template-columns:1.15fr .85fr}.about-layout img{border-radius:180px 0 180px 0;height:680px;object-fit:cover;width:100%}.values-grid{display:grid;gap:28px;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 auto 120px;width:var(--inner)}.process-list article{display:grid;gap:28px;grid-template-columns:90px .8fr 1.2fr}.contact-layout{display:grid;gap:80px;grid-template-columns:.9fr 1.1fr}.contact-layout ul{color:var(--muted);font-size:20px;line-height:2;list-style:'・ ';padding-left:24px}form{background:var(--card);border:1px solid var(--line);border-radius:24px;display:grid;gap:18px;padding:36px}label{color:var(--muted);display:grid;font-weight:800;gap:10px}input,select,textarea{background:#fff;border:1px solid var(--line);border-radius:14px;color:var(--ink);font:inherit;min-height:54px;padding:13px 16px}textarea{min-height:150px;resize:vertical}button{background:var(--green);border:0;border-radius:999px;color:#fff;cursor:pointer;font:inherit;font-weight:800;min-height:58px}
.site-footer{align-items:center;background:var(--green);color:#fff;display:grid;grid-template-columns:1fr auto 1fr;margin-top:80px;min-height:260px;padding:58px max(42px,calc((100vw - 1680px)/2 + 42px))}.site-footer a,.site-footer span{color:rgba(255,255,255,.84)}.footer-brand{display:grid;font-weight:800;line-height:1.1}.footer-brand strong{font-family:Inter,sans-serif;font-size:20px}.footer-brand span{font-size:16px}.footer-nav{display:flex;gap:34px;font-size:13px;opacity:.76}.footer-contact{display:grid;gap:10px;justify-items:end;text-align:right}.footer-contact strong{font-size:24px;line-height:1.35}
@media(max-width:1100px){:root{--inner:calc(100vw - 48px)}.site-header{height:auto;min-height:74px;position:sticky;top:0;flex-wrap:wrap;padding:18px 24px}nav{gap:20px;overflow:auto;width:100%}.hero{min-height:850px}.concept-grid,.detail-copy,.values-grid,.photo-grid,.logo-grid,.team-grid{grid-template-columns:1fr 1fr}.split-story,.split-story.reverse,.about-layout,.contact-layout{grid-template-columns:1fr}.service-list article,.process-list article{grid-template-columns:1fr}.process-pills{flex-wrap:wrap}.process-pills span{display:none}.consult-cta{align-items:flex-start;flex-direction:column}.site-footer{grid-template-columns:1fr;gap:34px;text-align:left}.footer-contact{justify-items:start;text-align:left}}
@media(max-width:680px){:root{--inner:calc(100vw - 32px)}.site-header{position:relative}.hero{min-height:720px}.hero-copy{max-width:calc(100vw - 40px);padding:34px 20px}.hero-copy::before{inset:-22px -20px}h1{font-size:44px}.hero p{border-radius:22px;font-size:19px;padding:9px 16px}.hero-actions{flex-direction:column;align-items:center}.section{padding:72px 0}.concept-grid,.works-masonry,.detail-copy,.values-grid,.photo-grid,.logo-grid,.team-grid{grid-template-columns:1fr}.work-card img{aspect-ratio:4/3}.blob-image img,.about-layout img{height:360px}.filter-tabs{flex-wrap:wrap}.sub-hero{padding-top:74px}.sub-hero span{font-size:18px}.consult-cta{padding:30px 24px}.consult-cta h2{font-size:30px}.floating-consult{bottom:18px;right:18px}.footer-contact strong{font-size:20px}}