/* TWM Truck — concept site, dressed in the materials of their Bukit Jelutong centre. */
:root{
  /* TWM's own building, sampled 2026-09-25: anthracite cladding, board-formed concrete,
     one walnut timber strip, white lettering. The site wears the showroom. */
  --asphalt:#1B1D20; --asphalt-2:#24272B; --asphalt-3:#34383D;
  --concrete:#E6E5E1; --paper:#F4F3F0; --ink:#1B1D20; --ink-2:#4F5358; --line:#D5D3CE;
  --hi:#B87B4B; --hi-ink:#FFFFFF; --wa:#1FAF5A;
  --timber-dark:#8A5A33; --steel:#A9ABAD;
  --cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --sans:"Barlow",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:14px; --bar:64px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--bar) + 12px);overflow-x:clip}
body{margin:0;font-family:var(--sans);font-size:17px;line-height:1.6;color:var(--ink);background:var(--paper);overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3{font-family:var(--cond);font-weight:800;line-height:1.02;letter-spacing:-.01em;margin:0 0 .4em;text-transform:uppercase}
h2{font-size:clamp(38px,5.4vw,64px)}
h3{font-size:24px;letter-spacing:0}
p{margin:0 0 1em}
.wrap{max-width:1200px;margin:0 auto;padding:0 22px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.eyebrow{font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.16em;text-transform:uppercase;color:var(--hi);margin:0 0 14px}
.eyebrow-dark{color:var(--timber-dark)}

/* ---- header: fixed to the viewport at top:0, solid, so iOS tints the status bar ---- */
.bar{position:fixed;top:0;left:0;right:0;z-index:50;height:calc(var(--bar) + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 22px 0;display:flex;align-items:center;gap:24px;
  background:var(--asphalt);color:#fff;border-bottom:3px solid var(--hi)}
.brand{display:flex;align-items:baseline;gap:6px;text-decoration:none;margin-right:auto}
.brand-mark{font-family:var(--cond);font-weight:800;font-size:30px;letter-spacing:.02em;color:var(--hi)}
.brand-word{font-family:var(--cond);font-weight:700;font-size:22px;letter-spacing:.14em;text-transform:uppercase}
.nav{display:flex;gap:26px}
.nav a{font-family:var(--cond);font-weight:700;font-size:17px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:#D6D3CD}
.nav a:hover{color:var(--hi)}
@media (max-width:820px){.nav{display:none}}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:999px;
  font-family:var(--cond);font-weight:700;font-size:18px;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;
  border:2px solid transparent;cursor:pointer;transition:transform .15s,background .15s}
.btn:hover{transform:translateY(-1px)}
.btn-hi{background:var(--hi);color:var(--hi-ink)}
.btn-hi:hover{background:#FFC633}
.btn-ghost{border-color:currentColor;background:transparent;color:inherit}
.btn-wa{background:var(--wa);color:#fff}
.btn-sm{min-height:40px;padding:0 18px;font-size:16px}

/* ---- hero ---- */
.hero{position:relative;min-height:min(92vh,860px);display:flex;align-items:flex-end;color:#fff;background:var(--asphalt);
  padding-top:calc(var(--bar) + env(safe-area-inset-top));overflow:hidden}
.hero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 55%}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,23,26,.94) 0%,rgba(21,23,26,.78) 38%,rgba(21,23,26,.15) 72%,rgba(21,23,26,0) 100%),
  linear-gradient(0deg,rgba(21,23,26,.85) 0%,rgba(21,23,26,0) 45%)}
.hero-copy{position:relative;max-width:1200px;width:100%;margin:0 auto;padding:60px 22px 48px}
.hero h1{font-size:clamp(46px,7.6vw,104px);max-width:12ch;margin-bottom:22px}
.hl{color:var(--hi)}
.lede{max-width:34em;font-size:19px;color:#E3E0DA}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:28px 0 40px}
.hero-facts{display:flex;flex-wrap:wrap;gap:0;margin:0;border-top:1px solid rgba(255,255,255,.18);padding-top:20px}
.hero-facts div{padding:0 28px 0 0;margin-right:28px;border-right:1px solid rgba(255,255,255,.18)}
.hero-facts div:last-child{border:0}
.hero-facts dt{font-family:var(--cond);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:#A8A39B}
.hero-facts dd{margin:0;font-family:var(--cond);font-weight:800;font-size:34px;line-height:1.1}
.hero-facts small{font-family:var(--sans);font-weight:500;font-size:14px;color:#C9C4BC;margin-left:4px}
@media (max-width:620px){
  .hero{min-height:auto}
  .hero-img img{object-position:22% 50%}
  .hero-shade{background:linear-gradient(0deg,rgba(21,23,26,.97) 0%,rgba(21,23,26,.88) 55%,rgba(21,23,26,.35) 100%)}
  .hero-copy{padding-top:220px}
  .hero-facts div{padding-right:16px;margin-right:16px}
  .hero-facts dd{font-size:28px}
}

/* ---- advisor ---- */
.advisor{background:var(--concrete);padding:96px 0}
.advisor-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:start}
.ticks{list-style:none;padding:0;margin:24px 0 0}
.ticks li{position:relative;padding-left:30px;margin-bottom:10px;font-weight:500}
.ticks li:before{content:"";position:absolute;left:0;top:.55em;width:16px;height:8px;border-left:3px solid var(--timber-dark);border-bottom:3px solid var(--timber-dark);transform:rotate(-45deg)}
.chat{background:var(--asphalt);color:#fff;border-radius:22px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(21,23,26,.55);display:flex;flex-direction:column;min-height:560px}
.chat-head{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--asphalt-3)}
.chat-head strong{display:block;font-family:var(--cond);font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.chat-head small{color:#9C978F;font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--wa);box-shadow:0 0 0 4px rgba(31,175,90,.2)}
.chat-log{flex:1;padding:22px;overflow-y:auto;max-height:520px;display:flex;flex-direction:column;gap:12px}
.msg{max-width:88%;padding:12px 16px;border-radius:16px;font-size:16px;line-height:1.5;animation:rise .25s ease-out both}
.msg-bot{background:var(--asphalt-2);border:1px solid var(--asphalt-3);border-bottom-left-radius:4px;align-self:flex-start}
.msg-me{background:var(--hi);color:var(--hi-ink);border-bottom-right-radius:4px;align-self:flex-end;font-weight:500}
.msg p{margin:0 0 .5em}.msg p:last-child{margin:0}
.typing{display:inline-flex;gap:5px;padding:16px 18px}
.typing i{width:7px;height:7px;border-radius:50%;background:#8C877F;animation:blink 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 22px 14px}
.chip{background:transparent;color:#E8E4DD;border:1px solid #4A4F55;border-radius:999px;padding:8px 14px;font:500 15px var(--sans);cursor:pointer}
.chip:hover{border-color:var(--hi);color:var(--hi)}
.chat-form{display:flex;gap:10px;padding:14px 16px 16px;border-top:1px solid var(--asphalt-3)}
.chat-form input{flex:1;min-width:0;background:var(--asphalt-2);border:1px solid var(--asphalt-3);border-radius:999px;color:#fff;padding:0 18px;font:16px var(--sans);min-height:48px}
.chat-form input:focus{outline:2px solid var(--hi);outline-offset:1px}
.rec{background:#0E0F11;border:1px solid var(--hi);border-radius:16px;padding:18px;align-self:stretch;max-width:none}
.rec .tag{font-family:var(--cond);font-size:14px;letter-spacing:.16em;text-transform:uppercase;color:var(--hi)}
.rec h4{font-family:var(--cond);font-weight:800;font-size:30px;text-transform:uppercase;margin:4px 0 8px;line-height:1.05}
.rec ul{margin:8px 0 12px;padding-left:18px}.rec li{margin-bottom:4px}
.rec .est{display:flex;justify-content:space-between;gap:12px;border-top:1px solid var(--asphalt-3);padding-top:12px;margin-top:6px;font-size:15px;color:#C9C4BC}
.rec .est b{font-family:var(--cond);font-size:26px;color:#fff}
.rec .btn{margin-top:14px;width:100%}
@media (max-width:900px){.advisor{padding:72px 0}.advisor-grid{grid-template-columns:1fr;gap:32px}}

/* ---- bodies bento ---- */
.bodies{padding:96px 0;background:var(--paper)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(180px,auto);gap:14px;margin-top:28px}
.tile{border-radius:var(--r);overflow:hidden;position:relative}
.tile-photo{grid-column:span 3;grid-row:span 2;min-height:380px;background:var(--asphalt)}
.tile-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s}
.tile-photo:hover img{transform:scale(1.04)}
.tile-cap{position:absolute;left:0;right:0;bottom:0;padding:60px 22px 20px;color:#fff;background:linear-gradient(0deg,rgba(14,15,17,.92),rgba(14,15,17,0))}
.tile-cap p{margin:0;color:#DDD8D0}
.tile-text{grid-column:span 2;background:#fff;border:1px solid var(--line);padding:22px}
.tile-text:nth-of-type(n){}
.tile-text p{color:var(--ink-2);margin:0;font-size:16px}
.num{font-family:var(--cond);font-weight:800;font-size:15px;letter-spacing:.14em;color:var(--timber-dark);display:block;margin-bottom:22px}
.bento .tile-text:nth-child(6),.bento .tile-text:nth-child(7){grid-column:span 3}
@media (max-width:900px){
  .bento{grid-template-columns:1fr 1fr}
  .tile-photo{grid-column:span 2;grid-row:auto;min-height:300px}
  .tile-text,.bento .tile-text:nth-child(6),.bento .tile-text:nth-child(7){grid-column:span 1}
  .bento .tile-text:nth-child(7){grid-column:span 2}
}
@media (max-width:520px){.bento{grid-template-columns:1fr}.tile-text,.bento .tile-text:nth-child(7){grid-column:span 1}.tile-photo{grid-column:span 1}}

/* ---- promo ---- */
.promo{background:var(--hi);color:var(--hi-ink);padding:72px 0;
  background-image:repeating-linear-gradient(-45deg,rgba(0,0,0,.05) 0 18px,transparent 18px 36px)}
.promo .eyebrow{color:var(--hi-ink)}
.promo-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center}
.promo-sub{font-size:20px;margin:0}
.perks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.perks li{background:var(--asphalt);color:#fff;border-radius:var(--r);padding:20px 16px;font-weight:600;line-height:1.3}
.perks span{display:block;font-family:var(--cond);font-weight:800;font-size:30px;text-transform:uppercase;color:var(--hi);line-height:1}
@media (max-width:820px){.promo-grid{grid-template-columns:1fr}}
@media (max-width:420px){.perks{grid-template-columns:1fr}}

/* ---- finance ---- */
.finance{padding:96px 0;background:var(--concrete)}
.fin-grid{display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.calc{background:#fff;border:1px solid var(--line);border-radius:22px;padding:28px;display:grid;gap:18px}
.calc label{display:grid;grid-template-columns:1fr auto;gap:6px 12px;font-weight:600;font-size:15px}
.calc output{font-family:var(--cond);font-weight:700;font-size:20px}
.calc input[type=range]{grid-column:1 / -1;width:100%;accent-color:var(--timber-dark);height:28px}
.calc-out{background:var(--asphalt);color:#fff;border-radius:16px;padding:18px 22px;display:grid;gap:2px}
.calc-out span{font-family:var(--cond);letter-spacing:.14em;text-transform:uppercase;font-size:15px;color:#A8A39B}
.calc-out strong{font-family:var(--cond);font-weight:800;font-size:52px;line-height:1;color:var(--hi)}
.calc-out small{color:#A8A39B;font-size:14px}
@media (max-width:900px){.fin-grid{grid-template-columns:1fr;gap:28px}.finance{padding:72px 0}}

/* ---- contact + footer ---- */
.contact{background:var(--asphalt);color:#fff;padding:88px 0}
.contact-grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:end}
.contact p{color:#D6D3CD;max-width:34em}
.addr{font-style:normal;font-size:19px;font-weight:500;margin:0 0 10px;color:#fff}
.rating{font-weight:600}.rating span{color:var(--hi);letter-spacing:2px}
.contact-cta{display:flex;flex-direction:column;gap:12px;min-width:280px}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr}.contact-cta{min-width:0}}
.foot{background:#0E0F11;color:#8C877F;padding:32px 0 calc(32px + env(safe-area-inset-bottom));font-size:14px}
.foot p{margin:0 0 6px}.foot a{color:#D6D3CD}
.credits{font-size:13px;color:#6E6A64}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ---- the real centre (client's own photo) ---- */
.centre-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.centre-photo{margin:0;border-radius:22px;overflow:hidden;border:3px solid var(--hi);aspect-ratio:1206/1066}
.centre-photo img{width:100%;height:100%;object-fit:cover}
.centre-copy .contact-cta{flex-direction:row;flex-wrap:wrap;min-width:0;margin-top:22px}
@media (max-width:900px){.centre-grid{grid-template-columns:1fr;gap:32px}}

/* Desktop: the cab sits on the right 62%, the copy on solid asphalt on the left. The Actros
   faces left in its photo, so a full-bleed image put its grille under the headline. */
@media (min-width:900px){
  .hero-img img{left:38%;width:62%;object-position:62% 40%}
  .hero-shade{background:linear-gradient(90deg,var(--asphalt) 0%,var(--asphalt) 38%,rgba(21,23,26,.55) 48%,rgba(21,23,26,0) 62%),
    linear-gradient(0deg,rgba(21,23,26,.8) 0%,rgba(21,23,26,0) 35%)}
}

/* ---- CI pass: white is the signage colour, timber is the one warm accent ---- */
.btn-hi{background:#fff;color:var(--asphalt)}
.btn-hi:hover{background:var(--concrete)}
.advisor .btn-hi,.chat .btn-hi{background:var(--asphalt);color:#fff}
.chat .btn-hi{background:#fff;color:var(--asphalt)}
.hl{color:var(--steel)}
.bar{border-bottom:3px solid var(--hi)}
.brand-mark{color:#fff}
.brand-word{color:var(--steel)}
.msg-me{background:#fff;color:var(--asphalt)}
.chat-form input:focus{outline-color:var(--hi)}
.rec{border-color:var(--hi)}
.promo{background:var(--asphalt-2);color:#fff;background-image:none;border-top:6px solid var(--hi)}
.promo .eyebrow{color:var(--hi)}
.promo h2{color:#fff}
.perks li{background:var(--concrete);color:var(--ink)}
.perks span{color:var(--timber-dark)}
.calc-out strong{color:#fff}
.centre-photo{border-color:var(--asphalt-3)}