/* ============================================================
   main.css — Layouts & Components
   Local Home Improvement LLC | SIC-LHI-001
   Light palette: F4F4F9 · F0EFF8 · F3F8F3 · FDF9F0 · F7F0F0
   ============================================================ */

/* ── SKIP LINK ─────────────────────────────────────────────────── */
.skip-link {
  position:absolute; top:-100%; left:1rem;
  background:var(--gold-mid); color:var(--bg-dark);
  padding:.5rem 1rem; border-radius:0 0 var(--r-md) var(--r-md);
  font-weight:var(--w-bold); font-size:var(--text-sm); z-index:9999;
}
.skip-link:focus { top:0; }

/* ═══════════════════════════════════════════════════════════════
   NAVBAR — white background, light theme
═══════════════════════════════════════════════════════════════ */
.site-header {
  position:  fixed; top:0; left:0; right:0; z-index:var(--z-nav);
  background:var(--nav-bg);
  border-bottom: 1px solid var(--nav-border);
  transition: box-shadow var(--t-base);
}
.site-header.scrolled { box-shadow:var(--nav-shadow); }

.navbar {
  max-width:var(--container); margin:0 auto; padding:0 var(--section-px);
  height:var(--nav-h);
  display:flex; align-items:center; gap:var(--sp-8);
}
.nav-logo {
  display:flex; align-items:center; gap:var(--sp-3);
  flex-shrink:0; text-decoration:none;
}
.nav-logo img { width:42px; height:42px; border-radius:var(--r-sm); }
.nav-logo-text { display:flex; flex-direction:column; line-height:1.2; }
.nav-logo-top    { font-size:11px; color:var(--text-muted); }
.nav-logo-bottom { font-size:var(--text-sm); font-weight:var(--w-bold); color:var(--text-primary); }
.nav-logo-bottom strong { color:var(--gold-mid); }

.nav-links {
  display:flex; align-items:center; gap:var(--sp-8); margin-left:auto;
}
.nav-links a {
  font-size:var(--text-sm); font-weight:var(--w-semi);
  color:var(--text-muted); text-decoration:none;
  padding-bottom:2px; border-bottom:2px solid transparent;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color:var(--text-primary); border-bottom-color:var(--gold-mid);
}
.nav-actions { display:flex; align-items:center; gap:var(--sp-4); flex-shrink:0; }
.nav-phone {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-sm); font-weight:var(--w-semi);
  color:var(--text-body); text-decoration:none;
  transition:color var(--t-fast);
}
.nav-phone:hover { color:var(--gold); }

/* Hamburger */
/* Mobile menu — see new mob-menu section below */

/* ═══════════════════════════════════════════════════════════════
   SECTION HEADINGS — shared
═══════════════════════════════════════════════════════════════ */
.sec-head { text-align:center; margin-bottom:var(--sp-12); }
.sec-head .gold-bar { margin:var(--sp-3) auto var(--sp-5); }

.sec-title {
  font-family:    var(--font-heading);
  font-size:      clamp(2rem, 4vw, 3.2rem);
  font-weight:    var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height:    var(--lead-tight);
  color:          var(--text-primary);
  margin-bottom:  var(--sp-3);
}
.sec-title em        { font-style:normal; color:var(--gold-mid); }
.sec-title.on-dark   { color:var(--text-on-dark); }
.sec-sub {
  font-size:var(--text-md); color:var(--text-muted);
  line-height:var(--lead-relax); max-width:560px; margin:0 auto;
}
.sec-sub.on-dark { color:var(--text-on-dark-2); }

/* ═══════════════════════════════════════════════════════════════
   HERO — full-screen image, text overlay, dark shadow
═══════════════════════════════════════════════════════════════ */
.hero {
  position:   relative;
  min-height: 100vh;          /* full viewport height */
  display:    flex;
  flex-direction: column;
  overflow:   hidden;
}

/* Background image — fills entire section */
.hero-bg-img {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.hero-bg-img img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 40%;
  display:          block;
  animation:        heroZoom 16s ease-in-out infinite alternate;
  transform-origin: center center;
  will-change:      transform;
}

/* Subtle Ken Burns zoom — in and out, very smooth */
@keyframes heroZoom {
  0%   { transform: scale(1.00) translate(0, 0); }
  33%  { transform: scale(1.06) translate(-1%, .5%); }
  66%  { transform: scale(1.04) translate(1%, -.5%); }
  100% { transform: scale(1.08) translate(0, 1%); }
}

/* Dark overlay — gradient from bottom-left for depth */
.hero-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background:
    linear-gradient(
      to bottom,
      rgba(7,9,9,.55) 0%,
      rgba(7,9,9,.45) 40%,
      rgba(7,9,9,.72) 85%,
      rgba(7,9,9,.88) 100%
    ),
    linear-gradient(
      135deg,
      rgba(7,9,9,.3) 0%,
      transparent 60%
    );
}

/* Main content — centered, above overlay */
.hero-content {
  position:   relative;
  z-index:    2;
  flex:       1;
  display:    flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding:    calc(var(--nav-h) + 5rem) var(--section-px) 4rem;
  max-width:  860px;
  margin:     0 auto;
  width:      100%;
}

.hero-eyebrow {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--sp-2);
  background:     rgba(194,147,45,.15);
  border:         1px solid rgba(194,147,45,.40);
  color:          var(--gold-mid);
  font-size:      var(--text-xs);
  font-weight:    var(--w-bold);
  letter-spacing: var(--track-wider);
  text-transform: uppercase;
  padding:        .4rem 1.1rem;
  border-radius:  var(--r-pill);
  margin-bottom:  var(--sp-5);
  /* subtle text shadow so it reads on any image */
  text-shadow:    0 1px 4px rgba(0,0,0,.5);
}
.hero-pulse {
  width:      6px;
  height:     6px;
  border-radius: 50%;
  background: var(--gold-mid);
  animation:  bpulse 1.4s infinite;
}

.hero-title {
  font-family:    var(--font-heading);
  font-size:      var(--text-hero);
  font-weight:    var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height:    var(--lead-tight);
  color:          #FFFFFF;
  margin-bottom:  var(--sp-5);
  /* extra strong text shadow — guarantees readability on any photo */
  text-shadow:
    0 2px 4px   rgba(0,0,0,.75),
    0 4px 16px  rgba(0,0,0,.65),
    0 8px 40px  rgba(0,0,0,.5),
    0 0  80px   rgba(0,0,0,.35);
}
.hero-title em {
  font-style: normal;
  color:      var(--gold-mid);
  display:    block;
  text-shadow:
    0 2px 4px  rgba(0,0,0,.5),
    0 4px 24px rgba(194,147,45,.4);
}

.hero-sub {
  font-size:     var(--text-md);
  font-weight:   var(--w-light);
  color:         rgba(255,255,255,.80);
  line-height:   var(--lead-relax);
  max-width:     560px;
  margin:        0 auto var(--sp-8);
  text-shadow:   0 1px 6px rgba(0,0,0,.6);
}

.hero-ctas {
  display:         flex;
  flex-wrap:       wrap;
  gap:             var(--sp-4);
  justify-content: center;
  margin-bottom:   var(--sp-8);
}

/* White button — for use on dark hero bg */
.btn-white {
  background: rgba(255,255,255,.95);
  color:      var(--text-primary);
}
.btn-white:hover {
  background:  #fff;
  transform:   translateY(-2px);
  box-shadow:  0 6px 20px rgba(0,0,0,.25);
}
/* Ghost white — outline on dark bg */
.btn-ghost-white {
  background: transparent;
  color:      rgba(255,255,255,.88);
  border:     2px solid rgba(255,255,255,.45);
}
.btn-ghost-white:hover {
  border-color: rgba(255,255,255,.85);
  color:        #fff;
  background:   rgba(255,255,255,.08);
}

.hero-trust {
  display:         flex;
  flex-wrap:       wrap;
  gap:             .5rem 1.5rem;
  justify-content: center;
}
.hero-trust li {
  font-size:   var(--text-sm);
  color:       rgba(255,255,255,.65);
  display:     flex;
  align-items: center;
  gap:         .4rem;
  text-shadow: 0 1px 4px rgba(0,0,0,.5);
}
.hero-trust li span {
  color:       var(--gold-mid);
  font-weight: var(--w-bold);
}

/* Stats strip — pinned to bottom of hero */
.hero-stats {
  position:        relative;
  z-index:         2;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         1.75rem var(--section-px);
  background:      rgba(7,9,9,.72);
  backdrop-filter: blur(8px);
  border-top:      1px solid rgba(194,147,45,.20);
  gap:             0;
}
.hero-stat {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  padding:        0 3.5rem;
  text-align:     center;
}
.hero-stat-num {
  font-family:   var(--font-heading);
  font-size:     2.8rem;
  font-weight:   var(--w-black);
  color:         var(--gold-mid);
  line-height:   1;
  margin-bottom: .3rem;
}
.hero-stat-num span { font-size: 2rem; }
.hero-stat-lbl {
  font-size:      var(--text-xs);
  font-weight:    var(--w-semi);
  color:          rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  white-space:    nowrap;
}
.hero-stat-div {
  width:       1px;
  height:      52px;
  background:  rgba(255,255,255,.15);
  flex-shrink: 0;
}

/* Responsive hero */
@media (max-width: 1024px) {
  .hero-stat   { padding: 0 2rem; }
  .hero-stat-num { font-size: 2.2rem; }
}
@media (max-width: 768px) {
  .hero { min-height: 100svh; }
  .hero-content { padding: calc(var(--nav-h) + 3rem) var(--section-px) 3rem; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { justify-content: center; }
  .hero-stats { padding: 1.25rem var(--section-px); gap: 0; }
  .hero-stat  { padding: 0 1rem; }
  .hero-stat-num { font-size: 1.7rem; }
  .hero-stat-num span { font-size: 1.3rem; }
  .hero-stat-div { height: 38px; }
}
@media (max-width: 480px) {
  .hero-stat   { padding: 0 .6rem; }
  .hero-stat-num { font-size: 1.4rem; }
  .hero-stat-lbl { font-size: 9px; }
  .hero-trust  { flex-direction: column; align-items: center; }
}

/* ═══════════════════════════════════════════════════════════════
   TRUST BAR — gold gradient
═══════════════════════════════════════════════════════════════ */
.trust-bar {
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 100%);
  padding:.9rem 0;
}
.trust-bar-inner {
  max-width:var(--container); margin:0 auto; padding:0 var(--section-px);
  display:flex; flex-wrap:wrap; gap:var(--sp-6);
  align-items:center; justify-content:center;
}
.trust-item {
  display:flex; align-items:center; gap:var(--sp-2);
  font-size:var(--text-sm); font-weight:var(--w-bold);
  color:var(--bg-dark); white-space:nowrap;
}

/* ═══════════════════════════════════════════════════════════════
   SERVICES — #F0EFF8 soft lavender
═══════════════════════════════════════════════════════════════ */
.services {
  background:var(--bg-services);
  padding:var(--sp-20) var(--section-px);
}
.services-inner { max-width:var(--container); margin:0 auto; }

.services-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
}
.svc-card {
  background:var(--bg-white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg); padding:1.75rem;
  box-shadow:var(--shadow-xs);
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.svc-card:hover {
  transform:translateY(-5px);
  border-color:var(--border-gold);
  box-shadow:var(--shadow-md);
}
.svc-icon {
  width:54px; height:54px; border-radius:var(--r-md);
  background:var(--gold-tint);
  display:flex; align-items:center; justify-content:center;
  color:var(--gold-mid); margin-bottom:var(--sp-4);
  transition:background var(--t-fast);
}
.svc-card:hover .svc-icon { background:rgba(232,157,35,.2); }
.svc-name {
  font-size:var(--text-lg); font-weight:var(--w-bold);
  color:var(--text-primary); margin-bottom:var(--sp-2);
}
.svc-desc {
  font-size:var(--text-sm); color:var(--text-muted);
  line-height:var(--lead-relax); margin-bottom:var(--sp-4);
}
.svc-link {
  font-size:var(--text-sm); font-weight:var(--w-bold);
  color:var(--gold); text-decoration:none; transition:color var(--t-fast);
}
.svc-link:hover { color:var(--gold-mid); }
.services-cta { text-align:center; margin-top:var(--sp-12); }

/* ═══════════════════════════════════════════════════════════════
   ACTIVE PROJECTS — #F3F8F3 soft mint
═══════════════════════════════════════════════════════════════ */
.projects-prev {
  background:var(--bg-projects);
  padding:var(--sp-20) var(--section-px);
}
.projects-prev-inner { max-width:var(--container); margin:0 auto; }

.proj-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
}
.proj-card {
  background:var(--bg-white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg); overflow:hidden;
  box-shadow:var(--shadow-xs);
  transition:transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
}
.proj-card:hover {
  transform:translateY(-5px);
  border-color:var(--border-gold);
  box-shadow:var(--shadow-md);
}
.proj-img {
  position:relative; height:210px;
  background:var(--bg-body); overflow:hidden;
}
.proj-img img {
  width:100%; height:100%; object-fit:cover;
  transition:transform var(--t-slow);
}
.proj-card:hover .proj-img img { transform:scale(1.05); }
.proj-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  color:var(--border-medium);
}
.proj-status  { position:absolute; top:10px; left:10px; font-size:10px; }
.proj-bar     { position:absolute; bottom:0; left:0; right:0; height:3px; background:var(--border-light); }
.proj-bar-fill{ height:100%; background:linear-gradient(90deg, var(--gold), var(--gold-mid)); }
.proj-body    { padding:var(--sp-5); }
.proj-title   { font-size:var(--text-lg); font-weight:var(--w-bold); color:var(--text-primary); margin-bottom:var(--sp-2); }
.proj-loc     {
  display:flex; align-items:center; gap:var(--sp-1);
  font-size:var(--text-xs); color:var(--gold); margin-bottom:var(--sp-3);
}
.proj-cta     { font-size:var(--text-xs); font-weight:var(--w-bold); color:var(--gold); text-decoration:none; }
.proj-empty   { text-align:center; color:var(--text-muted); padding:3rem; }
.proj-footer  { text-align:center; margin-top:var(--sp-10); }

/* ═══════════════════════════════════════════════════════════════
   WHY CHOOSE SERGIO — #FDF9F0 warm cream
═══════════════════════════════════════════════════════════════ */
.why {
  background:var(--bg-why);
  padding:var(--sp-20) var(--section-px);
}
.why-inner {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1fr;
  gap:5rem; align-items:center;
}
.why-left .gold-bar { margin-left:0; }
.why-stats { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5); }
.stat-card {
  background:var(--bg-white);
  border:1px solid var(--border-light);
  border-radius:var(--r-lg); padding:2rem 1.5rem; text-align:center;
  box-shadow:var(--shadow-xs);
  transition:border-color var(--t-base), box-shadow var(--t-base);
}
.stat-card:hover { border-color:var(--border-gold); box-shadow:var(--shadow-sm); }
.stat-num {
  display:block; font-family:var(--font-heading);
  font-size:3.5rem; font-weight:var(--w-black);
  background:linear-gradient(135deg, var(--gold), var(--gold-mid));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  background-clip:text; line-height:1; margin-bottom:var(--sp-2);
}
.stat-plus  { font-size:2rem; }
.stat-label { font-size:var(--text-sm); color:var(--text-muted); font-weight:var(--w-medium); }

/* ═══════════════════════════════════════════════════════════════
   TESTIMONIALS — #F7F0F0 blush rose
═══════════════════════════════════════════════════════════════ */
.testimonials {
  background:var(--bg-testimonials);
  padding:var(--sp-20) var(--section-px);
}
.testimonials-inner { max-width:var(--container); margin:0 auto; }

.reviews-grid {
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-5);
}
.review-card {
  background:var(--bg-white); border-radius:var(--r-lg);
  padding:var(--sp-8) var(--sp-6);
  border:1px solid var(--border-light);
  box-shadow:var(--shadow-xs);
  position:relative;
}
.review-card::before {
  content:'\201C'; position:absolute;
  top:var(--sp-4); right:var(--sp-5);
  font-size:5rem; line-height:1; color:rgba(194,147,45,.10);
  font-family:Georgia, serif; pointer-events:none;
}
.review-stars { font-size:1.1rem; color:var(--gold-mid); margin-bottom:var(--sp-4); }
.review-text {
  font-size:var(--text-sm); color:var(--text-body);
  font-style:italic; line-height:var(--lead-relax);
  margin-bottom:var(--sp-5); border:none; padding:0;
}
.review-author { font-size:var(--text-sm); font-weight:var(--w-bold); color:var(--text-primary); font-style:normal; }
.review-source { display:block; font-size:var(--text-xs); color:var(--gold); margin-top:2px; }
.testimonials-cta { text-align:center; margin-top:var(--sp-10); }
.btn-outline-dark {
  display:inline-flex; align-items:center; gap:var(--sp-2);
  height:var(--btn-h); padding:0 var(--sp-6);
  border:1.5px solid var(--border-medium); color:var(--text-primary);
  border-radius:var(--btn-r); font-weight:var(--w-bold);
  font-size:var(--text-sm); text-decoration:none; transition:all var(--t-base);
}
.btn-outline-dark:hover { border-color:var(--gold-mid); color:var(--gold-mid); }

/* ═══════════════════════════════════════════════════════════════
   CONTACT + FORM — #F4F4F9
═══════════════════════════════════════════════════════════════ */
.contact {
  background:var(--bg-contact);
  padding:var(--sp-20) var(--section-px);
}
.contact-inner {
  max-width:var(--container); margin:0 auto;
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:5rem; align-items:start;
}
.contact-info .gold-bar { margin-left:0; }
.contact-details { margin-top:var(--sp-8); display:flex; flex-direction:column; gap:var(--sp-5); }
.contact-item {
  display:flex; align-items:flex-start; gap:var(--sp-4);
  color:inherit; text-decoration:none;
}
.contact-icon {
  width:46px; height:46px; border-radius:var(--r-md);
  background:var(--gold-tint); color:var(--gold-mid);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:background var(--t-fast);
}
.contact-item:hover .contact-icon { background:rgba(232,157,35,.2); }
.contact-lbl { display:block; font-size:var(--text-xs); color:var(--text-muted); text-transform:uppercase; letter-spacing:var(--track-wide); margin-bottom:2px; }
.contact-val { display:block; font-size:var(--text-md); font-weight:var(--w-semi); color:var(--text-primary); }

.form-box {
  background:var(--bg-white);
  border:1px solid var(--border-light);
  border-radius:var(--r-xl); padding:2.5rem;
  box-shadow:var(--shadow-sm);
}
.form-title { font-size:var(--text-xl); font-weight:var(--w-bold); color:var(--text-primary); margin-bottom:.25rem; }
.form-sub   { font-size:var(--text-sm); color:var(--text-muted); margin-bottom:var(--sp-6); }
.form-row   { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-4); }
.form-submit{ width:100%; justify-content:center; margin-top:var(--sp-2); }
.form-msg   { padding:.75rem var(--sp-4); border-radius:var(--r-md); font-size:var(--text-sm); margin-top:var(--sp-4); font-weight:var(--w-medium); }
.form-msg-ok  { background:var(--green-bg); color:var(--green); }
.form-msg-err { background:var(--red-bg); color:var(--red); }

/* ═══════════════════════════════════════════════════════════════
   CTA STRIP — gold gradient
═══════════════════════════════════════════════════════════════ */
.cta-strip {
  background:linear-gradient(135deg, var(--gold) 0%, var(--gold-mid) 100%);
  padding:3.5rem var(--section-px);
}
.cta-strip-inner {
  max-width:var(--container); margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:var(--sp-8);
}
.cta-strip-title {
  font-family:    var(--font-heading);
  font-size:      clamp(1.8rem, 3.5vw, 2.8rem);
  font-weight:    var(--w-black);
  text-transform: uppercase;
  color:          var(--bg-dark);
  line-height:    var(--lead-tight);
}
.cta-strip-sub  { font-size:var(--text-sm); color:rgba(7,9,9,.6); margin-top:.35rem; }
.cta-strip-btns { display:flex; flex-wrap:wrap; gap:var(--sp-4); }

/* ═══════════════════════════════════════════════════════════════
   STICKY MOBILE CTA — on dark
═══════════════════════════════════════════════════════════════ */
.sticky-cta {
  display:none; position:fixed; bottom:0; left:0; right:0;
  z-index:var(--z-nav); background:var(--bg-dark);
  border-top:1px solid rgba(255,255,255,.08);
  padding:.5rem var(--section-px); gap:var(--sp-2);
}
.scta-btn {
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:3px; padding:.5rem; border-radius:var(--r-md);
  text-decoration:none; font-size:10px; font-weight:var(--w-bold);
  text-transform:uppercase; letter-spacing:var(--track-wide);
  transition:opacity var(--t-fast);
}
.scta-btn:hover { opacity:.85; }
.scta-call  { background:var(--green-bg);   color:var(--green); }
.scta-email { background:var(--gold-tint);   color:var(--gold); }
.scta-quote { background:var(--gold-mid);    color:var(--bg-dark); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER — dark background
═══════════════════════════════════════════════════════════════ */
.site-footer {
  background:var(--bg-dark);
  border-top:3px solid var(--gold-mid);
  padding:4rem var(--section-px) 0;
}
.footer-inner { max-width:var(--container); margin:0 auto; }
.footer-grid {
  display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:var(--sp-10); margin-bottom:var(--sp-10);
}
.footer-brand img     { margin-bottom:var(--sp-4); }
.footer-name          { font-size:var(--text-lg); font-weight:var(--w-bold); color:var(--text-on-dark); margin-bottom:3px; }
.footer-tagline       { font-size:var(--text-sm); color:var(--gold-mid); margin-bottom:var(--sp-4); }
.footer-brand address { font-style:normal; font-size:var(--text-sm); color:var(--text-on-dark-2); line-height:var(--lead-relax); }
.footer-brand address a { color:var(--text-on-dark-2); text-decoration:none; transition:color var(--t-fast); }
.footer-brand address a:hover { color:var(--gold-mid); }

.footer-nav h3 {
  font-size:var(--text-xs); font-weight:var(--w-bold);
  letter-spacing:var(--track-wider); text-transform:uppercase;
  color:var(--text-on-dark-2); margin-bottom:var(--sp-5);
}
.footer-nav ul { display:flex; flex-direction:column; gap:var(--sp-3); }
.footer-nav a {
  font-size:var(--text-sm); color:var(--text-on-dark-3);
  text-decoration:none; transition:color var(--t-fast);
}
.footer-nav a:hover { color:var(--gold-mid); }

.footer-social h3 {
  font-size:var(--text-xs); font-weight:var(--w-bold);
  letter-spacing:var(--track-wider); text-transform:uppercase;
  color:var(--text-on-dark-2); margin-bottom:var(--sp-5);
}
.footer-social ul { display:flex; flex-direction:column; gap:var(--sp-4); }
.footer-social a {
  display:flex; align-items:center; gap:var(--sp-3);
  font-size:var(--text-sm); color:var(--text-on-dark-3);
  text-decoration:none; transition:color var(--t-fast);
}
.footer-social a:hover { color:var(--gold-mid); }
.footer-area { margin-top:var(--sp-6); }
.footer-area h4 {
  font-size:var(--text-xs); font-weight:var(--w-bold);
  letter-spacing:var(--track-wider); text-transform:uppercase;
  color:var(--text-on-dark-2); margin-bottom:var(--sp-2);
}
.footer-area p { font-size:var(--text-xs); color:var(--text-on-dark-3); line-height:var(--lead-relax); }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.08);
  padding:var(--sp-6) 0;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:var(--sp-4);
}
.footer-copy, .footer-credit { font-size:var(--text-xs); color:var(--text-on-dark-3); }
.footer-credit a { color:var(--gold-mid); text-decoration:none; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — TABLET ≤ 1024px
═══════════════════════════════════════════════════════════════ */
@media (max-width:1024px) {
  .hero-inner      { grid-template-columns:1fr; text-align:center; }
  .hero-image      { display:none; }
  .hero-ctas       { justify-content:center; }
  .hero-trust      { justify-content:center; }
  .hero-eyebrow    { margin:0 auto var(--sp-5); }
  .services-grid   { grid-template-columns:repeat(2,1fr); }
  .why-inner       { grid-template-columns:1fr; gap:var(--sp-12); }
  .why-left        { text-align:center; }
  .why-left .gold-bar { margin:var(--sp-3) auto var(--sp-5); }
  .contact-inner   { grid-template-columns:1fr; gap:var(--sp-10); }
  .contact-info    { text-align:center; }
  .contact-info .gold-bar { margin:var(--sp-3) auto var(--sp-5); }
  .contact-details { align-items:center; }
  .footer-grid     { grid-template-columns:1fr 1fr; gap:var(--sp-8); }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE ≤ 768px
═══════════════════════════════════════════════════════════════ */
@media (max-width:768px) {
  .nav-links    { display:none; }
  .nav-actions  { display:none; }
  /* hamburger shown via new mob-menu section */
  .hero { padding-top:calc(var(--nav-h) + 3rem); padding-bottom:3rem; }
  .hero-ctas    { flex-direction:column; align-items:stretch; }
  .hero-ctas .btn { justify-content:center; }
  .trust-bar-inner  { gap:var(--sp-4); }
  .services-grid    { grid-template-columns:1fr; }
  .proj-grid        { grid-template-columns:1fr; }
  .why-stats        { grid-template-columns:1fr 1fr; }
  .reviews-grid     { grid-template-columns:1fr; }
  .form-row         { grid-template-columns:1fr; }
  .cta-strip-inner  { flex-direction:column; text-align:center; }
  .cta-strip-btns   { justify-content:center; }
  .footer-grid      { grid-template-columns:1fr; gap:var(--sp-8); }
  .footer-bottom    { flex-direction:column; text-align:center; }
  .sticky-cta { display:flex; }
  body { padding-bottom:72px; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE ≤ 480px
═══════════════════════════════════════════════════════════════ */
@media (max-width:480px) {
  .trust-bar-inner { flex-direction:column; gap:var(--sp-3); }
  .why-stats       { grid-template-columns:1fr; }
  .hero-trust      { flex-direction:column; align-items:center; }
}

/* ═══════════════════════════════════════════════════════════════
   HERO — redesigned: text top + full-width photo bottom
═══════════════════════════════════════════════════════════════ */
.hero {
  background: var(--bg-hero);
  padding-top: calc(var(--nav-h) + 4rem);
  padding-bottom: 0;
  overflow: hidden;
  position: relative;
}
.hero-bg {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 100% 0%, rgba(194,147,45,.06), transparent),
    radial-gradient(ellipse 40% 60% at 0%  80%, rgba(240,239,248,.9), transparent);
}

/* Text block — centered, constrained width */
.hero-top {
  position: relative; z-index: 1;
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--section-px) 3.5rem;
  text-align: center;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  background: var(--gold-tint); border: 1px solid rgba(194,147,45,.3);
  color: var(--gold); font-size: var(--text-xs);
  font-weight: var(--w-bold); letter-spacing: var(--track-wider);
  text-transform: uppercase; padding: .4rem 1.1rem;
  border-radius: var(--r-pill); margin-bottom: var(--sp-5);
}
.hero-pulse {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold-mid); animation: bpulse 1.4s infinite;
}
/* (duplicate hero-title removed — using the white text-shadow version above) */
.hero-sub {
  font-size: var(--text-md); font-weight: var(--w-light);
  color: rgba(255,255,255,.80); line-height: var(--lead-relax);
  max-width: 600px; margin: 0 auto var(--sp-8);
  text-shadow: 0 1px 6px rgba(0,0,0,.6);
}
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  justify-content: center; margin-bottom: var(--sp-8);
}
.hero-trust {
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  justify-content: center;
}
.hero-trust li {
  font-size: var(--text-sm); color: var(--text-muted);
  display: flex; align-items: center; gap: .4rem;
}
.hero-trust li span { color: var(--gold); font-weight: var(--w-bold); }

/* Full-width photo block */
.hero-photo-wrap {
  position: relative;
  width: 100%;
  max-height: 580px;
  overflow: hidden;
  display: block;
}
.hero-photo {
  width: 100%;
  height: 580px;
  object-fit: cover;
  object-position: center 30%;
  display: block;
  filter: brightness(.92);
}

/* Stats overlay on photo */
.hero-photo-badges {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgba(7,9,9,.82) 0%, rgba(7,9,9,.3) 70%, transparent 100%);
  display: flex; align-items: flex-end; justify-content: center;
  gap: 0; padding: 2rem var(--section-px) 2rem;
}
.hero-badge-item {
  display: flex; flex-direction: column; align-items: center;
  padding: 0 3rem;
  text-align: center;
}
.hero-badge-num {
  font-family: var(--font-heading);
  font-size: 2.6rem; font-weight: var(--w-black);
  color: var(--gold-mid); line-height: 1;
  margin-bottom: .3rem;
}
.hero-badge-lbl {
  font-size: var(--text-xs); font-weight: var(--w-semi);
  color: rgba(255,255,255,.7);
  text-transform: uppercase; letter-spacing: var(--track-wide);
  white-space: nowrap;
}
.hero-badge-divider {
  width: 1px; height: 50px;
  background: rgba(255,255,255,.2);
  align-self: center; flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RECENT PROJECTS — rich detail cards
═══════════════════════════════════════════════════════════════ */
.recent-projects {
  background: var(--bg-projects);
  padding: var(--sp-20) var(--section-px);
}
.recent-projects-inner { max-width: var(--container); margin: 0 auto; }

.rproj-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
}

.rproj-card {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-xs);
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
  display: flex; flex-direction: column;
}
.rproj-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-gold);
}

/* Photo area */
.rproj-photo {
  position: relative;
  height: 230px;
  background: var(--bg-services);
  overflow: hidden;
  flex-shrink: 0;
}
.rproj-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.rproj-card:hover .rproj-photo img { transform: scale(1.04); }
.rproj-placeholder {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-3);
  color: var(--text-muted);
}
.rproj-placeholder span { font-size: var(--text-sm); color: var(--text-muted); }

/* Service type badge on photo */
.rproj-type {
  position: absolute; top: 12px; left: 12px;
  background: var(--gold-mid); color: var(--bg-dark);
  font-size: 10px; font-weight: var(--w-bold);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  padding: 4px 10px; border-radius: var(--r-pill);
}

/* Body */
.rproj-body {
  padding: var(--sp-6);
  display: flex; flex-direction: column; flex: 1;
}
.rproj-title {
  font-size: var(--text-lg); font-weight: var(--w-bold);
  color: var(--text-primary); margin-bottom: var(--sp-4);
  line-height: var(--lead-snug);
}

/* Meta grid — 2 columns */
.rproj-meta {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.rproj-meta-item {
  display: flex; align-items: flex-start; gap: var(--sp-2);
}
.rproj-meta-icon {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  background: var(--gold-tint); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; margin-top: 1px;
}
.rproj-meta-label {
  display: block; font-size: 10px; font-weight: var(--w-bold);
  letter-spacing: var(--track-wide); text-transform: uppercase;
  color: var(--text-muted); margin-bottom: 1px;
}
.rproj-meta-value {
  display: block; font-size: var(--text-sm);
  font-weight: var(--w-semi); color: var(--text-primary);
}

/* Description */
.rproj-desc {
  font-size: var(--text-sm); color: var(--text-body);
  line-height: var(--lead-relax);
  margin-bottom: var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border-light);
  flex: 1;
}

/* CTA link */
.rproj-cta {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-sm); font-weight: var(--w-bold);
  color: var(--gold); text-decoration: none;
  transition: color var(--t-fast), gap var(--t-fast);
  margin-top: auto;
}
.rproj-cta:hover { color: var(--gold-mid); gap: var(--sp-3); }

/* Footer */
.rproj-footer { text-align: center; margin-top: var(--sp-12); }

/* ── RESPONSIVE overrides for new sections ──────────────────── */
@media (max-width: 1024px) {
  .rproj-grid { grid-template-columns: 1fr 1fr; }
  .hero-badge-item { padding: 0 1.5rem; }
  .hero-badge-num  { font-size: 2rem; }
}
@media (max-width: 768px) {
  .hero-photo      { height: 340px; }
  .rproj-grid      { grid-template-columns: 1fr; }
  .rproj-meta      { grid-template-columns: 1fr 1fr; }
  .hero-photo-badges { gap: 0; padding: 1.5rem var(--section-px) 1.5rem; }
  .hero-badge-item { padding: 0 1rem; }
  .hero-badge-num  { font-size: 1.6rem; }
  .hero-badge-lbl  { font-size: 9px; }
}
@media (max-width: 480px) {
  .hero-photo      { height: 260px; }
  .hero-badge-item { padding: 0 .6rem; }
  .hero-badge-num  { font-size: 1.3rem; }
  .hero-badge-divider { height: 36px; }
  .rproj-meta      { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   RECENT PROJECTS — alternating image + details layout
═══════════════════════════════════════════════════════════════ */
.recent-proj {
  background: var(--bg-projects);   /* #F3F8F3 soft mint */
  padding:    var(--sp-20) var(--section-px);
}
.recent-proj__inner {
  max-width: var(--container);
  margin:    0 auto;
}

/* Stacked list — each project is a full row */
.rproj__list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-10);
  margin-bottom:  var(--sp-10);
}

/* Each card: image left, details right */
.rproj__card {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           0;
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--r-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  transition:    transform var(--t-base), box-shadow var(--t-base);
}
.rproj__card:hover {
  transform:   translateY(-4px);
  box-shadow:  var(--shadow-md);
}

/* Reverse layout — details left, image right */
.rproj__card--reverse {
  direction: rtl;   /* flip columns */
}
.rproj__card--reverse > * {
  direction: ltr;   /* restore text direction inside */
}

/* ── IMAGE SIDE ───────────────────────────────────────────── */
.rproj__img-wrap {
  position:   relative;
  overflow:   hidden;
  min-height: 420px;
}
.rproj__img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center;
  display:          block;
  transition:       transform var(--t-slow);
}
.rproj__card:hover .rproj__img {
  transform: scale(1.04);
}
.rproj__img-ph {
  width:           100%;
  height:          100%;
  min-height:      420px;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-3);
  background:      var(--bg-services);
  color:           var(--text-muted);
}
.rproj__img-ph span {
  font-size:   var(--text-sm);
  color:       var(--text-muted);
}

/* Service type badge — top-left of image */
.rproj__type-pill {
  position:       absolute;
  top:            16px;
  left:           16px;
  background:     var(--gold-mid);
  color:          var(--bg-dark);
  font-size:      10px;
  font-weight:    var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding:        5px 12px;
  border-radius:  var(--r-pill);
  box-shadow:     0 2px 8px rgba(0,0,0,.2);
}

/* Completed badge — bottom-right of image */
.rproj__done-badge {
  position:       absolute;
  bottom:         16px;
  right:          16px;
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  background:     rgba(26,158,94,.9);
  color:          #fff;
  font-size:      10px;
  font-weight:    var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding:        5px 12px;
  border-radius:  var(--r-pill);
  backdrop-filter: blur(4px);
}

/* ── DETAILS SIDE ─────────────────────────────────────────── */
.rproj__details {
  padding:        3rem 2.5rem;
  display:        flex;
  flex-direction: column;
  justify-content: center;
  position:       relative;
}

/* Large background number */
.rproj__number {
  position:    absolute;
  top:         1.5rem;
  right:       2rem;
  font-family: var(--font-heading);
  font-size:   6rem;
  font-weight: var(--w-black);
  color:       rgba(194,147,45,.08);
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.rproj__title {
  font-family:   var(--font-heading);
  font-size:     clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight:   var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height:   var(--lead-snug);
  color:         var(--text-primary);
  margin-bottom: var(--sp-6);
}

/* Meta grid — 2 columns of dt/dd pairs */
.rproj__meta {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-4);
  margin-bottom:         var(--sp-6);
}
.rproj__meta-item {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-3);
}
.rproj__meta-icon {
  width:           32px;
  height:          32px;
  border-radius:   var(--r-sm);
  background:      var(--gold-tint);
  color:           var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      2px;
  font-style:      normal;  /* dt resets */
}
.rproj__meta-label {
  display:        block;
  font-size:      10px;
  font-weight:    var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color:          var(--text-muted);
  margin-bottom:  2px;
}
.rproj__meta-value {
  display:     block;
  font-size:   var(--text-sm);
  font-weight: var(--w-semi);
  color:       var(--text-primary);
}

/* Gold top-border separator */
.rproj__desc {
  font-size:     var(--text-sm);
  color:         var(--text-body);
  line-height:   var(--lead-relax);
  margin-bottom: var(--sp-6);
  padding-top:   var(--sp-5);
  border-top:    2px solid var(--gold-tint);
}

.rproj__cta {
  align-self: flex-start;
}

.rproj__footer {
  text-align: center;
  margin-top: var(--sp-6);
}

/* ── RESPONSIVE ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .rproj__card {
    grid-template-columns: 1fr;
  }
  .rproj__card--reverse {
    direction: ltr;
  }
  .rproj__img-wrap {
    min-height: 320px;
  }
  .rproj__meta {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 768px) {
  .rproj__img-wrap { min-height: 260px; }
  .rproj__details  { padding: 2rem 1.5rem; }
  .rproj__number   { font-size: 4rem; top: 1rem; right: 1rem; }
  .rproj__meta     { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATED STATS COUNTER — #FDF9F0 warm cream
═══════════════════════════════════════════════════════════════ */
.stats-section {
  background: var(--bg-why);
  padding:    var(--sp-20) var(--section-px);
}
.stats-section__inner {
  max-width: var(--container);
  margin:    0 auto;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-5);
}
.stat-item {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding:       2rem 1.5rem;
  text-align:    center;
  box-shadow:    var(--shadow-xs);
  transition:    transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           var(--sp-2);
}
.stat-item:hover {
  transform:    translateY(-4px);
  border-color: var(--border-gold);
  box-shadow:   var(--shadow-sm);
}
.stat-item__icon {
  width:           52px;
  height:          52px;
  border-radius:   var(--r-md);
  background:      var(--gold-tint);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--gold-mid);
  margin-bottom:   var(--sp-2);
  flex-shrink:     0;
}
.stat-item__num {
  font-family:   var(--font-heading);
  font-size:     3.2rem;
  font-weight:   var(--w-black);
  line-height:   1;
  background:    linear-gradient(135deg, var(--gold), var(--gold-mid));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  min-height:    3.5rem;
  display:       flex;
  align-items:   center;
}
.stat-item__label {
  font-size:   var(--text-base);
  font-weight: var(--w-bold);
  color:       var(--text-primary);
}
.stat-item__sub {
  font-size:  var(--text-xs);
  color:      var(--text-muted);
  line-height: var(--lead-normal);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   VIDEO PRESENTATION — #F0EFF8 soft lavender
═══════════════════════════════════════════════════════════════ */
.video-section {
  background: var(--bg-services);
  padding:    var(--sp-20) var(--section-px);
}
.video-section__inner {
  max-width: var(--container);
  margin:    0 auto;
  display:   grid;
  grid-template-columns: 1fr 1.1fr;
  gap:       5rem;
  align-items: center;
}
.video-section__text .gold-bar { margin-left: 0; }

/* Bullet points */
.video-section__points {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
  margin-top:     var(--sp-6);
}
.video-section__points li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-3);
  font-size:   var(--text-sm);
  color:       var(--text-body);
  line-height: var(--lead-relax);
}
.vsp-icon {
  width:           26px;
  height:          26px;
  border-radius:   var(--r-sm);
  background:      var(--gold-tint);
  color:           var(--gold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      1px;
}

/* Real video embed */
.video-embed {
  border-radius: var(--r-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  border:        1px solid var(--border-gold);
  aspect-ratio:  16/9;
  background:    var(--bg-dark);
}
.video-embed iframe,
.video-embed lite-youtube {
  width:  100%;
  height: 100%;
  border: none;
  display: block;
}

/* Placeholder until real video is ready */
.video-placeholder {
  border-radius: var(--r-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-md);
  border:        1px solid var(--border-gold);
  position:      relative;
}
.video-placeholder__img {
  aspect-ratio: 16/9;
  overflow:     hidden;
  background:   var(--bg-dark-3);
}
.video-placeholder__img img {
  width:       100%;
  height:      100%;
  object-fit:  cover;
  object-position: center top;
  transition:  transform var(--t-slow);
}
.video-placeholder:hover .video-placeholder__img img {
  transform: scale(1.03);
}
.video-placeholder__fallback {
  width:           100%;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-3);
  color:           var(--text-muted);
}

/* "Video coming soon" badge */
.video-placeholder__badge {
  position:       absolute;
  top:            16px;
  left:           16px;
  display:        inline-flex;
  align-items:    center;
  gap:            6px;
  background:     rgba(7,9,9,.75);
  color:          var(--gold-mid);
  font-size:      var(--text-xs);
  font-weight:    var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding:        6px 12px;
  border-radius:  var(--r-pill);
  backdrop-filter: blur(4px);
  border:         1px solid rgba(194,147,45,.3);
}

/* Quote overlay at bottom of photo */
.video-quote {
  position:   absolute;
  bottom:     0;
  left:       0;
  right:      0;
  padding:    1.5rem;
  background: linear-gradient(to top, rgba(7,9,9,.88) 0%, rgba(7,9,9,.4) 70%, transparent 100%);
  font-size:  var(--text-sm);
  font-style: italic;
  color:      rgba(255,255,255,.85);
  line-height: var(--lead-relax);
  border:     none;
}
.video-quote cite {
  display:     block;
  font-size:   var(--text-xs);
  font-style:  normal;
  font-weight: var(--w-bold);
  color:       var(--gold-mid);
  margin-top:  var(--sp-2);
  letter-spacing: var(--track-wide);
}

/* ═══════════════════════════════════════════════════════════════
   SERVICE AREA MAP — #F7F0F0 blush rose
═══════════════════════════════════════════════════════════════ */
.area-section {
  background: var(--bg-testimonials);
  padding:    var(--sp-20) var(--section-px);
}
.area-section__inner {
  max-width: var(--container);
  margin:    0 auto;
}
.area-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap:     var(--sp-10);
  align-items: start;
}

/* Map iframe */
.area-map {
  border-radius: var(--r-xl);
  overflow:      hidden;
  box-shadow:    var(--shadow-sm);
  border:        1px solid var(--border-light);
}
.area-map iframe {
  display: block;
}

/* City list */
.area-details__title {
  font-size:     var(--text-xl);
  font-weight:   var(--w-bold);
  color:         var(--text-primary);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--gold-tint);
}
.area-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
  margin-bottom:  var(--sp-8);
}
.area-item {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  padding:     var(--sp-3) var(--sp-4);
  background:  var(--bg-white);
  border:      1px solid var(--border-light);
  border-radius: var(--r-md);
  transition:  border-color var(--t-fast), box-shadow var(--t-fast);
}
.area-item:hover {
  border-color: var(--border-gold);
  box-shadow:   var(--shadow-xs);
}
.area-item--primary {
  border-color: rgba(194,147,45,.3);
  background:   var(--gold-tint);
}
.area-dot {
  width:         10px;
  height:        10px;
  border-radius: 50%;
  background:    var(--text-muted);
  flex-shrink:   0;
  opacity:       .5;
}
.area-dot--gold {
  background: var(--gold-mid);
  opacity:    1;
  box-shadow: 0 0 0 3px rgba(232,157,35,.2);
}
.area-name {
  font-size:   var(--text-sm);
  font-weight: var(--w-semi);
  color:       var(--text-primary);
  flex:        1;
}
.area-badge {
  font-size:      10px;
  font-weight:    var(--w-bold);
  color:          var(--gold);
  background:     rgba(194,147,45,.12);
  padding:        2px 8px;
  border-radius:  var(--r-pill);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
}

/* "Not on the list?" box */
.area-cta-box {
  background:    var(--bg-white);
  border:        1px solid var(--border-gold);
  border-radius: var(--r-lg);
  padding:       var(--sp-5) var(--sp-5);
  text-align:    center;
}
.area-cta-text {
  font-size:     var(--text-sm);
  color:         var(--text-body);
  margin-bottom: var(--sp-4);
  line-height:   var(--lead-relax);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — 3 new sections
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .stats-grid          { grid-template-columns: repeat(3, 1fr); }
  .video-section__inner{ grid-template-columns: 1fr; gap: var(--sp-10); }
  .video-section__text { text-align: center; }
  .video-section__text .gold-bar { margin: var(--sp-3) auto var(--sp-5); }
  .video-section__points li { justify-content: flex-start; text-align: left; }
  .area-layout         { grid-template-columns: 1fr; }
  .area-map iframe     { height: 340px; }
}
@media (max-width: 768px) {
  .stats-grid   { grid-template-columns: 1fr 1fr; }
  .area-map iframe { height: 280px; }
}
@media (max-width: 480px) {
  .stats-grid   { grid-template-columns: 1fr; }
  .stat-item__num { font-size: 2.5rem; }
}

/* ═══════════════════════════════════════════════════════════════
   HAMBURGER BUTTON
═══════════════════════════════════════════════════════════════ */
.hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: space-between;
  width:  30px;
  height: 22px;
  background:  transparent;
  border:      none;
  padding:     0;
  margin-left: auto;
  cursor:      pointer;
  flex-shrink: 0;
  position:    relative;
  z-index:     calc(var(--z-nav) + 10);  /* stays above the overlay */
}
.ham-line {
  display:       block;
  width:         100%;
  height:        2.5px;
  border-radius: 2px;
  background:    var(--text-primary);
  transform-origin: center;
  transition:    transform .35s cubic-bezier(.23,1,.32,1),
                 opacity   .2s ease,
                 width     .3s ease;
}
/* Animate into X when open */
.hamburger.open .ham-line--top { transform: translateY(9.75px) rotate(45deg); }
.hamburger.open .ham-line--mid { opacity: 0; transform: scaleX(0); }
.hamburger.open .ham-line--bot { transform: translateY(-9.75px) rotate(-45deg); }

/* When menu is open, turn lines white (panel is dark) */
.hamburger.open .ham-line { background: var(--white); }

/* ═══════════════════════════════════════════════════════════════
   MOBILE MENU — full-screen slide-in panel from right
═══════════════════════════════════════════════════════════════ */
.mob-menu {
  display:        none;
  position:       fixed;
  inset:          0;
  z-index:        calc(var(--z-nav) + 1);
  pointer-events: none;
}
.mob-menu.open { pointer-events: all; }

/* Backdrop */
.mob-backdrop {
  position:        absolute;
  inset:           0;
  background:      rgba(7,9,9,.58);
  backdrop-filter: blur(3px);
  opacity:         0;
  transition:      opacity .35s ease;
}
.mob-menu.open .mob-backdrop { opacity: 1; }

/* Sliding panel */
.mob-panel {
  position:       absolute;
  top:            0; right: 0; bottom: 0;
  width:          min(85vw, 360px);
  background:     var(--bg-dark);
  display:        flex;
  flex-direction: column;
  overflow-y:     auto;
  transform:      translateX(100%);
  transition:     transform .38s cubic-bezier(.23,1,.32,1);
  box-shadow:     -6px 0 40px rgba(0,0,0,.35);
}
.mob-menu.open .mob-panel { transform: translateX(0); }

/* Panel header */
.mob-panel-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.25rem 1.5rem;
  border-bottom:   1px solid rgba(255,255,255,.08);
  flex-shrink:     0;
}
.mob-logo {
  display:     flex;
  align-items: center;
  gap:         .75rem;
  text-decoration: none;
}
.mob-logo img    { border-radius: var(--r-sm); flex-shrink: 0; }
.mob-logo-top    { display: block; font-size: 11px; color: var(--text-on-dark-3); line-height: 1.2; }
.mob-logo-bot    { display: block; font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--white); line-height: 1.2; }
.mob-logo-bot strong { color: var(--gold-mid); }

.mob-close {
  width:        38px; height: 38px;
  border-radius: var(--r-md);
  background:   rgba(255,255,255,.06);
  border:       1px solid rgba(255,255,255,.1);
  color:        var(--white);
  display:      flex; align-items: center; justify-content: center;
  cursor:       pointer;
  transition:   background var(--t-fast), border-color var(--t-fast);
  flex-shrink:  0;
}
.mob-close:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); }

/* Nav list */
.mob-nav    { flex: 1; padding: .75rem 0; }
.mob-nav-list { display: flex; flex-direction: column; gap: 2px; padding: 0 .75rem; }
.mob-nav-item { list-style: none; opacity: 0; transform: translateX(20px); transition: opacity .28s ease, transform .28s ease; }
.mob-menu.open .mob-nav-item:nth-child(1) { transition-delay: .08s; }
.mob-menu.open .mob-nav-item:nth-child(2) { transition-delay: .13s; }
.mob-menu.open .mob-nav-item:nth-child(3) { transition-delay: .18s; }
.mob-menu.open .mob-nav-item:nth-child(4) { transition-delay: .23s; }
.mob-menu.open .mob-nav-item:nth-child(5) { transition-delay: .28s; }
.mob-menu.open .mob-nav-item:nth-child(6) { transition-delay: .33s; }
.mob-menu.open .mob-nav-item { opacity: 1; transform: translateX(0); }

.mob-nav-link {
  display:     flex; align-items: center; gap: .875rem;
  padding:     .875rem 1rem;
  border-radius: var(--r-md);
  text-decoration: none;
  color:       var(--text-on-dark-2);
  font-size:   var(--text-base);
  font-weight: var(--w-medium);
  transition:  background var(--t-fast), color var(--t-fast), padding-left var(--t-base);
}
.mob-nav-link:hover { background: rgba(255,255,255,.06); color: var(--white); padding-left: 1.25rem; }
.mob-nav-link--active {
  background:  rgba(232,157,35,.12);
  color:       var(--gold-mid);
  border-left: 3px solid var(--gold-mid);
  padding-left: calc(1rem - 3px);
}
.mob-nav-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background:   rgba(255,255,255,.05);
  display:      flex; align-items: center; justify-content: center;
  color:        inherit; flex-shrink: 0;
  transition:   background var(--t-fast);
}
.mob-nav-link:hover    .mob-nav-icon { background: rgba(255,255,255,.09); }
.mob-nav-link--active  .mob-nav-icon { background: rgba(232,157,35,.15); color: var(--gold-mid); }
.mob-nav-arrow {
  color: rgba(255,255,255,.2); flex-shrink: 0; margin-left: auto;
  transition: transform var(--t-fast), color var(--t-fast);
}
.mob-nav-link:hover   .mob-nav-arrow { color: rgba(255,255,255,.5); transform: translateX(3px); }
.mob-nav-link--active .mob-nav-arrow { color: var(--gold-mid); }

/* Divider */
.mob-divider { height: 1px; background: rgba(255,255,255,.07); margin: .5rem 1.5rem; flex-shrink: 0; }

/* CTA buttons */
.mob-ctas {
  padding: 1rem 1.25rem;
  display: flex; flex-direction: column; gap: .75rem;
  flex-shrink: 0;
}
.mob-cta-call {
  display:         flex; align-items: center; justify-content: center; gap: .5rem;
  height:          52px;
  border-radius:   var(--r-sm);
  background:      rgba(255,255,255,.06);
  border:          1.5px solid rgba(255,255,255,.14);
  color:           var(--white);
  font-size:       var(--text-md); font-weight: var(--w-bold);
  text-decoration: none;
  transition:      background var(--t-fast), border-color var(--t-fast);
}
.mob-cta-call:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.28); }
.mob-cta-call svg { color: var(--gold-mid); flex-shrink: 0; }
.mob-cta-quote { width: 100%; justify-content: center; height: 52px; font-size: var(--text-md); }

/* Footer */
.mob-footer { padding: 1rem 1.5rem 1.75rem; flex-shrink: 0; border-top: 1px solid rgba(255,255,255,.06); margin-top: auto; }
.mob-footer-name { font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--text-on-dark-2); margin-bottom: .25rem; }
.mob-footer-loc  { display: flex; align-items: center; gap: .35rem; font-size: var(--text-xs); color: var(--text-on-dark-3); }
.mob-footer-loc svg { color: var(--gold); flex-shrink: 0; }

/* Show hamburger + mob-menu on mobile only */
@media (max-width: 768px) {
  .hamburger { display: flex; }
  .mob-menu  { display: block; }
  body.mob-open { overflow: hidden; }
}


/* ═══════════════════════════════════════════════════════════════
   NAV LOGIN ICON BUTTON
═══════════════════════════════════════════════════════════════ */
.nav-login {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           36px;
  height:          36px;
  border-radius:   var(--r-md);
  color:           var(--text-muted);
  border:          1px solid var(--border-light);
  transition:      color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
  text-decoration: none;
  flex-shrink:     0;
  /* Subtle separator from the Free Quote button */
  margin-left:     var(--sp-1);
  position:        relative;
}
.nav-login::before {
  content:    '';
  position:   absolute;
  left:       calc(-1 * var(--sp-3));
  top:        20%;
  height:     60%;
  width:      1px;
  background: var(--border-light);
}
.nav-login:hover {
  color:        var(--gold);
  border-color: var(--border-gold);
  background:   var(--gold-tint);
}
/* Mobile login item — visually distinct at bottom of list */
.mob-nav-item--login { margin-top: var(--sp-2); }
.mob-nav-link--login { color: var(--text-on-dark-3) !important; font-size: var(--text-sm) !important; }
.mob-nav-icon--login { background: rgba(255,255,255,.03) !important; }
.mob-nav-link--login:hover { color: var(--gold-mid) !important; }

/* ═══════════════════════════════════════════════════════════════
   PAGE HERO — used on interior pages (projects, contact, quote)
═══════════════════════════════════════════════════════════════ */
.page-hero {
  background: var(--bg-dark);
  padding:    calc(var(--nav-h) + 3.5rem) var(--section-px) 3rem;
  position:   relative;
  overflow:   hidden;
}

/* Background photo — subtle, same dark feel as before */
.page-hero__bg-img {
  position: absolute;
  inset:    0;
  z-index:  0;
}
.page-hero__bg-img img {
  width:            100%;
  height:           100%;
  object-fit:       cover;
  object-position:  center 35%;
  display:          block;
  opacity:          .35;
}

/* Same dark overlay as the original solid background */
.page-hero__overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: var(--bg-dark);
  opacity:    .55;
}
.page-hero__overlay::after {
  content:  '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 50% 80% at 100% 50%, rgba(232,157,35,.07), transparent),
    repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(194,147,45,.02) 28px, rgba(194,147,45,.02) 29px);
}
.page-hero__inner {
  max-width: var(--container);
  margin:    0 auto;
  position:  relative;
  z-index:   2;
  display:   flex;
  align-items: center;
  justify-content: space-between;
  gap:       var(--sp-10);
  flex-wrap: wrap;
}
.page-hero__title {
  font-family:    var(--font-heading);
  font-size:      clamp(2.5rem, 5vw, 4rem);
  font-weight:    var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height:    var(--lead-tight);
  color:          var(--white);
  margin-bottom:  var(--sp-4);
}
.page-hero__title em { font-style: normal; color: var(--gold-mid); }
.page-hero__sub {
  font-size:   var(--text-md);
  color:       var(--text-on-dark-2);
  line-height: var(--lead-relax);
  max-width:   500px;
}
.page-hero__stats {
  display:     flex;
  align-items: center;
  gap:         0;
  background:  rgba(255,255,255,.04);
  border:      1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  padding:     1.5rem 2rem;
  flex-shrink: 0;
}
.phs-item {
  display:     flex;
  flex-direction: column;
  align-items: center;
  padding:     0 2rem;
  text-align:  center;
}
.phs-num {
  font-family:   var(--font-heading);
  font-size:     2.2rem;
  font-weight:   var(--w-black);
  color:         var(--gold-mid);
  line-height:   1;
  margin-bottom: .3rem;
}
.phs-lbl {
  font-size:      var(--text-xs);
  font-weight:    var(--w-semi);
  color:          var(--text-on-dark-3);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  white-space:    nowrap;
}
.phs-div {
  width:      1px;
  height:     40px;
  background: rgba(255,255,255,.12);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PROJECTS FILTER BAR
═══════════════════════════════════════════════════════════════ */
.proj-filters {
  background:  var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding:     1rem var(--section-px);
  position:    sticky;
  top:         var(--nav-h);
  z-index:     calc(var(--z-nav) - 1);
  box-shadow:  var(--shadow-xs);
}
.proj-filters__inner {
  max-width: var(--container);
  margin:    0 auto;
}
.filters-form {
  display:     flex;
  align-items: center;
  gap:         var(--sp-4);
  flex-wrap:   wrap;
}
.filter-group {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
}
.filter-label {
  font-size:      var(--text-xs);
  font-weight:    var(--w-bold);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color:          var(--text-muted);
  white-space:    nowrap;
}
.filter-select-wrap {
  position: relative;
}
.filter-select {
  appearance:    none;
  height:        36px;
  padding:       0 2.25rem 0 .875rem;
  background:    var(--bg-body);
  border:        1.5px solid var(--border-light);
  border-radius: var(--r-md);
  font-family:   var(--font-body);
  font-size:     var(--text-sm);
  font-weight:   var(--w-medium);
  color:         var(--text-primary);
  cursor:        pointer;
  transition:    border-color var(--t-fast);
  min-width:     160px;
}
.filter-select:focus { outline: none; border-color: var(--gold); }
.filter-chevron {
  position:       absolute;
  right:          .65rem;
  top:            50%;
  transform:      translateY(-50%);
  color:          var(--text-muted);
  pointer-events: none;
}
.filter-count {
  font-size:   var(--text-sm);
  color:       var(--text-muted);
  margin-left: auto;
}
.filter-count strong { color: var(--text-primary); }
.filter-clear {
  display:     inline-flex;
  align-items: center;
  gap:         .3rem;
  font-size:   var(--text-xs);
  font-weight: var(--w-bold);
  color:       var(--red);
  text-decoration: none;
  padding:     4px 10px;
  border-radius: var(--r-md);
  background:  var(--red-bg);
  transition:  opacity var(--t-fast);
}
.filter-clear:hover { opacity: .8; }

/* ═══════════════════════════════════════════════════════════════
   PROJECTS GRID
═══════════════════════════════════════════════════════════════ */
.portfolio-grid-section {
  background: var(--bg-body);
  padding:    var(--sp-12) var(--section-px) var(--sp-20);
}
.portfolio-grid-inner {
  max-width: var(--container);
  margin:    0 auto;
}

/* Screen-reader only heading */
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* 3-column card grid */
.pgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-6);
  margin-bottom: var(--sp-10);
}

.pgrid-card {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--r-lg);
  overflow:      hidden;
  box-shadow:    var(--shadow-xs);
  display:       flex;
  flex-direction: column;
  transition:    transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.pgrid-card:hover {
  transform:    translateY(-5px);
  box-shadow:   var(--shadow-md);
  border-color: var(--border-gold);
}

/* Photo */
.pgrid-photo {
  position:   relative;
  height:     220px;
  background: var(--bg-services);
  overflow:   hidden;
  flex-shrink: 0;
}
.pgrid-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-slow);
}
.pgrid-card:hover .pgrid-photo img { transform: scale(1.05); }
.pgrid-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}

/* Badges on photo */
.pgrid-status {
  position: absolute; top: 10px; left: 10px;
  font-size: 10px;
}
.pgrid-service {
  position:       absolute;
  bottom:         10px; right: 10px;
  background:     rgba(7,9,9,.72);
  color:          var(--gold-mid);
  font-size:      10px;
  font-weight:    var(--w-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  padding:        4px 10px;
  border-radius:  var(--r-pill);
  backdrop-filter: blur(4px);
}

/* Body */
.pgrid-body { padding: var(--sp-5); display: flex; flex-direction: column; flex: 1; }
.pgrid-title {
  font-size:     var(--text-lg);
  font-weight:   var(--w-bold);
  color:         var(--text-primary);
  margin-bottom: var(--sp-3);
  line-height:   var(--lead-snug);
}

/* Meta row */
.pgrid-meta {
  display:       flex;
  flex-wrap:     wrap;
  gap:           .4rem var(--sp-4);
  margin-bottom: var(--sp-3);
}
.pgrid-meta-item {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  font-size:   var(--text-xs);
  color:       var(--text-muted);
}
.pgrid-meta-item svg { color: var(--gold); flex-shrink: 0; }

.pgrid-desc {
  font-size:     var(--text-sm);
  color:         var(--text-body);
  line-height:   var(--lead-relax);
  margin-bottom: var(--sp-4);
  flex:          1;
}

/* Progress bar */
.pgrid-progress {
  background:    var(--border-light);
  border-radius: var(--r-pill);
  height:        6px;
  margin-bottom: var(--sp-3);
  position:      relative;
  overflow:      hidden;
}
.pgrid-progress-fill {
  height:        100%;
  border-radius: var(--r-pill);
  background:    linear-gradient(90deg, var(--gold), var(--gold-mid));
  transition:    width 1s ease;
}
.pgrid-progress-label {
  font-size:   var(--text-xs);
  color:       var(--gold);
  font-weight: var(--w-bold);
  display:     block;
  margin-top:  var(--sp-1);
  margin-bottom: var(--sp-3);
}

.pgrid-cta {
  display:     inline-flex;
  align-items: center;
  gap:         .3rem;
  font-size:   var(--text-sm);
  font-weight: var(--w-bold);
  color:       var(--gold);
  text-decoration: none;
  margin-top:  auto;
  transition:  color var(--t-fast), gap var(--t-fast);
}
.pgrid-cta:hover { color: var(--gold-mid); gap: var(--sp-2); }

/* Empty state */
.pgrid-empty {
  text-align:   center;
  padding:      5rem var(--sp-4);
  color:        var(--text-muted);
  display:      flex;
  flex-direction: column;
  align-items:  center;
  gap:          var(--sp-4);
}
.pgrid-empty svg { opacity: .3; }
.pgrid-empty h3 { font-size: var(--text-xl); font-weight: var(--w-bold); color: var(--text-primary); }
.pgrid-empty p  { font-size: var(--text-md); max-width: 420px; }

/* ═══════════════════════════════════════════════════════════════
   PAGINATION
═══════════════════════════════════════════════════════════════ */
.pagination { display: flex; justify-content: center; margin-top: var(--sp-10); }
.pagination-list {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
}
.page-btn {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  border-radius:   var(--r-md);
  font-size:       var(--text-sm);
  font-weight:     var(--w-semi);
  color:           var(--text-body);
  background:      var(--bg-white);
  border:          1px solid var(--border-light);
  text-decoration: none;
  transition:      all var(--t-fast);
}
.page-btn:hover          { border-color: var(--gold); color: var(--gold); }
.page-btn--active        { background: var(--gold-mid); color: var(--bg-dark); border-color: var(--gold-mid); font-weight: var(--w-bold); }
.page-btn--disabled      { opacity: .35; cursor: not-allowed; pointer-events: none; }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — portfolio page
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .pgrid              { grid-template-columns: repeat(2, 1fr); }
  .page-hero__inner   { flex-direction: column; align-items: flex-start; }
  .page-hero__stats   { width: 100%; justify-content: center; }
  .phs-item           { padding: 0 1.5rem; }
}
@media (max-width: 768px) {
  .pgrid              { grid-template-columns: 1fr; }
  .proj-filters       { position: static; }
  .filters-form       { gap: var(--sp-3); }
  .filter-count       { margin-left: 0; width: 100%; }
  .page-hero__stats   { padding: 1rem; }
  .phs-item           { padding: 0 1rem; }
  .phs-num            { font-size: 1.8rem; }
}
@media (max-width: 480px) {
  .page-hero__stats   { flex-direction: column; gap: var(--sp-3); }
  .phs-div            { width: 80%; height: 1px; }
}

/* ═══════════════════════════════════════════════════════════════
   GOOGLE REVIEWS SECTION — portfolio page
═══════════════════════════════════════════════════════════════ */
.greviews {
  background: var(--bg-testimonials);   /* #F7F0F0 blush rose */
  padding:    var(--sp-20) var(--section-px);
}
.greviews__inner {
  max-width: var(--container);
  margin:    0 auto;
}

/* ── Rating summary bar ───────────────────────────────────── */
.grating-summary {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-8);
  margin-top:      var(--sp-6);
  flex-wrap:       wrap;
}
.grating-score {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  background:  var(--bg-white);
  border:      1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding:     var(--sp-3) var(--sp-5);
  box-shadow:  var(--shadow-xs);
}
.grating-num {
  font-family: var(--font-heading);
  font-size:   2rem;
  font-weight: var(--w-black);
  color:       var(--text-primary);
  line-height: 1;
}
.grating-stars {
  display:     flex;
  align-items: center;
  gap:         2px;
}
.grating-count {
  font-size:  var(--text-xs);
  color:      var(--text-muted);
  white-space: nowrap;
}
.grating-leave {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);
  height:          42px;
  padding:         0 var(--sp-5);
  border-radius:   var(--r-md);
  background:      var(--bg-white);
  border:          1.5px solid var(--border-gold);
  color:           var(--gold);
  font-size:       var(--text-sm);
  font-weight:     var(--w-bold);
  text-decoration: none;
  transition:      background var(--t-fast), box-shadow var(--t-fast);
}
.grating-leave:hover {
  background:  var(--gold-tint);
  box-shadow:  var(--shadow-xs);
}

/* ── Reviews grid ─────────────────────────────────────────── */
.greviews__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap:     var(--sp-5);
  margin-top: var(--sp-10);
}

.greview-card {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding:       var(--sp-6);
  box-shadow:    var(--shadow-xs);
  display:       flex;
  flex-direction: column;
  gap:           var(--sp-4);
  position:      relative;
  transition:    transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base);
}
.greview-card:hover {
  transform:    translateY(-3px);
  box-shadow:   var(--shadow-sm);
  border-color: rgba(194,147,45,.25);
}

/* Decorative quote mark */
.greview-card::before {
  content:    '\201C';
  position:   absolute;
  top:        var(--sp-4);
  right:      var(--sp-5);
  font-size:  4rem;
  line-height: 1;
  color:      rgba(194,147,45,.08);
  font-family: Georgia, serif;
  pointer-events: none;
}

/* Top row: avatar + author + Google G */
.greview-card__top {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
}

.greview-avatar {
  width:         44px;
  height:        44px;
  border-radius: 50%;
  overflow:      hidden;
  flex-shrink:   0;
  background:    linear-gradient(135deg, var(--gold), var(--gold-mid));
  display:       flex;
  align-items:   center;
  justify-content: center;
}
.greview-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.greview-avatar__initials {
  font-size:   var(--text-md);
  font-weight: var(--w-bold);
  color:       var(--bg-dark);
}

.greview-author {
  flex: 1;
  min-width: 0;
}
.greview-author__name {
  display:     block;
  font-size:   var(--text-sm);
  font-weight: var(--w-bold);
  color:       var(--text-primary);
  font-style:  normal;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.greview-author__date {
  display:   block;
  font-size: var(--text-xs);
  color:     var(--text-muted);
  margin-top: 2px;
}

/* Google G icon — top right of card */
.greview-google-badge {
  width:           30px;
  height:          30px;
  border-radius:   var(--r-sm);
  background:      #F8F8F8;
  border:          1px solid rgba(0,0,0,.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

/* Stars */
.greview-stars {
  display:     flex;
  align-items: center;
  gap:         2px;
}

/* Review text */
.greview-text {
  font-size:    var(--text-sm);
  color:        var(--text-body);
  line-height:  var(--lead-relax);
  font-style:   italic;
  border:       none;
  padding:      0;
  margin:       0;
  flex:         1;
}

/* Footer CTAs */
.greviews__footer {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-5);
  margin-top:      var(--sp-10);
  flex-wrap:       wrap;
}
.greviews__see-all {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-3);
  height:          48px;
  padding:         0 var(--sp-8);
  background:      var(--bg-white);
  border:          1.5px solid var(--border-light);
  border-radius:   var(--r-md);
  font-size:       var(--text-sm);
  font-weight:     var(--w-bold);
  color:           var(--text-primary);
  text-decoration: none;
  transition:      border-color var(--t-fast), box-shadow var(--t-fast);
}
.greviews__see-all:hover {
  border-color: rgba(66,133,244,.4);
  box-shadow:   0 0 0 3px rgba(66,133,244,.08);
}
.greviews__write {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);
  height:          48px;
  padding:         0 var(--sp-6);
  background:      var(--gold-mid);
  border:          none;
  border-radius:   var(--r-md);
  font-size:       var(--text-sm);
  font-weight:     var(--w-bold);
  color:           var(--bg-dark);
  text-decoration: none;
  transition:      background var(--t-fast), transform var(--t-fast);
}
.greviews__write:hover {
  background:  var(--gold-light);
  transform:   translateY(-2px);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .greviews__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .greviews__grid { grid-template-columns: 1fr; }
  .grating-summary { flex-direction: column; gap: var(--sp-4); }
}

/* ═══════════════════════════════════════════════════════════════
   CONTACT METHODS — 3 clickable cards
═══════════════════════════════════════════════════════════════ */
.contact-methods {
  background: var(--bg-white);
  border-bottom: 1px solid var(--border-light);
  padding: var(--sp-8) var(--section-px);
}
.contact-methods__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
}
.cmethod-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: var(--bg-body);
  border: 1.5px solid var(--border-light);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  position: relative;
}
.cmethod-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-sm);
}
.cmethod-card--call:hover  { border-color: var(--green); }
.cmethod-card--email:hover { border-color: var(--blue); }
.cmethod-card--quote:hover { border-color: var(--gold-mid); }

.cmethod-icon {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: background var(--t-fast);
}
.cmethod-card--call  .cmethod-icon { background: var(--green-bg);  color: var(--green); }
.cmethod-card--email .cmethod-icon { background: var(--blue-bg);   color: var(--blue); }
.cmethod-card--quote .cmethod-icon { background: var(--gold-tint); color: var(--gold-mid); }

.cmethod-body  { flex: 1; min-width: 0; }
.cmethod-label { display: block; font-size: var(--text-xs); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--text-muted); margin-bottom: 2px; }
.cmethod-value { display: block; font-size: var(--text-md); font-weight: var(--w-bold); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmethod-hint  { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }
.cmethod-arrow { color: var(--text-muted); flex-shrink: 0; transition: transform var(--t-fast), color var(--t-fast); }
.cmethod-card:hover .cmethod-arrow { transform: translateX(4px); color: var(--gold-mid); }

/* ═══════════════════════════════════════════════════════════════
   CONTACT MAIN LAYOUT — form + info
═══════════════════════════════════════════════════════════════ */
.contact-main {
  background: var(--bg-body);
  padding: var(--sp-20) var(--section-px);
}
.contact-main__inner {
  max-width: var(--container);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 5rem;
  align-items: start;
}

/* Info column */
.contact-info-col .sec-title { margin-bottom: 0; }

.contact-details-list {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
  margin: var(--sp-8) 0;
}
.cdl-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
}
.cdl-icon {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--gold-tint);
  color: var(--gold-mid);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.cdl-label { display: block; font-size: var(--text-xs); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--text-muted); margin-bottom: 2px; }
.cdl-value { display: block; font-size: var(--text-md); font-weight: var(--w-semi); color: var(--text-primary); text-decoration: none; transition: color var(--t-fast); }
a.cdl-value:hover { color: var(--gold-mid); }

/* Social links */
.contact-social { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.contact-social__label { font-size: var(--text-xs); font-weight: var(--w-bold); text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--text-muted); }
.contact-social__links { display: flex; gap: var(--sp-2); }
.csocial-btn {
  width: 38px; height: 38px;
  border-radius: var(--r-md);
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  transition: color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.csocial-btn:hover { color: var(--gold-mid); border-color: var(--border-gold); background: var(--gold-tint); }

.contact-map { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border-light); box-shadow: var(--shadow-xs); }

/* Form column */
.contact-form-box {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.contact-form-box__head {
  background: var(--bg-dark);
  padding: var(--sp-8) var(--sp-8) var(--sp-6);
  border-bottom: 3px solid var(--gold-mid);
}
.contact-form-box__title {
  font-family: var(--font-heading);
  font-size: var(--text-2xl);
  font-weight: var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color: var(--white);
  margin-bottom: var(--sp-2);
}
.contact-form-box__sub { font-size: var(--text-sm); color: var(--text-on-dark-2); }

.cform { padding: var(--sp-8); }
.cform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }
.cform__submit { width: 100%; justify-content: center; height: 52px; font-size: var(--text-md); margin-top: var(--sp-2); }

.form-select-wrap { position: relative; }
.form-select-arrow { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: var(--text-muted); pointer-events: none; }

.form-required { color: var(--red); margin-left: 2px; }

.cform__privacy {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--text-xs); color: var(--text-muted);
  margin-top: var(--sp-4); text-align: center; justify-content: center;
}
.cform__privacy svg { color: var(--green); flex-shrink: 0; }

/* Success state */
.contact-success {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-xl);
  padding: 3rem var(--sp-8);
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.contact-success__icon {
  width: 72px; height: 72px;
  border-radius: 50%;
  background: var(--green-bg);
  color: var(--green);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-5);
}
.contact-success__title { font-size: var(--text-2xl); font-weight: var(--w-bold); color: var(--text-primary); margin-bottom: var(--sp-3); }
.contact-success__text  { font-size: var(--text-md); color: var(--text-body); line-height: var(--lead-relax); }
.contact-success__text a { color: var(--gold); font-weight: var(--w-bold); }

/* ═══════════════════════════════════════════════════════════════
   FAQ ACCORDION
═══════════════════════════════════════════════════════════════ */
.contact-faq {
  background: var(--bg-why);   /* #FDF9F0 warm cream */
  padding: var(--sp-20) var(--section-px);
}
.contact-faq__inner {
  max-width: 800px;
  margin: 0 auto;
}
.faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.faq-item {
  background: var(--bg-white);
  border: 1px solid var(--border-light);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: border-color var(--t-base), box-shadow var(--t-base);
}
.faq-item.open {
  border-color: var(--border-gold);
  box-shadow: var(--shadow-xs);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: var(--w-bold);
  color: var(--text-primary);
  text-align: left;
  transition: color var(--t-fast);
}
.faq-question:hover { color: var(--gold-mid); }
.faq-item.open .faq-question { color: var(--gold-mid); }

.faq-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
  transition: transform .3s cubic-bezier(.23,1,.32,1), color var(--t-fast);
}
.faq-item.open .faq-chevron { transform: rotate(180deg); color: var(--gold-mid); }

.faq-answer {
  padding: 0 var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--border-light);
}
.faq-answer p {
  font-size: var(--text-base);
  color: var(--text-body);
  line-height: var(--lead-relax);
  padding-top: var(--sp-4);
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — contact page
═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .contact-methods__inner { grid-template-columns: 1fr; }
  .contact-main__inner    { grid-template-columns: 1fr; gap: var(--sp-12); }
  .contact-info-col .sec-title { text-align: center; }
  .contact-info-col .gold-bar  { margin: var(--sp-3) auto var(--sp-5); }
  .contact-details-list { align-items: flex-start; }
  .contact-social { justify-content: center; }
}
@media (max-width: 768px) {
  .cmethod-card  { padding: var(--sp-4); }
  .cmethod-value { font-size: var(--text-base); }
  .cform__row    { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   QUOTE PAGE
═══════════════════════════════════════════════════════════════ */
.quote-main {
  background: var(--bg-body);
  padding:    var(--sp-16) var(--section-px) var(--sp-20);
}
.quote-main__inner {
  max-width: var(--container);
  margin:    0 auto;
  display:   grid;
  grid-template-columns: 1.4fr 1fr;
  gap:       var(--sp-10);
  align-items: start;
}

/* ── Form box ─────────────────────────────────────────────── */
.quote-form-box {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--r-xl);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
}
.quote-form-box__head {
  background:    var(--bg-dark);
  padding:       var(--sp-8) var(--sp-8) var(--sp-5);
  border-bottom: 3px solid var(--gold-mid);
}
.quote-form-box__title {
  font-family:    var(--font-heading);
  font-size:      var(--text-2xl);
  font-weight:    var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  color:          var(--white);
  margin-bottom:  var(--sp-2);
}
.quote-form-box__sub { font-size: var(--text-sm); color: var(--text-on-dark-2); }

/* ── Form steps ───────────────────────────────────────────── */
.qform { padding: var(--sp-8); display: flex; flex-direction: column; gap: var(--sp-8); }

.qform__step {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
}
.qform__step-label {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  font-size:   var(--text-md);
  font-weight: var(--w-bold);
  color:       var(--text-primary);
  padding-bottom: var(--sp-3);
  border-bottom:  2px solid var(--bg-body);
}
.qform__step-num {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--gold-mid);
  color:           var(--bg-dark);
  font-size:       var(--text-sm);
  font-weight:     var(--w-black);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.qform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); }

/* Submit area */
.qform__submit-wrap {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            var(--sp-3);
  padding-top:    var(--sp-4);
  border-top:     2px solid var(--bg-body);
}
.qform__submit {
  width:       100%;
  justify-content: center;
  height:      56px;
  font-size:   var(--text-md);
}
.qform__note {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-xs);
  color:       var(--text-muted);
  text-align:  center;
}
.qform__note svg { color: var(--green); flex-shrink: 0; }

/* ── Success state ────────────────────────────────────────── */
.quote-success {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--r-xl);
  padding:       4rem var(--sp-8);
  text-align:    center;
  box-shadow:    var(--shadow-sm);
}
.quote-success__check {
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      var(--green-bg);
  color:           var(--green);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--sp-6);
}
.quote-success__title { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: var(--w-black); text-transform: uppercase; color: var(--text-primary); margin-bottom: var(--sp-4); }
.quote-success__text  { font-size: var(--text-md); color: var(--text-body); line-height: var(--lead-relax); max-width: 420px; margin: 0 auto; }
.quote-success__actions { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; margin-top: var(--sp-8); }

/* ── Sidebar ──────────────────────────────────────────────── */
.quote-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-5);
  position:       sticky;
  top:            calc(var(--nav-h) + var(--sp-6));
}

.qsidebar-card {
  background:    var(--bg-white);
  border:        1px solid var(--border-light);
  border-radius: var(--r-lg);
  padding:       var(--sp-6);
  box-shadow:    var(--shadow-xs);
}
.qsidebar-card__title {
  font-size:     var(--text-lg);
  font-weight:   var(--w-bold);
  color:         var(--text-primary);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 2px solid var(--bg-body);
}

/* Why list */
.qsidebar-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-4);
}
.qsidebar-list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-3);
}
.qsl-icon {
  width:           26px;
  height:          26px;
  border-radius:   var(--r-sm);
  background:      var(--green-bg);
  color:           var(--green);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  margin-top:      1px;
}
.qsl-title { display: block; font-size: var(--text-sm); font-weight: var(--w-bold); color: var(--text-primary); }
.qsl-desc  { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 1px; }

/* Rating card */
.qsidebar-card--rating { background: var(--bg-dark); border-color: rgba(255,255,255,.06); }
.qsidebar-rating { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.qsidebar-rating__num { font-family: var(--font-heading); font-size: 3rem; font-weight: var(--w-black); color: var(--gold-mid); line-height: 1; }
.qsidebar-rating__stars { display: flex; gap: 2px; margin-bottom: 4px; }
.qsidebar-rating__label { font-size: var(--text-xs); color: var(--text-on-dark-3); }
.qsidebar-quote { font-size: var(--text-sm); font-style: italic; color: var(--text-on-dark-2); line-height: var(--lead-relax); border: none; padding: 0; }
.qsidebar-quote cite { display: block; font-size: var(--text-xs); font-style: normal; font-weight: var(--w-bold); color: var(--gold-mid); margin-top: var(--sp-3); }

/* Contact card */
.qsidebar-card--contact { text-align: center; background: var(--gold-tint); border-color: var(--border-gold); }
.qsidebar-contact__label { font-size: var(--text-sm); color: var(--text-muted); margin-bottom: var(--sp-3); }
.qsidebar-phone {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  font-family:     var(--font-heading);
  font-size:       var(--text-2xl);
  font-weight:     var(--w-black);
  color:           var(--gold);
  text-decoration: none;
  transition:      color var(--t-fast);
  margin-bottom:   var(--sp-2);
}
.qsidebar-phone:hover { color: var(--gold-mid); }
.qsidebar-hours { font-size: var(--text-xs); color: var(--text-muted); }

/* Services list */
.qsidebar-services {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
}
.qsidebar-services li {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2);
  font-size:   var(--text-sm);
  color:       var(--text-body);
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1024px) {
  .quote-main__inner { grid-template-columns: 1fr; }
  .quote-sidebar      { position: static; }
}
@media (max-width: 768px) {
  .qform__row { grid-template-columns: 1fr; }
  .qform       { padding: var(--sp-6); }
  .quote-form-box__head { padding: var(--sp-6); }
}

/* ═══════════════════════════════════════════════════════════════
   REVIEW CARD — updated with avatar + Google G
═══════════════════════════════════════════════════════════════ */
.review-card-top {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  margin-bottom: var(--sp-4);
}
.review-avatar {
  width:           40px;
  height:          40px;
  border-radius:   50%;
  overflow:        hidden;
  flex-shrink:     0;
  background:      linear-gradient(135deg, var(--gold), var(--gold-mid));
  display:         flex;
  align-items:     center;
  justify-content: center;
}
.review-avatar img {
  width: 100%; height: 100%; object-fit: cover;
}
.review-init {
  font-size:   var(--text-md);
  font-weight: var(--w-bold);
  color:       var(--bg-dark);
  display:     flex;
  align-items: center;
  justify-content: center;
  width:       100%;
  height:      100%;
}
.review-author-wrap { flex: 1; min-width: 0; }
.review-author {
  display:     block;
  font-size:   var(--text-sm);
  font-weight: var(--w-bold);
  color:       var(--text-primary);
  font-style:  normal;
  white-space: nowrap;
  overflow:    hidden;
  text-overflow: ellipsis;
}
.review-date {
  display:   block;
  font-size: var(--text-xs);
  color:     var(--text-muted);
  margin-top: 2px;
}
.review-google-g {
  width:           28px;
  height:          28px;
  border-radius:   var(--r-sm);
  background:      #F8F8F8;
  border:          1px solid rgba(0,0,0,.08);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.review-stars {
  display:     flex;
  align-items: center;
  gap:         2px;
  margin-bottom: var(--sp-3);
}


/* ═══════════════════════════════════════════════════════════════
   PROJECTS SECTION HEAD — professional trust layout
═══════════════════════════════════════════════════════════════ */
.psh {
  display:       grid;
  grid-template-columns: 1fr 360px;
  gap:           var(--sp-10);
  align-items:   start;
  margin-bottom: var(--sp-10);
  padding-bottom: var(--sp-10);
  border-bottom: 2px solid var(--border-light);
}

/* Left — title + desc */
.psh__title {
  font-family:    var(--font-heading);
  font-size:      clamp(2rem, 4vw, 3rem);
  font-weight:    var(--w-black);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height:    var(--lead-tight);
  color:          var(--text-primary);
  margin:         var(--sp-2) 0 var(--sp-4);
}
.psh__title em  { font-style: normal; color: var(--gold-mid); }
.psh__desc {
  font-size:      var(--text-md);
  color:          var(--text-body);
  line-height:    var(--lead-relax);
  max-width:      520px;
}

/* Right — trust card */
.psh__card {
  background:    var(--bg-dark);
  border:        1px solid rgba(194,147,45,.15);
  border-radius: var(--r-xl);
  padding:       var(--sp-6);
  box-shadow:    var(--shadow-md);
}
.psh__card-top {
  display:       flex;
  align-items:   center;
  gap:           var(--sp-3);
  margin-bottom: var(--sp-5);
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.psh__card-title {
  font-size:   var(--text-sm);
  font-weight: var(--w-bold);
  color:       var(--white);
}

/* Trust list */
.psh__trust-list {
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-3);
  margin-bottom:  var(--sp-6);
}
.psh__trust-list li {
  display:     flex;
  align-items: flex-start;
  gap:         var(--sp-3);
  font-size:   var(--text-sm);
  color:       rgba(255,255,255,.7);
  line-height: var(--lead-relax);
}
.psh__trust-list svg {
  color:       var(--green);
  flex-shrink: 0;
  margin-top:  3px;
}

/* Stats strip */
.psh__stats {
  display:         flex;
  align-items:     center;
  background:      rgba(255,255,255,.04);
  border:          1px solid rgba(255,255,255,.07);
  border-radius:   var(--r-md);
  padding:         var(--sp-4) var(--sp-2);
  margin-bottom:   var(--sp-5);
}
.psh__stat {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        0 var(--sp-2);
}
.psh__stat-num {
  font-family:   var(--font-heading);
  font-size:     1.6rem;
  font-weight:   var(--w-black);
  color:         var(--gold-mid);
  line-height:   1;
  margin-bottom: 3px;
}
.psh__stat-lbl {
  font-size:      10px;
  font-weight:    var(--w-semi);
  color:          rgba(255,255,255,.35);
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  white-space:    nowrap;
}
.psh__stat-div {
  width:      1px;
  height:     32px;
  background: rgba(255,255,255,.1);
  flex-shrink: 0;
}

/* CTA button */
.psh__cta {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  width:           100%;
  height:          46px;
  background:      linear-gradient(135deg, var(--gold), var(--gold-mid));
  color:           var(--bg-dark);
  border:          none;
  border-radius:   var(--r-md);
  font-family:     var(--font-body);
  font-size:       var(--text-sm);
  font-weight:     var(--w-bold);
  letter-spacing:  var(--track-wide);
  text-transform:  uppercase;
  text-decoration: none;
  transition:      opacity var(--t-fast), transform var(--t-fast);
}
.psh__cta:hover { opacity: .9; transform: translateY(-1px); }

/* Responsive */
@media (max-width: 1024px) {
  .psh { grid-template-columns: 1fr; }
  .psh__card { max-width: 480px; }
}
@media (max-width: 768px) {
  .psh__card { max-width: 100%; }
  .psh__stat-num { font-size: 1.3rem; }
}


html, body {
  overflow-x: hidden;
  max-width: 100%;
}