@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:#242221; --slate:#62636a; --paper:#f7f6f3; --orange:#f47919; --line:#dedcd7; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Manrope,Arial,sans-serif; }
a { color:inherit; text-decoration:none; }
.shell { max-width:1440px; margin:auto; padding:0 42px; }
header { height:104px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.logo { width:242px; height:auto; display:block; }
.header-contact { display:flex; align-items:center; gap:26px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.phone { color:var(--slate); }
.header-contact .button { background:var(--orange); color:white; padding:15px 18px; }
.hero { display:grid; grid-template-columns:1.03fr .97fr; min-height:calc(100vh - 104px); }
.hero-copy { padding:clamp(75px,10vw,162px) clamp(30px,7vw,110px) 64px 0; display:flex; flex-direction:column; align-items:flex-start; }
.eyebrow { font-family:'DM Mono',monospace; color:var(--orange); font-size:11px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; margin:0 0 25px; }
h1 { max-width:720px; margin:0; font-size:clamp(43px,5vw,79px); letter-spacing:-.065em; line-height:.98; font-weight:800; }
.lede { max-width:465px; color:var(--slate); font-size:18px; line-height:1.65; margin:34px 0 42px; }
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; }
.hero-actions a { padding:16px 20px; font-size:12px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; border:1px solid var(--ink); }
.hero-actions a:first-child { background:var(--ink); color:white; }
.hero-meta { margin-top:auto; padding-top:80px; font-family:'DM Mono',monospace; font-size:11px; line-height:1.6; color:var(--slate); }
.hero-image { position:relative; min-height:590px; overflow:hidden; background:#dad9d4; }
.hero-slide { position:absolute; inset:0; opacity:0; transform:scale(1.035); transition:opacity 1.1s ease, transform 6.5s ease; }
.hero-slide.active { opacity:1; transform:scale(1); }
.hero-slide img { height:100%; width:100%; object-fit:cover; object-position:center; display:block; }
.image-note { position:absolute; right:24px; bottom:23px; color:white; background:rgba(36,34,33,.86); padding:11px 13px; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.07em; text-transform:uppercase; z-index:2; }
.image-counter { position:absolute; left:24px; bottom:25px; z-index:2; color:white; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.08em; }
.services { border-top:1px solid var(--line); border-bottom:1px solid var(--line); display:grid; grid-template-columns:repeat(4,1fr); }
.service { min-height:185px; padding:30px 24px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:space-between; transition:background .25s ease,color .25s ease; }
.service:hover { background:var(--ink); color:white; }
.service:last-child { border:0; }
.service-number { font-family:'DM Mono',monospace; color:var(--orange); font-size:11px; }
.service h3 { margin:40px 0 0; font-size:23px; line-height:1.15; letter-spacing:-.045em; }
.service-arrow { margin-top:18px; color:var(--orange); font-family:'DM Mono',monospace; font-size:15px; }
.works { padding:136px 0; }
.section-top { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:37px; }
.section-top h2 { font-size:clamp(31px,4vw,51px); letter-spacing:-.06em; margin:0; }
.section-top p { color:var(--slate); font-family:'DM Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.09em; }
.project-grid { display:grid; grid-template-columns:1.18fr .82fr; gap:22px; align-items:stretch; }
figure { margin:0; }
figure img { display:block; width:100%; height:100%; object-fit:cover; }
/* The feature panel fills the combined height of the two stacked projects,
   while its caption remains part of the same aligned panel. */
.primary-project { display:grid; grid-template-rows:minmax(0,1fr) auto; }
.primary-project img { height:100%; min-height:0; }
.side-projects { display:grid; gap:22px; grid-template-rows:1fr 1fr; }
.side-projects img { height:279px; }
figcaption { display:flex; justify-content:space-between; gap:14px; margin-top:12px; color:var(--slate); font-family:'DM Mono',monospace; font-size:10px; text-transform:uppercase; letter-spacing:.08em; }
.coming { background:var(--ink); color:white; padding:clamp(70px,10vw,140px) 0; }
.coming .shell { display:grid; grid-template-columns:1.25fr .75fr; gap:60px; }
.coming h2 { max-width: 700px; font-size:clamp(44px,5.6vw,80px); letter-spacing:-.065em; line-height:.95; margin:0; }
.coming h2 em { font-style:normal; color:var(--orange); }
.coming-copy { align-self:end; }
.coming-copy p { color:#d2d0cb; line-height:1.65; margin:0 0 31px; max-width:340px; }
.contact-links { display:grid; gap:13px; font-size:18px; font-weight:700; letter-spacing:-.035em; }
.contact-links a { text-decoration:underline; text-decoration-color:var(--orange); text-underline-offset:7px; }
footer { background:var(--ink); color:#a8a6a1; border-top:1px solid #454340; padding:24px 0; font-family:'DM Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; }
footer .shell { display:flex; justify-content:space-between; gap:22px; }

img.footer_logo {
    max-width: 450px;
    width: 100%;
    margin-bottom: 40px;
}

@media (max-width:800px) {
  .shell { padding:0 22px; } header { height:83px; } .logo { width:180px; } .header-contact .phone { display:none; } .header-contact .button { padding:12px; font-size:10px; }
  .hero { display:flex; flex-direction:column; } .hero-copy { padding:68px 0 60px; } .hero-meta { margin-top:58px; padding:0; } .hero-image { min-height:425px; }
  .services { grid-template-columns:1fr; } .service { min-height:136px; border-right:0; border-bottom:1px solid var(--line); } .service:last-child { border-bottom:0; }
  .works { padding:78px 0; } .section-top { display:block; } .section-top p { margin-top:12px; } .project-grid { grid-template-columns:1fr; } .primary-project img { height:440px; } .side-projects { grid-template-columns:1fr 1fr; grid-template-rows:1fr; } .side-projects img { height:185px; }
  .coming .shell { grid-template-columns:1fr; gap:40px; } footer .shell { flex-direction:column; }
}
@media (prefers-reduced-motion:reduce) { .hero-slide { transition:none; } }