/* ==========================================================================
   TERRAFIRMA SUPPLY CO. — Design Tokens
   Palette grounded in the material itself: laterite's iron-oxide red-brown,
   quarry charcoal, and the pale limestone dust that coats every site.
   ========================================================================== */
:root{
  --charcoal:       #17150F;
  --charcoal-2:     #221F17;
  --steel:          #3A362C;
  --stone-line:     #55503F;
  --laterite:       #A8461F;
  --laterite-dark:  #7A3316;
  --safety:         #E8720C;
  --cream:          #F3EEE3;
  --cream-dim:      #D9D2BE;
  --dust:           #8C8672;

  --font-display: 'Oswald', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  --radius: 3px;
  --shadow-lift: 0 18px 40px -12px rgba(0,0,0,.55);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--charcoal);
  font-size:16px;
  line-height:1.6;
}
h1,h2,h3,h4,.font-display{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:.02em;
  font-weight:600;
  color:var(--charcoal);
}
.font-mono{font-family:var(--font-mono);}
a{color:var(--laterite-dark); text-decoration:none;}
a:hover{color:var(--safety);}
::selection{background:var(--laterite); color:#fff;}
:focus-visible{outline:3px solid var(--safety); outline-offset:2px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; transition-duration:.01ms !important; scroll-behavior:auto !important;}
}

.eyebrow{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--laterite);
  display:flex;
  align-items:center;
  gap:.6rem;
  margin-bottom:.9rem;
}
.eyebrow::before{
  content:"";
  width:22px; height:2px;
  background:var(--safety);
  display:inline-block;
}

.section{padding:5.5rem 0;}
.section-dark{background:var(--charcoal); color:var(--cream-dim);}
.section-dark h2,.section-dark h3,.section-dark h4{color:#fff;}
.section-steel{background:var(--steel); color:var(--cream-dim);}
.section-steel h2,.section-steel h3{color:#fff;}

/* ---------- Strata band — the site's signature motif ----------
   A cross-section of the ground itself: dust, laterite, bedrock steel.
   Used as section dividers instead of generic gradients/shapes. */
.strata{
  height:14px;
  width:100%;
  background:linear-gradient(90deg,
    var(--dust) 0 12%,
    var(--cream-dim) 12% 30%,
    var(--laterite) 30% 62%,
    var(--laterite-dark) 62% 80%,
    var(--steel) 80% 100%);
}
.strata-thin{height:6px;}
.strata-vert{
  width:10px; align-self:stretch;
  background:linear-gradient(180deg,
    var(--dust) 0 12%, var(--cream-dim) 12% 30%,
    var(--laterite) 30% 62%, var(--laterite-dark) 62% 80%, var(--steel) 80% 100%);
}

/* ---------- Navbar ---------- */
.navbar-tf{
  background:var(--charcoal);
  padding:.9rem 0;
  border-bottom:3px solid var(--laterite);
}
.navbar-tf .navbar-brand{
  font-family:var(--font-display);
  color:#fff;
  font-size:1.4rem;
  letter-spacing:.03em;
  text-transform:uppercase;
  line-height:1.1;
}
.navbar-tf .navbar-brand span{
  display:block;
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.22em;
  color:var(--safety);
  text-transform:uppercase;
}
.navbar-tf .nav-link{
  color:var(--cream-dim) !important;
  font-family:var(--font-mono);
  font-size:.82rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  padding:.5rem 1rem !important;
  transition:color .15s;
}
.navbar-tf .nav-link:hover,.navbar-tf .nav-link.active{color:var(--safety) !important;}
.navbar-tf .btn-quote{
  background:var(--safety);
  color:#fff;
  font-family:var(--font-mono);
  font-size:.8rem;
  letter-spacing:.08em;
  text-transform:uppercase;
  padding:.6rem 1.3rem;
  border-radius:var(--radius);
  border:none;
  white-space:nowrap;
}
.navbar-tf .btn-quote:hover{background:var(--laterite); color:#fff;}
.navbar-toggler{border-color:var(--dust) !important;}

/* ---------- Buttons ---------- */
.btn-tf-primary{
  background:var(--safety); border:none; color:#fff;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.85rem 1.9rem; border-radius:var(--radius);
}
.btn-tf-primary:hover{background:var(--laterite); color:#fff;}
.btn-tf-outline{
  background:transparent; border:1.5px solid var(--cream-dim); color:var(--cream);
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.8rem 1.9rem; border-radius:var(--radius);
}
.btn-tf-outline:hover{background:var(--cream); color:var(--charcoal); border-color:var(--cream);}
.btn-tf-dark{
  background:var(--charcoal); border:none; color:#fff;
  font-family:var(--font-mono); font-size:.85rem; letter-spacing:.08em;
  text-transform:uppercase; padding:.85rem 1.9rem; border-radius:var(--radius);
}
.btn-tf-dark:hover{background:var(--laterite-dark); color:#fff;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:flex-end;
  background:linear-gradient(180deg, rgba(23,21,15,.55) 0%, rgba(23,21,15,.75) 55%, rgba(23,21,15,.96) 100%),
             center/cover no-repeat;
  color:#fff;
}
.hero-inner{padding:5rem 0 4.5rem;}
.hero h1{
  font-size:clamp(2.3rem, 5.5vw, 4.4rem);
  line-height:1.03;
  max-width:14ch;
}
.hero .lead{
  color:var(--cream-dim);
  max-width:52ch;
  font-size:1.15rem;
}
.hero-tag{
  font-family:var(--font-mono);
  font-size:.78rem;
  letter-spacing:.22em;
  color:var(--safety);
  text-transform:uppercase;
}

/* generic page header (non-home pages) */
.page-header{
  background:linear-gradient(180deg, rgba(23,21,15,.6), rgba(23,21,15,.92)), center/cover no-repeat;
  color:#fff; padding:7.5rem 0 4rem; position:relative;
}
.page-header h1{font-size:clamp(2rem,4.5vw,3.2rem);}
.breadcrumb-tf{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em; color:var(--cream-dim); text-transform:uppercase;}
.breadcrumb-tf a{color:var(--cream-dim);}
.breadcrumb-tf a:hover{color:var(--safety);}

/* ---------- Cards: Service / Material ---------- */
.tf-card{
  background:#fff;
  border-radius:var(--radius);
  border:1px solid rgba(0,0,0,.06);
  overflow:hidden;
  height:100%;
  transition:transform .2s, box-shadow .2s;
  display:flex; flex-direction:column;
}
.tf-card:hover{transform:translateY(-6px); box-shadow:var(--shadow-lift);}
.tf-card-img{height:210px; overflow:hidden; position:relative;}
.tf-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .4s;}
.tf-card:hover .tf-card-img img{transform:scale(1.06);}
.tf-card-body{padding:1.6rem; flex:1; display:flex; flex-direction:column;}
.tf-card-body h3,.tf-card-body h4{font-size:1.15rem; margin-bottom:.6rem;}
.tf-card-body p{color:var(--steel); font-size:.94rem; flex:1;}
.tf-card-num{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.15em;
  color:var(--laterite); text-transform:uppercase;
}

/* ---------- Spec-plate card: equipment (riveted nameplate look) ---------- */
.spec-plate{
  background:var(--steel);
  border-radius:var(--radius);
  overflow:hidden;
  position:relative;
  border:1px solid rgba(255,255,255,.08);
  height:100%;
  display:flex; flex-direction:column;
}
.spec-plate::before,.spec-plate::after,
.spec-plate .rivet-tl,.spec-plate .rivet-tr{
  content:""; position:absolute; width:9px; height:9px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #9a9384, #46422f);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
  z-index:2;
}
.spec-plate::before{top:10px; left:10px;}
.spec-plate::after{top:10px; right:10px;}
.spec-plate .rivet-tl{bottom:10px; left:10px;}
.spec-plate .rivet-tr{bottom:10px; right:10px;}
.spec-img{height:220px; overflow:hidden;}
.spec-img img{width:100%; height:100%; object-fit:cover;}
.spec-body{padding:1.7rem; color:var(--cream-dim); flex:1; display:flex; flex-direction:column;}
.spec-body h3{color:#fff; font-size:1.3rem;}
.spec-tag{
  font-family:var(--font-mono); font-size:.7rem; letter-spacing:.16em;
  color:var(--safety); text-transform:uppercase; margin-bottom:.4rem;
}
.spec-body p{font-size:.92rem; flex:1;}
.spec-apps{
  font-family:var(--font-mono); font-size:.75rem; color:var(--dust);
  border-top:1px solid rgba(255,255,255,.1); padding-top:.8rem; margin-top:.6rem;
}

/* ---------- Why Choose Us ---------- */
.feature-tile{
  padding:2rem 1.6rem; height:100%;
  border-left:3px solid var(--laterite);
  background:rgba(168,70,31,.05);
}
.feature-tile i{font-size:1.8rem; color:var(--laterite); margin-bottom:1rem; display:block;}
.feature-tile h4{font-size:1.05rem;}
.feature-tile p{color:var(--steel); font-size:.9rem; margin-bottom:0;}

/* ---------- Process steps ---------- */
.step-num{
  font-family:var(--font-mono); font-size:3rem; font-weight:700;
  color:var(--laterite); opacity:.85; line-height:1;
}
.step-block{padding:1.5rem 0;}
.step-block h4{margin-top:.6rem;}

/* ---------- Stats ---------- */
.stat-block{text-align:center; padding:1.5rem;}
.stat-num{
  font-family:var(--font-mono); font-size:2.6rem; font-weight:700;
  color:var(--safety); line-height:1;
}
.stat-label{
  font-family:var(--font-mono); font-size:.78rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--cream-dim); margin-top:.6rem;
}

/* ---------- Industry chips ---------- */
.industry-tile{
  background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:var(--radius);
  padding:1.6rem 1.2rem; text-align:center; height:100%;
  transition:border-color .2s, transform .2s;
}
.industry-tile:hover{border-color:var(--laterite); transform:translateY(-4px);}
.industry-tile i{font-size:1.7rem; color:var(--laterite-dark); margin-bottom:.7rem; display:block;}
.industry-tile span{font-size:.88rem; font-weight:600;}

/* ---------- CTA banner ---------- */
.cta-banner{
  background:var(--laterite);
  color:#fff;
  padding:3.5rem 0;
  background-image:linear-gradient(115deg, var(--laterite) 60%, var(--laterite-dark) 60%);
}
.cta-banner h3{color:#fff; margin-bottom:.3rem;}
.cta-banner p{color:rgba(255,255,255,.85); margin-bottom:0;}

/* ---------- Placeholder image blocks (used when real photos are unavailable) ---------- */
.ph-img{
  width:100%; height:100%; min-height:180px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:repeating-linear-gradient(135deg, #d8d2c2, #d8d2c2 10px, #cfc8b6 10px, #cfc8b6 20px);
  color:var(--steel); text-align:center; padding:1rem;
}
.ph-img i{font-size:1.6rem; margin-bottom:.4rem;}
.ph-img span{font-family:var(--font-mono); font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;}

/* ---------- Gallery ---------- */
.gallery-item{
  position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer;
  aspect-ratio:4/3;
}
.gallery-item .ph-img{position:absolute; inset:0;}
.gallery-item .gallery-tag{
  position:absolute; bottom:0; left:0; right:0;
  background:linear-gradient(0deg, rgba(23,21,15,.88), transparent);
  color:#fff; font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em;
  text-transform:uppercase; padding:1.2rem .8rem .6rem;
}
.gallery-filter-btn{
  font-family:var(--font-mono); font-size:.76rem; letter-spacing:.08em; text-transform:uppercase;
  border:1px solid var(--stone-line); background:transparent; color:var(--steel);
  padding:.5rem 1.1rem; border-radius:var(--radius); margin:.25rem;
}
.gallery-filter-btn.active,.gallery-filter-btn:hover{background:var(--laterite); color:#fff; border-color:var(--laterite);}

/* Lightbox */
.tf-lightbox{
  position:fixed; inset:0; background:rgba(15,13,9,.94); z-index:2000;
  display:none; align-items:center; justify-content:center; padding:2rem;
}
.tf-lightbox.open{display:flex;}
.tf-lightbox .ph-img{width:min(720px,90vw); height:min(500px,60vh); min-height:0;}
.tf-lightbox-close{
  position:absolute; top:1.5rem; right:2rem; color:#fff; font-size:2rem; cursor:pointer; background:none; border:none;
}

/* ---------- Forms ---------- */
.tf-form label{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--steel); margin-bottom:.35rem; display:block;
}
.tf-form .form-control,.tf-form .form-select{
  border-radius:var(--radius); border:1.5px solid #d8d2c2; padding:.7rem .9rem;
  background:#fff;
}
.tf-form .form-control:focus,.tf-form .form-select:focus{
  border-color:var(--laterite); box-shadow:0 0 0 .2rem rgba(168,70,31,.15);
}
.form-panel{background:#fff; border-radius:var(--radius); box-shadow:var(--shadow-lift); padding:2.4rem;}

/* ---------- Footer ---------- */
footer.tf-footer{background:var(--charcoal); color:var(--cream-dim); padding:4rem 0 0;}
.tf-footer h5{color:#fff; font-family:var(--font-display); text-transform:uppercase; font-size:1rem; letter-spacing:.05em; margin-bottom:1.1rem;}
.tf-footer a{color:var(--cream-dim); font-size:.92rem;}
.tf-footer a:hover{color:var(--safety);}
.tf-footer ul{list-style:none; padding:0; margin:0;}
.tf-footer ul li{margin-bottom:.55rem;}
.tf-footer .brand-mark{font-family:var(--font-display); color:#fff; font-size:1.5rem; text-transform:uppercase;}
.tf-footer .bottom-bar{
  border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding:1.4rem 0;
  font-family:var(--font-mono); font-size:.75rem; color:var(--dust); text-align:center;
}

/* ---------- WhatsApp floating button ---------- */
.wa-float{
  position:fixed; bottom:1.6rem; right:1.6rem; z-index:1500;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:1.7rem; box-shadow:0 8px 24px rgba(0,0,0,.35); border:none;
}
.wa-float:hover{background:#1ebe5a; color:#fff;}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;}
.reveal.is-visible{opacity:1; transform:translateY(0);}

@media (max-width: 991.98px){
  .section{padding:3.5rem 0;}
  .hero{min-height:75vh;}
}