*{box-sizing:border-box} :root{--green:#243d2b;--green2:#182c20;--cream:#f2edc3;--paper:#f7f5eb;--ink:#26372a;--muted:#667064;--line:rgba(242,237,195,.22)}html{scroll-behavior:smooth;scroll-padding-top:84px}body{margin:0;background:var(--paper);color:var(--ink);font-family:"DM Sans",sans-serif;font-size:15px;line-height:1.7}a{color:inherit;text-decoration:none}img{display:block;max-width:100%}.site-header{height:82px;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;background:var(--green);color:var(--cream);position:sticky;top:0;z-index:20;border-bottom:1px solid var(--line)}.wordmark{display:flex;align-items:center;gap:11px;color:var(--cream)}.monogram{width:38px;height:43px;border:1px solid var(--cream);display:grid;place-items:center;font-family:"Playfair Display",serif;font-size:31px;line-height:1;position:relative}.monogram span{position:absolute;font:11px sans-serif;right:-4px;bottom:0;background:var(--green)}.brand-name{font-size:17px;letter-spacing:.24em;line-height:1.05}.brand-name small{display:block;text-align:center;letter-spacing:.46em;font-size:9px;margin-top:6px}.main-nav{display:flex;align-items:center;gap:clamp(16px,2.6vw,42px);font-size:12px;letter-spacing:.08em;text-transform:uppercase}.main-nav a:not(.nav-cta){opacity:.86}.main-nav a:hover,.text-link:hover,.inline-link:hover{opacity:.65}.nav-cta{border:1px solid var(--cream);padding:11px 15px}.nav-cta span{margin-left:12px}.menu-toggle{display:none;background:none;border:0;color:var(--cream);font-size:25px}.hero{min-height:calc(100svh - 82px);position:relative;display:flex;align-items:center;color:var(--cream);background:var(--green);overflow:hidden}.hero-photo{position:absolute;inset:0;background-image:url("assets/sayers-spaces-hero-original.png");background-position:center;background-size:cover;filter:brightness(.48);transform:scale(1.015)}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,32,22,.78),rgba(17,32,22,.15) 78%),linear-gradient(0deg,rgba(17,32,22,.55),transparent 35%)}.hero-content{position:relative;z-index:1;width:min(800px,76%);margin-left:10%;padding:90px 0 120px}.eyebrow{font-size:10px;letter-spacing:.22em;font-weight:600;margin:0 0 22px}.hero h1,.section-heading h2,.intro h2,.feature h2,.process h2,.contact h2{font-family:"Playfair Display",serif;font-size:clamp(42px,6.1vw,88px);line-height:1.04;font-weight:400;letter-spacing:-.045em;margin:0}.hero h1 em,.section-heading h2 em,.intro h2 em,.feature h2 em,.process h2 em,.contact h2 em{font-weight:400;color:#d9d5a6}.hero-copy{max-width:550px;margin:26px 0 32px;font-size:16px;line-height:1.8;color:#f4f0d9}.hero-actions{display:flex;align-items:center;gap:28px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:24px;padding:15px 20px;font:600 11px "DM Sans",sans-serif;letter-spacing:.07em;text-transform:uppercase;border:1px solid transparent;cursor:pointer;transition:transform .2s,background .2s}.button:hover{transform:translateY(-2px)}.button-cream{background:var(--cream);color:var(--green)}.button-green{background:var(--green);color:var(--cream)}.text-link{font-size:12px;border-bottom:1px solid var(--cream);padding:8px 0}.text-link span,.inline-link span,.card-link span{margin-left:14px}.hero-bottom{position:absolute;bottom:0;left:5%;right:5%;z-index:2;border-top:1px solid var(--line);display:flex;justify-content:space-between;padding:18px 0;font-size:9px;letter-spacing:.17em}.section-pad{padding:110px 9%}.intro{background:var(--paper)}.intro-kicker{display:flex;align-items:center;gap:15px;font-size:10px;letter-spacing:.2em;margin-bottom:40px}.rule{height:1px;width:44px;background:var(--green)}.intro-grid{display:grid;grid-template-columns:1.1fr .7fr;gap:10%;align-items:start}.intro h2,.section-heading h2,.feature h2,.process h2,.contact h2{font-size:clamp(38px,4.4vw,62px);color:var(--green)}.intro h2 em{color:#77856e}.intro-grid p{margin-top:0;color:#626b5f}.intro-grid .lead,.feature .lead{font-size:19px;line-height:1.55;color:var(--green)}.inline-link{display:inline-block;margin-top:12px;border-bottom:1px solid var(--green);font-size:12px;padding-bottom:6px}.services{background:var(--green);color:var(--cream)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:45px;margin-bottom:48px}.section-heading .eyebrow{margin-bottom:15px}.section-heading h2{color:var(--cream)}.section-heading h2 em{color:#c7cba6}.section-heading>p{max-width:330px;color:rgba(242,237,195,.78);font-size:13px;margin:0 0 5px}.service-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}.service-card{min-width:0}.service-image{height:250px;background-size:cover;background-position:center;margin-bottom:22px;transition:filter .25s}.service-card:hover .service-image{filter:brightness(1.12)}.img-garden{background-image:none}.img-room{background-image:none}.img-veranda{background-image:none}.img-pergola{background-image:none}.service-number{font-size:9px;letter-spacing:.16em;opacity:.7}.service-card h3{font:400 25px "Playfair Display",serif;margin:8px 0}.service-card p{font-size:12px;line-height:1.8;color:rgba(242,237,195,.76);min-height:88px}.card-link{display:inline-block;font-size:10px;letter-spacing:.05em;border-bottom:1px solid var(--line);padding-bottom:8px;margin-top:5px}.feature{display:grid;grid-template-columns:1fr 1fr;gap:9%;align-items:center;background:#eeecdf}.feature-image{min-height:600px;background:none center/cover}.feature-copy .eyebrow{color:#61705e}.feature h2{margin-bottom:28px}.feature h2 em{color:#77856e}.feature-copy>p:not(.eyebrow){color:#667064;font-size:13px}.feature-copy .button{margin-top:22px}.projects{background:var(--paper)}.projects .section-heading h2{color:var(--green)}.projects .section-heading h2 em{color:#77856e}.projects .section-heading>p{color:var(--muted)}.project-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}.project{position:relative;min-height:300px;overflow:hidden;background:#d9ddcf}.project-large{grid-row:span 2;min-height:620px}.project img{width:100%;height:100%;min-height:300px;object-fit:cover;transition:transform .5s}.project-large img{min-height:620px}.project:hover img{transform:scale(1.035)}.project:after{content:"";position:absolute;inset:35% 0 0;background:linear-gradient(transparent,rgba(15,25,17,.72))}.project-caption{position:absolute;bottom:22px;left:25px;color:white;z-index:1}.project-caption span{font-size:9px;letter-spacing:.18em}.project-caption h3{font:400 27px "Playfair Display",serif;margin:5px 0}.portfolio-note{font-size:10px;color:#777e72;margin-top:18px}.process{background:#e8e8d8}.process h2{max-width:760px;margin-bottom:54px}.process h2 em{color:#77856e}.process-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:50px}.process-grid>div{border-top:1px solid #aeb6a5;padding-top:20px}.process-grid span{font-size:10px;letter-spacing:.15em;color:#73806d}.process-grid h3{font:400 25px "Playfair Display",serif;margin:12px 0}.process-grid p{font-size:13px;color:#687165;max-width:310px}.contact{display:grid;grid-template-columns:.8fr 1fr;gap:10%;background:var(--green);color:var(--cream)}.contact h2{color:var(--cream);margin-bottom:28px}.contact h2 em{color:#c7cba6}.contact-copy>p:not(.eyebrow){color:rgba(242,237,195,.78);max-width:400px}.contact-detail{margin-top:30px;border-top:1px solid var(--line);padding-top:14px;display:flex;flex-direction:column;gap:5px}.contact-detail span{font-size:9px;letter-spacing:.18em;opacity:.65}.contact-detail strong{font-weight:500;font-size:13px}.quote-form{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:18px 16px;align-content:start}.quote-form label{display:flex;flex-direction:column;gap:7px;font-size:11px;letter-spacing:.04em}.quote-form label:nth-child(4),.quote-form label:nth-child(5),.quote-form button,.form-note,#form-status{grid-column:1/-1}.quote-form input,.quote-form select,.quote-form textarea{width:100%;border:1px solid rgba(242,237,195,.34);background:rgba(255,255,255,.04);padding:13px;color:var(--cream);font:13px "DM Sans",sans-serif;border-radius:0;outline:none}.quote-form input:focus,.quote-form select:focus,.quote-form textarea:focus{border-color:var(--cream)}.quote-form input::placeholder,.quote-form textarea::placeholder{color:rgba(242,237,195,.5)}.quote-form select option{color:var(--green)}.quote-form textarea{resize:vertical}.optional{opacity:.6}.quote-form button{width:max-content;min-width:210px}.form-note{font-size:10px;color:rgba(242,237,195,.6);margin:0}.form-note code{color:var(--cream)}#form-status{font-size:12px;margin:0}.footer{padding:45px 7%;background:var(--green2);color:var(--cream);display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;gap:20px}.footer p{font-size:11px;color:rgba(242,237,195,.7)}.footer-links{display:flex;gap:22px;font-size:11px;justify-content:center}.footer>small{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;font-size:9px;color:rgba(242,237,195,.6)}.footer-mark .monogram{width:32px;height:37px;font-size:26px}
@media(max-width:1000px){.main-nav{gap:15px;font-size:10px}.section-pad{padding:85px 6%}.service-grid{grid-template-columns:repeat(2,1fr);gap:38px 22px}.service-card p{min-height:0}.service-image{height:280px}.feature{gap:6%}.feature-image{min-height:500px}.hero-content{margin-left:7%;width:84%}}
@media(max-width:700px){.site-header{height:72px;padding:0 5%}.menu-toggle{display:block}.main-nav{display:none;position:absolute;top:72px;left:0;right:0;background:var(--green);padding:24px 6% 30px;flex-direction:column;align-items:stretch;gap:18px;border-top:1px solid var(--line)}.main-nav.open{display:flex}.main-nav a{font-size:12px}.nav-cta{text-align:center;margin-top:5px}.hero{min-height:760px;min-height:calc(100svh - 72px)}.hero-photo{background-position:center}.hero-content{width:88%;margin-left:6%;padding:90px 0 130px}.hero h1{font-size:clamp(43px,11vw,68px)}.hero-copy{font-size:14px}.hero-actions{align-items:flex-start;flex-direction:column;gap:17px}.hero-bottom{left:6%;right:6%;font-size:8px;gap:12px}.hero-bottom span:nth-child(2){display:none}.section-pad{padding:70px 6%}.intro-kicker{margin-bottom:25px}.intro-grid,.feature,.contact{grid-template-columns:1fr;gap:30px}.intro h2,.section-heading h2,.feature h2,.process h2,.contact h2{font-size:clamp(38px,9vw,54px)}.section-heading{display:block;margin-bottom:32px}.section-heading>p{margin-top:18px}.service-grid{grid-template-columns:1fr;gap:40px}.service-image{height:270px}.feature-image{min-height:370px;order:0}.feature-copy{order:1}.project-grid{grid-template-columns:1fr}.project-large{grid-row:auto;min-height:380px}.project-large img{min-height:380px}.project{min-height:300px}.project img{min-height:300px}.process-grid{grid-template-columns:1fr;gap:25px}.process h2{margin-bottom:35px}.quote-form{grid-template-columns:1fr}.quote-form label,.quote-form label:nth-child(4),.quote-form label:nth-child(5),.quote-form button,.form-note,#form-status{grid-column:1}.footer{grid-template-columns:1fr;gap:10px;padding:38px 6%}.footer-links{justify-content:flex-start}.footer>small{grid-column:1}.footer p{margin:8px 0}.contact-detail{margin-top:22px}}

/* Real Sayers Spaces project photography */
.img-garden{background-image:url("assets/project-paving-1.jpg") !important;background-position:center 55% !important}
.img-room{background-image:url("assets/service-garden-room-preferred.jpg") !important;background-position:center 50% !important}
.img-veranda{background-image:url("assets/service-veranda-modern.jpg") !important;background-position:center 50% !important}
.img-pergola{background-image:url("assets/service-pergola-glass-room-sharp.jpg") !important;background-position:center 50% !important}
.feature-image{background-image:url("assets/project-garden-room-3.jpg") !important;background-position:center !important}

/* LUXURY EDITORIAL SERVICE SECTION — homepage opening intentionally untouched */
.services.section-pad{padding:clamp(88px,8vw,132px) 5.2%;background:#203b2a;color:#f2edc3;}
.services .section-heading{align-items:end;gap:7%;margin-bottom:clamp(42px,5vw,72px);}
.services .section-heading .eyebrow{font-size:9px;letter-spacing:.24em;margin-bottom:20px;color:#d9d5a6;}
.services .section-heading h2{font-size:clamp(48px,5.1vw,82px);line-height:.99;letter-spacing:-.055em;color:#f2edc3;}
.services .section-heading h2 em{color:#c6cba7;font-style:italic;}
.services .section-heading>p{max-width:300px;font-size:13px;line-height:1.9;color:rgba(242,237,195,.82);margin-bottom:4px;}
.services .service-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2vw,34px);align-items:start;}
.services .service-card{position:relative;display:flex;flex-direction:column;min-height:0;}
.services .service-image{height:clamp(235px,18vw,340px);margin-bottom:24px;background-color:#172a1d;overflow:hidden;position:relative;}
.services .service-image:after{content:"";position:absolute;inset:0;border:1px solid rgba(242,237,195,.13);pointer-events:none;}
.services .service-card:nth-child(even){margin-top:28px;}
.services .service-number{font-size:9px;letter-spacing:.19em;color:#c7cba6;opacity:.9;margin-bottom:7px;}
.services .service-card h3{font-size:clamp(22px,1.65vw,29px);line-height:1.2;letter-spacing:-.025em;margin:5px 0 12px;color:#f2edc3;}
.services .service-card p{font-size:12px;line-height:1.9;color:rgba(242,237,195,.76);min-height:88px;margin:0 0 22px;}
.services .card-link{font-size:10px;letter-spacing:.045em;border-bottom:1px solid rgba(242,237,195,.32);padding:0 0 10px;margin-top:auto;width:max-content;max-width:100%;transition:border-color .2s,color .2s;}
.services .card-link span{display:inline-block;margin-left:16px;transition:transform .2s;}
.services .card-link:hover{border-color:#f2edc3;color:#fffbe2;opacity:1;}
.services .card-link:hover span{transform:translate(3px,-2px);}
.services .service-card:hover .service-image{filter:brightness(1.06);}
@media(max-width:1000px){.services.section-pad{padding:88px 6%;}.services .service-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 26px;}.services .service-card:nth-child(even){margin-top:24px;}.services .service-image{height:clamp(260px,34vw,360px);}.services .service-card p{min-height:0;}}
@media(max-width:700px){.services.section-pad{padding:76px 6%;}.services .section-heading{margin-bottom:34px;}.services .section-heading h2{font-size:clamp(43px,11vw,62px);}.services .section-heading>p{margin-top:20px;font-size:13px;}.services .service-grid{grid-template-columns:1fr;gap:42px;}.services .service-card:nth-child(even){margin-top:0;}.services .service-image{height:auto;aspect-ratio:1.28/1;margin-bottom:19px;}.services .service-card h3{font-size:28px;}.services .service-card p{margin-bottom:20px;}}

/* Portfolio — editorial, image-led gallery */
.projects{padding-top:125px;padding-bottom:125px}
.projects .section-heading{margin-bottom:54px}
.projects .section-heading h2{line-height:1.08}
.portfolio-toolbar{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:18px 0;border-top:1px solid rgba(36,61,43,.18);border-bottom:1px solid rgba(36,61,43,.18);margin-bottom:30px}
.portfolio-label{font-size:9px;letter-spacing:.18em;color:#7b8577;white-space:nowrap}
.portfolio-filters{display:flex;flex-wrap:wrap;gap:8px}
.portfolio-filter{appearance:none;border:1px solid rgba(36,61,43,.22);background:transparent;color:var(--green);font:500 10px "DM Sans",sans-serif;padding:9px 13px;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.portfolio-filter:hover,.portfolio-filter.is-active{background:var(--green);color:var(--cream);border-color:var(--green)}
.portfolio-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;row-gap:52px;align-items:start}
.portfolio-project{min-width:0}
.portfolio-project-feature{grid-row:span 1}
.portfolio-photo{overflow:hidden;background:#e2e3d8;aspect-ratio:1.28 / 1}
.portfolio-project-feature .portfolio-photo{aspect-ratio:1.16 / 1}
.portfolio-photo img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .4s}
.portfolio-project:hover .portfolio-photo img{transform:scale(1.035);filter:saturate(1.04)}
.portfolio-project-meta{display:flex;justify-content:space-between;align-items:center;margin-top:17px;color:#7a8576;font-size:9px;letter-spacing:.16em}
.portfolio-arrow{font-size:17px;letter-spacing:0;color:#53664e;transition:transform .2s}
.portfolio-project:hover .portfolio-arrow{transform:translate(3px,-3px)}
.portfolio-project h3{font:400 clamp(22px,2.4vw,31px)/1.2 "Playfair Display",serif;color:var(--green);margin:9px 0 6px;letter-spacing:-.025em}
.portfolio-project>p{font-size:12px;color:#70796d;margin:0;max-width:430px}
.portfolio-project[hidden]{display:none}
.portfolio-cta{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-top:65px;padding-top:24px;border-top:1px solid rgba(36,61,43,.2)}
.portfolio-cta p{font:400 25px "Playfair Display",serif;color:var(--green);margin:0}
.portfolio-cta .inline-link{margin:0}
.portfolio-note{font-size:10px;color:#777e72;margin-top:28px}
@media(min-width:1100px){.portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:48px 24px}.portfolio-project-feature .portfolio-photo{aspect-ratio:1.05 / 1}.portfolio-photo{aspect-ratio:1.05 / 1}}
@media(max-width:850px){.portfolio-toolbar{align-items:flex-start;flex-direction:column}.portfolio-grid{gap:38px 20px}}
@media(max-width:600px){.projects{padding-top:75px;padding-bottom:75px}.portfolio-grid{grid-template-columns:1fr;row-gap:34px}.portfolio-photo,.portfolio-project-feature .portfolio-photo{aspect-ratio:1.15 / 1}.portfolio-filters{gap:7px}.portfolio-filter{padding:8px 10px;font-size:9px}.portfolio-cta{align-items:flex-start;flex-direction:column;margin-top:45px}}

/* =====================================================================
   OPENING SCREEN + HEADER (rebuilt in working HTML to match the approved
   mock-up). Replaces the earlier stacked header/hero overrides.
   ===================================================================== */
.skip-link{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--cream);color:var(--green);padding:10px 16px;font-size:12px}
.skip-link:focus{left:12px}
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--cream);outline-offset:3px}
.intro a:focus-visible,.feature a:focus-visible,.projects a:focus-visible,.projects button:focus-visible,.process a:focus-visible{outline-color:var(--green)}

.site-header{position:fixed;top:0;left:0;right:0;z-index:50;height:auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:24px;padding:clamp(28px,3.6vw,52px) 5.6% 0;background:transparent;border:0;color:var(--cream);transition:background .3s,padding .3s,box-shadow .3s}
.site-header .main-nav{display:flex;align-items:center;gap:clamp(14px,2.1vw,38px);font-size:clamp(11px,.86vw,15px);font-weight:500;letter-spacing:.2em;text-transform:uppercase;padding-top:clamp(4px,.8vw,14px)}
.site-header .main-nav a:not(.nav-cta){opacity:1;padding:4px 0;border-bottom:1px solid transparent;transition:border-color .2s}
.site-header .main-nav a:not(.nav-cta):hover{opacity:1;border-color:rgba(242,237,195,.7)}
.nav-sep{opacity:.75;font-weight:400}
.nav-left{grid-column:1;justify-content:flex-start;padding-left:clamp(0px,1.4vw,24px)}
.nav-right{grid-column:3;justify-content:flex-end}
.site-header .nav-cta{border:0;background:var(--cream);color:var(--green);padding:clamp(14px,1.3vw,22px) clamp(18px,1.6vw,30px);font-weight:600;letter-spacing:.16em;margin-left:clamp(0px,.6vw,10px);margin-top:calc(-1 * clamp(4px,1vw,18px));white-space:nowrap;transition:transform .2s,background .2s}
.site-header .nav-cta:hover{transform:translateY(-2px);background:#fffbe2}
.site-header .nav-cta span{margin-left:14px}
.site-header .wordmark{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.8vw,14px);color:var(--cream);transition:gap .3s}
.site-header .wordmark img{width:clamp(70px,6.4vw,118px);height:auto;transition:width .3s}
.site-header .brand-name{font-family:"DM Sans",sans-serif;font-weight:400;font-size:clamp(24px,2.35vw,44px);letter-spacing:.14em;line-height:1;text-align:center;padding-left:.14em}
.site-header .brand-name small{display:block;font-size:.46em;letter-spacing:.62em;margin-top:.45em;padding-left:.62em}
.menu-toggle,.mobile-nav{display:none}
/* compact solid header once the visitor scrolls */
.site-header.is-scrolled{background:rgba(16,27,20,.96);box-shadow:0 1px 0 var(--line);padding-top:12px;padding-bottom:12px;align-items:center}
.site-header.is-scrolled .wordmark{flex-direction:row;gap:12px}
.site-header.is-scrolled .wordmark img{width:44px}
.site-header.is-scrolled .brand-name{font-size:18px}
.site-header.is-scrolled .main-nav{padding-top:0}
.site-header.is-scrolled .nav-cta{margin-top:0;padding:11px 16px}
html{scroll-padding-top:80px}

.hero{position:relative;display:flex;align-items:flex-end;min-height:max(100svh,640px);height:auto;padding:0;overflow:hidden;color:var(--cream);background:#10180f}
.hero-photo{position:absolute;inset:0;display:block;background:url("assets/hero-night-garden.jpg") center center/cover no-repeat;filter:none;transform:none}
.hero-shade{position:absolute;inset:0;display:block;background:linear-gradient(90deg,rgba(6,12,7,.72) 0%,rgba(6,12,7,.5) 30%,rgba(6,12,7,.08) 58%,transparent 75%),linear-gradient(180deg,rgba(6,12,7,.45) 0%,transparent 22%),linear-gradient(0deg,rgba(6,12,7,.35),transparent 30%)}
.hero-content{position:relative;z-index:1;display:block;width:min(46%,820px);margin:0 0 0 5.6%;padding:clamp(240px,27vh,320px) 0 clamp(70px,10vh,110px)}
.hero .eyebrow{font-size:clamp(11px,.85vw,15px);font-weight:500;letter-spacing:.2em;margin:0 0 clamp(20px,2vw,34px)}
.hero .eyebrow span{margin:0 .5em}
.hero h1{font-family:"Playfair Display",serif;font-weight:400;font-size:clamp(50px,5.1vw,96px);line-height:.98;letter-spacing:-.035em;max-width:7.2em;margin:0;color:#fbf8ea;text-shadow:0 2px 30px rgba(0,0,0,.25)}
.hero h1 em{display:block;font-style:italic;color:#fbf8ea;white-space:nowrap;margin-top:.04em}
.hero-copy{max-width:540px;font-size:clamp(15px,.98vw,18px);line-height:1.75;color:#f6f2df;margin:clamp(22px,2.2vw,36px) 0 clamp(28px,2.6vw,44px)}
.hero-actions{display:flex;flex-wrap:wrap;gap:clamp(14px,1.7vw,30px)}
.hero .button{padding:clamp(17px,1.4vw,24px) clamp(24px,1.8vw,32px);font-size:clamp(11px,.78vw,14px);letter-spacing:.16em;gap:clamp(22px,1.8vw,34px)}
.button-outline{border:1px solid rgba(242,237,195,.95);color:var(--cream);background:rgba(8,14,9,.35)}
.button-outline:hover{background:rgba(242,237,195,.12)}
.footer-mark img{width:38px;height:38px;object-fit:contain}

@media(max-width:1100px){
  .site-header{gap:14px}
  .site-header .main-nav{gap:12px;letter-spacing:.14em}
  .hero-content{width:min(62%,640px)}
}
@media(max-width:900px){
  .site-header,.site-header.is-scrolled{display:flex;justify-content:center;align-items:center;padding:16px 5%}
  .site-header .main-nav{display:none}
  .site-header .wordmark{flex-direction:row;gap:10px}
  .site-header .wordmark img{width:46px}
  .site-header .brand-name{font-size:19px}
  .menu-toggle{display:flex;align-items:center;justify-content:center;position:absolute;right:4%;top:50%;transform:translateY(-50%);width:46px;height:46px;font-size:24px;color:var(--cream);background:rgba(8,15,10,.35);border:1px solid rgba(242,237,195,.4);cursor:pointer}
  .mobile-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:4px;padding:14px 6% 26px;background:rgba(14,25,17,.98);border-top:1px solid var(--line)}
  .mobile-nav.open{display:flex}
  .mobile-nav a{font-size:13px;letter-spacing:.16em;text-transform:uppercase;padding:13px 0;border-bottom:1px solid var(--line)}
  .mobile-nav .nav-cta{margin-top:14px;text-align:center;background:var(--cream);color:var(--green);border:0;font-weight:600}
  .hero{min-height:max(100svh,600px)}
  .hero-photo{background-image:url("assets/hero-night-garden-960.jpg");background-position:68% center}
  .hero-shade{background:linear-gradient(0deg,rgba(6,12,7,.88) 0%,rgba(6,12,7,.6) 45%,rgba(6,12,7,.25) 75%,rgba(6,12,7,.5) 100%)}
  .hero-content{width:auto;margin:0 6%;padding:150px 0 64px}
}
@media(max-width:600px){
  .hero h1{font-size:clamp(40px,11.5vw,56px);max-width:none}
  .hero h1 em{white-space:normal}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero .button{justify-content:space-between}
  .hero .eyebrow{font-size:10px;letter-spacing:.16em}
  .hero .eyebrow span{margin:0 .25em}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.visually-hidden{position:absolute!important;left:0!important;top:0!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap;border:0!important;padding:0!important;margin:0!important}
.contact-detail a{border-bottom:1px solid var(--line)}.contact-detail a:hover{border-color:var(--cream)}
.form-note a,#form-status a{text-decoration:underline;color:var(--cream)}
.footer p a:hover,.footer-links a:hover{opacity:.7}
.footer-links{flex-wrap:wrap}
.quote-form button[disabled]{opacity:.6;cursor:wait}
.site-header .main-nav{height:clamp(50px,4vw,66px);padding-top:0;align-items:center}
.site-header .nav-cta{margin-top:0;display:inline-flex;align-items:center;height:100%}
.site-header.is-scrolled .main-nav{height:44px}

/* Portfolio: photos open larger */
button.portfolio-photo{display:block;width:100%;padding:0;border:0;cursor:zoom-in}
button.portfolio-photo:focus-visible{outline:2px solid var(--green);outline-offset:3px}
.lightbox{width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(10,16,12,.94);color:var(--cream)}
.lightbox[open]{display:flex;align-items:center;justify-content:center}
.lightbox::backdrop{background:rgba(10,16,12,.94)}
.lb-figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;max-width:min(1200px,86vw);touch-action:pan-y}
.lb-figure img{max-width:100%;max-height:78vh;object-fit:contain;box-shadow:0 10px 40px rgba(0,0,0,.45)}
.lb-figure figcaption{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;font-size:13px;color:rgba(242,237,195,.8)}
.lb-figure figcaption strong{font:400 24px "Playfair Display",serif;color:var(--cream)}
#lb-count{font-size:9px;letter-spacing:.2em}
.lb-nav,.lb-close{position:absolute;border:1px solid rgba(242,237,195,.35);background:rgba(10,18,12,.6);color:var(--cream);cursor:pointer;font:300 30px/1 "DM Sans",sans-serif}
.lb-nav{top:50%;transform:translateY(-50%);width:50px;height:64px}
.lb-prev{left:2vw}.lb-next{right:2vw}
.lb-close{top:18px;right:18px;width:46px;height:46px;font-size:28px}
.lb-nav:hover,.lb-close:hover{border-color:var(--cream)}
@media(max-width:700px){.lb-nav{top:auto;bottom:18px;transform:none;width:46px;height:46px}.lb-prev{left:18px}.lb-next{right:18px}.lb-figure{max-width:94vw}.lb-figure img{max-height:68vh}}

/* ---------- Service pages ---------- */
.svc-hero{position:relative;min-height:min(78vh,720px);display:flex;align-items:flex-end;color:var(--cream);background:#10180f;overflow:hidden}
.svc-hero-photo{position:absolute;inset:0;background:center/cover no-repeat}
.svc-hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(6,12,7,.78) 0%,rgba(6,12,7,.45) 45%,rgba(6,12,7,.05) 80%),linear-gradient(0deg,rgba(6,12,7,.55),transparent 45%)}
.svc-hero-content{position:relative;z-index:1;width:min(640px,88%);margin:0 0 0 7%;padding:150px 0 70px}
.svc-hero h1{font:400 clamp(44px,5vw,84px)/1 "Playfair Display",serif;letter-spacing:-.035em;margin:0;color:#fbf8ea}
.svc-hero h1 em{color:#d9d5a6}
.svc-lead{font-size:clamp(15px,1.05vw,18px);line-height:1.75;color:#f6f2df;margin:22px 0 30px;max-width:540px}
.svc-tabs{display:flex;gap:0;overflow-x:auto;background:var(--green2);border-bottom:1px solid var(--line);padding:0 5%}
.svc-tabs a{flex:none;padding:16px 20px;color:rgba(242,237,195,.75);font-size:11px;letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid transparent}
.svc-tabs a:hover{color:var(--cream)}
.svc-tabs a[aria-current="page"]{color:var(--cream);border-color:var(--cream)}
.svc-intro{display:grid;grid-template-columns:.9fr 1.1fr;gap:8%;background:var(--paper)}
.svc-intro-copy p{font-size:16px;line-height:1.8;color:#4f5a4c;margin:0 0 18px}
.svc-intro-copy p:first-child{font:400 clamp(22px,2vw,30px)/1.35 "Playfair Display",serif;color:var(--green)}
.svc-features{display:grid;grid-template-columns:1fr 1fr;gap:30px 34px}
.svc-feature{border-top:1px solid #aeb6a5;padding-top:16px}
.svc-feature h3{font:400 21px/1.25 "Playfair Display",serif;color:var(--green);margin:0 0 8px}
.svc-feature p{font-size:13px;line-height:1.75;color:#687165;margin:0}
.svc-work{background:#eeecdf}
.svc-work .section-heading>p .inline-link{margin:0}
.svc-cta{background:var(--green);color:var(--cream);text-align:center;display:flex;flex-direction:column;align-items:center}
.svc-cta h2{font:400 clamp(34px,3.6vw,54px)/1.05 "Playfair Display",serif;letter-spacing:-.03em;margin:0 0 14px}
.svc-cta h2 em{color:#c7cba6}
.svc-cta p{color:rgba(242,237,195,.8);margin:0 0 26px}
.svc-cta .hero-actions{justify-content:center}
/* ---------- FAQ ---------- */
.faq{background:var(--paper);display:grid;grid-template-columns:.7fr 1.3fr;gap:8%}
.faq-head h2{font:400 clamp(38px,4.4vw,62px)/1.04 "Playfair Display",serif;letter-spacing:-.045em;color:var(--green);margin:0 0 18px}
.faq-head h2 em{color:#77856e}
.faq-head p:not(.eyebrow){color:var(--muted);font-size:13px}
.faq-list{border-top:1px solid #c9cdbf}
.faq-item{border-bottom:1px solid #c9cdbf}
.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:baseline;padding:20px 0;font:400 clamp(18px,1.5vw,22px)/1.35 "Playfair Display",serif;color:var(--green)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:after{content:"+";flex:none;font:300 24px/1 "DM Sans",sans-serif;color:#77856e;transition:transform .2s}
.faq-item[open] summary:after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--green);outline-offset:4px}
.faq-item p{margin:-4px 0 22px;max-width:720px;font-size:14px;line-height:1.8;color:#4f5a4c}
.faq-page{background:var(--paper);max-width:1100px;margin:0 auto}
.faq-page h1{font:400 clamp(44px,5vw,76px)/1 "Playfair Display",serif;letter-spacing:-.04em;color:var(--green);margin:0 0 18px}
.faq-page h1 em{color:#77856e}
.faq-page .eyebrow{color:#61705e}
.faq-intro{max-width:640px;color:#4f5a4c;font-size:15px}
.faq-jump{display:flex;flex-wrap:wrap;gap:8px;margin:28px 0 20px}
.faq-jump a{border:1px solid rgba(36,61,43,.25);padding:9px 14px;font-size:11px;letter-spacing:.08em;color:var(--green)}
.faq-jump a:hover{background:var(--green);color:var(--cream)}
.faq-group{scroll-margin-top:100px;margin-top:46px}
.faq-group h2{font:400 28px "Playfair Display",serif;color:var(--green);margin:0 0 6px}
.svc-cta-inline{margin-top:60px;padding:30px;background:#eeecdf}
.svc-cta-inline h2{font:400 26px "Playfair Display",serif;color:var(--green);margin:0 0 8px}
.svc-cta-inline a{text-decoration:underline}
.site-header.is-solid{position:sticky;top:0;background:rgba(16,27,20,.98)}
@media(max-width:900px){.svc-intro,.faq{grid-template-columns:1fr;gap:34px}.svc-hero-content{margin:0 6%;padding:120px 0 50px}}
@media(max-width:600px){.svc-features{grid-template-columns:1fr}.svc-tabs{padding:0}.svc-tabs a{padding:14px 14px}}
.faq-head .inline-link,.svc-work .section-heading .inline-link{margin:0;padding-bottom:1px}

/* Portfolio: a compact grid (big feature photo, small tiles) with "show more" */
.projects .portfolio-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 18px}
.projects .portfolio-project-feature{grid-column:span 2;grid-row:span 2}
.projects .portfolio-photo{aspect-ratio:4 / 3}
.projects .portfolio-project-feature .portfolio-photo{aspect-ratio:auto;height:calc(100% - 64px);min-height:300px}
.projects .portfolio-project h3{font-size:clamp(17px,1.3vw,21px);margin:6px 0 0}
.projects .portfolio-project>p{display:none}
.projects .portfolio-project-feature>p{display:block;margin-top:4px}
.projects .portfolio-project-meta{margin-top:12px}
.portfolio-project.is-extra{display:none}
.portfolio-more{display:flex;justify-content:center;margin-top:38px}
.portfolio-more[hidden]{display:none}
@media(max-width:1000px){.projects .portfolio-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.projects .portfolio-project-feature{grid-column:span 3;grid-row:auto}.projects .portfolio-project-feature .portfolio-photo{aspect-ratio:16 / 9;height:auto}}
@media(max-width:600px){.projects .portfolio-grid{grid-template-columns:1fr 1fr;gap:18px 10px}.projects .portfolio-project-feature{grid-column:span 2}.projects .portfolio-project-feature .portfolio-photo{min-height:0}.projects .portfolio-project h3{font-size:15px}.projects .portfolio-project-meta{font-size:8px;margin-top:8px}.portfolio-arrow{display:none}}
/* the big feature photo fills exactly two rows of small tiles, without stretching them */
@media(min-width:1001px){
  .projects .portfolio-project-feature{display:flex;flex-direction:column}
  .projects .portfolio-project-feature .portfolio-photo{position:relative;flex:1;height:auto;min-height:0}
  .projects .portfolio-project-feature .portfolio-photo img{position:absolute;inset:0}
}
.portfolio-project[hidden],.portfolio-project.is-extra{display:none!important}
@media(min-width:1001px){.projects .portfolio-project-feature{align-self:stretch}}

.portfolio-photo{position:relative}
.pp-count{position:absolute;right:10px;bottom:10px;padding:5px 9px;background:rgba(16,27,20,.82);color:var(--cream);font:600 10px "DM Sans",sans-serif;letter-spacing:.08em;text-transform:uppercase}

/* hero: link straight to the 3D designer */
.hero-design-link{display:inline-flex;align-items:center;gap:14px;margin-top:22px;padding:12px 16px 12px 12px;border:1px solid rgba(242,237,195,.35);background:rgba(8,14,9,.45);color:var(--cream);max-width:440px;transition:background .2s,border-color .2s}
.hero-design-link:hover{background:rgba(242,237,195,.12);border-color:var(--cream)}
.hdl-icon{flex:none;display:grid;place-items:center;width:38px;height:38px;background:var(--cream);color:var(--green)}
.hero-design-link strong{display:block;font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.hero-design-link small{display:block;font-size:12px;color:rgba(242,237,195,.78);margin-top:2px}
@media(max-width:600px){.hero-design-link{display:flex;margin-top:16px}}