:root{--green:#87bf53;--acid:#87bf53;--ink:#202220;--paper:#f2f2ef;--line:#c9cbc7}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:16px}
a{color:inherit;text-decoration:none}
.topbar{height:112px;display:flex;align-items:center;padding:0 3.5vw;justify-content:space-between;background:#fff;position:relative;z-index:10;border-bottom:4px solid var(--acid)}
.brand{display:block;height:92px;overflow:hidden}
.brand img{display:block;height:100%;width:auto}
.topbar nav{display:flex;gap:2.2rem;font-size:.88rem}
.topbar nav a{position:relative}
.topbar nav a:after{content:"";height:2px;left:0;right:100%;bottom:-7px;background:var(--acid);position:absolute;transition:.3s}
.topbar nav a:hover:after{right:0}
.menu{display:none;border:0;background:none;font:inherit}
.hero{height:calc(100vh - 112px);min-height:610px;position:relative;overflow:hidden;color:#fff}
.hero>img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) contrast(1.04)}
.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.58),rgba(0,0,0,.05) 68%)}
.hero-copy{position:absolute;z-index:2;left:7vw;top:50%;transform:translateY(-45%)}
.eyebrow,.section-label{text-transform:uppercase;letter-spacing:.16em;font-size:.71rem}
.hero h1{font-family:"Manrope",sans-serif;font-size:clamp(2.9rem,6vw,6.5rem);letter-spacing:-.055em;line-height:.98;font-weight:400;margin:1.3rem 0 2.4rem}
.arrow-link{display:inline-flex;gap:2rem;align-items:center;border-bottom:2px solid var(--acid);padding-bottom:.6rem}
.arrow-link span{font-size:1.3rem;color:var(--acid)}
.place{position:absolute;z-index:2;right:3.5vw;bottom:2rem;font-size:.75rem;letter-spacing:.13em;text-transform:uppercase}
.motto-intro{display:flex;align-items:center;justify-content:center;gap:clamp(.8rem,2.2vw,2.6rem);padding:2.3rem 3.5vw;background:var(--green);color:#182016;text-transform:uppercase;letter-spacing:.075em;border-bottom:1px solid rgba(24,32,22,.25)}
.motto-intro p{font:500 clamp(.88rem,1.45vw,1.35rem) "Manrope",sans-serif;margin:0}
.motto-intro span{font-size:1.2rem;opacity:.55}
.intro,.services,.contact{padding:10rem 7vw;display:grid;grid-template-columns:1fr 3fr;gap:3rem;border-bottom:1px solid var(--line)}
.intro>div{max-width:960px}
.intro h2,.contact h2{font-family:"Manrope",sans-serif;font-size:clamp(2.2rem,4.2vw,4.8rem);line-height:1.06;letter-spacing:-.045em;font-weight:400;margin:0 0 2.3rem}
.intro>div>p{max-width:630px;margin-left:auto;font-size:1.15rem;line-height:1.75;color:#595c59}
.studio-team{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.2vw;margin-top:6rem}
.studio-team figure{margin:0}
.studio-team img{display:block;width:100%;height:auto;filter:grayscale(1);background:#e1e2dd}
.studio-team figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-top:1px solid var(--ink);margin-top:1rem;padding-top:1rem}
.studio-team figcaption strong{font:500 1.08rem "Manrope",sans-serif}
.studio-team figcaption span{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:#707672}
.projects{padding:8rem 3.5vw}
.section-head{display:flex;justify-content:space-between;margin:0 3.5vw 3rem}
.section-head>p:last-child{font-size:.78rem;color:#6e746f}
.project-selector{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2vw;margin:0 3.5vw 7rem;padding-bottom:4rem;border-bottom:1px solid var(--line)}
.project-card{appearance:none;border:0;border-top:1px solid var(--line);padding:1rem 0 0;background:transparent;color:inherit;text-align:left;cursor:pointer;font:inherit;opacity:.62;transition:opacity .3s}
.project-card:hover,.project-card:focus-visible,.project-card.is-active{opacity:1}
.project-card:focus-visible{outline:2px solid var(--green);outline-offset:5px}
.project-card-image{display:block;position:relative;aspect-ratio:16/9;overflow:hidden;background:#dfe1dc}
.project-card-image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.project-card:hover .project-card-image img{transform:scale(1.025)}
.project-card-copy{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding-top:1rem}
.project-card-copy strong{font:500 1.1rem "Manrope",sans-serif}
.project-card-copy small{font-size:.72rem;color:#707672}
.project-detail{margin:0 3.5vw}
.project-panel[hidden]{display:none}
.project-cover{margin:0;position:relative;background:#dfe1dc;overflow:hidden}
.project-cover img{display:block;width:100%;height:auto;transition:transform .7s ease}
.project-cover:hover img{transform:scale(1.012)}
.project-heading{display:grid;grid-template-columns:1.3fr 2fr;gap:5vw;border-top:1px solid var(--ink);margin-top:1.2rem;padding-top:1.6rem}
.project-kicker{font-size:.73rem;letter-spacing:.13em;text-transform:uppercase;color:#68706b;margin:0 0 .7rem}
.project-heading h3{font:400 clamp(2.7rem,5vw,5.5rem) "Manrope",sans-serif;letter-spacing:-.05em;line-height:1;margin:0}
.project-heading dl{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin:0}
.project-heading dl div{border-top:1px solid var(--line);padding-top:.8rem}
.project-heading dt{text-transform:uppercase;letter-spacing:.13em;font-size:.66rem;color:#777d79}
.project-heading dd{margin:.45rem 0 0;font-size:.95rem}
.project-description{font:300 clamp(1.35rem,2.3vw,2.4rem)/1.45 "Manrope",sans-serif;max-width:1050px;margin:7rem 0 7rem auto;letter-spacing:-.025em}
.project-gallery{display:grid;grid-template-columns:repeat(12,1fr);gap:1.4vw;align-items:start}
.project-gallery figure{margin:0;grid-column:span 6;background:#dfe1dc;overflow:hidden}
.project-gallery figure.wide{grid-column:span 12}
.project-gallery figure.portrait{grid-column:span 4}
.project-gallery img{display:block;width:100%;height:auto;transition:transform .6s ease}
.project-gallery figure:hover img{transform:scale(1.015)}
.services{background:#e8e9e2}
.service-list>div{display:grid;grid-template-columns:70px 1fr 1fr;gap:1.5rem;border-top:1px solid #9ea39e;padding:2rem 0}
.service-list span{display:block;width:14px;height:14px;border-radius:50%;background:var(--green);margin-top:.25rem}
.service-list h3{font:500 1.2rem "Manrope";margin:0}
.service-list p{color:#5f6762;line-height:1.6;margin:0}
.contact{background:var(--green);color:#182016;border-top:8px solid #202220}
.contact-content{min-width:0}
.contact-grid{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(360px,1.2fr);gap:5vw;align-items:stretch}
.contact-details{display:flex;flex-direction:column;justify-content:space-between;gap:1.6rem}
.contact-details>div{border-top:1px solid rgba(24,32,22,.35);padding-top:.85rem}
.contact-details>div>span{display:block;text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;color:#33452b;margin-bottom:.55rem}
.contact-details a{display:inline-block;font:400 1.08rem/1.5 "Manrope",sans-serif;border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.contact-details a:hover,.contact-details a:focus-visible{color:#10160e;border-color:#10160e}
.contact-details b{font-weight:400;color:#26351f}
.socials p{display:flex;gap:.8rem;margin:0}
.socials p a{display:grid;place-items:center;width:46px;height:46px;border:1px solid rgba(24,32,22,.55);border-radius:50%;transition:background .25s,border-color .25s,color .25s}
.socials p a:hover,.socials p a:focus-visible{background:#202220;border-color:#202220;color:#fff}
.socials svg{width:22px;height:22px;fill:currentColor}
.socials svg rect,.socials svg circle{fill:none;stroke:currentColor;stroke-width:1.8}
.socials svg .fill-dot{fill:currentColor;stroke:none}
.contact-map{min-height:440px;background:#252825}
.contact-map iframe{display:block;width:100%;height:100%;min-height:440px;border:0;filter:grayscale(1) contrast(.92)}
.contact-form-wrap{grid-column:1/-1;display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;border-top:1px solid rgba(24,32,22,.35);margin-top:2rem;padding-top:4rem}
.contact-form-heading p{text-transform:uppercase;letter-spacing:.14em;font-size:.66rem;margin:0 0 .8rem;color:#33452b}
.contact-form-heading h3{font:400 clamp(1.8rem,3vw,3.2rem)/1.12 "Manrope",sans-serif;letter-spacing:-.035em;margin:0;max-width:370px}
.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem 1.4rem}
.contact-form label{display:block}
.contact-form label>span{display:block;text-transform:uppercase;letter-spacing:.11em;font-size:.65rem;margin-bottom:.55rem;color:#33452b}
.contact-form input:not([type="checkbox"]),.contact-form textarea{width:100%;border:0;border-bottom:1px solid rgba(24,32,22,.55);border-radius:0;background:transparent;color:#182016;font:400 1rem "DM Sans",sans-serif;padding:.65rem 0;outline:none}
.contact-form textarea{resize:vertical;min-height:130px}
.contact-form input:focus,.contact-form textarea:focus{border-color:#10160e}
.message-field,.privacy-field,.contact-form button,.form-status{grid-column:1/-1}
.privacy-field{display:flex!important;align-items:flex-start;gap:.75rem}
.privacy-field input{width:18px;height:18px;flex:0 0 auto;margin:.1rem 0 0;accent-color:#202220}
.privacy-field>span{font-size:.72rem!important;line-height:1.5;text-transform:none!important;letter-spacing:0!important;margin:0!important;color:#26351f!important}
.contact-form button{justify-self:start;border:0;background:#202220;color:#fff;font:500 1rem "Manrope",sans-serif;padding:1rem 1.25rem;cursor:pointer;transition:background .25s,color .25s}
.contact-form button:hover,.contact-form button:focus-visible{background:#fff;color:#202220}
.contact-form button span{margin-left:1.5rem;color:var(--green)}
.form-honey{position:absolute!important;left:-9999px!important}
.form-status{margin:0;padding:1rem;border:1px solid rgba(24,32,22,.4);font-size:.9rem}
footer{background:#1d201e;color:#e1e1df;font-size:.75rem}
.footer-motto{background:#fff;width:100%;overflow:hidden}
.footer-motto img{display:block;width:100%;height:auto}
.footer-bottom{display:flex;justify-content:space-between;align-items:end;padding:2.2rem 3.5vw}
.footer-bottom>p{margin:0}
@media(min-width:761px) and (max-width:1100px){
  .project-selector{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .topbar{height:88px;padding:0 5vw}
  .brand{height:70px}
  .menu{display:block}
  .topbar nav{display:none;position:absolute;top:88px;left:0;right:0;background:#fff;padding:2rem 5vw;flex-direction:column;border-top:1px solid var(--line)}
  .topbar nav.open{display:flex}
  .hero{height:78vh;min-height:560px}
  .hero-copy{left:7vw;right:5vw}
  .hero h1{font-size:clamp(2.7rem,13vw,4.6rem)}
  .motto-intro{align-items:flex-start;flex-direction:column;gap:.55rem;padding:1.7rem 6vw}
  .motto-intro span{display:none}
  .intro,.services,.contact{padding:7rem 6vw;grid-template-columns:1fr;gap:2rem}
  .intro>div>p{margin-left:0}
  .studio-team{grid-template-columns:1fr;gap:3.5rem;margin-top:4rem}
  .projects{padding:6rem 5vw}
  .section-head{margin:0 0 2rem;align-items:end}
  .section-head>p:last-child{display:none}
  .project-selector{grid-template-columns:1fr;margin:0 0 4.5rem;padding-bottom:3rem;gap:2.5rem}
  .project-card-copy{display:block}
  .project-card-copy small{display:block;margin-top:.35rem}
  .project-detail{margin:0}
  .project-heading{grid-template-columns:1fr;gap:2.5rem}
  .project-heading dl{grid-template-columns:1fr 1fr;gap:1.3rem}
  .project-description{margin:4.5rem 0;font-size:1.35rem}
  .project-gallery{grid-template-columns:1fr;gap:4vw}
  .project-gallery figure,.project-gallery figure.wide,.project-gallery figure.portrait{grid-column:auto}
  .service-list>div{grid-template-columns:38px 1fr}
  .service-list p{grid-column:2}
  .contact-grid{grid-template-columns:1fr;gap:3.5rem}
  .contact-map,.contact-map iframe{min-height:360px}
  .contact-form-wrap{grid-template-columns:1fr;gap:2.5rem;margin-top:0;padding-top:3rem}
  .contact-form{grid-template-columns:1fr}
  .message-field,.privacy-field,.contact-form button,.form-status{grid-column:auto}
  .footer-motto img{width:100%;max-width:100%;height:auto;transform:none}
  .footer-bottom{display:flex;flex-wrap:wrap;align-items:flex-start;padding:2rem 5vw;gap:1.2rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}