@import 'tailwindcss';
:root{--ink:#181817;--orange:#f2912a;--paper:#f3f0e9;--line:#d9d4ca}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,"Noto Sans TC",sans-serif}a{color:inherit;text-decoration:none}.shell{width:min(1320px,calc(100% - 64px));margin-inline:auto}.nav{height:92px;display:flex;align-items:center;justify-content:space-between;position:absolute;inset:0 0 auto;z-index:10;color:#fff;border-bottom:1px solid #ffffff30}.brand{display:flex;align-items:center;gap:12px;font-size:15px;font-weight:800;letter-spacing:.09em}.brand small{display:block;margin-top:3px;font-size:7px;letter-spacing:.13em;font-weight:600;opacity:.58}.mark{width:36px;height:36px;display:block;position:relative;transform:rotate(-34deg)}.mark i{position:absolute;inset:4px;border:9px solid currentColor;border-right-color:transparent;border-radius:50%}.mark b{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--orange);right:0;top:1px}.navlinks{display:flex;gap:40px;font-size:13px;letter-spacing:.12em}.navlinks a{opacity:.65}.navCta{border:1px solid #ffffff66;border-radius:50px;padding:12px 17px;font-size:13px}.navCta span{margin-left:18px}
.hero{background:#1c1c1a;color:#fff;min-height:980px;overflow:hidden;position:relative}.heroNoise{position:absolute;inset:0;background:radial-gradient(circle at 78% 28%,#42372b 0,transparent 27%)}.heroInner{position:relative;padding-top:190px}.eyebrow,.sectionLabel{font-size:10px;font-weight:800;letter-spacing:.19em;display:flex;align-items:center;gap:12px}.eyebrow{color:#ffffff85}.eyebrow span{width:28px;height:2px;background:var(--orange)}.hero h1{font-size:clamp(66px,9.4vw,142px);line-height:.91;margin:35px 0 0;letter-spacing:-.065em;font-weight:700}.hero h1 em,.services h2 em,footer h2 em{color:var(--orange);font-style:normal}.heroBottom{display:flex;align-items:flex-end;justify-content:space-between;margin-top:42px}.heroBottom p{margin:0;color:#ffffff99;line-height:1.9;font-size:15px}.circleLink{border:1px solid #ffffff55;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:20px}.reelFrame{height:385px;margin-top:62px;position:relative;overflow:hidden}.reelFrame img{width:100%;height:100%;object-fit:cover;filter:brightness(.68) saturate(.75)}.reelLabel{position:absolute;left:24px;top:22px;font-size:10px;letter-spacing:.18em;display:flex;flex-direction:column;gap:5px}.reelLabel span{opacity:.6}.play{width:88px;height:88px;position:absolute;inset:0;margin:auto;background:var(--orange);border-radius:50%;display:grid;place-items:center;transition:.25s}.play:hover{transform:scale(1.08)}
.about,.works,.team{padding-block:130px}.sectionLabel{border-top:1px solid var(--line);padding-top:16px;color:#77736b}.sectionLabel span{color:var(--orange)}.sectionLabel.light{border-color:#ffffff35;color:#ffffff70}.aboutGrid{display:grid;grid-template-columns:1fr 1fr;gap:100px;margin-top:85px}.aboutGrid h2,.worksHead h2,.teamIntro h2{font-size:clamp(42px,5vw,70px);line-height:1.16;letter-spacing:-.05em;margin:0;font-weight:500}.aboutGrid h2 strong{color:var(--orange)}.aboutCopy{max-width:540px;padding-top:10px}.aboutCopy p{font-size:16px;line-height:2;color:#625f59;margin:0 0 25px}.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:95px;border-block:1px solid var(--line)}.stats div{padding:40px 35px;display:flex;align-items:baseline;gap:18px;border-right:1px solid var(--line)}.stats div:last-child{border:0}.stats strong{font-size:58px;font-weight:500}.stats sup{color:var(--orange);font-size:25px}.stats span{font-size:12px;color:#77736b}
.services{background:#20201e;color:#fff;padding-block:130px}.servicesHead{display:flex;justify-content:space-between;align-items:end;margin:80px 0}.servicesHead h2{font-size:clamp(48px,6vw,84px);line-height:1.08;letter-spacing:-.055em;margin:0}.servicesHead p{color:#ffffff75;line-height:1.8;font-size:14px}.serviceList{border-top:1px solid #ffffff2b}.serviceList article{display:grid;grid-template-columns:80px 1fr 1fr 30px;align-items:center;gap:30px;border-bottom:1px solid #ffffff2b;padding:33px 4px}.serviceList article>span,.serviceList b{color:var(--orange);font-size:11px}.serviceList h3{font-size:25px;margin:0;font-weight:500}.serviceList h3 small{font-size:9px;color:#ffffff55;margin-left:18px;letter-spacing:.14em}.serviceList p{color:#ffffff65;font-size:13px}
.worksHead,.teamIntro{display:flex;align-items:end;justify-content:space-between;margin:80px 0 65px}.worksHead p{font-size:11px;letter-spacing:.22em;color:#77736b}.worksGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:65px 26px}.worksGrid article.wide{grid-column:span 2}.workImage{height:390px;overflow:hidden;position:relative;background:#ddd}.wide .workImage{height:600px}.workImage img{width:100%;height:100%;object-fit:cover;transition:.5s}.workImage span{position:absolute;right:20px;bottom:20px;background:var(--orange);padding:13px 16px;font-size:9px;font-weight:800;opacity:0;transition:.3s}.worksGrid article:hover img{transform:scale(1.035)}.worksGrid article:hover .workImage span{opacity:1}.worksGrid article>div:last-child{display:flex;justify-content:space-between;align-items:end;padding-top:17px}.worksGrid h3{font-size:21px;margin:0}.worksGrid small{font-size:9px;letter-spacing:.15em;color:#77736b}
.team{padding-top:45px}.teamIntro p{width:330px;line-height:1.8;color:#77736b;font-size:14px}.teamGrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}.portrait{height:300px;background:#d8d3c9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.portrait:after{content:"";width:170px;height:220px;border-radius:48% 48% 8% 8%;background:linear-gradient(145deg,#333,#9b6c43);position:absolute;bottom:-45px}.portrait b{z-index:1;font-size:76px;color:#ffffffc9;font-weight:400}.portrait span{position:absolute;left:14px;top:14px;font-size:10px}.teamGrid article:nth-child(2) .portrait{background:#f09a3c}.teamGrid article:nth-child(3) .portrait{background:#bab7ae}.teamGrid article:nth-child(4) .portrait{background:#8b8981}.teamGrid article>small{display:block;color:var(--orange);font-size:10px;letter-spacing:.14em;margin-top:22px}.teamGrid h3{font-size:26px;margin:7px 0 15px}.teamGrid p{font-size:12px;line-height:1.8;color:#77736b}.award{margin-top:100px;padding:32px 0;border-block:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr;gap:10px 50px}.award>span{grid-row:span 3;font-size:10px;color:var(--orange)}.award p{margin:0;font-size:14px;display:flex;justify-content:space-between}.award b{font-weight:500;color:#77736b}
footer{background:#181817;color:#fff;padding-top:120px}.footerTop{display:flex;justify-content:space-between;align-items:end;padding-bottom:100px}.footerTop>div{flex:1}.footerTop h2{font-size:clamp(48px,7vw,96px);letter-spacing:-.06em;line-height:1.02;margin:75px 0 0}.mailCircle{width:190px;height:190px;border-radius:50%;background:var(--orange);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px}.mailCircle span{font-size:11px}.mailCircle b{font-size:30px}.footerBottom{border-top:1px solid #ffffff28;min-height:145px;display:grid;grid-template-columns:1.5fr 1fr 1fr auto;align-items:center;gap:30px;font-size:12px}.footerBottom>div:nth-child(3){display:flex;gap:25px;font-size:9px}.footerBottom>small{font-size:8px;color:#ffffff55}
@media(max-width:800px){.shell{width:min(100% - 34px,1320px)}.nav{height:72px}.navlinks{display:none}.navCta{padding:10px 13px}.hero{min-height:auto}.heroInner{padding-top:145px}.hero h1{font-size:59px}.heroBottom p{font-size:13px}.reelFrame{height:250px}.about,.works,.team,.services{padding-block:85px}.aboutGrid,.servicesHead,.worksHead,.teamIntro{display:block;margin:55px 0}.aboutCopy{margin-top:40px}.stats{grid-template-columns:1fr}.stats div{border-right:0;border-bottom:1px solid var(--line);padding:25px 5px}.serviceList article{grid-template-columns:40px 1fr 20px}.serviceList p{display:none}.serviceList h3 small{display:block;margin:7px 0}.worksGrid{grid-template-columns:1fr}.worksGrid article.wide{grid-column:auto}.workImage,.wide .workImage{height:270px}.teamIntro p{width:auto}.teamGrid{grid-template-columns:1fr 1fr}.portrait{height:220px}.award{grid-template-columns:1fr}.award>span{grid-row:auto}.footerTop{align-items:center}.mailCircle{width:125px;height:125px}.footerBottom{grid-template-columns:1fr 1fr;padding-block:35px}}
@media(max-width:520px){.hero h1{font-size:48px}.circleLink{display:none}.teamGrid{grid-template-columns:1fr}.portrait{height:300px}.footerTop{display:block}.mailCircle{margin-top:40px}.footerBottom{grid-template-columns:1fr}}

/* Full team profiles */
.teamGrid{grid-template-columns:repeat(2,1fr);gap:80px 28px}
.portrait{height:460px;display:block;background:#d8d3c9}
.portrait:after{display:none}
.portrait img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.portrait span{z-index:2;background:#181817;color:#fff;padding:8px 10px}
.teamGrid article:nth-child(n) .portrait{background:#d8d3c9}
.teamGrid h3{font-size:30px;margin:7px 0 10px}
.education{display:block;font-size:12px;font-weight:600;margin-bottom:18px}
.teamGrid p{font-size:13px;line-height:1.9;color:#625f59}
.teamGrid ul{margin:20px 0 0;padding:18px 0 0;list-style:none;border-top:1px solid var(--line)}
.teamGrid li{font-size:12px;line-height:1.65;padding:4px 0 4px 16px;position:relative;color:#4f4c47}
.teamGrid li:before{content:"";width:5px;height:5px;background:var(--orange);position:absolute;left:0;top:11px}
@media(max-width:800px){.teamGrid{grid-template-columns:1fr 1fr;gap:55px 18px}.portrait{height:320px}}
@media(max-width:520px){.teamGrid{grid-template-columns:1fr}.portrait{height:420px}}

/* Light visual system, media players and final brand assets */
body,.hero,.services,footer{background:#e5e6e3;color:#242421}
.heroNoise{background:radial-gradient(circle at 78% 28%,#d1d2ce 0,transparent 31%),linear-gradient(120deg,transparent 50%,#fff3 50%)}
.nav{color:#242421;border-bottom-color:#24242126}
.navCta{border-color:#24242155}
.eyebrow{color:#24242199}
.heroBottom p,.servicesHead p,.serviceList p{color:#4f504c}
.circleLink{border-color:#24242166}
.sectionLabel.light{border-color:#24242130;color:#686964}
.serviceList,.serviceList article{border-color:#24242130}
.serviceList h3 small{color:#686964}
.serviceList article:hover{background:#ffffff45}
.logoImage{display:block;width:175px;height:64px;object-fit:contain;object-position:left center}
.nav .logoImage{width:150px;height:65px}
.footerBottom .logoImage{width:190px}
.reelFrame iframe,.workImage iframe{width:100%;height:100%;border:0;display:block}
.youtubePoster{display:block;width:100%;height:100%}
.youtubePoster img{width:100%;height:100%;object-fit:cover}
.reelLabel{z-index:2;background:#e5e6e3e8;color:#242421;padding:10px 12px;pointer-events:none}
.brands{padding-block:130px}
.brandsHead{display:flex;align-items:end;justify-content:space-between;margin:80px 0 55px}
.brandsHead h2{font-size:clamp(42px,5vw,70px);line-height:1.16;letter-spacing:-.05em;margin:0;font-weight:500}
.brandsHead p{font-size:11px;letter-spacing:.16em;color:#77736b}
.brands>img{display:block;width:100%;height:auto;mix-blend-mode:multiply;border-block:1px solid var(--line);padding-block:30px}
.portrait{height:340px;background:transparent!important}
.portrait img{object-fit:contain;object-position:center center}
.footerBottom{border-top-color:#24242130}
.footerBottom>small{color:#24242188}
.footerTop .sectionLabel{color:#686964}
@media(max-width:800px){.brands{padding-block:85px}.brandsHead{display:block;margin:55px 0 35px}.brandsHead p{margin-top:20px}.portrait{height:260px}.nav .logoImage{width:128px}.footerBottom .logoImage{width:150px}}
@media(max-width:520px){.portrait{height:300px}.hero h1{font-size:48px}.logoImage{height:54px}}

.nav{top:18px}
.portrait{height:390px;overflow:visible}
.portrait img{width:100%;height:100%;object-fit:contain!important;object-position:center!important}
.brands>img{object-fit:contain;background:#fff}
@media(max-width:800px){.nav{top:12px}.portrait{height:320px}}
@media(max-width:520px){.portrait{height:340px}}

/* Keep every team oval fully visible at one consistent scale. */
.portrait{width:min(100%,360px);height:auto;aspect-ratio:2/3;margin-inline:auto;overflow:visible}
.portrait img{display:block;width:100%;height:100%;object-fit:contain!important}
@media(max-width:800px){.portrait{width:min(100%,300px);height:auto}}