/* ============================================================
   MEGA CORINDO ASIA — Heavy Equipment Rental
   Industrial / Rugged design system
   ============================================================ */

/* ---------- Tokens ---------- */
:root{
  /* warm near-blacks */
  --ink:        #14130d;
  --ink-2:      #1f1d15;
  --ink-3:      #2b2820;
  --ink-line:   #3a362b;

  /* warm papers */
  --paper:      #f3efe6;
  --paper-2:    #ffffff;
  --paper-3:    #e8e2d4;

  /* warm steel grays */
  --steel-700:  #56524a;
  --steel-500:  #817b6f;
  --steel-300:  #b7b0a2;
  --steel-200:  #d6d0c2;

  /* construction yellow / amber */
  --amber:      #f5a623;
  --amber-2:    #ffc02e;
  --amber-deep: #c8791a;
  --amber-soft: #fbe7c0;

  --hazard: repeating-linear-gradient(45deg,
            var(--ink) 0 14px, var(--amber) 14px 28px);

  --shadow-hard: 6px 6px 0 var(--ink);
  --shadow-soft: 0 18px 40px -22px rgba(20,19,13,.55);

  --maxw: 1240px;
  --gut: clamp(16px, 4vw, 48px);

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body: "IBM Plex Sans", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- Reset ---------- */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.02;letter-spacing:.01em;text-transform:uppercase;}
p{margin:0;}
ul{margin:0;padding:0;list-style:none;}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.section{padding-block:clamp(56px,8vw,110px);}
.section--tight{padding-block:clamp(40px,6vw,72px);}
.center{text-align:center;}
.stack{display:flex;flex-direction:column;}

/* mono kicker / eyebrow */
.kicker{
  font-family:var(--font-mono);
  font-size:13px;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--amber-deep);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.kicker::before{content:"";width:26px;height:3px;background:var(--amber);}
.kicker--light{color:var(--amber-2);}
.kicker--center{justify-content:center;}

.h-display{font-size:clamp(38px,7vw,86px);line-height:.95;}
.h-1{font-size:clamp(32px,5vw,56px);}
.h-2{font-size:clamp(26px,3.4vw,40px);}
.lead{font-size:clamp(17px,1.4vw,20px);color:var(--steel-700);max-width:60ch;}

.section-head{display:flex;flex-direction:column;gap:14px;margin-bottom:clamp(28px,4vw,52px);}
.section-head.center{align-items:center;}
.section-head .lead{margin-top:2px;}

/* hazard tape */
.hazard{height:14px;background:var(--hazard);}
.hazard--thin{height:8px;}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--amber);--fg:var(--ink);
  display:inline-flex;align-items:center;gap:10px;
  padding:15px 26px;
  font-family:var(--font-display);
  font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  font-size:15px;
  background:var(--bg);color:var(--fg);
  border:2px solid var(--ink);
  clip-path:polygon(0 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%);
  transition:transform .12s ease, box-shadow .12s ease, background .15s ease;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink);}
.btn:active{transform:translate(0,0);box-shadow:none;}
.btn--dark{--bg:var(--ink);--fg:#fff;}
.btn--ghost{--bg:transparent;--fg:var(--ink);}
.btn--ghost-light{--bg:transparent;--fg:#fff;border-color:#fff;}
.btn--lg{padding:18px 34px;font-size:17px;}
.btn--block{display:flex;width:100%;justify-content:center;}
.btn .ti{font-size:1.2em;}

/* ---------- Tags / badges ---------- */
.tag{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-mono);font-size:12px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
  padding:5px 10px;
  background:var(--ink);color:var(--amber-2);
}
.tag--amber{background:var(--amber);color:var(--ink);}
.tag--paper{background:var(--paper-3);color:var(--ink);}

/* ============================================================
   HEADER  (injected by site.js)
   ============================================================ */
.topbar{
  background:var(--ink);color:var(--paper-3);
  font-family:var(--font-mono);font-size:13px;
}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:42px;flex-wrap:wrap;}
.topbar a:hover{color:var(--amber-2);}
.topbar .tb-info{display:flex;gap:22px;flex-wrap:wrap;align-items:center;}
.topbar .tb-info span,.topbar .tb-info a{display:inline-flex;align-items:center;gap:7px;}
.topbar .tb-right{display:flex;gap:18px;align-items:center;}
.topbar .ti{color:var(--amber-2);font-size:15px;}

.lang{display:inline-flex;border:1px solid var(--ink-line);}
.lang button{background:transparent;border:0;color:var(--steel-300);
  font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;
  padding:4px 9px;}
.lang button.on{background:var(--amber);color:var(--ink);}

.nav{
  background:var(--paper-2);
  border-bottom:3px solid var(--ink);
  position:sticky;top:0;z-index:60;
}
.nav .wrap{display:flex;align-items:center;gap:24px;min-height:78px;}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;}
.brand .mark{
  width:46px;height:46px;background:var(--amber);
  border:2px solid var(--ink);
  display:grid;place-items:center;color:var(--ink);font-size:26px;
  clip-path:polygon(0 0,100% 0,100% 78%,78% 100%,0 100%);
}
.brand .bt{line-height:1;}
.brand .bt b{font-family:var(--font-display);font-weight:700;font-size:21px;letter-spacing:.02em;text-transform:uppercase;display:block;}
.brand .bt small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.22em;color:var(--steel-500);text-transform:uppercase;}

.menu{display:flex;align-items:center;gap:4px;}
.menu > li > a{
  display:inline-flex;align-items:center;gap:6px;
  font-family:var(--font-display);font-weight:500;text-transform:uppercase;
  letter-spacing:.04em;font-size:15.5px;
  padding:10px 14px;color:var(--ink);position:relative;
}
.menu > li > a::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:3px;background:var(--amber);transform:scaleX(0);transform-origin:left;transition:transform .18s;}
.menu > li > a:hover::after,.menu > li.active > a::after{transform:scaleX(1);}
.menu .has-sub{position:relative;}
.submenu{
  position:absolute;top:100%;left:0;min-width:210px;
  background:var(--paper-2);border:2px solid var(--ink);
  box-shadow:var(--shadow-hard);
  padding:6px;display:none;z-index:70;
}
.menu .has-sub:hover .submenu{display:block;}
.submenu a{display:block;padding:10px 12px;font-size:14.5px;font-weight:500;}
.submenu a:hover{background:var(--amber-soft);}

.nav-actions{display:flex;align-items:center;gap:10px;}
.icon-btn{
  width:46px;height:46px;border:2px solid var(--ink);background:var(--paper-2);
  display:grid;place-items:center;font-size:20px;position:relative;
  transition:background .15s;
}
.icon-btn:hover{background:var(--amber);}
.icon-btn .cart-count{
  position:absolute;top:-9px;right:-9px;min-width:20px;height:20px;padding:0 4px;
  background:var(--amber);border:2px solid var(--ink);color:var(--ink);
  font-family:var(--font-mono);font-size:11px;font-weight:700;
  display:grid;place-items:center;border-radius:999px;
}
.burger{display:none;}

/* mobile menu */
.mobile-menu{
  position:fixed;inset:0;background:var(--ink);z-index:200;
  transform:translateX(100%);transition:transform .3s ease;
  display:flex;flex-direction:column;padding:24px;color:#fff;overflow:auto;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu .mm-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.mobile-menu a{font-family:var(--font-display);text-transform:uppercase;font-size:24px;padding:12px 0;border-bottom:1px solid var(--ink-line);display:block;}
.mobile-menu a:hover{color:var(--amber-2);}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--steel-300);}
.footer a:hover{color:var(--amber-2);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.3fr;gap:40px;padding-block:clamp(48px,6vw,80px);}
.footer h4{color:#fff;font-size:18px;margin-bottom:20px;letter-spacing:.06em;}
.footer .brand .bt b{color:#fff;}
.footer .brand .bt small{color:var(--steel-500);}
.footer-links li{margin-bottom:11px;}
.footer-links a{display:inline-flex;gap:9px;align-items:flex-start;}
.footer .ti{color:var(--amber);}
.footer .fnews input{
  width:100%;background:var(--ink-2);border:2px solid var(--ink-line);color:#fff;
  padding:13px 14px;font-family:var(--font-mono);font-size:14px;margin-bottom:10px;
}
.footer .fnews input::placeholder{color:var(--steel-500);}
.foot-soc{display:flex;gap:10px;margin-top:18px;}
.foot-soc a{width:40px;height:40px;border:2px solid var(--ink-line);display:grid;place-items:center;font-size:18px;}
.foot-soc a:hover{background:var(--amber);color:var(--ink);border-color:var(--amber);}
.footer-bottom{border-top:1px solid var(--ink-line);padding-block:22px;font-family:var(--font-mono);font-size:13px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;}

/* ============================================================
   HERO  (homepage v1)
   ============================================================ */
.hero{position:relative;background:var(--ink);color:#fff;overflow:hidden;}
.hero-ghost{ /* giant ghost icon */
  position:absolute;right:-5%;bottom:-16%;font-size:min(60vw,760px);
  color:#fff;opacity:.05;line-height:1;pointer-events:none;z-index:1;
}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center;
  padding-block:clamp(56px,8vw,104px);position:relative;z-index:2;}
.hero h1{font-size:clamp(44px,7.2vw,92px);}
.hero h1 .hl{color:var(--amber);}
.hero .lead{color:var(--steel-300);margin-top:22px;}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px;}
.hero-badges{display:flex;gap:26px;flex-wrap:wrap;margin-top:38px;}
.hero-badges .hb{display:flex;flex-direction:column;}
.hero-badges .hb b{font-family:var(--font-display);font-size:34px;color:var(--amber);line-height:1;}
.hero-badges .hb span{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;color:var(--steel-300);text-transform:uppercase;margin-top:6px;}

/* search panel */
.search-panel{
  background:var(--paper-2);border:3px solid var(--amber);color:var(--ink);
  box-shadow:var(--shadow-hard);
}
.search-panel .sp-head{background:var(--hazard);height:14px;}
.search-panel .sp-body{padding:26px;}
.search-panel h3{font-size:24px;margin-bottom:4px;}
.search-panel .sp-sub{font-family:var(--font-mono);font-size:12px;color:var(--steel-500);letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px;}
.field{margin-bottom:14px;}
.field label{display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-700);margin-bottom:6px;}
.field select,.field input{
  width:100%;padding:13px 14px;border:2px solid var(--ink);background:var(--paper);
  font-family:var(--font-body);font-size:15px;color:var(--ink);
}
.field select:focus,.field input:focus{outline:3px solid var(--amber);outline-offset:-2px;}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:3px solid var(--ink);background:var(--paper-2);}
.step{padding:34px 26px;border-right:3px solid var(--ink);position:relative;}
.step:last-child{border-right:0;}
.step .num{font-family:var(--font-display);font-size:60px;font-weight:700;color:var(--paper-3);line-height:.8;}
.step .ti{font-size:34px;color:var(--amber-deep);margin:14px 0 12px;display:block;}
.step h4{font-size:20px;margin-bottom:8px;}
.step p{font-size:14.5px;color:var(--steel-700);}
.step:hover{background:var(--amber);}
.step:hover .num{color:rgba(20,19,13,.18);}
.step:hover .ti{color:var(--ink);}

/* ============================================================
   FEATURES
   ============================================================ */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.feat{background:var(--paper-2);border:2px solid var(--ink);padding:30px;position:relative;transition:transform .15s,box-shadow .15s;}
.feat:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard);}
.feat .ficon{width:64px;height:64px;background:var(--ink);color:var(--amber);display:grid;place-items:center;font-size:32px;margin-bottom:20px;
  clip-path:polygon(0 0,100% 0,100% 76%,76% 100%,0 100%);}
.feat h4{font-size:21px;margin-bottom:10px;}
.feat p{font-size:14.5px;color:var(--steel-700);}

/* ============================================================
   STATS BAND
   ============================================================ */
.stats{background:var(--amber);border-block:3px solid var(--ink);}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-block:46px;}
.stat{text-align:center;position:relative;}
.stat:not(:last-child)::after{content:"";position:absolute;right:0;top:10%;height:80%;width:2px;background:rgba(20,19,13,.25);}
.stat b{font-family:var(--font-display);font-weight:700;font-size:clamp(40px,5vw,64px);display:block;line-height:1;color:var(--ink);}
.stat span{font-family:var(--font-mono);font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);}

/* ============================================================
   EQUIPMENT CARD
   ============================================================ */
.eq-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.eq-grid--3{grid-template-columns:repeat(3,1fr);}
.eq-card{background:var(--paper-2);border:2px solid var(--ink);display:flex;flex-direction:column;
  transition:transform .15s,box-shadow .15s;}
.eq-card:hover{transform:translateY(-5px);box-shadow:var(--shadow-hard);}
.eq-thumb{position:relative;aspect-ratio:4/3;background:
   repeating-linear-gradient(135deg,var(--paper-3) 0 12px, #ded7c8 12px 24px);
   display:grid;place-items:center;border-bottom:2px solid var(--ink);overflow:hidden;}
.eq-thumb > .ti{font-size:96px;color:var(--ink);opacity:.82;}
.eq-thumb .cat{position:absolute;top:0;left:0;}
.eq-thumb .rate{position:absolute;bottom:10px;right:10px;background:var(--ink);color:var(--amber-2);
  font-family:var(--font-mono);font-size:12px;font-weight:600;padding:4px 8px;display:flex;align-items:center;gap:5px;}
.eq-body{padding:18px;display:flex;flex-direction:column;gap:10px;flex:1;}
.eq-body h3{font-size:21px;}
.eq-vendor{font-family:var(--font-mono);font-size:12px;color:var(--steel-500);letter-spacing:.04em;}
.eq-vendor a{color:var(--amber-deep);}
.eq-price{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.eq-price b{font-family:var(--font-display);font-size:30px;color:var(--ink);line-height:1;}
.eq-price small{font-family:var(--font-mono);font-size:12px;color:var(--steel-500);}
.eq-tiers{display:flex;gap:6px;font-family:var(--font-mono);font-size:11.5px;}
.eq-tiers span{background:var(--paper-3);padding:4px 7px;color:var(--ink-2);}
.eq-foot{margin-top:auto;display:flex;gap:8px;border-top:2px solid var(--paper-3);padding-top:14px;}
.eq-foot .btn{flex:1;justify-content:center;padding:12px;font-size:14px;}

/* ============================================================
   ABOUT / SPLIT
   ============================================================ */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center;}
.media-ph{position:relative;background:
   repeating-linear-gradient(135deg,var(--paper-3) 0 14px,#ded7c8 14px 28px);
   border:2px solid var(--ink);aspect-ratio:4/3;display:grid;place-items:center;}
.media-ph .ti{font-size:120px;color:var(--ink);opacity:.7;}
.media-ph .ph-tag{position:absolute;bottom:12px;left:12px;font-family:var(--font-mono);font-size:11px;
  background:var(--ink);color:var(--amber-2);padding:5px 9px;letter-spacing:.08em;}
.about-list{display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;margin:22px 0 28px;}
.about-list li{display:flex;gap:10px;font-size:15px;align-items:flex-start;}
.about-list .ti{color:var(--amber-deep);font-size:20px;flex:none;}

.exp-badge{position:absolute;top:-22px;right:-22px;background:var(--amber);border:3px solid var(--ink);
  width:130px;height:130px;display:grid;place-items:center;text-align:center;
  clip-path:polygon(50% 0,93% 25%,93% 75%,50% 100%,7% 75%,7% 25%);}
.exp-badge b{font-family:var(--font-display);font-size:40px;line-height:.9;color:var(--ink);}
.exp-badge span{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.quote{background:var(--paper-2);border:2px solid var(--ink);padding:28px;position:relative;}
.quote .mark{font-family:var(--font-display);font-size:70px;color:var(--amber);line-height:.6;height:34px;}
.quote p{font-size:15.5px;color:var(--ink-2);margin:8px 0 20px;}
.quote .who{display:flex;align-items:center;gap:12px;border-top:2px solid var(--paper-3);padding-top:16px;}
.quote .av{width:48px;height:48px;background:var(--ink);color:var(--amber);display:grid;place-items:center;font-size:22px;}
.quote .who b{font-family:var(--font-display);font-size:16px;display:block;text-transform:uppercase;}
.quote .who span{font-family:var(--font-mono);font-size:11.5px;color:var(--steel-500);text-transform:uppercase;letter-spacing:.06em;}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{background:var(--ink);color:#fff;position:relative;overflow:hidden;}
.cta::before{content:"";position:absolute;inset:0;background:var(--hazard);opacity:.06;}
.cta .wrap{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;padding-block:clamp(40px,5vw,64px);}
.cta h2{font-size:clamp(28px,3.6vw,46px);max-width:18ch;}
.cta h2 .hl{color:var(--amber);}

/* ============================================================
   BLOG CARDS
   ============================================================ */
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post{background:var(--paper-2);border:2px solid var(--ink);display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s;}
.post:hover{transform:translateY(-4px);box-shadow:var(--shadow-hard);}
.post .pthumb{aspect-ratio:16/10;border-bottom:2px solid var(--ink);position:relative;display:grid;place-items:center;
  background:repeating-linear-gradient(135deg,var(--paper-3) 0 12px,#ded7c8 12px 24px);}
.post .pthumb > .ti{font-size:64px;color:var(--ink);opacity:.6;}
.post .pthumb .tag{position:absolute;top:0;left:0;}
.post .pbody{padding:22px;display:flex;flex-direction:column;gap:12px;flex:1;}
.post .pmeta{font-family:var(--font-mono);font-size:12px;color:var(--steel-500);display:flex;gap:16px;}
.post .pmeta span{display:inline-flex;gap:6px;align-items:center;}
.post h3{font-size:22px;}
.post p{font-size:14.5px;color:var(--steel-700);}
.post .more{font-family:var(--font-display);text-transform:uppercase;font-weight:600;letter-spacing:.05em;
  color:var(--amber-deep);display:inline-flex;gap:7px;align-items:center;margin-top:auto;}
.post .more:hover{gap:12px;}

/* ============================================================
   PAGE HEADER (subpages)
   ============================================================ */
.pagehead{background:var(--ink);color:#fff;position:relative;overflow:hidden;border-bottom:3px solid var(--amber);}
.pagehead::before{content:"";position:absolute;inset:0;background:var(--hazard);opacity:.05;}
.pagehead .wrap{position:relative;z-index:2;padding-block:clamp(46px,6vw,84px);}
.pagehead h1{font-size:clamp(36px,5.5vw,68px);}
.crumbs{font-family:var(--font-mono);font-size:13px;color:var(--steel-300);margin-top:14px;display:flex;gap:8px;letter-spacing:.04em;}
.crumbs a:hover{color:var(--amber-2);}
.crumbs .sep{color:var(--amber);}

/* ============================================================
   SPONSORS
   ============================================================ */
.sponsors{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--ink);}
.sponsors .sp{flex:1 1 16.66%;min-width:140px;aspect-ratio:5/2;display:grid;place-items:center;
  border-right:2px solid var(--paper-3);border-bottom:2px solid var(--paper-3);color:var(--steel-300);font-size:40px;background:var(--paper-2);}
.sponsors .sp:hover{color:var(--amber-deep);background:var(--paper);}

/* ============================================================
   EQUIPMENT CATALOG (filters)
   ============================================================ */
.catalog{display:grid;grid-template-columns:280px 1fr;gap:32px;align-items:start;}
.filters{border:2px solid var(--ink);background:var(--paper-2);position:sticky;top:96px;}
.filters .fhead{background:var(--ink);color:#fff;padding:14px 18px;font-family:var(--font-display);text-transform:uppercase;font-size:17px;letter-spacing:.05em;display:flex;align-items:center;gap:10px;}
.filters .fhead .ti{color:var(--amber);}
.fgroup{padding:18px;border-bottom:2px solid var(--paper-3);}
.fgroup:last-child{border-bottom:0;}
.fgroup h5{font-family:var(--font-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-700);margin-bottom:12px;}
.fopt{display:flex;align-items:center;gap:10px;padding:7px 0;font-size:15px;cursor:pointer;user-select:none;}
.fopt input{width:18px;height:18px;accent-color:var(--amber-deep);}
.fopt .ct{margin-left:auto;font-family:var(--font-mono);font-size:12px;color:var(--steel-500);}
.fopt:hover{color:var(--amber-deep);}
.catalog-top{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap;}
.catalog-top .res{font-family:var(--font-mono);font-size:13px;color:var(--steel-700);}
.catalog-top .res b{color:var(--ink);}
.sortbar{display:flex;align-items:center;gap:10px;}
.sortbar select{padding:10px 12px;border:2px solid var(--ink);background:var(--paper-2);font-family:var(--font-body);font-size:14px;}
.no-res{padding:60px;text-align:center;border:2px dashed var(--steel-300);font-family:var(--font-mono);color:var(--steel-500);grid-column:1/-1;}

/* ============================================================
   PRODUCT DETAIL
   ============================================================ */
.pd-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,52px);align-items:start;}
.pd-gallery .pd-main{aspect-ratio:4/3;border:2px solid var(--ink);background:repeating-linear-gradient(135deg,var(--paper-3) 0 14px,#ded7c8 14px 28px);display:grid;place-items:center;position:relative;}
.pd-gallery .pd-main > .ti{font-size:160px;color:var(--ink);opacity:.8;}
.pd-thumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px;}
.pd-thumbs .t{aspect-ratio:1;border:2px solid var(--ink);background:var(--paper-3);display:grid;place-items:center;font-size:34px;color:var(--ink);opacity:.7;cursor:pointer;}
.pd-thumbs .t.on,.pd-thumbs .t:hover{border-color:var(--amber-deep);opacity:1;background:var(--amber-soft);}
.pd-info h1{font-size:clamp(30px,3.6vw,46px);}
.pricebox{border:3px solid var(--ink);margin:22px 0;}
.pricebox .pb-head{background:var(--hazard);height:12px;}
.pricebox .pb-body{padding:22px;display:flex;flex-direction:column;gap:16px;}
.tier-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
.tier{border:2px solid var(--ink);padding:14px;text-align:center;cursor:pointer;background:var(--paper-2);}
.tier.on{background:var(--amber);}
.tier span{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--steel-700);}
.tier.on span{color:var(--ink-2);}
.tier b{font-family:var(--font-display);font-size:26px;display:block;margin-top:4px;}
.qty{display:flex;align-items:center;gap:0;border:2px solid var(--ink);width:fit-content;}
.qty button{width:44px;height:44px;background:var(--paper-2);border:0;font-size:20px;border-right:2px solid var(--ink);}
.qty button:last-child{border-right:0;border-left:2px solid var(--ink);}
.qty input{width:60px;height:44px;border:0;text-align:center;font-family:var(--font-mono);font-size:16px;}
.specs{border:2px solid var(--ink);}
.specs .srow{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--paper-3);}
.specs .srow:last-child{border-bottom:0;}
.specs .srow div{padding:13px 16px;font-size:14.5px;}
.specs .srow div:first-child{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--steel-700);background:var(--paper);border-right:1px solid var(--paper-3);}
.tabs{display:flex;gap:0;border-bottom:3px solid var(--ink);margin-top:10px;}
.tabs button{background:transparent;border:0;padding:14px 22px;font-family:var(--font-display);text-transform:uppercase;font-size:16px;letter-spacing:.04em;border-bottom:4px solid transparent;margin-bottom:-3px;}
.tabs button.on{border-color:var(--amber);}
.tabpane{display:none;padding-top:24px;}
.tabpane.on{display:block;}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,4vw,52px);align-items:start;}
.info-card{border:2px solid var(--ink);background:var(--paper-2);padding:24px;display:flex;gap:16px;margin-bottom:16px;align-items:flex-start;}
.info-card .ic{width:54px;height:54px;flex:none;background:var(--ink);color:var(--amber);display:grid;place-items:center;font-size:26px;
  clip-path:polygon(0 0,100% 0,100% 76%,76% 100%,0 100%);}
.info-card h4{font-size:18px;margin-bottom:4px;}
.info-card p{font-size:14.5px;color:var(--steel-700);font-family:var(--font-mono);}
.form-card{border:3px solid var(--ink);background:var(--paper-2);}
.form-card .fc-head{background:var(--hazard);height:12px;}
.form-card .fc-body{padding:clamp(22px,3vw,36px);}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.form-card .field textarea{width:100%;padding:13px 14px;border:2px solid var(--ink);background:var(--paper);font-family:var(--font-body);font-size:15px;min-height:140px;resize:vertical;}
.form-card .field textarea:focus{outline:3px solid var(--amber);outline-offset:-2px;}
.map-ph{border:2px solid var(--ink);aspect-ratio:21/8;margin-top:30px;background:repeating-linear-gradient(135deg,var(--paper-3) 0 16px,#ded7c8 16px 32px);display:grid;place-items:center;}
.map-ph .ti{font-size:60px;color:var(--ink);opacity:.5;}

/* toast */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(140%);
  background:var(--ink);color:#fff;border:2px solid var(--amber);padding:14px 22px;z-index:300;
  font-family:var(--font-mono);font-size:14px;display:flex;align-items:center;gap:10px;transition:transform .3s;box-shadow:var(--shadow-hard);}
.toast.show{transform:translateX(-50%) translateY(0);}
.toast .ti{color:var(--amber-2);font-size:20px;}

/* article body */
.article{max-width:760px;margin:0 auto;}
.article p{margin-bottom:20px;font-size:17px;color:var(--ink-2);}
.article h2{font-size:30px;margin:36px 0 16px;}
.article h3{font-size:23px;margin:28px 0 12px;}
.article blockquote{border-left:5px solid var(--amber);background:var(--paper-2);padding:20px 24px;margin:26px 0;font-size:18px;font-style:italic;}
.article ul.bul{list-style:none;margin:0 0 20px;}
.article ul.bul li{padding-left:28px;position:relative;margin-bottom:10px;}
.article ul.bul li::before{content:"";position:absolute;left:0;top:9px;width:12px;height:12px;background:var(--amber);border:2px solid var(--ink);}

/* utilities */
.mt-s{margin-top:14px;}.mt-m{margin-top:26px;}.mt-l{margin-top:42px;}
.hide{display:none !important;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:24px;}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .hero-grid{grid-template-columns:1fr;}
  .eq-grid{grid-template-columns:repeat(3,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
  .catalog{grid-template-columns:1fr;}
  .filters{position:static;}
}
@media(max-width:860px){
  .menu,.nav-actions .icon-btn.dk{display:none;}
  .burger{display:grid;}
  .steps,.feat-grid,.eq-grid,.eq-grid--3,.quotes,.blog-grid,.stats-grid{grid-template-columns:repeat(2,1fr);}
  .step{border-bottom:3px solid var(--ink);}
  .step:nth-child(2n){border-right:0;}
  .split,.pd-grid,.contact-grid{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .about-list{grid-template-columns:1fr;}
}
@media(max-width:560px){
  body{font-size:16px;}
  .eq-grid,.eq-grid--3,.feat-grid,.quotes,.blog-grid,.stats-grid,.steps{grid-template-columns:1fr;}
  .step{border-right:0;}
  .footer-grid{grid-template-columns:1fr;}
  .tier-row{grid-template-columns:1fr;}
  .stat:not(:last-child)::after{display:none;}
  .exp-badge{width:104px;height:104px;top:-14px;right:-10px;}
  .topbar .tb-info{display:none;}
}