/* nb-home.css
 * Novlan Trucks homepage, converted from the Manus React build.
 * Every rule is scoped under .nb-home so nothing reaches the CMS header or footer.
 * The header, nav and footer rules from the original are dropped: the CMS supplies those.
 */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&family=Teko:wght@500;600;700&display=swap');


.nb-home { --ink:#0b151c; --ink-2:#101c24; --orange:#ff4f0a; --sand:#f5f2ea; --line:rgba(255,255,255,.18); --text:#e8edf0; --muted:#b8c1c8; }
.nb-home * { box-sizing:border-box; }
.nb-home a { color:inherit; text-decoration:none; }
.nb-home button, .nb-home input { font:inherit; }
.nb-home .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.nb-home { min-width:320px; overflow:hidden; }
.nb-home .hero { position:relative; min-height:max(685px,calc(100vh - 88px)); overflow:hidden; background:#162735; }
.nb-home .hero__image, .nb-home .hero__video, .nb-home .truck-centre>img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nb-home .hero__image { object-position:68% center; }
.nb-home .hero__video { z-index:0; background-color:#162735; background-size:cover; background-position:68% center; }
.nb-home .hero__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,16,23,.96) 0%,rgba(11,21,28,.78) 42%,rgba(9,20,28,.14) 81%),linear-gradient(0deg,rgba(8,14,19,.78) 0%,transparent 43%); }
.nb-home .hero--video-active .hero__shade { background:linear-gradient(90deg,rgba(7,16,23,.88) 0%,rgba(11,21,28,.62) 44%,rgba(9,20,28,.12) 82%),linear-gradient(0deg,rgba(8,14,19,.72) 0%,transparent 43%); }
.nb-home .hero__content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:max(685px,calc(100vh - 88px)); width:min(760px,90vw); margin-left:clamp(24px,7vw,112px); padding:70px 0; }
.nb-home .eyebrow { margin:0; color:var(--orange); font-size:10px; line-height:1.35; letter-spacing:.15em; font-weight:800; text-transform:uppercase; }
.nb-home .hero__eyebrow { width:max-content; max-width:100%; padding:8px 12px; border:1px solid rgba(255,79,10,.72); background:rgba(10,22,30,.48); }
.nb-home h1, .nb-home h2, .nb-home p { margin-top:0; }
.nb-home h1 { margin:27px 0 0; font-family:Teko,Impact,sans-serif; font-size:clamp(88px,11.7vw,176px); font-weight:700; line-height:.73; letter-spacing:1px; text-transform:uppercase; }
.nb-home h1 span, .nb-home .truck-centre h2 span, .nb-home .news-centre h2 span { color:var(--orange); }
.nb-home .hero__statement { max-width:650px; margin-top:37px; padding-left:22px; border-left:4px solid var(--orange); }
.nb-home .hero__statement p:first-child { margin-bottom:12px; color:#fff; font-size:clamp(17px,1.45vw,23px); line-height:1.35; font-weight:800; }
.nb-home .hero__statement p:last-child { max-width:610px; margin-bottom:0; color:var(--muted); font-size:14px; line-height:1.65; }
.nb-home .hero__video-toggle { display:flex; align-items:center; gap:12px; width:max-content; max-width:100%; margin-top:26px; padding:10px 17px 10px 10px; border:1px solid rgba(255,255,255,.7); background:rgba(9,20,28,.82); color:#fff; cursor:pointer; text-align:left; transition:background .18s ease,border-color .18s ease,transform .18s ease; }
.nb-home .hero__video-toggle:hover { background:#fff; border-color:#fff; color:var(--ink); transform:translateY(-1px); }
.nb-home .hero__play-icon { display:grid; place-items:center; width:38px; height:38px; padding-left:2px; background:var(--orange); color:#151515; font-size:14px; }
.nb-home .hero__video-toggle small { display:block; margin-bottom:3px; color:var(--orange); font-size:8px; letter-spacing:.14em; font-weight:800; text-transform:uppercase; }
.nb-home .hero__video-toggle:hover small { color:var(--orange); }
.nb-home .hero__video-toggle span:last-child { font-family:Teko,Impact,sans-serif; font-size:22px; line-height:.78; letter-spacing:.06em; font-weight:700; }
.nb-home .hero__video-close { position:absolute; z-index:2; left:clamp(24px,7vw,112px); bottom:30px; display:flex; align-items:center; gap:8px; padding:9px 13px; border:1px solid rgba(255,255,255,.72); background:rgba(7,17,24,.76); color:#fff; font-size:9px; letter-spacing:.12em; font-weight:800; cursor:pointer; transition:background .18s ease; }
.nb-home .hero__video-close:hover { background:var(--orange); border-color:var(--orange); color:#151515; }
.nb-home .hero__video-close span { font-size:19px; font-weight:400; line-height:.6; }
.nb-home .inventory-search { display:flex; align-items:center; gap:12px; width:min(660px,100%); margin-top:36px; padding:10px 10px 10px 21px; background:#fff; color:#17262e; box-shadow:0 16px 35px rgba(0,0,0,.25); }
.nb-home .search-icon { color:var(--orange); font-size:27px; line-height:1; }
.nb-home .inventory-search input { min-width:0; flex:1; border:0; outline:0; color:#364952; font-family:Teko,Impact,sans-serif; font-size:22px; letter-spacing:.1em; font-weight:700; text-transform:uppercase; }
.nb-home .inventory-search input::placeholder { color:#4d6674; opacity:1; }
.nb-home .inventory-search button { flex:0 0 auto; min-height:52px; padding:0 27px; border:0; background:var(--orange); color:#151515; font-size:11px; letter-spacing:.15em; font-weight:800; cursor:pointer; transition:background .18s ease; }
.nb-home .inventory-search button:hover { background:#161f25; color:#fff; }
.nb-home .inventory-search button span { margin-left:9px; font-size:18px; vertical-align:-1px; }
.nb-home .pathways { display:grid; grid-template-columns:repeat(3,1fr); background:#070e13; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.nb-home .pathway { min-height:275px; padding:clamp(38px,5vw,72px) clamp(28px,6vw,105px); border-right:1px solid var(--line); transition:background .2s ease; }
.nb-home .pathway:last-child { border-right:0; }
.nb-home .pathway:hover { background:rgba(255,255,255,.035); }
.nb-home .pathway h2 { max-width:300px; margin:15px 0 22px; color:#fff; font-family:Teko,Impact,sans-serif; font-size:clamp(36px,3.3vw,58px); line-height:.83; letter-spacing:.6px; }
.nb-home .pathway span { color:#cad3d8; font-size:11px; letter-spacing:.08em; font-weight:800; }
.nb-home .pathway span b, .nb-home .outlined-action b { color:var(--orange); font-size:18px; margin-left:7px; vertical-align:-2px; }
.nb-home .feature-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(370px,.85fr); background:var(--ink); }
.nb-home .truck-centre { position:relative; min-height:535px; overflow:hidden; }
.nb-home .truck-centre>img { object-position:center; }
.nb-home .truck-centre__shade { position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,16,23,.96),rgba(7,18,25,.7) 50%,rgba(7,18,25,.12)); }
.nb-home .truck-centre__content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; min-height:535px; padding:clamp(34px,5vw,76px); }
.nb-home .truck-centre h2 { margin:13px 0 0; color:#fff; font-family:Teko,Impact,sans-serif; font-size:clamp(53px,5.5vw,85px); line-height:.76; letter-spacing:.7px; }
.nb-home .truck-centre__actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; max-width:600px; margin-top:30px; }
.nb-home .truck-centre__actions a { padding:14px 17px; border:1px solid var(--orange); background:var(--orange); color:#142129; transition:background .18s ease,color .18s ease; }
.nb-home .truck-centre__actions a+ a { border-color:rgba(255,255,255,.72); background:rgba(7,19,25,.35); color:#fff; }
.nb-home .truck-centre__actions a:hover { background:#fff; color:#152128; border-color:#fff; }
.nb-home .truck-centre__actions small { display:block; font-size:9px; letter-spacing:.13em; font-weight:800; }
.nb-home .truck-centre__actions strong { display:flex; justify-content:space-between; align-items:center; margin-top:7px; font-family:Teko,Impact,sans-serif; font-size:25px; line-height:.8; letter-spacing:.5px; }
.nb-home .news-centre { display:flex; flex-direction:column; justify-content:center; padding:clamp(42px,6vw,100px); background:var(--ink-2); border-left:1px solid var(--line); }
.nb-home .news-centre h2 { margin:16px 0 0; font-family:Teko,Impact,sans-serif; font-size:clamp(48px,4.6vw,76px); line-height:.78; letter-spacing:.5px; }
.nb-home .news-centre>p:not(.eyebrow) { max-width:440px; margin:27px 0 0; color:var(--muted); font-size:14px; line-height:1.7; }
.nb-home .outlined-action { display:inline-block; width:max-content; margin-top:30px; padding:15px 19px; border:1px solid rgba(255,255,255,.65); font-size:10px; letter-spacing:.12em; font-weight:800; transition:background .18s ease,color .18s ease; }
.nb-home .outlined-action:hover { background:#fff; color:var(--ink); }
@media (max-width:850px) {
  .nb-home .hero { min-height:730px; }
  .nb-home .hero__content { width:auto; min-height:730px; margin:0; padding:67px 25px 54px; justify-content:flex-start; }
  .nb-home .hero__image, .nb-home .hero__video { object-position:62% center; }
  .nb-home .hero__shade { background:linear-gradient(90deg,rgba(7,16,23,.95),rgba(9,19,26,.66) 56%,rgba(9,19,26,.15)),linear-gradient(0deg,rgba(7,13,18,.78),transparent 49%); }
  .nb-home .hero__video-close { left:25px; bottom:21px; }
  .nb-home h1 { font-size:clamp(74px,20vw,130px); }
  .nb-home .hero__statement { margin-top:30px; padding-left:16px; }
  .nb-home .hero__statement p:first-child { font-size:18px; }
  .nb-home .hero__statement p:last-child { font-size:13px; }
  .nb-home .inventory-search { margin-top:30px; padding:8px 8px 8px 14px; }
  .nb-home .inventory-search input { font-size:19px; }
  .nb-home .inventory-search button { min-height:50px; padding:0 18px; }
  .nb-home .pathways { grid-template-columns:1fr; }
  .nb-home .pathway { min-height:0; padding:36px 25px; border-right:0; border-bottom:1px solid var(--line); }
  .nb-home .pathway:last-child { border-bottom:0; }
  .nb-home .feature-grid { grid-template-columns:1fr; }
  .nb-home .truck-centre { min-height:495px; }
  .nb-home .truck-centre__content { min-height:495px; padding:36px 25px; }
  .nb-home .news-centre { min-height:400px; padding:52px 25px; border-left:0; border-top:1px solid var(--line); }
}
@media (max-width:540px) {
  .nb-home .hero { min-height:748px; }
  .nb-home .hero__content { min-height:748px; padding-top:61px; }
  .nb-home .hero__eyebrow { font-size:8px; }
  .nb-home h1 { margin-top:20px; font-size:78px; }
  .nb-home .hero__statement { margin-top:28px; }
  .nb-home .hero__statement p:last-child { line-height:1.55; }
  .nb-home .inventory-search { display:grid; grid-template-columns:24px 1fr; gap:8px; }
  .nb-home .inventory-search button { grid-column:1/-1; width:100%; }
  .nb-home .search-icon { font-size:24px; }
  .nb-home .inventory-search input { font-size:17px; }
  .nb-home .truck-centre__actions { grid-template-columns:1fr; }
  .nb-home .news-centre h2 { font-size:54px; }
}
@media (prefers-reduced-motion:reduce) {
  .nb-home .hero__video-toggle, .nb-home .hero__video-close { transition:none; }
}

/* ------------------------------------------------------------------
   Living inside the CMS content area.
   The original ran as a standalone page, so its base colours were on
   <body> and it filled the viewport. Inside the CMS it sits in
   .container > .row > .col, so it needs its own base and a full-bleed
   break-out of that container.
   ------------------------------------------------------------------ */

.nb-home {
  /* base that used to live on <body> */
  background: var(--ink);
  color: var(--text);
  font-family: Montserrat, Arial, sans-serif;
  line-height: normal;

  /* full bleed out of the CMS container */
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* the CMS column adds padding and bottom margin around every block */
.nb-home,
.nb-home * {
  box-sizing: border-box;
}

/* the CMS sets a light link colour sitewide; the homepage is dark */
.nb-home a {
  color: inherit;
  text-decoration: none;
}

/* headings inside the CMS pick up its serif stack, override explicitly */
.nb-home h1,
.nb-home h2 {
  color: #fff;
  background: none;
  padding: 0;
  border: 0;
  text-transform: uppercase;
}
.nb-home h1 span,
.nb-home .truck-centre h2 span,
.nb-home .news-centre h2 span { color: var(--orange); }

/* the CMS margin-bottom on columns would gap the sections apart */
.nb-home p { margin-bottom: 0; }

/* the hero sizes itself against the viewport minus the Manus 88px header.
   The CMS header is taller and already above us, so just use a fixed height. */
.nb-home .hero,
.nb-home .hero__content { min-height: min(760px, 88vh); }
@media (max-width: 850px) {
  .nb-home .hero,
  .nb-home .hero__content { min-height: 730px; }
}

/* ------------------------------------------------------------------
   The CMS editor will not keep an <a> wrapped around block elements,
   so each pathway is a <div> with a stretched link inside.
   ------------------------------------------------------------------ */
.nb-home .pathway { position: relative; }
.nb-home .pathway__go {
  color: #cad3d8;
  font-size: 11px;
  letter-spacing: .08em;
  font-weight: 800;
}
.nb-home .pathway__go b { color: var(--orange); font-size: 18px; margin-left: 7px; vertical-align: -2px; }
/* the whole card is clickable */
.nb-home .pathway__go::after { content: ""; position: absolute; inset: 0; }
.nb-home .pathway:hover .pathway__go { color: #fff; }

/* the site-wide reCAPTCHA badge is noise on a design page */
.grecaptcha-badge { visibility: hidden !important; }

/* the CMS column adds a bottom margin that shows as a white strip
   between the last section and the footer */
.nb-home { margin-bottom: 0 !important; }
.nb-home > section:last-child { margin-bottom: 0; }

/* the CMS column wrapping the page body carries margin-bottom:15px,
   which shows as a white strip above the footer */
.col:has(> .nb-home) { margin-bottom: 0 !important; }
/* fallback for browsers without :has() - the wrapper is always .col */
.nb-home { margin-bottom: -15px; }

/* the background was being lost to a later rule; put it back with weight */
.nb-home { background-color: var(--ink) !important; }