/*
Theme Name: The Grip Leather
Theme URI: https://thegripleather.com/
Author: Osta Media
Author URI: https://ostamedia.com/
Description: One page front page theme for The Grip Leather, a leather weightlifting gear manufacturer and exporter in Sialkot, Pakistan. Covers lifting belts, lifting straps, grips, wrist wraps, ankle cuffs and dip belts.
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thegripleather
Tags: one-page, custom-logo, custom-menu, featured-images, translation-ready
*/

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:#FFFFFF;color:#111111;
  font-family:'Manrope',system-ui,sans-serif;font-weight:400;
  font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
p{margin:0 0 16px}
h1,h2,h3,h4{
  margin:0;font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  letter-spacing:-0.035em;line-height:0.95;text-transform:none;
}
:focus-visible{outline:3px solid #7B5A38;outline-offset:4px}

/* ---------- LAYOUT ---------- */
.wrap{width:100%;max-width:1400px;margin:0 auto;padding:0 48px}
.sec{padding:170px 0}
.sec--tight{padding:110px 0}
.tint{background:#F4F1ED}

.tag{
  display:inline-flex;align-items:center;gap:10px;padding:10px 22px;border-radius:50px;
  border:1.5px solid #DDD6CD;font-size:11.5px;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:#7B5A38;background:#FFFFFF;
}
.tag i{width:7px;height:7px;border-radius:50%;background:#7B5A38;display:block}
.tag--dark{background:#111111;border-color:#111111;color:#FFFFFF}
.tag--dark i{background:#C08A4E}

.h-xl{font-size:clamp(46px,7.6vw,124px)}
.h-lg{font-size:clamp(38px,5.6vw,86px)}
.h-md{font-size:clamp(28px,3.2vw,46px)}
.brown{color:#7B5A38}
.muted{color:#6E6A64}
.lead{font-size:19px;max-width:46ch;color:#6E6A64}

.head{display:grid;grid-template-columns:1.2fr .8fr;gap:70px;align-items:end;margin-bottom:80px}
.head p{margin:0}

/* ---------- BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;gap:14px;padding:20px 34px;border-radius:50px;
  background:#111111;color:#FFFFFF;border:2px solid #111111;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;letter-spacing:-.01em;
  transition:background .3s,color .3s,border-color .3s,transform .3s;
}
.btn:hover{background:#7B5A38;border-color:#7B5A38;transform:translateY(-3px)}
.btn span{width:26px;height:26px;border-radius:50%;background:#FFFFFF;color:#111111;display:grid;place-items:center;font-size:13px;transition:background .3s,color .3s}
.btn:hover span{background:#FFFFFF;color:#7B5A38}
.btn--out{background:transparent;color:#111111;border-color:#111111}
.btn--out span{background:#111111;color:#FFFFFF}
.btn--out:hover{background:#111111;color:#FFFFFF;border-color:#111111}
.btn--out:hover span{background:#FFFFFF;color:#111111}
.btn--light{background:#FFFFFF;color:#111111;border-color:#FFFFFF}
.btn--light span{background:#111111;color:#FFFFFF}
.btn--light:hover{background:#C08A4E;border-color:#C08A4E;color:#FFFFFF}
.btn--ghostlight{background:transparent;color:#FFFFFF;border-color:rgba(255,255,255,.4)}
.btn--ghostlight span{background:#FFFFFF;color:#111111}
.btn--ghostlight:hover{background:#FFFFFF;color:#111111;border-color:#FFFFFF}

/* ---------- FLAT LEATHER SURFACES (no gradients) ---------- */
.surf{position:relative;overflow:hidden;isolation:isolate;background-color:#7B5A38}
.surf::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.38'/%3E%3C/svg%3E");
}
.s-black{background-color:#141414}
.s-brown{background-color:#7B5A38}
.s-tan{background-color:#C08A4E}
.s-clay{background-color:#5A3E28}
.s-stone{background-color:#DCD5CB}
.r15{border-radius:15px}
.r50{border-radius:50px}

/* ---------- PHOTO LAYER (added) ---------- */
.surf img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;max-width:none}
.surf--p::after{opacity:.12}
.surf--btm::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,12,.86) 0%,rgba(12,12,12,.44) 42%,rgba(12,12,12,0) 78%);
}
.surf--full::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:rgba(12,12,12,.40);
}
.surf--soft::before{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(12,12,12,.30) 0%,rgba(12,12,12,0) 55%);
}

/* ---------- NAV ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;padding:18px 0;transition:padding .35s}
.nav__in{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  background:#FFFFFF;border:1.5px solid #E8E2DA;border-radius:50px;padding:12px 12px 12px 28px;
  transition:box-shadow .35s,border-color .35s;
}
.nav.is-stuck{padding:12px 0}
.nav.is-stuck .nav__in{box-shadow:0 14px 40px rgba(17,17,17,.09)}
.logo{display:flex;align-items:center;gap:10px;font-family:'Archivo',sans-serif;font-weight:900;font-size:17px;letter-spacing:-.03em;white-space:nowrap}
.logo i{width:30px;height:30px;border-radius:50%;background:#7B5A38;display:block;position:relative}
.logo i::after{content:"";position:absolute;inset:8px;border-radius:50%;background:#FFFFFF}
.menu{display:flex;align-items:center;gap:6px;list-style:none;margin:0;padding:0}
.menu>li>a{display:block;padding:11px 18px;border-radius:50px;font-size:14.5px;font-weight:600;color:#3A3733;transition:background .28s,color .28s}
.menu>li>a:hover{background:#F4F1ED;color:#7B5A38}
.nav .btn{padding:14px 24px;font-size:13.5px}
.burger{display:none;width:46px;height:46px;border-radius:50%;border:1.5px solid #E8E2DA;background:#FFFFFF;cursor:pointer;position:relative}
.burger b{position:absolute;left:14px;width:18px;height:2px;background:#111111;border-radius:2px}
.burger b:nth-child(1){top:17px}.burger b:nth-child(2){top:23px}.burger b:nth-child(3){top:29px}

/* ---------- HERO ---------- */
.hero{padding:170px 0 0}
.hero__top{display:grid;grid-template-columns:1.35fr .65fr;gap:60px;align-items:end;margin-bottom:56px}
.hero h1{max-width:12ch}
.hero h1 .w{display:inline-block;overflow:hidden;padding-bottom:.06em}
.hero h1 .w>span{display:inline-block;transform:translateY(110%);transition:transform 1s cubic-bezier(.16,1,.3,1)}
.hero.is-live h1 .w>span{transform:translateY(0)}
.hero__aside{padding-bottom:14px}
.hero__btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.fade{opacity:0;transform:translateY(20px);transition:opacity .9s ease .55s,transform .9s cubic-bezier(.16,1,.3,1) .55s}
.hero.is-live .fade{opacity:1;transform:none}
.hero__stage{position:relative;height:64vh;min-height:460px}
.hero__stage .surf{position:absolute;inset:0}
.hero__badge{
  position:absolute;left:40px;top:40px;z-index:3;background:#FFFFFF;border-radius:50px;
  padding:14px 26px;font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;
}
.hero__stats{
  position:absolute;right:40px;bottom:40px;z-index:3;display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;
}
.stat{background:#FFFFFF;border-radius:15px;padding:22px 26px;min-width:158px}
.stat b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:38px;line-height:1;letter-spacing:-.04em}
.stat b i{font-style:normal;color:#7B5A38}
.stat span{display:block;font-size:12.5px;font-weight:600;color:#6E6A64;margin-top:6px}
.stat--brown{background:#7B5A38;color:#FFFFFF}
.stat--brown b i{color:#FFFFFF}
.stat--brown span{color:rgba(255,255,255,.75)}

/* ---------- TICKER ---------- */
.ticker{background:#111111;border-radius:50px;overflow:hidden;padding:26px 0;margin-top:26px}
.ticker__t{display:flex;gap:64px;width:max-content;animation:mv 32s linear infinite}
.ticker:hover .ticker__t{animation-play-state:paused}
@keyframes mv{to{transform:translateX(-50%)}}
.ticker__t span{
  font-family:'Archivo',sans-serif;font-weight:800;font-size:22px;letter-spacing:-.02em;
  color:#FFFFFF;white-space:nowrap;display:flex;align-items:center;gap:20px;
}
.ticker__t span::after{content:"";width:9px;height:9px;border-radius:50%;background:#7B5A38;display:block}

/* ---------- ABOUT ---------- */
.about{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
.about__media{position:sticky;top:120px}
.about__media .surf{height:600px}
.about__strip{display:flex;gap:10px;margin-top:10px}
.about__strip .surf{flex:1;height:120px;border-radius:15px}
.about__list{margin:44px 0 0;padding:0;list-style:none;border-top:1.5px solid #E8E2DA}
.about__list li{display:grid;grid-template-columns:56px 1fr;gap:26px;padding:26px 0;border-bottom:1.5px solid #E8E2DA;align-items:start}
.about__list b{font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;color:#7B5A38}
.about__list h3{font-size:22px;margin-bottom:6px}
.about__list p{margin:0;font-size:15.5px;color:#6E6A64}

/* ---------- PROCESS INDEX ---------- */
.idx{border-top:1.5px solid #E0D9CF}
.idx__row{
  display:grid;grid-template-columns:90px 1.1fr 1.4fr;gap:34px;align-items:center;
  padding:34px 30px;border-bottom:1.5px solid #E0D9CF;border-radius:15px;
  transition:background .35s,padding .35s,color .35s;
}
.idx__row:hover{background:#111111;color:#FFFFFF;padding-left:44px}
.idx__row b{font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;color:#7B5A38;transition:color .35s}
.idx__row:hover b{color:#C08A4E}
.idx__row h3{font-size:clamp(22px,2.3vw,34px)}
.idx__row p{margin:0;font-size:15.5px;color:#6E6A64;transition:color .35s}
.idx__row:hover p{color:rgba(255,255,255,.72)}

/* ---------- BENTO PRODUCTS ---------- */
.bento{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
.card{position:relative;overflow:hidden;border-radius:15px;display:flex;align-items:flex-end;min-height:300px;color:#FFFFFF}
.card .surf{position:absolute;inset:0;transition:transform 1s cubic-bezier(.16,1,.3,1)}
.card:hover .surf{transform:scale(1.05)}
.card__in{position:relative;z-index:3;padding:34px;width:100%}
.card h3{font-size:30px;margin-bottom:8px}
.card p{margin:0;font-size:14.5px;color:rgba(255,255,255,.78);max-width:34ch}
.card__pill{
  position:absolute;top:26px;right:26px;z-index:3;background:#FFFFFF;color:#111111;border-radius:50px;
  padding:9px 18px;font-family:'Archivo',sans-serif;font-weight:800;font-size:12px;
}
.card--xl{grid-column:span 7;min-height:440px}
.card--l{grid-column:span 5;min-height:440px}
.card--m{grid-column:span 4}
.card--s{grid-column:span 3}
.card--w{grid-column:span 6}
.card--flat{background:#F4F1ED;color:#111111;align-items:center}
.card--flat p{color:#6E6A64}
.card--flat h3{font-size:clamp(26px,2.6vw,40px)}

/* ---------- VIDEO ---------- */
.video{position:relative;height:76vh;min-height:520px;overflow:hidden;border-radius:50px}
.video .surf{position:absolute;inset:0}
.video__in{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:space-between;padding:56px}
.play{
  width:112px;height:112px;border-radius:50%;background:#FFFFFF;border:0;cursor:pointer;align-self:center;margin:auto;
  display:grid;place-items:center;transition:transform .35s,background .35s;
}
.play:hover{transform:scale(1.08);background:#C08A4E}
.play::before{content:"";width:0;height:0;border-left:20px solid #111111;border-top:13px solid transparent;border-bottom:13px solid transparent;margin-left:5px}
.play:hover::before{border-left-color:#FFFFFF}
.video__bot{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.video h2{color:#FFFFFF;max-width:16ch}
.video__pills{display:flex;gap:10px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.28);color:#FFFFFF;border-radius:50px;padding:11px 22px;font-size:13.5px;font-weight:600}

/* ---------- GALLERY ---------- */
.gal{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:230px;gap:16px}
.gal figure{margin:0;position:relative;overflow:hidden;border-radius:15px}
.gal .surf{position:absolute;inset:0;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.gal figure:hover .surf{transform:scale(1.06)}
.gal figcaption{
  position:absolute;left:20px;bottom:20px;z-index:3;background:#FFFFFF;border-radius:50px;
  padding:9px 20px;font-family:'Archivo',sans-serif;font-weight:800;font-size:12.5px;
}
.gal .a{grid-column:span 2;grid-row:span 2;border-radius:50px}
.gal .b{grid-column:span 1;grid-row:span 1}
.gal .c{grid-column:span 1;grid-row:span 2}
.gal .d{grid-column:span 2;grid-row:span 1}

/* ---------- CAPABILITY CHIPS ---------- */
.chips{display:flex;flex-wrap:wrap;gap:12px}
.chip{
  border:1.5px solid #E0D9CF;border-radius:50px;padding:16px 28px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:16px;color:#111111;
  transition:background .3s,color .3s,border-color .3s,transform .3s;background:#FFFFFF;
}
.chip:hover{background:#7B5A38;border-color:#7B5A38;color:#FFFFFF;transform:translateY(-3px)}
.chip--on{background:#111111;border-color:#111111;color:#FFFFFF}

/* ---------- SPLIT DARK BLOCK ---------- */
.dark{background:#111111;color:#FFFFFF;border-radius:50px;padding:96px 80px}
.dark h2{color:#FFFFFF}
.dark .muted{color:rgba(255,255,255,.66)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.mini{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mini div{border:1.5px solid rgba(255,255,255,.16);border-radius:15px;padding:26px}
.mini b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:17px;margin-bottom:6px}
.mini span{font-size:14px;color:rgba(255,255,255,.6)}

/* ---------- COUNTERS ---------- */
.counts{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.count{background:#F4F1ED;border-radius:15px;padding:44px 34px}
.count b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(40px,4.4vw,66px);line-height:1;letter-spacing:-.05em}
.count b i{font-style:normal;color:#7B5A38}
.count span{display:block;margin-top:10px;font-size:14px;font-weight:600;color:#6E6A64}

/* ---------- QUOTE ---------- */
.quote{display:grid;grid-template-columns:.9fr 1.1fr;gap:70px;align-items:center}
.quote__media{position:relative}
.quote__media .surf{height:520px;border-radius:50px}
.quote blockquote{
  margin:0 0 34px;font-family:'Archivo',sans-serif;font-weight:800;letter-spacing:-.035em;
  font-size:clamp(26px,2.9vw,42px);line-height:1.12;
}
.quote__who{display:flex;align-items:center;gap:16px}
.quote__who .surf{width:58px;height:58px;border-radius:50%;flex:none}
.quote__who b{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:16px}
.quote__who span{font-size:14px;color:#6E6A64}
.stars{color:#7B5A38;letter-spacing:.2em;margin-bottom:22px;font-size:15px}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:70px;align-items:start}
.faq__head{position:sticky;top:130px}
.faq__list details{border:1.5px solid #E0D9CF;border-radius:15px;margin-bottom:12px;background:#FFFFFF;transition:border-color .3s}
.faq__list details[open]{border-color:#111111}
.faq__list summary{
  list-style:none;cursor:pointer;padding:26px 70px 26px 30px;position:relative;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:19px;letter-spacing:-.02em;
}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{
  content:"";position:absolute;right:24px;top:22px;width:34px;height:34px;border-radius:50%;
  background:#F4F1ED;transition:background .3s;
}
.faq__list details[open] summary::after{background:#7B5A38}
.faq__list summary b{position:absolute;right:38px;top:37px;width:12px;height:2px;background:#111111;z-index:2;transition:background .3s}
.faq__list summary b::after{content:"";position:absolute;left:5px;top:-5px;width:2px;height:12px;background:#111111;transition:transform .3s,background .3s}
.faq__list details[open] summary b,.faq__list details[open] summary b::after{background:#FFFFFF}
.faq__list details[open] summary b::after{transform:scaleY(0)}
.faq__list p{margin:0;padding:0 70px 28px 30px;color:#6E6A64;font-size:15.5px}

/* ---------- JOURNAL ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post{border-radius:15px;overflow:hidden;background:#FFFFFF;border:1.5px solid #E8E2DA;transition:transform .4s,border-color .4s}
.post:hover{transform:translateY(-6px);border-color:#7B5A38}
.post__img{height:210px;position:relative;overflow:hidden}
.post__img .surf{position:absolute;inset:0}
.post__in{padding:28px}
.post span{font-size:12.5px;font-weight:600;color:#7B5A38}
.post h3{font-size:21px;margin:10px 0 8px;line-height:1.15}
.post p{margin:0;font-size:14.5px;color:#6E6A64}

/* ---------- CTA ---------- */
.cta{background:#7B5A38;border-radius:50px;padding:120px 80px;text-align:center;color:#FFFFFF}
.cta h2{color:#FFFFFF;margin-bottom:22px}
.cta p{color:rgba(255,255,255,.8);max-width:52ch;margin:0 auto 38px;font-size:18px}
.cta__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ---------- FOOTER ---------- */
.foot{background:#111111;color:#FFFFFF;border-radius:50px 50px 0 0;margin-top:20px;padding:96px 0 40px}
.foot__top{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:56px;padding-bottom:70px}
.foot h4{font-family:'Archivo',sans-serif;font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#C08A4E;margin-bottom:20px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:11px}
.foot li a{font-size:15px;color:rgba(255,255,255,.68);transition:color .25s}
.foot li a:hover{color:#FFFFFF}
.foot__about p{color:rgba(255,255,255,.62);max-width:34ch;margin-top:20px;font-size:15px}
.news{display:flex;gap:8px;margin-top:24px;max-width:360px}
.news input{flex:1;border:1.5px solid rgba(255,255,255,.2);background:transparent;border-radius:50px;padding:15px 22px;color:#FFFFFF;font-family:'Manrope',sans-serif;font-size:14.5px}
.news input::placeholder{color:rgba(255,255,255,.4)}
.news input:focus{outline:none;border-color:#C08A4E}
.news button{border:0;border-radius:50px;background:#FFFFFF;color:#111111;padding:0 26px;font-family:'Archivo',sans-serif;font-weight:800;font-size:14px;cursor:pointer;transition:background .3s}
.news button:hover{background:#C08A4E;color:#FFFFFF}
.foot__word{font-family:'Archivo',sans-serif;font-weight:900;font-size:clamp(38px,9.2vw,138px);letter-spacing:-.05em;line-height:.85;color:rgba(255,255,255,.07);padding:20px 0 30px;user-select:none}
.foot__bar{border-top:1.5px solid rgba(255,255,255,.12);padding-top:28px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:14px;color:rgba(255,255,255,.5)}
.foot__bar a{color:rgba(255,255,255,.5)}
.foot__bar a:hover{color:#FFFFFF}
.soc{display:flex;gap:8px}
.soc a{width:40px;height:40px;border-radius:50%;border:1.5px solid rgba(255,255,255,.2);display:grid;place-items:center;transition:.3s}
.soc a:hover{background:#FFFFFF;border-color:#FFFFFF}
.soc svg{width:16px;height:16px;stroke:#FFFFFF;fill:none;stroke-width:1.6}
.soc a:hover svg{stroke:#111111}

/* ---------- REVEAL ---------- */
.rev{opacity:0;transform:translateY(28px);transition:opacity .9s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.rev.is-in{opacity:1;transform:none}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1150px){
  .menu{display:none}.burger{display:block}
  .hero__top,.about,.grid2,.quote,.faq{grid-template-columns:1fr;gap:44px}
  .about__media{position:static}
  .faq__head{position:static}
  .head{grid-template-columns:1fr;gap:24px;align-items:start;margin-bottom:56px}
  .card--xl,.card--l,.card--m,.card--s,.card--w{grid-column:span 6}
  .counts{grid-template-columns:repeat(2,1fr)}
  .posts{grid-template-columns:repeat(2,1fr)}
  .idx__row{grid-template-columns:60px 1fr;gap:20px}
  .idx__row p{grid-column:2}
  .dark,.cta{padding:70px 44px}
}
@media(max-width:760px){
  body{font-size:16px}
  .wrap{padding:0 20px}
  .sec{padding:90px 0}.sec--tight{padding:70px 0}
  .nav__in{padding:10px 10px 10px 20px}
  .nav .btn{padding:12px 18px;font-size:13px}
  .hero{padding:120px 0 0}
  .hero__stage{height:auto;min-height:0;padding-bottom:20px}
  .hero__stage .surf{position:relative;height:300px;inset:auto}
  .hero__badge{left:20px;top:20px;padding:11px 20px;font-size:12.5px}
  .hero__stats{position:static;margin-top:12px;justify-content:flex-start}
  .stat{flex:1;min-width:calc(50% - 6px);padding:18px 20px}
  .ticker{border-radius:28px;padding:20px 0}
  .ticker__t span{font-size:17px;gap:14px}
  .card--xl,.card--l,.card--m,.card--s,.card--w{grid-column:span 12;min-height:280px}
  .gal{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .gal .a{grid-column:span 2;border-radius:28px}
  .counts,.posts{grid-template-columns:1fr}
  .video{border-radius:28px;height:auto;min-height:0}
  .video__in{position:static;padding:34px 24px;min-height:440px}
  .video .surf{border-radius:28px}
  .dark,.cta,.foot{border-radius:28px}
  .foot{border-radius:28px 28px 0 0;padding:64px 0 34px}
  .dark,.cta{padding:54px 26px}
  .foot__top{grid-template-columns:1fr;gap:36px}
  .about__media .surf{height:340px}
  .quote__media .surf{height:320px;border-radius:28px}
  .idx__row:hover{padding-left:30px}
  .faq__list summary{font-size:17px;padding:22px 62px 22px 22px}
  .faq__list p{padding:0 22px 24px}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important}
  .rev,.fade{opacity:1;transform:none}
  .hero h1 .w>span{transform:none}
}

/* ---------- WORDPRESS GLUE ---------- */
.skip{position:absolute;left:-9999px;top:0;z-index:1000;background:#111111;color:#FFFFFF;padding:14px 22px;border-radius:0 0 15px 0;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px}
.skip:focus{left:0}
.logo img{display:block;height:30px;width:auto;max-width:200px}
.menu>li>a{white-space:nowrap}
.foot ul{list-style:none;margin:0;padding:0}
.screen-reader-text{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);white-space:nowrap}
body.admin-bar .nav{top:32px}
@media(max-width:782px){body.admin-bar .nav{top:46px}}

/* form plugin fields inside the CTA and footer slots */
.tgl-form br{display:none}
.tgl-form p{margin:0 0 10px}
.tgl-form input[type=text],.tgl-form input[type=email],.tgl-form input[type=tel],
.tgl-form select,.tgl-form textarea{
  width:100%;border:1.5px solid #E8E2DA;border-radius:15px;padding:15px 20px;
  font-family:'Manrope',sans-serif;font-size:15px;background:#FFFFFF;color:#111111;
}
.tgl-form textarea{min-height:120px;resize:vertical}
.tgl-form input[type=submit],.tgl-form button[type=submit]{
  width:auto;border:0;border-radius:50px;background:#FFFFFF;color:#111111;padding:18px 32px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;transition:background .3s,color .3s;
}
.tgl-form input[type=submit]:hover,.tgl-form button[type=submit]:hover{background:#C08A4E;color:#FFFFFF}

/* ---------- SMALL SCREEN NAV FIT ---------- */
/* A longer brand name needs more room than the original short wordmark, so on
   phones the nav keeps the logo and the burger and drops the inline CTA. The
   hero, the CTA block and the footer all still carry a quote button. */
@media(max-width:760px){
  .nav__in{padding:9px 9px 9px 16px}
  .logo{font-size:15px;gap:8px}
  .logo i{width:26px;height:26px}
  .logo i::after{inset:7px}
  .logo img{height:26px;max-width:150px}
  .nav__cta{display:none}
  .burger{width:44px;height:44px}
  .burger b{left:13px}
  .burger b:nth-child(1){top:16px}
  .burger b:nth-child(2){top:22px}
  .burger b:nth-child(3){top:28px}
}
@media(max-width:400px){
  .logo{font-size:14px}
}

/* ---------- INNER PAGE HERO ---------- */
.hero--page{padding:200px 0 0}
.hero--page .hero__top{grid-template-columns:1.18fr .82fr;gap:60px;margin-bottom:0;align-items:end}
.hero--page h1{max-width:17ch}

/* ---------- CONTACT PAGE ---------- */
.ct{display:grid;grid-template-columns:.86fr 1.14fr;gap:64px;align-items:start}
.ct__side{display:grid;gap:12px}
.ct__card{
  border:1.5px solid #E8E2DA;border-radius:15px;padding:28px 30px;background:#FFFFFF;
  transition:border-color .3s,transform .3s;
}
.ct__card:hover{border-color:#7B5A38;transform:translateY(-3px)}
.ct__card b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;color:#7B5A38;margin-bottom:12px;
}
.ct__card p{margin:0;font-size:17.5px;line-height:1.45;font-weight:500}
.ct__card a{border-bottom:1.5px solid #DDD6CD;transition:color .3s,border-color .3s}
.ct__card a:hover{color:#7B5A38;border-color:#7B5A38}
.ct__card span{display:block;margin-top:10px;font-size:14.5px;color:#6E6A64;line-height:1.55}

.ct__media{position:relative;margin-top:4px}
.ct__media .surf{height:260px;border-radius:15px}

.ct__form{background:#F4F1ED;border-radius:50px;padding:60px 56px;scroll-margin-top:120px}
.ct__form h2{letter-spacing:-.035em}
.ct__direct{
  margin-top:30px;border:1.5px solid #DDD6CD;border-radius:15px;padding:32px;background:#FFFFFF;
}
.ct__direct b{
  display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:19px;
  letter-spacing:-.02em;margin-bottom:10px;
}
.ct__direct p{margin:0;font-size:15.5px;color:#6E6A64;max-width:46ch}
.ct__note{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.ct__note .btn{font-size:13.5px;padding:16px 26px}
.ct__hint{
  margin:18px 0 0;font-size:13.5px;color:#6E6A64;border-left:3px solid #C08A4E;
  padding-left:14px;line-height:1.5;
}
.ct__list{
  display:flex;flex-wrap:wrap;gap:10px 26px;list-style:none;margin:34px 0 0;padding:30px 0 0;
  border-top:1.5px solid #E0D9CF;
}
.ct__list li{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:#111111;
  display:flex;align-items:center;gap:9px;
}
.ct__list li::before{content:"";width:7px;height:7px;border-radius:50%;background:#7B5A38;display:block}

/* ---------- IMAGE BAND ---------- */
.band{position:relative;height:46vh;min-height:360px;border-radius:50px;overflow:hidden}
.band .surf{position:absolute;inset:0}
.band__in{
  position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  justify-content:flex-end;gap:18px;padding:56px;
}
.band h2{color:#FFFFFF;max-width:22ch}
.band p{margin:0;color:rgba(255,255,255,.74);max-width:52ch;font-size:16px}

/* ---------- MAP ---------- */
.map{
  position:relative;border-radius:50px;overflow:hidden;border:1.5px solid #E8E2DA;
  background:#F4F1ED;
}
.map iframe{display:block;width:100%;height:470px;border:0;filter:grayscale(1) contrast(1.04);transition:filter .4s}
.map:hover iframe{filter:none}

/* ---------- GENERIC PAGE, POST AND 404 ---------- */
.page-body{padding:200px 0 130px}
.entry{max-width:74ch}
.entry p{font-size:17.5px;color:#3A3733}
.entry h2{font-size:clamp(26px,2.6vw,40px);margin:46px 0 14px}
.entry h3{font-size:22px;margin:34px 0 10px}
.entry ul,.entry ol{padding-left:22px;color:#3A3733}
.entry li{margin-bottom:9px}
.entry img{border-radius:15px;margin:26px 0;height:auto}
.entry a{color:#7B5A38;border-bottom:1.5px solid #DDD6CD}
.entry a:hover{border-color:#7B5A38}
.entry blockquote{
  margin:30px 0;padding:26px 32px;background:#F4F1ED;border-radius:15px;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:20px;letter-spacing:-.02em;
}
.entry blockquote p{margin:0;font-size:inherit;color:inherit}
.entry table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15.5px}
.entry th,.entry td{border-bottom:1.5px solid #E8E2DA;padding:14px 12px;text-align:left}
.entry th{font-family:'Archivo',sans-serif;font-weight:800}
.pager{display:flex;gap:10px;margin-top:30px;font-weight:600}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1150px){
  .hero--page{padding:170px 0 0}
  .hero--page .hero__top{grid-template-columns:1fr;gap:34px}
  .ct{grid-template-columns:1fr;gap:42px}
  .ct__form{padding:46px 38px}
  .ct__media .surf{height:220px}
}
@media(max-width:760px){
  .hero--page{padding:130px 0 0}
  .page-body{padding:126px 0 84px}
  .ct__form{border-radius:28px;padding:32px 24px}
  .ct__card{padding:24px 22px}
  .ct__card p{font-size:16.5px}
  .ct__direct{padding:24px 20px}
  .ct__note{flex-direction:column;align-items:stretch}
  .ct__note .btn{justify-content:center}
  .ct__list{gap:10px 18px}
  .band{border-radius:28px;height:auto;min-height:0}
  .band .surf{border-radius:28px}
  .band__in{position:static;padding:34px 24px;min-height:340px}
  .map{border-radius:28px}
  .map iframe{height:330px}
  .entry blockquote{padding:20px 22px;font-size:18px}
}

/* ---------- BLOG LISTING AND PAGINATION ---------- */
.posts .post{display:block}
.page-body .posts{margin-top:56px}
.pag{margin-top:56px}
.pag .nav-links{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pag .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;min-width:46px;height:46px;
  padding:0 16px;border:1.5px solid #E8E2DA;border-radius:50px;background:#FFFFFF;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:#111111;
  transition:background .3s,color .3s,border-color .3s;
}
.pag .page-numbers:hover{border-color:#7B5A38;color:#7B5A38}
.pag .page-numbers.current{background:#111111;border-color:#111111;color:#FFFFFF}
.pag .page-numbers.dots{border-color:transparent;background:transparent}
.pag h2.screen-reader-text{display:none}
@media(max-width:1000px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:680px){.posts{grid-template-columns:1fr}}

/* ---------- FAIL SAFE ----------
   The reveal animations start at opacity 0 and are switched on by main.js.
   If that file never runs, because a minifier broke it or a CDN blocked it,
   the inline script in the head drops the tgl-js class and everything below
   becomes visible instead of the page looking empty. */
html:not(.tgl-js) .rev,
html:not(.tgl-js) .fade{opacity:1 !important;transform:none !important}

/* ---------- SEARCH FORM ---------- */
.sform{display:flex;gap:10px;max-width:520px}
.sform input[type=search]{
  flex:1;min-width:0;border:1.5px solid #E8E2DA;border-radius:50px;padding:15px 22px;
  font-family:'Manrope',sans-serif;font-size:15px;background:#FFFFFF;color:#111111;
}
.sform input[type=search]:focus{outline:0;border-color:#7B5A38}
.sform button{
  border:0;border-radius:50px;background:#111111;color:#FFFFFF;padding:15px 28px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;transition:background .3s;
}
.sform button:hover{background:#7B5A38}
.listing-search{margin-top:34px}

/* ---------- POST META, TAGS, NAV ---------- */
.post-meta{margin:0 0 30px;font-size:14.5px;color:#6E6A64}
.post-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.post-tags a{
  border:1.5px solid #E8E2DA;border-radius:50px;padding:9px 18px;font-size:13.5px;
  font-family:'Archivo',sans-serif;font-weight:700;color:#111111;transition:border-color .3s,color .3s;
}
.post-tags a:hover{border-color:#7B5A38;color:#7B5A38}
.post-nav{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:50px;padding-top:30px;border-top:1.5px solid #E8E2DA;
}
.post-nav a{
  font-family:'Archivo',sans-serif;font-weight:700;font-size:15px;color:#111111;
  max-width:44%;transition:color .3s;
}
.post-nav a:hover{color:#7B5A38}

/* ---------- COMMENTS ---------- */
.comments{max-width:74ch;margin-top:60px;padding-top:44px;border-top:1.5px solid #E8E2DA}
.comment-list{list-style:none;margin:26px 0 0;padding:0}
.comment-list ol.children{list-style:none;margin:18px 0 0 26px;padding:0}
.comment-list li{margin-bottom:18px}
.comment-body{border:1.5px solid #E8E2DA;border-radius:15px;padding:24px 26px;background:#FFFFFF}
.comment-author{display:flex;align-items:center;gap:12px;font-family:'Archivo',sans-serif;font-weight:800;font-size:15px}
.comment-author img{border-radius:50%;width:40px;height:40px}
.comment-metadata{margin:6px 0 12px;font-size:13.5px;color:#6E6A64}
.comment-body p{font-size:16px;margin:0 0 10px}
.reply a{font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;color:#7B5A38}
.comment-respond{margin-top:40px}
.comment-respond .comment-notes,.comment-respond .comment-form-cookies-consent{font-size:14px;color:#6E6A64}
.comment-respond label{display:block;margin-bottom:7px;font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px}
.comment-respond .form-submit{margin-top:6px}
.comment-respond input[type=submit]{background:#111111;color:#FFFFFF}
.comment-respond input[type=submit]:hover{background:#7B5A38;color:#FFFFFF}

@media(max-width:760px){
  .sform{flex-direction:column}
  .sform button{width:100%}
  .post-nav a{max-width:100%}
  .comment-body{padding:20px 18px}
  .comment-list ol.children{margin-left:12px}
}

/* ---------- STICKY IN PAGE NAVIGATION ---------- */
.subnav{position:sticky;top:96px;z-index:40;margin:10px 0 0}
.subnav__in{
  display:flex;gap:5px;overflow-x:auto;padding:8px;background:#FFFFFF;
  border:1.5px solid #E8E2DA;border-radius:50px;box-shadow:0 12px 34px rgba(17,17,17,.06);
  scrollbar-width:none;
}
.subnav__in::-webkit-scrollbar{display:none}
.subnav a{
  white-space:nowrap;padding:11px 21px;border-radius:50px;color:#3A3733;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;
  transition:background .3s,color .3s;
}
.subnav a:hover{background:#F4F1ED}
.subnav a.is-on{background:#111111;color:#FFFFFF}
[id]{scroll-margin-top:170px}

/* ---------- GENERIC SPLIT ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.split--rev .split__media{order:2}
.split__media .surf{height:min(72vh,620px)}
.split__media .surf img{object-position:center}

/* ---------- TIMELINE ---------- */
.tl{position:relative;margin-top:56px;padding-left:34px}
.tl::before{content:"";position:absolute;left:7px;top:10px;bottom:10px;width:2px;background:#E0D9CF}
.tl__row{position:relative;display:grid;grid-template-columns:130px 1fr;gap:34px;padding:28px 0;border-bottom:1.5px solid #E8E2DA}
.tl__row:last-child{border-bottom:0}
.tl__row::before{
  content:"";position:absolute;left:-34px;top:36px;width:16px;height:16px;border-radius:50%;
  background:#FFFFFF;border:3px solid #7B5A38;
}
.tl__yr{font-family:'Archivo',sans-serif;font-weight:900;font-size:28px;letter-spacing:-.035em;color:#7B5A38;line-height:1}
.tl__row h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;margin-bottom:9px}
.tl__row p{margin:0;color:#6E6A64;max-width:64ch;font-size:16px}

/* ---------- VALUE / FEATURE CARDS ---------- */
.vals{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.vals--3{grid-template-columns:repeat(3,1fr)}
.val{
  border:1.5px solid #E8E2DA;border-radius:15px;padding:34px 30px;background:#FFFFFF;
  transition:border-color .3s,transform .3s;
}
.val:hover{border-color:#7B5A38;transform:translateY(-4px)}
.val b{display:block;font-family:'Archivo',sans-serif;font-weight:900;font-size:15px;letter-spacing:.1em;color:#C08A4E;margin-bottom:18px}
.val h3{font-family:'Archivo',sans-serif;font-weight:800;font-size:20px;letter-spacing:-.02em;margin-bottom:10px}
.val p{margin:0;color:#6E6A64;font-size:15.5px;line-height:1.6}

/* ---------- SPEC TABLE ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.spec{width:100%;border-collapse:collapse;font-size:15.5px}
.tablewrap .spec:not(.spec--kv){min-width:560px}
.spec th{
  text-align:left;font-family:'Archivo',sans-serif;font-weight:800;font-size:11.5px;
  letter-spacing:.15em;text-transform:uppercase;color:#7B5A38;
  padding:0 18px 14px 0;border-bottom:1.5px solid #DDD6CD;
}
.spec td{padding:17px 18px 17px 0;border-bottom:1.5px solid #E8E2DA;vertical-align:top;color:#3A3733}
.spec tbody tr:last-child td{border-bottom:0}
.spec td:first-child{font-family:'Archivo',sans-serif;font-weight:700;color:#111111;width:26%}
.spec tbody tr{transition:background .25s}
.spec tbody tr:hover{background:rgba(123,90,56,.04)}

/* ---------- HARDWARE LIST ---------- */
.hw{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:2px}
.hw li{display:grid;grid-template-columns:150px 1fr;gap:24px;padding:17px 0;border-bottom:1.5px solid #E0D9CF}
.hw li:last-child{border-bottom:0}
.hw b{font-family:'Archivo',sans-serif;font-weight:800;font-size:15px}
.hw span{color:#6E6A64;font-size:15.5px}

/* ---------- SWATCH ROW ---------- */
.swatches{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:44px}
.swatches figure{margin:0}
.swatches .surf{height:200px;border-radius:15px}
.swatches figcaption{
  margin-top:14px;font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:#111111;
}

/* ---------- PRODUCT RANGE GRID ---------- */
.range{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.rangecard{
  position:relative;display:block;border-radius:30px;overflow:hidden;background:#111111;
  min-height:430px;isolation:isolate;
}
.rangecard .surf{position:absolute;inset:0;border-radius:30px}
.rangecard .surf img{transition:transform .8s cubic-bezier(.16,1,.3,1)}
.rangecard:hover .surf img{transform:scale(1.06)}
.rangecard__pill{
  position:absolute;top:20px;right:20px;z-index:3;background:#FFFFFF;color:#111111;
  border-radius:50px;padding:9px 17px;font-family:'Archivo',sans-serif;font-weight:700;font-size:12px;
}
.rangecard__in{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:30px}
.rangecard__in h3{font-family:'Archivo',sans-serif;font-weight:900;font-size:25px;letter-spacing:-.03em;color:#FFFFFF;margin-bottom:10px}
.rangecard__in p{margin:0;color:rgba(255,255,255,.76);font-size:14.5px;line-height:1.55;max-width:38ch}
.rangecard__go{
  display:inline-flex;align-items:center;gap:8px;margin-top:16px;color:#FFFFFF;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:13.5px;
}
.rangecard__go em{font-style:normal;transition:transform .3s}
.rangecard:hover .rangecard__go em{transform:translateX(5px)}

/* ---------- SPEC TABS ---------- */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:42px}
.tab{
  border:1.5px solid #E0D9CF;background:#FFFFFF;border-radius:50px;padding:13px 24px;cursor:pointer;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:14px;color:#3A3733;
  transition:background .3s,color .3s,border-color .3s;
}
.tab:hover{border-color:#7B5A38;color:#7B5A38}
.tab.is-on{background:#111111;border-color:#111111;color:#FFFFFF}
.panel{display:none}
.panel.is-on{display:block;animation:tglfade .5s cubic-bezier(.16,1,.3,1) both}
@keyframes tglfade{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pdet{display:grid;grid-template-columns:.92fr 1.08fr;gap:56px;align-items:start}
.pdet__media .surf{height:420px}
.pdet__variants{margin-top:26px}
.pdet__variants b{font-family:'Archivo',sans-serif;font-weight:800;font-size:11.5px;letter-spacing:.15em;text-transform:uppercase;color:#7B5A38}
.pdet__body h3{letter-spacing:-.035em}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1150px){
  .subnav{top:86px}
  .split{grid-template-columns:1fr;gap:38px}
  .split--rev .split__media{order:0}
  .split__media .surf{height:400px}
  .vals{grid-template-columns:1fr 1fr}
  .vals--3{grid-template-columns:1fr 1fr}
  .range{grid-template-columns:1fr 1fr}
  .pdet{grid-template-columns:1fr;gap:36px}
  .pdet__media .surf{height:360px}
}
@media(max-width:760px){
  .subnav{top:78px;margin-top:4px}
  .subnav__in{padding:6px}
  .subnav a{padding:10px 16px;font-size:13px}
  [id]{scroll-margin-top:140px}
  .tl{padding-left:26px}
  .tl::before{left:5px}
  .tl__row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .tl__row::before{left:-26px;top:26px;width:13px;height:13px;border-width:3px}
  .tl__yr{font-size:22px}
  .vals{grid-template-columns:1fr}
  .vals--3{grid-template-columns:1fr}
  .val{padding:26px 22px}
  .range{grid-template-columns:1fr}
  .rangecard{min-height:360px;border-radius:22px}
  .rangecard .surf{border-radius:22px}
  .rangecard__in{padding:24px}
  .swatches{grid-template-columns:1fr}
  .swatches .surf{height:170px}
  .hw li{grid-template-columns:1fr;gap:6px}
  .split__media .surf{height:300px}
  .pdet__media .surf{height:280px}
  .tab{padding:11px 18px;font-size:13px}
}

/* ---------- KEY / VALUE SPEC TABLES STACK ON PHONES ---------- */
/* Wide comparison tables scroll inside .tablewrap. Two column spec sheets
   read better stacked, so the label sits above the value instead. */
@media(max-width:620px){
  .spec--kv thead{display:none}
  .spec--kv,.spec--kv tbody,.spec--kv tr,.spec--kv td{display:block;width:auto}
  .spec--kv tr{padding:16px 0;border-bottom:1.5px solid #E8E2DA}
  .spec--kv tr:last-child{border-bottom:0}
  .spec--kv td{padding:0;border-bottom:0}
  .spec--kv td:first-child{
    width:auto;margin-bottom:7px;font-size:11.5px;letter-spacing:.14em;
    text-transform:uppercase;color:#7B5A38;
  }
  .spec--kv tbody tr:hover{background:transparent}
}