
:root{
  --black:#100d0a; --charcoal:#1b1612; --soft:#f4eee4; --warm:#e7d9c8;
  --gold:#c99b52; --gold2:#e4bf78; --gold-deep:#9b6a2f; --champagne:#d8b777;
  --white:#fffaf2; --text:#211a15; --muted:#786e64;
  --line:rgba(20,20,20,.15); --max:1380px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,Arial,sans-serif;background:#f6f0e7;color:var(--text);font-weight:300}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
img{display:block;width:100%}
a{text-decoration:none;color:inherit}
.site-header{position:fixed;z-index:50;top:0;left:0;right:0;height:88px;display:flex;align-items:center;padding:0 clamp(22px,4vw,70px);border-bottom:1px solid rgba(255,255,255,.13);background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,.12));color:white;transition:.25s}
.site-header.scrolled{height:72px;background:rgba(12,12,12,.96);backdrop-filter:blur(14px)}
.brand{width:155px;height:58px;overflow:hidden;display:flex;align-items:center}
.brand img{width:100%;transform:scale(1.02)}
.desktop-nav{display:flex;gap:28px;margin-left:auto;margin-right:30px;font-size:13px;letter-spacing:.04em}
.desktop-nav a{opacity:.82}
.desktop-nav a:hover{opacity:1}
.btn{border:0;padding:14px 20px;text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:600;transition:.2s}
.btn-gold{background:linear-gradient(110deg,#a8792f,var(--gold2));color:#0d0d0d}
.btn-gold:hover{filter:brightness(1.08);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:white;border:1px solid rgba(255,255,255,.7)}
.btn-ghost-dark{background:transparent;border:1px solid #aaa;color:#333}
.btn-outline-light{background:transparent;color:white;border:1px solid rgba(255,255,255,.55)}
.btn-large{padding:18px 27px}
.menu-btn{display:none;margin-left:auto;background:none;border:none;color:white;font-size:24px}
.mobile-menu{position:fixed;z-index:49;top:72px;left:0;right:0;background:#15100c;color:white;padding:24px;display:grid;gap:20px}
.mobile-menu[hidden]{display:none}
.hero{height:100svh;min-height:720px;position:relative;color:white;overflow:hidden;background:#15100c}
.hero-bg,.final-bg{position:absolute;inset:0;background-image:url('assets/project-night.jpg');background-size:cover;background-position:center;transform:scale(1.015)}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.78),rgba(0,0,0,.36) 52%,rgba(0,0,0,.12)),linear-gradient(0deg,rgba(0,0,0,.32),transparent)}
.hero-content{position:relative;z-index:2;max-width:820px;padding:0 clamp(24px,7vw,110px);top:51%;transform:translateY(-50%)}
.eyebrow,.section-kicker{font-size:11px;letter-spacing:.22em;font-weight:600;text-transform:uppercase;color:var(--gold)}
.hero h1{font-family:Manrope,Inter,sans-serif;font-size:clamp(62px,8.5vw,136px);line-height:.87;margin:24px 0 30px;letter-spacing:-.055em;font-weight:400}
.hero h1 span{font-weight:300;color:#e9e6df}
.hero-copy{font-size:clamp(17px,1.5vw,22px);line-height:1.55;max-width:650px;color:rgba(255,255,255,.82)}
.hero-actions{display:flex;gap:12px;margin-top:36px}
.scroll-cue{position:absolute;z-index:3;bottom:30px;right:50px;font-size:10px;text-transform:uppercase;letter-spacing:.2em;display:flex;gap:12px;align-items:center;color:#ddd}
.scroll-cue span{display:block;width:45px;height:1px;background:#bbb}
.section{padding:clamp(80px,10vw,150px) clamp(24px,6vw,95px)}
.intro{max-width:var(--max);margin:auto}
.intro-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:10vw;margin-top:32px;align-items:start}
h2{font-family:Manrope,Inter,sans-serif;font-size:clamp(36px,4.8vw,76px);line-height:1.05;letter-spacing:-.045em;font-weight:400;margin:0}
.intro-grid p,.section-heading p,.commercial-grid p,.about-copy p{font-size:17px;line-height:1.8;color:#625e58;margin-top:12px}
.text-link,.footer-link{border:none;background:none;padding:0;margin-top:22px;font-weight:500}
.dark{background:var(--black);color:white}
.section-heading{max-width:var(--max);margin:0 auto 55px;display:grid;grid-template-columns:1.1fr .7fr;gap:9vw;align-items:end}
.section-heading .section-kicker{margin-bottom:20px}
.dark .section-heading p,.dark p{color:#aaa}
.service-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.service-card{height:650px;position:relative;overflow:hidden}
.service-card img{height:100%;object-fit:cover;transition:.7s}
.service-card:hover img{transform:scale(1.035)}
.service-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.78),transparent 65%)}
.service-content{position:absolute;left:28px;right:28px;bottom:28px}
.service-content span{font-size:11px;color:var(--gold);letter-spacing:.14em}
.service-content h3{font-family:Manrope;font-size:28px;font-weight:400;margin:10px 0}
.service-content p{font-size:14px;line-height:1.6;margin:0;color:#ddd}
.projects{background:#f6f0e7}
.muted-note{font-size:12px!important;line-height:1.6!important}
.project-mosaic{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:1fr 1fr;gap:14px}
.project{margin:0;position:relative;overflow:hidden;min-height:320px;background:#ddd}
.project-large{grid-row:1/3;min-height:760px}
.project img{height:100%;object-fit:cover;transition:.6s}
.project:hover img{transform:scale(1.025)}
.project figcaption{position:absolute;left:0;right:0;bottom:0;padding:45px 28px 24px;color:white;background:linear-gradient(0deg,rgba(0,0,0,.7),transparent)}
.project figcaption span{display:block;font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#e2c078}
.project figcaption strong{font-family:Manrope;font-size:24px;font-weight:400}
.warm{background:var(--warm)}
.process-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.process-step{padding:32px;min-height:240px;border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.process-step span{font-size:11px;color:#8e6a31;letter-spacing:.12em}
.process-step h3{font-family:Manrope;font-size:25px;font-weight:400;margin:35px 0 10px}
.process-step p{color:#6a625a;line-height:1.65;font-size:14px}
.estimator{background:#f6f0e7}
.estimator-card{max-width:var(--max);margin:auto;background:linear-gradient(135deg,#17110d,#241a12);color:white;padding:clamp(40px,6vw,88px);display:flex;justify-content:space-between;align-items:end;gap:50px}
.estimator-card h2{max-width:800px;margin:20px 0}
.estimator-card p{max-width:720px;color:#aaa;line-height:1.7}
.commercial-grid{max-width:var(--max);margin:auto;display:grid;grid-template-columns:1.2fr .8fr;gap:10vw;align-items:end}
.commercial-grid .btn{margin-top:20px}
.about{display:grid;grid-template-columns:1fr 1fr;max-width:var(--max);margin:auto;gap:8vw;align-items:center}
.about-image{height:720px;overflow:hidden}
.about-image img{height:100%;object-fit:cover}
.about-copy .section-kicker{margin-bottom:20px}
.final-cta{height:650px;position:relative;color:white;display:grid;place-items:center;text-align:center;overflow:hidden}
.final-bg{background-image:url('assets/project-front.jpg')}
.final-overlay{position:absolute;inset:0;background:rgba(0,0,0,.63)}
.final-content{z-index:2;max-width:800px;padding:30px}
.final-content h2{margin:18px 0}
.final-content p{color:#ddd;margin:0 auto 28px;font-size:18px}
.light{color:#e2c078}
footer{background:#0d0a08;color:#ddd;padding:70px clamp(24px,6vw,95px) 28px}
.footer-brand{max-width:260px}
.footer-brand img{width:180px}
.footer-brand p{font-size:10px;letter-spacing:.15em;text-transform:uppercase;color:#8d8d8d}
.footer-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;max-width:720px;margin-left:auto;margin-top:-80px}
.footer-cols div{display:grid;gap:10px;font-size:13px}
.footer-cols span{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#b58a44;margin-bottom:8px}
.footer-link{color:#ddd;text-align:left;margin:0;font-weight:300;font-size:13px}
.footer-bottom{border-top:1px solid #242424;margin-top:70px;padding-top:25px;display:flex;justify-content:space-between;color:#666;font-size:11px}

/* Dialogs */
.modal{width:min(900px,calc(100% - 30px));max-height:92vh;border:0;padding:0;background:#f6f0e7;color:#211a15;box-shadow:0 30px 100px rgba(0,0,0,.45)}
.modal::backdrop{background:rgba(0,0,0,.78);backdrop-filter:blur(5px)}
.modal-close{position:absolute;right:18px;top:12px;font-size:30px;background:none;border:none;z-index:3;color:#555}
.modal-head{padding:48px 52px 26px}
.modal-head h2{font-size:clamp(34px,5vw,58px);margin:10px 0}
.modal-head p{color:#777}
.modal form{padding:0 52px 48px}
.progress{height:2px;background:#ddd;margin-bottom:34px}
.progress span{display:block;height:100%;background:#b88942;width:25%;transition:.25s}
.form-step{display:none;border:0;padding:0;margin:0}
.form-step.active{display:block}
.form-step legend{font-family:Manrope;font-size:25px;margin-bottom:22px}
.choice-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.choice-grid input{display:none}
.choice-grid span{display:block;border:1px solid #d2cec7;background:white;padding:18px;transition:.2s}
.choice-grid input:checked + span{border-color:#a9782f;background:#f0e4cf}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
label{display:grid;gap:8px;font-size:12px;font-weight:500;letter-spacing:.03em}
input,select,textarea{width:100%;border:1px solid #d8d2c9;background:white;padding:14px 13px;border-radius:0;outline:none}
input:focus,select:focus,textarea:focus{border-color:#a77c3a}
.upload-label{margin-top:16px}
.upload-label span{font-weight:300;color:#777}
.consent{display:flex;grid-template-columns:auto 1fr;align-items:center;margin-top:20px}
.consent input{width:auto}
.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:28px}
#enquiryBack{margin-right:auto}
#enquirySubmit{display:none}
.success-state{text-align:center;padding:70px 45px}
.success-icon{width:64px;height:64px;border-radius:100px;background:#c49a50;display:grid;place-items:center;margin:auto;font-size:30px}
.success-state h2{font-size:45px;margin:20px 0 10px}
.success-state p{color:#777}
.estimator-calc{margin-top:25px}
.estimate-result{margin:0 52px 52px;padding:28px;background:linear-gradient(135deg,#17110d,#241a12);color:white}
.estimate-result span{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#d4ad67}
.estimate-result strong{display:block;font-family:Manrope;font-size:clamp(34px,6vw,62px);font-weight:400;margin:8px 0}
.estimate-result p{color:#999;line-height:1.6;font-size:13px;max-width:650px}

@media (max-width:900px){
  .desktop-nav,.header-cta{display:none}.menu-btn{display:block}
  .site-header{height:72px}.brand{width:130px;height:48px}
  .hero-content{top:52%}.hero{min-height:650px}
  .intro-grid,.section-heading,.commercial-grid,.about{grid-template-columns:1fr;gap:35px}
  .service-grid{grid-template-columns:1fr}.service-card{height:520px}
  .project-mosaic{grid-template-columns:1fr;grid-template-rows:auto}.project-large{grid-row:auto;min-height:520px}.project{min-height:430px}
  .process-grid{grid-template-columns:1fr 1fr}
  .estimator-card{align-items:flex-start;flex-direction:column}
  .about-image{height:520px}
  .footer-cols{margin:50px 0 0;max-width:none}
}
@media (max-width:600px){
  .section{padding:75px 22px}
  .hero h1{font-size:62px}.hero-copy{font-size:16px}.hero-actions{flex-direction:column;align-items:flex-start}
  .scroll-cue{right:22px}
  .service-card{height:460px}
  .process-grid{grid-template-columns:1fr}
  .project-large,.project{min-height:420px}
  .about-image{height:420px}
  .footer-cols{grid-template-columns:1fr 1fr}.footer-bottom{gap:20px}
  .modal-head,.modal form{padding-left:22px;padding-right:22px}
  .choice-grid,.field-grid{grid-template-columns:1fr}
  .estimate-result{margin:0 22px 30px}
}


/* v2 — warmer architectural luxury direction */
.hero-overlay{
  background:
    linear-gradient(90deg,rgba(17,10,5,.84),rgba(28,16,8,.43) 52%,rgba(35,19,8,.16)),
    linear-gradient(0deg,rgba(29,16,7,.42),transparent 55%);
}
.hero h1 span{
  color:var(--gold2);
  background:linear-gradient(110deg,#b98237,#f0cf8a 52%,#b77a2d);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.gold-word{color:var(--gold);font-weight:400}
.intro h2::first-line{color:var(--text)}
.section-kicker{color:var(--gold-deep)}
.dark .section-kicker,.commercial .section-kicker,.estimator-card .section-kicker,.final-content .section-kicker{color:var(--gold2)}
.dark{background:linear-gradient(135deg,#100c09 0%,#19110b 58%,#100c09 100%)}
.warm{background:linear-gradient(135deg,#eadfce,#dfcdb8)}
.service-shade{
  background:linear-gradient(0deg,rgba(22,12,5,.88),rgba(34,18,8,.08) 72%);
}
.project figcaption{
  background:linear-gradient(0deg,rgba(28,14,5,.82),transparent);
}
.estimator-card{
  border:1px solid rgba(201,155,82,.22);
  box-shadow:0 28px 80px rgba(82,48,18,.10);
}
.commercial{
  background:
    radial-gradient(circle at 80% 25%,rgba(168,105,39,.14),transparent 34%),
    linear-gradient(135deg,#100c09,#1c130d);
}
.final-overlay{
  background:linear-gradient(90deg,rgba(24,12,5,.76),rgba(29,16,7,.58));
}
.final-content h2{color:#fff7ec}
.final-content h2::first-letter{color:var(--gold2)}
.text-link{color:#8f612b}
footer{background:linear-gradient(135deg,#0c0907,#15100c)}

/* Production contact links */
.footer-link{display:block;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.success-state a{color:#b78631}
@media (max-width:760px){.hero-content h1{overflow-wrap:normal}.site-header{padding-inline:18px}}
.form-hint{font-size:14px;line-height:1.5;color:#6c6258;margin:14px 0}
.description-label{margin-top:22px}
.choice-grid input:focus-visible+span{outline:3px solid #a9782f;outline-offset:2px}
.website-field{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{margin:18px 0;color:#9d2929;font-size:14px;line-height:1.5}
.modal label{font-size:14px}.modal input,.modal select,.modal textarea{font-size:16px}
