/* =========================================================
   S. WILKES CONCRETE PUMPING — Core Stylesheet
   Palette: ink #0A0A0A / gold #E8A328 / paper #F5F3EF / steel #3A3A3A / white #FFFFFF
   Display: Bebas Neue · Body: Barlow · Data/Labels: Barlow Condensed
   ========================================================= */

:root{
  --ink:        #0A0A0A;
  --ink-soft:   #151515;
  --gold:       #E8A328;
  --gold-dim:   #B9821F;
  --paper:      #F5F3EF;
  --paper-dim:  #E8E5DD;
  --steel:      #3A3A3A;
  --steel-line: #2A2A2A;
  --white:      #FFFFFF;
  --max: 1180px;
  --gap: clamp(1.25rem, 3vw, 2.5rem);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'Barlow', Arial, sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}

h1,h2,h3,h4{
  font-family:'Bebas Neue', Impact, sans-serif;
  letter-spacing:0.02em;
  margin:0;
  line-height:1.05;
  font-weight:400;
  text-transform:uppercase;
}

.eyebrow{
  font-family:'Barlow Condensed', sans-serif;
  text-transform:uppercase;
  letter-spacing:0.22em;
  font-size:0.78rem;
  font-weight:600;
  color:var(--gold-dim);
}
.on-dark .eyebrow{color:var(--gold);}

.container{
  max-width:var(--max);
  margin:0 auto;
  padding:0 var(--gap);
}

section{padding:clamp(3.5rem,8vw,6.5rem) 0;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:.6em;
  font-family:'Barlow Condensed', sans-serif;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:0.92rem;
  padding:0.95em 1.7em;
  border:2px solid var(--ink);
  border-radius:2px;
  transition:transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--gold); border-color:var(--gold); color:var(--ink); }
.btn-primary:hover{ background:var(--ink); border-color:var(--ink); color:var(--gold); transform:translateY(-2px); }
.btn-ghost-dark{ border-color:var(--white); color:var(--white); }
.btn-ghost-dark:hover{ background:var(--white); color:var(--ink); transform:translateY(-2px); }
.btn-ghost{ border-color:var(--ink); color:var(--ink); }
.btn-ghost:hover{ background:var(--ink); color:var(--gold); transform:translateY(-2px); }

/* ---------- Header / Nav ---------- */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(10,10,10,0.96);
  border-bottom:1px solid var(--steel-line);
}
.nav-wrap{
  max-width:var(--max); margin:0 auto; padding:0 var(--gap);
  display:flex; align-items:center; justify-content:space-between;
  height:74px;
}
.brand{display:flex; align-items:center; gap:.7rem;}
.brand img{height:46px; width:auto;}
.brand-text{font-family:'Bebas Neue'; color:var(--white); font-size:1.15rem; letter-spacing:.04em; line-height:1.05;}
.brand-text span{display:block; color:var(--gold); font-family:'Barlow Condensed'; font-size:.62rem; letter-spacing:.18em; font-weight:600;}

.main-nav{display:flex; align-items:center; gap:2.1rem;}
.main-nav a{
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.08em;
  font-size:.92rem; font-weight:600; color:var(--paper-dim);
  position:relative; padding:6px 0;
}
.main-nav a:hover, .main-nav a.active{color:var(--gold);}
.main-nav a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--gold);
}
.nav-cta{margin-left:.5rem;}
.nav-phone{
  display:flex; align-items:center; gap:.5rem; color:var(--white); font-family:'Barlow Condensed';
  font-weight:700; letter-spacing:.04em; font-size:1rem;
}
.nav-phone svg{width:16px; height:16px; fill:var(--gold);}

.burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:8px;}
.burger span{width:26px; height:2px; background:var(--white);}

@media (max-width: 900px){
  .main-nav{
    position:fixed; inset:74px 0 0 0; background:var(--ink);
    flex-direction:column; align-items:flex-start; gap:0; padding:1rem var(--gap) 2rem;
    transform:translateX(100%); transition:transform .3s ease; overflow-y:auto;
  }
  .main-nav.open{transform:translateX(0);}
  .main-nav a{padding:.9rem 0; width:100%; border-bottom:1px solid var(--steel-line); font-size:1.05rem;}
  .nav-cta{margin:1.2rem 0 0;}
  .nav-phone{display:none;}
  .burger{display:flex;}
}

/* ---------- Hero (boom-arm signature motif) ---------- */
.hero{
  position:relative; background:var(--ink); color:var(--white);
  overflow:hidden;
  min-height:min(86vh, 760px);
  display:flex; align-items:flex-end;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
}
.hero-bg img{
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
  filter:brightness(0.48) saturate(0.92);
}
.hero-bg::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,10,10,0.15) 0%, rgba(10,10,10,0.35) 45%, rgba(10,10,10,0.94) 100%);
}
.hero-boom-line{
  position:absolute; right:4%; top:8%; width:min(46vw,560px); z-index:1; opacity:0.9;
  pointer-events:none;
}
.hero-boom-line svg{width:100%; height:auto; display:block;}
.boom-path{
  fill:none; stroke:var(--gold); stroke-width:3; stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:900; stroke-dashoffset:900;
  animation:drawBoom 1.8s 0.3s cubic-bezier(.22,.61,.36,1) forwards;
}
@keyframes drawBoom{ to{stroke-dashoffset:0;} }
@media (prefers-reduced-motion: reduce){ .boom-path{stroke-dashoffset:0; animation:none;} }

.hero-content{position:relative; z-index:2; padding:3.5rem 0 4rem;}
.hero-content .eyebrow{margin-bottom:1rem; display:block;}
.hero-title{
  font-size:clamp(2.6rem, 7.2vw, 5.4rem);
  color:var(--white);
}
.hero-title em{font-style:normal; color:var(--gold);}
.hero-sub{
  max-width:560px; margin:1.2rem 0 2rem; color:var(--paper-dim); font-size:1.08rem;
}
.hero-ctas{display:flex; gap:1rem; flex-wrap:wrap;}
.hero-stats{
  display:flex; gap:clamp(1.5rem,4vw,3.2rem); margin-top:3rem; flex-wrap:wrap;
  border-top:1px solid rgba(255,255,255,0.18); padding-top:1.8rem;
}
.hero-stat strong{display:block; font-family:'Bebas Neue'; font-size:2.1rem; color:var(--gold); line-height:1;}
.hero-stat span{font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.1em; font-size:.74rem; color:var(--paper-dim);}

/* ---------- Section headers ---------- */
.section-head{max-width:680px; margin-bottom:clamp(2rem,5vw,3rem);}
.section-head h2{font-size:clamp(2rem,4.6vw,3.1rem); margin-top:.5rem;}
.section-head p{color:var(--steel); font-size:1.05rem; margin-top:1rem; max-width:560px;}
.section-head.center{margin-inline:auto; text-align:center;}
.section-head.on-dark h2{color:var(--white);}
.section-head.on-dark p{color:var(--paper-dim);}

/* ---------- Service cards ---------- */
.grid-services{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem;
}
@media (max-width:1024px){.grid-services{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.grid-services{grid-template-columns:1fr;}}

.card-service{
  background:var(--white); border:1px solid var(--paper-dim);
  display:flex; flex-direction:column; transition:transform .22s ease, box-shadow .22s ease;
  position:relative; overflow:hidden;
}
.card-service:hover{transform:translateY(-5px); box-shadow:0 18px 34px -18px rgba(10,10,10,0.35);}
.card-service .img-wrap{aspect-ratio:4/3; overflow:hidden; background:var(--steel);}
.card-service .img-wrap img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.card-service:hover .img-wrap img{transform:scale(1.06);}
.card-service .body{padding:1.5rem 1.5rem 1.7rem; flex:1; display:flex; flex-direction:column;}
.card-service h3{font-size:1.35rem; margin-bottom:.5rem;}
.card-service p{color:var(--steel); font-size:.95rem; flex:1; margin:0 0 1.1rem;}
.card-service .more{
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
  font-size:.82rem; color:var(--gold-dim); display:flex; align-items:center; gap:.4em;
}
.card-service:hover .more{color:var(--ink);}

/* ---------- Why choose / feature list ---------- */
.split{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
@media (max-width:880px){.split{grid-template-columns:1fr;}}
.split.reverse{grid-template-columns:0.95fr 1.05fr;}
@media (max-width:880px){.split.reverse{grid-template-columns:1fr;}}
.split img{width:100%; height:100%; object-fit:cover; border-radius:2px;}
.split .img-frame{position:relative; aspect-ratio:4/3.1; overflow:hidden;}
.split .img-frame::before{
  content:""; position:absolute; inset:0; border:1px solid rgba(232,163,40,0.5); margin:14px;
  pointer-events:none; z-index:2;
}

.feature-list{list-style:none; margin:1.6rem 0 0; padding:0; display:flex; flex-direction:column; gap:1.1rem;}
.feature-list li{display:flex; gap:.9rem; align-items:flex-start; font-size:1.02rem;}
.feature-list .tick{
  flex:0 0 auto; width:26px; height:26px; border-radius:50%; background:var(--ink);
  display:flex; align-items:center; justify-content:center; margin-top:.1rem;
}
.feature-list .tick svg{width:13px; height:13px; fill:none; stroke:var(--gold); stroke-width:2.6;}

/* ---------- Stat band ---------- */
.stat-band{
  background:var(--ink); color:var(--white);
  display:grid; grid-template-columns:repeat(4,1fr);
}
@media (max-width:760px){.stat-band{grid-template-columns:repeat(2,1fr);}}
.stat-band .stat{
  padding:2.6rem 1.5rem; text-align:center; border-right:1px solid var(--steel-line);
}
.stat-band .stat:last-child{border-right:none;}
.stat-band .stat strong{font-family:'Bebas Neue'; font-size:clamp(2.2rem,5vw,3rem); color:var(--gold); display:block;}
.stat-band .stat span{font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem; color:var(--paper-dim);}

/* ---------- Gallery grid ---------- */
.gallery-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:.6rem;
}
@media (max-width:760px){.gallery-grid{grid-template-columns:repeat(2,1fr);}}
.gallery-grid a{
  position:relative; aspect-ratio:1/1; overflow:hidden; display:block; background:var(--steel);
}
.gallery-grid img{width:100%; height:100%; object-fit:cover; transition:transform .45s ease;}
.gallery-grid a:hover img{transform:scale(1.08);}
.gallery-grid .tag{
  position:absolute; left:0; bottom:0; right:0; padding:.9rem 1rem .8rem;
  background:linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.82) 100%);
  color:var(--white); font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.06em;
  font-size:.82rem; font-weight:700;
}
.gallery-grid .tag small{display:block; font-weight:500; color:var(--paper-dim); letter-spacing:.04em; font-size:.74rem; margin-top:.15rem;}
.gallery-grid.lead a:first-child{grid-row:span 2; grid-column:span 2; aspect-ratio:auto;}
@media (max-width:760px){.gallery-grid.lead a:first-child{grid-column:span 2; aspect-ratio:16/11;}}

/* ---------- Testimonials ---------- */
.testimonial-row{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1.4rem;
}
@media (max-width:880px){.testimonial-row{grid-template-columns:1fr; max-width:560px; margin:0 auto;}}
.t-card{
  background:var(--white); border:1px solid var(--paper-dim); padding:2rem;
  display:flex; flex-direction:column; gap:1.1rem;
}
.t-card .stars{color:var(--gold); font-size:1rem; letter-spacing:.15em;}
.t-card p{font-size:1.02rem; color:var(--ink); flex:1;}
.t-card footer{font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.05em; font-size:.85rem; color:var(--steel); font-weight:700;}
.t-card footer span{display:block; font-weight:500; text-transform:none; letter-spacing:0; color:var(--gold-dim); font-size:.82rem; margin-top:.1rem;}

/* ---------- CTA banner ---------- */
.cta-band{
  background:var(--gold); color:var(--ink); position:relative; overflow:hidden;
}
.cta-band .container{
  display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap;
}
.cta-band h2{font-size:clamp(1.9rem,4.2vw,2.7rem);}
.cta-band p{margin:.6rem 0 0; max-width:480px; font-size:1.02rem;}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink); color:var(--paper-dim);}
.footer-top{
  padding:clamp(3rem,6vw,4.5rem) 0 2.5rem;
  display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:2.5rem;
}
@media (max-width:880px){.footer-top{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.footer-top{grid-template-columns:1fr;}}
.footer-top h4{font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.1em; font-size:.85rem; color:var(--gold); margin-bottom:1.1rem; font-weight:700;}
.footer-brand img{height:50px; margin-bottom:1rem;}
.footer-brand p{font-size:.92rem; max-width:280px; color:var(--paper-dim);}
.footer-top ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.65rem;}
.footer-top ul a{font-size:.94rem; color:var(--paper-dim);}
.footer-top ul a:hover{color:var(--gold);}
.footer-contact li{display:flex; gap:.6rem; font-size:.92rem; align-items:flex-start;}
.footer-contact svg{width:15px; height:15px; fill:var(--gold); margin-top:.2rem; flex:0 0 auto;}
.footer-bottom{
  border-top:1px solid var(--steel-line); padding:1.4rem 0; display:flex; justify-content:space-between;
  font-size:.82rem; color:var(--steel); flex-wrap:wrap; gap:.6rem;
}
.footer-bottom a{color:var(--steel);}
.footer-bottom a:hover{color:var(--gold);}

/* ---------- Page hero (sub-pages) ---------- */
.page-hero{
  background:var(--ink); color:var(--white); position:relative; overflow:hidden;
  padding:clamp(5rem,12vw,7.5rem) 0 clamp(3rem,6vw,4rem);
}
.page-hero .container{position:relative; z-index:2;}
.page-hero h1{font-size:clamp(2.4rem,6vw,4.2rem); color:var(--white);}
.page-hero .eyebrow{margin-bottom:.8rem; display:block;}
.page-hero p{color:var(--paper-dim); max-width:600px; margin-top:1rem; font-size:1.05rem;}
.page-hero-bg{position:absolute; inset:0; z-index:0;}
.page-hero-bg img{width:100%; height:100%; object-fit:cover; filter:brightness(0.32);}
.breadcrumb{
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.08em; font-size:.8rem;
  color:var(--paper-dim); margin-bottom:1.2rem; display:flex; gap:.5em;
}
.breadcrumb a{color:var(--gold);}

/* ---------- Generic content blocks ---------- */
.prose h2{font-size:1.9rem; margin:2.2rem 0 1rem;}
.prose h3{font-size:1.35rem; margin:1.6rem 0 .7rem; font-family:'Barlow'; font-weight:700; text-transform:none; letter-spacing:0;}
.prose p{margin:0 0 1.1rem; color:var(--steel); font-size:1.02rem;}
.prose ul{margin:0 0 1.1rem; padding-left:1.2rem; color:var(--steel);}
.prose li{margin-bottom:.5rem;}

.spec-table{width:100%; border-collapse:collapse; margin:1.5rem 0;}
.spec-table th,.spec-table td{
  text-align:left; padding:.85rem 1rem; border-bottom:1px solid var(--paper-dim); font-size:.96rem;
}
.spec-table th{
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.06em; font-size:.78rem;
  color:var(--steel); background:var(--paper-dim);
}

.tag-pill{
  display:inline-flex; align-items:center; gap:.4em; background:var(--ink); color:var(--gold);
  font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.08em; font-size:.74rem;
  font-weight:700; padding:.4em .9em; border-radius:100px; margin-bottom:1rem;
}

/* ---------- Contact form ---------- */
.form-card{background:var(--white); border:1px solid var(--paper-dim); padding:clamp(1.6rem,4vw,2.4rem);}
.form-row{display:grid; grid-template-columns:1fr 1fr; gap:1rem;}
@media (max-width:560px){.form-row{grid-template-columns:1fr;}}
.field{margin-bottom:1.1rem;}
.field label{
  display:block; font-family:'Barlow Condensed'; text-transform:uppercase; letter-spacing:.06em;
  font-size:.78rem; font-weight:700; color:var(--steel); margin-bottom:.45rem;
}
.field input, .field select, .field textarea{
  width:100%; border:1px solid var(--paper-dim); background:var(--paper); padding:.8em .9em;
  font-family:'Barlow'; font-size:.98rem; border-radius:2px; color:var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--gold); outline-offset:1px; border-color:var(--gold);
}
.field textarea{resize:vertical; min-height:120px;}

/* ---------- Partner logos grid ---------- */
.partners-grid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1rem;
}
@media (max-width:880px){.partners-grid{grid-template-columns:repeat(3,1fr);}}
@media (max-width:560px){.partners-grid{grid-template-columns:repeat(2,1fr);}}
.partner-card{
  background:var(--white); border:1px solid var(--paper-dim);
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:1/1; padding:1rem; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.partner-card:hover{transform:translateY(-3px); box-shadow:0 12px 24px -16px rgba(10,10,10,0.3); border-color:var(--gold);}
.partner-card img{max-width:100%; max-height:100%; object-fit:contain;}

/* ---------- Floating contact buttons ---------- */
.float-contact{
  position:fixed; right:1.2rem; bottom:1.2rem; z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:.7rem;
}
.float-btn{
  width:54px; height:54px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  box-shadow:0 8px 20px -6px rgba(10,10,10,0.45); transition:transform .18s ease, box-shadow .18s ease;
  position:relative;
}
.float-btn:hover{transform:translateY(-3px) scale(1.05); box-shadow:0 12px 26px -6px rgba(10,10,10,0.5);}
.float-btn svg{width:26px; height:26px; fill:var(--white);}
.float-btn.whatsapp{background:#25D366;}
.float-btn.facebook{background:#1877F2;}
.float-btn.instagram{background:radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);}
.float-btn .tooltip{
  position:absolute; right:64px; top:50%; transform:translateY(-50%);
  background:var(--ink); color:var(--white); font-family:'Barlow Condensed'; text-transform:uppercase;
  letter-spacing:.06em; font-size:.78rem; font-weight:700; padding:.45em .9em; border-radius:4px;
  white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease;
}
.float-btn:hover .tooltip{opacity:1;}
@media (max-width:600px){
  .float-contact{right:.8rem; bottom:.8rem; gap:.55rem;}
  .float-btn{width:48px; height:48px;}
  .float-btn svg{width:23px; height:23px;}
  .float-btn .tooltip{display:none;}
}

/* ---------- Footer social icons ---------- */
.footer-social{display:flex; gap:.7rem; margin-top:1.1rem;}
.footer-social a{
  width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  background:var(--steel); transition:background .18s ease, transform .18s ease;
}
.footer-social a:hover{transform:translateY(-2px);}
.footer-social a.whatsapp:hover{background:#25D366;}
.footer-social a.facebook:hover{background:#1877F2;}
.footer-social a.instagram:hover{background:#d6249f;}
.footer-social svg{width:18px; height:18px; fill:var(--paper-dim);}
.footer-social a:hover svg{fill:var(--white);}

/* ---------- FAQ Accordion ---------- */
.faq-list{max-width:780px; margin:0 auto; display:flex; flex-direction:column; gap:.8rem;}
.faq-item{
  background:var(--paper); border:1px solid var(--paper-dim); border-radius:4px; padding:1.1rem 1.4rem;
}
.faq-item summary{
  cursor:pointer; font-family:'Barlow Condensed'; font-weight:700; font-size:1.05rem;
  color:var(--ink); list-style:none; position:relative; padding-right:2rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+"; position:absolute; right:0; top:0; font-size:1.4rem; line-height:1; color:var(--gold); transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin:.8rem 0 0; color:var(--steel); line-height:1.6;}

/* Utility */
.text-center{text-align:center;}
.mt-0{margin-top:0;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);}
:focus-visible{outline:3px solid var(--gold); outline-offset:2px;}