:root {
  --ox:       #C8400A;
  --ox-h:     #A83508;
  --rust:     #7A1515;
  --ink:      #0F0F0F;
  --ink-2:    #1C1C1C;
  --stone:    #F8F7F5;
  --stone-2:  #EFEDE9;
  --mist:     #D8D5CF;
  --slate:    #68635D;
  --fog:      #9B9590;
  --radius:   12px;
  --radius-lg:20px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 76px;
  overflow-x: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

body {
  font-family: 'Bricolage Grotesque', sans-serif;
  background: #fff;
  overflow-x: hidden;
  max-width: 100vw;
  padding-top: 104px;
}

::selection { background: var(--ox); color: #fff; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: var(--stone); }
::-webkit-scrollbar-thumb { background: var(--ox); border-radius: 3px; }

.topbar-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  color: rgba(255,255,255,1);
  text-decoration: none;
  padding: 0 16px;
  transition: color .2s;
  letter-spacing: .02em;
}
.topbar-link:hover { color: #fff; }

.section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ox);
  margin-bottom: 14px;
}
.section-eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ox);
  flex-shrink: 0;
  border-radius: 2px;
}

.section-heading {
  font-size: clamp(1.85rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -.025em;
  color: var(--ink);
}

.hero-headline {
  font-size: clamp(3rem, 7.5vw, 5.75rem);
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.035em;
}

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.navbar-hero {
  position: relative;
  top: auto;
  z-index: auto;
  background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--mist);
  backdrop-filter: blur(20px) saturate(1.8);
  -webkit-backdrop-filter: blur(20px) saturate(1.8);
  box-shadow: 0 1px 20px rgba(0,0,0,.06);
  transition: box-shadow .3s ease;
}
.navbar-hero.scrolled {
  box-shadow: 0 2px 28px rgba(0,0,0,.1);
}

.navbar-logo-title {
  color: var(--ink);
}

.navbar-logo-sub {
  color: var(--fog);
}

.navbar-icon {
  color: var(--ink);
}

.nav-link {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--slate);
  text-decoration: none;
  padding: 8px 14px;
  border-radius: 8px;
  position: relative;
  transition: color .2s, background .2s;
  letter-spacing: -.01em;
}
.nav-link:hover  { color: var(--ink); background: var(--stone); }
.nav-link.active { color: var(--ox); }

.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ox);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 10px 20px;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(200,64,10,.3);
  white-space: nowrap;
}
.navbar-cta:hover {
  background: var(--ox-h);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(200,64,10,.4);
}
.navbar-cta:active { transform: translateY(0); }

.mob-link {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: var(--slate);
  padding: 12px 8px;
  border-bottom: 1px solid var(--stone-2);
  text-decoration: none;
  transition: color .2s, padding-left .2s;
  letter-spacing: -.01em;
}
.mob-link:hover { color: var(--ox); padding-left: 14px; }

.mob-link-dark {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: rgba(255,255,255,.7);
  padding: 12px 8px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  text-decoration: none;
  transition: color .2s, padding-left .2s;
  letter-spacing: -.01em;
}
.mob-link-dark:hover { color: #fff; padding-left: 14px; }

.hero-cta-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ox);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 15px 32px;
  border-radius: 100px;
  text-decoration: none;
  border: 2px solid var(--ox);
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(200,64,10,.35);
}
.hero-cta-primary:hover {
  background: var(--ox-h);
  border-color: var(--ox-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(200,64,10,.45);
}

.hero-cta-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.85);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
  padding: 15px 32px;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.15);
  transition: background .2s, border-color .2s, transform .15s;
  backdrop-filter: blur(8px);
}
.hero-cta-ghost:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.3);
  transform: translateY(-2px);
}

.hero-cta-dark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ink);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 15px 32px;
  border-radius: 100px;
  text-decoration: none;
  border: 2px solid var(--ink);
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(0,0,0,.15);
}
.hero-cta-dark:hover {
  background: #222;
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(0,0,0,.25);
}

.hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 10px 18px;
  font-size: 13px;
  color: rgba(255,255,255,.55);
  backdrop-filter: blur(6px);
  letter-spacing: -.01em;
}
.hero-stat strong {
  font-weight: 800;
  font-size: 15px;
  color: #fff;
}
.hero-stat-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,.1);
  align-self: center;
  display: none;
}
@media (min-width: 640px) {
  .hero-stat-sep { display: block; }
}

.banner-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  color: var(--ox);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 13px 26px;
  border-radius: 100px;
  text-decoration: none;
  border: 2px solid #fff;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 2px 12px rgba(0,0,0,.12);
  white-space: nowrap;
}
.banner-cta:hover {
  background: rgba(255,255,255,.9);
  transform: translateY(-1px);
  box-shadow: 0 4px 20px rgba(0,0,0,.18);
}

.noise-overlay {
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 128px 128px;
  pointer-events: none;
}

.dot-grid-overlay {
  background-image: radial-gradient(circle, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.trust-col {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 32px;
}
.trust-sep {
  width: 1px;
  background: var(--mist);
  align-self: stretch;
  flex-shrink: 0;
  margin: 16px 0;
}
@media (max-width: 639px) {
  .trust-sep {
    width: auto;
    height: 1px;
    margin: 0 24px;
  }
}
.trust-icon-wrap {
  width: 40px;
  height: 40px;
  background: rgba(200,64,10,.1);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ox);
  flex-shrink: 0;
}
.trust-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
  margin-bottom: 3px;
}
.trust-body {
  font-size: 13px;
  color: var(--slate);
  line-height: 1.5;
}

.section-divider {
  height: 1px;
  background: linear-gradient(to right, transparent 0%, var(--mist) 20%, var(--mist) 80%, transparent 100%);
  margin: 0;
}
.section-divider.flip {
  background: linear-gradient(to right, transparent 0%, var(--mist) 20%, var(--mist) 80%, transparent 100%);
}

.kpi-card {
  background: var(--stone);
  border: 1px solid var(--mist);
  border-radius: var(--radius-lg);
  padding: 24px 20px;
  text-align: center;
  transition: transform .25s, box-shadow .25s;
}
.kpi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,.06);
}
.kpi-num {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--ox);
  letter-spacing: -.04em;
  line-height: 1;
}
.kpi-label {
  font-size: 11px;
  color: var(--fog);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-top: 8px;
}

.service-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.service-dot {
  width: 7px;
  height: 7px;
  background: var(--ox);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 7px;
}

.feat-card {
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: var(--radius);
  padding: 18px 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}
.feat-card:hover {
  border-color: rgba(200,64,10,.3);
  box-shadow: 0 6px 24px rgba(200,64,10,.07);
  transform: translateY(-2px);
}
.feat-icon {
  width: 34px;
  height: 34px;
  background: rgba(200,64,10,.08);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ox);
  flex-shrink: 0;
  margin-top: 1px;
}
.feat-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}
.feat-body {
  font-size: 12.5px;
  color: var(--slate);
  line-height: 1.6;
}

.prod-card {
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color .3s, box-shadow .3s, transform .3s;
}
.prod-card:hover {
  border-color: rgba(200,64,10,.25);
  box-shadow: 0 12px 40px rgba(200,64,10,.1);
  transform: translateY(-6px);
}
.prod-img {
  aspect-ratio: 16/10;
  background: var(--stone);
  position: relative;
  overflow: hidden;
}
.prod-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: var(--ox);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: 5px 12px;
  border-radius: 100px;
  z-index: 1;
}
.prod-body { padding: 22px 20px 20px; }
.prod-title {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.025em;
  margin-bottom: 8px;
  color: var(--ink);
}
.prod-desc {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.65;
  margin-bottom: 16px;
}
.prod-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ox);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: gap .2s;
}
.prod-link:hover { gap: 9px; }

.loc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--slate);
  padding: 2px 0;
  letter-spacing: -.01em;
}
.loc-item::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--ox);
  border-radius: 50%;
  flex-shrink: 0;
}

.trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 100px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 500;
  color: var(--slate);
  letter-spacing: -.01em;
}
.trust-pill::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--ox);
  border-radius: 50%;
}

.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.contact-icon-wrap {
  width: 38px;
  height: 38px;
  background: rgba(200,64,10,.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ox);
  flex-shrink: 0;
  margin-top: 2px;
}
.contact-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .13em;
  color: var(--fog);
  margin-bottom: 3px;
}
.contact-value {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -.01em;
}

.form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--fog);
  margin-bottom: 7px;
}

.form-input {
  display: block;
  width: 100%;
  background: var(--stone);
  border: 1.5px solid var(--mist);
  color: var(--ink);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 14.5px;
  font-weight: 400;
  padding: 13px 15px;
  border-radius: 12px;
  outline: none;
  appearance: none;
  transition: border-color .2s, background .2s, box-shadow .2s;
  letter-spacing: -.01em;
}
.form-input::placeholder { color: var(--mist); }
.form-input:focus {
  border-color: var(--ox);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(200,64,10,.08);
}
.form-input.error { border-color: #dc2626; box-shadow: 0 0 0 4px rgba(220,38,38,.07); }
.form-input option { background: #fff; color: var(--ink); }

.form-submit-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--ox);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding: 16px 28px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 20px rgba(200,64,10,.3);
}
.form-submit-btn:hover {
  background: var(--ox-h);
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(200,64,10,.4);
}
.form-submit-btn:disabled { opacity: .6; cursor: wait; transform: none; }

#form-msg.success {
  display: block;
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  color: #15803d;
  border-radius: 12px;
  font-size: 13.5px;
}
#form-msg.error {
  display: block;
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #dc2626;
  border-radius: 12px;
  font-size: 13.5px;
}

.footer-heading {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,255,255,.3);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-link {
  display: block;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255,255,255,.4);
  text-decoration: none;
  letter-spacing: -.01em;
  transition: color .2s, padding-left .2s;
}
.footer-link:hover { color: var(--ox); padding-left: 4px; }

.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1);
}
.reveal.revealed { opacity: 1; transform: none; }
.delay-1 { transition-delay: .1s; }
.delay-2 { transition-delay: .2s; }
.delay-3 { transition-delay: .3s; }
.delay-4 { transition-delay: .4s; }

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
.fade-up          { animation: fadeUp .75s cubic-bezier(.16,1,.3,1) both; }
.fade-up.delay-1  { animation-delay: .12s; }
.fade-up.delay-2  { animation-delay: .26s; }
.fade-up.delay-3  { animation-delay: .4s; }
.fade-up.delay-4  { animation-delay: .55s; }

.stagger > *:nth-child(1) { transition-delay: 0s; }
.stagger > *:nth-child(2) { transition-delay: .08s; }
.stagger > *:nth-child(3) { transition-delay: .16s; }
.stagger > *:nth-child(4) { transition-delay: .24s; }

@media (max-width: 640px) {
  .section-heading  { font-size: 1.8rem; }
  .hero-headline    { font-size: 2.75rem; }
  .trust-col        { padding: 18px 16px; }
  .hero-stat-sep    { display: none; }
  .hero-cta-primary,
  .hero-cta-ghost   { padding: 13px 18px; font-size: 13px; }
}

#float-call {
  position: fixed;
  bottom: 32px;
  right: 32px;
  z-index: 9000;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
}

.fc-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #1E8C4A;
  color: #fff;
  border-radius: 100px;
  padding: 13px 20px 13px 14px;
  box-shadow: 0 6px 28px rgba(30,140,74,.35);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s ease, padding .3s cubic-bezier(.16,1,.3,1), gap .3s cubic-bezier(.16,1,.3,1);
  overflow: hidden;
  max-width: 220px;
}

.fc-icon-wrap {
  width: 36px;
  height: 36px;
  background: rgba(255,255,255,.18);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  animation: fc-shake 2.8s ease-in-out infinite;
}

.fc-icon {
  width: 18px;
  height: 18px;
  color: #fff;
}

.fc-label {
  transition: max-width .35s cubic-bezier(.16,1,.3,1), opacity .25s ease;
  max-width: 140px;
  opacity: 1;
}

#float-call:hover .fc-pill {
  transform: translateY(-3px);
  box-shadow: 0 10px 36px rgba(30,140,74,.45);
}

.fc-ring {
  position: absolute;
  border-radius: 100px;
  background: rgba(30,140,74,.2);
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.fc-ring-1 { animation: fc-pulse 2.4s ease-out infinite; }
.fc-ring-2 { animation: fc-pulse 2.4s ease-out .8s infinite; }

@keyframes fc-shake {
  0%, 100%      { transform: rotate(0deg); }
  10%           { transform: rotate(-18deg) scale(1.1); }
  20%           { transform: rotate(16deg); }
  30%           { transform: rotate(-10deg); }
  40%           { transform: rotate(8deg); }
  50%           { transform: rotate(0deg); }
}

@keyframes fc-pulse {
  0%   { transform: scale(1);    opacity: .6; }
  100% { transform: scale(2.2);  opacity: 0;  }
}

@media (max-width: 640px) {
  .fc-pill {
    padding: 14px;
    gap: 0;
  }
  .fc-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
  }
  #float-call:hover .fc-pill,
  #float-call:focus .fc-pill {
    padding: 13px 20px 13px 14px;
    gap: 10px;
  }
  #float-call:hover .fc-label,
  #float-call:focus .fc-label {
    max-width: 140px;
    opacity: 1;
  }
}

.hero-img-col {
  position: relative;
  animation: heroImgIn .9s cubic-bezier(.16,1,.3,1) .3s both;
}

@keyframes heroImgIn {
  from { opacity: 0; transform: translateX(40px) scale(.97); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.hero-img-frame {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 0 1px rgba(200,64,10,.15),
    0 32px 80px rgba(0,0,0,.5),
    0 8px 24px rgba(200,64,10,.15);
}

.hero-img-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.hero-img-frame:hover img {
  transform: scale(1.03);
}

.hero-img-placeholder {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(30,30,30,1) 0%, rgba(42,21,0,.8) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: rgba(255,255,255,.25);
  font-size: 13px;
  font-family: 'Bricolage Grotesque', sans-serif;
}
.hero-img-placeholder svg {
  width: 56px;
  height: 56px;
}

.hero-img-frame::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 45%;
  background: linear-gradient(to top, rgba(10,10,10,.75) 0%, transparent 100%);
  pointer-events: none;
  border-radius: 0 0 24px 24px;
}

.hero-img-badge {
  position: absolute;
  bottom: 24px;
  left: 24px;
  z-index: 2;
  background: #C8400A;
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 8px 24px rgba(200,64,10,.4);
  display: flex;
  align-items: center;
  gap: 10px;
  animation: heroImgIn 1s cubic-bezier(.16,1,.3,1) .55s both;
}
.hero-img-badge-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1;
  letter-spacing: -.04em;
}
.hero-img-badge-txt {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  color: rgba(255,255,255,.7);
  text-transform: uppercase;
  letter-spacing: .1em;
  line-height: 1.4;
}

.hero-img-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  z-index: 2;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 100px;
  padding: 7px 14px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,1);
  letter-spacing: .08em;
  text-transform: uppercase;
  animation: heroImgIn 1s cubic-bezier(.16,1,.3,1) .45s both;
}

.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
  user-select: none;
}

.sep-wave {
  line-height: 0;
  overflow: hidden;
  background: #fff;
}
.sep-wave svg {
  display: block;
  width: 100%;
  height: 40px;
}

.serv-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: visible;
}
.serv-img-placeholder {
  aspect-ratio: 4/3;
  background: var(--stone-2);
  border-radius: 24px;
  border: 1px solid var(--mist);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--fog);
  font-size: 13px;
  overflow: hidden;
  position: relative;
  transition: transform .4s cubic-bezier(.16,1,.3,1);
}
.serv-img-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
}
.serv-img-wrap:hover .serv-img-placeholder {
  transform: translateY(-4px);
  box-shadow: 0 20px 60px rgba(0,0,0,.1);
}
.serv-img-tag {
  position: absolute;
  bottom: -16px;
  left: 24px;
  background: var(--ox);
  color: #fff;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 100px;
  box-shadow: 0 4px 16px rgba(200,64,10,.35);
}

.serv-feat {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--stone);
  border: 1px solid var(--mist);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  transition: border-color .2s, background .2s;
}
.serv-feat:hover {
  border-color: var(--ox);
  background: rgba(200,64,10,.04);
}
.serv-feat-icon {
  font-size: 18px !important;
  color: var(--ox);
  flex-shrink: 0;
}

.sist-card {
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color .3s, box-shadow .3s, transform .3s;
  position: relative;
  overflow: hidden;
}
.sist-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--ox);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.sist-card:hover::before { transform: scaleX(1); }
.sist-card:hover {
  border-color: rgba(200,64,10,.2);
  box-shadow: 0 12px 40px rgba(200,64,10,.08);
  transform: translateY(-4px);
}
.sist-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.sist-icon {
  font-size: 32px !important;
  color: var(--ox);
}
.sist-num {
  font-size: 48px;
  font-weight: 800;
  color: #aaa8a4;
  line-height: 1;
  letter-spacing: -.04em;
}
.sist-title {
  font-size: 22px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  margin-bottom: 12px;
}
.sist-body {
  font-size: 13.5px;
  color: var(--slate);
  line-height: 1.7;
  margin-bottom: 16px;
}
.sist-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}
.sist-list li {
  font-size: 13px;
  color: var(--slate);
  padding-left: 16px;
  position: relative;
}
.sist-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ox);
}

.mat-card {
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow .3s, transform .3s;
}
.mat-card:hover {
  box-shadow: 0 16px 48px rgba(0,0,0,.08);
  transform: translateY(-4px);
}
.mat-card-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px 28px 24px;
}
.mat-pvc  { background: linear-gradient(135deg, #1a4a2a 0%, #2d7a46 100%); }
.mat-alu  { background: linear-gradient(135deg, #1a1a2e 0%, #2a2a4a 100%); }
.mat-icon-wrap {
  width: 56px;
  height: 56px;
  background: rgba(255,255,255,.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}
.mat-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6);
  margin-bottom: 3px;
}
.mat-title {
  font-size: 28px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1;
}
.mat-body {
  padding: 24px 28px 28px;
}
.mat-feat {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--slate);
}
.mat-feat-icon {
  font-size: 18px !important;
  color: var(--ox);
  flex-shrink: 0;
}
.mat-ideal {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  padding: 12px 16px;
  background: var(--stone);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--slate);
}
.mat-ideal .material-symbols-outlined {
  color: var(--ox);
}

.prod-detail-block {
  background: #fff;
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 0;
  transition: box-shadow .3s, transform .3s;
}
.prod-detail-separator {
  width: 35%;
  max-width: 260px;
  height: 1px;
  margin: 40px auto;
  background: linear-gradient(90deg, transparent 0%, rgba(180,180,175,.25) 20%, rgba(180,180,175,.55) 50%, rgba(180,180,175,.25) 80%, transparent 100%);
}
.prod-detail-block:hover {
  box-shadow: none;
  transform: none;
}
.prod-detail-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--stone-2);
  flex-wrap: wrap;
}
.prod-detail-num {
  font-size: 3rem;
  font-weight: 800;
  color: #aaa8a4;
  line-height: 1;
  letter-spacing: -.04em;
  flex-shrink: 0;
}
.prod-detail-cat {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ox);
  margin-bottom: 4px;
}
.prod-detail-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.02em;
  line-height: 1.1;
}
.prod-detail-body {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  margin-top: 8px;
}
@media (min-width: 768px) {
  .prod-detail-body {
    grid-template-columns: 1.5fr 1fr;
    gap: 60px;
    align-items: start;
  }
}
.prod-detail-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.prod-detail-text p {
  font-size: 14.5px;
  color: var(--slate);
  line-height: 1.85;
}
.prod-detail-text strong { color: var(--ink); font-weight: 600; }

.prod-detail-feats {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--stone);
  border: 1px solid var(--mist);
  border-radius: 16px;
  overflow: hidden;
}
.prod-detail-feat {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--mist);
}
.prod-detail-feat:last-child { border-bottom: none; }
.prod-detail-feat div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prod-detail-feat strong {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.prod-detail-feat span {
  font-size: 12px;
  color: var(--fog);
}

.serv-intro-section {
  position: relative;
  background: var(--ink);
  overflow: hidden;
}
.serv-intro-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, #0f0f0f 0%, #1c1c1c 50%, #2a1500 100%);
}
.serv-intro-bg::after {
  content: '';
  position: absolute;
  top: -100px;
  right: -100px;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(200,64,10,.18) 0%, transparent 70%);
  pointer-events: none;
}
.serv-intro-title {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  line-height: 1.1;
}
.serv-intro-text {
  font-size: 15px;
  color: rgba(255,255,255,.55);
  line-height: 1.8;
}
.serv-intro-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 100px;
  padding: 8px 14px;
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255,255,255,.7);
  letter-spacing: -.01em;
  transition: background .2s, border-color .2s;
}
.serv-intro-pill:hover {
  background: rgba(200,64,10,.2);
  border-color: rgba(200,64,10,.3);
  color: #fff;
}

/* ═══ TAILWIND UTILITIES (extracted) ════════════════════════════ */
.absolute{position:absolute}
.relative{position:relative}
.fixed{position:fixed}
.inset-0{top:0;right:0;bottom:0;left:0}
.top-0{top:0}
.bottom-0{bottom:0}
.left-0{left:0}
.right-0{right:0}
.top-1\/3{top:33.333333%}
.left-1\/4{left:25%}
.right-1\/4{right:25%}
.-bottom-6{bottom:-1.5rem}
.right-4{right:1rem}
.z-10{z-index:10}
.block{display:block}
.inline{display:inline}
.flex{display:flex}
.inline-flex{display:inline-flex}
.grid{display:grid}
.hidden{display:none}
.items-center{align-items:center}
.items-start{align-items:flex-start}
.items-end{align-items:flex-end}
.items-stretch{align-items:stretch}
.justify-center{justify-content:center}
.justify-between{justify-content:space-between}
.justify-end{justify-content:flex-end}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.flex-nowrap{flex-wrap:nowrap}
.flex-1{flex:1 1 0%}
.shrink-0{flex-shrink:0}
.ml-auto{margin-left:auto}
.mt-auto{margin-top:auto}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:.25rem}
.mt-2{margin-top:.5rem}
.mt-4{margin-top:1rem}
.mt-6{margin-top:1.5rem}
.mt-8{margin-top:2rem}
.mt-12{margin-top:3rem}
.mt-\[3px\]{margin-top:3px}
.mt-0\.5{margin-top:.125rem}
.mb-0\.5{margin-bottom:.125rem}
.mb-3{margin-bottom:.75rem}
.mb-4{margin-bottom:1rem}
.mb-5{margin-bottom:1.25rem}
.mb-6{margin-bottom:1.5rem}
.mb-7{margin-bottom:1.75rem}
.mb-8{margin-bottom:2rem}
.mb-10{margin-bottom:2.5rem}
.mb-12{margin-bottom:3rem}
.mb-14{margin-bottom:3.5rem}
.mb-16{margin-bottom:4rem}
.pt-1{padding-top:.25rem}
.pt-4{padding-top:1rem}
.pt-8{padding-top:2rem}
.pt-20{padding-top:5rem}
.pt-32{padding-top:8rem}
.pb-5{padding-bottom:1.25rem}
.pb-8{padding-bottom:2rem}
.pb-10{padding-bottom:2.5rem}
.pb-20{padding-bottom:5rem}
.pl-5{padding-left:1.25rem}
.px-5{padding-left:1.25rem;padding-right:1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding-left:1.75rem;padding-right:1.75rem}
.px-10{padding-left:2.5rem;padding-right:2.5rem}
.py-0\.5{padding-top:.125rem;padding-bottom:.125rem}
.py-5{padding-top:1.25rem;padding-bottom:1.25rem}
.py-6{padding-top:1.5rem;padding-bottom:1.5rem}
.py-20{padding-top:5rem;padding-bottom:5rem}
.py-24{padding-top:6rem;padding-bottom:6rem}
.py-32{padding-top:8rem;padding-bottom:8rem}
.py-3\.5{padding-top:.875rem;padding-bottom:.875rem}
.p-8{padding:2rem}
.w-3{width:.75rem}
.w-3\.5{width:.875rem}
.w-4{width:1rem}
.w-5{width:1.25rem}
.w-9{width:2.25rem}
.w-10{width:2.5rem}
.w-full{width:100%}
.w-\[18px\]{width:18px}
.w-\[300px\]{width:300px}
.w-\[400px\]{width:400px}
.w-\[600px\]{width:600px}
.w-\[700px\]{width:700px}
.h-3{height:.75rem}
.h-3\.5{height:.875rem}
.h-4{height:1rem}
.h-5{height:1.25rem}
.h-9{height:2.25rem}
.h-10{height:2.5rem}
.h-32{height:8rem}
.h-full{height:100%}
.h-\[18px\]{height:18px}
.h-\[68px\]{height:68px}
.h-\[300px\]{height:300px}
.h-\[400px\]{height:400px}
.h-\[500px\]{height:500px}
.h-\[600px\]{height:600px}
.min-h-\[93vh\]{min-height:93vh}
.min-h-\[260px\]{min-height:260px}
.max-w-2xl{max-width:42rem}
.max-w-3xl{max-width:48rem}
.max-w-screen-xl{max-width:1280px}
.gap-1{gap:.25rem}
.gap-2{gap:.5rem}
.gap-2\.5{gap:.625rem}
.gap-3{gap:.75rem}
.gap-4{gap:1rem}
.gap-5{gap:1.25rem}
.gap-6{gap:1.5rem}
.gap-8{gap:2rem}
.gap-10{gap:2.5rem}
.gap-12{gap:3rem}
.gap-16{gap:4rem}
.gap-20{gap:5rem}
.gap-x-8{column-gap:2rem}
.gap-y-2\.5{row-gap:.625rem}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.space-y-2\.5>*+*{margin-top:.625rem}
.space-y-3>*+*{margin-top:.75rem}
.space-y-3\.5>*+*{margin-top:.875rem}
.space-y-4>*+*{margin-top:1rem}
.space-y-5>*+*{margin-top:1.25rem}
.space-y-6>*+*{margin-top:1.5rem}
.divide-x>*+*{border-left-width:1px;border-left-style:solid}
.divide-white\/15>*+*{border-color:rgba(255,255,255,.15)}
.bg-white{background-color:#fff}
.bg-ink{background-color:#0F0F0F}
.bg-ox{background-color:#C8400A}
.bg-rust{background-color:#7A1515}
.bg-stone{background-color:#F8F7F5}
.bg-stone-2{background-color:#EFEDE9}
.bg-ox\/8{background-color:rgba(200,64,10,.08)}
.bg-ox\/10{background-color:rgba(200,64,10,.10)}
.bg-ox\/15{background-color:rgba(200,64,10,.15)}
.bg-ox\/20{background-color:rgba(200,64,10,.20)}
.bg-gradient-to-br{background-image:linear-gradient(to bottom right,var(--tw-gradient-stops))}
.bg-gradient-to-t{background-image:linear-gradient(to top,var(--tw-gradient-stops))}
.from-\[\#0a0a0a\]{--tw-gradient-from:#0a0a0a;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.from-white\/5{--tw-gradient-from:rgba(255,255,255,.05);--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to,transparent)}
.via-\[\#1a1a1a\]{--tw-gradient-stops:var(--tw-gradient-from),#1a1a1a,var(--tw-gradient-to,transparent)}
.to-\[\#2a1500\]{--tw-gradient-to:#2a1500}
.to-transparent{--tw-gradient-to:transparent}
.text-white{color:#fff}
.text-white\/25{color:rgba(255,255,255,.25)}
.text-white\/35{color:rgba(255,255,255,.35)}
.text-white\/50{color:rgba(255,255,255,.50)}
.text-white\/65{color:rgba(255,255,255,.65)}
.text-ink{color:#0F0F0F}
.text-ox{color:#C8400A}
.text-slate{color:#68635D}
.text-fog{color:#9B9590}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-lg{font-size:1.125rem;line-height:1.75rem}
.text-4xl{font-size:2.25rem;line-height:2.5rem}
.text-5xl{font-size:3rem;line-height:1}
.text-center{text-align:center}
.text-\[10px\]{font-size:10px}
.text-\[11px\]{font-size:11px}
.text-\[12px\]{font-size:12px}
.text-\[13px\]{font-size:13px}
.text-\[14px\]{font-size:14px}
.text-\[15px\]{font-size:15px}
.text-\[1\.1rem\]{font-size:1.1rem}
.font-light{font-weight:300}
.font-medium{font-weight:500}
.font-semibold{font-weight:600}
.font-bold{font-weight:700}
.font-extrabold{font-weight:800}
.font-sans{font-family:'Bricolage Grotesque',sans-serif}
.leading-none{line-height:1}
.leading-tight{line-height:1.25}
.leading-snug{line-height:1.375}
.leading-relaxed{line-height:1.625}
.leading-\[1\.8\]{line-height:1.8}
.tracking-tight{letter-spacing:-.025em}
.tracking-wide{letter-spacing:.025em}
.tracking-widest{letter-spacing:.1em}
.tracking-\[\.16em\]{letter-spacing:.16em}
.tracking-\[\.18em\]{letter-spacing:.18em}
.uppercase{text-transform:uppercase}
.italic{font-style:italic}
.not-italic{font-style:normal}
.underline-offset-2{text-underline-offset:2px}
.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.rounded-lg{border-radius:.5rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}
.border{border-width:1px;border-style:solid}
.border-b{border-bottom-width:1px;border-bottom-style:solid}
.border-t{border-top-width:1px;border-top-style:solid}
.border-y{border-top-width:1px;border-top-style:solid;border-bottom-width:1px;border-bottom-style:solid}
.border-l-\[3px\]{border-left-width:3px;border-left-style:solid}
.border-mist{border-color:#D8D5CF}
.border-ox{border-color:#C8400A}
.border-stone-2{border-color:#EFEDE9}
.border-white\/\[\.07\]{border-color:rgba(255,255,255,.07)}
.shadow-sm{box-shadow:0 1px 2px 0 rgba(0,0,0,.05)}
.shadow-xl{box-shadow:0 20px 25px -5px rgba(0,0,0,.1),0 8px 10px -6px rgba(0,0,0,.1)}
.shadow-2xl{box-shadow:0 25px 50px -12px rgba(0,0,0,.25)}
.shadow-ink\/5{box-shadow:0 20px 25px -5px rgba(15,15,15,.05)}
.shadow-ox\/30{box-shadow:0 20px 25px -5px rgba(200,64,10,.30)}
.overflow-hidden{overflow:hidden}
.overflow-x-hidden{overflow-x:hidden}
.object-cover{object-fit:cover}
.opacity-30{opacity:.3}
.pointer-events-none{pointer-events:none}
.cursor-pointer{cursor:pointer}
.resize-none{resize:none}
.aspect-video{aspect-ratio:16/9}
.aspect-\[3\/4\]{aspect-ratio:3/4}
.blur-\[80px\]{filter:blur(80px)}
.blur-\[100px\]{filter:blur(100px)}
.blur-\[120px\]{filter:blur(120px)}
.translate-x-1\/4{transform:translateX(25%)}
.translate-y-1\/3{transform:translateY(33.333%)}
.translate-y-1\/4{transform:translateY(25%)}
.-translate-y-1\/3{transform:translateY(-33.333%)}
.transition-colors{transition-property:color,background-color,border-color;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:150ms}
.order-1{order:1}
.order-2{order:2}
.accent-\[\#C8400A\]{accent-color:#C8400A}
.hover\:bg-stone:hover{background-color:#F8F7F5}
.hover\:text-ox:hover{color:#C8400A}
.hover\:underline:hover{text-decoration:underline}

@media(min-width:640px){
  .sm\:block{display:block}
  .sm\:hidden{display:none}
  .sm\:inline{display:inline}
  .sm\:inline-flex{display:inline-flex}
  .sm\:flex-row{flex-direction:row}
  .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sm\:justify-end{justify-content:flex-end}
  .sm\:w-auto{width:auto}
  .sm\:px-10{padding-left:2.5rem;padding-right:2.5rem}
  .sm\:right-6{right:1.5rem}
  .sm\:text-xl{font-size:1.25rem;line-height:1.75rem}
  .sm\:text-\[11px\]{font-size:11px}
  .sm\:font-medium{font-weight:500}
  .sm\:tracking-normal{letter-spacing:0}
}
@media(min-width:1024px){
  .lg\:block{display:block}
  .lg\:hidden{display:none}
  .lg\:flex{display:flex}
  .lg\:inline-flex{display:inline-flex}
  .lg\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .lg\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lg\:grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .lg\:grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
  .lg\:col-span-1{grid-column:span 1/span 1}
  .lg\:col-span-2{grid-column:span 2/span 2}
  .lg\:col-span-3{grid-column:span 3/span 3}
  .lg\:order-1{order:1}
  .lg\:order-2{order:2}
}
@media(min-width:1280px){
  .xl\:gap-20{gap:5rem}
  .xl\:gap-24{gap:6rem}
  .xl\:gap-28{gap:7rem}
}