@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
    :root { --ink:#181919; --paper:#f2f1ec; --paper-2:#e7e6df; --yellow:#f2d500; --white:#fbfbf7; --muted:#777973; --line:rgba(24,25,25,.14); --ease:cubic-bezier(.32,.72,0,1); }
    * { box-sizing:border-box; } html { scroll-behavior:smooth; background:var(--paper); }
    body { margin:0; overflow-x:hidden; color:var(--ink); background:var(--paper); font-family:'Manrope',system-ui,sans-serif; -webkit-font-smoothing:antialiased; }
    a { color:inherit; text-decoration:none; } button { font:inherit; -webkit-tap-highlight-color:transparent; } img { display:block; max-width:100%; } ::selection { color:var(--ink); background:var(--yellow); }
    .mono { font-family:'DM Mono',monospace; font-size:11px; letter-spacing:.12em; text-transform:uppercase; } .wrap { width:min(1280px,calc(100% - 80px)); margin:0 auto; }
    .noise { position:fixed; inset:0; z-index:20; pointer-events:none; opacity:.026; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
    .nav-shell { position:fixed; z-index:10; top:18px; left:0; right:0; pointer-events:none; }
    .nav { width:min(1280px,calc(100% - 48px)); margin:0 auto; padding:14px 12px 14px 22px; display:flex; align-items:center; justify-content:space-between; color:var(--white); background:rgba(20,21,21,.78); border:1px solid rgba(255,255,255,.15); border-radius:999px; pointer-events:auto; backdrop-filter:blur(18px); box-shadow:0 10px 35px rgba(0,0,0,.16); }
    .brand { display:flex; align-items:center; gap:14px; } .brand img { width:140px; } .brand small { padding-left:14px; border-left:1px solid rgba(255,255,255,.27); color:rgba(255,255,255,.64); font-size:10px; letter-spacing:.08em; }
    .nav-links { display:flex; align-items:center; gap:28px; color:rgba(255,255,255,.73); font-size:13px; } .nav-links a { transition:color .5s var(--ease); } .nav-links a:hover { color:var(--yellow); }
    .menu-toggle { display:none; color:var(--white); border:0; background:transparent; cursor:pointer; } .menu-toggle span { display:block; width:22px; height:1px; margin:5px 0; background:currentColor; transition:transform .5s var(--ease); } .menu-toggle.active span:first-child { transform:translateY(3px) rotate(45deg); } .menu-toggle.active span:last-child { transform:translateY(-3px) rotate(-45deg); }
    .hero { position:relative; display:flex; align-items:flex-end; min-height:810px; overflow:hidden; color:var(--white); background:var(--ink); } .hero::after { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,rgba(17,18,18,.9) 0%,rgba(17,18,18,.4) 38%,rgba(17,18,18,0) 100%),linear-gradient(0deg,rgba(17,18,18,.55),transparent 48%); }
    .hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; filter:grayscale(.82) contrast(1.1); } .hero-content { position:relative; z-index:2; padding-bottom:78px; }
    .hero-topline { display:flex; align-items:center; justify-content:space-between; margin-bottom:30px; color:rgba(255,255,255,.65); } .hero-topline strong { color:var(--yellow); font-weight:500; }
    .hero h1 { max-width:870px; margin:0; font-size:clamp(4rem,9.5vw,9.8rem); font-weight:800; line-height:.88; letter-spacing:-.075em; } .hero h1 em,.work-copy h2 em,.contact h2 em { color:var(--yellow); font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.08em; }
    .hero-bottom { display:grid; grid-template-columns:1fr 1fr; gap:80px; max-width:720px; margin-top:42px; align-items:end; } .hero-bottom p { max-width:420px; margin:0; color:rgba(255,255,255,.78); font-size:15px; line-height:1.8; }
    .btn { display:inline-flex; align-items:center; justify-content:space-between; gap:22px; min-width:170px; padding:7px 8px 7px 18px; border:1px solid transparent; border-radius:999px; transition:transform .55s var(--ease),background-color .55s var(--ease); } .btn:hover { transform:translateY(-3px); } .btn .arrow { position:relative; width:34px; height:34px; border-radius:50%; background:var(--ink); transition:transform .55s var(--ease); } .btn .arrow::after { content:""; position:absolute; width:9px; height:9px; top:11px; left:10px; border-top:1.5px solid var(--yellow); border-right:1.5px solid var(--yellow); transform:rotate(45deg); } .btn:hover .arrow { transform:translate(3px,-2px); } .btn-primary { color:var(--ink); background:var(--yellow); }
    .scroll-note { position:absolute; right:0; bottom:80px; z-index:2; color:rgba(255,255,255,.62); writing-mode:vertical-rl; transform:rotate(180deg); } section { padding:145px 0; }
    .eyebrow { display:flex; align-items:center; gap:10px; color:var(--muted); } .eyebrow::before { content:""; width:28px; height:1px; background:currentColor; }
    .intro { display:grid; grid-template-columns:1.05fr .95fr; gap:10vw; align-items:end; border-bottom:1px solid var(--line); } .intro h2,.section-head h2 { margin:18px 0 0; font-size:clamp(3.2rem,6vw,6.6rem); font-weight:700; line-height:.96; letter-spacing:-.075em; } .intro h2 span,.section-head h2 span { color:var(--muted); } .intro-copy { padding-bottom:7px; } .intro-copy p { max-width:450px; margin:0; color:#50524e; font-size:16px; line-height:1.9; }
    .text-link { display:inline-flex; align-items:center; gap:10px; margin-top:30px; padding-bottom:8px; border-bottom:1px solid var(--ink); font-size:14px; font-weight:700; } .text-link::after { content:""; width:14px; height:14px; border-top:1.5px solid currentColor; border-right:1.5px solid currentColor; transform:rotate(45deg); }
    .service { position:relative; overflow:hidden; color:var(--white); background:var(--ink); } .service::before { content:"K"; position:absolute; top:-100px; right:2vw; color:rgba(255,255,255,.035); font-family:Manrope,sans-serif; font-size:47vw; font-weight:800; line-height:1; }
    .section-head { position:relative; z-index:1; display:flex; align-items:end; justify-content:space-between; margin-bottom:82px; } .section-head .eyebrow { color:rgba(255,255,255,.56); } .section-head h2 { color:var(--white); } .section-head p { max-width:310px; margin:0; color:rgba(255,255,255,.57); font-size:14px; line-height:1.8; }
    .service-grid { position:relative; z-index:1; display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid rgba(255,255,255,.18); } .service-card { min-height:300px; padding:26px 24px 28px 0; border-right:1px solid rgba(255,255,255,.18); transition:background-color .5s var(--ease),padding .5s var(--ease); } .service-card:not(:first-child) { padding-left:24px; } .service-card:last-child { border-right:0; } .service-card:hover { padding-top:35px; background:rgba(242,213,0,.05); } .service-num { color:var(--yellow); }
    .service-mark { width:50px; height:50px; display:grid; place-items:center; margin:63px 0 24px; color:var(--yellow); border:1px solid rgba(242,213,0,.55); transform:rotate(45deg); font-size:17px; } .service-mark span { transform:rotate(-45deg); } .service-card h3 { margin:0 0 11px; font-size:20px; letter-spacing:-.04em; } .service-card p { max-width:230px; margin:0; color:rgba(255,255,255,.57); font-size:13px; line-height:1.75; }
    .work { background:var(--paper-2); } .work-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:7vw; align-items:center; } .work-photo { position:relative; aspect-ratio:1.42; overflow:hidden; background:var(--ink); } .work-photo img { width:100%; height:100%; object-fit:cover; filter:grayscale(.5) contrast(1.06); transition:filter .9s var(--ease),transform .9s var(--ease); } .work-photo:hover img { filter:grayscale(.12) contrast(1.02); transform:scale(1.035); } .work-photo::after { content:"KAPON · GUANGZHOU"; position:absolute; right:16px; bottom:14px; color:rgba(255,255,255,.72); font-family:"DM Mono",monospace; font-size:10px; letter-spacing:.1em; }
    .work-copy h2 { max-width:620px; margin:19px 0 27px; font-size:clamp(3rem,6vw,6.7rem); line-height:.9; letter-spacing:-.085em; } .work-copy h2 em { color:#a18d00; } .work-copy p { max-width:450px; margin:0; color:#5d5f5a; font-size:16px; line-height:1.9; } .work-list { display:grid; grid-template-columns:1fr 1fr; gap:12px 36px; margin-top:40px; padding-top:18px; border-top:1px solid var(--line); } .work-list div { color:#555752; font-size:13px; line-height:1.7; } .work-list strong { display:block; margin-bottom:3px; color:var(--ink); font-size:14px; }
    .contact { position:relative; overflow:hidden; color:var(--white); background:var(--ink); } .contact::after { content:""; position:absolute; width:540px; height:540px; right:-210px; top:-190px; border:1px solid rgba(242,213,0,.26); border-radius:50%; box-shadow:0 0 0 65px rgba(242,213,0,.04),0 0 0 130px rgba(242,213,0,.025); } .contact-head { position:relative; z-index:1; display:flex; justify-content:space-between; align-items:end; margin-bottom:68px; } .contact .eyebrow { color:rgba(255,255,255,.56); } .contact h2 { max-width:700px; margin:18px 0 0; font-size:clamp(3.5rem,7vw,7.8rem); line-height:.86; letter-spacing:-.085em; } .contact-head p { max-width:310px; margin:0; color:rgba(255,255,255,.57); font-size:14px; line-height:1.8; }
    .contact-grid { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1fr; gap:16px; } .contact-card { min-height:170px; padding:22px 22px 24px; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.025); display:flex; flex-direction:column; } .contact-card h3 { display:flex; align-items:center; gap:10px; margin:0; color:var(--yellow); font-family:"DM Mono",monospace; font-size:11px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; } .contact-card h3 svg { width:14px; height:14px; flex-shrink:0; } .contact-card p { max-width:420px; margin:18px 0 0; color:rgba(255,255,255,.64); font-size:14px; line-height:1.8; } .contact-card a { color:var(--white); } .contact-card a:hover { color:var(--yellow); } .contact-card .channel-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:var(--yellow); color:var(--ink); margin-top:auto; align-self:flex-start; transition:transform .4s var(--ease); } .contact-card a:hover .channel-icon { transform:translate(2px,-2px); } .contact-card .channel-icon svg { width:17px; height:17px; }
    .contact-value { width:auto; max-width:280px; height:auto; margin-top:18px; background:var(--yellow); } .address { grid-column:span 2; min-height:auto; padding:18px 22px 20px; } .address p { max-width:none; margin-top:10px; font-size:12.5px; line-height:1.55; letter-spacing:-.005em; white-space:nowrap; }
    .warehouse { grid-column:span 2; min-height:auto; padding:18px 22px 22px; border-top:1px dashed rgba(242,213,0,.22); } .warehouse-head { margin-top:8px; } .warehouse-head p { max-width:none; margin-top:10px; font-size:13.5px; line-height:1.6; color:rgba(255,255,255,.7); }
    footer { padding:22px 0 24px; color:rgba(255,255,255,.58); background:#2c2e2d; font-size:11px; } footer .wrap { display:flex; align-items:center; justify-content:space-between; gap:24px; } footer strong { color:var(--white); letter-spacing:.08em; } .credit-row { width:min(1280px,calc(100% - 80px)); margin:8px auto 0; padding-top:9px; border-top:1px solid rgba(255,255,255,.06); display:flex; justify-content:flex-start; } .credit { color:rgba(255,255,255,.42); font-size:10px; letter-spacing:.04em; text-decoration:none; transition:color .4s var(--ease); } .credit:hover { color:var(--yellow); } .credit .mono { margin-right:8px; color:rgba(255,255,255,.5); }
    .reveal { opacity:1; transform:none; }
    @keyframes settle { from { opacity:0; transform:scale(1.08); } to { opacity:1; transform:scale(1.025); } }
    @media (max-width:760px) { .wrap { width:min(100% - 40px,1280px); } .nav { width:calc(100% - 32px); padding:10px 14px 10px 18px; } .brand img { width:110px; } .brand small { display:none; } .nav-links { position:absolute; top:calc(100% + 10px); right:0; display:none; width:190px; padding:15px; border:1px solid rgba(255,255,255,.15); border-radius:8px; background:rgba(20,21,21,.95); } .nav-links.open { display:grid; gap:16px; } .menu-toggle { display:block; } .hero { min-height:760px; } .hero-image { object-position:58% 35%; } .hero-content { padding-bottom:58px; } .hero-topline span:last-child,.scroll-note { display:none; } .hero h1 { font-size:clamp(3.75rem,17vw,5.4rem); line-height:.93; } .hero-bottom { display:block; margin-top:34px; } .hero-bottom p { font-size:14px; } .hero-bottom .btn { margin-top:27px; } section { padding:90px 0; } .intro,.work-grid { grid-template-columns:1fr; gap:46px; } .intro h2,.section-head h2 { font-size:clamp(3rem,14vw,4.8rem); } .section-head,.contact-head { display:block; margin-bottom:50px; } .section-head p,.contact-head p { margin-top:24px; } .service-grid { grid-template-columns:1fr 1fr; } .service-card,.service-card:not(:first-child) { min-height:255px; padding:20px 15px 20px 0; } .service-card:nth-child(2n) { padding-left:15px; border-right:0; } .service-mark { margin:48px 0 22px; } .work-copy h2 { font-size:clamp(3rem,14vw,5.5rem); } .contact h2 { font-size:clamp(3.6rem,16vw,6rem); } .contact-grid { grid-template-columns:1fr; } .contact-card { min-height:140px; } .address { grid-column:auto; } footer .wrap { display:block; } footer span { display:block; margin-top:8px; } }