/* =========================================================
   Cybertron Custom Homes Demo — Cybertron Softech
   Static demo stylesheet (no build process, no frameworks)
   Theme: Architectural Luxury + Warm Canadian Homebuilding
   Typography scale matches the roofing demo baseline.
   ========================================================= */

html { font-size: 16px; scroll-behavior: smooth; }

:root{
  --charcoal:#221F1D;
  --charcoal-deep:#171514;
  --cream:#F5EFE4;
  --cream-deep:#EDE4D3;
  --wood:#8B5A3C;
  --wood-dark:#6B4229;
  --gold:#B9975B;
  --gold-dark:#93763F;
  --stone:#D8D3C8;
  --forest:#2F4B3C;
  --forest-dark:#213629;
  --white:#FFFFFF;
  --text-muted:#655E54;
  --border:#E3DCCC;
  --radius:10px;
  --radius-lg:18px;
  --shadow-sm:0 2px 14px rgba(34,31,29,.10);
  --shadow-md:0 16px 36px rgba(34,31,29,.16);
  --shadow-lg:0 30px 70px rgba(34,31,29,.28);
  --maxw:1200px;
  --font-display:'Poppins','Segoe UI',Arial,sans-serif;
  --font-body:'Inter','Segoe UI',Arial,sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0;
  font-size:16px;
  line-height:1.65;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  font-family:var(--font-body);
  color:var(--charcoal);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.2;margin:0 0 .5em;font-weight:700;color:var(--charcoal);letter-spacing:-.01em;}
p{margin:0 0 1em;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:inherit;}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
.section{padding:100px 0;}
.section-tight{padding:64px 0;}
.bg-cream{background:var(--cream);}
.bg-charcoal{background:var(--charcoal);color:var(--cream);}
.bg-charcoal h2,.bg-charcoal h3{color:#fff;}
.bg-forest{background:var(--forest);color:#fff;}
.blueprint-bg{
  background-image:linear-gradient(rgba(34,31,29,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,31,29,.05) 1px, transparent 1px);
  background-size:40px 40px;
}
.eyebrow{
  display:inline-block;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:700;color:var(--gold-dark);background:rgba(185,151,91,.14);
  padding:6px 18px;border-radius:2px;margin-bottom:18px;
}
.section-head{max-width:760px;margin:0 auto 56px;text-align:center;}
.section-head h2{font-size:clamp(1.9rem,3vw,2.7rem);}
.section-head p{color:var(--text-muted);font-size:1.05rem;}
.demo-note{font-size:.88rem;color:var(--text-muted);font-style:italic;margin-top:8px;}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:16px 30px;border-radius:2px;font-weight:700;font-size:.98rem;letter-spacing:.02em;
  border:1.5px solid transparent;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, background .2s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--gold);color:var(--charcoal-deep);box-shadow:var(--shadow-sm);}
.btn-primary:hover{background:var(--gold-dark);box-shadow:var(--shadow-md);transform:translateY(-2px);color:#fff;}
.btn-forest{background:var(--forest);color:#fff;box-shadow:var(--shadow-sm);}
.btn-forest:hover{background:var(--forest-dark);box-shadow:var(--shadow-md);transform:translateY(-2px);}
.btn-outline{background:transparent;border-color:rgba(255,255,255,.5);color:#fff;}
.btn-outline:hover{background:rgba(255,255,255,.12);border-color:#fff;}
.btn-outline-dark{background:transparent;border-color:var(--charcoal);color:var(--charcoal);}
.btn-outline-dark:hover{background:var(--charcoal);color:#fff;}
.btn-block{width:100%;}
.btn-sm{padding:11px 20px;font-size:.98rem;}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none !important;}

/* Trust bar */

/* Header */
.site-header{position:sticky;top:0;z-index:90;background:var(--white);border-bottom:1px solid var(--border);}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;max-width:var(--maxw);margin:0 auto;gap:20px;}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.1rem;color:var(--charcoal);}
.brand .mark{
  width:42px;height:42px;border-radius:2px;background:var(--charcoal);
  display:flex;align-items:center;justify-content:center;color:var(--gold);font-weight:800;font-size:1.1rem;flex-shrink:0;
}
.main-nav{display:flex;align-items:center;gap:20px;}
.main-nav a{font-weight:600;font-size:.94rem;color:var(--charcoal);opacity:.78;transition:opacity .2s;position:relative;}
.main-nav a:hover{opacity:1;}
.main-nav a.active{opacity:1;color:var(--gold-dark);}
.main-nav a.active::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);}
@media (max-width:980px){.main-nav a.active::after{display:none;} .main-nav a.active{border-left:3px solid var(--gold);padding-left:10px;}}
.header-actions{display:flex;align-items:center;gap:10px;}
.menu-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;color:var(--charcoal);}
.menu-toggle svg{width:28px;height:28px;}

@media (max-width:980px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;background:var(--white);
    flex-direction:column;align-items:flex-start;padding:100px 30px 30px;gap:18px;
    box-shadow:var(--shadow-lg);transform:translateX(100%);transition:transform .3s ease;z-index:95;overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .menu-toggle{display:block;position:relative;z-index:96;}
  .header-actions .btn-outline-dark{display:none;}
  .header-actions .btn-primary{padding:10px 16px;font-size:.88rem;}
}
.nav-backdrop{position:fixed;inset:0;background:rgba(23,21,20,.6);opacity:0;pointer-events:none;transition:opacity .3s;z-index:65;}
.nav-backdrop.open{opacity:1;pointer-events:auto;}

/* Hero */
.hero{background:linear-gradient(160deg,var(--charcoal) 0%,var(--charcoal-deep) 100%);color:#fff;position:relative;overflow:hidden;padding:68px 0 84px;}
.hero-blob{position:absolute;border-radius:50%;filter:blur(90px);z-index:1;}
.hero-blob.b1{width:480px;height:480px;background:var(--gold);opacity:.16;top:-170px;right:-110px;}
.hero-blob.b2{width:360px;height:360px;background:var(--forest);opacity:.22;bottom:-170px;left:-90px;}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:start;max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.hero .eyebrow{background:rgba(185,151,91,.2);color:var(--gold);}
.hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:22px;}
.hero .lede{opacity:.86;max-width:570px;margin-bottom:28px;font-size:1.06rem;}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:28px;}
.hero-trust{display:flex;flex-wrap:wrap;gap:16px 22px;margin-bottom:24px;}
.hero-trust span{display:flex;align-items:center;gap:8px;font-weight:600;font-size:.92rem;opacity:.92;}
.hero-trust svg{width:18px;height:18px;color:var(--gold);flex-shrink:0;}
.hero-visual{position:relative;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);margin-bottom:20px;}
.hero-visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:9/7;}
.floating-project-card{
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--radius-lg);
  padding:22px 24px;backdrop-filter:blur(6px);
}
.floating-project-card h4{color:#fff;font-size:1.02rem;margin-bottom:4px;}
.floating-project-card .sub{font-size:.9rem;color:var(--gold);font-weight:700;margin-bottom:14px;}
.floating-project-card ul li{display:flex;align-items:center;gap:10px;font-size:.9rem;font-weight:600;margin-bottom:9px;opacity:.92;}
.floating-project-card ul li:last-child{margin-bottom:0;}
.floating-project-card svg{width:17px;height:17px;color:var(--gold);flex-shrink:0;}
@media (max-width:960px){.hero-grid{grid-template-columns:1fr;} .hero{padding:48px 0 52px;}}

/* Lead form */
.estimate-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:34px;border:1px solid var(--border);}
.estimate-card h3{font-size:1.3rem;margin-bottom:6px;}
.estimate-card .sub{color:var(--text-muted);font-size:.96rem;margin-bottom:22px;}
.field{margin-bottom:16px;}
.field label{display:block;font-weight:600;font-size:.92rem;margin-bottom:6px;color:var(--charcoal);}
.field input, .field select, .field textarea{
  width:100%;padding:13px 14px;border-radius:4px;border:1.5px solid var(--border);
  font-family:inherit;font-size:.96rem;background:#fff;color:var(--charcoal);
}
.field input:focus, .field select:focus, .field textarea:focus{outline:none;border-color:var(--gold);}
.form-note{font-size:.9rem;color:var(--text-muted);margin-top:14px;text-align:center;}
.consent-row{display:flex;align-items:flex-start;gap:10px;margin-bottom:18px;}
.consent-row input[type=checkbox]{margin-top:4px;width:18px;height:18px;flex-shrink:0;accent-color:var(--gold-dark);}
.consent-row label{font-size:.9rem;color:var(--text-muted);font-weight:500;}
.field-error{color:#B3261E;font-size:.9rem;font-weight:600;margin-top:-10px;margin-bottom:14px;display:none;}
.field-error.show{display:block;}

/* Trust strip */
.trust-strip{background:var(--cream);padding:30px 0;border-bottom:1px solid var(--border);}
.trust-strip .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;}
.trust-item{display:flex;align-items:center;gap:10px;font-weight:700;font-size:.92rem;color:var(--charcoal);}
.trust-item svg{width:19px;height:19px;color:var(--gold-dark);flex-shrink:0;}

/* Grids */
.grid{display:grid;gap:28px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.grid-6{grid-template-columns:repeat(6,1fr);}
@media (max-width:960px){.grid-4{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(2,1fr);} .grid-6{grid-template-columns:repeat(3,1fr);}}
@media (max-width:640px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .grid-6{grid-template-columns:repeat(2,1fr);}}

/* Services */
.svc-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column;}
.svc-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.svc-icon{width:54px;height:54px;border-radius:4px;background:rgba(185,151,91,.14);display:flex;align-items:center;justify-content:center;margin-bottom:18px;color:var(--gold-dark);}
.svc-icon svg{width:27px;height:27px;}
.svc-card h3{font-size:1.1rem;}
.svc-card p{color:var(--text-muted);font-size:.96rem;flex-grow:1;}
.svc-card .learn-more{color:var(--forest);font-weight:700;font-size:.94rem;margin-top:12px;}

/* Before/After slider */
.baf-wrap{position:relative;max-width:820px;margin:0 auto;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:16/10;cursor:ew-resize;user-select:none;}
.baf-wrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;user-select:none;pointer-events:none;}
.baf-after{clip-path:inset(0 0 0 50%);}
.baf-handle{
  position:absolute;top:0;bottom:0;left:50%;width:4px;background:var(--gold);
  transform:translateX(-50%);cursor:ew-resize;z-index:5;
}
.baf-handle::before{
  content:'';position:absolute;top:50%;left:50%;width:48px;height:48px;border-radius:50%;
  background:var(--gold);transform:translate(-50%,-50%);box-shadow:var(--shadow-md);
}
.baf-handle::after{
  content:'\2194';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  color:#fff;font-size:1.3rem;font-weight:700;z-index:6;
}
.baf-label{position:absolute;top:16px;padding:7px 16px;background:rgba(23,21,20,.72);color:#fff;font-weight:700;font-size:.9rem;border-radius:2px;letter-spacing:.04em;text-transform:uppercase;z-index:4;}
.baf-label.before{left:16px;}
.baf-label.after{right:16px;}

/* Feature 2-col */
.feature-grid{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;}
.feature-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.feature-visual img{aspect-ratio:4/4.2;object-fit:cover;}
.checklist{margin:0;}
.checklist li{display:flex;align-items:flex-start;gap:12px;font-size:.98rem;font-weight:600;color:var(--charcoal);margin-bottom:16px;}
.checklist li:last-child{margin-bottom:0;}
.checklist li svg{width:22px;height:22px;color:var(--gold-dark);flex-shrink:0;margin-top:1px;}
.checklist-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:30px;box-shadow:var(--shadow-sm);}
@media (max-width:900px){.feature-grid{grid-template-columns:1fr;}}

/* Project type visual cards */
.type-card{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);background:#fff;transition:transform .2s,box-shadow .2s;}
.type-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.type-card img{aspect-ratio:4/3;object-fit:cover;}
.type-card-body{padding:24px;}
.type-card-body h3{font-size:1.08rem;}
.type-card-body p{color:var(--text-muted);font-size:.95rem;margin-bottom:0;}

/* Process */
.process-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.process-step{text-align:left;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:28px 24px;box-shadow:var(--shadow-sm);}
.process-step .step-badge{
  width:52px;height:52px;border-radius:4px;background:var(--charcoal);color:var(--gold);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.1rem;margin-bottom:16px;
}
.process-step h3{font-size:1.02rem;}
.process-step p{color:var(--text-muted);font-size:.94rem;}
@media (max-width:1080px){.process-steps{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.process-steps{grid-template-columns:1fr;}}

/* Pricing cards */
.price-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px 26px;box-shadow:var(--shadow-sm);transition:transform .2s,box-shadow .2s;}
.price-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.price-card h3{font-size:1.12rem;margin-bottom:6px;}
.price-card .best-for{font-size:.9rem;color:var(--forest);font-weight:700;margin-bottom:16px;}
.price-card li{display:flex;align-items:flex-start;gap:8px;font-size:.94rem;color:var(--text-muted);margin-bottom:10px;}
.price-card li svg{width:16px;height:16px;color:var(--gold-dark);flex-shrink:0;margin-top:3px;}

/* Budget factor cards */
.factor-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:26px;box-shadow:var(--shadow-sm);text-align:center;}
.factor-card h3{font-size:1.02rem;margin-bottom:0;}

/* Gallery */
.filter-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:40px;}
.filter-btn{
  background:#fff;border:1.5px solid var(--border);color:var(--charcoal);font-weight:700;font-size:.94rem;
  padding:11px 22px;border-radius:2px;cursor:pointer;transition:all .2s;
}
.filter-btn.active{background:var(--charcoal);color:var(--gold);border-color:var(--charcoal);}
.gallery-item{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);position:relative;background:#fff;border:1px solid var(--border);transition:transform .2s,box-shadow .2s,opacity .3s;}
.gallery-item:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);}
.gallery-item img{aspect-ratio:4/3;object-fit:cover;}
.gallery-item.hidden{display:none;}
.gallery-body{padding:18px 20px;}
.gallery-demo-tag{display:inline-block;font-size:.78rem;font-weight:700;color:var(--gold-dark);background:rgba(185,151,91,.14);padding:4px 10px;border-radius:2px;margin-bottom:8px;letter-spacing:.02em;}
.gallery-cat{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;font-weight:700;color:var(--forest);}
.gallery-body h3{font-size:1.04rem;margin:6px 0 4px;}
.gallery-body p{font-size:.94rem;color:var(--text-muted);margin-bottom:0;}

/* Reviews */
.review-card{background:#fff;border-radius:var(--radius-lg);padding:28px;border:1px solid var(--border);box-shadow:var(--shadow-sm);}
.stars{color:var(--gold-dark);letter-spacing:2px;margin-bottom:10px;font-size:1rem;}
.review-card p.quote{font-style:italic;color:var(--charcoal);font-size:.98rem;}
.review-who{display:flex;align-items:center;gap:12px;margin-top:14px;}
.review-avatar{width:40px;height:40px;border-radius:50%;background:var(--charcoal);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0;font-size:.92rem;}
.review-who .name{font-weight:700;font-size:.94rem;}
.review-who .loc{font-size:.9rem;color:var(--text-muted);}

/* Service area */
.area-section{background:var(--charcoal);color:#fff;}
.area-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:36px 0 40px;}
.area-card{background:rgba(255,255,255,.07);border-radius:var(--radius);padding:18px;text-align:center;font-weight:700;font-size:.94rem;}
@media (max-width:900px){.area-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:600px){.area-grid{grid-template-columns:repeat(2,1fr);}}

/* FAQ */
.faq-list{max-width:840px;margin:0 auto;}
.faq-item{border:1px solid var(--border);border-radius:var(--radius);margin-bottom:14px;overflow:hidden;background:#fff;}
.faq-question{
  width:100%;text-align:left;background:none;border:none;padding:20px 24px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;font-weight:700;font-size:1.02rem;color:var(--charcoal);cursor:pointer;
}
.faq-question .plus{width:22px;height:22px;flex-shrink:0;position:relative;}
.faq-question .plus::before,.faq-question .plus::after{content:'';position:absolute;background:var(--gold-dark);border-radius:2px;transition:transform .25s;}
.faq-question .plus::before{width:100%;height:3px;top:50%;left:0;transform:translateY(-50%);}
.faq-question .plus::after{height:100%;width:3px;left:50%;top:0;transform:translateX(-50%);}
.faq-item.open .plus::after{transform:translateX(-50%) rotate(90deg);opacity:0;}
.faq-answer{max-height:0;overflow:hidden;transition:max-height .3s ease;}
.faq-answer-inner{padding:0 24px 20px;color:var(--text-muted);font-size:.96rem;}
.faq-item.open .faq-answer{max-height:320px;}

/* Final CTA */
.final-cta{background:linear-gradient(160deg,var(--charcoal) 0%,var(--charcoal-deep) 100%);color:#fff;text-align:center;}
.final-cta h2{color:#fff;}
.final-cta p{opacity:.86;max-width:640px;margin:0 auto 32px;font-size:1.02rem;}
.final-cta .hero-ctas{justify-content:center;}

/* Contact form */
.form-card{background:#fff;border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-md);border:1px solid var(--border);}

/* Disclosure section */

/* Footer */
.site-footer{background:var(--charcoal-deep);color:#c4bdae;padding:66px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.1fr;gap:32px;margin-bottom:34px;}
.footer-grid h4{color:#fff;font-size:.96rem;margin-bottom:16px;}
.footer-grid p{font-size:.94rem;color:#96907F;}
.footer-grid ul li{margin-bottom:11px;font-size:.94rem;}
.footer-grid ul li a:hover{color:#fff;}
.footer-brand .brand{color:#fff;margin-bottom:14px;}
.footer-brand .brand .mark{background:var(--gold);color:var(--charcoal-deep);}
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.12);padding-top:22px;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.9rem;color:#847E70;
}
.footer-bottom a{font-weight:700;color:#fff;}
.footer-legal{display:flex;gap:16px;flex-wrap:wrap;}
@media (max-width:1080px){.footer-grid{grid-template-columns:1fr 1fr 1fr;}}
@media (max-width:640px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:460px){.footer-grid{grid-template-columns:1fr;}}

/* Sticky mobile CTA */
.sticky-mobile-cta{
  display:none;position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:#fff;border-top:1px solid var(--border);box-shadow:0 -6px 20px rgba(34,31,29,.14);
  padding:10px 16px;gap:10px;
}
.sticky-mobile-cta .btn{flex:1;font-size:.92rem;padding:12px 10px;}
@media (max-width:720px){
  .sticky-mobile-cta{display:flex;}
  body{padding-bottom:70px;}
}

/* Reveal animation */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s ease,transform .6s ease;}
.reveal.in{opacity:1;transform:translateY(0);}

.text-center{text-align:center;}

/* ===================== Interior Page Hero ===================== */
.page-hero{
  background:linear-gradient(160deg,var(--charcoal) 0%,var(--charcoal-deep) 100%);
  color:#fff;position:relative;overflow:hidden;padding:64px 0;
}
.page-hero .hero-blob{position:absolute;border-radius:50%;filter:blur(90px);z-index:1;}
.page-hero .hero-blob.b1{width:420px;height:420px;background:var(--gold);opacity:.14;top:-150px;right:-100px;}
.page-hero .hero-blob.b2{width:320px;height:320px;background:var(--forest);opacity:.2;bottom:-150px;left:-80px;}
.page-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;max-width:var(--maxw);margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.page-hero h1{color:#fff;font-size:clamp(2.2rem,4.6vw,3.5rem);margin-bottom:16px;}
.page-hero .lede{opacity:.86;max-width:560px;font-size:1.04rem;margin-bottom:0;}
.page-hero .eyebrow{background:rgba(185,151,91,.2);color:var(--gold);}
.page-hero-visual{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.page-hero-visual img{width:100%;aspect-ratio:5/4;object-fit:cover;}
.breadcrumb{font-size:.9rem;color:rgba(255,255,255,.6);margin-bottom:14px;}
.breadcrumb a{color:rgba(255,255,255,.85);font-weight:600;}
.breadcrumb a:hover{color:var(--gold);}
@media (max-width:900px){.page-hero-grid{grid-template-columns:1fr;}}

/* ===================== Compact Home Hero Form ===================== */
.compact-form-card{background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);padding:30px;border:1px solid var(--border);}
.compact-form-card h3{font-size:1.2rem;margin-bottom:6px;}
.compact-form-card .sub{color:var(--text-muted);font-size:.94rem;margin-bottom:20px;}

/* ===================== FAQ Category Badges ===================== */
.faq-category-row{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-bottom:44px;}
.faq-category-pill{background:#fff;border:1.5px solid var(--border);color:var(--charcoal);font-weight:700;font-size:.9rem;padding:9px 18px;border-radius:2px;}
.faq-group{max-width:840px;margin:0 auto 48px;}
.faq-group:last-child{margin-bottom:0;}
.faq-group-title{font-family:var(--font-display);font-size:1.2rem;font-weight:700;color:var(--charcoal);margin-bottom:18px;padding-bottom:10px;border-bottom:2px solid var(--gold);}

/* ===================== Timeline (Process page) ===================== */
.timeline{max-width:820px;margin:0 auto;position:relative;}
.timeline::before{content:'';position:absolute;left:25px;top:0;bottom:0;width:2px;background:var(--border);}
.timeline-item{position:relative;padding-left:70px;margin-bottom:36px;}
.timeline-item:last-child{margin-bottom:0;}
.timeline-badge{position:absolute;left:0;top:0;width:52px;height:52px;border-radius:4px;background:var(--charcoal);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;z-index:2;}
.timeline-item h3{font-size:1.06rem;margin-bottom:6px;}
.timeline-item p{color:var(--text-muted);font-size:.96rem;margin-bottom:0;}

/* ===================== Breadcrumb-safe active footer link ===================== */
.footer-grid ul li a.active{color:#fff;font-weight:700;}

/* =========================================================
   Cybertron demo — common pass additions
   Appended block. No existing rule above was modified.
   Everything here is prefixed `cs-` (except the shared
   .social-links helper) so it cannot collide with this
   site's own theme classes, and it is colour-neutral: it
   inherits currentColor and this site's own CSS variables,
   so it picks up each site's palette automatically.
   ========================================================= */

/* --- Social icons (Facebook / Instagram) -----------------
   Colour-neutral on purpose: the chip borrows currentColor
   for both icon and border, so the same markup works on a
   light card and on a dark footer with no variant class.
   44px on phones keeps it above the minimum tap target. */
.social-links{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.social-links a{
  width:42px;height:42px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  color:inherit;border:1.5px solid currentColor;background:transparent;
  opacity:.72;flex-shrink:0;
  transition:opacity .2s ease,transform .2s ease;
}
.social-links a:hover,.social-links a:focus-visible{opacity:1;transform:translateY(-2px);}
.social-links svg{width:20px;height:20px;display:block;}
.cs-social-label{
  font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:10px;
}
@media (max-width:640px){
  .social-links a{width:44px;height:44px;}
}

/* --- Contact layout --------------------------------------
   Info card and form sit in one row and stretch to the same
   height, so the shorter column can never leave a blank gap
   beneath it. minmax(0,..) lets both columns shrink below
   their content width, which is what prevents a long email
   or select box from forcing horizontal overflow. */
.cs-contact-grid{
  /* Some sites already wrap their contact area in a grid; span every column
     so this row is never squeezed into one cell of the parent grid.
     Harmless when the parent is not a grid. */
  grid-column:1 / -1;
  display:grid;
  grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr);
  gap:24px;align-items:stretch;
}
.cs-contact-grid > *{min-width:0;height:100%;}
/* Pin the two columns explicitly. One site's own stylesheet forces a
   full-width grid-column on form elements, which pushed the form onto its
   own row and unbalanced the pair; explicit placement overrides that. */
.cs-contact-grid > .cs-info-card,
.cs-contact-grid > .contact-card,
.cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:1;}
.cs-contact-grid > form{grid-column:2;grid-row:1;margin:0;height:100%;}

.cs-info-card{
  background:var(--white,#fff);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  padding:30px 26px;
  display:flex;flex-direction:column;
  min-width:0;
}
.cs-info-card h3{margin-bottom:20px;}
/* The rows grow to absorb the height the form column sets and
   spread evenly, instead of bunching at the top and leaving a
   hollow band above the button. */
.cs-info-list{
  list-style:none;margin:0;padding:0;
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:space-between;
  gap:14px;
}
.cs-info-list li{display:flex;align-items:flex-start;gap:12px;min-width:0;}
.cs-info-list svg{
  width:19px;height:19px;flex-shrink:0;margin-top:3px;opacity:.75;
}
.cs-info-list .cs-lbl{
  font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  font-weight:700;opacity:.6;margin-bottom:2px;
}
.cs-info-list .cs-val{
  font-size:.95rem;line-height:1.5;color:var(--text-muted);
  min-width:0;overflow-wrap:anywhere;
}
.cs-info-foot{margin-top:auto;padding-top:22px;}
.cs-info-foot .btn{margin-top:16px;}

/* Social row under the form, separated by a hairline. */
.cs-form-social{
  border-top:1px solid var(--border);
  margin-top:18px;padding-top:18px;text-align:center;
}
.cs-form-social .social-links{justify-content:center;}
.cs-form-social .cs-social-label{margin-bottom:10px;}

@media (max-width:900px){
  .cs-contact-grid{grid-template-columns:1fr;gap:20px;}
  .cs-contact-grid > .cs-info-card,
  .cs-contact-grid > .contact-card,
  .cs-contact-grid > .feat-card:not(form){grid-column:1;grid-row:auto;}
  .cs-contact-grid > form{grid-column:1;grid-row:auto;}
  /* Stacked: the card is sized by its own content again, so the
     rows should sit together rather than stretch apart. */
  .cs-info-list{flex:0 0 auto;justify-content:flex-start;}
  .cs-contact-grid > form{height:auto;}
}

/* --- Footer social --------------------------------------- */
.cs-footer-social{margin-top:18px;}
.cs-footer-social .social-links a{width:38px;height:38px;border-radius:10px;}
@media (max-width:640px){
  .cs-footer-social .social-links a{width:44px;height:44px;}
}

/* --- Image slot safety -----------------------------------
   Keeps every existing image slot from stretching once real
   photos replace the SVG placeholders later. Only sets
   object-fit, which has no effect on how the SVGs render now. */
img{max-width:100%;}
.cs-media-fit{display:block;width:100%;height:100%;object-fit:cover;}

/* --- Mobile header fit ------------------------------------
   PRE-EXISTING BUG (present before this pass): below ~560px the
   brand + call link + CTA + hamburger were wider than the
   viewport. That pushed the hamburger past the right edge, so
   the page scrolled sideways and the mobile menu button could
   end up unreachable. Nothing here changes the header's design
   or markup — it only lets the row shrink to fit. */
@media (max-width:600px){
  .header-inner{gap:10px;padding-left:16px;padding-right:16px;min-width:0;}
  .brand{font-size:1rem;min-width:0;gap:8px;}
  .brand .mark{flex-shrink:0;}
  .header-actions{gap:8px;min-width:0;}
  .header-actions .btn{padding:9px 12px;font-size:.82rem;white-space:nowrap;}
  .menu-toggle{flex-shrink:0;}
}
@media (max-width:400px){
  .brand{font-size:.94rem;}
  .header-actions .btn{padding:9px 10px;font-size:.78rem;}
}

/* --- Long CTA buttons on small screens --------------------
   PRE-EXISTING BUG: a few inline CTAs carry long labels
   ("Need help choosing? Request ...") and the .btn rule keeps
   them on one line, so at phone widths the button rendered
   ~470px wide inside a 390px viewport and dragged the whole
   page sideways. Letting the label wrap fixes the scroll
   without changing the button's styling anywhere else. */
@media (max-width:600px){
  .btn{max-width:100%;white-space:normal;}
  .header-actions .btn{white-space:nowrap;}
}

@media (max-width:600px){
  /* Brand may ellipsis rather than push the row wide. */
  .brand{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .call-btn{flex-shrink:0;}
  /* The header CTA duplicates CTAs that already appear in the hero and in
     every section below, and its label cannot shrink (nowrap), so on phones
     it was the single element forcing the hamburger off-screen. Hidden here
     only; unchanged from 601px up. */
  .header-actions .btn-primary{display:none;}
}
@media (max-width:420px){
  .header-inner{padding-left:12px;padding-right:12px;gap:8px;}
}

/* --- Mid-width nav crowding -------------------------------
   PRE-EXISTING BUG: between the mobile breakpoint (~980px) and
   roughly 1340px the full desktop nav, brand, call link and CTA
   together were wider than the viewport on the longer-nav demos,
   so laptops and small desktops scrolled sideways. Tightening
   spacing and type slightly in that band makes the row fit; the
   layout is untouched above and below it. */
@media (min-width:981px) and (max-width:1340px){
  .main-nav{gap:16px;min-width:0;}
  .main-nav a{font-size:.88rem;}
  .header-inner{gap:12px;}
  .header-actions{gap:10px;}
  .header-actions .btn{padding:9px 13px;font-size:.85rem;}
  .call-btn span{display:none;}
}

/* =========================================================
   Final image integration pass
   Appended block — no existing rule above was modified.
   ========================================================= */

/* --- Heading wrapping -------------------------------------
   The long hero headings were splitting into badly uneven lines
   (e.g. a 594px line followed by a 278px orphan). `text-wrap:balance`
   evens the line lengths out without touching font size, layout or
   the number of lines. Chrome and Edge 114+ honour it; older
   browsers simply ignore it and wrap as before, so it is safe.

   NOTE: `white-space:nowrap` on these headings was considered and
   rejected — measured at 1440px, the longest H1 renders 2031px wide
   on one line, which would overflow the viewport and force
   horizontal scroll on every desktop. Balanced wrapping is the
   correct fix here. */
h1, h2, .page-hero h1, .hero h1 { text-wrap: balance; }

/* --- Image fitting safety ---------------------------------
   The supplied photography already matches each container's
   aspect-ratio, so nothing crops on the existing slots. These
   rules only guarantee that any future image dropped into the
   same slot still fills its box instead of stretching. */
.hero-visual img,
.page-hero-visual img,
.feature-visual img,
.type-card img,
.gallery-item img,
.baf-wrap img {
  object-position: center center;
}

/* =========================================================
   Layout fix pass — home hero + header navigation
   Appended block. No existing rule above was modified.
   ========================================================= */

/* --- Header / navigation ----------------------------------
   PROBLEM: three nav labels ("Custom Homes", "Before & After",
   "Design-Build") wrapped onto two lines at EVERY desktop width,
   and the brand wrapped onto three lines at 1440px.

   ROOT CAUSE: with nowrap applied, the header needs 1359px of
   content (brand 298 + nav 696 + actions 365) plus padding and
   gaps, but .header-inner is capped at --maxw (1200px). It could
   not fit at any viewport width, so the browser wrapped the
   labels instead.

   FIX, in three parts:
   1. nowrap on nav labels and brand so a label can never split
      as "Design-" / "Build".
   2. Above 1181px, let the header bar run wider than the page
      container (1380px) and tighten gaps/type slightly, which
      buys back the space nowrap needs.
   3. At or below 1180px, hand the nav to the existing hamburger
      rather than keep a cramped desktop row. This raises the
      original 980px breakpoint — the nav has eight items plus
      two CTA buttons, which is too much below ~1180px.
   Verified clean at 1920/1600/1520/1440/1366/1280/1200/1181/1180/
   1100/1024/900/768/600/430/390/360. */
.main-nav{flex-wrap:nowrap;}
.main-nav a{white-space:nowrap;line-height:1.2;}
.brand{white-space:nowrap;flex-wrap:nowrap;min-width:0;}
.brand .mark{flex-shrink:0;}
.header-actions{flex-shrink:0;display:flex;align-items:center;gap:12px;}
.site-header,.header-inner{align-items:center;}

@media (min-width:1181px){
  .header-inner{max-width:1380px;gap:clamp(14px,1.6vw,24px);}
  .main-nav{gap:clamp(12px,1.3vw,22px);}
}
/* Between 1181 and 1520 the row is tightest, so trim type a little.
   Kept at 14.4px — comfortably above the 12px readability floor. */
@media (min-width:1181px) and (max-width:1520px){
  .main-nav a{font-size:.9rem;}
  .header-actions .btn{padding:10px 15px;font-size:.85rem;}
}
/* Hand off to the hamburger earlier than the original 980px. */
@media (max-width:1180px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;background:var(--white,#fff);
    flex-direction:column;align-items:flex-start;padding:100px 30px 30px;gap:24px;
    transform:translateX(100%);transition:transform .3s ease;z-index:95;
    box-shadow:var(--shadow-lg);overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .menu-toggle{display:block;position:relative;z-index:96;}
}
@media (max-width:600px){
  .brand{overflow:hidden;text-overflow:ellipsis;font-size:1rem;}
}

/* --- Home hero --------------------------------------------
   The hero image was removed from index.html so the existing
   consultation form now sits at the top of the right column.
   Measured effect: hero height 1189px -> 810px, and the right
   column no longer overshoots the left by 379px.
   These rules only tighten the vertical rhythm now that the
   image is gone, so the form sits higher without the section
   feeling cramped. */
@media (min-width:961px){
  .hero{padding:52px 0 64px;}
  .hero-grid{align-items:center;}
  .compact-form-card{padding:26px;}
  .compact-form-card .field{margin-bottom:13px;}
}
/* Stacked: text first, form second — source order already does
   this, so nothing needs reordering. Just close the gap. */
@media (max-width:960px){
  .hero-grid{gap:32px;}
  .compact-form-card{padding:24px;}
}

/* --- Headings ---------------------------------------------
   Nav labels must NOT be balanced (they are single-line by
   design) — this applies to content headings only. */
h1,.page-hero h1,.hero h1{line-height:1.08;}

/* =========================================================
   Alignment fix pass
   Appended block. No existing rule above was modified.
   ========================================================= */

/* --- Container width / side gutters ------------------------
   The page container was capped at 1200px, which left very wide
   blank gutters on 1440px+ screens. Widened to 1320px with a
   fluid gutter so content uses more of the screen while keeping
   professional padding. Applied via the same --maxw token the
   existing .container rule already reads, so every section,
   the trust bar and the footer all widen together and stay
   aligned with each other. */
:root{ --maxw:1320px; }
.container{ padding-left:clamp(16px,2.2vw,32px); padding-right:clamp(16px,2.2vw,32px); }

/* --- Header: brand / nav separation ------------------------
   PROBLEM: only ~19-27px separated the end of the brand text
   ("...Custom Homes") from the first nav link ("Home") and its
   active underline, so the two read as touching.
   FIX: brand and CTA cluster never shrink or wrap; the nav is
   pushed away from the brand with a real minimum gap. */
.header-inner{ align-items:center; }
.brand{ flex-shrink:0; }
.header-actions{ flex-shrink:0; }
@media (min-width:1181px){
  .header-inner{ max-width:1400px; gap:clamp(16px,1.4vw,36px); }
  /* Guarantees clear air between the brand and the first nav
     item even at the tightest desktop width. Measured result:
     the brand-to-first-link gap is now 28-52px across
     1181-1520px, up from the 19-27px that read as touching. */
  .main-nav{ margin-left:clamp(10px,1vw,28px); }
}
/* 1366px is the tightest desktop case (content 1271px + gaps +
   48px padding just exceeded the viewport by 6px). Trimming the
   CTA padding here clears it without shrinking the labels. */
@media (min-width:1181px) and (max-width:1440px){
  .header-actions .btn{ padding:10px 13px; font-size:.82rem; }
}

/* --- Contact page: column alignment ------------------------
   The "Follow Us" block was removed from the contact details
   column in contact.html. Without it the consultation image no
   longer sits far below the form, but the two columns still
   would not end together because the image height is fixed by
   its aspect-ratio. Letting the left column stretch and the
   image fill the leftover space makes both columns finish on
   the same line. */
.feature-grid > *{ min-width:0; }
.contact-page-grid{ align-items:stretch; }
.contact-page-grid > div{ display:flex; flex-direction:column; }
.contact-page-grid .feature-visual{
  flex:1 1 auto; min-height:280px; margin-top:24px; overflow:hidden;
}
.contact-page-grid .feature-visual img{
  width:100%; height:100%; aspect-ratio:auto; object-fit:cover; object-position:center;
}
.contact-page-grid > form{ height:100%; }
@media (max-width:900px){
  /* Stacked: the image sizes from its own ratio again. */
  .contact-page-grid > div{ display:block; }
  .contact-page-grid .feature-visual{ min-height:0; }
  .contact-page-grid .feature-visual img{ aspect-ratio:4/4.2; height:auto; }
  .contact-page-grid > form{ height:auto; }
}

/* --- Footer -----------------------------------------------
   Brand mark and wordmark measured as already centred on each
   other (1px), so those rules just lock that in. The real
   problem was the bottom row: copyright + legal links +
   "Designed by Cybertron Softech" needed 1291px inside a
   1257px container, so the credit wrapped onto its own line
   38px below the rest.
   A three-column grid keeps all three on one row down to
   861px without shrinking any text; below that it stacks
   deliberately rather than half-wrapping. */
.footer-grid{ align-items:start; }
.footer-brand .brand{ display:flex; align-items:center; gap:10px; }
.footer-brand .brand .mark{ flex-shrink:0; }
@media (min-width:861px){
  .footer-bottom{
    display:grid; grid-template-columns:auto 1fr auto;
    align-items:center; gap:18px;
  }
  .footer-legal{ justify-content:center; }
}
@media (max-width:860px){
  .footer-bottom{ align-items:flex-start; row-gap:14px; }
}
@media (max-width:640px){
  .footer-bottom{ flex-direction:column; align-items:flex-start; text-align:left; }
  .footer-legal{ gap:14px; }
}

/* =========================================================
   Final cleanup pass
   Appended block. No existing rule above was modified.
   ========================================================= */

/* --- Performance / feature cards ---------------------------
   Some .svc-card instances hold only a heading (the "Built For
   Comfort, Efficiency & Long-Term Living" grid and the process
   grid). Those were inheriting the left-aligned, top-anchored
   layout meant for cards that also carry an icon and a
   paragraph, so their labels sat off-centre and the cards were
   uneven. The .svc-card-title modifier centres those cards only
   — icon/paragraph cards elsewhere are untouched. */
.svc-card-title{
  align-items:center;
  justify-content:center;
  text-align:center;
  min-height:104px;
  padding:24px;
}
.svc-card-title h3{
  margin:0;
  line-height:1.25;
  text-align:center;
}
@media (max-width:640px){
  .svc-card-title{ min-height:84px; padding:20px; }
}

/* --- Footer bottom row -------------------------------------
   With "Builder Disclosure", "Warranty Placeholder" and
   "Consent Disclosure" removed, only Privacy Policy and Terms
   of Use remain, so all three groups now fit one row easily.
   Copyright left, links centred, credit right, all on one
   baseline. Stacks centred on small screens. */
@media (min-width:721px){
  .footer-bottom{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:20px;
  }
  .footer-bottom > :first-child{ justify-self:start; text-align:left; }
  .footer-legal{ justify-self:center; flex-wrap:nowrap; white-space:nowrap; }
  .footer-bottom > :last-child{ justify-self:end; text-align:right; }
}
@media (max-width:720px){
  .footer-bottom{
    display:flex; flex-direction:column; align-items:center;
    text-align:center; row-gap:14px;
  }
  .footer-legal{ justify-content:center; }
}

/* =========================================================
   Final UI polish pass — CTA cleanup, button alignment,
   card variety
   Appended block. No existing rule above was modified.
   ========================================================= */

/* --- Reusable centred CTA ----------------------------------
   "Review My Lot" and "Plan Finish Selections" each carried an
   inline style="margin-top:22px" and inherited the text column's
   left alignment, so they sat hard against the left edge under
   their content block. Both inline styles are gone; this wrapper
   centres any CTA placed under a card or content block, and is
   reusable for the same pattern elsewhere. */
.cta-under{
  display:flex; justify-content:center;
  margin-top:26px; width:100%;
}
.cta-under .btn{ min-width:220px; justify-content:center; text-align:center; }
@media (max-width:520px){
  .cta-under .btn{ min-width:0; width:100%; }
}

/* --- Card variety -----------------------------------------
   Almost every box was the same flat white with the same border,
   padding and shadow. These give each card family its own
   identity while keeping one coherent system. Every treatment
   keeps the existing dark-on-light text, so nothing loses
   contrast. */

/* Service cards: accent rail that fills on hover, plus a lift. */
.svc-card{ position:relative; overflow:hidden; height:100%; }
.svc-card::before{
  content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--gold,#b8894a); transform:scaleY(.25); transform-origin:top;
  transition:transform .28s ease, opacity .28s ease; opacity:.45;
}
.svc-card:hover::before{ transform:scaleY(1); opacity:1; }
.svc-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }

/* Heading-only cards read as compact chips rather than empty boxes. */
.svc-card-title{
  background:linear-gradient(180deg,#fff 0%, var(--cream,#faf7f2) 100%);
  border-color:color-mix(in srgb, var(--gold,#b8894a) 22%, var(--border));
}

/* Checklist cards: tinted, with an accent edge so they read as
   supporting detail rather than another primary card. */
/* NOTE: no blanket height:100% here. On the contact page the
   checklist sits in a flex column beside the photo; stretching it
   stole the column height and squeezed the photo from a clean fill
   to a 52% crop. Equal heights are applied only to checklist cards
   that are direct grid children (see the equal-height rule below). */
.checklist-card{
  background:linear-gradient(180deg, var(--cream,#faf7f2) 0%, #fff 70%);
  border-left:3px solid var(--gold,#b8894a);
}

/* Home-type cards: image-led, with a clear lift and a warmer
   body panel so the grid does not read as eight white rectangles. */
.type-card{ height:100%; display:flex; flex-direction:column; }
.type-card .type-card-body{ flex:1 1 auto; display:flex; flex-direction:column; }
.type-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.type-card:hover img{ transform:scale(1.03); }
.type-card img{ transition:transform .4s ease; }

/* Price and review cards: subtle top accent and equal heights. */
.price-card, .review-card{ height:100%; border-top:3px solid var(--gold,#b8894a); }
.price-card:hover, .review-card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.review-card{ transition:transform .2s ease, box-shadow .2s ease; }

/* Area chips get definition against the dark band they sit on. */
.area-card{
  border:1px solid rgba(255,255,255,.14);
  transition:background .2s ease, border-color .2s ease, transform .2s ease;
}
.area-card:hover{
  background:rgba(255,255,255,.13);
  border-color:color-mix(in srgb, var(--gold,#b8894a) 55%, transparent);
  transform:translateY(-2px);
}

/* Equal heights wherever cards share a grid row. */
.grid > .svc-card, .grid > .type-card, .grid > .price-card,
.grid > .review-card, .grid > .checklist-card{ height:100%; }

/* --- Image fitting ----------------------------------------
   interior-finishes.webp is a 4:3 photo reused in a portrait
   4/4.2 slot, which cropped 29% off its sides at every width.
   The reused slot keeps the photo's own ratio instead. */
.feature-visual.is-wide img{ aspect-ratio:4/3; }
/* client-consultation.webp is 2400x2520 (0.952) — exactly the default
   .feature-visual 4/4.2 ratio, so it needs NO override. An earlier
   4/3 override here was forcing a 29% crop on an image that already
   fitted. Only the desktop flex-fill (which makes the column end level
   with the form) departs from that ratio; below 1100px the grid stacks
   and the photo returns to its natural 0% crop. */
@media (max-width:1100px){
  .contact-page-grid{ grid-template-columns:1fr; }
  .contact-page-grid > div{ display:block; }
  .contact-page-grid .feature-visual{ flex:0 0 auto; min-height:0; }
  .contact-page-grid .feature-visual img{ aspect-ratio:4/4.2; height:auto; }
}

/* Class names renamed away from "demo" for a client-facing build.
   The original rules above are left in place so nothing breaks. */
.fine-print{font-size:.88rem;color:var(--text-muted);font-style:italic;margin-top:8px;}
.gallery-concept-tag{display:inline-block;font-size:.78rem;font-weight:700;color:var(--gold-dark);background:rgba(185,151,91,.14);padding:4px 10px;border-radius:2px;margin-bottom:8px;letter-spacing:.02em;}

/* =========================================================
   IMAGE PASS — new photo placements
   ========================================================= */
/* Home hero: restrained photo layer behind the existing compact layout.
   Absolutely positioned, so the hero keeps its current height. */
.hero-photo{position:absolute;inset:0;z-index:0;overflow:hidden;}
.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:62% 45%;display:block;}
.hero-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(24,24,22,.94) 0%,rgba(24,24,22,.86) 42%,rgba(24,24,22,.62) 70%,rgba(24,24,22,.5) 100%);}
.hero-has-photo .hero-blob{z-index:1;opacity:.1;}
@media (max-width:960px){
  .hero-photo img{object-position:60% 30%;}
  .hero-photo::after{background:linear-gradient(180deg,rgba(24,24,22,.78) 0%,rgba(24,24,22,.9) 40%,rgba(24,24,22,.95) 100%);}
}

/* Home: compact living-spaces beat */
.living-beat-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;}
.living-beat-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.living-beat-media img{width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;display:block;}
.living-beat-text h2{margin-bottom:12px;}
.living-beat-text p{color:var(--text-muted);margin-bottom:22px;}
@media (max-width:900px){.living-beat-grid{grid-template-columns:1fr;gap:26px;}.living-beat-media{max-width:640px;}}

/* Custom homes: lot section photo pair */
.lot-visuals{position:relative;padding-bottom:48px;}
.lot-visual-main,.lot-visual-inset{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.lot-visual-main img{width:100%;height:auto;aspect-ratio:4/3.3;object-fit:cover;display:block;}
.lot-visual-inset{position:absolute;right:-12px;bottom:0;width:46%;border:5px solid #fff;}
.lot-visual-inset img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
@media (max-width:900px){.lot-visuals{max-width:640px;}.lot-visual-inset{right:10px;}}
@media (max-width:480px){.lot-visuals{padding-bottom:36px;}.lot-visual-inset{width:52%;border-width:4px;}}

/* Custom homes: comfort section photo beside the six items */
.comfort-layout{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:36px;align-items:center;}
.comfort-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.comfort-media img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;display:block;}
.comfort-items.grid-2{gap:16px;}
.comfort-items .svc-card{margin:0;}
@media (max-width:960px){.comfort-layout{grid-template-columns:1fr;}.comfort-media{max-width:640px;}}
@media (max-width:480px){.comfort-items.grid-2{grid-template-columns:1fr;}}

/* Process: framing + window installation pair under Quality Checkpoints */
.checkpoint-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px;margin-top:48px;}
.checkpoint-figure{margin:0;background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border);}
.checkpoint-figure img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;}
.checkpoint-figure figcaption{padding:16px 20px 18px;color:var(--text-muted);font-size:1rem;line-height:1.55;}
.checkpoint-figure figcaption strong{display:block;color:var(--charcoal);font-size:1.05rem;margin-bottom:2px;}
@media (max-width:768px){.checkpoint-pair{grid-template-columns:1fr;}}
/* New images carry intrinsic width/height (to reserve space); let CSS
   aspect-ratio control the rendered height instead of the attribute. */
.gallery-item img,.feature-visual img{width:100%;height:auto;}
/* Phones/tablets: the hero stacks (text, then the form), so the photo only
   sits behind the opening text and fades into the dark hero background,
   instead of being blown up to cover the whole tall stacked hero. */
@media (max-width:960px){
  .hero-photo{bottom:auto;height:clamp(300px,82vw,560px);}
  .hero-photo img{object-position:62% 40%;}
  .hero-photo::after{background:linear-gradient(180deg,rgba(24,24,22,.7) 0%,rgba(24,24,22,.84) 55%,var(--charcoal) 100%);}
}
/* Small phones: header row fits at 320px; long CTAs stay on one or two lines */
@media (max-width:420px){
  .brand{white-space:normal;line-height:1.12;min-width:0;flex-shrink:1;}
  .header-inner{gap:8px;}
}
@media (max-width:400px){
  main .btn,.section .btn,.form-card .btn{padding:13px 14px;font-size:.92rem;letter-spacing:0;}
}
@media (max-width:340px){.brand{font-size:.88rem;}}


/* =========================================================
   "Blueprint -> Build" animation theme (custom home builders)
   Decorative only: aria-hidden, pointer-events:none, behind
   content. Transform/opacity/stroke-dashoffset only. All
   autoplay motion is removed under prefers-reduced-motion.
   ========================================================= */

/* --- Blueprint grid on dark panels ------------------------ */
.bp-layer, .crane-layer{ position:absolute; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.bp-grid{
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(185,151,91,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,151,91,.07) 1px, transparent 1px),
    linear-gradient(rgba(185,151,91,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(185,151,91,.12) 1px, transparent 1px);
  background-size:32px 32px, 32px 32px, 160px 160px, 160px 160px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 25% 70%, #000 20%, transparent 78%);
          mask-image:radial-gradient(ellipse 70% 80% at 25% 70%, #000 20%, transparent 78%);
}
.hero-has-photo .bp-grid{ opacity:.7; }

/* --- Self-drawing house elevation -> windows light up ------ */
.bp-house{
  position:absolute; bottom:6px; width:min(440px,40%); height:auto;
  left:max(16px, calc((100% - var(--maxw)) / 2 + 24px));
  stroke:var(--gold); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; opacity:.34;
}
.bp-house .d{ stroke-dasharray:1; stroke-dashoffset:1; animation:bp-draw 1.1s cubic-bezier(.6,.1,.3,1) forwards; animation-delay:var(--d,0s); }
.bp-house .dim{ stroke-width:1.1; opacity:.8; }
.bp-house .win{ fill:#F2C46B; fill-opacity:0; animation:bp-draw 1s ease forwards var(--d,0s), bp-lights 1.2s ease 3s forwards, bp-glow 4s ease-in-out 4.2s infinite alternate; }
@keyframes bp-draw{ to{ stroke-dashoffset:0; } }
@keyframes bp-lights{ to{ fill-opacity:.55; } }
@keyframes bp-glow{ from{ fill-opacity:.55; } to{ fill-opacity:.32; } }
.page-hero-grid, .hero-grid{ z-index:2; }
@media (max-width:960px){ .bp-house{ width:min(360px,62%); opacity:.22; bottom:0; } }
@media (max-width:560px){ .bp-house{ width:78%; opacity:.16; } }

/* --- Tower crane with moving trolley + swinging load ------- */
.crane-host{ position:relative; overflow:hidden; isolation:isolate; }
.crane-host > .container{ position:relative; z-index:2; }
.crane{
  position:absolute; bottom:0; width:clamp(190px,20vw,270px); height:auto;
  right:max(8px, calc((100% - var(--maxw)) / 2 - 20px));
  stroke:var(--gold); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.42;
}
.crane-light .crane{ stroke:var(--charcoal); opacity:.14; }
.crane-trolley{ animation:crane-trolley 11s ease-in-out infinite alternate; }
.crane-load{ transform-box:view-box; transform-origin:157px 83px; animation:crane-swing 3.4s ease-in-out infinite alternate; }
@keyframes crane-trolley{ from{ transform:translateX(0); } to{ transform:translateX(104px); } }
@keyframes crane-swing{ from{ transform:rotate(-4deg); } to{ transform:rotate(4deg); } }
.final-cta .bp-grid, .area-section .bp-grid{
  -webkit-mask-image:radial-gradient(ellipse 45% 90% at 88% 80%, #000 15%, transparent 75%);
          mask-image:radial-gradient(ellipse 45% 90% at 88% 80%, #000 15%, transparent 75%);
}
@media (max-width:900px){ .crane{ width:170px; opacity:.2; right:-24px; } .crane-light .crane{ opacity:.09; } }
@media (max-width:600px){ .crane{ display:none; } }

/* --- Dimension line under section headings ---------------- */
.dim-line{
  display:block; width:150px; height:14px; margin:14px auto 12px; background:var(--gold);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M1 1V13M159 1V13M1 7H159M1 7l9-4M1 7l9 4M159 7l-9-4M159 7l-9 4' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 14'%3E%3Cpath d='M1 1V13M159 1V13M1 7H159M1 7l9-4M1 7l9 4M159 7l-9-4M159 7l-9 4' stroke='%23000' stroke-width='1.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}
.dim-line.reveal{ opacity:0; transform:scaleX(.06); }
.dim-line.reveal.in{ opacity:1; transform:scaleX(1); transition:opacity .35s ease, transform 1.1s cubic-bezier(.2,.8,.2,1) .15s; }

/* --- Home: steel beam linking the four steps --------------- */
.steps-track{ position:relative; }
.steps-track > .process-step{ position:relative; z-index:1; }
.steps-beam{
  position:absolute; left:40px; right:40px; top:54px; height:4px; z-index:0; border-radius:2px;
  background:repeating-linear-gradient(90deg, var(--gold) 0 18px, var(--gold-dark) 18px 21px);
  transform-origin:left center;
}
.steps-beam.reveal{ opacity:1; transform:scaleX(0); }
.steps-beam.reveal.in{ transform:scaleX(1); transition:transform 1.6s cubic-bezier(.65,0,.25,1) .2s; }
@media (max-width:1080px){ .steps-beam{ display:none; } }

/* --- Process page: scroll-linked construction progress ----- */
.tl-progress{
  position:absolute; left:25px; top:0; bottom:0; width:2px; z-index:0;
  background:linear-gradient(180deg, var(--gold), var(--gold-dark));
  transform-origin:top center; transform:scaleY(0);
}
.timeline-badge{ transition:background .35s ease, color .35s ease, box-shadow .35s ease; }
.timeline-item.reached .timeline-badge{ background:var(--gold); color:var(--charcoal); box-shadow:0 0 0 6px rgba(185,151,91,.18); animation:tl-stamp .45s cubic-bezier(.2,1.6,.4,1); }
@keyframes tl-stamp{ 0%{ transform:scale(1.25) rotate(-6deg); } 100%{ transform:scale(1) rotate(0); } }

/* --- Feature images: architect crop marks draw in --------- */
.feature-visual{ position:relative; }
.crop-marks{ position:absolute; inset:14px; z-index:2; pointer-events:none; }
.crop-marks::before, .crop-marks::after{
  content:""; position:absolute; width:34px; height:34px; border:0 solid rgba(255,255,255,.92);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.35)); transform:scale(0); transition:transform .7s cubic-bezier(.2,1.3,.4,1) .45s;
}
.crop-marks::before{ top:0; left:0; border-top-width:2px; border-left-width:2px; transform-origin:top left; }
.crop-marks::after{ right:0; bottom:0; border-bottom-width:2px; border-right-width:2px; transform-origin:bottom right; }
.feature-visual.in .crop-marks::before, .feature-visual.in .crop-marks::after{ transform:scale(1); }

/* --- Projects: sheet pulled away to unveil each home ------- */
.gallery-item.reveal img{ clip-path:inset(100% 0 0 0); transition:clip-path 1.1s cubic-bezier(.7,0,.2,1) .12s; }
.gallery-item.reveal.in img{ clip-path:inset(0 0 0 0); }

/* --- Design-build: stage stamps --------------------------- */
.stage-grid{ counter-reset:stage; }
.stage-grid > .checklist-card{ counter-increment:stage; }
.stage-grid > .checklist-card::before{
  content:"STAGE " counter(stage, decimal-leading-zero); display:inline-block; margin-bottom:12px;
  font:700 .75rem/1 var(--font-display); letter-spacing:.14em; color:var(--gold-dark);
  border:1.5px solid currentColor; border-radius:4px; padding:6px 9px; transform:rotate(-4deg);
}
.stage-grid > .checklist-card.in::before{ animation:stage-stamp .55s cubic-bezier(.2,1.6,.4,1) .25s both; }
@keyframes stage-stamp{ 0%{ opacity:0; transform:scale(1.8) rotate(-14deg); } 100%{ opacity:1; transform:scale(1) rotate(-4deg); } }

/* --- Before/after: pulse ring inviting a drag -------------- */
.baf-wrap.in:not(.baf-touched) .baf-handle::before{ animation:baf-pulse 1.8s ease-out .6s 4; }
@keyframes baf-pulse{ 0%{ box-shadow:var(--shadow-md), 0 0 0 0 rgba(185,151,91,.7); } 100%{ box-shadow:var(--shadow-md), 0 0 0 20px rgba(185,151,91,0); } }

@media (prefers-reduced-motion:reduce){
  .bp-house .d, .bp-house .win{ animation:none !important; stroke-dashoffset:0; }
  .bp-house .win{ fill-opacity:.4; }
  .crane-trolley, .crane-load, .baf-handle::before, .timeline-item.reached .timeline-badge{ animation:none !important; }
  .dim-line.reveal, .steps-beam.reveal{ opacity:1; transform:none; transition:none; }
  .gallery-item.reveal img{ clip-path:none; transition:none; }
  .crop-marks::before, .crop-marks::after{ transform:none; transition:none; }
  .stage-grid > .checklist-card.in::before{ animation:none; }
}
/* Home hero is photo-backed and busy: keep only the faint grid there. */
.hero-has-photo .bp-house{ display:none; }
.page-hero .bp-house{ opacity:.46; }
@media (max-width:960px){ .page-hero .bp-house{ opacity:.24; } }
@media (max-width:560px){ .page-hero .bp-house{ opacity:.18; } }
.dim-line, .steps-beam{ pointer-events:none; }

/* =========================================================================
   PLAN YOUR HOME — design studio (new)
   A dark "drafting table" canvas with a live SVG elevation, next to the
   studio controls. Additive only; existing components are untouched.
   ========================================================================= */
.nav-studio{position:relative;}
.nav-studio::before{content:"";position:absolute;right:2px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--gold);}
.hb-studio{background:linear-gradient(180deg,var(--cream) 0%,#fff 60%);}
.hb-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(22px,3vw,44px);align-items:start;}
.hb-canvas-wrap{position:sticky;top:96px;display:grid;gap:18px;}
.hb-canvas{margin:0;background:
  linear-gradient(rgba(185,151,91,.10) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(185,151,91,.10) 1px,transparent 1px) 0 0/24px 24px,
  radial-gradient(900px 400px at 50% 0%,#2E2A27 0%,var(--charcoal-deep) 70%);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid #3a342f;}
.hb-canvas-top{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;color:#CFC4AF;font-size:.86rem;letter-spacing:.14em;font-weight:700;}
.hb-live{display:inline-flex;align-items:center;gap:8px;color:#9ED3AE;letter-spacing:.06em;}
.hb-live::before{content:"";width:8px;height:8px;border-radius:50%;background:#9ED3AE;}
.hb-canvas svg{display:block;width:100%;height:auto;aspect-ratio:8/5;}
.hb-specs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid #3a342f;}
.hb-specs span{padding:12px 14px;border-right:1px solid #3a342f;color:#fff;min-width:0;}
.hb-specs span:last-child{border-right:0;}
.hb-specs small{display:block;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:#CFC4AF;}
.hb-specs b{display:block;font-size:.98rem;overflow-wrap:anywhere;}
.hb-brief{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:22px 24px;box-shadow:var(--shadow-sm);border-left:5px solid var(--gold);}
.hb-brief h3{font-size:1.15rem;margin-bottom:8px;}
.hb-brief p{color:var(--text-muted);margin:0 0 14px;}
.hb-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;}
.hb-reset{background:none;border:0;color:var(--text-muted);font:600 .95rem var(--font-body);text-decoration:underline;cursor:pointer;min-height:44px;padding:0 8px;}
.hb-copy{font-size:.95rem;color:var(--forest);margin:10px 0 0 !important;min-height:1.2em;}
.hb-controls{display:grid;gap:14px;}
.hb-step{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:18px 18px 20px;margin:0;box-shadow:var(--shadow-sm);}
.hb-step legend{display:flex;align-items:center;gap:10px;font-family:var(--font-display);font-weight:700;font-size:1.05rem;color:var(--charcoal);padding:0 6px;}
.hb-n{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--charcoal);color:var(--gold);font-size:.85rem;}
.hb-opts{display:grid;gap:10px;margin-top:6px;}
.hb-opts.four{grid-template-columns:repeat(4,minmax(0,1fr));}
.hb-opts.three{grid-template-columns:repeat(3,minmax(0,1fr));}
.hb-opts.two{grid-template-columns:repeat(2,minmax(0,1fr));}
.hb-opt,.hb-swatch,.hb-chip{position:relative;cursor:pointer;}
.hb-opt input,.hb-swatch input,.hb-chip input{position:absolute;opacity:0;width:1px;height:1px;}
.hb-opt span{display:flex;flex-direction:column;justify-content:center;min-height:56px;height:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:12px;font-weight:700;font-size:.95rem;color:var(--charcoal);background:var(--cream);transition:border-color .2s,background .2s,transform .2s;}
.hb-opt small{font-weight:500;font-size:.85rem;color:var(--text-muted);margin-top:2px;}
.hb-opt input:checked + span{background:var(--charcoal);border-color:var(--charcoal);color:#fff;}
.hb-opt input:checked + span small{color:#CFC4AF;}
.hb-opt:hover span{transform:translateY(-1px);}
.hb-opt input:focus-visible + span,.hb-swatch input:focus-visible + span,.hb-chip input:focus-visible + span{outline:3px solid var(--gold);outline-offset:2px;}
.hb-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:6px;}
.hb-swatch span{display:flex;flex-direction:column;gap:8px;padding:10px;border:1.5px solid var(--border);border-radius:12px;font-weight:700;font-size:.9rem;background:#fff;min-height:44px;}
.hb-swatch i{display:block;height:42px;border-radius:8px;border:1px solid rgba(0,0,0,.08);}
.hb-swatch input:checked + span{border-color:var(--charcoal);box-shadow:0 0 0 2px var(--charcoal) inset;}
.hb-chips{display:flex;flex-wrap:wrap;gap:8px;}
.hb-chip span{display:inline-flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:999px;border:1.5px solid var(--border);font-weight:600;font-size:.94rem;background:#fff;}
.hb-chip input:checked + span{background:var(--forest);border-color:var(--forest);color:#fff;}
.hb-sub{font-weight:700;margin:14px 0 6px;color:var(--charcoal);}
.hb-sub:first-of-type{margin-top:6px;}
.hb-sub small{font-weight:500;color:var(--text-muted);}
.hb-range{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-weight:700;}
.hb-range output{font-family:var(--font-display);color:var(--wood-dark);}
.hb-controls input[type=range]{width:100%;accent-color:var(--charcoal);height:44px;cursor:pointer;}
.hb-counters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:6px;}
.hb-counter{display:grid;grid-template-columns:1fr 44px 52px 44px;align-items:center;gap:6px;padding:8px 10px;border:1.5px solid var(--border);border-radius:12px;background:var(--cream);}
.hb-counter span{font-weight:700;font-size:.95rem;}
.hb-counter button{width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:#fff;font-size:1.3rem;font-weight:700;cursor:pointer;color:var(--charcoal);}
.hb-counter input{width:52px;height:44px;text-align:center;border:0;background:transparent;font:700 1.15rem var(--font-display);color:var(--charcoal);-moz-appearance:textfield;}
.hb-counter input::-webkit-outer-spin-button,.hb-counter input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
@media (max-width:1100px){.hb-opts.four,.hb-swatches{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:960px){.hb-grid{grid-template-columns:minmax(0,1fr);}.hb-canvas-wrap{position:static;}}
@media (max-width:560px){.hb-counters{grid-template-columns:minmax(0,1fr);}.hb-opts.three{grid-template-columns:repeat(3,minmax(0,1fr));}.hb-specs{grid-template-columns:repeat(2,minmax(0,1fr));}.hb-specs span:nth-child(2){border-right:0;}.hb-specs span:nth-child(-n+2){border-bottom:1px solid #3a342f;}}
@media (max-width:380px){.hb-opts.two,.hb-opts.three{grid-template-columns:minmax(0,1fr);}.hb-actions .btn{width:100%;}}
.hb-attached{background:#EAF2EC;border:1px solid #BFD6C5;color:var(--forest);border-radius:12px;padding:12px 14px;margin-bottom:16px;font-size:.98rem;}

/* Home page teaser */
.hb-teaser{background:var(--charcoal-deep);color:#DDD3C3;overflow:hidden;}
.hb-teaser h2{color:#fff;}
.hb-teaser p{color:#CFC4AF;}
.hb-teaser-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,64px);align-items:center;}
.hb-teaser-list{list-style:none;padding:0;margin:18px 0 26px;display:grid;gap:8px;}
.hb-teaser-list li{padding-left:26px;position:relative;font-weight:600;color:#fff;}
.hb-teaser-list li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:3px;background:var(--gold);transform:rotate(45deg);}
.hb-teaser-art{margin:0;border-radius:var(--radius-lg);overflow:hidden;border:1px solid #3a342f;background:
  linear-gradient(rgba(185,151,91,.10) 1px,transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg,rgba(185,151,91,.10) 1px,transparent 1px) 0 0/24px 24px,#1B1917;}
.hb-teaser-art svg{display:block;width:100%;height:auto;aspect-ratio:8/5;}
.hb-teaser-art figcaption{display:flex;justify-content:space-between;padding:12px 16px;border-top:1px solid #3a342f;color:#CFC4AF;font-size:.9rem;letter-spacing:.1em;text-transform:uppercase;}
.hb-teaser-art figcaption b{color:#fff;letter-spacing:0;text-transform:none;}
.hb-teaser .eyebrow{background:rgba(185,151,91,.2);color:#E8CF9C;}
@media (max-width:900px){.hb-teaser-grid{grid-template-columns:minmax(0,1fr);}}

/* Smooth page-to-page transitions (Chrome/Edge); other browsers simply navigate */
@view-transition{navigation:auto;}
.site-header{view-transition-name:site-header;}
::view-transition-old(root),::view-transition-new(root){animation-duration:.32s;}
@media (prefers-reduced-motion:reduce){@view-transition{navigation:none;}}
/* Phones/tablets: keep the live drawing in view while choosing options.
   The canvas becomes a compact sticky preview; the brief follows the controls. */
@media (max-width:960px){
  .hb-canvas-wrap{display:contents;}
  .hb-canvas{position:sticky;top:82px;z-index:5;order:1;}
  .hb-canvas svg{aspect-ratio:auto;height:min(32vh,300px);width:100%;}
  .hb-specs{display:none;}
  .hb-canvas-top{padding:8px 14px;font-size:.8rem;}
  .hb-controls{order:2;}
  .hb-brief{order:3;}
  .hb-step{scroll-margin-top:calc(80px + 32vh + 60px);}
}
/* Nine nav items now (Plan Your Home added): hand off to the menu below 1320px */
@media (min-width:1181px) and (max-width:1320px){
  .main-nav{
    position:fixed;inset:0 0 0 auto;width:80%;max-width:320px;background:var(--white,#fff);
    flex-direction:column;align-items:flex-start;padding:100px 30px 30px;gap:24px;
    transform:translateX(100%);transition:transform .3s ease;z-index:95;
    box-shadow:var(--shadow-lg);overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .menu-toggle{display:block;position:relative;z-index:96;}
  .main-nav a{font-size:1rem;}
}
/* Studio counters stack when the controls column is narrow */
@media (min-width:961px) and (max-width:1240px){.hb-counters{grid-template-columns:minmax(0,1fr);}}
@media (max-width:340px){main .btn,.hero .btn,.page-hero .btn{padding:12px 12px;font-size:.88rem;letter-spacing:0;}}
/* Accessible text shades of the gold accent (WCAG AA 4.5:1 on cream and white).
   Decorative gold (lines, icons, buttons) is unchanged. */
:root{--gold-text:#6B5125;}
.eyebrow,.main-nav a.active,.gallery-concept-tag,.gallery-demo-tag,.form-note a{color:var(--gold-text);}
.cs-social-label{color:#5A554D;}
.hb-teaser .eyebrow,.page-hero .eyebrow,.hero .eyebrow{color:#E8CF9C;}
.site-footer .cs-social-label{color:#CFC4AF;}
.bg-forest .eyebrow,.area-section .eyebrow,.bg-charcoal .eyebrow,.final-cta .eyebrow{color:#E8CF9C;}
.main-nav a.active{opacity:1 !important;}
.bg-forest .eyebrow,.area-section .eyebrow,.bg-charcoal .eyebrow,.final-cta .eyebrow{color:#E8CF9C !important;}
.form-note a{color:var(--gold-text) !important;}
.cs-form-social .cs-social-label{color:#5A554D !important;}
.cs-form-social .cs-social-label{opacity:1 !important;}
.gallery-concept-tag,.gallery-demo-tag{font-size:.84rem;}
.page-hero-grid > *{min-width:0;}
@media (max-width:360px){.page-hero h1{font-size:1.85rem;overflow-wrap:break-word;hyphens:auto;}}

/* No-JS safety net: reveal animations need JavaScript, so without it
   every revealed element is shown immediately instead of staying hidden. */
@media (scripting: none){
  .reveal,.dim-line.reveal,.steps-beam.reveal{opacity:1 !important;transform:none !important;transition:none !important;}
  .gallery-item.reveal img{clip-path:none !important;transition:none !important;}
}

/* ===== Responsive QA pass ===== */
/* Balanced last rows: 3-up and area grids wrap and centre any final partial row */
.grid-3,.area-grid{display:flex;flex-wrap:wrap;justify-content:center;}
.grid-3 > *{flex:0 0 calc((100% - 56px) / 3);min-width:0;}
.area-grid > *{flex:0 0 calc((100% - 64px) / 5);min-width:0;}
.area-grid:has(> :nth-child(6):last-child) > *{flex-basis:calc((100% - 32px) / 3);}   /* 6 areas: 3 + 3 */
@media (max-width:960px){.grid-3 > *{flex-basis:calc((100% - 28px) / 2);}}
@media (max-width:900px){.area-grid > *,.area-grid:has(> :nth-child(6):last-child) > *{flex-basis:calc((100% - 32px) / 3);}}
@media (max-width:640px){.grid-3 > *{flex-basis:100%;}}
@media (max-width:600px){.area-grid > *,.area-grid:has(> :nth-child(6):last-child) > *{flex-basis:calc((100% - 16px) / 2);}}
/* Tap targets */
.svc-card .learn-more{display:inline-flex;align-items:center;min-height:44px;margin-top:4px;}
.consent-row input[type=checkbox]{width:24px;height:24px;margin-top:1px;}
.consent-row label{cursor:pointer;}
/* Readable small labels */
.cs-social-label,.gallery-concept-tag{font-size:.8rem;}
/* Mobile menu: full-width 44px tap rows (same visual rhythm), and the sticky
   CTA bar steps aside while the menu is open so it can't sit above the backdrop */
@media (max-width:1180px){
  .main-nav{gap:0;}
  .main-nav a{display:flex;align-items:center;min-height:44px;width:100%;}
}
body:has(.main-nav.open) .sticky-mobile-cta{visibility:hidden;}
/* keep the "Plan Your Home" dot beside its label in the full-width mobile menu */
@media (max-width:1180px){
  .main-nav a.nav-studio::before{position:static;order:2;margin-left:8px;flex-shrink:0;align-self:flex-start;margin-top:10px;}
}

/* Social icons and legal links without a destination yet: shown, not clickable */
.social-links a:not([href]),.footer-legal a:not([href]){pointer-events:none;cursor:default;}