.elementor-kit-1323{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-1323 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================Hamza — Shared Site StylesheetCovers: about page, brake-liner supplier pages, fasteners supplier pages,export page========================================================================== */

/* ---------- tokens & reset ---------- */
:root {
  --paper:#FAFAF7;
  --panel:#FFFFFF;
  --ink:#171717;
  --ink-soft:#404040;
  --steel:#6E6E6E;
  --hair:#E4E2DA;
  --hair-2:#EEEDE7;
  --gold:#F4B940;
  --gold-dk:#DA9E22;
  --gold-soft:#FDF3DD;
  --char:#191713;
  --wa:#1FA855;
  --ok:#2E7D57;
  --r:4px;
  --maxw:1180px;

}

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

html {
  scroll-behavior:smooth
}

body {
  font-family:'Inter',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden
}

h1,h2,h3,h4 {
  font-family:'Archivo',sans-serif;
  line-height:1.14;
  letter-spacing:-.01em
}

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

img {
  max-width:100%;
  display:block
}

.wrap {
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px
}

.eyebrow {
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold-dk);
  display:flex;
  align-items:center;
  gap:9px
}

.eyebrow::before {
  content:"";
  width:20px;
  height:2px;
  background:var(--gold)
}

.eyebrow svg {
  width:16px;
  height:16px
}

/* ---------- buttons ---------- */.btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:600;
  font-size:14px;
  border-radius:var(--r);
  padding:12px 18px;
  border:1px solid transparent;
  cursor:pointer;
  transition:.15s;
  white-space:nowrap
}

.btn-dark {
  background:var(--ink);
  color:#fff
}

.btn-dark.btn-gold:hover {
  background:var(--gold);
  color:#1a1a1a
}

.btn-gold:hover {
  background:var(--gold-dk)
}

.btn-wa {
  background:var(--wa);
  color:#fff
}

.btn-wa:hover,.btn-ghost:hover {
  background:#fff;
  color:var(--ink);
  border-color:var(--hair)
}

.btn-ghost {
  background:transparent;
  color:var(--ink);
  border-color:var(--ink)
}

/* breadcrumb strip (used on location/supplier pages) */.crumb {
  background:#fff;
  border-bottom:1px solid var(--hair)
}

.crumb .wrap {
  display:flex;
  gap:8px;
  align-items:center;
  height:44px;
  font-family:'IBM Plex Mono';
  font-size:12px;
  color:var(--steel);
  overflow-x:auto;
  white-space:nowrap
}

.crumb a {
  color:var(--gold-dk)
}

.crumb .sep {
  color:var(--hair)
}

.crumb .here {
  color:var(--ink)
}

/* ==========================================================================Location / Supplier pages (brake-liner, fasteners)========================================================================== */

/* hero (region) */.rhero {
  background:var(--char);
  color:#fff;
  position:relative;
  overflow:hidden
}

.rhero::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1200px 400px at 80% -10%,rgba(244,185,64,.16),transparent 60%)
}

.rhero .wrap {
  position:relative;
  z-index:1;
  padding:56px 24px 52px;
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:44px;
  align-items:center
}

@media(max-width:900px) {
  .rhero .wrap {
    grid-template-columns:1fr;
    gap:28px;
    padding:42px 24px
  }

}

.rhero .eyebrow {
  color:var(--gold)
}

.rhero h1 {
  font-size:clamp(30px,4.6vw,46px);
  font-weight:800;
  margin:14px 0 12px
}

.rhero h1 span {
  color:var(--gold)
}

.rhero p.sub {
  font-size:17px;
  color:#CFC9BC;
  max-width:56ch;
  margin-bottom:24px
}

.rhero .chips {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-bottom:26px
}

.rhero .chip {
  font-family:'IBM Plex Mono';
  font-size:11.5px;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:6px 11px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.2);
  color:#EDE9DF
}

.rhero .cta {
  display:flex;
  flex-wrap:wrap;
  gap:11px
}

.rcard {
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  border-radius:12px;
  padding:24px
}

.rcard h3 {
  font-size:14px;
  color:#fff;
  margin-bottom:14px;
  font-family:'IBM Plex Mono';
  letter-spacing:.06em;
  text-transform:uppercase
}

.rcard ul {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:12px
}

.rcard li {
  display:flex;
  gap:11px;
  align-items:center;
  font-size:14px;
  color:#E7E3D9
}

.rcard li svg {
  width:18px;
  height:18px;
  color:var(--gold);
  flex-shrink:0;
  margin-top:2px
}

/* trust strip */.trust {
  background:#fff;
  border-bottom:1px solid var(--hair)
}

.trust .wrap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0
}

.trust .i {
  padding:20px 22px;
  display:flex;
  gap:12px;
  border-right:1px solid var(--hair)
}

.trust .i svg {
  width:24px;
  height:24px;
  color:var(--gold-dk);
  flex-shrink:0
}

.trust .i h4 {
  font-size:13.5px;
  font-weight:700;
  margin-bottom:2px
}

.trust .i p {
  font-size:12px;
  color:var(--steel);
  line-height:1.4
}

@media(max-width:820px) {
  .trust .wrap {
    grid-template-columns:1fr 1fr
  }

  .trust .i:nth-child(2n) {
    border-right:0
  }

}

@media(max-width:440px) {
  .trust .wrap {
    grid-template-columns:1fr
  }

  .trust .i {
    border-right:0;
    border-bottom:1px solid var(--hair)
  }

}

/* sticky section sub-nav */.secnav {
  position:sticky;
  top:0;
  z-index:60;
  background:#fff;
  border-bottom:1px solid var(--hair)
}

.secnav .wrap {
  display:flex;
  gap:2px;
  height:52px;
  align-items:center;
  overflow-x:hidden
}

.secnav a {
  font-family:'IBM Plex Mono';
  font-size:12px;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--steel);
  padding:8px 14px;
  border-radius:4px;
  white-space:nowrap;
  font-weight:500
}

.secnav a:hover {
  color:var(--ink);
  background:var(--hair-2)
}

.secnav a.on {
  color:#8a6910;
  background:var(--gold-soft)
}

/* generic content block + prose */section.block {
  padding:56px 0;
  border-bottom:1px solid var(--hair);
  scroll-margin-top:134px
}

#enquiry {
  scroll-margin-top:134px
}

.sec-head {
  margin-bottom:28px;
  max-width:70ch
}

.sec-head h2 {
  font-size:clamp(23px,2.8vw,31px);
  font-weight:800;
  margin:11px 0 10px
}

.sec-head p {
  font-size:15.5px;
  color:var(--ink-soft)
}

.prose p {
  font-size:16px;
  color:var(--ink-soft);
  margin-bottom:15px;
  max-width:76ch
}

.prose strong {
  color:var(--ink);
  font-weight:600
}

.prose a.inline {
  color:var(--gold-dk);
  border-bottom:1px solid #F0DCA6;
  font-weight:500
}

/* product grid */.pgrid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

@media(max-width:820px) {
  .pgrid {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:440px) {
  .pgrid {
    grid-template-columns:1fr
  }

}

.pcard {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:9px;
  padding:20px;
  transition:.15s;
  display:flex;
  flex-direction:column;
  gap:8px
}

.pcard:hover {
  border-color:var(--gold);
  transform:translateY(-2px)
}

.pcard .ic {
  width:38px;
  height:38px;
  border-radius:8px;
  background:var(--gold-soft);
  display:grid;
  place-items:center;
  margin-bottom:4px
}

.pcard .ic svg {
  width:20px;
  height:20px;
  color:var(--gold-dk)
}

.pcard h4 {
  font-size:15.5px;
  font-weight:700
}

.pcard p {
  font-size:12.5px;
  color:var(--steel);
  flex:1
}

.pcard .arw {
  font-size:12.5px;
  font-weight:600;
  color:var(--gold-dk);
  display:flex;
  gap:6px;
  align-items:center
}

/* industries (location pages) */.inds {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

@media(max-width:820px) {
  .inds {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:440px) {
  .inds {
    grid-template-columns:1fr
  }

}

.ind {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:9px;
  padding:20px;
  display:flex;
  gap:13px;
  align-items:center
}

.ind svg {
  width:26px;
  height:26px;
  color:var(--gold-dk);
  flex-shrink:0
}

.ind h4 {
  font-size:15px;
  font-weight:700;
  margin-bottom:3px
}

.ind p {
  font-size:13px;
  color:var(--steel)
}

/* material guidance band */.guide {
  background:var(--gold-soft);
  border:1px solid #F0DCA6;
  border-radius:12px;
  padding:30px 32px
}

.guide h3 {
  font-size:19px;
  font-weight:800;
  color:#5a4408;
  margin-bottom:10px
}

.guide p {
  font-size:15px;
  color:#6b5310;
  max-width:80ch;
  margin-bottom:16px
}

.guide .mats {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px
}

@media(max-width:640px) {
  .guide .mats {
    grid-template-columns:1fr
  }

}

.guide .m {
  background:#fff;
  border:1px solid #F0DCA6;
  border-radius:8px;
  padding:15px 17px
}

.guide .m b {
  display:block;
  font-family:'Archivo';
  font-size:14.5px;
  color:var(--ink);
  margin-bottom:3px
}

.guide .m span {
  font-size:12.5px;
  color:var(--steel)
}

/* coverage (location pages) */.cov {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center
}

@media(max-width:760px) {
  .cov {
    grid-template-columns:1fr;
    gap:22px
  }

}

.areas {
  display:flex;
  flex-wrap:wrap;
  gap:9px;
  margin-top:6px
}

.areas .a {
  font-family:'IBM Plex Mono';
  font-size:12.5px;
  background:#fff;
  border:1px solid var(--hair);
  border-radius:20px;
  padding:7px 13px;
  color:var(--ink-soft)
}

.areas .a b {
  color:var(--ink)
}

.covbox {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:10px;
  overflow:hidden
}

.covbox .r {
  display:flex;
  justify-content:space-between;
  padding:13px 18px;
  border-bottom:1px solid var(--hair-2);
  font-size:14px
}

.covbox .r:last-child {
  border-bottom:0
}

.covbox .r span {
  color:var(--steel);
  font-family:'IBM Plex Mono';
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.04em
}

/* enquiry band (location pages) */.enquiry {
  background:var(--char);
  color:#fff;
  border-radius:12px;
  padding:42px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:34px;
  align-items:center;
  margin:56px 0 0
}

@media(max-width:760px) {
  .enquiry {
    grid-template-columns:1fr;
    padding:30px;
    gap:22px
  }

}

.enquiry h2 {
  font-size:26px;
  font-weight:800;
  margin-bottom:10px;
  color:#fff
}

.enquiry h2 span {
  color:var(--gold)
}

.enquiry p {
  color:#B7B1A4;
  font-size:15px;
  max-width:52ch
}

.enquiry .f {
  display:flex;
  flex-direction:column;
  gap:10px
}

.enquiry .f .btn {
  padding:14px 18px
}

.enquiry small {
  color:#8b857a;
  font-family:'IBM Plex Mono';
  font-size:11.5px;
  text-align:center;
  margin-top:3px
}

/* ==========================================================================About page========================================================================== */

/* page hero band */.phero {
  background:var(--char);
  color:#fff;
  position:relative;
  overflow:hidden
}

.phero::after {
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(1100px 380px at 82% -10%,rgba(244,185,64,.16),transparent 60%)
}

.phero .wrap {
  position:relative;
  z-index:1;
  padding:56px 24px 52px;
  text-align:center
}

.phero .eyebrow {
  color:var(--gold);
  justify-content:center
}

.phero h1 {
  font-size:clamp(32px,5vw,50px);
  font-weight:800;
  margin:14px 0 12px
}

.phero p {
  font-size:17px;
  color:#CFC9BC;
  max-width:60ch;
  margin:0 auto
}

.phero .crumb {
  margin-top:18px;
  font-family:'IBM Plex Mono';
  font-size:12px;
  color:#8b857a;
  display:flex;
  gap:8px;
  justify-content:center
}

.phero .crumb .here {
  color:#EDE9DF
}

/* intro two-col */.intro-grid {
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:44px;
  align-items:center
}

@media(max-width:880px) {
  .intro-grid {
    grid-template-columns:1fr;
    gap:28px
  }

}

.shot {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:10px;
  overflow:hidden
}

.ph {
  aspect-ratio:4/3;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:linear-gradient(135deg,#fff,#fff 22px,#FBFAF6 22px,#FBFAF6 44px);
  color:var(--steel);
  text-align:center;
  padding:24px
}

.ph svg {
  width:52px;
  height:52px;
  color:var(--hair);
  stroke-width:1.4
}

.ph b {
  font-family:'Archivo';
  font-weight:700;
  font-size:15px;
  color:var(--ink-soft)
}

.ph span {
  font-family:'IBM Plex Mono';
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase
}

.intro-txt h2 {
  font-size:clamp(24px,3vw,33px);
  font-weight:800;
  margin:12px 0 16px;
  max-width:20ch
}

.intro-txt p {
  font-size:16px;
  color:var(--ink-soft);
  margin-bottom:14px;
  max-width:60ch
}

.intro-txt strong {
  color:var(--ink);
  font-weight:600
}

.badge40 {
  display:flex;
  align-items:center;
  gap:11px;
  background:var(--gold-soft);
  border:1px solid #F0DCA6;
  border-radius:10px;
  padding:12px 16px;
  margin-top:8px
}

.badge40 .n {
  font-family:'Archivo';
  font-weight:800;
  font-size:30px;
  color:var(--gold-dk);
  line-height:1
}

.badge40 .t {
  font-size:12.5px;
  color:#6b5310;
  line-height:1.3
}

/* expertise (dark band) */.expertise {
  background:var(--char);
  color:#fff;
  border-bottom:0
}

.expertise .sec-head {
  text-align:center;
  margin-bottom:34px
}

.expertise .sec-head .eyebrow {
  color:var(--gold);
  justify-content:center
}

.expertise h2 {
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  margin:12px 0 8px
}

.expertise .sub {
  color:#B7B1A4;
  font-size:15.5px;
  max-width:60ch;
  margin:0 auto
}

.exp-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-top:8px
}

@media(max-width:760px) {
  .exp-grid {
    grid-template-columns:1fr
  }

}

.exp {
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  padding:22px;
  display:flex;
  gap:15px
}

.exp .ic {
  width:44px;
  height:44px;
  border-radius:9px;
  background:var(--gold);
  display:grid;
  place-items:center;
  flex-shrink:0
}

.exp .ic svg {
  width:22px;
  height:22px;
  color:#241d07
}

.exp h4 {
  font-size:16.5px;
  font-weight:700;
  margin-bottom:5px
}

.exp p {
  font-size:13.5px;
  color:#B7B1A4;
  line-height:1.5
}

/* pillars 01/02/03 */.pillars {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px
}

@media(max-width:820px) {
  .pillars {
    grid-template-columns:1fr
  }

}

.pillar {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:26px 24px;
  position:relative;
  overflow:hidden
}

.pillar .no {
  position:absolute;
  top:16px;
  right:20px;
  font-family:'Archivo';
  font-weight:800;
  font-size:40px;
  color:var(--hair-2)
}

.pillar .ic {
  width:40px;
  height:40px;
  border-radius:9px;
  background:var(--gold-soft);
  display:grid;
  place-items:center;
  margin-bottom:16px
}

.pillar .ic svg {
  width:22px;
  height:22px;
  color:var(--gold-dk)
}

.pillar h3 {
  font-size:13px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin-bottom:10px
}

.pillar p {
  font-size:14px;
  color:var(--ink-soft);
  line-height:1.55
}

.pillar p strong {
  color:var(--ink);
  font-weight:600
}

/* stats band */.stats {
  background:var(--char);
  color:#fff;
  border-bottom:0
}

.stats .wrap {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:0
}

.stats .s {
  padding:34px 20px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.1)
}

.stats .s .ic {
  width:44px;
  height:44px;
  border-radius:50%;
  background:var(--gold);
  display:grid;
  place-items:center;
  margin:0 auto 12px
}

.stats .s .ic svg {
  width:22px;
  height:22px;
  color:#241d07
}

.stats .s .n {
  font-family:'Archivo';
  font-weight:800;
  font-size:38px;
  line-height:1
}

.stats .s .n span {
  color:var(--gold)
}

.stats .s .l {
  font-size:12.5px;
  color:#B7B1A4;
  margin-top:7px;
  text-transform:uppercase;
  letter-spacing:.05em
}

@media(max-width:760px) {
  .stats .wrap {
    grid-template-columns:1fr 1fr
  }

  .stats .s:nth-child(2n) {
    border-right:0
  }

  .stats .s:nth-child(1),.stats .s:nth-child(2) {
    border-bottom:1px solid rgba(255,255,255,.1)
  }

}

/* gallery */.gal-head {
  text-align:center;
  margin-bottom:30px
}

.gal-head .eyebrow {
  justify-content:center
}

.gal-head h2 {
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  margin:11px 0
}

.gallery {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  grid-auto-rows:150px;
  gap:12px
}

@media(max-width:820px) {
  .gallery {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:440px) {
  .gallery {
    grid-template-columns:1fr
  }

}

.g {
  position:relative;
  background:linear-gradient(135deg,#fff,#fff 20px,#F4F2EC 20px,#F4F2EC 40px);
  border:1px solid var(--hair);
  border-radius:9px;
  overflow:hidden;
  color:var(--steel);
  text-align:center;
  display:flex;
  align-items:center;
  justify-content:center
}

.g svg {
  width:30px;
  height:30px;
  color:var(--hair)
}

.g img,.g video {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover
}

.g .play {
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  z-index:1;
  width:52px;
  height:52px;
  border-radius:50%;
  background:rgba(23,20,15,.55);
  border:2px solid rgba(255,255,255,.85);
  display:grid;
  place-items:center;
  pointer-events:none
}

.g .play svg {
  width:20px;
  height:20px;
  color:#fff;
  margin-left:3px
}

.g span {
  position:absolute;
  left:0;
  bottom:0;
  z-index:1;
  font-family:'IBM Plex Mono';
  font-size:10.5px;
  letter-spacing:.06em;
  text-transform:uppercase;
  align-self:flex-end;
  margin:0 0 10px 10px;
  background:rgba(23,20,15,.6);
  color:#fff;
  padding:4px 9px;
  border-radius:20px
}

.g.tall {
  grid-row:span 2
}

.g.wide {
  grid-column:span 2
}

/* brands */.brands {
  background:var(--gold);
  border-bottom:0
}

.brands .wrap {
  padding:34px 24px
}

.brands h3 {
  text-align:center;
  font-family:'IBM Plex Mono';
  font-size:12px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:#5a4408;
  margin-bottom:22px
}

.brand-row {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

@media(max-width:640px) {
  .brand-row {
    grid-template-columns:1fr 1fr
  }

}

.brand {
  background:#fff;
  border-radius:9px;
  height:78px;
  display:grid;
  place-items:center;
  font-family:'Archivo';
  font-weight:800;
  font-size:19px;
  color:var(--ink);
  letter-spacing:.02em
}

.brand small {
  display:block;
  font-family:'Inter';
  font-weight:500;
  font-size:9.5px;
  color:var(--steel);
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center
}

/* reviews */.rev-head {
  text-align:center;
  margin-bottom:28px
}

.rev-head .eyebrow {
  justify-content:center
}

.rev-head h2 {
  font-size:clamp(23px,2.8vw,30px);
  font-weight:800;
  margin:11px 0 6px
}

.rev-head p {
  font-size:14.5px;
  color:var(--steel)
}

.reviews {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

@media(max-width:900px) {
  .reviews {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:480px) {
  .reviews {
    grid-template-columns:1fr
  }

}

.rev {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:20px
}

.rev .top {
  display:flex;
  align-items:center;
  gap:11px;
  margin-bottom:11px
}

.rev .av {
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--gold-soft);
  display:grid;
  place-items:center;
  font-family:'Archivo';
  font-weight:700;
  color:var(--gold-dk);
  font-size:15px
}

.rev .nm {
  font-weight:700;
  font-size:14px
}

.rev .ago {
  font-size:11.5px;
  color:var(--steel);
  font-family:'IBM Plex Mono'
}

.rev .stars {
  color:var(--gold);
  font-size:13px;
  letter-spacing:2px;
  margin-bottom:8px
}

.rev p {
  font-size:13.5px;
  color:var(--ink-soft)
}

/* certifications + cta band */.certs {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  margin-top:6px
}

.cert {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:8px;
  padding:12px 20px;
  font-family:'IBM Plex Mono';
  font-size:12.5px;
  color:var(--ink-soft);
  letter-spacing:.04em;
  display:flex;
  align-items:center;
  gap:9px
}

.cert svg {
  width:17px;
  height:17px;
  color:var(--ok)
}

.cta-band {
  background:var(--char);
  color:#fff;
  border-radius:12px;
  padding:40px;
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:30px;
  align-items:center;
  margin-top:44px
}

@media(max-width:760px) {
  .cta-band {
    grid-template-columns:1fr;
    padding:30px;
    gap:20px
  }

}

.cta-band h2 {
  font-size:26px;
  font-weight:800;
  margin-bottom:9px
}

.cta-band h2 span {
  color:var(--gold)
}

.cta-band p {
  color:#B7B1A4;
  font-size:15px;
  max-width:48ch
}

.cta-band .f {
  display:flex;
  flex-direction:column;
  gap:10px
}

.cta-band .f .btn {
  padding:14px 18px
}

.cta-band small {
  color:#8b857a;
  font-family:'IBM Plex Mono';
  font-size:11.5px;
  text-align:center;
  margin-top:3px
}

/* shared centered section head (about page) */.sh {
  text-align:center;
  margin-bottom:30px
}

.sh .eyebrow {
  justify-content:center
}

.sh h2 {
  font-size:clamp(24px,3vw,32px);
  font-weight:800;
  margin:11px 0 8px
}

.sh p {
  font-size:15px;
  color:var(--steel);
  max-width:62ch;
  margin:0 auto
}

/* why choose us */.why {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px
}

@media(max-width:820px) {
  .why {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:480px) {
  .why {
    grid-template-columns:1fr
  }

}

.wy {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:9px;
  padding:20px;
  display:flex;
  gap:13px;
  align-items:center
}

.wy svg {
  width:24px;
  height:24px;
  color:var(--gold-dk);
  flex-shrink:0
}

.wy h4 {
  font-size:14.5px;
  font-weight:700;
  margin-bottom:3px
}

.wy p {
  font-size:13px;
  color:var(--steel)
}

/* finishes grid */.fin {
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:12px
}

@media(max-width:820px) {
  .fin {
    grid-template-columns:repeat(3,1fr)
  }

}

@media(max-width:440px) {
  .fin {
    grid-template-columns:1fr 1fr
  }

}

.fn {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:9px;
  padding:18px 12px;
  text-align:center;
  transition:.15s
}

.fn:hover {
  border-color:var(--gold);
  transform:translateY(-2px)
}

.fn .sw {
  width:34px;
  height:34px;
  border-radius:8px;
  margin:0 auto 10px;
  border:1px solid rgba(0,0,0,.12)
}

.fn b {
  display:block;
  font-family:'Archivo';
  font-size:14px;
  color:var(--ink)
}

.fn span {
  font-size:11px;
  color:var(--steel)
}

/* industries (about page variant) */.ainds {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:26px
}

@media(max-width:820px) {
  .ainds {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:440px) {
  .ainds {
    grid-template-columns:1fr
  }

}

.aind {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:9px;
  padding:18px;
  display:flex;
  gap:12px;
  align-items:center
}

.aind svg {
  width:24px;
  height:24px;
  color:var(--gold-dk);
  flex-shrink:0
}

.aind h4 {
  font-size:14px;
  font-weight:700
}

.aind p {
  font-size:12px;
  color:var(--steel)
}

/* coverage strip (about page variant) */.coverage {
  background:var(--gold-soft);
  border:1px solid #F0DCA6;
  border-radius:12px;
  padding:30px 32px;
  text-align:center
}

.coverage h3 {
  font-size:20px;
  font-weight:800;
  color:#5a4408;
  margin-bottom:8px
}

.coverage p {
  font-size:14.5px;
  color:#6b5310;
  max-width:70ch;
  margin:0 auto 18px
}

.cov-tags {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:center
}

.cov-tags a,.cov-tags span {
  font-family:'IBM Plex Mono';
  font-size:12px;
  background:#fff;
  border:1px solid #F0DCA6;
  border-radius:20px;
  padding:7px 13px;
  color:var(--ink-soft)
}

.cov-tags a {
  border-color:var(--gold-dk);
  color:var(--gold-dk)
}

/* ==========================================================================Export page========================================================================== */

/* export hero card (reference-style, brand colours) */.ehero {
  padding:48px 0
}

.ecard {
  background:linear-gradient(180deg,#fff,#FCFBF7);
  border:1px solid var(--hair);
  border-radius:20px;
  box-shadow:0 20px 60px rgba(23,20,15,.07);
  padding:44px
}

@media(max-width:900px) {
  .ecard {
    padding:28px
  }

}

.ecard .grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:40px;
  align-items:center
}

@media(max-width:900px) {
  .ecard .grid {
    grid-template-columns:1fr;
    gap:28px
  }

}

.ecard h1 {
  font-size:clamp(32px,4.6vw,48px);
  font-weight:800;
  margin:16px 0 18px
}

.ecard h1 span {
  color:var(--gold-dk)
}

.ecard .lead {
  font-size:16.5px;
  color:var(--ink-soft);
  max-width:52ch;
  margin-bottom:22px
}

.ecard .ticks {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:13px;
  margin-bottom:26px
}

.ecard .ticks li {
  display:flex;
  gap:12px;
  align-items:center;
  font-size:15px;
  color:var(--ink)
}

.ecard .ticks svg {
  width:22px;
  height:22px;
  color:var(--ok);
  flex-shrink:0
}

/* right: shipping-lanes card */.lanes {
  background:var(--paper);
  border:1px solid var(--hair);
  border-radius:16px;
  padding:22px
}

.lanes .lh {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px
}

.lanes .lh .lt {
  display:flex;
  align-items:center;
  gap:13px
}

.lanes .lh .ic {
  width:44px;
  height:44px;
  border-radius:11px;
  background:var(--gold-soft);
  display:flex;
  place-items:center
}

.lanes .lh .ic svg {
  width:22px;
  height:22px;
  color:var(--gold-dk)
}

.lanes .lh h3 {
  font-size:16px;
  font-weight:700
}

.lanes .lh p {
  font-size:12.5px;
  color:var(--steel)
}

.lanes .lh .box svg {
  width:26px;
  height:26px;
  color:var(--hair)
}

.lane-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px
}

@media(max-width:520px) {
  .lane-grid {
    grid-template-columns:1fr
  }

}

.lane {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:11px;
  padding:15px 17px
}

.lane b {
  display:block;
  font-family:'Archivo';
  font-weight:700;
  font-size:15px;
  color:var(--ink);
  letter-spacing:-.01em
}

.lane span {
  font-size:12.5px;
  color:var(--ok);
  display:flex;
  align-items:center;
  gap:6px;
  margin-top:3px
}

.lane span::before {
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--ok)
}

.enote {
  background:var(--gold-soft);
  border:1px solid #F0DCA6;
  border-radius:11px;
  padding:16px 18px;
  margin-top:12px
}

.enote .t {
  font-family:'IBM Plex Mono';
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--gold-dk);
  margin-bottom:5px
}

.enote p {
  font-size:13.5px;
  color:#6b5310
}

/* what we export */.exgrid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

@media(max-width:820px) {
  .exgrid {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:440px) {
  .exgrid {
    grid-template-columns:1fr
  }

}

.ex {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:9px;
  padding:20px;
  transition:.15s
}

.ex:hover {
  border-color:var(--gold);
  transform:translateY(-2px)
}

.ex .ic {
  width:38px;
  height:38px;
  border-radius:8px;
  background:var(--gold-soft);
  display:grid;
  place-items:center;
  margin-bottom:12px
}

.ex .ic svg {
  width:20px;
  height:20px;
  color:var(--gold-dk)
}

.ex h4 {
  font-size:15px;
  font-weight:700;
  margin-bottom:4px
}

.ex p {
  font-size:12.5px;
  color:var(--steel)
}

/* markets served */.markets {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

@media(max-width:820px) {
  .markets {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:440px) {
  .markets {
    grid-template-columns:1fr
  }

}

.mk {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:9px;
  padding:20px
}

.mk h4 {
  font-size:14.5px;
  font-weight:700;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:8px
}

.mk h4 svg {
  width:16px;
  height:16px;
  color:var(--gold-dk)
}

.mk ul {
  list-style:none;
  font-family:'IBM Plex Mono';
  font-size:12px;
  color:var(--ink-soft);
  line-height:1.9
}

.mk li::before {
  content:"•";
  color:var(--gold);
  margin-right:7px
}

/* process steps */.steps {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px
}

@media(max-width:820px) {
  .steps {
    grid-template-columns:1fr 1fr
  }

}

@media(max-width:440px) {
  .steps {
    grid-template-columns:1fr
  }

}

.step {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:10px;
  padding:24px 22px;
  position:relative;
  overflow:hidden
}

.step .no {
  position:absolute;
  top:14px;
  right:18px;
  font-family:'Archivo';
  font-weight:800;
  font-size:38px;
  color:var(--hair-2)
}

.step .ic {
  width:38px;
  height:38px;
  border-radius:9px;
  background:var(--gold-soft);
  display:grid;
  place-items:center;
  margin-bottom:14px
}

.step .ic svg {
  width:20px;
  height:20px;
  color:var(--gold-dk)
}

.step h4 {
  font-size:15px;
  font-weight:700;
  margin-bottom:6px
}

.step p {
  font-size:13px;
  color:var(--ink-soft)
}

/* packing/docs */.pd {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px
}

@media(max-width:760px) {
  .pd {
    grid-template-columns:1fr
  }

}

.pdcard {
  background:#fff;
  border:1px solid var(--hair);
  border-radius:11px;
  overflow:hidden
}

.pdcard .ph {
  background:var(--ink);
  color:#fff;
  padding:15px 20px;
  display:flex;
  align-items:center;
  gap:11px
}

.pdcard .ph svg {
  width:20px;
  height:20px;
  color:var(--gold)
}

.pdcard .ph h3 {
  font-size:15.5px;
  font-weight:700
}

.pdcard ul {
  list-style:none;
  padding:8px 20px 16px
}

.pdcard li {
  display:flex;
  gap:10px;
  align-items:center;
  padding:9px 0;
  border-bottom:1px solid var(--hair-2);
  font-size:14px;
  color:var(--ink-soft)
}

.pdcard li svg {
  width:17px;
  height:17px;
  color:var(--ok);
  flex-shrink:0;
  margin-top:2px
}

/* export stats strip */.estats {
  background:var(--char);
  color:#fff;
  border-bottom:0
}

.estats .wrap {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:0
}

.estats .s {
  padding:30px 20px;
  text-align:center;
  border-right:1px solid rgba(255,255,255,.1)
}

.estats .n {
  font-family:'Archivo';
  font-weight:800;
  font-size:32px
}

.estats .n span {
  color:var(--gold)
}

.estats .l {
  font-size:12px;
  color:#B7B1A4;
  margin-top:6px;
  text-transform:uppercase;
  letter-spacing:.05em
}

@media(max-width:760px) {
  .estats .wrap {
    grid-template-columns:1fr 1fr
  }

  .estats .s:nth-child(2n) {
    border-right:0
  }

  .estats .s:nth-child(1),.estats .s:nth-child(2) {
    border-bottom:1px solid rgba(255,255,255,.1)
  }

}

/* ==========================================================================FAQ (shared pattern across all pages)========================================================================== */.faq {
  max-width:840px;

}

.qa {
  border-bottom:1px solid var(--hair);
  background:#fff
}

.qa:first-child {
  border-top:1px solid var(--hair)
}

.qa summary {
  list-style:none;
  cursor:pointer;
  padding:20px 4px;
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  font-family:'Archivo';
  font-weight:700;
  font-size:16.5px
}

.qa summary::-webkit-details-marker {
  display:block
}

.qa .plus {
  width:20px;
  height:20px;
  flex-shrink:0;
  position:relative
}

.qa .plus::before,.qa .plus::after {
  content:"";
  position:relative;
  background:var(--gold-dk);
  border-radius:2px
}

.qa .plus::before {
  top:9px;
  left:1px;
  width:18px;
  height:2px
}

.qa .plus::after {
  left:9px;
  top:1px;
  width:2px;
  height:18px;
  transition:.2s
}

.qa[open] .plus::after {
  transform:rotate(90deg);
  opacity:0
}

.qa .ans {
  padding:0 4px 22px;
  font-size:14.5px;
  color:var(--ink-soft);
  max-width:74ch
}

/* ==========================================================================
Mobile sticky CTA, reveal animation, focus state (shared)
========================================================================== */.mcta {
  display:block
}

@media(max-width:940px) {
  .mcta {
    display:flex;
    position:relative;
    bottom:0;
    left:0;
    right:0;
    z-index:70;
    background:#fff;
    border-top:1px solid var(--hair);
    padding:10px 14px;
    gap:10px;
    box-shadow:0 -4px 20px rgba(23,20,15,.1)
  }

  .mcta .btn {
    flex:1;
    padding:13px
  }

  body {
    padding-bottom:68px
  }

}

.reveal {
  opacity:0;
  transform:translateY(14px);
  transition:opacity .55s ease,transform .55s ease
}

.reveal.in {
  opacity:1;
  transform:none
}

@media (prefers-reduced-motion:reduce) {
  .reveal {
    opacity:1;
    transform:none;
    transition:none
  }

  {
    scroll-behavior:smooth
  }

}

a:focus-visible,button:focus-visible,summary:focus-visible {
  outline:2px solid var(--gold-dk);
  outline-offset:2px
}












/* ===========================
   WHY CHOOSE US WITH IMAGE
=========================== */

.why-wrap{
    display:grid;
    grid-template-columns:1.45fr .9fr;
    gap:32px;
    align-items:stretch;
}

.why{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:16px;
}

.wy{
    background:#fff;
    border:1px solid var(--hair);
    border-radius:10px;
    padding:22px;
    display:flex;
    gap:14px;
    align-items:flex-start;
    transition:.25s;
}

.wy:hover{
    transform:translateY(-3px);
    border-color:var(--gold);
    box-shadow:0 12px 28px rgba(0,0,0,.06);
}

.why-image{
    border-radius:12px;
    overflow:hidden;
    height:100%;
    min-height:560px;
    border:1px solid var(--hair);
    box-shadow:0 18px 45px rgba(0,0,0,.08);
}

.why-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

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

@media(max-width:991px){

    .why-wrap{
        grid-template-columns:1fr;
    }

    .why-image{
        order:-1;
        min-height:380px;
    }

}

@media(max-width:640px){

    .why{
        grid-template-columns:1fr;
    }

    .why-image{
        min-height:280px;
    }

}/* End custom CSS */