:root{
 /* --walnut:#3b271d; */
 --walnut:#5c4033;
  --brown:#5a3b2d;
  --wood:#c88a52;
  --cream:#f5f0e8;
  --surface:#eee8df;
  --white:#fffdf9;
  --text:#30241e;
  --muted:#71675f;
  --line:#d9d0c5;
  --max:1376px;
  --footer-bg: #3b271d;
  --process-bg:#5c4033;
  --footer-contact-icon:#3b271d;
  --cta-btn:#c88a52;

}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{scroll-behavior:smooth}
body{
  font-family:Archivo,Arial,sans-serif;
  color:var(--text);
  background:var(--white);
  line-height:1.6;
   width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}
img{display:block;width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit}

.container{
  width:min(var(--max),calc(100% - 40px));
  margin:auto;
}

.eyebrow{
  color:var(--wood);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}
h1,h2,h3{
  font-family:Fraunces,Georgia,serif;
  font-weight:600;
  line-height:1.08;
}
h2{font-size:clamp(2rem,4vw,3.1rem)}
p{color:var(--muted)}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:52px;
  padding:0 27px;
  border:1px solid transparent;
  font-size:.73rem;
  font-weight:700;
  letter-spacing:.15em;
  text-transform:uppercase;
  transition:.25s ease;
  cursor:pointer;
}
.btn-primary{background:var(--wood);color:var(--walnut)}
.btn-primary:hover{background:var(--cream)}
.btn-dark{background:var(--walnut);color:#fff}
.btn-dark:hover{background:var(--brown)}
.btn-outline{border-color:rgba(255,255,255,.45);color:#fff}
.btn-outline:hover{border-color:var(--wood);color:var(--wood)}

header{
  position:sticky;
  top:0;
  z-index:1000;
  background:rgba(245,240,232,.97);
  border-bottom:1px solid transparent;
  backdrop-filter:blur(8px);
}
.header-inner{
  min-height:78px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
}

.logo {
  display: flex;
  align-items: center;
  width: 145px;
  flex-shrink: 0;
}

.logo img {
  display: block;
  width: 300px;
  height: auto;
  max-height: 52px;
  object-fit: contain;
}
@media (max-width: 700px) {
  .logo,
  .logo img {
    width: 240px;
  }

  .logo img {
    max-height: 52px;
  }
}
.logo-mark{
  width:40px;height:40px;
  border:1.5px solid var(--wood);
  display:grid;
  place-items:center;
  position:relative;
}
.logo-mark:before{
  content:"";
  width:25px;height:15px;
  border-top:1.5px solid var(--wood);
  border-bottom:1.5px solid var(--wood);
  box-shadow:0 5px 0 -4px var(--wood);
}
.logo-mark:after{
  content:"";
  position:absolute;
  top:7px;
  width:0;height:0;
  border-left:9px solid transparent;
  border-right:9px solid transparent;
  border-bottom:6px solid var(--wood);
}
.logo-name{
  font-family:Fraunces,Georgia,serif;
  font-size:1.08rem;
  font-weight:600;
  line-height:1.1;
}
.logo-tag{
  display:block;
  margin-top:4px;
  color:var(--muted);
  font-size:.58rem;
  letter-spacing:.18em;
  text-transform:uppercase;
}
nav{
  display:flex;
  align-items:center;
  gap:32px;
}
nav a{
  position:relative;
  padding:8px 0;
  font-size:1.1rem;
  font-weight:600;
}
nav a:after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:0;height:1px;
  background:var(--wood);
  transition:.25s;
}
nav a:hover:after,nav a.active:after{width:100%}
.header-actions{display:flex;align-items:center;gap:10px}
.menu-btn{
  display:none;
  width:44px;height:44px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--walnut);
  cursor:pointer;
}
.menu-btn span,.menu-btn span:before,.menu-btn span:after{
  display:block;width:20px;height:2px;background:currentColor;
  position:absolute;left:11px;transition:.2s;
}
.menu-btn span:before,.menu-btn span:after{content:"";left:0}
.menu-btn span:before{top:-7px}
.menu-btn span:after{top:7px}
/*
.hero{
  min-height:calc(100vh - 78px);
  position:relative;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:var(--walnut);
  color:#fff;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,rgba(48,31,22,.88),rgba(48,31,22,.58),rgba(48,31,22,.68));
}
.hero-content{
  position:relative;
  z-index:2;
  padding:110px 0;
  max-width:850px;
}
.hero h1{
  margin-top:22px;
  color:#F7F2E7;
  font-size:clamp(3rem,6vw,5.8rem);
  letter-spacing:-.035em;
  font-size: 75px;
}
.hero p{
  max-width:690px;
  margin-top:28px;
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
}
.hero-buttons{display:flex;flex-wrap:wrap;gap:14px;margin-top:38px}
*/
.stats{
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.stats-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:38px 25px;
  border-right:1px solid var(--line);
}
.stat:last-child{border-right:0}
.stat strong{
  display:block;
  font-family:Fraunces,Georgia,serif;
  font-size:clamp(1.9rem,3vw,2.7rem);
  color:var(--walnut);
}
.stat span{
  display:block;
  margin-top:7px;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
}

.section{padding:100px 0}
.section.surface{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.two-col{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  align-items:center;
}
.section-title{margin-top:14px;font-size:35px;var(--walnut)}
.section-copy{margin-top:20px;max-width:680px}
.section-copy + .section-copy{margin-top:16px}

.about-image {
    height: 470px;
    border: 20px solid rgb(219 200 190 / 35%);
    object-fit: cover;
    border-radius: 12px;
}
.products-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:30px;
}
.text-link{
  color:var(--wood);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.text-link:hover{color:var(--walnut)}

.product-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  border:1px solid var(--line);
  background:var(--line);
}
.product-card{
  display:flex;
  flex-direction:column;
  background:var(--white);
  min-width:0;
}
.product-card img{
  height:210px;
  object-fit:cover;
  transition:transform .5s ease;
}
.product-image{overflow:hidden}
.product-card:hover img{transform:scale(1.04)}
.product-body{
  display:flex;
  flex:1;
  flex-direction:column;
  padding:26px;
}
.product-body h3{font-size:1.35rem;color:var(--walnut)}
.product-grade{
  margin-top:4px;
  color:var(--wood);
  font-size:.67rem;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.product-body p{
  margin-top:14px;
  font-size:.88rem;
}
.product-body .text-link{margin-top:auto;padding-top:20px}

.features{
  margin-top:50px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.feature{
  padding:32px;
  background:var(--white);
  transition:.25s;
}
.feature:hover{background:var(--surface)}
.feature-number{color:var(--wood);font-family:Fraunces,Georgia,serif}
.feature h3{margin-top:12px;font-size:1.35rem;color:var(--walnut)}
.feature p{margin-top:10px;font-size:.88rem}

.process{
  position:relative;
    background:var(--walnut);

  color:#fff;
  overflow:hidden;
}
.process:before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--footer-bg);
}
.process-inner{position:relative;z-index:1}
.process-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:70px;
}
.process h2{color:#fff}
.process-copy{margin-top:18px;color:rgba(255,255,255,.7)}
.process-image{
  margin-top:35px;
  height:auto;
  object-fit:cover;
  border: 10px solid #8d5733;
}
.process-list{
  border-left:1px solid rgba(255,255,255,.2);
  padding-left:32px;
  list-style:none;
}
.process-list li{
  position:relative;
  padding:0 0 30px;
}
.process-list li:before{
  content:"";
  position:absolute;
  left:-39px;
  top:4px;
  width:13px;height:13px;
  border:1px solid var(--wood);
  background:var(--walnut);
  box-shadow:inset 0 0 0 4px var(--walnut);
}
.process-list .num{color:var(--wood);font-size:.7rem;font-weight:700;letter-spacing:.15em}
.process-list h3{margin-top:5px;font-size:1.25rem;color:#fff}
.process-list p{margin-top:5px;color:rgba(255,255,255,.63);font-size:.86rem}

.app-grid{
  margin-top:48px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.app{
  position:relative;
  overflow:hidden;
  height:280px;
}
.app img{height:100%;object-fit:cover;transition:.5s}
.app:hover img{transform:scale(1.04)}
.app:after{
  content:"";
  position:absolute;inset:35% 0 0;
  background:linear-gradient(transparent,rgba(43,28,20,.92));
}
.app span{
  position:absolute;
  z-index:2;
  left:24px;bottom:20px;
  color:#fff;
  font-family:Fraunces,Georgia,serif;
  font-size:1.35rem;
}

.quality{
  position:relative;
  background:var(--walnut);
  color:#fff;
  overflow:hidden;
}
.quality-bg{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:.32;
}
.quality-content{position:relative;z-index:2;max-width:760px;padding:100px 0}
.quality h2{color:#fff;margin-top:15px}
.quality p{margin-top:22px;color:rgba(255,255,255,.75)}

.cta{background:var(--walnut);color:#fff}
.cta-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:75px 0;
}
.cta h2{color:#fff;max-width:720px;font-size:clamp(2rem,4vw,3rem)}
.cta p{margin-top:15px;color:rgba(255,255,255,.7)}

footer{
  background:var(--walnut);
  color:#fff;
  padding:75px 0 25px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:50px;
}

/* =========================================
   ASICS PLY — FOOTER
   ========================================= */

.site-footer {
  position: relative;
  overflow: hidden;
 /* background: #2d1e17;*/
   background: var(--footer-bg);
  color: #f7f1e8;
  padding: 78px 0 0;
}

/* -----------------------------------------
   SUBTLE BACKGROUND PATTERN
   ----------------------------------------- */

.footer-pattern {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .12;

  background-image:
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(25% - 1px),
      rgba(198,138,82,.7) 25%,
      transparent calc(25% + 1px)
    ),
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(50% - 1px),
      rgba(198,138,82,.7) 50%,
      transparent calc(50% + 1px)
    ),
    linear-gradient(
      90deg,
      transparent 0,
      transparent calc(75% - 1px),
      rgba(198,138,82,.7) 75%,
      transparent calc(75% + 1px)
    );
}


/* -----------------------------------------
   TOP ACCENT LINE
   ----------------------------------------- */

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 2px;

  background: linear-gradient(
    90deg,
    transparent,
    #c88a52 25%,
    #c88a52 75%,
    transparent
  );

  opacity: .65;
}


/* -----------------------------------------
   FOOTER CONTENT
   ----------------------------------------- */

.footer-content {
  position: relative;
  z-index: 2;

  display: grid;
  grid-template-columns: 1.7fr 1fr 1.15fr 1.15fr;

  gap: 70px;

  padding-bottom: 65px;
}


/* -----------------------------------------
   BRAND
   ----------------------------------------- */

.footer-brand {
  max-width: 450px;
}

.footer-logo {
  display: block;
  width: 245px;
  max-width: 100%;
  height: auto;
  margin-bottom: 18px;
}

.footer-tagline {
  color:var(--cta-btn);

  font-family: "Fraunces", Georgia, serif;

  font-size: 18px;
  line-height: 1.15;

  font-weight: 600;

  letter-spacing: .01em;

  margin-bottom: 20px;
}

.footer-brand p {
  max-width: 440px;

  margin: 0;

  color: rgba(247,241,232,.68);

  font-family: "Archivo", Arial, sans-serif;

  font-size: 16px;

  line-height: 1.75;
}


/* -----------------------------------------
   SOCIAL BUTTONS
   ----------------------------------------- */

.socials {
  display: flex;
  flex-wrap: wrap;

  gap: 8px;

  margin-top: 27px;
}

.socials a {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 36px;

  padding: 0 13px;

  border: 1px solid rgba(247,241,232,.18);

  color: rgba(247,241,232,.72);

  text-decoration: none;

  font-family: "Archivo", Arial, sans-serif;

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .13em;

  text-transform: uppercase;

  transition:
    background .25s ease,
    border-color .25s ease,
    color .25s ease;
}

.socials a:hover {
  background: #c88a52;

  border-color: #c88a52;

  color: #2d1e17;
}


/* -----------------------------------------
   FOOTER COLUMNS
   ----------------------------------------- */

.footer-column {
  position: relative;
}

.footer-label {
  display: block;

  margin-bottom: 8px;

  color: rgba(200,138,82,.7);

  font-family: "Archivo", Arial, sans-serif;

  font-size: 12px;

  font-weight: 600;

  letter-spacing: .2em;

  text-transform: uppercase;
}

.footer-column h3 {
  margin: 0 0 25px;

  color: #c88a52;

  font-family: "Archivo", Arial, sans-serif;

  font-size: 15px;

  font-weight: 600;

  letter-spacing: .2em;

  text-transform: uppercase;
}


/* -----------------------------------------
   LINKS
   ----------------------------------------- */

.footer-column ul {
  list-style: none;

  padding: 0;
  margin: 0;
}

.footer-column li {
  margin: 0 0 14px;
}

.footer-column li a {
  position: relative;

  color: rgba(247,241,232,.72);

  text-decoration: none;

  font-family: "Archivo", Arial, sans-serif;

  font-size: 16px;
  letter-spacing: 1px;

  transition:
    color .25s ease,
    padding-left .25s ease;
}

.footer-column li a:hover {
  color: #f2d58b;

  padding-left: 5px;
}


/* -----------------------------------------
   CONTACT
   ----------------------------------------- */

.footer-contact {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.contact-item-footer {
  display: flex;
  align-items: flex-start;

  gap: 13px;

  color: rgba(247,241,232,.78);

  text-decoration: none;

  font-family: "Archivo", Arial, sans-serif;

  font-size: 18px;

  line-height: 1.45;

  transition: color .25s ease;
}

.contact-item-footer:hover {
  color: #f2d58b;
}

.contact-icon {
  width: 45px;
  height: 45px;
  min-width: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #c88a52;
  background-color: var(--brown);
  font-size: 16px;

  line-height: 20px;
}

.contact-item-footer small {
  display: block;

  margin-bottom: 3px;

  color: rgba(247,241,232,.4);

  font-size: 14px;

  letter-spacing: .08em;

  text-transform: uppercase;
}


/* -----------------------------------------
   GET QUOTE BUTTON
   ----------------------------------------- */

.footer-quote {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;

  gap: 25px;

  margin-top: 30px;

  padding: 12px 16px;

  min-width: 145px;

  border: 1px solid rgba(200,138,82,.55);

  color: var(--cta-btn);

  text-decoration: none;

  font-family: "Archivo", Arial, sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .12em;

  text-transform: uppercase;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.footer-quote span {
  font-size: 17px;

  line-height: 1;

  transition: transform .25s ease;
}

.footer-quote:hover {
  background: #c88a52;

  border-color: #c88a52;

  color: #2d1e17;
}

.footer-quote:hover span {
  transform: translateX(4px);
}


/* -----------------------------------------
   BOTTOM BAR
   ----------------------------------------- */

.footer-bottom {
  position: relative;
  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  padding: 22px 0;

  border-top: 1px solid rgba(247,241,232,.13);

  color: rgba(255, 255, 255, 0.42);

  font-family: "Archivo", Arial, sans-serif;

  font-size: 14px;
}

.footer-bottom div {
  display: flex;

  align-items: center;

  gap: 8px;
}

.footer-bottom a {
  color: rgba(247,241,232,.68);

  text-decoration: none;

  transition: color .25s ease;
}

.footer-bottom a:hover {
  color: #c88a52;
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 1050px) {

  .footer-content {
    grid-template-columns: 1.5fr 1fr 1fr;

    gap: 50px 35px;
  }

  .footer-brand {
    grid-column: 1 / -1;

    max-width: 650px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .site-footer {
    padding-top: 55px;
  }

  .footer-content {
    grid-template-columns: 1fr;

    gap: 38px;

    padding-bottom: 45px;
  }

  .footer-brand {
    grid-column: auto;

    max-width: 100%;
  }

  .footer-logo {
    width: 215px;
  }

  .footer-tagline {
    font-size: 17px;
  }

  .footer-brand p {
    font-size: 13px;
  }

  .footer-column h3 {
    margin-bottom: 18px;
  }

  .footer-bottom {
    flex-direction: column;

    align-items: flex-start;

    gap: 10px;

    padding: 20px 0;
  }

}
@media(max-width:1050px){
  nav{gap:20px}
  .product-grid{grid-template-columns:repeat(2,1fr)}
  .features{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:800px){
  .container{width:min(var(--max),calc(100% - 30px))}
  .header-inner{min-height:70px}
  .header-quote{display:none}
  nav{
    position:absolute;
    left:0;right:0;top:70px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:12px 15px 18px;
    background:var(--cream);
    border-bottom:1px solid var(--line);
    box-shadow:0 12px 25px rgba(0,0,0,.08);
  }
  nav.open{display:flex}
  nav a{padding:13px 5px}
  .menu-btn{display:block;position:relative}
  .hero{min-height:700px}
  .hero-content{padding:90px 0;}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat{border-bottom:1px solid var(--line)}
  .stat:nth-child(2){border-right:0}
  .two-col,.process-grid{grid-template-columns:1fr;gap:40px}
  .about-image{height:350px}
  .products-head{display:block}
  .products-head .text-link{display:inline-block;margin-top:20px}
  .app-grid{grid-template-columns:repeat(2,1fr)}
  .cta-inner{align-items:flex-start;flex-direction:column}
}

@media(max-width:560px){
  .section{padding:70px 0}
  .hero h1{font-size:clamp(2.65rem,12vw,4rem)}
  .hero p{font-size:.96rem}
  .hero-buttons{flex-direction:column;align-items:stretch}
  .btn{width:100%}
  .stats-grid{grid-template-columns:1fr}
  .stat{border-right:0}
  .product-grid,.features,.app-grid,.footer-grid{grid-template-columns:1fr}
  .product-card img{height:230px}
  .process-image{height:230px}
  .app{height:250px}
  .footer-bottom{flex-direction:column}
  .footer-bottom div{flex-wrap:wrap}
}


/* =========================================
   ABOUT HERO
   ========================================= */

.about-hero {
  position: relative;
  background: var(--walnut);
  color: #fff;
  overflow: hidden;
  min-height: 500px;
  display: flex;
  align-items: center;
}

.about-hero-content {
  max-width: 850px;
  padding: 95px 0;
}

.about-hero .eyebrow {
  color: var(--wood);
}

.about-hero h1 {
  margin-top: 20px;
  color: #f7f2e7;
  font-size: clamp(2rem, 6vw, 3.2rem);
  letter-spacing: -.035em;
}

.about-hero h1 span {
  color: var(--wood);
}

.about-hero p {
  max-width: 680px;
  margin-top: 25px;
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  line-height: 1.75;
}


/* Tablet */
@media (max-width: 800px) {
  .about-hero {
    min-height: 460px;
  }

  .about-hero-content {
    padding: 80px 0;
  }
}


/* Mobile */
@media (max-width: 560px) {
  .about-hero {
    min-height: 420px;
  }

  .about-hero-content {
    padding: 70px 0;
  }

  .about-hero h1 {
    font-size: clamp(1.6rem, 12vw, 3rem);
  }

  .about-hero p {
    font-size: .94rem;
    line-height: 1.7;
  }
}

.about-hero-image { position: relative; min-height: 560px; background: var(--walnut); overflow: hidden; }
 .about-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
 .about-hero-overlay { position: absolute; inset: 0; background: linear-gradient( 90deg, rgba(48,31,22,.92), rgba(48,31,22,.68), rgba(48,31,22,.48) ); }
  .about-hero-image .container { position: relative; z-index: 2; }
 .about-hero-image .about-hero-content { min-height: 560px; display: flex; flex-direction: column; justify-content: center; }

 .about-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 36px;
  margin-top: 10px;
  padding-top: 30px;
  /* border-top: 1px solid var(--line); */
}

.about-feature {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.feature-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--walnut);
  color: var(--white);
  font-family: "Archivo", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
}

.about-feature h3 {
  margin: 2px 0 6px;
  font-family: "Fraunces", serif;
  font-size: 18px;
  font-weight: 600;
  color: var(--walnut);
}

.about-feature p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

@media (max-width: 700px) {
  .about-features {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* =========================================
   MISSION & VISION
   ========================================= */

.mission-vision {
  padding: 100px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.mission-vision-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.mission-vision-card {
  position: relative;
  background: var(--white);
  padding: 55px 50px 60px;
  overflow: hidden;
}

.mission-vision-card::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -55px;
  width: 180px;
  height: 180px;
  border: 1px solid var(--line);
  border-radius: 50%;
  opacity: .5;
}

.mv-number {
  margin-bottom: 35px;
  color: var(--wood);
  font-family: "Fraunces", Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
}

.mission-vision-card .eyebrow {
  margin-bottom: 14px;
}

.mission-vision-card h2 {
  max-width: 500px;
  margin: 0;
  color: var(--walnut);
  font-size: clamp(2rem, 3vw, 2.7rem);
}

.mission-vision-card p {
  max-width: 560px;
  margin-top: 22px;
  font-size: .94rem;
  line-height: 1.8;
}

/* Vision slightly darker */
.vision-card {
  background: var(--walnut);
}

.vision-card .eyebrow {
  color: var(--wood);
}

.vision-card h2 {
  color: var(--cream);
}

.vision-card p {
  color: rgba(255,255,255,.68);
}

.vision-card .mv-number {
  color: var(--wood);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 800px) {

  .mission-vision {
    padding: 75px 0;
  }

  .mission-vision-grid {
    grid-template-columns: 1fr;
  }

  .mission-vision-card {
    padding: 45px 35px 50px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 560px) {

  .mission-vision {
    padding: 65px 0;
  }

  .mission-vision-card {
    padding: 38px 25px 45px;
  }

  .mv-number {
    margin-bottom: 28px;
  }

  .mission-vision-card h2 {
    font-size: 2rem;
  }

  .mission-vision-card p {
    font-size: .9rem;
    line-height: 1.7;
  }

}
.cta-section {
  padding: 55px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 42px 50px;
  background: var(--walnut);
}

.cta-text {
  max-width: 750px;
}

.cta-text .eyebrow {
  color: var(--wood);
  margin-bottom: 8px;
}

.cta-text h2 {
  margin: 0;
  color: var(--cream);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1.15;
}

.cta-text p {
  margin: 10px 0 0;
  color: rgba(255,255,255,.68);
  font-size: 15px;
  line-height: 1.6;
}

.cta-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  background: var(--wood);
  color: #fff;
  text-decoration: none;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: .25s ease;
  border: 1px solid var(--wood);
  border-radius: 3px;
 }

.cta-button span {
  font-size: 19px;
  transition: transform .25s ease;
}

.cta-button:hover {
  background: #8f5934;
}

.cta-button:hover span {
  transform: translateX(4px);
}

@media (max-width: 700px) {
  .cta-section {
    padding: 40px 0;
  }

  .cta-inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 35px 28px;
    gap: 25px;
  }

  .cta-text h2 {
    font-size: 2rem;
  }
}

/* =========================================
   CONTACT PAGE
   ========================================= */

.contact-section {
  background: var(--cream);
  padding-top: 90px;
  padding-bottom: 100px;
}

.contact-wrap {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 90px;
  align-items: start;
}


/* -----------------------------------------
   CONTACT INFORMATION
   ----------------------------------------- */

.contact-info {
  padding-top: 10px;
}

.contact-title {
  margin-top: 16px;
  max-width: 600px;

  color: var(--walnut);

  font-family: "Fraunces", Georgia, serif;

  font-size: 48px;
  line-height: 1.08;

  font-weight: 600;
}

.contact-intro {
  max-width: 500px;

  margin-top: 24px;

  color: var(--muted);

  font-size: 16px;
  line-height: 1.75;
}


/* -----------------------------------------
   CONTACT CARDS
   ----------------------------------------- */

.contact-details {
  display: flex;
  flex-direction: column;

  gap: 14px;

  margin-top: 42px;

  max-width: 540px;
}

.contact-card {
  position: relative;

  display: flex;
  align-items: center;

  gap: 18px;

  padding: 22px 20px;

  background: var(--white);

  border: 1px solid var(--line);

  color: var(--walnut);

  text-decoration: none;

  transition:
    transform .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.contact-card:hover {
  transform: translateY(-3px);

  border-color: var(--wood);

  box-shadow: 0 12px 30px rgba(59,39,29,.08);
}

.contact-card-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--walnut);

  color: #f2d58b;

  font-size: 18px;
}

.contact-card span {
  display: block;

  margin-bottom: 5px;

  color: var(--muted);

  font-size: 10px;

  font-weight: 600;

  letter-spacing: .16em;

  text-transform: uppercase;
}

.contact-card strong {
  display: block;

  color: var(--walnut);

  font-family: "Archivo", Arial, sans-serif;

  font-size: 16px;

  font-weight: 600;
}

.contact-arrow {
  margin-left: auto;

  color: var(--wood);

  font-size: 20px;

  transition: transform .25s ease;
}

.contact-card:hover .contact-arrow {
  transform: translateX(5px);
}


/* -----------------------------------------
   FORM BOX
   ----------------------------------------- */

.contact-form-box {
  padding: 42px;

  background: var(--white);

  border: 1px solid var(--line);

  box-shadow: 0 18px 50px rgba(59,39,29,.07);
}

.contact-form-heading {
  margin-bottom: 30px;

  padding-bottom: 22px;

  border-bottom: 1px solid var(--line);
}

.contact-form-heading span {
  display: block;

  color: var(--walnut);

  font-family: "Fraunces", Georgia, serif;

  font-size: 28px;

  font-weight: 600;
}

.contact-form-heading p {
  margin: 8px 0 0;

  color: var(--muted);

  font-size: 14px;

  line-height: 1.6;
}


/* -----------------------------------------
   FORM
   ----------------------------------------- */

.contact-form {
  display: flex;
  flex-direction: column;

  gap: 20px;
}

.form-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;

  gap: 8px;
}

.form-group label {
  color: var(--walnut);

  font-family: "Archivo", Arial, sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .1em;

  text-transform: uppercase;
}

.form-group input,
.form-group textarea {
  width: 100%;

  box-sizing: border-box;

  padding: 14px 15px;

  border: 1px solid var(--line);

  background: #fffdf9;

  color: var(--text);

  font-family: "Archivo", Arial, sans-serif;

  font-size: 14px;

  outline: none;

  border-radius: 0;

  transition:
    border-color .25s ease,
    box-shadow .25s ease;
}

.form-group textarea {
  resize: vertical;

  min-height: 130px;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: #a49b92;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--wood);

  box-shadow: 0 0 0 3px rgba(200,138,82,.10);
}


/* -----------------------------------------
   SUBMIT BUTTON
   ----------------------------------------- */

.contact-submit {
  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 25px;

  align-self: flex-start;

  margin-top: 5px;

  padding: 15px 24px;

  border: 1px solid var(--walnut);

  background: var(--walnut);

  color: #fffdf9;

  font-family: "Archivo", Arial, sans-serif;

  font-size: 11px;

  font-weight: 600;

  letter-spacing: .15em;

  text-transform: uppercase;

  cursor: pointer;

  transition:
    background .25s ease,
    color .25s ease,
    border-color .25s ease;
}

.contact-submit span {
  font-size: 18px;

  line-height: 1;

  transition: transform .25s ease;
}

.contact-submit:hover {
  background: var(--wood);

  border-color: var(--wood);

  color: var(--walnut);
}

.contact-submit:hover span {
  transform: translateX(5px);
}


/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

  .contact-wrap {
    grid-template-columns: 1fr;

    gap: 55px;
  }

  .contact-info {
    max-width: 700px;
  }

  .contact-title {
    font-size: 42px;
  }

  .contact-details {
    max-width: 650px;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

  .contact-section {
    padding-top: 60px;
    padding-bottom: 65px;
  }

  .contact-wrap {
    gap: 40px;
  }

  .contact-title {
    font-size: 34px;
  }

  .contact-intro {
    font-size: 14px;
  }

  .contact-details {
    margin-top: 30px;
  }

  .contact-card {
    padding: 17px 15px;

    gap: 12px;
  }

  .contact-card-icon {
    width: 42px;
    height: 42px;
    min-width: 42px;

    font-size: 16px;
  }

  .contact-card strong {
    font-size: 13px;
  }

  .contact-arrow {
    font-size: 17px;
  }

  .contact-form-box {
    padding: 25px 20px;
  }

  .contact-form-heading span {
    font-size: 24px;
  }

  .form-row {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .contact-submit {
    width: 100%;
  }

}
 
.products-section {
  padding: 95px 0 110px;
  background: var(--surface);
}

.products-heading {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 70px;
  align-items: end;
  margin-bottom: 55px;
}

.products-heading .eyebrow {
  margin-bottom: 14px;
}

.products-heading h1 {
  max-width: 700px;
  margin: 0;
  color: var(--walnut);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2.6rem, 5vw, 2.8rem);
  line-height: 1.05;
  font-weight: 600;
}

.products-heading  p {
  max-width: 100%;
  margin: 0 0 5px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 20px;
  line-height: 1.8;
}

.products-heading  a {
  max-width: 100%;
  margin: 0 0 5px;
  padding-top: 10px;
  color: var(--muted);
  font-size: 20px;
  text-align: right;;
}


/* PRODUCT GRID */

.products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}


/* CARD */

.product-card {
  background: var(--white);
  border: 1px solid var(--line);
  overflow: hidden;
  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.product-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(59,39,29,.10);
}


/* IMAGE */

.product-image {
  height: 285px;
  position: relative;
  overflow: hidden;
  background: #ddd5cb;
}

.product-image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .5s ease;
}

.product-card:hover .product-image img {
  transform: scale(1.05);
}

.product-number {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--walnut);
  color: var(--cream);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
}


/* CONTENT */

.product-content {
  padding: 28px 28px 30px;
}

.product-type {
  margin-bottom: 9px;
  color: #a66a3f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .12em;
}

.product-content h2 {
  margin: 0;
  color: var(--walnut);
  font-family: "Fraunces", Georgia, serif;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 600;
}

.product-content p {
  min-height: 68px;
  margin: 13px 0 22px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}


/* LEARN MORE */

.product-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid #a66a3f;
  color: var(--walnut);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: color .2s ease;
}

.product-link span {
  font-size: 18px;
  line-height: 1;
  transition: transform .25s ease;
}

.product-link:hover {
  color: #a66a3f;
}

.product-link:hover span {
  transform: translateX(5px);
}


/* TABLET */

@media (max-width: 1000px) {

  .products-heading {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .products-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}


/* MOBILE */

@media (max-width: 650px) {

  .products-section {
    padding: 65px 0 75px;
  }

  .products-heading {
    margin-bottom: 38px;
  }

  .products-heading h1 {
    font-size: 2.7rem;
  }

  .products-heading > p {
    font-size: 14px;
  }

  .products-grid {
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .product-image {
    height: 250px;
  }

  .product-content {
    padding: 25px 24px 28px;
  }

}

.btn-outline-dark {
  margin: 20px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  min-height: 52px;
  padding: 0 27px;

  border: 1px solid var(--walnut);
  background: transparent;
  color: var(--walnut);

  font-family: "Archivo", Arial, sans-serif;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;

  text-decoration: none;
  transition: all .25s ease;
  cursor: pointer;
}

.btn-outline-dark:hover {
  background: var(--walnut);
  color: var(--cream);
}

 /* =========================================
    PRODUCT DETAIL HERO
    ========================================= */

.product-detail-hero {
  padding: 90px 0;
  background: var(--white);
}

.product-detail-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 75px;
  align-items: center;
}

.product-detail-image {
  height: auto;
  overflow: hidden;
  background: var(--surface);
      border: 20px solid var(--surface);
      object-fit: cover;
    border-radius: 12px;

}



.product-detail-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-detail-content {
  max-width: 600px;
}

.product-detail-content .eyebrow {
  margin-bottom: 16px;
  font-size: 16px;
}

.product-detail-content h1 {
  margin: 0;
  color: var(--walnut);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(2rem, 5vw, 2.7rem);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -.035em;
}

.product-detail-content p {
  margin-top: 23px;
  color: var(--muted);
  font-size: 22px;
  line-height: 1.8;
}

.product-detail-content p + p {
  margin-top: 14px;
}


/* =========================================
   PRODUCT INFORMATION
   ========================================= */

.product-information {
  padding: 90px 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.product-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

.product-info-card {
  padding: 48px 45px;
  background: var(--white);
}

.product-info-heading {
  margin-bottom: 32px;
}

.product-info-heading .eyebrow {
  margin-bottom: 10px;
}

.product-info-heading h2 {
  margin: 0;
  color: var(--walnut);
  font-family: "Fraunces", Georgia, serif;
  font-size: 2.5rem;
  line-height: 1.1;
}


/* =========================================
   KEY DETAILS
   ========================================= */

.key-details-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.key-details-list li {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
}

.detail-arrow {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 27px;
  height: 27px;
  min-width: 27px;

  border: 1px solid #a66a3f;
  color: #a66a3f;

  font-size: 15px;
  line-height: 1;

  transition: .25s ease;
}

.key-details-list li:hover .detail-arrow {
  background: #a66a3f;
  color: #fff;
  transform: translateX(3px);
}


/* =========================================
   APPLICATION CAPSULES
   ========================================= */
.applications-card {
  background: var(--walnut);
}

.applications-card .product-info-heading h2 {
  color: var(--cream);
}

.applications-card .eyebrow {
  color: var(--wood);
}

.application-capsules {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 28px;
}

.application-capsules span {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-top: 1px solid rgba(247,242,232,.18);
  color: rgba(247,242,232,.82);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: .03em;
  transition: .25s ease;
}

.application-capsules span:last-child {
  border-bottom: 1px solid rgba(247,242,232,.18);
}

.application-capsules span::before {
  content: "→";
  margin-right: 12px;
  color: #a66a3f;
  transition: transform .25s ease;
}

.application-capsules span:hover {
  padding-left: 24px;
  color: #a66a3f;
}

.application-capsules span:hover::before {
  transform: translateX(4px);
}

/* =========================================
   TECHNICAL SPECIFICATIONS
========================================= */

.technical-specifications {
  padding: 100px 0;
  background: var(--white);
}

.technical-heading {
  max-width: 720px;
  margin-bottom: 45px;
}

.technical-heading .eyebrow {
  margin-bottom: 12px;
}

.technical-heading h2 {
  margin: 0;
  color: var(--walnut);
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(1.3rem, 4vw, 2.3rem);
  line-height: 1.1;
}

.technical-heading p {
  margin-top: 18px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.8;
}


/* =========================================
   SPECIFICATION IMAGE
========================================= */

.spec-image-wrap {
  width: 100%;
  padding: 28px;

  background: #fff;
  border: 0px solid var(--line);
  border-radius: 16px;

  box-shadow: 0 8px 30px rgba(59, 39, 29, 0.06);
}

.spec-image-button {
  position: relative;

  display: block;
  width: 100%;
  padding: 0;

  border: 0;
  background: transparent;

  cursor: zoom-in;
  text-align: left;
}

.spec-image {
  display: block;
  width: 100%;
  height: auto;

  border: 0px solid #e4ddd5;
  border-radius: 10px;
}


/* =========================================
   ZOOM LABEL
========================================= */

.spec-zoom {
  position: absolute;
  right: 18px;
  bottom: 18px;

  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 9px 14px;

  background: rgba(59, 39, 29, 0.92);
  color: #fff;

  border-radius: 4px;

  font-family: Archivo, Arial, sans-serif;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;

  opacity: 0;
  transform: translateY(5px);

  transition:
    opacity .25s ease,
    transform .25s ease;
}

.spec-zoom span {
  font-size: 1rem;
  line-height: 1;
}

.spec-image-button:hover .spec-zoom {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================
   LIGHTBOX
========================================= */

.spec-lightbox {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: rgba(25, 17, 13, 0.92);

  opacity: 0;
  visibility: hidden;

  transition:
    opacity .25s ease,
    visibility .25s ease;
}

.spec-lightbox.active {
  opacity: 1;
  visibility: visible;
}


/* Image area */

.spec-lightbox-content {
  position: relative;

  width: min(1400px, 96vw);
  max-height: 92vh;

  overflow: auto;

  background: #fff;
  border-radius: 8px;

  box-shadow: 0 20px 80px rgba(0,0,0,.35);

  cursor: zoom-in;
}


/* Enlarged image */

 

.spec-lightbox-image {
  width: 100%;
  min-width: 0;
  max-width: 100%;
}

/* =========================================
   CLOSE BUTTON
========================================= */

.spec-close {
  position: fixed;

  top: 22px;
  right: 25px;

  z-index: 10001;

  width: 46px;
  height: 46px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(255,255,255,.4);
  border-radius: 50%;

  background: rgba(59,39,29,.95);
  color: #fff;

  font-size: 30px;
  font-weight: 300;
  line-height: 1;

  cursor: pointer;

  transition:
    background .2s ease,
    transform .2s ease;
}

.spec-close:hover {
  background: var(--wood);
  color: var(--walnut);
  transform: rotate(90deg);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

  .technical-specifications {
    padding: 65px 0;
  }

  .technical-heading {
    margin-bottom: 30px;
  }

  .technical-heading p {
    font-size: 14px;
  }

  .spec-image-wrap {
    padding: 10px;
    border-radius: 10px;
  }

  .spec-image {
    border-radius: 6px;
  }

  /* Always show zoom hint on mobile */
  .spec-zoom {
    opacity: 1;
    transform: none;

    right: 10px;
    bottom: 10px;

    padding: 7px 10px;
    font-size: .58rem;
  }

  .spec-lightbox {
    padding: 12px;
    align-items: flex-start;
  }

  .spec-lightbox-content {
    width: 100%;
    max-height: calc(100vh - 70px);

    margin-top: 45px;

    overflow: auto;
    -webkit-overflow-scrolling: touch;
  }

  .spec-lightbox-image {
    width: 100%;
    min-width: 900px;
    max-width: none;
  }

  .spec-close {
    top: 10px;
    right: 12px;

    width: 40px;
    height: 40px;

    font-size: 25px;
  }

}
 
/* =========================================
   TABLET
   ========================================= */

@media (max-width: 900px) {

  .product-detail-hero {
    padding: 70px 0;
  }

  .product-detail-hero-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .product-detail-image {
    height: 450px;
  }

  .product-detail-content {
    max-width: 750px;
  }

  .product-info-grid {
    grid-template-columns: 1fr;
  }

  .technical-specifications {
    padding: 75px 0;
  }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

  .product-detail-hero {
    padding: 55px 0 65px;
  }

  .product-detail-hero-grid {
    gap: 35px;
  }

  .product-detail-image {
    height: 330px;
  }

  .product-detail-content h1 {
    font-size: 2.7rem;
  }

  .product-detail-content p {
    font-size: 14px;
  }

  .product-information {
    padding: 60px 0;
  }

  .product-info-card {
    padding: 35px 25px;
  }

  .product-info-heading h2 {
    font-size: 2.2rem;
  }

  .key-details-list li {
    font-size: 13px;
  }

  .application-capsules {
    gap: 9px;
  }

  .application-capsules span {
    min-height: 40px;
    padding: 0 14px;
    font-size: 11px;
  }

  .technical-specifications {
    padding: 65px 0;
  }

  .technical-heading {
    margin-bottom: 30px;
  }

}

.product-spec-table {
  margin-top: 28px;
  width: 100%;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.spec-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  border-bottom: 1px solid var(--line);
    border-right: 1px solid var(--line);
    

}

.spec-label {
  display: flex;
  align-items: center;
  padding: 18px 16px;
  background: var(--walnut);
  color: var(--cream);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
 }

.spec-values {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  background: var(--white);
    font-size: 15px;

}

.spec-values span {
  padding: 18px 16px;
  color: var(--text);
  font-size: 18px;
  line-height: 1;
 }


/* TABLET */

@media (max-width: 700px) {

  .spec-row {
    grid-template-columns: 95px 1fr;
  }

  .spec-label {
    padding: 15px 12px;
  }

  .spec-values span {
    padding: 15px 12px;
  }

}


/* MOBILE */

@media (max-width: 480px) {

  .product-spec-table {
    margin-top: 24px;
  }

  .spec-row {
    grid-template-columns: 1fr;
  }

  .spec-label {
    padding: 11px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .spec-values {
    width: 100%;
  }

  .spec-values span {
    padding: 13px 12px;
    font-size: 12px;
  }

}

.product-highlights-dark {
  padding: 60px 0 70px;
   overflow: hidden;
 /* border: 1px solid #2d1e17; */

     background: var(--white);

}

.product-highlights-dark .highlight-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
  align-items: start;
}

.product-highlights-dark .highlight-item {
  text-align: center;
  min-width: 0;
}

/* ICON BACKGROUND */

.product-highlights-dark .highlight-icon {
  width: 126px;
  height: 126px;
  margin: 0 auto 24px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #f7f2e8;
  border-radius: 28px;

  box-shadow: 0 12px 28px rgba(50, 30, 20, .14);

  transition: transform .3s ease,
              box-shadow .3s ease;
}

.product-highlights-dark .highlight-icon img {
  width: 68px;
  height: 68px;
  object-fit: contain;
}

.product-highlights-dark .highlight-item h3 {
  margin: 0;

  color: #0b0802;

  font-family: "Archivo", Arial, sans-serif;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
}


/* HOVER */

.product-highlights-dark .highlight-item:hover .highlight-icon {
  transform: translateY(-6px);
  box-shadow: 0 18px 35px rgba(50, 30, 20, .20);
}


/* TABLET */

@media (max-width: 1100px) {

  .product-highlights-dark .highlight-grid {
    grid-template-columns: repeat(3, 1fr);
    row-gap: 45px;
  }

}


/* MOBILE */

@media (max-width: 600px) {

  .product-highlights-dark {
    padding: 50px 0 60px;
  }

  .product-highlights-dark .highlight-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 38px 15px;
  }

  .product-highlights-dark .highlight-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 17px;
    border-radius: 24px;
  }

  .product-highlights-dark .highlight-icon img {
    width: 55px;
    height: 55px;
  }

  .product-highlights-dark .highlight-item h3 {
    font-size: 14px;
  }

}

/* =====================================================
   MOBILE MENU - FINAL VERSION
   ===================================================== */

.menu-close,
.mobile-quote {
  display: none;
}


/* -----------------------------------------------------
   MOBILE
   ----------------------------------------------------- */

@media (max-width: 800px) {

  /* Header */

  .header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .header-quote {
    display: none;
  }


  /* =========================================
     HAMBURGER BUTTON
     ========================================= */

  .menu-btn {
    position: relative;

    width: 44px;
    height: 44px;

    display: flex !important;
    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent;
    border: 0px solid var(--line);

    color: var(--walnut);

    cursor: pointer;

    z-index: 10001;
  }

  .menu-btn span,
  .menu-btn span::before,
  .menu-btn span::after {
    position: absolute;

    display: block;

    width: 20px;
    height: 2px;

    background: currentColor;

    transition: .25s ease;
  }

  .menu-btn span::before,
  .menu-btn span::after {
    content: "";
    left: 0;
  }

  .menu-btn span {
    position: relative;
  }

  .menu-btn span::before {
    top: -7px;
  }

  .menu-btn span::after {
    top: 7px;
  }


  /* =========================================
     MOBILE NAV PANEL
     ========================================= */

  #mainNav {

    position: fixed;

    top: 0;
    right: 0;

    width: min(380px, 88vw);
    height: auto;

    padding: 90px 30px 35px;

    display: flex !important;
    flex-direction: column;
    align-items: stretch;

    gap: 0;

    background: var(--cream);

    border: 0;

    box-shadow: -15px 0 40px rgba(59,39,29,.15);

    z-index: 10000;

    /* IMPORTANT:
       menu starts CLOSED */
    transform: translateX(100%);

    visibility: hidden;

    transition:
      transform .35s ease,
      visibility 0s linear .35s;
  }


  /* OPEN */

  #mainNav.open {

    transform: translateX(0);

    visibility: visible;

    transition:
      transform .35s ease,
      visibility 0s linear 0s;
  }


  /* =========================================
     MENU LINKS
     ========================================= */

  #mainNav > a:not(.mobile-quote) {

    display: block;

    width: 100%;

    padding: 17px 5px;

    border-bottom: 1px solid var(--line);

    color: var(--walnut);

    font-family: "Archivo", Arial, sans-serif;

    font-size: 16px;
    font-weight: 500;

    text-decoration: none;

    transition:
      color .2s ease,
      padding-left .2s ease;
  }

  #mainNav > a:not(.mobile-quote):hover {

    color: #a66a3f;

    padding-left: 12px;
  }


  /* =========================================
     CLOSE BUTTON
     ========================================= */

  .menu-close {

    position: absolute;

    top: 22px;
    right: 25px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0;

    background: transparent;

    border: 1px solid var(--line);

    color: var(--walnut);

    font-family: Arial, sans-serif;

    font-size: 30px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;

    z-index: 10002;

    transition:
      background .25s ease,
      color .25s ease;
  }

  .menu-close:hover {

    background: var(--walnut);

    color: var(--cream);
  }


  /* =========================================
     GET A QUOTE
     ========================================= */

  .mobile-quote {

    display: flex !important;

    align-items: center;
    justify-content: center;

    gap: 10px;

    width: 100%;

    margin-top: 28px;

    padding: 15px 20px;

    background: #a66a3f;

    border: 1px solid #a66a3f !important;

    color: #fff !important;

    font-family: "Archivo", Arial, sans-serif;

    font-size: 13px !important;
    font-weight: 700 !important;

    letter-spacing: .12em;

    text-transform: uppercase;

    transition: .25s ease;
  }

  .mobile-quote span {

    font-size: 18px;

    transition: transform .25s ease;
  }

  .mobile-quote:hover {

    background: var(--walnut);

    border-color: var(--walnut) !important;
  }

  .mobile-quote:hover span {

    transform: translateX(4px);
  }

}


/* =====================================================
   SMALL MOBILE
   ===================================================== */

@media (max-width: 560px) {

  #mainNav {

    width: 88vw;

    padding: 42px 24px 30px; /* for logo top padding in mobile device*/
  }

  .menu-close {

    top: 18px;
    right: 20px;
  }

}

/* slider home */

/* =========================
   FULL WIDTH HERO SLIDER
========================= */

.hero-slider {
  position: relative;
  min-height: calc(100vh - 78px);
  overflow: hidden;
  background: var(--walnut);
  color: #fff;
}


/* =========================
   SLIDES
========================= */

.hero-slide {
  position: absolute;
  inset: 0;

  opacity: 0;
  visibility: hidden;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;
}

.hero-slide.active {
  position: relative;
  opacity: 1;
  visibility: visible;
  z-index: 2;
}


/* =========================
   BACKGROUND IMAGE
========================= */

.hero-bg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  z-index: 0;

  transform: scale(1.01);
}

.hero-slide.active .hero-bg {
  animation: heroZoom 6s ease forwards;
}

@keyframes heroZoom {
  from {
    transform: scale(1.01);
  }

  to {
    transform: scale(1.06);
  }
}


/* =========================
   DARK GRADIENT OVERLAY
========================= */
.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(45, 28, 20, 0.72) 100%,
      rgba(4, 2, 1, 0.48) 40%,
      rgba(45, 28, 20, 0.22) 75%,
      rgba(45, 28, 20, 0.12) 100%
    );
}


/* =========================
   CONTENT
========================= */

.hero-slide .container {
  position: relative;
  z-index: 3;

  min-height: calc(100vh - 78px);

  display: flex;
  align-items: center;
}

.hero-content {
  max-width: 760px;
  padding-top: 30px;
  padding-bottom: 80px;
}


/* =========================
   EYEBROW
========================= */

.hero-content .eyebrow {
  color: #d9a06c;

  font-size: 0.78rem;
  font-weight: 700;

  text-transform: uppercase;
  letter-spacing: 0.14em;

  margin-bottom: 20px;
}


/* =========================
   HEADING
========================= */

.hero-content h1 {
  margin: 0;

  color: #fff;

  font-family: Fraunces, Georgia, serif;

  font-size: clamp(3.2rem, 6vw, 6.2rem);

  line-height: 0.98;

  letter-spacing: -0.035em;

  max-width: 850px;
}


/* =========================
   DESCRIPTION
========================= */

.hero-content p {
  max-width: 650px;

  margin: 28px 0 0;

  color: rgba(255, 255, 255, 0.82);

  font-size: 1.05rem;

  line-height: 1.7;
}


/* =========================
   BUTTONS
========================= */

.hero-buttons {
  display: flex;
  flex-wrap: wrap;

  gap: 14px;

  margin-top: 36px;
}


/* Primary */

.hero-buttons .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding: 0 25px;

  background: #a66a3f;
  color: #fff;

  border: 1px solid #a66a3f;

  text-decoration: none;

  font-weight: 600;

  transition: all 0.25s ease;
}

.hero-buttons .btn-primary:hover {
  background: #8d5733;
  border-color: #8d5733;
}


/* Outline */

.hero-buttons .btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 52px;

  padding: 0 25px;

  background: transparent;
  color: #fff;

  border: 1px solid rgba(255, 255, 255, 0.65);

  text-decoration: none;

  font-weight: 600;

  transition: all 0.25s ease;
}

.hero-buttons .btn-outline:hover {
  background: #fff;
  color: var(--walnut);

  border-color: #fff;
}


/* =========================
   ARROWS
========================= */

.hero-arrow {
  position: absolute;

  top: 50%;
  transform: translateY(-50%);

  z-index: 10;

  width: 48px;
  height: 48px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: rgba(0, 0, 0, 0.18);

  border: 1px solid rgba(255, 255, 255, 0.35);

  color: #fff;

  cursor: pointer;

  font-size: 20px;

  transition: all 0.25s ease;
}

.hero-arrow:hover {
  background: #a66a3f;
  border-color: #a66a3f;
}

.hero-prev {
  left: 25px;
}

.hero-next {
  right: 25px;
}


/* =========================
   DOTS
========================= */

.hero-dots {
  position: absolute;

  z-index: 10;

  left: 50%;
  bottom: 30px;

  transform: translateX(-50%);

  display: flex;
  gap: 9px;
}

.hero-dot {
  width: 9px;
  height: 9px;

  padding: 0;

  border: 1px solid rgba(255, 255, 255, 0.75);

  background: transparent;

  border-radius: 50%;

  cursor: pointer;

  transition: all 0.3s ease;
}

.hero-dot.active {
  width: 28px;

  border-radius: 20px;

  background: #a66a3f;

  border-color: #a66a3f;
}


/* =========================
   TABLET
========================= */

@media (max-width: 1000px) {

  .hero-content {
    max-width: 680px;
  }

  .hero-content h1 {
    font-size: clamp(2.8rem, 7vw, 5rem);
  }

  .hero-content p {
    font-size: 0.98rem;
  }

}


/* =========================
   MOBILE
========================= */

@media (max-width: 700px) {

  .hero-slider {
    min-height: 720px;
  }

  .hero-slide {
    min-height: 720px;
  }

  .hero-slide .container {
    min-height: 720px;

    align-items: flex-end;

    padding-top: 70px;
    padding-bottom: 100px;
  }

  .hero-content {
    max-width: 100%;
    padding: 0;
    
  }

  .hero-content .eyebrow {
    font-size: 0.7rem;
    margin-bottom: 16px;
  }

  .hero-content h1 {
    font-size: clamp(2.6rem, 12vw, 4rem);
    line-height: 1;
  }

  .hero-content p {
    margin-top: 20px;

    font-size: 0.92rem;

    line-height: 1.6;
  }

  .hero-buttons {
    flex-direction: column;

    gap: 10px;

    margin-top: 28px;
  }

  .hero-buttons .btn {
    width: 100%;
  }

  .hero-arrow {
    top: auto;
    bottom: 28px;

    transform: none;

    width: 38px;
    height: 38px;

    font-size: 17px;
  }

  .hero-prev {
    left: 18px;
  }

  .hero-next {
    right: 18px;
  }

  .hero-dots {
    bottom: 42px;
  }

  /*
     Stronger mobile overlay so
     text remains readable
  */

  .hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;

  background:
    linear-gradient(
      90deg,
      rgba(45, 28, 20, 0.72) 0%,
      rgba(45, 28, 20, 0.48) 40%,
      rgba(45, 28, 20, 0.22) 75%,
      rgba(45, 28, 20, 0.12) 100%
    );
}

}

/* =========================================
   COMPACT FEATURES STRIP
========================================= */

.quick-features {
  background: var(--cream);
  border-bottom: 1px solid var(--line);
}

.quick-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.quick-feature {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 125px;
  padding: 22px 30px;
  border-right: 1px solid var(--line);
}

.quick-feature:first-child {
  border-left: 0px solid var(--line);
}

.quick-feature:last-child {
  border-right: 0px solid var(--line);
}


/* Icon */

.quick-icon {
  flex: 0 0 52px;
  width: 52px;
  height: 52px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 50%;
  background: var(--walnut);
  color: var(--cream);
}

.quick-icon svg {
  width: 27px;
  height: 27px;
}


/* Text */

.quick-content h3 {
  margin: 0 0 5px;
  color: var(--walnut);
  font-size: 1.4rem;
  line-height: 1.2;
}

.quick-content p {
  margin: 0;
  color: var(--muted);
  font-size: .98rem;
  line-height: 1.5;
  max-width: 280px;
}


/* Hover */

.quick-feature {
  transition: background .25s ease;
}

.quick-feature:hover {
  background: var(--white);
}


/* =========================================
   TABLET
========================================= */

@media (max-width: 950px) {

  .quick-features-grid {
    grid-template-columns: 1fr;
  }

  .quick-feature {
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }

  .quick-feature:last-child {
    border-bottom: 0;
  }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

  .quick-feature {
    min-height: auto;
    padding: 20px;
  }

  .quick-icon {
    flex-basis: 46px;
    width: 46px;
    height: 46px;
  }

  .quick-icon svg {
    width: 24px;
    height: 24px;
  }

  .quick-content h3 {
    font-size: .98rem;
  }

  .quick-content p {
    font-size: .76rem;
  }

}
 
/* =========================================
   MOBILE WIDTH / OVERFLOW FIX
   ========================================= */

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

body {
  margin: 0;
}

img {
  max-width: 100%;
}


/* Make every main section respect viewport */

main,
section,
header,
footer {
  max-width: 100%;
}


/* Container */

@media (max-width: 800px) {

  .container {
    width: calc(100% - 30px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }


  /* HERO */

  .hero-slider {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .hero-slide {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
  }

  .hero-bg {
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
  }


  /* HERO CONTENT */

  .hero-slide .container {
    width: calc(100% - 30px);
    max-width: 100%;
  }

}

/* contact form thank u */
.form-trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


/* Mobile menu logo header */
.mobile-menu-header {
  display: none;
}

@media (max-width: 768px) {
  #mainNav.open .mobile-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 0 20px;
    margin-bottom: 15px;
    border-bottom: 1px solid rgba(90, 59, 45, 0.2);
    box-sizing: border-box;
  }

  #mainNav.open .mobile-menu-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
  }

  #mainNav.open .mobile-menu-logo img {
    display: block;
    width: 245px;
    max-width: 70%;
    height: auto;
    object-fit: contain;
  }

  #mainNav.open .menu-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 32px;
    line-height: 1;
    cursor: pointer;
  }
}