:root{--blue:#354a9e;--ink:#22282c;--paper:#f7f7f2;--line:#d3d5d4}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:110px}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.6 Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}a:focus-visible{outline:3px solid #8da5ff;outline-offset:6px}img{display:block;max-width:100%}header{height:100px;padding:0 5%;display:flex;align-items:center;justify-content:space-between;background:#fff;gap:20px}.brand{display:flex;align-items:center;gap:13px}.brand img{object-fit:contain}.brand>span{font:23px/1.12 Georgia,serif}.brand>span>span{display:block;font-size:17px;margin-top:5px}nav{display:flex;align-items:center;gap:38px;font-size:14px}nav a:hover,.facebook:hover{color:var(--blue)}.nav-contact{padding:12px 0;border-bottom:1px solid var(--blue);display:flex;gap:30px}.hero{height:min(790px,calc(100svh - 100px));min-height:560px;position:relative;isolation:isolate;color:white}.hero-image,.hero-shade{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.hero-image{object-position:50% 43%}.hero-shade{z-index:-1;background:linear-gradient(90deg,rgba(12,24,36,.77),rgba(12,24,36,.2) 85%),linear-gradient(0deg,rgba(10,20,32,.5),transparent 30%)}.hero-content{padding:clamp(65px,9vh,115px) 7% 80px}.eyebrow{text-transform:uppercase;letter-spacing:.15em;font-size:12px;font-weight:600;margin:0 0 32px}.blue{color:var(--blue)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(44px,5.5vw,82px);line-height:1.05;letter-spacing:-.035em;font-weight:500;margin-bottom:30px}h2{font-size:clamp(36px,4.3vw,62px);font-weight:400;line-height:1.12;letter-spacing:-.025em;margin-bottom:30px}h3{font-size:22px;line-height:1.3;font-weight:500;letter-spacing:-.025em}.hero-description{font-size:18px;line-height:1.6;color:#e7e9ee;margin-bottom:34px}.button{display:inline-flex;align-items:center;gap:45px;padding:17px 24px;background:var(--blue);color:#fff;font-size:15px;transition:background .2s,transform .2s}.button:hover{background:#26377e;transform:translateY(-2px)}.button.light{background:#fff;color:#25367e}.button.light:hover{background:#e9ecf5}.hero-bottom{position:absolute;bottom:0;left:7%;right:7%;border-top:1px solid #ffffff50;display:flex;justify-content:space-between;padding:20px 0;font-size:13px}.hero-bottom a{display:flex;gap:20px}.section{padding:100px 7%;scroll-margin-top:15px}.intro{display:grid;grid-template-columns:1fr 1.5fr;gap:70px;border-bottom:1px solid var(--line)}.intro>div{max-width:690px}.intro p:not(.eyebrow){max-width:575px;color:#53595c}.intro p.lead{font-size:22px;color:var(--ink);line-height:1.5}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:60px;margin-bottom:45px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:310px;color:#555e62}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}.service-grid article{border-top:1px solid var(--line);padding-top:25px}.number{display:block;color:var(--blue);font-size:13px;margin-bottom:35px}.service-grid p{color:#555e62;max-width:330px}.work{padding-top:50px;background:#eceeea}/* Equal image frames reserve layout space throughout the reveal animations. */
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 28px;align-items:start}
figure{margin:0;min-width:0}
.gallery figure>a{display:block;position:relative;overflow:hidden;aspect-ratio:4/3}
.gallery img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.gallery-wall img{object-position:center 55%}
.gallery figure>a:hover img{transform:scale(1.025)}
.gallery figcaption{display:flex;flex-direction:column;gap:4px;padding-top:14px;color:#515a5f;font-size:14px;line-height:1.5}
.gallery figcaption span:first-child{color:#22282c;font-size:12px}
.working{background:#293e8b;color:#fff}.working>.eyebrow{color:#d2daff}.working-content{display:grid;grid-template-columns:1.15fr 1fr;gap:70px}.steps article{display:flex;gap:25px;border-top:1px solid #ffffff40;padding:22px 0}.steps article>span{font-size:12px;padding-top:4px;color:#c0ccff}.steps h3{font-size:20px;margin-bottom:10px}.steps p{color:#d9dff2;margin:0;max-width:390px}.contact{display:grid;grid-template-columns:1.2fr 1fr;gap:90px;padding-top:110px;padding-bottom:110px}.contact p{color:#555e62}.contact .button{margin-top:15px}.contact-details>div{border-bottom:1px solid var(--line);padding:0 0 24px;margin-bottom:24px}.contact-details>div>span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#61676a;margin-bottom:10px}.contact-details a:not(.facebook){font-size:clamp(20px,2.1vw,30px);line-height:1.3}.contact-details .email{overflow-wrap:anywhere}.contact-details a:hover{text-decoration:underline}.contact-details p{font-size:20px;margin:0;color:var(--ink)}.facebook{font-size:14px;display:flex;justify-content:space-between}footer{border-top:1px solid var(--line);padding:30px 7%;display:flex;justify-content:space-between;gap:20px;font-size:12px}.skip{position:fixed;top:-100px;left:20px;background:white;padding:12px;z-index:10}.skip:focus{top:10px}@media(min-width:1600px){.section{padding-left:max(7%,calc((100vw - 1400px)/2));padding-right:max(7%,calc((100vw - 1400px)/2))}}@media(max-width:760px){header{height:85px;padding:0 5%}.brand{gap:5px}.brand img{width:55px;height:60px}.brand>span{font-size:17px}.brand>span>span{font-size:13px}nav{gap:0}nav>a:not(.nav-contact){display:none}.nav-contact{font-size:13px;gap:12px}.hero{min-height:570px;height:calc(88svh - 85px);max-height:740px}.hero-content{padding:65px 6% 90px}.hero-image{object-position:60% center}.hero-shade{background:linear-gradient(90deg,#101c2cc9,#101c2c55)}.hero .eyebrow{font-size:12px;max-width:260px;line-height:1.7;margin-bottom:28px}h1{font-size:clamp(38px,8.5vw,62px);letter-spacing:-.045em}.hero-description{font-size:16px;max-width:340px}.hero-bottom{left:6%;right:6%;font-size:12px;gap:15px}.hero-bottom>a{gap:8px}.section{padding:65px 6%}.intro,.working-content,.contact{grid-template-columns:1fr;gap:20px}.intro .eyebrow{margin-bottom:14px}h2{font-size:40px;letter-spacing:-.035em}.intro p.lead{font-size:20px}.section-heading{display:block;margin-bottom:35px}.section-heading>p{margin-top:22px}.service-grid{grid-template-columns:1fr;gap:18px}.service-grid article{position:relative;padding-left:42px}.number{position:absolute;left:0;top:27px}.service-grid h3{margin-bottom:13px}.service-grid p{max-width:none}.gallery{grid-template-columns:minmax(0,1fr);gap:32px}.working-content{gap:15px}.contact{gap:45px}footer{flex-wrap:wrap;padding:25px 6%;gap:14px}footer>span:first-child{flex-basis:100%}.eyebrow{margin-bottom:23px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

/* Architectural motion: finite entrances, cropped photo depth and crisp hover details. */
.hero{overflow:hidden}
.motion-enabled .hero-image{transform:translate3d(0,var(--hero-depth,0px),0) scale(1.08);transform-origin:center center}
.motion-enabled .gallery figure>a{background:var(--blue)}
.button span,.nav-contact span,.hero-bottom a span,.facebook span{display:inline-block;transition:transform .35s cubic-bezier(.22,1,.36,1)}
.button:hover span,.button:focus-visible span,.nav-contact:hover span,.facebook:hover span{transform:translate(3px,-3px)}
.hero-bottom a:hover span{transform:translateY(4px)}
.service-grid article{position:relative}
.service-grid article::after{content:"";position:absolute;top:-1px;left:0;width:100%;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .65s cubic-bezier(.22,1,.36,1)}
.service-grid article:hover::after{transform:scaleX(1)}
.gallery figure>a:focus-visible{outline-offset:4px}
@media(min-width:761px) and (pointer:fine){
  .motion-enabled .gallery figure img{translate:0 var(--photo-depth,0px);scale:1.045}
}
@media(prefers-reduced-motion:reduce){
  .motion-enabled .hero-image,.motion-enabled .gallery figure img{transform:none!important;translate:none!important;scale:1!important}
  .button:hover,.button span,.nav-contact span,.hero-bottom a span,.facebook span,figure a:hover img{transform:none!important}
}

/* Dark sections give project photography and the final enquiry a distinct setting. */
.work{background:#252b30;color:#f7f7f2}
.work .eyebrow,.contact .eyebrow{color:#b1c1ff}
.work .section-heading>p,.work .gallery figcaption{color:#d0d6dc}
.work .gallery figcaption span:first-child{color:#f7f7f2}
.contact{background:#1d242b;color:#f7f7f2}
.contact p{color:#d0d6dc}
.contact-details>div{border-color:#4d5863}
.contact-details>div>span{color:#bdc7d1}
.contact-details p{color:#f7f7f2}
.contact .facebook:hover{color:#b1c1ff}


/* A labelled material study adds a decorative editorial moment outside the project gallery. */
.intro{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(40px,7vw,110px);align-items:center}
.intro .accent{color:var(--blue)}
.intro .intro-art{max-width:520px;width:100%}
.material-study{position:relative}
.art-frame{position:relative;aspect-ratio:4/5;overflow:hidden;background:#e9e9e3}
.art-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.material-study::before{content:"";position:absolute;left:-12px;top:14px;bottom:60px;width:2px;background:var(--blue)}
.material-study figcaption{display:flex;justify-content:space-between;gap:12px;padding-top:14px;font-size:12px;line-height:1.5;color:#53595c}
.material-study figcaption span:first-child{color:var(--blue)}
@media(max-width:760px){
  .intro{grid-template-columns:minmax(0,1fr);gap:40px}
  .intro .intro-art{max-width:none}
  .art-frame{aspect-ratio:5/4}
  .material-study figcaption{font-size:12px;gap:18px}
}

.contact{position:relative;isolation:isolate;overflow:hidden}
.contact-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.contact::before{content:"";position:absolute;inset:0;background:rgba(13,20,30,.75);z-index:-1}
@media(max-width:760px){
  .contact-art{object-position:64% center}
}