:root { --ink:#26342f; --moss:#43665b; --sage:#a9bfab; --cream:#f8f5ed; --sand:#e6ddca; --peach:#e9b895; --line:rgba(38,52,47,.15); --serif:"Lora", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--cream); font:400 16px/1.6 var(--sans); } a { color:inherit; text-decoration:none; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; background:#fff; padding:.6rem 1rem; }
.site-header { width:min(1180px, calc(100% - 3rem)); margin:auto; padding:1.2rem 0; display:flex; align-items:center; justify-content:space-between; gap:1rem; } .brand { display:inline-flex; align-items:center; gap:.65rem; font-size:1.02rem; font-weight:700; letter-spacing:-.02em; } .brand-mark { align-items:center; background:var(--moss); border-radius:50%; color:#fff; display:inline-flex; font-family:var(--serif); font-size:1.1rem; height:2rem; justify-content:center; width:2rem; } .site-nav { display:flex; align-items:center; gap:1.5rem; font-size:.94rem; } .site-nav a:not(.nav-cta) { color:#4d5e57; } .nav-cta,.button { border-radius:999px; display:inline-block; font-weight:600; padding:.75rem 1.15rem; } .nav-cta { border:1px solid var(--ink); } .menu-toggle { display:none; }
.hero { min-height:620px; overflow:hidden; padding:4.4rem max(1.5rem, calc((100% - 1180px)/2)); display:grid; grid-template-columns:1fr .88fr; align-items:center; gap:4rem; background:#dfe8da; } .eyebrow { color:var(--moss); font-size:.76rem; font-weight:700; letter-spacing:.12em; margin:0 0 1rem; text-transform:uppercase; } h1,h2,h3,p { margin-top:0; } h1,h2 { font-family:var(--serif); font-weight:500; line-height:1.05; letter-spacing:-.045em; } h1 { font-size:clamp(3.4rem, 7vw, 6.25rem); max-width:700px; margin-bottom:1.25rem; } h2 { font-size:clamp(2.3rem, 4vw, 4rem); margin-bottom:1.25rem; } h3 { font:600 1.25rem/1.25 var(--sans); letter-spacing:-.03em; margin-bottom:.65rem; } .hero-text { color:#42534c; font-size:1.15rem; max-width:540px; } .hero-actions { display:flex; flex-wrap:wrap; gap:1.35rem; align-items:center; margin-top:2rem; } .button-primary { background:var(--ink); border:1px solid var(--ink); color:#fff; cursor:pointer; } .button-primary:hover { background:var(--moss); border-color:var(--moss); } .text-link { border-bottom:1px solid var(--ink); font-weight:600; padding-bottom:.2rem; }
.hero-art { background:#b5cfbe; border-radius:50% 50% 0 0; height:480px; position:relative; min-width:390px; overflow:hidden; } .sun { background:#f5d7a6; border-radius:50%; height:180px; left:17%; position:absolute; top:18%; width:180px; } .arch { border-radius:130px 130px 0 0; bottom:0; position:absolute; } .arch-back { background:#6f9a83; height:320px; right:8%; width:240px; } .arch-front { background:#f1e3ce; height:250px; right:17%; width:185px; } .shelf { display:flex; gap:12px; align-items:flex-end; background:#547567; bottom:33%; height:14px; left:20%; padding:0 8px; position:absolute; width:145px; } .shelf span { background:#d8896c; border-radius:4px 4px 0 0; display:block; height:60px; width:22px; } .shelf span:nth-child(2) { background:#f5d7a6; height:85px; } .shelf span:nth-child(3) { background:#6e86a8; height:48px; } .plant { bottom:18%; left:13%; position:absolute; width:110px; height:155px; } .plant b { background:#cc8063; border-radius:12px 12px 25px 25px; bottom:0; height:64px; left:31px; position:absolute; width:60px; } .plant i { background:#4e8067; border-radius:100% 0; display:block; height:68px; position:absolute; width:32px; transform-origin:bottom; } .plant i:nth-child(1) { left:36px; top:15px; transform:rotate(-26deg); } .plant i:nth-child(2) { left:65px; top:5px; transform:rotate(22deg); } .plant i:nth-child(3) { left:50px; top:37px; transform:rotate(5deg); } .vase { background:#e9c3a7; border-radius:38% 38% 15% 15%; bottom:17%; height:118px; right:12%; position:absolute; width:68px; }
.section { padding:7rem max(1.5rem, calc((100% - 1100px)/2)); } .intro { display:grid; grid-template-columns:1fr 1fr; gap:5rem; background:#fffdf8; } .intro p { align-self:end; color:#52625c; font-size:1.18rem; }
.principles { background:#f8f5ed; } .principle-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:3rem; } .principle-icon { color:var(--moss); display:block; font-size:.76rem; font-weight:700; letter-spacing:.1em; margin-bottom:2.1rem; } .principle-grid h2 { font-size:1.7rem; margin-bottom:.75rem; } .principle-grid p { color:#576760; max-width:285px; }
.services { background:#f7f1e5; } .section-heading { max-width:650px; margin-bottom:3rem; } .service-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; } .service-card { border:1px solid var(--line); min-height:250px; padding:1.6rem; background:rgba(255,255,255,.36); } .service-card p { color:#576760; font-size:.94rem; } .card-number { color:var(--moss); display:block; font-size:.78rem; font-weight:700; letter-spacing:.1em; margin-bottom:3.8rem; }
.process { background:var(--ink); color:#f8f5ed; display:grid; grid-template-columns:.85fr 1.15fr; gap:6rem; } .process .eyebrow { color:#b9d4bd; } .process h2 { color:#fffdf8; } .process-intro p:not(.eyebrow) { color:#c3d1c9; } .steps { border-top:1px solid rgba(255,255,255,.22); list-style:none; margin:0; padding:0; } .steps li { border-bottom:1px solid rgba(255,255,255,.22); display:grid; grid-template-columns:70px 1fr; gap:1rem; padding:1.45rem 0; } .steps span { color:#b9d4bd; font-size:.8rem; font-weight:700; padding-top:.2rem; } .steps h3 { margin:0 0:.35rem; color:#fff; } .steps p { color:#c3d1c9; margin:0; }
.quote { background:var(--peach); text-align:center; padding-top:6rem; padding-bottom:6rem; } blockquote { margin:0 auto; max-width:900px; } blockquote p { font:500 clamp(2rem,4.1vw,4rem)/1.12 var(--serif); letter-spacing:-.04em; margin:0; }
.gallery-promo { background:#fffdf8; display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:6rem; } .gallery-promo > div:last-child p:not(.eyebrow) { color:#53635d; font-size:1.04rem; max-width:530px; } .gallery-promo-art { background:#d7e3d4; height:365px; overflow:hidden; position:relative; } .promo-sun { background:#f0ce94; border-radius:50%; height:145px; left:15%; position:absolute; top:15%; width:145px; } .promo-shelf { background:#426457; bottom:32%; height:15px; left:19%; position:absolute; width:63%; } .promo-book { bottom:36%; display:block; position:absolute; width:32px; } .book-one { background:#d08268; height:80px; left:28%; } .book-two { background:#f1ddbc; height:112px; left:40%; } .book-three { background:#73917f; height:64px; left:53%; } .promo-leaf { background:#426c58; border-radius:100% 0; bottom:13%; height:100px; position:absolute; right:16%; transform:rotate(35deg); width:45px; }
.about { display:grid; grid-template-columns:.85fr 1.15fr; align-items:center; gap:6rem; background:#fffdf8; } .about-art { background:#d9e6d7; height:450px; position:relative; overflow:hidden; } .about-window { border:17px solid #f8f5ed; border-bottom:none; border-radius:120px 120px 0 0; height:285px; left:25%; position:absolute; top:17%; width:250px; } .about-box { background:#bc8a69; bottom:12%; height:82px; position:absolute; width:95px; } .box-one { left:12%; } .box-two { background:#dcad84; bottom:30%; left:32%; } .about-leaf { background:#4d7964; border-radius:100% 0; height:95px; position:absolute; width:42px; } .leaf-one { bottom:25%; right:16%; transform:rotate(30deg); } .leaf-two { bottom:16%; right:25%; transform:rotate(-30deg); } .about-copy > p:not(.eyebrow) { color:#53635d; font-size:1.04rem; } .placeholder-note { border-left:3px solid var(--peach); font-size:.87rem!important; font-style:italic; padding-left:1rem; }
.faq { background:#f7f1e5; } .faq details { border-top:1px solid var(--line); max-width:800px; padding:1.2rem 0; } .faq details:last-child { border-bottom:1px solid var(--line); } .faq summary { cursor:pointer; font-size:1.05rem; font-weight:600; list-style:none; padding-right:2rem; position:relative; } .faq summary::after { content:"+"; font-size:1.5rem; font-weight:400; position:absolute; right:0; top:-.28rem; } .faq details[open] summary::after { content:"−"; } .faq details p { color:#53635d; max-width:680px; padding-top:.85rem; margin-bottom:0; }
.contact { background:#dfe8da; display:grid; grid-template-columns:1fr 1fr; gap:5rem; } .contact > div p:not(.eyebrow) { color:#52625c; max-width:500px; font-size:1.08rem; } .contact-form { display:grid; gap:1rem; } label { display:grid; gap:.35rem; font-size:.87rem; font-weight:600; } input,textarea { background:#fffdf8; border:1px solid transparent; border-radius:3px; color:var(--ink); font:inherit; padding:.85rem .9rem; resize:vertical; } input:focus,textarea:focus { border-color:var(--moss); outline:2px solid transparent; } .form-note { color:#5d6d65; font-size:.76rem; margin:0; }
.site-footer { background:var(--ink); color:#f8f5ed; padding:3rem max(1.5rem, calc((100% - 1100px)/2)); } .site-footer .brand-mark { background:#a9bfab; color:var(--ink); } .site-footer > p:not(.footer-small) { color:#c3d1c9; margin:1rem 0 2.5rem; } .footer-small { color:#93a69a; font-size:.8rem; margin:0; }
.gallery-hero { background:#dfe8da; min-height:430px; padding:5rem max(1.5rem, calc((100% - 1100px)/2)); } .gallery-hero h1 { max-width:700px; } .gallery-hero > p:not(.eyebrow) { color:#52625c; font-size:1.15rem; max-width:580px; } .gallery-section { background:#fffdf8; } .gallery-note { align-items:center; background:#f7f1e5; display:flex; gap:1rem; margin-bottom:3rem; max-width:680px; padding:1rem 1.25rem; } .gallery-note span { color:var(--moss); font-size:1.4rem; } .gallery-note p { color:#53635d; font-size:.94rem; margin:0; } .transformation-grid { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; } .transformation-card { background:#f7f1e5; } .pair { display:grid; grid-template-columns:1fr 1fr; min-height:250px; } .photo-placeholder { align-items:center; color:rgba(38,52,47,.68); display:flex; font-size:.78rem; font-weight:700; justify-content:center; letter-spacing:.08em; text-transform:uppercase; } .before-photo { background:#d7c9b4; } .after-photo { background:#b5cfbe; } .tone-blue { background:#b9cbd0; } .tone-sage { background:#c6d7b6; } .tone-clay { background:#d6aa8d; } .tone-cream { background:#eee4cf; } .transformation-copy { padding:1.5rem; } .transformation-copy h2 { font-size:1.75rem; margin-bottom:.65rem; } .transformation-copy p:not(.eyebrow) { color:#5a685f; font-size:.92rem; margin-bottom:0; } .transformation-callout { align-items:flex-start; background:var(--ink); color:#fffdf8; display:flex; flex-direction:column; justify-content:center; min-height:390px; padding:2.2rem; } .transformation-callout .eyebrow { color:#b9d4bd; } .transformation-callout h2 { font-size:2.65rem; } .transformation-callout p:not(.eyebrow) { color:#c3d1c9; max-width:420px; } .transformation-callout .button { margin-top:.7rem; }
@media (max-width:800px) { .site-header { width:min(100% - 2rem,1180px); } .menu-toggle { background:transparent; border:0; color:var(--ink); cursor:pointer; display:block; font:600 .9rem var(--sans); } .site-nav { background:var(--cream); box-shadow:0 15px 30px rgba(38,52,47,.12); display:none; flex-direction:column; align-items:flex-start; padding:1.2rem; position:absolute; right:1rem; top:4.2rem; width:220px; z-index:3; } .site-nav.open { display:flex; } .hero { grid-template-columns:1fr; gap:3rem; min-height:auto; padding-top:3rem; } .hero-art { height:400px; min-width:0; width:100%; } .intro,.process,.about,.contact,.gallery-promo { grid-template-columns:1fr; gap:2.5rem; } .principle-grid { grid-template-columns:1fr; gap:1.5rem; } .section { padding-top:4.5rem; padding-bottom:4.5rem; } .service-grid { grid-template-columns:1fr 1fr; } .card-number { margin-bottom:2rem; } .about-art { height:350px; } .transformation-grid { grid-template-columns:1fr; } }
@media (max-width:500px) { h1 { font-size:3.55rem; } .hero-art { height:330px; } .sun { height:130px; width:130px; } .arch-back { height:250px; width:190px; } .arch-front { height:205px; width:150px; } .service-grid { grid-template-columns:1fr; } .contact-form { width:100%; } }