@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--paper:#f8f6f0;--ink:#243e35;--muted:#59635c;--line:#d7dad0;--lime:#d5dd99}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #9c612f;outline-offset:6px}.skip{position:absolute;left:20px;top:-100px;background:white;padding:15px;z-index:20}.skip:focus{top:10px}header{max-width:1500px;margin:auto;padding:30px 5%;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:14px}.monogram{font-family:Georgia,serif;font-size:40px;letter-spacing:-4px}.monogram span{font-size:25px}.brand-name{font-size:13px;font-weight:700;letter-spacing:2px}.brand-name>span{display:block;font-size:7px;letter-spacing:1.3px;margin-top:7px}nav{display:flex;gap:28px;align-items:center;font-size:13px}nav button{border:1px solid var(--line);background:none;padding:8px;cursor:pointer}.nav-contact{border-bottom:1px solid var(--ink);padding:10px 0}.nav-contact span{margin-left:20px}.hero{max-width:1500px;margin:auto;padding:64px 5% 70px;display:grid;grid-template-columns:1.05fr 1fr;gap:5%}.eyebrow{font-size:10px;font-weight:700;letter-spacing:2px;margin:0 0 28px}h1,h2{font-family:'Playfair Display',Georgia,serif;font-weight:500;letter-spacing:-2px}h1{font-size:clamp(45px,5.4vw,84px);line-height:1.08;margin:0 0 28px}em{font-weight:500}.intro{font-size:15px;line-height:1.8;color:var(--muted);max-width:370px;margin-bottom:28px}.button{display:inline-flex;gap:30px;align-items:center;background:var(--ink);color:var(--paper);padding:20px 24px;font-size:12px}.button:hover{background:#375849}.hero-note{font-size:10px;margin-top:22px;color:var(--muted)}.hero-art{position:relative;background:#ded8ca;overflow:hidden;min-height:540px}.art-label{position:absolute;top:25px;left:25px;font-size:8px;letter-spacing:2px;z-index:4}.arch{position:absolute;width:48%;height:80%;left:21%;top:13%;border-radius:180px 180px 0 0;background:#baa88e;box-shadow:inset 12px 6px 25px #98866c}.arch-inner{position:absolute;left:17%;right:0;top:10%;height:100%;border-radius:140px 140px 0 0;background:linear-gradient(100deg,#747c67,#a4ac91 45%,#c0c7b0)}.art-wall{position:absolute;left:69%;top:0;width:31%;height:90%;background:linear-gradient(90deg,#cbc3b4,#e7e0d3)}.floor{position:absolute;bottom:-1px;width:100%;height:20%;background:repeating-linear-gradient(100deg,transparent 0 54px,#ad917054 55px 57px),linear-gradient(15deg,#bda386,#d7bfa2);clip-path:polygon(0 55%,69% 0,100% 30%,100% 100%,0 100%)}.sample{position:absolute;box-shadow:10px 16px 20px #0002;bottom:16%;height:28%;width:20%}.sample-one{left:12%;background:#e9e2d1;transform:rotate(-9deg)}.sample-two{left:25%;height:23%;background:#85947c;transform:rotate(7deg)}.art-caption{position:absolute;bottom:25px;left:25px;right:25px;display:flex;justify-content:space-between;align-items:end;font-size:15px;line-height:1.4}.art-caption>span:last-child{font-size:44px}.service-strip{padding:24px 5%;background:var(--ink);color:var(--paper);display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:1px}.service-strip>span:last-child{font-size:24px}.services{max-width:1500px;margin:auto;padding:100px 5%}.section-heading{display:grid;grid-template-columns:1fr 1.6fr 1.1fr;gap:30px;align-items:start}h2{font-size:clamp(34px,3.5vw,52px);line-height:1.15;margin:0 0 30px}.section-heading>p:last-child{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.service-grid{margin-top:40px;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.service-card{padding:30px 22px 34px 0;border-bottom:1px solid var(--line);margin-right:28px}.service-number{font-size:10px;color:var(--muted)}.service-card h3{font-size:18px;font-weight:500;margin:25px 0 12px}.service-card p{font-size:12px;color:var(--muted);line-height:1.8;margin:0;max-width:290px}.approach{padding:80px 5%;background:#e9ecdf;display:grid;grid-template-columns:1fr 1fr;gap:8%}.approach ol{list-style:none;margin:0;padding:0}.approach li{display:flex;gap:25px;padding:25px 0;border-bottom:1px solid #cbd2c1}.approach li:first-child{padding-top:0}.approach li>span{font-size:11px;padding-top:4px}.approach h3{margin:0 0 10px;font-size:16px;font-weight:500}.approach li p{font-size:12px;line-height:1.8;color:var(--muted);margin:0;max-width:360px}.contact{text-align:center;padding:100px 20px;background:var(--ink);color:var(--paper)}.contact h2{font-size:clamp(44px,5vw,72px)}.contact .eyebrow{color:var(--lime)}.phone{display:block;font-size:clamp(28px,3vw,44px);margin:24px 0}.phone span{color:var(--lime);margin-left:15px}.email{display:inline-block;border-bottom:1px solid #8b9b8b;padding-bottom:6px;font-size:14px}.contact>p:last-child{font-size:11px;color:#c4cdbf;margin-top:30px}footer{padding:28px 5%;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px}@media(min-width:1500px){.approach{padding-left:max(5%,calc((100vw - 1350px)/2));padding-right:max(5%,calc((100vw - 1350px)/2))}}@media(max-width:760px){header{padding:20px 6%}.brand-name{font-size:10px;letter-spacing:1px}.brand-name>span{font-size:6px}.monogram{font-size:34px}nav{gap:12px}nav>a{display:none}.hero{padding:42px 6%;grid-template-columns:1fr;gap:35px}h1{font-size:58px}.hero-art{min-height:430px}.hero-copy .eyebrow{margin-bottom:22px}.intro{font-size:14px}.service-strip{padding:20px 6%;font-size:9px}.service-strip>span:nth-child(2){display:none}.services{padding:60px 6%}.section-heading{grid-template-columns:1fr;gap:0}.section-heading .eyebrow{margin-bottom:18px}.section-heading>p:last-child{max-width:400px}.service-grid{grid-template-columns:1fr 1fr;margin-top:25px}.service-card{margin-right:14px;padding-right:6px}.service-card h3{font-size:16px}.approach{padding:60px 6%;grid-template-columns:1fr;gap:15px}.contact{padding:70px 6%}.contact .eyebrow{font-size:8px}footer{gap:15px;flex-wrap:wrap;font-size:8px}footer>span:nth-child(2){display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Photography and concept transformation studies */
.hero-photo{position:relative;margin:0;min-height:540px;overflow:hidden;background:#d6d4c6}.hero-photo>img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;object-position:55% center}.hero-photo:after{content:'';position:absolute;inset:40% 0 0;background:linear-gradient(transparent,#12231ab0)}.hero-photo figcaption{position:absolute;left:20px;top:20px;z-index:2;background:#f8f6f0ed;color:#243e35;padding:9px 12px;font-size:9px;letter-spacing:.5px}.photo-title{position:absolute;bottom:35px;left:30px;color:white;z-index:2;font:italic 38px/1.2 'Playfair Display',Georgia,serif}.inspiration{padding:85px 5%;background:#eeeee5}.inspiration-heading{display:flex;justify-content:space-between;gap:40px;max-width:1350px;margin:0 auto 25px}.inspiration-heading>p{max-width:350px;font-size:13px;line-height:1.8;color:var(--muted);padding-top:25px}.comparison-grid{display:grid;grid-template-columns:1fr 1fr;gap:36px;max-width:1350px;margin:auto}.compare{aspect-ratio:1024/688;position:relative;overflow:hidden;background:#ddd}.compare>img,.compare-before,.compare-before img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.compare-before{clip-path:inset(0 calc(100% - var(--split)) 0 0)}.compare-label{position:absolute;top:15px;background:#f8f6f0ef;font-size:10px;padding:8px 12px}.before-label{left:15px}.after-label{right:15px}.compare-divider{position:absolute;left:var(--split);height:100%;top:0;width:2px;background:white;transform:translateX(-50%);pointer-events:none}.compare-divider span{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);background:white;color:#243e35;border-radius:50%;padding:9px;font-size:20px}.slider-label{display:flex;align-items:center;gap:16px;padding-top:15px;font-size:10px;letter-spacing:.4px}.compare-slider{flex:1;min-width:0;accent-color:var(--ink);height:28px;cursor:ew-resize}.compare-slider:focus-visible{outline:2px solid var(--ink);outline-offset:3px}.comparison-card h3{font-weight:500;font-size:19px;margin:15px 0}.concept-note{max-width:1350px;margin:25px auto 0;font-size:11px;color:var(--muted);line-height:1.7}.detail-story{padding:85px 5%;max-width:1500px;margin:auto}.detail-copy{display:grid;grid-template-columns:1fr 1.6fr 1.1fr;gap:30px}.detail-copy>p:last-child{font-size:13px;line-height:1.8;color:var(--muted);margin:0}.detail-images{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:25px}.detail-images figure{margin:0}.detail-images img{width:100%;height:auto;aspect-ratio:1.2;object-fit:cover;display:block}.detail-images figcaption{display:flex;justify-content:space-between;gap:10px;align-items:center;font-size:12px;padding:15px 0}.detail-images small{font-size:9px;color:var(--muted)}@media(max-width:1000px){nav{gap:15px;font-size:11px}}@media(max-width:760px){.hero-photo{min-height:430px}.photo-title{font-size:32px}.inspiration,.detail-story{padding:60px 6%}.inspiration-heading{display:block}.inspiration-heading>p{padding:0;max-width:none}.comparison-grid{grid-template-columns:1fr;gap:30px}.detail-copy{grid-template-columns:1fr;gap:0}.detail-images{grid-template-columns:1fr;gap:20px}.detail-images img{aspect-ratio:1.5}.detail-images figcaption{font-size:14px}.detail-images small{font-size:10px}}
/* Final company identity: green roof/window mark and correct company name. */
:root{--brand-green:#18743c}header{padding-top:16px;padding-bottom:16px}.brand-logo{display:block;width:320px;height:100px;object-fit:cover;object-position:center;mix-blend-mode:multiply}.button{background:var(--brand-green)}.button:hover{background:#125c2f}.nav-contact{border-color:var(--brand-green)}.nav-contact span{color:var(--brand-green)}.hero-copy .eyebrow,.section-heading .eyebrow,.detail-copy .eyebrow{color:var(--brand-green)}.compare-slider{accent-color:var(--brand-green)}footer{align-items:center;gap:20px}.footer-brand .brand-logo{width:220px;height:72px}@media(max-width:1000px){.brand-logo{width:270px;height:90px}nav{gap:12px}}@media(max-width:760px){header{padding-top:8px;padding-bottom:8px}.brand-logo{width:265px;height:88px}.footer-brand .brand-logo{width:210px;height:70px}footer{justify-content:flex-start}}@media(max-width:360px){.brand-logo{width:225px;height:78px}}
.brand-logo{mix-blend-mode:darken}