/* Equipment & Technologies Bangladesh — equipmenttechbd.com
   Same look as the original site (orange #ED7527, brown #954918, Teko headings) */
:root {
  --orange: #ED7527;
  --orange-dark: #D05C11;
  --brown: #954918;
  --brown-dark: #6E3511;
  --ink: #1E1E1E;
  --ink-soft: #4A4A4A;
  --muted: #7A7A7A;
  --line: #E6E2DC;
  --paper: #FFFFFF;
  --paper-2: #F6F3EF;
  --good: #2F7A4F;
  --wa: #25D366;
  --head: 'Teko', 'Arial Narrow', sans-serif;
  --body: 'Open Sans', Arial, Helvetica, sans-serif;
  --wrap: 1180px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--paper); font-size: 15px; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: var(--orange-dark); }
h1, h2, h3, h4 { font-family: var(--head); font-weight: 600; line-height: 1.05; letter-spacing: .01em; margin: 0; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: 8px 14px; z-index: 100; }
.skip:focus { left: 8px; }

/* ---------- top bar ---------- */
.topbar { background: var(--brown-dark); color: #F3E3D6; font-size: 13px; }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; min-height: 38px; flex-wrap: wrap; }
.topbar a { color: #F3E3D6; text-decoration: none; }
.topbar a:hover { color: #fff; }
.topbar .tb-contact { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar .tb-contact span { display: inline-flex; align-items: center; gap: 6px; }
.socials { display: flex; gap: 6px; }
.socials a { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; background: var(--orange); color: #fff; border-radius: 2px; transition: background .15s; }
.socials a:hover { background: #fff; color: var(--orange); }
.socials svg { width: 15px; height: 15px; }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 3px solid var(--orange); box-shadow: 0 2px 10px rgba(0,0,0,.05); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; min-height: 76px; }
.brand { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { height: 56px; width: auto; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.nav a { font-family: var(--head); font-size: 21px; font-weight: 500; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 10px 12px 6px; line-height: 1; letter-spacing: .02em; }
.nav a:hover { color: var(--orange); }
.nav a.active { background: var(--orange); color: #fff; }
.hdr-actions { display: flex; align-items: center; gap: 8px; }
.btn-quote { font-family: var(--head); font-size: 20px; text-transform: uppercase; background: var(--ink); color: #fff; border: 0; padding: 11px 18px 7px; cursor: pointer; line-height: 1; letter-spacing: .03em; text-decoration: none; }
.btn-quote:hover { background: var(--orange); }
.lang-btn { background: none; border: 1px solid var(--line); color: var(--ink-soft); font: 600 12.5px var(--body); padding: 7px 10px; cursor: pointer; border-radius: 3px; }
.lang-btn:hover { border-color: var(--orange); color: var(--orange); }
.menu-btn { display: none; background: none; border: 0; width: 44px; height: 44px; cursor: pointer; padding: 10px; margin-left: auto; }
.menu-btn span { display: block; height: 3px; background: var(--ink); margin: 5px 0; transition: transform .2s, opacity .2s; }
.menu-open .menu-btn span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.menu-open .menu-btn span:nth-child(2) { opacity: 0; }
.menu-open .menu-btn span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1080px) {
  .menu-btn { display: block; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: #fff; flex-direction: column; align-items: stretch; padding: 8px 16px 16px; border-bottom: 3px solid var(--orange); box-shadow: 0 10px 20px rgba(0,0,0,.08); gap: 0; }
  .menu-open .nav { display: flex; }
  .nav a { padding: 13px 10px 9px; border-bottom: 1px solid var(--line); }
  .hdr-actions { margin-left: 0; }
  .site-header .wrap { gap: 10px; }
}
@media (max-width: 600px) {
  .brand img { height: 44px; }
  .site-header .wrap { min-height: 64px; }
  .btn-quote { font-size: 17px; padding: 9px 12px 6px; }
  .topbar .tb-email { display: none !important; }
  .hdr-actions .lang-btn { padding: 6px 7px; }
}
@media (max-width: 380px) { .btn-quote { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--head); font-size: 20px; text-transform: uppercase; letter-spacing: .03em; padding: 12px 22px 8px; border: 2px solid transparent; cursor: pointer; text-decoration: none; line-height: 1; transition: background .15s, color .15s, border-color .15s; }
.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover { background: var(--orange); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.7); }
.btn-ghost:hover { background: #fff; color: var(--ink); }
.btn-outline { background: #fff; color: var(--ink); border-color: var(--ink); }
.btn-outline:hover { background: var(--ink); color: #fff; }
.btn-wa { background: var(--wa); color: #fff; }
.btn-wa:hover { background: #1DA851; }
.btn[disabled] { opacity: .6; cursor: wait; }
.btn svg { width: 18px; height: 18px; margin-top: -3px; }

/* ---------- section headings (underlined like the original) ---------- */
.sec { padding: 64px 0; }
.sec-alt { background: var(--paper-2); }
.sec-title { text-align: center; margin-bottom: 34px; }
.sec-title h2 { font-size: clamp(36px, 5vw, 50px); color: var(--brown); text-transform: uppercase; display: inline-block; border-bottom: 4px solid var(--brown); padding-bottom: 2px; }
.sec-title p { color: var(--ink-soft); margin: 14px auto 0; max-width: 680px; }
.lead { max-width: 900px; margin: 0 auto; text-align: justify; color: var(--ink-soft); }

/* ---------- hero ---------- */
.hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(100deg, rgba(20,14,10,.96) 0%, rgba(20,14,10,.88) 45%, rgba(20,14,10,.35) 100%),
  repeating-linear-gradient(-45deg, rgba(237,117,39,.08) 0 2px, transparent 2px 22px); z-index: 1; }
.hero .wrap { position: relative; z-index: 2; padding-top: 76px; padding-bottom: 84px; }
.hero .kicker { font-family: var(--head); font-size: 22px; color: var(--orange); text-transform: uppercase; letter-spacing: .08em; }
.hero h1 { font-size: clamp(44px, 7vw, 82px); text-transform: uppercase; margin: 6px 0 4px; max-width: 760px; }
.hero h1 span { color: var(--orange); }
.hero .sub { font-family: var(--head); font-size: clamp(22px, 3vw, 30px); color: #EDE3DA; font-weight: 400; max-width: 680px; line-height: 1.1; }
.hero .actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-stripe { height: 8px; background: repeating-linear-gradient(-45deg, var(--orange) 0 18px, var(--ink) 18px 36px); position: relative; z-index: 2; }
.hero-search { margin-top: 26px; display: flex; max-width: 560px; background: #fff; border-radius: 2px; overflow: hidden; }
.hero-search input { flex: 1; min-width: 0; border: 0; padding: 14px 16px; font: 15px var(--body); color: var(--ink); outline: none; }
.hero-search button { background: var(--orange); color: #fff; border: 0; padding: 0 20px; font-family: var(--head); font-size: 20px; text-transform: uppercase; cursor: pointer; padding-top: 4px; }
.hero-search button:hover { background: var(--orange-dark); }

/* page banner for inner pages */
.page-banner { background: linear-gradient(100deg, var(--brown-dark), var(--brown) 60%, var(--orange)); color: #fff; position: relative; overflow: hidden; }
.page-banner::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255,255,255,.05) 0 2px, transparent 2px 22px); }
.page-banner .wrap { position: relative; z-index: 1; padding-top: 46px; padding-bottom: 42px; }
.page-banner h1 { font-size: clamp(46px, 7vw, 72px); text-transform: uppercase; }
.crumbs { font-size: 13px; opacity: .9; margin-top: 4px; }
.crumbs a { color: #fff; }

/* ---------- category tiles (Our Best Equipments) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 860px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } }
.tile { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--paper-2); overflow: hidden; text-decoration: none; color: #fff; border: 1px solid var(--line); }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tile:hover img { transform: scale(1.06); }
.tile .ico { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--brown); }
.tile .ico svg { width: 46%; height: 46%; opacity: .85; }
.tile .label { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(transparent, rgba(0,0,0,.78)); padding: 40px 14px 10px; font-family: var(--head); font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; line-height: 1; }
.tile .label small { display: block; font-family: var(--body); font-size: 12px; text-transform: none; color: #F7C9A5; margin-top: 4px; letter-spacing: 0; }
.tile:hover .label { color: var(--orange); }
.center-cta { text-align: center; margin-top: 30px; }

/* ---------- services ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.svc { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--orange); padding: 22px 16px 18px; text-align: center; text-decoration: none; color: var(--ink); transition: transform .2s, box-shadow .2s; display: flex; flex-direction: column; align-items: center; }
.svc:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.svc .ic { width: 64px; height: 64px; border-radius: 50%; background: var(--brown); color: #fff; display: flex; align-items: center; justify-content: center; margin-bottom: 12px; }
.svc .ic svg { width: 32px; height: 32px; }
.svc h3 { font-size: 28px; text-transform: uppercase; overflow-wrap: anywhere; }
@media (max-width: 600px) { .svc h3 { font-size: 24px; } .svc { padding: 18px 10px 14px; } }
.svc p { font-size: 13px; color: var(--ink-soft); margin: 6px 0 10px; line-height: 1.5; }
.svc .more { margin-top: auto; font-family: var(--head); font-size: 18px; color: var(--orange); text-transform: uppercase; }

/* ---------- landmark projects ---------- */
.proj-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 860px) { .proj-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.proj { position: relative; background: var(--ink); color: #fff; padding: 28px 18px 22px; min-height: 150px; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.proj::before { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border: 18px solid rgba(237,117,39,.25); border-radius: 50%; }
.proj .ic { color: var(--orange); margin-bottom: auto; }
.proj .ic svg { width: 38px; height: 38px; }
.proj h3 { font-size: clamp(22px, 2.6vw, 30px); text-transform: uppercase; margin-top: 14px; position: relative; }
.proj-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.proj-strip span { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--orange); padding: 8px 14px 4px; font-family: var(--head); font-size: 21px; text-transform: uppercase; line-height: 1.1; }

/* ---------- brands ---------- */
.brands { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .brands { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .brands { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } }
.brand-chip { border: 1px solid #CFCAC3; background: #fff; height: 74px; display: flex; align-items: center; justify-content: center; font-family: var(--head); font-size: 26px; font-weight: 600; color: #3A3A3A; letter-spacing: .04em; transition: color .15s, border-color .15s; text-align: center; line-height: 1; padding: 4px 6px 0; }
.brand-chip:hover { color: var(--orange); border-color: var(--orange); }
@media (max-width: 520px) { .brand-chip { font-size: 21px; height: 60px; } }

/* ---------- catalog ---------- */
.cat-bar { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 16px; }
.cat-pill { border: 1px solid var(--line); background: #fff; color: var(--ink-soft); font: 600 13px var(--body); padding: 8px 14px; cursor: pointer; border-radius: 999px; }
.cat-pill:hover { border-color: var(--orange); color: var(--orange-dark); }
.cat-pill.active { background: var(--orange); border-color: var(--orange); color: #fff; }
.cat-search { display: flex; max-width: 560px; margin: 0 auto 22px; border: 2px solid var(--ink); background: #fff; }
.cat-search input { flex: 1; min-width: 0; border: 0; padding: 12px 14px; font: 15px var(--body); outline: none; }
.cat-search .clear { background: none; border: 0; font-size: 22px; color: var(--muted); cursor: pointer; padding: 0 10px; }
.cat-search button[type=submit] { background: var(--ink); color: #fff; border: 0; padding: 4px 18px 0; font-family: var(--head); font-size: 19px; text-transform: uppercase; cursor: pointer; }
.search-note { text-align: center; color: var(--ink-soft); margin: -8px 0 18px; font-size: 14px; }
.eq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
@media (max-width: 560px) { .eq-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
.eq-card { background: #fff; border: 1px solid var(--line); display: flex; flex-direction: column; transition: box-shadow .2s; }
.eq-card:hover { box-shadow: 0 10px 24px rgba(0,0,0,.08); }
.eq-thumb { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; display: block; }
.eq-thumb img { width: 100%; height: 100%; object-fit: cover; }
.eq-thumb .ph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; }
.eq-thumb .count { position: absolute; right: 8px; bottom: 8px; background: rgba(0,0,0,.6); color: #fff; font-size: 11.5px; padding: 2px 7px; border-radius: 10px; }
.av { position: absolute; left: 8px; top: 8px; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 3px; background: #fff; color: var(--ink); z-index: 1; box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.av-available { color: var(--good); }
.av-on_rent { color: #B4560E; }
.av-maintenance { color: #8A6A00; }
.av-on_order { color: #2F5C9A; }
.eq-body { padding: 12px 14px 4px; flex: 1; }
.eq-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--orange-dark); }
.eq-body h3 { font-family: var(--body); font-size: 15px; font-weight: 700; line-height: 1.35; margin: 3px 0 4px; }
.eq-body h3 a { color: var(--ink); text-decoration: none; }
.eq-body h3 a:hover { color: var(--orange-dark); }
.price { font-size: 13.5px; color: var(--ink-soft); }
.price b { color: var(--ink); }
.eq-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 14px 14px; }
.eq-actions .btn { font-size: 17px; padding: 9px 6px 6px; }
@media (max-width: 560px) {
  .eq-body { padding: 9px 9px 2px; }
  .eq-body h3 { font-size: 13.5px; }
  .eq-actions { grid-template-columns: 1fr; padding: 8px 9px 10px; }
  .eq-actions .btn { font-size: 16px; }
}
.empty { text-align: center; color: var(--ink-soft); padding: 30px 16px; background: var(--paper-2); border: 1px dashed var(--line); }
.loading { text-align: center; color: var(--muted); padding: 30px; }
.skel { background: linear-gradient(90deg, #EFEBE6 25%, #F7F4F0 37%, #EFEBE6 63%); background-size: 400% 100%; animation: sk 1.3s ease infinite; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------- detail ---------- */
.detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 34px; align-items: start; }
@media (max-width: 860px) { .detail { grid-template-columns: 1fr; gap: 20px; } }
.gal-main { position: relative; aspect-ratio: 4 / 3; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
.gal-main img { width: 100%; height: 100%; object-fit: contain; background: #fff; }
.gal-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; cursor: pointer; }
.gal-nav.prev { left: 10px; } .gal-nav.next { right: 10px; }
.gal-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.gal-thumbs button { width: 70px; height: 54px; border: 2px solid transparent; padding: 0; cursor: pointer; background: var(--paper-2); }
.gal-thumbs button.on { border-color: var(--orange); }
.gal-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.detail h1 { font-size: clamp(34px, 4.5vw, 48px); text-transform: uppercase; margin: 6px 0 8px; }
.detail .desc { white-space: pre-line; color: var(--ink-soft); margin: 14px 0 18px; }
.spec { width: 100%; border-collapse: collapse; margin-bottom: 20px; font-size: 14px; }
.spec td { border-bottom: 1px solid var(--line); padding: 8px 6px; vertical-align: top; }
.spec td:first-child { font-weight: 600; width: 42%; color: var(--ink); }
.detail .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.share { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 18px; font-size: 13px; color: var(--muted); }
.share a, .share button { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; color: var(--ink-soft); padding: 6px 11px; border-radius: 3px; font: 600 12.5px var(--body); cursor: pointer; text-decoration: none; }
.share a:hover, .share button:hover { border-color: var(--orange); color: var(--orange-dark); }
.share svg { width: 15px; height: 15px; }
.back { display: inline-block; margin-bottom: 18px; font-size: 14px; text-decoration: none; color: var(--ink-soft); }
.back:hover { color: var(--orange-dark); }

/* ---------- text pages ---------- */
.prose { max-width: 860px; margin: 0 auto; }
.prose p { color: var(--ink-soft); text-align: justify; }
.prose h2 { font-size: 40px; color: var(--brown); text-transform: uppercase; margin: 34px 0 6px; }
.prose h3 { font-size: 26px; margin: 22px 0 4px; }
.prose ul { color: var(--ink-soft); padding-left: 20px; }
.about-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 34px; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }
.about-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--orange); padding: 22px 20px; }
.about-card h3 { font-size: 34px; color: var(--brown); text-transform: uppercase; margin-bottom: 6px; }
.about-card p { margin: 0; color: var(--ink-soft); font-size: 14px; text-align: justify; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 30px 0 0; }
@media (max-width: 760px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fact { background: var(--ink); color: #fff; padding: 18px 16px 14px; }
.fact b { display: block; font-family: var(--head); font-size: 40px; color: var(--orange); line-height: 1; font-weight: 600; }
.fact span { font-size: 13px; color: #DDD; }
.svc-block { display: grid; grid-template-columns: 90px 1fr; gap: 22px; padding: 30px 0; border-bottom: 1px solid var(--line); scroll-margin-top: 100px; }
.svc-block:last-child { border-bottom: 0; }
.svc-block .ic { width: 90px; height: 90px; border-radius: 50%; background: var(--brown); color: #fff; display: flex; align-items: center; justify-content: center; }
.svc-block .ic svg { width: 44px; height: 44px; }
.svc-block h2 { font-size: 40px; text-transform: uppercase; color: var(--brown); }
.svc-block h3 { font-family: var(--body); font-size: 16px; font-weight: 700; margin: 4px 0 8px; color: var(--orange-dark); line-height: 1.4; }
.svc-block p { margin: 0 0 14px; color: var(--ink-soft); text-align: justify; }
@media (max-width: 600px) { .svc-block { grid-template-columns: 1fr; gap: 10px; } .svc-block .ic { width: 64px; height: 64px; } .svc-block .ic svg { width: 32px; height: 32px; } }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.gallery figure { margin: 0; background: #fff; border: 1px solid var(--line); }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; cursor: zoom-in; }
.gallery figcaption { padding: 10px 12px 12px; font-size: 14px; color: var(--ink); font-weight: 600; line-height: 1.4; }
.gallery .g-open { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.gallery .g-open figcaption { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.gallery .g-more { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--orange-dark); }
.gallery .g-open:hover .g-more, .gallery .g-open:focus-visible .g-more { text-decoration: underline; }
.post-modal { max-width: 760px; padding: 0 0 18px; }
.post-modal img { width: 100%; max-height: 70vh; object-fit: contain; background: #111; display: block; }
.post-modal .post-text { white-space: pre-line; padding: 16px 22px 0; font-size: 15px; line-height: 1.65; color: var(--ink); }
.post-modal .post-acts { padding: 14px 22px 0; }
.post-modal .x { z-index: 2; background: rgba(255,255,255,.92); }
.vendor-band { background: var(--brown); color: #fff; padding: 40px 0; }
.vendor-band .wrap { display: flex; gap: 24px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.vendor-band h2 { font-family: var(--head); font-size: 36px; line-height: 1; text-transform: uppercase; margin: 0 0 8px; color: #fff; }
.vendor-band p { margin: 0; max-width: 62ch; color: #F2E3D3; }
.vendor-band .vb-acts { display: flex; gap: 10px; flex-wrap: wrap; }
.btn-outline-light { border: 2px solid #fff; color: #fff; background: transparent; }
.btn-outline-light:hover { background: #fff; color: var(--brown); }
.tb-vendor a { font-weight: 600; }
.news-list { display: flex; flex-direction: column; gap: 18px; max-width: 860px; margin: 0 auto; }
.news { display: grid; grid-template-columns: 220px 1fr; background: #fff; border: 1px solid var(--line); }
.news.noimg { grid-template-columns: 1fr; }
.news img { width: 100%; height: 100%; object-fit: cover; min-height: 160px; }
.news .b { padding: 16px 20px; }
.news .date { font-size: 12px; font-weight: 700; color: var(--orange-dark); text-transform: uppercase; letter-spacing: .05em; }
.news h3 { font-size: 30px; margin: 4px 0 6px; }
.news p { margin: 0; white-space: pre-line; color: var(--ink-soft); font-size: 14px; }
@media (max-width: 600px) { .news { grid-template-columns: 1fr; } .news img { max-height: 220px; } }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.9); z-index: 120; display: flex; align-items: center; justify-content: center; padding: 20px; cursor: zoom-out; }
.lightbox img { max-height: 90vh; max-width: 100%; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 30px; align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.info-card { background: var(--ink); color: #fff; padding: 26px 24px; }
.info-card h3 { font-size: 32px; color: var(--orange); text-transform: uppercase; margin-bottom: 8px; }
.info-row { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 12px 0; border-bottom: 1px solid rgba(255,255,255,.12); font-size: 14.5px; }
.info-row:last-child { border-bottom: 0; }
.info-row svg { width: 22px; height: 22px; color: var(--orange); margin-top: 2px; }
.info-row a { color: #fff; text-decoration: none; }
.info-row a:hover { color: var(--orange); }
.info-row small { display: block; color: #BBB; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.hours { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours td { padding: 3px 0; }
.hours td:last-child { text-align: right; }
.map { margin-top: 18px; border: 0; width: 100%; height: 260px; display: block; background: var(--paper-2); }
.form-card { background: #fff; border: 1px solid var(--line); border-top: 4px solid var(--orange); padding: 24px; }
.form-card h3 { font-size: 34px; text-transform: uppercase; color: var(--brown); }
.form-card .hint { color: var(--ink-soft); font-size: 14px; margin: 2px 0 14px; }

/* ---------- forms & modal ---------- */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.field label { font-size: 12.5px; font-weight: 700; color: var(--ink); }
.field input, .field textarea, .field select { font: 15px var(--body); padding: 10px 12px; border: 1px solid #CFCAC3; border-radius: 2px; background: #fff; color: var(--ink); width: 100%; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--orange); outline-offset: -1px; border-color: var(--orange); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; } }
.radio-group { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; }
.radio-group label { font-weight: 400; display: flex; gap: 6px; align-items: center; cursor: pointer; }
.check { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--ink-soft); margin: 4px 0 14px; }
.check input { margin-top: 3px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.err { background: #FDECEA; color: #8A1C12; border: 1px solid #F3C2BC; padding: 10px 12px; font-size: 14px; margin-bottom: 12px; }
.ok-box { text-align: center; padding: 18px 6px; }
.ok-box .tick { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; background: var(--good); color: #fff; font-size: 34px; display: flex; align-items: center; justify-content: center; }
.ok-box h3 { font-size: 34px; text-transform: uppercase; }
.ok-box p { color: var(--ink-soft); }
.modal-bg { position: fixed; inset: 0; background: rgba(20,14,10,.6); z-index: 110; display: flex; align-items: flex-start; justify-content: center; padding: 30px 14px; overflow-y: auto; }
.modal { background: #fff; width: 100%; max-width: 620px; border-top: 5px solid var(--orange); padding: 22px 22px 18px; position: relative; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.modal h2 { font-size: 38px; text-transform: uppercase; color: var(--brown); padding-right: 40px; }
.modal .sub { color: var(--ink-soft); font-size: 14px; margin-bottom: 14px; }
.modal .x { position: absolute; right: 10px; top: 8px; width: 40px; height: 40px; border: 0; background: none; font-size: 30px; cursor: pointer; color: var(--muted); line-height: 1; }
.modal .x:hover { color: var(--ink); }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; flex-wrap: wrap; }

/* ---------- footer (two brown bands like the original) ---------- */
.foot-contact { background: var(--brown); color: #fff; border-top: 6px solid var(--orange); }
.foot-contact .wrap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 34px; padding-bottom: 30px; }
@media (max-width: 760px) { .foot-contact .wrap { grid-template-columns: 1fr; gap: 18px; } }
.fc h4 { font-size: 30px; color: var(--orange); display: flex; align-items: center; gap: 10px; margin-bottom: 6px; filter: brightness(1.15); }
.fc h4 svg { width: 24px; height: 24px; }
.fc p { margin: 0; font-size: 14px; line-height: 1.7; }
.fc a { color: #fff; text-decoration: none; }
.fc a:hover { text-decoration: underline; }
.foot-main { background: var(--brown-dark); color: #F1E6DD; border-top: 6px solid var(--orange); }
.foot-main .wrap { display: grid; grid-template-columns: 1.1fr 1fr 1.1fr; gap: 30px; padding-top: 36px; padding-bottom: 30px; }
@media (max-width: 860px) { .foot-main .wrap { grid-template-columns: 1fr; gap: 24px; } }
.foot-main h4 { font-size: 30px; color: var(--orange); margin-bottom: 8px; filter: brightness(1.15); }
.foot-main p { font-size: 14px; margin: 0 0 14px; text-align: justify; }
.foot-main .socials { margin-top: 6px; }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 13.5px; margin-top: 12px; }
.foot-links a { color: #F1E6DD; text-decoration: none; }
.foot-links a:hover { color: #fff; text-decoration: underline; }
.foot-form .field input, .foot-form .field textarea { border-color: transparent; }
.foot-form .field label { color: #F1E6DD; font-weight: 600; }
.foot-form .check { color: #F1E6DD; }
.foot-form .check a { color: #fff; }
.foot-form .btn { width: 100%; }
.foot-form .err { margin-bottom: 10px; }
.foot-form .ok-box { background: rgba(255,255,255,.08); color: #fff; }
.foot-form .ok-box p { color: #F1E6DD; }
.copy { background: #4D250C; color: #CDB8A8; font-size: 12.5px; }
.copy .wrap { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.copy a { color: #CDB8A8; }

/* ---------- floating WhatsApp ---------- */
.wa-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; width: 58px; height: 58px; border-radius: 50%; background: var(--wa); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 18px rgba(0,0,0,.25); transition: transform .2s; }
.wa-fab:hover { transform: scale(1.08); }
.wa-fab svg { width: 32px; height: 32px; }
.wa-fab .tip { position: absolute; right: 68px; background: #fff; color: var(--ink); font-size: 13px; font-weight: 600; padding: 6px 10px; border-radius: 4px; white-space: nowrap; box-shadow: 0 3px 10px rgba(0,0,0,.15); opacity: 0; pointer-events: none; transition: opacity .2s; }
.wa-fab:hover .tip { opacity: 1; }

[hidden] { display: none !important; }
@media (max-width: 600px) { .lead, .prose p, .about-card p, .svc-block p, .foot-main p { text-align: left; } }

.map-link { display: flex; align-items: center; gap: 8px; justify-content: center; background: #fff; border: 1px solid var(--line); border-top: 0; padding: 10px; font-weight: 600; font-size: 14px; color: var(--ink); text-decoration: none; }
.map-link:hover { color: var(--orange-dark); }
.map-link svg { width: 18px; height: 18px; color: var(--orange); }

/* brands: endless sliding strip like the original site */
.brand-slider { overflow: hidden; position: relative; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.brand-track { display: flex; gap: 14px; width: max-content; animation: brandSlide 70s linear infinite; }
.brand-slider:hover .brand-track { animation-play-state: paused; }
.brand-track .brand-chip { width: 190px; flex-shrink: 0; height: 90px; padding: 8px 10px; }
.brand-track .brand-chip img { width: 100%; height: 100%; object-fit: contain; transition: transform .2s; }
.brand-track .brand-chip:hover img { transform: scale(1.06); }
@keyframes brandSlide { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 7px)); } }
@media (max-width: 520px) { .brand-track .brand-chip { width: 140px; height: 68px; } }
@media (prefers-reduced-motion: reduce) { .brand-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .brand-track .brand-chip[aria-hidden] { display: none; } }

/* hero: slideshow of real machines + fleet mosaic */
.hero { min-height: 560px; }
.hero::before { background:
  linear-gradient(100deg, rgba(20,14,10,.95) 0%, rgba(20,14,10,.82) 42%, rgba(20,14,10,.45) 70%, rgba(20,14,10,.25) 100%),
  repeating-linear-gradient(-45deg, rgba(237,117,39,.07) 0 2px, transparent 2px 22px); }
.hero-slides { position: absolute; inset: 0; }
.hero-slide { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: 0; transform: scale(1.04); transition: opacity 1.4s ease, transform 7s ease; }
.hero-slide.on { opacity: 1; transform: scale(1.12); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 40px; align-items: center; }
.hero-fleet { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; opacity: 0; transform: translateY(10px); transition: opacity .6s, transform .6s; }
.hero-fleet.show { opacity: 1; transform: none; }
.fleet-card { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border: 3px solid rgba(255,255,255,.9); box-shadow: 0 10px 30px rgba(0,0,0,.45); background: #222; color: #fff; text-decoration: none; }
.fleet-card:nth-child(2) { transform: translateY(22px); }
.fleet-card:nth-child(4) { transform: translateY(22px); }
.fleet-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.fleet-card:hover img { transform: scale(1.08); }
.fleet-card span { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 10px 6px; background: linear-gradient(transparent, rgba(0,0,0,.85)); font-family: var(--head); font-size: 20px; line-height: 1; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fleet-card:hover span { color: var(--orange); }
.hero-caption { position: absolute; left: 20px; bottom: 16px; z-index: 2; font-size: 12.5px; }
.hero-caption a { color: #fff; background: rgba(0,0,0,.45); padding: 5px 10px; border-left: 3px solid var(--orange); text-decoration: none; }
.hero-caption a:hover { color: var(--orange); }
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-fleet { display: none; }
  .hero::before { background: linear-gradient(180deg, rgba(20,14,10,.78), rgba(20,14,10,.9)), repeating-linear-gradient(-45deg, rgba(237,117,39,.07) 0 2px, transparent 2px 22px); }
  .hero { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .hero-slide { transition: opacity .3s; transform: none !important; } }

.ref-no { font-size: 15px; margin: 4px 0; }
.ref-no b { font-family: var(--head); font-size: 26px; letter-spacing: .06em; color: var(--brown); vertical-align: -3px; }
.small-note { font-size: 13px; color: var(--muted); }
.foot-form .ref-no b { color: #fff; }
.radio-group label { white-space: nowrap; }
.modal .field-row .radio-group { gap: 8px 16px; }

.type-bar{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-4px 0 18px}
.type-bar[hidden]{display:none}
.type-chip{border:1px solid var(--line);background:#fff;color:var(--ink-soft);padding:6px 12px;font:inherit;font-size:13.5px;cursor:pointer;border-radius:999px;line-height:1.2}
.type-chip span{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:#f2eee8;font-size:11.5px;font-weight:700;color:var(--ink-soft)}
.type-chip:hover{border-color:var(--orange);color:var(--orange)}
.type-chip.active{background:var(--orange);border-color:var(--orange);color:#fff}
.type-chip.active span{background:rgba(255,255,255,.25);color:#fff}
@media (max-width:640px){.type-bar{justify-content:flex-start;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;-webkit-overflow-scrolling:touch}.type-chip{flex:0 0 auto}}

/* video badge + player */
.has-vid { position: absolute; right: 8px; bottom: 8px; z-index: 1; background: rgba(0,0,0,.72); color: #fff; font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 3px; }
.item-video { margin-top: 14px; }

/* /rent/<type> landing pages */
.rent-cta{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0 8px}
#app .sec h2{margin:34px 0 14px}
#app details{border:1px solid #eee;border-radius:8px;padding:10px 14px;margin:8px 0}
#app details summary{cursor:pointer;font-weight:600}
#app details p{margin:8px 0 0}
.rent-links a{white-space:nowrap}

/* footer: short get-in-touch instead of the full form */
.foot-ask{color:#F1E6DD;margin:0 0 14px}
.foot-cta{display:flex;flex-direction:column;gap:10px;max-width:340px}
.foot-cta .btn{width:100%;justify-content:center;text-align:center}
.btn-call{background:transparent;border:2px solid #F1E6DD;color:#fff}
.foot-msg{color:#F1E6DD;text-decoration:underline;font-size:14px}

/* "Read more" for long texts on phones */
.more-btn{display:none}
@media (max-width:760px){.clamp:not(.open)>p{display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.more-btn{display:inline-block;background:none;border:0;padding:6px 0;color:var(--orange,#E8762B);font-weight:700;font-size:15px;cursor:pointer;text-decoration:underline}}

/* /transport form */
.tr-h { font: 700 15px var(--body); color: var(--brown); margin: 16px 0 8px; padding-top: 10px; border-top: 1px solid var(--line); text-transform: none; }
.cform .tr-h:first-child { border-top: 0; padding-top: 0; margin-top: 0; }