:root{--paper:#f6f4ef;--ink:#262a25;--muted:#74786e;--line:#d9d9cf;--olive:#464b3d}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}header{height:105px;padding:12px 4.5%;display:flex;align-items:center;justify-content:space-between;background:#fff}.brand{width:86px;height:82px}.brand img{width:100%;height:100%;object-fit:contain}nav{display:flex;gap:38px;font-size:14px}.header-contact{font-size:13px;border-bottom:1px solid var(--ink);padding:10px 0}.header-contact span{margin-left:30px}.hero{height:min(780px,80vw);min-height:590px;position:relative;color:white;margin:0 18px}.hero-img,.hero-shade{position:absolute;width:100%;height:100%;object-fit:cover}.hero-img{object-position:center 56%}.hero-shade{background:linear-gradient(90deg,rgba(17,24,18,.68),rgba(17,24,18,.12)),linear-gradient(0deg,rgba(0,0,0,.25),transparent 30%)}.hero-content{position:relative;padding:100px 5% 80px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;margin:0 0 24px}h1,h2,h3,p{margin-top:0}h1{font-family:Georgia,serif;font-size:clamp(48px,5.7vw,88px);font-weight:400;line-height:1.06;letter-spacing:-3px;margin-bottom:28px}em{font-family:Georgia,serif;font-weight:400}h1 em{color:#e1dfd0}.hero-intro{font-size:15px;line-height:1.8;color:#f0eee7;margin-bottom:32px}.button{display:inline-flex;justify-content:space-between;align-items:center;gap:48px;font-size:13px;padding:16px 23px;border:1px solid}.light{background:var(--paper);color:var(--ink);border-color:var(--paper)}.button:hover{background:#deded1}.hero-bottom{position:absolute;bottom:28px;left:5%;right:5%;display:flex;justify-content:space-between;border-top:1px solid #ffffff60;padding-top:22px;font-size:11px;letter-spacing:1px}.hero-bottom span:last-child{letter-spacing:0}.wrap{max-width:1280px;margin:auto;padding:110px 60px}h2{font-family:Georgia,serif;font-size:clamp(38px,4vw,60px);font-weight:400;line-height:1.12;letter-spacing:-1.8px;margin-bottom:28px}h2 em{color:#777d68}.intro{display:grid;grid-template-columns:1fr 1.25fr;gap:60px}.intro>.eyebrow{padding-top:12px}.intro p:not(.eyebrow){font-size:15px;max-width:590px;color:#686c62}.services{padding-top:20px}.section-top{display:flex;justify-content:space-between;align-items:end;gap:50px;margin-bottom:40px}.section-top>p{font-size:13px;color:var(--muted);padding-bottom:14px}.section-top h2{margin-bottom:0}.service-list{border-top:1px solid var(--line)}details{border-bottom:1px solid var(--line)}summary{list-style:none;display:flex;align-items:center;gap:30px;padding:23px 0;font-size:21px;cursor:pointer}summary::-webkit-details-marker{display:none}.number{font-size:11px;color:var(--muted);width:35px}.plus{margin-left:auto;font-size:25px;font-weight:300}details[open] .plus{transform:rotate(45deg)}details p{margin:0 50px 25px 65px;color:var(--muted);font-size:14px}.portfolio{background:#eaeae2;padding-bottom:65px}.portfolio .section-top{padding-top:85px;padding-bottom:0}.gallery{margin:0 5%;display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px}.gallery button,.more-photos button{position:relative;border:0;padding:0;background:none;text-align:left;overflow:hidden}.gallery .wide{grid-column:span 2}.gallery button:first-child{height:475px}.gallery button:nth-child(2){height:475px}.gallery button:nth-child(n+3){height:390px}.gallery button:nth-child(4){grid-column:span 2}.gallery img,.more-photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s}.gallery button:hover img{transform:scale(1.035)}.gallery button>span{position:absolute;bottom:0;left:0;width:100%;padding:40px 24px 19px;color:white;font-size:13px;background:linear-gradient(transparent,#0008)}.gallery b{float:right;font-size:20px;font-weight:400}.text-button{display:block;margin:38px auto 0;border:0;border-bottom:1px solid var(--ink);background:none;padding:10px 0;font-size:13px}.text-button span{margin-left:30px}.more-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin:20px 5%}.more-photos[hidden]{display:none}.more-photos button{height:350px}.reason-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:65px;margin-top:50px}.reason-grid article{border-top:1px solid var(--line);padding-top:24px}.reason-grid span{font-size:11px;color:var(--muted)}h3{font-size:22px;font-weight:400;margin:28px 0 15px}.reason-grid p{color:var(--muted);font-size:14px}.contact{background:#343d32;color:#f7f5ed;padding:85px max(6%,calc((100vw - 1160px)/2));display:grid;grid-template-columns:1.3fr 1fr;gap:90px}.contact h2{font-size:clamp(46px,5vw,72px)}.contact h2 em{color:#c7ccb7}.email{font-family:Georgia,serif;font-size:clamp(20px,2.3vw,32px);border-bottom:1px solid #a2aa94;padding-bottom:8px}.contact-info{padding-top:45px}.contact-info>p{color:#c4cbbd;font-size:14px}dl{margin:35px 0}dt{font-size:9px;letter-spacing:1.5px;color:#b4beab;margin-top:20px}dd{margin:5px 0;font-size:14px}footer{display:flex;justify-content:space-between;padding:30px 5%;font-size:11px;color:var(--muted)}footer span:first-child{font-weight:bold;color:var(--ink);letter-spacing:1px}dialog{padding:0;border:0;background:#191c18;max-width:95vw;max-height:94vh}dialog::backdrop{background:#000d}dialog img{display:block;max-height:90vh;max-width:92vw;object-fit:contain}#close{position:absolute;right:14px;top:14px;border:0;border-radius:50%;width:42px;height:42px;background:white;color:#222}:focus-visible{outline:3px solid #9eaa7f;outline-offset:5px}@media(min-width:1600px){.hero-content{padding-top:130px}}@media(max-width:760px){header{height:85px;padding:8px 5%}.brand{width:65px;height:65px}nav{gap:17px;font-size:12px}nav a:last-child{display:none}.header-contact{font-size:0;border:0}.header-contact span{font-size:24px;margin:0}.hero{margin:0 8px;min-height:660px;height:calc(90svh - 85px);max-height:800px}.hero-content{padding:95px 7% 70px}.hero-img{object-position:58% center}.hero-shade{background:linear-gradient(90deg,#131b13b3,#131b1340)}h1{font-size:51px;letter-spacing:-2px}.hero .eyebrow{font-size:8px;letter-spacing:1.4px}.hero-intro{font-size:13px}.hero-bottom{left:7%;right:7%;font-size:10px}.hero-bottom span:first-child{max-width:180px;font-size:8px}.wrap{padding:65px 25px}.intro{grid-template-columns:1fr;gap:15px}.intro>.eyebrow{margin-bottom:10px}h2{font-size:43px}.section-top{display:block;margin-bottom:30px}.section-top>p{margin-top:20px;margin-bottom:0}.services{padding-top:5px}summary{font-size:17px;gap:15px;padding:20px 0}.number{width:24px}details p{margin-left:39px}.portfolio .section-top{padding-top:60px}.gallery{margin:0 16px;grid-template-columns:1fr 1fr;gap:12px}.gallery button:first-child{height:290px}.gallery button:nth-child(2),.gallery button:nth-child(3){height:280px}.gallery button:nth-child(4){height:290px}.gallery button>span{padding:30px 12px 12px;font-size:11px}.more-photos{margin:12px 16px;gap:12px;grid-template-columns:1fr}.more-photos button{height:360px}.reason-grid{grid-template-columns:1fr;gap:25px;margin-top:25px}.reason-grid h3{margin:12px 0}.contact{grid-template-columns:1fr;padding:65px 25px;gap:20px}.contact-info{padding-top:20px}.contact h2{font-size:57px}footer{gap:20px;flex-wrap:wrap}footer span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* A quieter, continuous opening. */
header{position:absolute;z-index:2;top:0;left:0;right:0;height:130px;padding:26px 5.5%;background:transparent;color:#fff;align-items:center}
.brand{width:88px;height:88px}.brand img{filter:invert(1);mix-blend-mode:screen}
nav{gap:32px;font-size:12px}.header-contact{font-size:12px;border-color:#ffffff70}.header-contact span{margin-left:22px}
.hero{margin:0;height:90svh;min-height:650px;max-height:1000px}
.hero-img{object-position:center 54%}.hero-shade{background:linear-gradient(90deg,rgba(20,25,20,.48),rgba(20,25,20,.06) 70%),linear-gradient(180deg,rgba(20,25,20,.30),transparent 30%,transparent 75%,rgba(20,25,20,.12))}
.hero-content{height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:140px 8% 90px}
.hero .eyebrow{font-size:9px;letter-spacing:2.4px;margin-bottom:24px;font-weight:400}
h1{font-size:clamp(65px,7.2vw,108px);line-height:1.01;letter-spacing:-3.5px;margin-bottom:35px}h1 em{color:#fff}
.hero-link{font-size:12px;padding:10px 0;border-bottom:1px solid #ffffff70;display:inline-flex;gap:45px;align-items:center}.hero-link span{font-size:18px}.hero-link:hover{border-color:white}
.hero-location{position:absolute;bottom:35px;right:5.5%;font-size:8px;letter-spacing:1.7px;color:#ffffffe0}
@media(max-width:760px){header{height:100px;padding:15px 6%}.brand{width:67px;height:67px}nav{gap:18px;font-size:11px}.header-contact{font-size:11px}.header-contact span{font-size:14px;margin-left:8px}.hero{min-height:650px;height:88svh;max-height:850px}.hero-img{object-position:57% center}.hero-content{padding:135px 8% 75px}.hero .eyebrow{font-size:8px;letter-spacing:1.8px}h1{font-size:65px;letter-spacing:-2.5px}.hero-location{bottom:26px;right:8%;font-size:7px}.hero-shade{background:linear-gradient(90deg,#14191488,#14191415),linear-gradient(180deg,#14191455,transparent 35%)} }
@media(max-width:390px){nav{gap:12px}.header-contact{font-size:10px}.header-contact span{display:none}h1{font-size:57px}}

/* Consistent controls across Safari and desktop browsers. */
button{color:var(--ink);-webkit-appearance:none;appearance:none}
.arrow-icon{display:inline-block;position:relative;width:13px;height:13px;flex:none;vertical-align:middle;background:none!important}
.arrow-icon::before{content:"";position:absolute;left:1px;bottom:1px;width:14px;height:1px;background:currentColor;transform:rotate(-45deg);transform-origin:left center}
.arrow-icon::after{content:"";position:absolute;right:1px;top:1px;width:8px;height:8px;border-top:1px solid currentColor;border-right:1px solid currentColor}
.arrow-icon.up{transform:rotate(-45deg);margin-left:7px}
.email .arrow-icon{margin-left:12px}.gallery .arrow-icon{margin-top:5px}
.contact .button{padding:13px 0;background:transparent;color:#f7f5ed;border:0;border-bottom:1px solid #a2aa94;gap:65px}
.contact .button:hover{background:transparent;border-color:#fff}
@media(max-width:760px){header{height:auto;min-height:116px;display:grid;grid-template-columns:1fr auto;grid-template-rows:65px auto;gap:8px;padding:12px 6% 16px}.brand{grid-column:1;grid-row:1}nav{grid-column:1 / -1;grid-row:2;justify-content:space-between;gap:16px;font-size:12px;padding-top:8px;border-top:1px solid #ffffff40}nav a:last-child{display:block}.header-contact{grid-column:2;grid-row:1;font-size:12px}.header-contact span{display:inline-block;font-size:inherit}.hero-content{padding-top:175px}.text-button{color:var(--ink)}.intro h2{font-size:39px}}
@media(max-width:390px){.header-contact span{display:inline-block}.intro h2{font-size:35px}}

.plan-story>.eyebrow{margin-bottom:27px}.intro{align-items:center}.plan-scene{position:relative;aspect-ratio:4/4.5;overflow:hidden;background:#e7e8de;isolation:isolate}.plan-scene>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:home-reveal 12s ease-in-out infinite}.blueprint{position:absolute;inset:0;color:#717d68;background-color:#eceee5;background-image:linear-gradient(#86947714 1px,transparent 1px),linear-gradient(90deg,#86947714 1px,transparent 1px);background-size:22px 22px;animation:plan-fade 12s ease-in-out infinite}.blueprint svg{width:100%;height:100%;padding:12px}.plan-lines{stroke-dasharray:1800;stroke-dashoffset:1800;animation:plan-draw 12s ease-in-out infinite}.plan-scan{position:absolute;top:0;bottom:0;width:1px;background:#f8f6e5;box-shadow:0 0 18px #fff8;animation:scan 12s ease-in-out infinite;pointer-events:none}.scene-caption{position:absolute;bottom:20px;left:22px;right:20px;display:flex;align-items:center;height:30px;font-size:9px;letter-spacing:2px}.phase-plan{color:#59644e;animation:plan-fade 12s ease-in-out infinite}.phase-home{position:absolute;left:0;color:#fff;text-shadow:0 1px 8px #000;animation:home-label 12s ease-in-out infinite}.animation-toggle{margin-left:auto;border:1px solid #ffffff80;background:#f6f4efdd;color:#343d32;width:30px;height:30px;border-radius:50%;padding:0;font-size:12px;letter-spacing:0;line-height:1}.plan-note{font-size:11px!important;margin:12px 0 0!important;color:var(--muted)}.plan-scene.paused *{animation-play-state:paused!important}@keyframes plan-draw{0%{stroke-dashoffset:1800}25%,90%{stroke-dashoffset:0}100%{stroke-dashoffset:1800}}@keyframes plan-fade{0%,30%{opacity:1;clip-path:inset(0)}58%,85%{opacity:1;clip-path:inset(0 0 0 100%)}96%,100%{opacity:1;clip-path:inset(0)}}@keyframes home-reveal{0%,30%{transform:scale(1.035)}60%,85%{transform:scale(1)}100%{transform:scale(1.035)}}@keyframes scan{0%,30%{left:0;opacity:0}33%{opacity:.8}58%{left:100%;opacity:.8}60%,100%{left:100%;opacity:0}}@keyframes home-label{0%,43%,95%,100%{opacity:0}60%,85%{opacity:1}}@media(max-width:760px){.intro{gap:35px}.plan-scene{aspect-ratio:5/4;max-height:350px}.blueprint svg{padding:0}.plan-story>.eyebrow{margin-bottom:20px}}@media(prefers-reduced-motion:reduce){.plan-scene *{animation:none!important}.blueprint{display:none}.plan-scan,.phase-plan,.animation-toggle{display:none}.phase-home{opacity:1}.plan-scene>img{transform:none}}

/* A sketch derived from the exact final photograph. */
.photo-sketch{background:#f5f3ec;animation:sketch-to-photo 14s ease-in-out infinite;mix-blend-mode:normal}
.photo-sketch svg{display:block;padding:0;width:100%;height:100%;opacity:.76;mix-blend-mode:multiply;animation:pencil-appear 14s ease-in-out infinite}
.paper-uncover{position:absolute;inset:0;background:#f5f3ec;animation:paper-draw 14s ease-in-out infinite}
.plan-scene>img{animation:photo-settle 14s ease-in-out infinite}.plan-scan{display:none}.phase-plan{animation:sketch-label 14s ease-in-out infinite}.phase-home{animation:finished-label 14s ease-in-out infinite}
@keyframes paper-draw{0%,5%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}32%,87%{clip-path:polygon(100% 100%,100% 100%,100% 100%,100% 100%)}97%,100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes pencil-appear{0%{opacity:0}12%{opacity:.3}32%,42%{opacity:.8}90%,100%{opacity:.8}}
@keyframes sketch-to-photo{0%,40%{opacity:1;filter:blur(0)}65%,86%{opacity:0;filter:blur(.4px)}97%,100%{opacity:1;filter:blur(0)}}
@keyframes photo-settle{0%,38%{filter:saturate(0) brightness(1.12);transform:scale(1)}65%,88%{filter:saturate(1) brightness(1);transform:scale(1)}100%{filter:saturate(0) brightness(1.12);transform:scale(1)}}
@keyframes sketch-label{0%,37%{opacity:1;clip-path:none}50%,90%{opacity:0;clip-path:none}98%,100%{opacity:1;clip-path:none}}
@keyframes finished-label{0%,50%,97%,100%{opacity:0}65%,87%{opacity:1}}
@media(max-width:760px){.plan-scene{aspect-ratio:8/7;max-height:380px}}
@media(prefers-reduced-motion:reduce){.photo-sketch{display:none}.plan-scene>img{filter:none}}
/* Match the sketch and photograph crop; complete each cycle in 2.5 seconds. */
.plan-scene>img{clip-path:inset(0 0 0 2%);width:102%;max-width:none;left:-2%;object-position:54% center;animation-duration:2.5s}
.photo-sketch{width:102%;left:-2%;right:auto;clip-path:inset(0 0 0 2%);animation-duration:2.5s}
.photo-sketch svg{animation-duration:2.5s}
.paper-uncover,.phase-plan,.phase-home{animation-duration:2.5s}
.plan-scene>img{left:-4%;width:104%;clip-path:none;object-position:center}
.photo-sketch{left:-4%;width:104%;clip-path:none}
/* Continuous drawing-to-colour transition over four seconds. */
.plan-scene>img,.photo-sketch,.photo-sketch svg,.paper-uncover,.phase-plan,.phase-home{animation-duration:4s}
@keyframes paper-draw{0%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}40%,88%{clip-path:polygon(100% 100%,100% 100%,100% 100%,100% 100%)}100%{clip-path:polygon(0 0,100% 0,100% 100%,0 100%)}}
@keyframes pencil-appear{0%{opacity:.15}24%{opacity:.7}40%,100%{opacity:.8}}
@keyframes sketch-to-photo{0%,18%{opacity:1;filter:blur(0)}40%{opacity:.7;filter:blur(0)}67%,85%{opacity:0;filter:blur(0)}100%{opacity:1;filter:blur(0)}}
@keyframes photo-settle{0%,18%{filter:saturate(0) brightness(1.12);transform:scale(1)}40%{filter:saturate(.35) brightness(1.06);transform:scale(1)}67%,85%{filter:saturate(1) brightness(1);transform:scale(1)}100%{filter:saturate(0) brightness(1.12);transform:scale(1)}}
@keyframes sketch-label{0%,25%{opacity:1;clip-path:none}48%,85%{opacity:0;clip-path:none}100%{opacity:1;clip-path:none}}
@keyframes finished-label{0%,30%{opacity:0}62%,85%{opacity:1}100%{opacity:0}}
