:root{--bg:#171817;--surface:#1d1f1e;--text:#f0eee8;--muted:#b0b0a9;--line:#454743;--accent:#df6848;--sans:Arial,Helvetica,sans-serif}
*{box-sizing:border-box}
html{scroll-padding-top:74px}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
img{display:block;width:100%;height:100%;object-fit:cover}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.page-wrap{width:min(1240px,100% - 112px);margin-inline:auto}
.topbar{min-height:74px;padding:0 56px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--bg)}
.wordmark{display:flex;align-items:baseline;gap:13px;font-size:19px;font-weight:700;letter-spacing:-.06em}
.wordmark span{color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0}
.header-controls{display:flex;align-items:center;gap:34px}
.main-nav{display:flex;gap:34px}
.main-nav a{color:var(--muted);font-size:13px}
.main-nav a:hover,.project-foot a:hover,.contact-links a:hover{color:var(--accent)}
.language-switch{display:flex;align-items:center;gap:3px;padding:3px;border:1px solid var(--line)}
.language-switch button{min-width:34px;padding:5px 6px;border:0;background:transparent;color:var(--muted);font-size:10px;cursor:pointer}
.language-switch button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.menu-toggle{display:none}
.hero{min-height:670px;padding-top:100px;padding-bottom:66px;display:grid;grid-template-columns:1fr .83fr;column-gap:9%;align-items:center;position:relative;border-bottom:1px solid var(--line)}
.hero-copy{max-width:720px;z-index:1}
.hero-kicker{max-width:460px;margin:0 0 34px;color:var(--muted);font-size:17px;line-height:1.5}
.hero h1{margin:0;font-size:clamp(64px,8vw,112px);font-weight:700;line-height:.98;letter-spacing:-.075em}
.hero h1 span{color:var(--accent)}
.hero-lower{max-width:540px;margin-top:35px;display:flex;align-items:end;justify-content:space-between;gap:25px}
.hero-lower p{max-width:340px;margin:0;color:var(--muted);font-size:14px;line-height:1.75}
.hero-link{flex:none;padding-bottom:4px;border-bottom:1px solid var(--accent);font-size:13px}
.hero-link span{padding-left:14px;color:var(--accent)}
.hero-art{height:430px;position:relative;display:block;overflow:hidden;background:var(--surface)}
.hero-art img{object-position:center 24%;filter:brightness(.9) saturate(.86)}
.hero-art span{position:absolute;left:0;bottom:0;padding:11px 15px;background:var(--bg);font-size:12px}
.hero-bottom{position:absolute;right:0;bottom:20px;left:0;display:flex;justify-content:space-between;color:#999a94;font-size:11px}
.work-section{padding:112px 0 130px;background:#1b1c1b}
.section-heading{margin-bottom:62px;display:flex;justify-content:space-between;align-items:end;gap:50px}
.section-heading h2,.about-wrap h2{margin:0;font-size:clamp(42px,6vw,74px);letter-spacing:-.065em;line-height:1}
.section-heading p{max-width:390px;margin:0;color:var(--muted);font-size:14px;line-height:1.7}
.project-list{display:grid;gap:100px}
.project{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(330px,.8fr);gap:clamp(42px,7vw,95px);align-items:center}
.project-reverse{grid-template-columns:minmax(330px,.8fr) minmax(0,1.12fr)}
.project-reverse .project-visual{grid-column:2;grid-row:1}
.project-reverse .project-copy{grid-column:1;grid-row:1}
.project-visual{height:auto;aspect-ratio:1.43;display:block;overflow:hidden;background:#282a28}
.project-visual img{object-position:center 24%;filter:brightness(.88) saturate(.82)}
.project:nth-child(2) .project-visual img{object-position:center 12%}
.project:nth-child(3) .project-visual img{object-position:center 55%}
.project:nth-child(4) .project-visual img{object-position:center 22%}
.project-copy{min-width:0}
.project-title span,.project-detail span{color:#b4b4ac;font-size:12px}
.project-title h3{margin:8px 0 19px;font-size:clamp(32px,4vw,50px);font-weight:600;line-height:1.03;letter-spacing:-.06em;overflow-wrap:anywhere}
.project-copy>p{max-width:480px;margin:0 0 24px;color:#d1d0ca;font-size:14px;line-height:1.75}
.project-detail{padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.project-detail p{margin:5px 0 0;color:var(--muted);font-size:13px;line-height:1.7}
.project-foot{margin-top:17px;display:flex;justify-content:space-between;align-items:baseline;gap:18px;color:#aaa9a2;font-size:11px}
.project-foot a{flex:none;color:var(--text);font-size:12px}
.about-section{padding:112px 0 120px;border-top:1px solid var(--line)}
.about-wrap{display:grid;grid-template-columns:.75fr 1fr;gap:12%;align-items:start}
.about-wrap h2{max-width:340px}
.about-lead{max-width:650px;margin:0 0 38px;font-size:20px;line-height:1.55;letter-spacing:-.02em}
.about-lines{border-top:1px solid var(--line)}
.about-lines p{margin:0;padding:15px 0;display:grid;grid-template-columns:135px 1fr;gap:20px;border-bottom:1px solid var(--line);color:var(--muted);font-size:13px;line-height:1.6}
.about-lines span{color:var(--text)}
.tools-line{margin:24px 0 0;color:#aaa9a2;font-size:12px}
.contact-section{padding:84px 0 0;background:#292a27}
.contact-wrap{display:grid;grid-template-columns:1fr auto;column-gap:60px;align-items:end}
.contact-wrap h2{grid-column:1/-1;margin:0;font-size:clamp(56px,9vw,112px);font-weight:600;line-height:.98;letter-spacing:-.075em}
.contact-wrap>p{max-width:340px;margin:29px 0 55px;color:#cac9c2;font-size:14px}
.contact-links{display:flex;gap:26px;margin-bottom:55px}
.contact-links a{padding-bottom:4px;border-bottom:1px solid #777871;font-size:13px}
.footer-line{grid-column:1/-1;min-height:55px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #555650;color:#b2b1aa;font-size:11px}
.footer-line a:hover{color:var(--accent)}
@media(max-width:900px){
  .page-wrap{width:calc(100% - 64px)}
  .topbar{padding-inline:32px}
  .hero{grid-template-columns:1fr .72fr;gap:5%;min-height:610px;padding-top:80px}
  .hero h1{font-size:clamp(62px,8.3vw,84px)}
  .hero-art{height:370px}
  .project,.project-reverse{grid-template-columns:minmax(0,1fr) minmax(270px,.9fr);gap:42px}
  .project-reverse{grid-template-columns:minmax(270px,.9fr) minmax(0,1fr)}
  .project-foot{flex-direction:column;gap:8px}
}
@media(max-width:640px){
  html{scroll-padding-top:64px}
  .page-wrap{width:calc(100% - 36px)}
  .topbar{min-height:64px;padding:0 18px;position:relative}
  .wordmark{font-size:17px}.wordmark span{font-size:11px}
  .header-controls{gap:10px}
  .menu-toggle{width:40px;height:40px;padding:10px;display:block;border:1px solid var(--line);background:transparent}
  .menu-toggle span{display:block;width:18px;height:1px;margin:6px 0;background:var(--text)}
  .main-nav{position:absolute;z-index:4;top:63px;right:0;left:0;display:flex;flex-direction:column;gap:0;padding:0 18px;background:var(--bg);border-bottom:1px solid var(--line);visibility:hidden;opacity:0;pointer-events:none}
  .main-nav.is-open{visibility:visible;opacity:1;pointer-events:auto}
  .main-nav a{padding:13px 0;border-top:1px solid var(--line);font-size:13px}
  .hero{min-height:0;padding-top:65px;padding-bottom:72px;display:flex;flex-direction:column;align-items:stretch;gap:38px}
  .hero-kicker{max-width:360px;margin-bottom:25px;font-size:15px}
  .hero h1{font-size:clamp(54px,13.8vw,78px);line-height:1.02}
  .hero-lower{margin-top:25px;display:flex;align-items:flex-start;flex-direction:column;gap:19px}
  .hero-lower p{font-size:13px}
  .hero-link{font-size:12px}
  .hero-art{height:auto;aspect-ratio:1.12}
  .hero-bottom{bottom:18px;gap:15px;font-size:10px}
  .work-section{padding:75px 0 84px}
  .section-heading{margin-bottom:38px;align-items:flex-start;flex-direction:column;gap:15px}
  .section-heading h2,.about-wrap h2{font-size:52px}
  .section-heading p{font-size:13px}
  .project-list{gap:66px}
  .project,.project-reverse{display:flex;flex-direction:column;align-items:stretch;gap:21px}
  .project-visual{aspect-ratio:1.16}
  .project-copy>p{font-size:13px}
  .project-title h3{font-size:38px}
  .project-foot{align-items:flex-start;font-size:10px}
  .project-foot a{font-size:12px}
  .about-section{padding:78px 0 82px}
  .about-wrap{grid-template-columns:1fr;gap:30px}
  .about-lead{font-size:17px}
  .about-lines p{grid-template-columns:100px 1fr;gap:14px;font-size:12px}
  .contact-section{padding-top:70px}
  .contact-wrap{display:block}
  .contact-wrap h2{font-size:clamp(58px,15vw,88px)}
  .contact-wrap>p{margin:23px 0 28px;font-size:13px}
  .contact-links{margin-bottom:40px;gap:20px}
  .footer-line{min-height:58px;gap:14px;font-size:10px}
}