@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--accent:#652b39;--ink:#30272a;--muted:#706368;--paper:#f7f3f1;--line:#ded2d4;--surface:#eee5e5;--gold:#c1a05a;--graphite:#30272a}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:95px}body{margin:0;color:var(--ink);background:var(--paper);font-family:'DM Sans',Arial,sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--accent);outline-offset:6px}.skip{position:fixed;top:-100px;left:20px;padding:15px;background:white;z-index:100}.skip:focus{top:10px}header{height:98px;padding:0 4.5%;display:flex;justify-content:space-between;align-items:center;background:var(--paper);position:relative;z-index:20}.brand{display:flex;align-items:baseline;font-family:'Manrope',sans-serif;font-weight:800;font-size:45px;letter-spacing:-3px;position:relative}.brand span{font:500 11px 'DM Sans',sans-serif;letter-spacing:2.7px;margin-left:13px}.brand i{height:9px;width:9px;background:var(--accent);position:absolute;right:-14px;top:15px}nav{display:flex;gap:34px;align-items:center;font-size:14px}nav>a{padding:12px 0}nav>a:hover{color:var(--accent)}.nav-contact{border-bottom:1px solid var(--ink);margin-left:28px}.nav-contact span{margin-left:25px}.menu-toggle{display:none}.hero{margin:0 20px;min-height:700px;height:calc(100svh - 118px);max-height:1000px;background:#30272a;position:relative;color:white;padding:36px 3.2% 52px;isolation:isolate;overflow:hidden}.hero:before{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(47,23,31,.68),rgba(47,23,31,.04)),linear-gradient(0deg,rgba(47,23,31,.48),transparent 45%);z-index:-1}.hero-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:1.8px}.hero h1{font-family:'Manrope',sans-serif;font-weight:500;font-size:clamp(85px,9.7vw,160px);line-height:1.02;letter-spacing:-7px;margin:95px 0 55px}.hero h1 em{font-style:normal;color:#ebdfcf}.hero-bottom{display:flex;align-items:center;justify-content:space-between;max-width:760px}.hero-bottom p{font-size:20px;line-height:1.55}.round-link{display:flex;align-items:center;gap:30px;font-size:14px}.round-link b{border:1px solid #ffffff77;width:57px;height:57px;border-radius:50%;display:grid;place-items:center;font-size:24px;font-weight:400;transition:.25s}.round-link:hover b{background:white;color:var(--accent);transform:translateY(4px)}.hero-index{position:absolute;right:3.2%;bottom:45px;font-size:12px;letter-spacing:2px}.wrap{padding:115px 6%}.intro{display:grid;grid-template-columns:1fr 2fr;gap:30px}.eyebrow{font-size:12px;letter-spacing:1.7px;font-weight:600;padding-top:14px}h2{font-family:'Manrope',sans-serif;font-size:clamp(34px,4vw,62px);font-weight:500;line-height:1.16;letter-spacing:-2px;margin:0}h2 span{color:var(--muted)}.intro p{font-size:19px;line-height:1.8;max-width:710px;margin:32px 0 0;color:#6b5e63}#mobile-menu{padding:20px 6%;background:var(--paper)}#mobile-menu a{display:block;padding:16px 0;border-bottom:1px solid var(--line)}[hidden]{display:none!important}@media(max-width:760px){header{height:80px;padding:0 6%}.brand{font-size:36px}.brand span{font-size:10px}nav{display:none}.menu-toggle{display:flex;gap:18px;align-items:center;border:0;background:none;padding:12px 0;font-size:14px}.hero{margin:0 10px;min-height:650px;height:calc(100svh - 90px);padding:26px 6% 70px}.hero-top{font-size:10px;line-height:1.6;letter-spacing:1px}.hero-top span:last-child{display:none}.hero h1{font-size:clamp(65px,15.5vw,110px);letter-spacing:-4px;margin-top:115px}.hero-bottom{align-items:flex-start;flex-direction:column;gap:20px}.hero-bottom p{font-size:18px}.hero-index{display:none}.round-link b{width:45px;height:45px}.wrap{padding:75px 7%}.intro{grid-template-columns:1fr;gap:32px}h2{letter-spacing:-1.5px}.intro p{font-size:17px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.hero{background-image:url('assets/architecture.jpg');background-size:cover;background-position:center 52%}
.expertise{background:var(--surface);padding-top:90px}.section-top{display:grid;grid-template-columns:1fr 2fr;gap:30px;margin-bottom:65px}.section-top h2{font-size:clamp(32px,3.1vw,46px)}.services{border-top:1px solid #d2bdc3}.services details{border-bottom:1px solid #d2bdc3;padding:0 0 0 0;transition:background .2s}.services summary{display:grid;grid-template-columns:1fr 2fr 48px;align-items:center;gap:30px;cursor:pointer;list-style:none;padding:28px 0}.services summary::-webkit-details-marker,.credits summary::-webkit-details-marker{display:none}.number{font-size:14px;color:var(--muted)}h3{font-weight:500}.services h3{font:500 clamp(23px,2.5vw,34px)/1.2 'Manrope',sans-serif;letter-spacing:-.7px;margin:0}.plus{width:42px;height:42px;border:1px solid #c4acb4;border-radius:50%;position:relative;transition:.25s}.plus:before,.plus:after{content:'';position:absolute;background:var(--ink);width:14px;height:1px;top:20px;left:13px}.plus:after{transform:rotate(90deg)}details[open] .plus{background:var(--accent);border-color:var(--accent)}details[open] .plus:before{background:white}details[open] .plus:after{display:none}.services details[open] h3,.services summary:hover h3{color:var(--accent)}.service-body{margin-left:calc((100% - 108px)/3 + 30px);padding:0 65px 35px 0;max-width:780px}.service-body p{margin:0 0 25px;font-size:17px;line-height:1.75;color:#6b5e63}.service-body>span{font-size:11px;letter-spacing:.7px;display:inline-block;border:1px solid #d5c4c8;padding:8px 11px;margin:0 5px 7px 0}.vision{height:680px;position:relative;isolation:isolate;color:white;overflow:hidden}.vision>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}.vision:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#2f171fcc,#2f171f38);z-index:-1}.vision-overlay{padding:95px 6%}.vision h2{font-size:clamp(50px,6.8vw,104px);line-height:1.05;margin-top:55px;letter-spacing:-4px}.vision small{position:absolute;bottom:30px;right:6%;font-size:12px}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:75px}.steps article{border-top:1px solid #cebcc2;padding-top:23px}.steps article>span{font-size:12px;letter-spacing:1px;color:var(--accent)}.steps h3{font:500 27px 'Manrope',sans-serif;letter-spacing:-.8px;margin:35px 0 17px}.steps p{font-size:17px;line-height:1.8;color:#6c5e63;margin:0;max-width:350px}.contact{background:var(--accent);color:white;padding-top:55px;padding-bottom:75px}.contact-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1.1px}.contact h2{font-size:clamp(55px,8vw,120px);margin:65px 0 60px;letter-spacing:-5px;line-height:1.08}.contact h2 em{font-style:normal;color:#ead6ab}.contact-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:50px;border-top:1px solid #ffffff50;padding-top:45px}.contact-actions{display:flex;flex-direction:column;align-items:flex-start;gap:17px}.email,.phone{font-size:clamp(23px,3.2vw,42px);letter-spacing:-1px;line-height:1.15}.email{color:#ead6ab}.email span,.phone span{display:inline-block;margin-left:20px;transition:transform .2s}.email:hover span,.phone:hover span{transform:translate(4px,-4px)}.contact h3{font-size:16px;margin:0 0 18px}.contact address{font-style:normal;font-size:16px;line-height:1.8;color:#f8eeed}.map{display:inline-block;margin-top:22px;font-size:14px;border-bottom:1px solid #fff8;padding-bottom:5px}footer{padding:55px 6% 25px}.footer-top{display:flex;align-items:center;justify-content:space-between;gap:45px;padding-bottom:45px}.footer-top p{font-size:13px;color:#6c5e63;max-width:340px;line-height:1.6}.footer-top>a:last-child{font-size:14px}.footer-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;gap:25px;color:#706368;font-size:12px;line-height:1.5}.credits summary{cursor:pointer;list-style:none;text-decoration:underline}.credits a{display:block;margin-top:10px}.hero{animation:hero-in 1s ease-out}.hero h1{animation:title-in 1s ease-out}.services summary:focus-visible{outline-offset:-3px}@keyframes hero-in{from{opacity:.4}to{opacity:1}}@keyframes title-in{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}@media(min-width:1600px){.wrap{padding-left:max(6%,calc((100vw - 1500px)/2));padding-right:max(6%,calc((100vw - 1500px)/2))}}@media(max-width:760px){.section-top{grid-template-columns:1fr;gap:30px;margin-bottom:40px}.services summary{grid-template-columns:28px 1fr 38px;gap:13px;padding:25px 0}.services h3{font-size:23px}.plus{width:36px;height:36px}.plus:before,.plus:after{top:17px;left:10px}.service-body{margin-left:41px;padding:0 0 25px}.service-body p{font-size:16px}.service-body>span{font-size:10px}.vision{height:580px}.vision-overlay{padding:70px 7%}.vision h2{letter-spacing:-2.5px}.steps{grid-template-columns:1fr;gap:40px;margin-top:40px}.steps h3{margin-top:25px}.steps p{max-width:none}.contact-top{align-items:start;gap:25px}.contact-top>span{font-size:10px;max-width:145px;line-height:1.7;padding-top:12px}.contact h2{font-size:clamp(43px,10.5vw,75px);letter-spacing:-2.5px;margin:50px 0}.contact-grid{grid-template-columns:1fr;gap:42px}.email,.phone{font-size:28px}.footer-top{flex-wrap:wrap;gap:25px}.footer-top p{order:3;max-width:100%;margin:0}.footer-bottom{flex-direction:column;gap:14px}.hero:before{background:linear-gradient(90deg,#2f171fb5,#2f171f40),linear-gradient(0deg,#2f171f80,transparent 70%)}.hero{background-position:60% center}}@media(prefers-reduced-motion:reduce){.hero,.hero h1{animation:none}}
.service-body>span,.contact-top,.contact-top>span,.hero-top,.steps article>span,.eyebrow{font-size:12px}.skip:focus{top:10px;left:20px}.hero-top{max-width:100%;gap:20px}

/* SYL architectural identity — burgundy and gold palette */
header{height:112px;border-bottom:1px solid var(--line)}
.brand{letter-spacing:normal;align-items:center;flex-shrink:0;line-height:1}
.brand img{display:block;width:205px;height:74px;object-fit:contain}
.brand i{display:none}
.hero{background-image:none;background-color:var(--graphite);height:calc(100svh - 132px)}
.hero:after{content:'';position:absolute;inset:0;z-index:-2;background:url('assets/architecture.jpg') center 52%/cover;filter:saturate(.34)}
.hero h1{font-weight:400}
.vision>img{filter:saturate(.5)}
.contact{background:#652b39}
.company-name{font-size:14px!important;line-height:1.65!important;letter-spacing:.5px;color:var(--accent)!important;margin-bottom:0!important;max-width:680px!important}
.footer-top p{max-width:420px;color:var(--ink);font-size:13px;letter-spacing:.25px}
@media(max-width:950px){nav{gap:20px}.nav-contact{margin-left:0}.brand img{width:180px}}
@media(max-width:760px){header{height:96px}.brand img{width:180px;height:66px}.hero{height:calc(100svh - 106px)}.hero:after{background-position:60% center}.footer-top .brand img{width:205px;height:74px}.company-name{font-size:13px!important}}

/* Moving project stories */
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;filter:saturate(.55);background:var(--graphite)}
.hero:after{display:none}.hero:before{background:linear-gradient(90deg,rgba(40,21,28,.8),rgba(40,21,28,.2)),linear-gradient(0deg,rgba(40,21,28,.65),transparent 60%)}
.hero-media-controls{position:absolute;bottom:24px;right:3.2%;display:flex;align-items:center;gap:18px;font-size:12px;color:#f8eeed}
.video-toggle{border:1px solid #ffffff80;border-radius:30px;background:#3d202cbb;color:white;padding:12px 18px;cursor:pointer;font-size:14px;min-height:44px}.video-toggle:hover{background:#652b39}.video-toggle:focus-visible{outline-color:white}
.work-films{display:grid;grid-template-columns:1fr 1fr;gap:28px}.film-card{min-width:0}.film-frame{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--graphite)}.film-frame video{display:block;width:100%;height:100%;object-fit:cover}.film-category{position:absolute;top:18px;left:18px;right:18px;pointer-events:none;width:fit-content;max-width:calc(100% - 36px);padding:9px 12px;background:#3d202cdb;color:white;font-size:12px;letter-spacing:1px}.film-caption{padding:24px 0 0}.film-caption h3{font:500 clamp(25px,2.6vw,36px)/1.2 'Manrope',sans-serif;letter-spacing:-.8px;margin:0 0 12px}.film-caption p{font-size:16px;line-height:1.7;color:#6b5e63;margin:0;max-width:440px}.film-note{font-size:13px;line-height:1.7;color:#6b5e63;margin:25px 0 55px;max-width:700px}
.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.3,1)}.motion-ready .reveal.is-visible{opacity:1;transform:none}.steps article:nth-child(2){transition-delay:100ms}.steps article:nth-child(3){transition-delay:200ms}.services summary{transition:padding .25s ease,background .25s ease}.services summary:hover{background:#e8dadd;padding-left:14px}.steps article{transition:border-color .3s,transform .3s}.steps article:hover{border-color:var(--accent)}
nav>a{position:relative}nav>a:after{content:'';position:absolute;bottom:4px;left:0;right:0;height:1px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .25s}nav>a:hover:after{transform:scaleX(1)}
@media(max-width:760px){.work-films{grid-template-columns:1fr;gap:32px}.film-frame{aspect-ratio:16/11}.film-note{margin-bottom:35px}.hero{min-height:730px;padding-bottom:125px}.hero h1{margin-top:85px}.hero-media-controls{left:6%;right:6%;bottom:22px;justify-content:space-between;gap:12px}.hero-media-controls>span{max-width:135px;line-height:1.5}.video-toggle{padding:11px 13px;flex-shrink:0}.film-category{font-size:12px}.services summary:hover{padding-left:0}}
@media(prefers-reduced-motion:reduce){.motion-ready .reveal{opacity:1;transform:none;transition:none}.services summary{transition:none}}

/* Gold foil is a reflective digital finish; the logo carries its own metallic texture. */
:root{--gold-foil:linear-gradient(112deg,#bd9140 0%,#f9e7af 24%,#d3ad62 46%,#ffefba 62%,#c59642 82%,#f4dea0 100%)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){.hero h1 em,.contact h2 em{background-image:var(--gold-foil);background-size:100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}}

.brand img{mix-blend-mode:multiply}