/* =========================
   Stones – base.css (clean)
   ========================= */

/* ---- Design tokens ---- */
:root{
  /* Layout */
  --nav-h: 72px;
  --wrap: 1200px;                 /* global max width cap */

  /* Brand colors */
  --red: var(--red, #A91617);
  --red-600: var(--red-600, #901214);
  --red-700: var(--red-700, #7D0F11);
  --white: #fff;

  /* Text + surfaces */
  --text-900:#292929;
  --text-700:#565656;
  --text-600:#6b6b6b;
  --bg:#fff;

  /* Gold gradient (for subheads) */
  --gold-1:#d0c4a7; --gold-2:#cbbe9e; --gold-3:#b3a27c;
  --gold-4:#A48E6A; --gold-5:#7F6A4D;
  --gold-wave-1cycle: linear-gradient(90deg,
    var(--gold-3) 0%,
    var(--gold-2) 46%,
    var(--gold-1) 49%,
    var(--gold-2) 52%,
    var(--gold-3) 68%,
    var(--gold-4) 78%,
    var(--gold-5) 81%,
    var(--gold-4) 86%,
    var(--gold-3) 100%
  );
  --gold-half-left: linear-gradient(90deg,
    var(--gold-3) 0%,
    var(--gold-2) 60%,
    var(--gold-1) 64%,
    var(--gold-2) 68%,
    var(--gold-3) 100%
  );
  --gold-half-right: linear-gradient(270deg,
    var(--gold-3) 0%,
    var(--gold-2) 60%,
    var(--gold-1) 64%,
    var(--gold-2) 68%,
    var(--gold-3) 100%
  );

  /* Dark gray gradient (replaces old blue) */
  --dark-1:#222222;
  --dark-2:#0F0F0F;
  --dark-gradient: linear-gradient(135deg, var(--dark-1) 0%, var(--dark-2) 100%);

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0,0,0,.10);
}

/* ---- Reset / base ---- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; }
html{ scroll-behavior:smooth; overflow-x:hidden; }

/* ---- Typography (law) ---- */
body{
  font-family:'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--text-700);
  background: var(--bg);
  line-height: 1.6;
  /* slightly smaller than before; scales gently */
  font-size: clamp(15.5px, 0.15vw + 15px, 16.5px);
}

h1,h2,h3,h4{
  font-family:'Manrope', system-ui, -apple-system, Segoe UI, Helvetica, Arial, sans-serif;
  color: var(--text-900);
  font-weight:800;
  line-height:1.15;
  margin:0 0 .55em;
}

h1{ font-size: clamp(2.6rem, 4.8vw, 3.9rem); letter-spacing:-.01em; }
h2{ font-size: clamp(2.3rem, 4.0vw, 3.3rem); letter-spacing:-.01em; }
h3{ font-size: clamp(1.5rem, 2.4vw, 1.85rem); }
h4{ font-size: clamp(1.15rem, 1.6vw, 1.25rem); }

p{ margin:0 0 1em; }
.lead{ font-size: clamp(1.05rem, 1.2vw, 1.2rem); color:var(--text-600); }

/* ---- Containers ---- */
.container,
.wrap,
.section-container{
  width: min(var(--wrap), 100% - 40px);
  margin-inline:auto;
}

/* ---- Section skins ---- */
.section{ padding-block: clamp(60px, 8vw, 110px); }
.light-section{ background:#fff; color:var(--text-700); }

/* Dark = NEW required gray gradient everywhere */
.dark-section,
.services2,
.services-section,
.featured-services,
.our-work.dark-section,
.reviews-section,
.our-process-section{
  background: var(--dark-gradient) !important;
  color: rgba(255,255,255,.9);
}

/* Force heading colors on dark, bulletproof */
.dark-section h1,
.dark-section h2,
.dark-section h3,
.dark-section h4,
.dark-section .section-title{ color:#fff !important; }
.dark-section p,
.dark-section .core-p{ color:rgba(255,255,255,.86); }

/* Keep anchor targets clear of sticky nav */
[id]{ scroll-margin-top: calc(var(--nav-h) + 12px); }
@media (max-width:980px){ [id]{ scroll-margin-top: 0; } }

/* ---- Section header system ----
   <header class="section-head align-left|align-center">
     <span class="section-number">02</span>
     <div class="section-gold-text">WHAT WE DO</div>
     <h2 class="section-title">Our Services</h2>
   </header> */
.section-head{
  position:relative;
  max-width:min(var(--wrap), 92vw);
  margin:0 auto clamp(18px, 3.5vw, 28px);
  z-index:1;
}
.section-head.align-left{ text-align:left; width:100%; margin-inline:0; }
.section-head.align-center{ text-align:center; }

/* large translucent number behind */
.section-head .section-number{
  position:absolute; inset:auto 0 auto 0;
  top:50%;
  transform:translateY(-58%);
  font:800 clamp(3.6rem, 14vw, 10rem)/1 'Manrope', system-ui;
  color:#000; opacity:.08; pointer-events:none; z-index:0;
}
.dark-section .section-head .section-number{ color:#fff; opacity:.08; }

/* gold subhead with decorative lines */
.section-gold-text{
  position:relative; display:inline-block;
  font:800 .95rem/1.1 'Manrope', system-ui, sans-serif;
  letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:clamp(8px, 1.6vw, 12px);
  background-image: var(--gold-wave-1cycle);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  z-index:1;
}
.section-gold-text::before,
.section-gold-text::after{
  content:""; display:inline-block; height:2px; width:clamp(26px,6vw,58px);
  vertical-align:middle; margin:0 .65em;
}
.align-left  .section-gold-text::before{ background-image:var(--gold-half-left); margin-left:0; }
.align-left  .section-gold-text::after { display:none; }
.align-center .section-gold-text::before{ background-image:var(--gold-half-left); }
.align-center .section-gold-text::after { background-image:var(--gold-half-right); margin-right:0; }

/* headline */
.section-title{
  position:relative; z-index:1;
  font:800 clamp(2.4rem, 4.8vw, 3.6rem)/1.12 'Manrope', system-ui, sans-serif;
  color:var(--text-900);
  letter-spacing: -2px;
  margin:.15em 0 .35em;
}

/* tint big number by theme */
.light-section .section-number{ color:#000; opacity:.06; }
.dark-section  .section-number{ color:#fff; opacity:.09; }

/* text width helper */
.core-p{ max-width:62ch; }
.core-p.center{ margin-inline:auto; }

/* ---- Buttons (ALL RED) ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  padding:.9rem 1.2rem;
  border-radius:10px; border:1px solid transparent;
  font-weight:800; line-height:1; cursor:pointer;
  transition:transform .08s ease, box-shadow .12s ease, background .12s ease, color .12s ease;
  text-decoration:none;
}
.btn:active{ transform:translateY(0); }
.btn-primary{
  background:var(--red); color:#fff; border-color:#980f10;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
}
.btn-primary:hover{ background:var(--red-600); }
.btn-primary:active{ background:var(--red-700); }

/* Back-compat: convert old .gold-button into red primary */
.gold-button{ all:unset; }
.gold-button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.95rem 1.25rem; border-radius:10px; cursor:pointer;
  background:var(--red); color:#fff; font:800 1rem/1 'Manrope', system-ui, sans-serif;
  box-shadow:0 10px 20px rgba(0,0,0,.12);
  transition:background .12s ease, transform .08s ease;
}
.gold-button:hover{ background:var(--red-600); }
.gold-button:active{ transform:translateY(0); }

/* Prevent form CTA overflow */
.quoteForm button,
.form-section .gold-button,
.form-section .btn{ width:100%; box-sizing:border-box; }

/* Optional dark-neutral button (for red areas if needed) */
.btn-dark{ background:#111; color:#fff; }
.btn-dark:hover{ filter:brightness(.92); }

/* ---- Cards (common) ---- */
.card{ background:#fff; border-radius:18px; box-shadow:var(--shadow-soft); }
.card.pad{ padding:clamp(16px, 2vw, 24px); }
.card.dark{ background:#12181c; color:#e8edf1; }

/* ---- Responsive header sizing ---- */
@media (max-width:760px){
  .section-head .section-number{ transform:translateY(-60%); font-size:clamp(3rem, 26vw, 6.6rem); }
  .section-title{ font-size:clamp(1.9rem, 8vw, 2.4rem); }
}

/* ---- Utilities ---- */
.mt-0{ margin-top:0!important; }
.mb-0{ margin-bottom:0!important; }
.center{ text-align:center!important; }

/* Keep hero layers above backgrounds with sticky nav present */
.hero-inner{ position:relative; z-index:1; }

/* Ensure everything in header sits above the big number */
.section-head{ position:relative; }
.section-head > *:not(.section-number){ position:relative; z-index:1; }

/* ---- Typography size tweak (make body copy smaller) ---- */
body{
  /* ~15.4–15.9px on typical desktops, capped at 16px */
  font-size: clamp(15px, 0.10vw + 14.4px, 16px);
}

/* Lock paragraph size to the body size (no accidental upsizing) */
p, .core-p { font-size: 1rem; }

/* Optional: make paragraphs even a hair smaller on very large monitors */
@media (min-width: 1600px){
  p, .core-p { font-size: .97rem; }  /* ~3% smaller */
}