/* ============ TRAILER SOLUTION — base ============ */
:root{
  --charcoal-950:#0d0c0c;
  --charcoal-900:#141212;
  --charcoal-800:#1b1918;
  --charcoal-700:#262322;
  --charcoal-600:#3a3634;
  --line: rgba(245,243,239,0.10);
  --gold:#f2a900;
  --gold-light:#ffc94d;
  --gold-dim: rgba(242,169,0,0.14);
  --maroon:#7a1f2d;
  --maroon-light:#a02a3c;
  --white:#f5f3ef;
  --gray-300:#c9c4bd;
  --gray-500:#948d85;
  --radius:4px;
  --container: 1240px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--charcoal-900);
  color:var(--white);
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4{ margin:0; font-family:'Bebas Neue','Oswald',sans-serif; font-weight:400; text-transform:uppercase; letter-spacing:0.02em; }
p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
.container{ max-width:var(--container); margin:0 auto; padding:0 32px; }
section{ position:relative; }

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.22em; text-transform:uppercase; color:var(--gold);
  margin-bottom:18px;
}
.eyebrow::before{ content:''; width:28px; height:2px; background:var(--gold); }

.section-head{ max-width:640px; margin-bottom:56px; }
.section-head h2{ font-size:clamp(32px,4vw,48px); line-height:1.08; color:var(--white); }
.section-head p{ margin-top:18px; color:var(--gray-300); font-size:17px; max-width:560px; }
.section-head.center{ margin-left:auto; margin-right:auto; text-align:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:16px 30px; border-radius:var(--radius); border:1px solid transparent;
  font-family:'Oswald',sans-serif; font-weight:600; font-size:14px;
  letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap;
  transition:transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg{ width:16px; height:16px; flex:none; }
.btn-gold{ background:var(--gold); color:var(--charcoal-950); }
.btn-gold:hover{ background:var(--gold-light); transform:translateY(-2px); }
.btn-outline{ border-color:rgba(245,243,239,0.35); color:var(--white); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold); transform:translateY(-2px); }
.btn-maroon{ background:var(--maroon); color:var(--white); }
.btn-maroon:hover{ background:var(--maroon-light); transform:translateY(-2px); }
.btn-block{ width:100%; }

/* ============ NAV ============ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:200;
  padding:20px 0; transition:background .25s ease, padding .25s ease, border-color .25s ease;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(13,12,12,0.96); backdrop-filter:blur(4px); padding:12px 0; border-color:var(--line); will-change:background; }
.nav .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ width:44px; height:44px; border-radius:50%; object-fit:cover; }
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-family:'Oswald',sans-serif; font-weight:700; font-size:17px; letter-spacing:0.06em; color:var(--white); }
.brand-text span{ font-size:10px; letter-spacing:0.16em; color:var(--gold); text-transform:uppercase; margin-top:2px; }

.nav-links{ display:flex; align-items:center; gap:36px; }
.nav-links a{
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:500; letter-spacing:0.06em;
  text-transform:uppercase; color:var(--gray-300); position:relative; padding:6px 0;
  transition:color .2s ease;
}
.nav-links a:hover, .nav-links a.active{ color:var(--white); }
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background:var(--gold);
  transition:width .2s ease;
}
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-right{ display:flex; align-items:center; gap:18px; }
.nav-phone{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--gray-300); white-space:nowrap; direction:ltr; unicode-bidi:isolate-override; }
.nav-phone svg{ width:15px; height:15px; color:var(--gold); }
.nav-cta{ padding:12px 22px; font-size:12px; }
.nav-toggle{
  display:none; flex-direction:column; gap:5px; background:none; border:none; padding:6px;
}
.nav-toggle span{ width:24px; height:2px; background:var(--white); display:block; }

/* ============ HERO ============ */
.hero{
  position:relative; min-height:100vh; display:flex; align-items:flex-end;
  padding-top:140px; overflow:hidden;
  background:var(--charcoal-900);
}
.hero-photo{
  position:absolute; inset:0; z-index:0;
  background-size:cover; background-position:center 38%; background-repeat:no-repeat;
}
.hero-fade{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(13,12,12,0.55) 0%, rgba(13,12,12,0.05) 22%, rgba(13,12,12,0.02) 55%, rgba(13,12,12,0.55) 82%, var(--charcoal-900) 100%);
}
.hero-inner{ position:relative; z-index:2; width:100%; }
.hero-kicker{
  text-align:center; font-family:'Oswald',sans-serif; font-size:14px; letter-spacing:0.35em;
  text-transform:uppercase; color:var(--gold); margin-bottom:6px;
  text-shadow:0 2px 10px rgba(0,0,0,0.7);
}
.hero-title{
  text-align:center; font-family:'Bebas Neue','Oswald',sans-serif; font-weight:400;
  font-size:clamp(64px, 13vw, 200px); line-height:0.9; letter-spacing:0.02em;
  color:var(--white);
  text-shadow:0 4px 30px rgba(0,0,0,0.85), 0 2px 8px rgba(0,0,0,0.6);
  margin:0 0 18px;
  user-select:none;
}
.hero-flagship{
  text-align:center; margin:0 auto 48px;
  color:var(--gray-300); font-family:'Oswald',sans-serif; font-weight:500; font-style:italic;
  font-size:clamp(14px, 1.6vw, 19px); letter-spacing:0.04em;
  text-shadow:0 2px 10px rgba(0,0,0,0.8);
}
.hero-bottom{
  position:relative; z-index:4; display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; padding:0 0 56px;
}
.hero-badge{ text-align:left; }
.hero-badge strong{
  display:block; font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.1em;
  color:var(--white); text-transform:uppercase; text-shadow:0 2px 8px rgba(0,0,0,0.7);
}
.hero-badge span{ font-size:11px; color:var(--gray-500); letter-spacing:0.08em; text-transform:uppercase; }

/* ============ MARQUEE STRIP ============ */
.strip{ background:var(--maroon); overflow:hidden; padding:14px 0; }
.strip-track{ display:flex; gap:56px; white-space:nowrap; animation:marquee 28s linear infinite; width:max-content; }
.strip-track span{
  font-family:'Oswald',sans-serif; font-size:13px; font-weight:600; letter-spacing:0.18em;
  text-transform:uppercase; color:var(--white); display:flex; align-items:center; gap:14px;
}
.strip-track span::after{ content:'✦'; color:var(--gold); font-size:11px; }
@keyframes marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ============ ABOUT ============ */
.about{ padding:130px 0; background:var(--charcoal-900); }
.about .container{ display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.about-copy p.lead{ font-size:19px; color:var(--gray-300); margin-bottom:20px; }
.about-copy p{ color:var(--gray-500); font-size:15.5px; margin-bottom:16px; }
.about-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; padding-top:36px; border-top:1px solid var(--line); }
.about-stats div strong{ display:block; font-family:'Oswald',sans-serif; font-size:34px; color:var(--gold); }
.about-stats div span{ font-size:12px; letter-spacing:0.06em; color:var(--gray-500); text-transform:uppercase; }
.about-media{ position:relative; }
.about-media .frame{
  position:relative; padding:0 12px;
}
.about-media img{ width:100%; }
.about-media .quote{
  position:static; margin:0 0 22px; text-align:center;
  font-family:'Oswald',sans-serif; font-style:italic; font-weight:500;
  font-size:clamp(16px, 2vw, 22px); color:var(--gray-300); line-height:1.4;
  text-shadow:0 2px 10px rgba(0,0,0,0.6);
}
.about-media .quote span{ color:var(--gold); font-style:normal; font-size:1.4em; line-height:0; vertical-align:-0.15em; }
.about-media .tag{
  position:absolute; bottom:-1px; right:-1px; background:var(--gold); color:var(--charcoal-950);
  padding:14px 22px; font-family:'Oswald',sans-serif; font-weight:700; font-size:13px;
  letter-spacing:0.06em; text-transform:uppercase;
}

/* ============ PRODUCTS ============ */
.products{ padding:130px 0; background:var(--charcoal-950); }
.product-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:48px 40px; }
.product-grid .wide-cta{ grid-column:1 / -1; background:var(--charcoal-800) !important; padding:36px; border-radius:var(--radius); }
.product-card{
  background:transparent; position:relative; display:flex; flex-direction:column;
}
.product-card .head{ display:flex; align-items:center; gap:14px; margin-bottom:18px; }
.product-card .num{
  font-family:'Oswald',sans-serif; font-weight:700; color:var(--charcoal-950); background:var(--gold);
  font-size:13px; letter-spacing:0.08em; flex:none; padding:5px 10px; border-radius:3px;
}
.product-card h3{ font-size:21px; color:var(--white); }
.product-card .thumb{ aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; }
.product-card .thumb img{ width:100%; height:100%; object-fit:contain; transition:transform .5s ease; }
.product-card:hover .thumb img{ transform:scale(1.06); }
.product-card .body{ padding-top:22px; flex:1; display:flex; flex-direction:column; }
.product-card p{ color:var(--gray-500); font-size:14.5px; line-height:1.6; flex:1; }
.product-card .specs{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.product-card .specs span{
  font-size:11px; letter-spacing:0.05em; text-transform:uppercase; color:var(--gray-300);
  border:1px solid var(--line); padding:6px 10px; border-radius:2px;
}

/* ============ SERVICES ============ */
.services{ padding:130px 0; background:var(--charcoal-900); border-top:1px solid var(--line); }
.services .container{ display:grid; grid-template-columns:0.85fr 1.15fr; gap:80px; }
.service-list{ display:flex; flex-direction:column; }
.service-item{ display:flex; gap:22px; padding:28px 0; border-bottom:1px solid var(--line); }
.service-item:first-child{ padding-top:0; }
.service-icon{
  flex:none; width:52px; height:52px; border-radius:50%; background:var(--gold-dim);
  display:flex; align-items:center; justify-content:center;
}
.service-icon svg{ width:24px; height:24px; color:var(--gold); }
.service-item h4{ font-size:17px; color:var(--white); margin-bottom:8px; }
.service-item p{ color:var(--gray-500); font-size:14.5px; }

/* ============ GALLERY ============ */
.gallery{ padding:130px 0; background:var(--charcoal-950); }
.gallery-grid{ display:grid; grid-template-columns:repeat(4, 1fr); grid-auto-rows:190px; gap:14px; }
.gallery-item{
  position:relative; overflow:hidden; border-radius:var(--radius); background:var(--charcoal-800);
  border:1px solid var(--line); cursor:pointer;
}
.gallery-item.tall{ grid-row:span 2; }
.gallery-item.wide{ grid-column:span 2; }
.gallery-item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item .overlay{
  position:absolute; inset:0; background:linear-gradient(180deg, transparent 45%, rgba(13,12,12,0.88) 100%);
  display:flex; align-items:flex-end; padding:16px; opacity:0; transition:opacity .25s ease;
}
.gallery-item:hover .overlay{ opacity:1; }
.gallery-item .overlay span{
  font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:0.05em; text-transform:uppercase; color:var(--white);
}

/* Lightbox */
.lightbox{
  position:fixed; inset:0; z-index:500; background:rgba(10,9,9,0.94);
  display:none; align-items:center; justify-content:center; padding:40px;
}
.lightbox.open{ display:flex; }
.lightbox img{ max-width:min(1100px,90vw); max-height:82vh; object-fit:contain; border:1px solid var(--line); }
.lightbox-close{
  position:absolute; top:28px; right:36px; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--line); background:rgba(255,255,255,0.04); color:var(--white);
  display:flex; align-items:center; justify-content:center; font-size:20px;
}
.lightbox-caption{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-300);
}

/* ============ HOW WE BUILD ============ */
.build-section{ padding:110px 0; background:var(--charcoal-950); }
.build-section.alt{ background:var(--charcoal-900); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.build-steps{ list-style:none; margin:56px 0 0; padding:0; max-width:900px; }
.build-step{
  display:grid; grid-template-columns:auto 1fr; gap:28px;
  padding:34px 0; border-top:1px solid var(--line);
}
.build-step:last-child{ border-bottom:1px solid var(--line); }
.build-step .step-no{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:30px;
  color:var(--gold); line-height:1; min-width:56px;
}
.build-step h3{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:21px;
  letter-spacing:0.02em; text-transform:uppercase; color:var(--white); margin:0 0 12px;
}
.build-step p{ margin:0; color:var(--gray-300); line-height:1.8; }

.spec-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:56px; }
.spec-card{
  padding:32px 28px; background:var(--charcoal-800);
  border:1px solid var(--line); border-radius:var(--radius);
  border-left:3px solid var(--gold);
}
.spec-card h4{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:16px;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--white); margin:0 0 12px;
}
.spec-card p{ margin:0; font-size:15px; color:var(--gray-300); line-height:1.75; }

/* ============ REVIEWS ============ */
.reviews{ padding:130px 0; background:var(--charcoal-950); border-top:1px solid var(--line); }
.review-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:56px; }
.review-card{
  margin:0; padding:36px 32px 32px;
  background:var(--charcoal-800); border:1px solid var(--line); border-radius:var(--radius);
  display:flex; flex-direction:column; gap:20px;
  transition:border-color .25s ease, transform .25s ease;
}
.review-card:hover{ border-color:rgba(245,177,26,0.45); transform:translateY(-4px); }
.review-card .stars{ display:flex; gap:4px; color:var(--gold); }
.review-card .stars svg{ width:17px; height:17px; }
.review-card blockquote{
  margin:0; flex:1;
  font-size:16px; line-height:1.75; color:var(--gray-300);
}
.review-card blockquote::before{ content:'\201C'; }
.review-card blockquote::after{ content:'\201D'; }
.review-card figcaption{ padding-top:20px; border-top:1px solid var(--line); }
.review-card figcaption strong{
  display:block; font-family:'Oswald',sans-serif; font-weight:600;
  font-size:15px; letter-spacing:0.04em; text-transform:uppercase; color:var(--white);
}
.review-card figcaption span{ display:block; margin-top:5px; font-size:13px; color:var(--gray-500); }

/* ============ CONTACT ============ */
.contact{ padding:130px 0; background:var(--charcoal-900); border-top:1px solid var(--line); }
.contact .container{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:70px; align-items:start; }
.contact-cards{ display:grid; gap:16px; margin-bottom:32px; }
.contact-card{
  display:flex; gap:16px; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--charcoal-800);
}
.contact-card svg{ width:22px; height:22px; color:var(--gold); flex:none; margin-top:2px; }
.contact-card strong{ display:block; font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.06em; text-transform:uppercase; color:var(--white); margin-bottom:6px; }
.contact-card span, .contact-card a{ font-size:14.5px; color:var(--gray-300); }
.contact-card a:hover{ color:var(--gold); }
.contact-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.map-frame{ margin-top:28px; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; height:220px; filter:grayscale(1) invert(0.92) contrast(0.9); }
.map-frame iframe{ width:100%; height:100%; border:0; }

.form-wrap{ background:var(--charcoal-800); border:1px solid var(--line); border-radius:var(--radius); padding:44px; }
.form-wrap h3{ font-size:22px; color:var(--white); margin-bottom:8px; }
.form-wrap > p{ color:var(--gray-500); font-size:14.5px; margin-bottom:30px; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.field{ display:flex; flex-direction:column; gap:8px; }
.field.full{ grid-column:1/-1; }
.field label{ font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray-500); }
.field input, .field select, .field textarea{
  background:var(--charcoal-900); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; color:var(--white); font-family:inherit; font-size:14.5px; outline:none;
  transition:border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--gold); }
.field textarea{ resize:vertical; min-height:100px; }
.form-note{ font-size:12.5px; color:var(--gray-500); margin-top:14px; text-align:center; }
.form-success{
  display:none; align-items:center; gap:12px; background:var(--gold-dim); border:1px solid var(--gold);
  color:var(--gold-light); padding:14px 16px; border-radius:var(--radius); font-size:13.5px; margin-bottom:18px;
}
.form-success.show{ display:flex; }

/* ============ FOOTER ============ */
.footer{ background:var(--charcoal-950); border-top:1px solid var(--line); padding:70px 0 30px; }
.footer .container{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.1fr; gap:50px; }
.footer-brand .brand{ margin-bottom:16px; }
.footer-brand p{ color:var(--gray-500); font-size:14px; max-width:280px; margin-bottom:20px; }
.footer-social{ display:flex; gap:10px; }
.footer-social a{
  width:38px; height:38px; border:1px solid var(--line); border-radius:50%; display:flex;
  align-items:center; justify-content:center; transition:border-color .2s ease, color .2s ease;
}
.footer-social a:hover{ border-color:var(--gold); color:var(--gold); }
.footer-social svg{ width:16px; height:16px; }
.footer h5{ font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.1em; color:var(--white); margin-bottom:20px; text-transform:uppercase; }
.footer-links{ display:flex; flex-direction:column; gap:12px; }
.footer-links a, .footer-links span{ font-size:14.5px; color:var(--gray-500); }
.footer-links a:hover{ color:var(--gold); }
.footer-bottom{
  margin-top:60px; padding-top:26px; border-top:1px solid var(--line);
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px;
}
.footer-bottom p{ font-size:13px; color:var(--gray-500); }

/* ============ WHATSAPP FAB ============ */
.fab-wa{
  position:fixed; bottom:26px; right:26px; z-index:150; width:58px; height:58px; border-radius:50%;
  background:#25D366; display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,0.4); transition:transform .2s ease;
}
.fab-wa:hover{ transform:scale(1.08); }
.fab-wa svg{ width:28px; height:28px; color:#fff; }

/* ============ REVEAL ============ */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in{ opacity:1; transform:translateY(0); }

/* ============ QUOTE PAGE ============ */
.page-head{ background:var(--charcoal-950); border-bottom:1px solid var(--line); padding:150px 0 66px; }
.page-head h1{ font-size:clamp(38px,5.4vw,66px); line-height:1.02; color:var(--white); }
.page-head p{ margin-top:20px; color:var(--gray-300); font-size:16.5px; max-width:620px; }
.back-link{
  display:flex; width:max-content; align-items:center; gap:8px; margin-bottom:26px;
  font-family:'Oswald',sans-serif; font-size:12.5px; letter-spacing:0.1em;
  text-transform:uppercase; color:var(--gray-500); transition:color .2s ease;
}
.back-link:hover{ color:var(--gold); }
.back-link svg{ width:15px; height:15px; }

.quote-section{ padding:80px 0 120px; background:var(--charcoal-900); }
.quote-layout{ display:grid; grid-template-columns:1.35fr 0.8fr; gap:56px; align-items:start; }
.quote-aside{ display:flex; flex-direction:column; gap:26px; position:sticky; top:110px; }

.form-section-label{
  font-family:'Oswald',sans-serif; font-size:12px; font-weight:600; letter-spacing:0.16em;
  text-transform:uppercase; color:var(--gold); padding-bottom:10px; margin:8px 0 18px;
  border-bottom:1px solid var(--line);
}
.form-section-label:first-of-type{ margin-top:0; }
.field input.invalid, .field select.invalid, .field textarea.invalid{ border-color:var(--maroon-light); }

.quote-steps{ background:var(--charcoal-800); border:1px solid var(--line); border-radius:var(--radius); padding:30px; }
.quote-steps h4{ font-size:19px; color:var(--white); margin-bottom:22px; }
.quote-steps ol{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:20px; }
.quote-steps li{ display:flex; gap:14px; }
.quote-steps li span{
  flex:none; width:26px; height:26px; border-radius:3px; background:var(--gold);
  color:var(--charcoal-950); font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  display:flex; align-items:center; justify-content:center;
}
.quote-steps li strong{
  display:block; font-family:'Oswald',sans-serif; font-size:13.5px; letter-spacing:0.05em;
  text-transform:uppercase; color:var(--white); margin-bottom:4px;
}
.quote-steps li p{ font-size:13.5px; color:var(--gray-500); line-height:1.55; }

/* ============ GALLERY PAGE + HOMEPAGE TEASER ============ */
.gallery-page{ padding:80px 0 120px; }
.gallery-preview{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.gallery-peek{
  position:relative; display:block; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line); aspect-ratio:4/3; background:var(--charcoal-800);
}
.gallery-peek img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease, opacity .3s ease; }
.gallery-peek:hover img{ transform:scale(1.06); opacity:.85; }
.gallery-subhead{
  margin-top:70px; font-size:clamp(24px,2.6vw,32px); color:var(--white);
  padding-top:44px; border-top:1px solid var(--line);
}
.gallery-subnote{ margin:10px 0 30px; color:var(--gray-500); font-size:15px; }
.video-grid{ grid-auto-rows:230px; }

.gallery-item.is-video{ cursor:pointer; }
.play-badge{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%; z-index:4;
  background:rgba(13,12,12,0.62); border:2px solid var(--gold);
  display:flex; align-items:center; justify-content:center;
  transition:transform .25s ease, background .25s ease;
  pointer-events:none;
}
.play-badge svg{ width:26px; height:26px; color:var(--gold); margin-left:3px; }
.gallery-item.is-video:hover .play-badge{ transform:translate(-50%,-50%) scale(1.12); background:rgba(13,12,12,0.8); }

#lightboxVideo{
  max-width:92vw; max-height:82vh; background:#000;
  border-radius:var(--radius); outline:none;
}
.lightbox-error{
  display:none; width:min(520px,88vw); text-align:center; line-height:1.6;
  background:var(--charcoal-800); border:1px solid var(--gold);
  color:var(--gray-300); padding:24px 28px; border-radius:var(--radius); font-size:14.5px;
}
.lightbox-error.show{ display:block; }
.lightbox-error strong{ color:var(--gold); }

.gallery-cta{ margin-top:40px; text-align:center; }
.gallery-cta h3{ font-size:24px; color:var(--white); margin-bottom:10px; }
.gallery-cta p{ color:var(--gray-500); font-size:15px; margin-bottom:22px; }

/* ============ RESPONSIVE ============ */
@media (max-width:1080px){
  .about .container, .services .container, .contact .container{ grid-template-columns:1fr; }
  .quote-layout{ grid-template-columns:1fr; gap:40px; }
  .quote-aside{ position:static; }
  .about-media{ order:-1; }
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .gallery-grid{ grid-template-columns:repeat(3,1fr); }
  .footer .container{ grid-template-columns:1fr 1fr; }
}
@media (max-width:860px){
  .nav-links, .nav-phone{ display:none; }
  .nav-toggle{ display:flex; }
  .hero{ padding-top:120px; }
  .hero-bottom{ flex-direction:column; align-items:flex-start; gap:20px; }
  .about-stats{ grid-template-columns:1fr 1fr; }
  .spec-grid{ grid-template-columns:1fr; }
  .build-step{ grid-template-columns:1fr; gap:14px; }
  .review-grid{ grid-template-columns:1fr; }
  .product-grid{ grid-template-columns:1fr; }
  .gallery-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:160px; }
  .gallery-item.wide{ grid-column:span 2; }
  .gallery-preview{ grid-template-columns:1fr 1fr; }
  .form-row{ grid-template-columns:1fr; }
  .footer .container{ grid-template-columns:1fr; gap:36px; }
}
@media (max-width:520px){
  .container{ padding:0 20px; }
  .hero-title{ letter-spacing:0; }
  .about{ padding:90px 0; }
  .products, .services, .gallery, .contact{ padding:90px 0; }
  .reviews{ padding:90px 0; }
  .build-section{ padding:80px 0; }
  .review-card{ padding:30px 26px 26px; }
  .page-head{ padding:120px 0 50px; }
  .quote-section{ padding:56px 0 90px; }
  .quote-steps{ padding:24px; }
  .form-wrap{ padding:26px; }
  .gallery-grid{ grid-template-columns:1fr 1fr; }
}

/* Mobile nav drawer */
.nav-drawer{
  position:fixed; inset:0 0 0 auto; width:min(320px,84vw); background:var(--charcoal-950);
  border-left:1px solid var(--line); z-index:300; transform:translateX(100%);
  transition:transform .3s ease; padding:100px 32px 32px; display:flex; flex-direction:column; gap:26px;
}
.nav-drawer.open{ transform:translateX(0); }
.drawer-cta{ display:none; margin-top:6px; }
/* The quote CTA stays in the bar on phones too — it is the primary action,
   and burying it in the drawer costs taps. It shrinks instead of hiding,
   and the drawer keeps its own copy for anyone already in the menu. */
@media (max-width:560px){
  .drawer-cta{ display:inline-flex; }
  .nav .container{ gap:10px; }
  .nav-right{ gap:10px; }
  .nav-cta{ padding:10px 14px; font-size:10.5px; letter-spacing:0.06em; }
  .nav-cta svg{ display:none; }
}
@media (max-width:400px){
  .brand-text span{ display:none; }
  .brand img{ width:32px; height:32px; }
  .brand-text strong{ font-size:13px; }
  .nav-cta{ padding:9px 11px; font-size:10px; }
}
.nav-drawer a{ font-family:'Oswald',sans-serif; font-size:16px; letter-spacing:0.05em; text-transform:uppercase; color:var(--white); }
.nav-scrim{ position:fixed; inset:0; background:rgba(0,0,0,0.6); z-index:290; display:none; }
.nav-scrim.open{ display:block; }

/* ============ WATERMARK ============ */
.wm-logo{ position:relative; }
.wm-logo::after{
  content:'';
  position:absolute;
  background-image:url('../images/icon.svg');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  pointer-events:none;
  opacity:0.9;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.55));
  z-index:5;
}
.wm-logo.wm-lg::after{ width:110px; height:110px; left:14px; bottom:14px; }
.wm-logo.wm-md::after{ width:72px; height:72px; left:12px; bottom:12px; }
.wm-logo.wm-sm::after{ width:52px; height:52px; right:10px; bottom:10px; }
.wm-logo.wm-xs::after{ width:34px; height:34px; right:8px; bottom:8px; opacity:0.85; }
@media (max-width:520px){
  .wm-logo.wm-lg::after{ width:76px; height:76px; }
  .wm-logo.wm-md::after{ width:56px; height:56px; }
}

/* Precision Engineering tag → link to the How We Build page */
.about-media .tag-link{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  transition:background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.about-media .tag-link svg{ width:14px; height:14px; }
.about-media .tag-link:hover{
  background:#ffc340; transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(245,177,26,0.28);
}

/* ============ LANGUAGE TOGGLE ============ */
.lang-toggle{
  font-family:'Oswald',sans-serif; font-weight:600; font-size:13px;
  letter-spacing:0.08em; color:var(--white);
  background:transparent; border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 16px; cursor:pointer; line-height:1; white-space:nowrap;
  transition:border-color .2s ease, color .2s ease, background .2s ease;
}
.lang-toggle:hover{ border-color:var(--gold); color:var(--gold); background:rgba(245,177,26,0.06); }
.drawer-lang{ width:100%; padding:14px 16px; font-size:14px; }
@media (max-width:560px){
  .nav-right .lang-toggle:not(.drawer-lang){ display:none; }
}

/* ============ ARABIC / RTL ============ */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button{
  font-family:'Cairo','Inter',system-ui,sans-serif;
}
/* Oswald and Bebas have no Arabic glyphs — fall back to Cairo for headings */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3,
html[dir="rtl"] h4, html[dir="rtl"] h5, html[dir="rtl"] .eyebrow,
html[dir="rtl"] .btn, html[dir="rtl"] .nav-links a, html[dir="rtl"] .brand-text strong,
html[dir="rtl"] .hero-title, html[dir="rtl"] .hero-eyebrow, html[dir="rtl"] .tag,
html[dir="rtl"] .section-head h2, html[dir="rtl"] .about-stats div strong,
html[dir="rtl"] .form-section-label, html[dir="rtl"] label,
html[dir="rtl"] .build-step h3, html[dir="rtl"] .spec-card h4,
html[dir="rtl"] .review-card figcaption strong, html[dir="rtl"] .gallery-subhead,
html[dir="rtl"] .overlay span, html[dir="rtl"] .lightbox-caption,
html[dir="rtl"] .strip-track span{
  font-family:'Cairo','Oswald',sans-serif;
  letter-spacing:0;            /* letter-spacing breaks Arabic letter joining */
}
html[dir="rtl"] .hero-title{ font-weight:700; }

/* elements positioned to one physical side need mirroring */
html[dir="rtl"] .nav-drawer{ inset:0 auto 0 0; border-left:0; border-right:1px solid var(--line); transform:translateX(-100%); }
html[dir="rtl"] .nav-drawer.open{ transform:translateX(0); }
html[dir="rtl"] .nav-links a::after{ left:auto; right:0; }
html[dir="rtl"] .about-media .tag{ right:auto; left:-1px; }
html[dir="rtl"] .lightbox-close{ right:auto; left:36px; }
html[dir="rtl"] .fab-wa{ right:auto; left:26px; }
html[dir="rtl"] .spec-card{ border-left:1px solid var(--line); border-right:3px solid var(--gold); }
html[dir="rtl"] .wm-logo.wm-lg::after,
html[dir="rtl"] .wm-logo.wm-md::after{ left:auto; right:14px; }
html[dir="rtl"] .wm-logo.wm-sm::after,
html[dir="rtl"] .wm-logo.wm-xs::after{ right:auto; left:10px; }
html[dir="rtl"] .play-badge svg{ margin-left:0; margin-right:3px; }
html[dir="rtl"] .hero-badge{ text-align:right; }
html[dir="rtl"] .back-link svg,
html[dir="rtl"] .btn svg{ transform:scaleX(-1); }

/* the ticker scrolls the other way in RTL */
html[dir="rtl"] .strip-track{ animation-direction:reverse; }


/* hero H1 second line — keeps the big word but gives the heading real keywords */
.hero-sub{
  display:block; margin-top:6px;
  font-family:'Oswald',sans-serif; font-weight:500;
  font-size:clamp(13px,1.5vw,19px); letter-spacing:0.18em;
  text-transform:uppercase; color:var(--gold);
}
html[dir="rtl"] .hero-sub{ letter-spacing:0; font-family:'Cairo',sans-serif; }

/* ============ PRODUCT & EXPORT PAGES ============ */
.product-page{ display:grid; grid-template-columns:1.15fr 0.85fr; gap:56px; align-items:start; }
.product-hero{ position:relative; background:var(--charcoal-800); border:1px solid var(--line); border-radius:var(--radius); padding:26px; }
.product-hero img{ width:100%; height:auto; display:block; }
.spec-table h2{ font-family:'Oswald',sans-serif; font-size:22px; letter-spacing:0.04em; text-transform:uppercase; color:var(--white); margin:0 0 22px; }
.spec-table dl{ margin:0; border-top:1px solid var(--line); }
.spec-table dl > div{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:16px; padding:16px 0; border-bottom:1px solid var(--line); }
.spec-table dt{ font-family:'Oswald',sans-serif; font-size:13px; letter-spacing:0.08em; text-transform:uppercase; color:var(--gray-500); }
.spec-table dd{ margin:0; color:var(--gray-300); font-size:15px; }
.spec-note{ margin-top:18px; font-size:13px; color:var(--gray-500); font-style:italic; }
.prose{ max-width:780px; }
.prose h2{ font-family:'Oswald',sans-serif; font-size:clamp(22px,2.4vw,28px); letter-spacing:0.02em; text-transform:uppercase; color:var(--white); margin:36px 0 14px; }
.prose h2:first-child{ margin-top:0; }
.prose h3{ font-family:'Oswald',sans-serif; font-size:18px; letter-spacing:0.02em; color:var(--white); margin:30px 0 10px; }
.prose h3:first-child{ margin-top:0; }
.prose p{ color:var(--gray-300); line-height:1.85; margin:0 0 16px; }
.prose strong{ color:var(--white); }
.faq h3{ color:var(--gold); }
html[dir="rtl"] .prose h2, html[dir="rtl"] .prose h3,
html[dir="rtl"] .spec-table h2, html[dir="rtl"] .spec-table dt{ font-family:'Cairo',sans-serif; letter-spacing:0; }
html[dir="rtl"] .spec-table dl{ text-align:right; }
@media (max-width:860px){
  .product-page{ grid-template-columns:1fr; gap:36px; }
}

/* ============ GCC EXPORT BAND ============ */
.export-band{
  padding:110px 0; background:var(--charcoal-900);
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  position:relative;
}
.export-band::before{
  content:''; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(90deg, var(--gold), transparent 65%);
}
.export-inner{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:64px; align-items:center; }
.export-copy h2{ font-size:clamp(28px,3.4vw,40px); line-height:1.1; color:var(--white); margin:0 0 18px; }
.export-copy p{ color:var(--gray-300); font-size:17px; line-height:1.8; margin:0 0 24px; max-width:560px; }
.export-countries{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:30px; }
.export-countries span{
  font-family:'Oswald',sans-serif; font-size:12px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--gold); border:1px solid rgba(245,177,26,0.4); border-radius:var(--radius);
  padding:8px 14px; background:rgba(245,177,26,0.06);
}
.export-facts{ display:flex; flex-direction:column; gap:2px; }
.export-fact{
  padding:22px 26px; background:var(--charcoal-800);
  border:1px solid var(--line); border-left:3px solid var(--gold);
}
.export-fact strong{
  display:block; font-family:'Oswald',sans-serif; font-weight:600; font-size:15px;
  letter-spacing:0.04em; text-transform:uppercase; color:var(--white); margin-bottom:7px;
}
.export-fact span{ font-size:14.5px; color:var(--gray-300); line-height:1.65; }
html[dir="rtl"] .export-fact{ border-left:1px solid var(--line); border-right:3px solid var(--gold); }
html[dir="rtl"] .export-copy h2,
html[dir="rtl"] .export-countries span,
html[dir="rtl"] .export-fact strong{ font-family:'Cairo',sans-serif; letter-spacing:0; }
@media (max-width:860px){
  .export-inner{ grid-template-columns:1fr; gap:40px; }
  .export-band{ padding:80px 0; }
}

/* nine nav items need tighter spacing than the original five */
.nav-links a{ white-space:nowrap; }
@media (max-width:1400px){
  .nav-links{ gap:24px; }
  .nav-links a{ font-size:12.5px; letter-spacing:0.04em; }
}
@media (max-width:1240px){
  .nav-phone{ display:none; }
  .nav-links{ gap:20px; }
}
@media (max-width:1080px){
  .nav-links{ display:none; }            /* fall back to the drawer sooner */
  .nav-toggle{ display:flex; }          /* ...and make sure the hamburger appears with it */
}

/* phone sits beside the quote button — give it presence and keep it LTR */
.nav-phone{
  border:1px solid var(--line); border-radius:var(--radius);
  padding:10px 14px; font-family:'Oswald',sans-serif;
  letter-spacing:0.04em; color:var(--white);
  transition:border-color .2s ease, color .2s ease;
}
.nav-phone:hover{ border-color:var(--gold); color:var(--gold); }
html[dir="rtl"] .nav-phone{ font-family:'Oswald',sans-serif; }

/* Phone numbers are always a left-to-right run, even inside RTL text,
   otherwise the browser reorders the groups (9553 461 54 971+).
   Applies to Latin and Arabic-Indic digits alike. */
a[href^="tel:"], .contact-card a[href^="tel:"]{
  direction:ltr; unicode-bidi:isolate-override; white-space:nowrap;
}
/* :not(.nav-phone) — this rule outranks the media queries that hide the nav
   phone chip on narrow screens, and without the exclusion it reappears in
   Arabic and shoves the quote button and hamburger off the bar. */
html[dir="rtl"] a[href^="tel:"]:not(.nav-phone){ display:inline-block; }

/* Arabic glyphs are much taller than Latin capitals, so the 0.9 line-height
   the display type relies on makes the hero title overflow and collide with
   the lines beneath it. Give RTL its own metrics. */
html[dir="rtl"] .hero-title{
  line-height:1.5;
  font-size:clamp(46px, 9.5vw, 140px);
  letter-spacing:0;
  margin-bottom:10px;
  padding-bottom:0.12em;      /* room for descenders */
}
html[dir="rtl"] .hero-sub{ margin-top:18px; }
html[dir="rtl"] .hero-flagship{ margin-top:6px; }

/* The brand must never be squeezed by the nav. Before this it shrank to 76px,
   wrapping "TRAILER SOLUTION" onto two lines on top of the first nav link. */
.brand{ flex:0 0 auto; }
.brand-text{ min-width:0; }
.brand-text strong, .brand-text span{ white-space:nowrap; }
.nav-right{ flex:0 0 auto; }
.nav-links{ min-width:0; flex:0 1 auto; }

/* Nine nav items in English need more room than the text container allows,
   so the nav bar gets its own wider max-width and tighter metrics. */
.nav .container{ max-width:1440px; }
@media (max-width:1440px){
  .nav-links{ gap:18px; }
  .nav-links a{ font-size:12px; letter-spacing:0.03em; }
}
@media (max-width:1360px){
  .nav-phone{ display:none; }
}
@media (max-width:1280px){
  .nav-links{ display:none; }
  .nav-toggle{ display:flex; }
}

/* direction:ltr (needed so the digits keep their order) also resets text-align
   to left, which left-stranded the number while its siblings stayed right-aligned. */
html[dir="rtl"] .footer-links a[href^="tel:"],
html[dir="rtl"] .contact-card a[href^="tel:"]{ text-align:right; }
html[dir="ltr"] .footer-links a[href^="tel:"],
html[dir="ltr"] .contact-card a[href^="tel:"]{ text-align:left; }

/* the bidi rules are for numbers; icon-only links shouldn't be block-level */
html[dir="rtl"] .footer-social a[href^="tel:"]{ display:flex; }



/* ============ WORKSHOP VIDEO (homepage) ============ */
.video-section{ padding:120px 0; background:var(--charcoal-950); border-top:1px solid var(--line); }
.video-section .video-grid{ grid-template-columns:repeat(2,1fr); grid-auto-rows:300px; }
@media (max-width:860px){
  .video-section{ padding:80px 0; }
  .video-section .video-grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
}

/* ============ FOOTER CONTACT POPOVERS ============ */
.contact-pop-wrap{ position:relative; display:inline-flex; }
.contact-pop{
  position:absolute; bottom:calc(100% + 12px); left:0; transform:translateY(6px);
  background:#1a1818; border:1px solid var(--line); border-radius:12px;
  padding:14px 16px; min-width:210px; z-index:200;
  box-shadow:0 18px 40px rgba(0,0,0,0.55);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.contact-pop-wrap.is-open .contact-pop{
  opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0);
}
.contact-pop::after{
  content:''; position:absolute; top:100%; left:13px;
  border:6px solid transparent; border-top-color:var(--line);
}
.contact-pop-value{
  display:block; font-size:15px; color:var(--white); font-weight:500;
  white-space:nowrap; direction:ltr; unicode-bidi:isolate-override; text-align:left;
}
.contact-pop-actions{ display:flex; gap:8px; margin-top:12px; }
.contact-pop-go, .contact-pop-copy{
  font-size:12.5px; letter-spacing:0.04em; text-transform:uppercase;
  padding:7px 12px; border-radius:7px; border:1px solid var(--line);
  background:transparent; color:var(--gray-500); cursor:pointer; white-space:nowrap;
  font-family:inherit; transition:border-color .2s ease, color .2s ease;
}
.contact-pop-go{ background:var(--gold); border-color:var(--gold); color:#151312; font-weight:600; }
.contact-pop-go:hover{ filter:brightness(1.08); color:#151312; }
.contact-pop-copy:hover{ border-color:var(--gold); color:var(--gold); }
html[dir="rtl"] .contact-pop{ left:auto; right:0; }
html[dir="rtl"] .contact-pop::after{ left:auto; right:13px; }
html[dir="rtl"] .contact-pop-value{ text-align:right; }
.footer-social .contact-pop a.contact-pop-go{
  width:auto; height:auto; border-radius:7px; display:inline-flex;
}
.footer-social .contact-pop a.contact-pop-go:hover{ border-color:var(--gold); }