@font-face {
  font-family: Manrope;
  src: url('assets/manrope-variable.ttf') format('truetype');
  font-weight: 200 800;
  font-display: swap;
}
:root { color-scheme: dark; --paper:#f6f6f4; --ground:#121310; --muted:#b5b6af; --line:#ffffff25; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:28px; }
body { margin:0; background:var(--ground); color:var(--paper); font:400 16px/1.5 Manrope,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,select,textarea { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { color:inherit; cursor:pointer; }
button { border:0; background:none; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible { outline:2px solid #f1d8ab; outline-offset:5px; }
button:disabled { cursor:default; opacity:.45; }
svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
h1,h2,h3,p { margin:0; }
h2,h3 { font-weight:400; line-height:1.2; letter-spacing:-.045em; }
h2 { font-size:clamp(25px,2.65vw,40px); }
.sprite { position:absolute; width:0; height:0; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; z-index:20; left:15px; top:15px; padding:12px 20px; background:var(--paper); color:var(--ground); transform:translateY(-150%); }
.skip-link:focus { transform:none; }
.content-width { width:84%; max-width:1420px; margin-inline:auto; }
.hero { position:relative; min-height:720px; height:100svh; max-height:1250px; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.hero-environment { position:absolute; inset:-30px; z-index:-3; transform:scale(1.07); }
.hero-environment img { width:100%; height:100%; object-fit:cover; filter:blur(4px); opacity:.94; }
.hero::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(0deg,#12131040,transparent 30%,transparent 80%,#12131018); }
.mist { position:absolute; inset:0; width:100%; height:100%; z-index:-2; pointer-events:none; opacity:.7; }
.hero-stage { width:min(84%,calc((100svh - 160px)*1.77683)); max-width:min(1550px,var(--hero-native-width,1550px)); position:relative; aspect-ratio:1672/941; box-shadow:0 28px 70px #0005; isolation:isolate; will-change:transform; }
.hero-picture { position:absolute; inset:0; overflow:hidden; container-type:inline-size; background:#353a3b; }
.hero-photo { position:absolute; inset:0; }
.hero-image { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.wordmark { position:absolute; top:9.5%; left:-1.1%; width:100%; font-size:26.2cqw; line-height:.92; font-weight:500; letter-spacing:-.085em; text-align:center; color:#f7f8fa; user-select:none; }
.foreground { pointer-events:none; }
.hero-shade { position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#000a,transparent 25%,transparent 70%,#0007); }
.site-header { position:absolute; inset:20px 28px auto; display:flex; align-items:center; justify-content:space-between; height:44px; z-index:4; }
.brand { display:flex; padding:3px; }
.brand svg { width:43px; height:38px; }
.desktop-nav { display:flex; gap:clamp(22px,4vw,72px); position:absolute; left:50%; transform:translateX(-50%); font-size:13px; white-space:nowrap; }
.desktop-nav a { padding:10px 0; position:relative; }
.desktop-nav a::after { content:''; position:absolute; height:1px; background:currentColor; bottom:5px; left:0; width:100%; transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.desktop-nav a:hover::after { transform:scaleX(1); }
.menu-toggle { display:none; width:44px; height:44px; padding:10px; }
.menu-toggle span { display:block; height:1px; background:currentColor; margin:7px 0; }
.hero-bottom { position:absolute; bottom:28px; left:28px; right:28px; display:grid; grid-template-columns:1fr auto; align-items:end; gap:22px; z-index:3; }
.hero-bottom h1 { font-size:clamp(15px,1.3vw,21px); line-height:1.23; letter-spacing:-.035em; font-weight:400; }
.circle { width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid #ffffff80; flex-shrink:0; transition:background .2s,transform .25s; }
.circle:hover { background:#ffffff25; transform:translateX(2px); }
.split-cta { justify-self:end; display:flex; gap:12px; padding:0; align-items:center; font-size:14px; white-space:nowrap; }
.split-cta > span { min-height:46px; border-radius:30px; color:#171915; background:var(--paper); padding:0 27px; display:flex; align-items:center; justify-content:center; transition:background .2s,transform .25s; }
.split-cta > span:last-child { width:46px; padding:0; }
.split-cta:hover > span { background:#dddeda; }
.split-cta:hover svg { transform:translate(2px,-2px); }
.split-cta svg { transition:transform .25s; }
.house-notes { position:absolute; inset:0; pointer-events:none; z-index:2; }
.house-note { position:absolute; display:flex; align-items:center; gap:9px; padding:8px 13px; border-radius:30px; background:#484a496e; backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); pointer-events:auto; font-size:11px; font-weight:400; text-align:left; line-height:1.3; }
.house-note i { display:block; width:4px; height:4px; border-radius:50%; background:#fff; box-shadow:0 0 0 4px #fff2; flex-shrink:0; }
.glazing { left:46%; top:44%; }
.frame-note { left:72%; top:47%; width:133px; }
.wood { left:37%; top:70%; }
.note-detail { position:absolute; top:calc(100% + 9px); left:0; width:230px; padding:15px; border:1px solid #ffffff25; border-radius:10px; font-size:12px; background:#252a27f2; opacity:0; visibility:hidden; transition:opacity .2s; }
.house-note[aria-expanded="true"] { z-index:3; }
.house-note[aria-expanded="true"] .note-detail { opacity:1; visibility:visible; }
.hero-edge { position:absolute; left:8%; right:8%; bottom:22px; display:flex; justify-content:space-between; align-items:center; color:#fff; font-size:10px; letter-spacing:.015em; text-shadow:0 1px 5px #000; }
.hero-edge > span { opacity:.7; }
.motion-toggle { display:flex; gap:8px; min-height:44px; align-items:center; font-size:11px; padding:6px 0 6px 12px; }
.motion-icon { width:20px; height:20px; display:grid; place-items:center; border:1px solid #ffffff66; border-radius:50%; font-size:9px; }
.intro { display:grid; grid-template-columns:1fr 1fr; gap:6%; padding-block:62px 54px; border-bottom:1px solid #ffffff15; }
.intro p { max-width:600px; font-size:clamp(14px,1.35vw,20px); line-height:1.5; letter-spacing:-.025em; }
.section-heading { padding-block:40px 36px; }
.section-heading p { margin-top:12px; font-size:clamp(14px,1.25vw,19px); color:#d1d2ce; letter-spacing:-.025em; }
.project-list { width:calc(100% - 40px); max-width:1500px; margin-inline:auto; display:grid; gap:6px; }
.project { height:clamp(390px,34vw,470px); position:relative; overflow:hidden; isolation:isolate; background:#252924; }
.project::before { content:''; position:absolute; inset:0; background-image:var(--photo); background-size:cover; background-position:center; z-index:-2; }
.project-photo { position:absolute; top:0; left:44%; height:100%; width:56%; object-fit:cover; object-position:center; z-index:-1; }
.project-panel { width:44%; height:100%; padding:clamp(28px,3vw,42px) clamp(28px,4vw,60px); display:flex; flex-direction:column; align-items:start; background:linear-gradient(120deg,#172119ad,#1d261b8f); backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); border-right:1px solid #ffffff0b; }
.project-panel h3 { font-size:clamp(25px,2.45vw,40px); margin-bottom:18px; }
.project-panel p { font-size:clamp(14px,1.35vw,21px); line-height:1.45; color:#e0e2dd; letter-spacing:-.025em; }
.project-panel ul { padding-left:18px; margin-block:26px 24px; font-size:clamp(12px,1.08vw,17px); line-height:1.9; letter-spacing:-.015em; }
.pill { padding:14px 22px; background:var(--paper); color:#191b17; border-radius:13px; display:inline-flex; gap:18px; justify-content:center; align-items:center; font-size:14px; line-height:1.4; min-height:48px; transition:background .2s; }
.pill:hover { background:#dddfd7; }
.project-panel .pill { margin-top:auto; width:100%; max-width:360px; }
.gallery-open { position:absolute; bottom:30px; right:30px; background:#20252045; backdrop-filter:blur(10px); }
.site-footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding-block:22px 20px; gap:10px 30px; font-size:12px; color:#a5a89f; }
.site-footer > span { justify-self:end; }
.outline-cta { border:1px solid #ffffff70; border-radius:13px; padding:10px 25px; min-width:300px; min-height:44px; color:var(--paper); display:flex; gap:25px; align-items:center; justify-content:space-between; }
.outline-cta:hover { background:#ffffff0c; }
.outline-cta svg { width:18px; }
.concept-note { grid-column:1/-1; text-align:center; font-size:10px; color:#a5a89f; }
.noscript-note { padding:20px; text-align:center; }
dialog { border:1px solid #ffffff25; color:var(--paper); background:#1a1e1c; padding:30px; box-shadow:0 30px 120px #0009; max-height:calc(100svh - 40px); scrollbar-width:thin; }
dialog::backdrop { background:#080c0baa; backdrop-filter:blur(13px); -webkit-backdrop-filter:blur(13px); }
body:has(dialog[open]) { overflow:hidden; }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-bottom:20px; }
.dialog-top > span { font-size:13px; letter-spacing:.06em; }
.dialog-top .circle { width:44px; height:44px; }
.dialog-top h2 { font-size:26px; }
.inquiry-dialog { width:640px; border-radius:18px; padding:28px 36px 36px; }
.inquiry-dialog > h2 { font-size:36px; margin-top:24px; }
.inquiry-intro { margin-block:14px 30px; color:#c2c6be; font-size:15px; }
form label { display:block; margin:18px 0 8px; font-size:12px; }
form label span { color:#9da69b; margin-left:5px; }
input,select,textarea { display:block; width:100%; border:1px solid #ffffff38; border-radius:9px; padding:13px 14px; color:#f6f6f4; background:#ffffff06; font-size:14px; }
option { background:#242a25; }
input::placeholder,textarea::placeholder { color:#9ea59b; opacity:1; }
textarea { resize:vertical; min-height:88px; }
.form-columns { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
.demo-note { margin-block:20px; font-size:12px; line-height:1.6; color:#b2b9ad; }
form .pill { width:100%; }
.form-status { background:#dbe2d60d; border:1px solid #dbe2d62e; padding:15px; border-radius:8px; font-size:13px; margin-top:16px; }
.gallery-dialog { width:min(1200px,94vw); border-radius:12px; padding:20px; }
.gallery-picture { background:#111511; display:grid; place-items:center; }
.gallery-picture img { display:block; max-width:100%; width:auto; height:auto; max-height:65svh; object-fit:contain; }
.gallery-bottom { display:flex; flex-wrap:wrap; gap:18px; justify-content:space-between; align-items:center; padding-top:20px; }
.gallery-switch { display:flex; gap:5px; }
.gallery-switch button { padding:10px 15px; border-radius:8px; border:1px solid transparent; font-size:13px; min-height:44px; }
.gallery-switch button[aria-pressed="true"] { border-color:#ffffff6b; background:#ffffff08; }
.gallery-bottom > p { width:100%; font-size:11px; color:#b5bcb0; }
.menu-dialog { margin:0 auto 0 0; width:min(420px,88vw); height:100svh; max-height:100svh; border:0; border-right:1px solid #ffffff30; border-radius:0; padding:30px; background:#222b239e; backdrop-filter:blur(22px); -webkit-backdrop-filter:blur(22px); }
.menu-dialog nav { display:flex; flex-direction:column; margin-top:65px; }
.menu-dialog nav a { padding-block:18px; border-bottom:1px solid #ffffff30; display:flex; justify-content:space-between; font-size:32px; letter-spacing:-.035em; }
.menu-dialog nav a span { font-size:11px; padding-top:9px; opacity:.65; }
.menu-dialog > p { margin-top:60px; font-size:14px; color:#d9ddd5; }
@keyframes arrive { from { opacity:.2; filter:blur(10px); } to { opacity:1; filter:blur(0); } }
@keyframes photo-reveal { from { opacity:.4; } to { opacity:1; } }
@keyframes panel-reveal { from { opacity:.2; translate:-25px 0; } to { opacity:1; translate:0 0; } }
.motion-enabled .hero-picture { animation:arrive 1.3s ease-out both; }
.motion-enabled .project.revealed .project-photo { animation:photo-reveal 1.1s ease-out both; }
.motion-enabled .project.revealed .project-panel { animation:panel-reveal .85s ease-out both; }
.motion-paused * { animation:none !important; }
@media (min-width:1900px) { .hero-stage { width:min(84%,calc((100svh - 220px)*1.77683)); } }
@media (max-width:1050px) {
  .hero { min-height:650px; max-height:900px; }
  .hero-stage { width:90%; }
  .site-header { inset:12px 20px auto; }
  .desktop-nav { gap:28px; font-size:11px; }
  .hero-bottom { left:20px; right:20px; bottom:20px; gap:12px; }
  .hero-bottom h1 { font-size:14px; }
  .split-cta { gap:7px; font-size:12px; }
  .split-cta > span { padding-inline:18px; min-height:44px; }
  .split-cta > span:last-child { width:44px; }
  .house-note { font-size:9px; padding:6px 9px; }
  .frame-note { width:106px; }
  .house-notes .wood { top:70%; }
  .circle { width:44px; height:44px; }
  .content-width { width:86%; }
  .intro { padding-block:45px; gap:6%; }
  .project { height:410px; }
  .project-panel { padding:32px; width:44%; }
  .project-panel h3 { font-size:27px; }
  .project-panel p { font-size:14px; }
  .project-panel ul { font-size:12px; }
  .project-panel .pill { font-size:12px; padding-inline:14px; }
}
@media (max-width:680px) {
  html { scroll-padding-top:15px; }
  .hero { height:auto; min-height:600px; max-height:none; padding:100px 0 94px; }
  .hero-environment { inset:-25px -40%; }
  .hero-environment img { object-position:54% center; filter:blur(8px); }
  .hero-stage { width:92%; aspect-ratio:auto; background:#222824; }
  .hero-picture { position:relative; aspect-ratio:1672/941; }
  .site-header { inset:5px 10px auto; }
  .brand svg { width:30px; height:28px; }
  .desktop-nav { display:none; }
  .menu-toggle { display:block; }
  .wordmark { top:13%; }
  .hero-bottom { position:relative; inset:auto; display:grid; grid-template-columns:1fr; padding:22px 19px 20px; gap:20px; background:linear-gradient(140deg,#363e3390,#222724); backdrop-filter:blur(16px); }
  .hero-bottom h1 { font-size:21px; max-width:280px; line-height:1.25; }
  .desktop-break { display:none; }
  .split-cta { justify-self:stretch; font-size:14px; gap:9px; }
  .split-cta > span:first-child { flex:1; }
  .house-notes { display:none; }
  .hero-edge { left:6%; right:6%; bottom:20px; justify-content:flex-end; }
  .hero-edge > span { display:none; }
  .intro { grid-template-columns:1fr; gap:22px; padding-block:37px; }
  .intro h2 { font-size:28px; max-width:260px; }
  .intro p { font-size:14px; }
  .section-heading { padding-block:30px; }
  .section-heading h2 { font-size:28px; }
  .section-heading p { font-size:14px; line-height:1.5; max-width:300px; }
  .project-list { width:calc(100% - 20px); gap:14px; }
  .project { height:auto; display:flex; flex-direction:column; overflow:hidden; }
  .project::before { content:''; position:absolute; inset:0; background-image:var(--photo); background-size:auto 100%; background-position:65% center; filter:blur(16px); z-index:-1; }
  .project-photo { position:static; width:100%; height:auto; aspect-ratio:1672/941; object-fit:contain; z-index:0; }
  .project[data-project="aframe"] .project-photo { width:100%; }
  .project-panel { width:100%; height:auto; padding:25px 25px 28px; border:0; background:#202820b5; }
  .project-panel h3 { font-size:28px; margin-bottom:12px; }
  .project-panel p { font-size:14px; }
  .project-panel p br { display:none; }
  .project-panel ul { margin-block:17px 22px; font-size:13px; line-height:1.8; }
  .project-panel .pill { max-width:none; font-size:14px; }
  .gallery-open { top:calc((100vw - 20px)*.562799 - 59px); right:15px; bottom:auto; }
  .site-footer { padding-block:22px; grid-template-columns:1fr 1fr; gap:22px 12px; }
  .site-footer .outline-cta { grid-row:1; grid-column:1/-1; min-width:0; width:100%; font-size:13px; }
  .site-footer > a,.site-footer > span { grid-row:2; }
  .concept-note { text-align:left; font-size:10px; }
  .inquiry-dialog { width:calc(100% - 24px); padding:20px; max-height:calc(100svh - 24px); }
  .inquiry-dialog > h2 { font-size:29px; margin-top:12px; }
  .inquiry-intro { font-size:14px; margin-bottom:20px; }
  .form-columns { grid-template-columns:1fr; gap:0; }
  input,select,textarea { font-size:16px; }
  .gallery-dialog { padding:14px; width:calc(100% - 20px); }
  .dialog-top h2 { font-size:23px; }
  .gallery-switch { width:100%; }
  .gallery-switch button { font-size:12px; flex:1; padding-inline:9px; }
  .gallery-bottom .pill { width:100%; }
}
@media (min-width:681px) and (max-width:1000px) {
  .project-list { width:86%; max-width:800px; gap:20px; }
  .project { height:auto; display:flex; flex-direction:column; }
  .project-photo { position:static; width:100%; height:auto; object-fit:contain; z-index:0; }
  .project-panel { width:100%; height:auto; min-height:285px; padding:28px 32px; display:grid; grid-template-columns:1fr 1fr; align-items:start; column-gap:30px; }
  .project-panel h3 { grid-column:1/-1; }
  .project-panel p { grid-column:1; }
  .project-panel ul { grid-column:2; grid-row:2 / 4; margin:0; font-size:13px; }
  .project-panel .pill { grid-column:1/-1; margin-top:25px; max-width:none; }
  .gallery-open { top:calc(86vw * .562799 - 65px); bottom:auto; right:22px; }
}
@media (max-height:520px) and (min-width:681px) {
  .hero { min-height:520px; }
  .hero-stage { width:78%; }
  .hero-edge { bottom:8px; }
  .house-notes { display:none; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none !important; transition:none !important; }
  .hero-stage,.hero-environment { will-change:auto; }
}