:root{
  --artboard:#E6E6E6;
  --panel:#F7F7F5;
  --ink:#111111;
  --line:#DEDEDE;
  --overlay:rgba(0,0,0,.35);

  --radius:10px;
  --shadow:0 10px 30px rgba(0,0,0,.05);
  --easing:cubic-bezier(.4,0,.2,1);

  --tiny:12px;
  --gap:18px;

  --info-bg:#FAFAFA;
  --content-w:1180px;
  --rail-w:56px;
  --drawer-w:300px;

  --contact-bg:#3b3b3b;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:400 14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  color:var(--ink);
  background:var(--artboard);
  -webkit-font-smoothing:antialiased;
}
.no-scroll{height:100vh;overflow:hidden}

.frame{ position:relative; max-width:100vw; margin:0; background:#fff; border:0; border-radius:0; overflow:hidden; box-shadow:none; }

.rail{ position:absolute; inset:0 auto 0 0; width:var(--rail-w); background:var(--panel); border-right:1px solid var(--line); display:flex; flex-direction:column; align-items:center; transition:width 350ms var(--easing), border-right 0ms linear 350ms; z-index:80; }
.logo-btn{ margin-top:12px; background:none; border:0; cursor:pointer; font-weight:800; font-size:22px; color:var(--ink) !important; }
.menu-vertical{ margin-top:26px; background:transparent; border:0; cursor:pointer; writing-mode:vertical-rl; transform:rotate(180deg); font-size:11px; letter-spacing:.25em; text-transform:uppercase; color:rgba(0,0,0,.75); }
.logo-btn:focus-visible,.menu-vertical:focus-visible,.navlink:focus-visible,.close-btn:focus-visible,.contact-btn:focus-visible{outline:2px solid #0003; outline-offset:2px}
.rail-deco{margin-top:auto; margin-bottom:8px; width:26px; height:18px; display:grid; gap:4px}
.rail-deco i{width:22px;height:2px;background:#bbb;display:block}
.menu-open .rail{ width:var(--drawer-w); border-right:none; }
.menu-open .drawer{ border-right:none; background:var(--panel); }

.content{padding-left:var(--rail-w)}
.view[hidden]{display:none !important}

.full-bleed{ width:100vw; margin-left:0; }

.hero{ position:relative; height:100vh; height:100dvh; min-height:100svh; overflow:hidden; }
.hero img{width:100%;height:100%;object-fit:cover;display:block}
.hero-title{position:absolute; top:16px; left:18px; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); font-size:14px;}
.hero-cta{ position:absolute; right:18px; bottom:18px; color:#fff; text-decoration:underline; text-underline-offset:2px; }
.hero-dashes{position:absolute; left:120px; bottom:110px; display:flex; gap:16px}
.hero-dashes i{width:36px;height:3px;background:#fff;display:block}
.hero-mini{position:absolute; left:18px; bottom:18px; display:grid; gap:6px}
.hero-mini i{width:22px;height:2px;background:#fff;display:block}

.projects-bar{ padding:10px 18px 0; }
.projects-label{ font-size:var(--tiny);letter-spacing:.12em;text-transform:uppercase;opacity:.8 }
.projects-rule{ height:1px; background:var(--line); margin:8px 0 16px; }

.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; padding:0 18px 18px; }
.card{display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; aspect-ratio:16/9; background:#ddd}
.card img{width:100%;height:100%;object-fit:cover;display:block}
.card-wrap{display:flex;flex-direction:column;gap:8px}
.proj-link{ align-self:flex-start; text-decoration:underline; text-underline-offset:2px; color:inherit; }

.projects-pair{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:0 18px 24px; }
.promo{ position:relative; border:1px solid var(--line); border-radius:8px; overflow:hidden; background:#ccc; aspect-ratio:16/6; display:block; color:#fff; }
.promo img{width:100%;height:100%;object-fit:cover;display:block}
.promo-text{ position:absolute; left:18px; right:18px; bottom:18px; line-height:1.45; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,.45); display:flex; align-items:center; justify-content:space-between; gap:12px; }
.promo-title{font-weight:600}
.promo-sub{opacity:.95}
.promo-arrow{ width:34px;height:34px;border-radius:50%;border:1px solid #fff;display:grid;place-items:center;flex:0 0 34px; }
.promo-arrow::after{content:"↗";font-size:18px;line-height:1}
.feature-img{ display:block; border:1px solid var(--line); border-radius:8px; overflow:hidden; aspect-ratio:16/6; background:#ddd; }
.feature-img img{width:100%;height:100%;object-fit:cover;display:block}

.about-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:18px; background:var(--panel); border-bottom:1px solid var(--line); }
.about-img{ width:100%; aspect-ratio:3/4; border:1px solid var(--line); background:#ddd; object-fit:cover; display:block; }
.about-block{margin:0 0 24px}
.about-block h4{margin:0 0 6px; font-size:18px}
.about-block p{margin:0; color:#333}
.about-wide{ border-top:1px solid var(--line); padding:18px; }
.about-wide .wide-img{ width:100%; aspect-ratio:16/5; border:1px solid var(--line); background:#ccc; object-fit:cover; display:block; }

.services-wrap{ display:grid; grid-template-columns:1fr 1fr; gap:24px; padding:18px; background:var(--panel); border-bottom:1px solid var(--line); }
.svc-stack{ display:grid; gap:18px; }
.svc-img{ width:100%; aspect-ratio:16/9; border:1px solid var(--line); background:#d6d0c9; object-fit:cover; display:block; }
.svc-block{ padding:0 0 18px; border-bottom:1px solid var(--line); }
.svc-block:last-child{ border-bottom:none; padding-bottom:0; }
.svc-block h4{ margin:0 0 6px; font-size:18px; }
.svc-block p{ margin:0; color:#333; }

.info{ background:var(--info-bg); border-top:1px solid var(--line); padding:18px; display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.tiny{font-size:var(--tiny);letter-spacing:.12em;text-transform:uppercase;color:#666;margin-bottom:10px}
.info p{margin:10px 0 12px; max-width:60ch}
.social{font-size:var(--tiny);letter-spacing:.18em;text-transform:uppercase}
.newsletter h4{margin:0 0 10px; font-size:var(--tiny); letter-spacing:.12em; text-transform:uppercase}
.field{display:flex; align-items:center; gap:8px; margin:2px 0 12px}
.input-underline{ appearance:none; border:none; outline:none; border-bottom:1px solid var(--line); padding:6px 2px; width:240px; background:transparent; font:inherit; color:inherit; }
.checkbox{display:flex;align-items:flex-start;gap:10px;margin:8px 0}
.checkbox input{margin-top:2px}
.subscribe-btn{ margin-top:12px; padding:8px 18px; font-size:13px; font-weight:600; color:var(--ink); background:transparent; border:1px solid var(--line); border-radius:4px; cursor:pointer; transition:background .25s var(--easing), color .25s var(--easing); }
.subscribe-btn:hover{ background:var(--ink); color:#fff; }

.overlay{ position:fixed; inset:0; background:var(--overlay); opacity:0; pointer-events:none; transition:opacity 250ms var(--easing); z-index:60; }
.overlay.show{opacity:1; pointer-events:auto}

.drawer{ position:absolute; top:0; left:0; bottom:0; width:var(--drawer-w); max-width:85vw; background:var(--panel); border-right:1px solid var(--line); transform:translateX(-100%); transition:transform 350ms var(--easing); z-index:90; display:flex; flex-direction:column; outline:0; }
.drawer.open{transform:translateX(0)}
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:16px 14px;gap:12px}
.drawer-title{font-weight:800;font-size:18px;margin:0}
.close-btn{ width:36px;height:36px;border-radius:50%;border:1px solid var(--line); background:#fff;cursor:pointer;display:grid;place-items:center;font-size:18px;line-height:1; }
.drawer-nav{padding:6px 8px 10px}
.navlink{ display:block; padding:10px 10px; border-radius:6px; color:var(--ink); text-decoration:none; }
.navlink:visited,.navlink:focus,.navlink:active{color:var(--ink)}
.navlink:hover{background:#00000008}
.navlink[aria-current="page"]{text-decoration:underline; text-underline-offset:3px}
.divider{display:grid;place-items:center;padding:10px 0}
.divider::before{content:"";width:28px;height:1px;background:#DEDEDE;display:block}
.contact-btn{ display:block; width:100%; text-align:left; background:none; border:0; padding:10px 14px; cursor:pointer; font:inherit; color:inherit; }
.drawer-footer{margin-top:auto;padding:14px;border-top:1px solid var(--line);font-size:12px;color:#666}
.cities{font-size:var(--tiny);letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}

.contact-banner{ position:absolute; top:0; right:0; left:var(--rail-w); background:var(--contact-bg); color:#f5f5f5; transform:translateY(-100%); transition:transform 350ms var(--easing), left 350ms var(--easing); z-index:85; padding:28px 32px; border-bottom:1px solid #4a4a4a; }
.menu-open .contact-banner{ left:var(--drawer-w); }
.contact-open .contact-banner{ transform:translateY(0); }

.contact-grid{ display:grid; grid-template-columns:1fr 1fr; gap:36px; align-items:start; }
.contact-col h5{ margin:0 0 12px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#dcdcdc; }
.contact-col p{ margin:6px 0 14px; line-height:1.7; }
.contact-col a{ color:#fff; text-decoration:underline; text-underline-offset:2px; }
.contact-news{ border-left:1px solid #5e5e5e; padding-left:28px; }
.contact-news .input-underline{ border-bottom-color:#7a7a7a; color:#fff; }
.contact-news .checkbox{ margin:10px 0; }
.contact-news .checkbox span{ color:#e9e9e9; }
.contact-news .subscribe-btn{ border-color:#7a7a7a; color:#fff; margin-top:16px; }
.contact-news .subscribe-btn:hover{ background:#fff; color:#000; }

@media (max-width: 768px){
  .logo-btn{ font-size:28px; color:var(--ink) !important; }
  .gallery{ grid-template-columns:1fr; gap:18px; padding:0 14px 18px; }
  .card{ aspect-ratio:16/9; border-radius:12px; }
  .proj-link{ font-size:16px; }
}