/* Forklift Rentals DFW -- marketing site styles. Uses tokens from
   colors_and_type.css. Multi-page static site; chrome injected by site.js. */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--white); color: var(--fg-2); font-family: var(--font-body); }
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.container { max-width: var(--container-max); margin: 0 auto; padding-inline: 24px; width: 100%; }
.lic { display:inline-flex; align-items:center; justify-content:center; flex:none; }
.lic svg { width:100%; height:100%; display:block; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-weight:600; font-size:15px; line-height:1; border:1.5px solid transparent; text-decoration:none;
  border-radius: var(--radius-md); padding:12px 22px; transition: var(--transition); white-space:nowrap; }
.btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.btn .lic { width:18px; height:18px; }
.btn-primary { background: var(--navy-900); color:#fff; }
.btn-primary:hover { background: var(--navy-800); }
.btn-accent { background: var(--orange-500); color:#fff; }
.btn-accent:hover { background: var(--orange-600); }
.btn-outline { background:transparent; color: var(--navy-900); border-color: var(--gray-300); }
.btn-outline:hover { background: var(--gray-50); border-color: var(--navy-900); }
.btn-light { background:#fff; color: var(--navy-900); }
.btn-light:hover { background: var(--gray-100); }
.btn-on-dark { background:transparent; color:#fff; border-color: rgba(255,255,255,.4); }
.btn-on-dark:hover { background: rgba(255,255,255,.12); }
.btn-lg { padding:15px 30px; font-size:16px; }
.btn-block { width:100%; }

.eyebrow { font-family: var(--font-display); font-weight:600; font-size:14px; text-transform:uppercase;
  letter-spacing: var(--tracking-wider); color: var(--orange-500); margin:0 0 10px; }
.eyebrow.on-dark { color: var(--sky-400); }

/* ---------- Top utility bar ---------- */
.topbar { background: var(--navy-950); color: var(--fg-on-dark-2); font-size:13.5px; }
.topbar .inner { display:flex; align-items:center; justify-content:space-between; padding-block:8px; gap:16px; flex-wrap:wrap; }
.topbar .left { display:flex; align-items:center; gap:8px; }
.topbar .right { display:flex; align-items:center; gap:20px; }
.topbar a { color:#fff; text-decoration:none; display:flex; align-items:center; gap:7px; font-weight:600; }
.topbar a:hover { color: var(--sky-400); }
.topbar .lic { width:15px; height:15px; color: var(--sky-400); }

/* ---------- Header / nav ---------- */
.hdr { position: sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--gray-200); box-shadow: var(--shadow-xs); }
.hdr .inner { display:flex; align-items:center; gap:24px; padding-block:14px; }
.hdr-logo { display:flex; align-items:center; flex:none; }
.hdr-logo img { height:58px; width:auto; }
.nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.nav a { display:block; padding:10px 13px; color: var(--navy-900); font-weight:600; font-size:14.5px; text-decoration:none; border-radius: var(--radius-sm); white-space:nowrap; }
.nav a:hover { background: var(--gray-100); }
.nav a.active { color: var(--orange-500); }
.hdr-cta { display:flex; align-items:center; gap:12px; flex:none; }
.hdr-phone { display:flex; align-items:center; gap:8px; color: var(--navy-900); font-weight:700; font-family: var(--font-display); font-size:18px; text-decoration:none; white-space:nowrap; }
.hdr-phone .lic { width:18px; height:18px; color: var(--orange-500); }
.menu-toggle { display:none; background:none; border:none; cursor:pointer; color: var(--navy-900); }
.menu-toggle .lic { width:28px; height:28px; }

/* mobile menu */
.mnav { display:none; }
@media (max-width: 1140px) {
  .nav, .hdr-phone { display:none; }
  .menu-toggle { display:flex; }
  .mnav { display:block; position:fixed; inset:0 0 0 auto; width:300px; background:#fff; z-index:60;
    box-shadow: var(--shadow-lg); transform: translateX(100%); transition: transform var(--transition); padding:20px; overflow:auto; }
  .mnav.open { transform: translateX(0); }
  .mnav a { display:block; padding:13px 8px; color: var(--navy-900); font-weight:600; border-bottom:1px solid var(--gray-100); text-decoration:none; }
  .mnav a.active { color: var(--orange-500); }
  .mnav .close { display:flex; justify-content:flex-end; margin-bottom:8px; background:none; border:none; cursor:pointer; color: var(--navy-900); }
  .mnav .close .lic { width:26px; height:26px; }
  .mnav-backdrop { display:none; position:fixed; inset:0; background: rgba(7,24,43,.45); z-index:55; }
  .mnav-backdrop.open { display:block; }
}

/* ---------- Generic section ---------- */
.section { padding-block:72px; }
.section.tight { padding-block:52px; }
.section.alt { background: var(--gray-50); }
.section.navy { background: var(--navy-950); color: var(--fg-on-dark-2); }
.section.navy h2, .section.navy h3 { color:#fff; }
.sec-head { max-width:680px; margin-bottom:40px; }
.sec-head.center { margin-inline:auto; text-align:center; }
.sec-head h2 { margin:0; }
.sec-head p { margin:12px 0 0; font-size:17px; }

/* ---------- Hero ---------- */
.hero { position:relative; background: var(--navy-950); color:#fff; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; background:
  radial-gradient(1100px 500px at 75% -10%, rgba(95,180,244,.18), transparent 60%); pointer-events:none; }
.hero .inner { position:relative; z-index:1; display:grid; grid-template-columns: 1.05fr .95fr; gap:48px; align-items:center; padding-block:84px; }
.hero h1 { font-family: var(--font-display); font-weight:700; text-transform:uppercase; letter-spacing:-0.01em;
  font-size:62px; line-height:1.02; color:#fff; margin:0; }
.hero h1 .accent { color: var(--orange-500); }
.hero p { color: var(--fg-on-dark-2); font-size:19px; line-height:1.6; margin:20px 0 0; max-width:520px; }
.hero-cta { display:flex; gap:14px; margin-top:30px; flex-wrap:wrap; }
.hero-stats { display:flex; gap:30px; margin-top:38px; flex-wrap:wrap; }
.hero-stats .s b { font-family: var(--font-display); font-size:34px; color:#fff; display:block; line-height:1; }
.hero-stats .s span { font-size:13px; color: var(--fg-on-dark-2); }
.media-panel { position:relative; border-radius: var(--radius-lg); overflow:hidden; height:420px;
  background: linear-gradient(160deg, var(--navy-800), var(--navy-700)); border:1px solid rgba(255,255,255,.12);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; color: var(--fg-on-dark-2); text-align:center; padding:24px; }
.media-panel .lic { width:64px; height:64px; color: var(--sky-400); }
.media-panel .ptitle { font-family: var(--font-display); font-weight:700; font-size:18px; color:#fff; text-transform:uppercase; letter-spacing:.04em; }
.media-panel .psub { font-size:13px; margin-top:4px; max-width:320px; }
.media-panel.play .lic { width:72px; height:72px; }
.float-badge { position:absolute; bottom:22px; left:-14px; background:#fff; color: var(--navy-900); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); padding:14px 18px; display:flex; align-items:center; gap:12px; }
.float-badge .lic { width:30px; height:30px; color: var(--orange-500); }
.float-badge b { font-family: var(--font-display); font-size:19px; display:block; line-height:1.1; }
.float-badge span { font-size:12px; color: var(--fg-3); }

/* ---------- Brand / logo strip ---------- */
.brandstrip { border-block:1px solid var(--gray-200); background:#fff; }
.brandstrip .inner { padding-block:26px; }
.brandstrip .lab { text-align:center; font-size:13px; font-weight:600; color: var(--fg-3); text-transform:uppercase; letter-spacing:.08em; margin-bottom:18px; }
.brandstrip .logos { display:flex; align-items:center; justify-content:center; gap:48px; flex-wrap:wrap; }
.brandstrip .logos span { font-family: var(--font-display); font-weight:700; font-size:24px; color: var(--gray-400); letter-spacing:.02em; }

/* ---------- Inventory / product cards ---------- */
.prod-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; }
.prod-grid.four { grid-template-columns: repeat(4, 1fr); }
.prod-card { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden;
  box-shadow: var(--shadow-sm); transition: var(--transition); display:flex; flex-direction:column; text-decoration:none; }
.prod-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.prod-thumb { height:200px; display:flex; align-items:center; justify-content:center; background: var(--gray-50); border-bottom:1px solid var(--gray-100); position:relative; }
.prod-thumb .lic { width:96px; height:96px; color: var(--gray-300); }
.prod-thumb .photo-tag { position:absolute; bottom:8px; right:10px; font-size:10px; color: var(--gray-400); font-family:var(--font-mono); }
.prod-thumb .cond { position:absolute; top:10px; left:10px; }
.prod-body { padding:16px 18px 18px; flex:1; display:flex; flex-direction:column; }
.prod-body .pname { font-family: var(--font-display); font-weight:700; font-size:20px; color: var(--navy-900); }
.prod-body .pmeta { font-size:13px; color: var(--fg-3); margin-top:3px; }
.prod-body .pfoot { margin-top:auto; padding-top:14px; display:flex; align-items:center; justify-content:space-between; }
.prod-body .pprice { font-family: var(--font-display); font-weight:700; font-size:22px; color: var(--navy-900); font-variant-numeric:tabular-nums; }
.prod-body .pprice small { font-size:12px; color: var(--fg-3); font-weight:500; font-family:var(--font-body); }
.prod-body .go { color: var(--orange-500); font-weight:600; font-size:14px; display:flex; align-items:center; gap:5px; }
.prod-body .go .lic { width:15px; height:15px; }

/* ---------- Badges ---------- */
.badge { display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:12px; padding:4px 11px; border-radius: var(--radius-pill); white-space:nowrap; }
.badge-new { background: var(--success-bg); color: var(--success); }
.badge-used { background: var(--sky-100); color: var(--sky-600); }
.badge-rent { background: var(--orange-100); color: var(--orange-600); }

/* ---------- Category tiles ---------- */
.cat-tiles { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.cat-tile { position:relative; border-radius: var(--radius-lg); overflow:hidden; min-height:230px; padding:26px;
  display:flex; flex-direction:column; justify-content:flex-end; color:#fff; text-decoration:none;
  background: linear-gradient(180deg, rgba(7,24,43,.15), rgba(7,24,43,.85)), var(--navy-700); border:1px solid var(--gray-200); }
.cat-tile .lic.bg { position:absolute; top:20px; right:20px; width:64px; height:64px; color: rgba(255,255,255,.22); }
.cat-tile h3 { color:#fff; margin:0; font-size:24px; }
.cat-tile span { display:flex; align-items:center; gap:6px; color:#fff; font-weight:600; font-size:14px; margin-top:8px; opacity:.9; }
.cat-tile span .lic { width:15px; height:15px; }
.cat-tile:hover { box-shadow: var(--shadow-lg); }

/* ---------- Feature trio / value cards ---------- */
.trio { display:grid; grid-template-columns: repeat(3,1fr); gap:28px; }
.feature { text-align:center; padding:8px; }
.feature .ic-wrap { width:64px; height:64px; border-radius: var(--radius-lg); background: var(--sky-100); margin:0 auto 16px;
  display:flex; align-items:center; justify-content:center; }
.feature .ic-wrap .lic { width:30px; height:30px; color: var(--navy-900); }
.feature h3 { margin:0 0 6px; font-size:21px; }
.feature p { margin:0; font-size:14.5px; color: var(--fg-3); }

.valuecards { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.valuecard { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); }
.valuecard .img { height:170px; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.valuecard .img .lic { width:54px; height:54px; color: var(--gray-300); }
.valuecard .body { padding:20px 22px 24px; }
.valuecard h3 { margin:0 0 8px; font-size:21px; }
.valuecard p { margin:0; font-size:14.5px; color: var(--fg-2); }

/* ---------- Split / about block ---------- */
.split { display:grid; grid-template-columns: 1fr 1fr; gap:48px; align-items:center; }
.split.media-right .media-panel, .split .media-panel { height:380px; }
.split ul.checks { list-style:none; padding:0; margin:20px 0 0; display:flex; flex-direction:column; gap:12px; }
.split ul.checks li { display:flex; gap:11px; align-items:flex-start; font-size:15.5px; color: var(--fg-2); }
.split ul.checks .lic { width:22px; height:22px; color: var(--success); flex:none; margin-top:1px; }

/* ---------- Testimonials ---------- */
.testi-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:24px; }
.testi { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); padding:24px; box-shadow: var(--shadow-sm); display:flex; flex-direction:column; }
.testi .stars { display:flex; gap:3px; color: var(--orange-500); margin-bottom:14px; }
.testi .stars .lic { width:18px; height:18px; }
.testi p { font-size:15px; line-height:1.6; color: var(--fg-2); margin:0 0 18px; }
.testi .who { display:flex; align-items:center; gap:12px; margin-top:auto; }
.testi .avatar { width:44px; height:44px; border-radius:50%; background: var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; font-family: var(--font-display); font-weight:700; font-size:17px; flex:none; }
.testi .who b { display:block; color: var(--navy-900); font-size:15px; }
.testi .who span { font-size:13px; color: var(--fg-3); }

/* ---------- CTA band ---------- */
.ctaband { background: var(--orange-500); color:#fff; }
.ctaband .inner { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:48px; flex-wrap:wrap; }
.ctaband h2 { color:#fff; margin:0; font-size:36px; max-width:640px; }
.ctaband p { color: rgba(255,255,255,.92); margin:8px 0 0; font-size:17px; }
.ctaband .btn-primary { background: var(--navy-950); }
.ctaband .btn-primary:hover { background:#000; }

/* ---------- Service area cards ---------- */
.area-grid { display:grid; grid-template-columns: repeat(4,1fr); gap:22px; }
.area-card { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); text-decoration:none; transition: var(--transition); }
.area-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.area-card .img { height:150px; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.area-card .img .lic { width:44px; height:44px; color: var(--gray-300); }
.area-card .body { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.area-card h3 { margin:0; font-size:19px; }
.area-card .lic.arr { width:18px; height:18px; color: var(--orange-500); }

/* ---------- Page header (interior pages) ---------- */
.pagehead { background: var(--navy-950); color:#fff; position:relative; overflow:hidden; }
.pagehead::after { content:''; position:absolute; inset:0; background: radial-gradient(900px 400px at 80% -20%, rgba(95,180,244,.16), transparent 60%); }
.pagehead .inner { position:relative; z-index:1; padding-block:56px; }
.pagehead .crumb { color: var(--fg-on-dark-2); font-size:13px; margin-bottom:14px; display:flex; gap:8px; align-items:center; }
.pagehead .crumb a { color: var(--sky-400); text-decoration:none; }
.pagehead .crumb .lic { width:13px; height:13px; color: rgba(255,255,255,.35); }
.pagehead h1 { font-family: var(--font-display); text-transform:uppercase; font-size:46px; color:#fff; margin:0; letter-spacing:-0.01em; }
.pagehead p { color: var(--fg-on-dark-2); font-size:17px; margin:14px 0 0; max-width:620px; }

/* ---------- Forms ---------- */
.form-card { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-lg); padding:32px; box-shadow: var(--shadow-sm); }
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px; }
.field { display:flex; flex-direction:column; gap:6px; margin-bottom:4px; }
.field.full { grid-column: 1 / -1; }
.field label { font-weight:600; font-size:13.5px; color: var(--fg-1); }
.field .req { color: var(--danger); }
.field input, .field select, .field textarea { font-family: var(--font-body); font-size:15px; padding:11px 13px;
  border:1px solid var(--gray-300); border-radius: var(--radius-md); color: var(--fg-1); background:#fff; width:100%; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color: var(--sky-500); box-shadow: var(--focus-ring); }
.field select { appearance:none; background:#fff url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" stroke="%2364748B" stroke-width="2"><path d="M4 6l4 4 4-4"/></svg>') no-repeat right 12px center; cursor:pointer; }

/* ---------- FAQ accordion / tabs ---------- */
.faq { border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden; background:#fff; }
.faq-item { border-bottom:1px solid var(--gray-100); }
.faq-item:last-child { border-bottom:none; }
.faq-q { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; cursor:pointer; font-family: var(--font-display); font-weight:600; font-size:18px; color: var(--navy-900); }
.faq-q .lic { width:20px; height:20px; color: var(--orange-500); transition: transform var(--transition); flex:none; }
.faq-item.open .faq-q .lic { transform: rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition: max-height var(--transition); }
.faq-a .inner-a { padding:0 22px 20px; font-size:15px; color: var(--fg-2); line-height:1.6; }
.faq-item.open .faq-a { max-height:320px; }

/* ---------- Blog ---------- */
.blog-grid { display:grid; grid-template-columns: repeat(3,1fr); gap:26px; }
.blog-card { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md); overflow:hidden; box-shadow: var(--shadow-sm); text-decoration:none; transition: var(--transition); display:flex; flex-direction:column; }
.blog-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.blog-card .img { height:180px; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.blog-card .img .lic { width:44px; height:44px; color: var(--gray-300); }
.blog-card .body { padding:18px 20px 22px; flex:1; display:flex; flex-direction:column; }
.blog-card .cat { font-family: var(--font-display); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.06em; color: var(--orange-500); margin-bottom:8px; }
.blog-card h3 { margin:0 0 8px; font-size:20px; line-height:1.2; }
.blog-card p { margin:0; font-size:14px; color: var(--fg-3); line-height:1.5; }
.blog-card .meta { margin-top:auto; padding-top:14px; font-size:13px; color: var(--fg-3); }

/* article */
.article { max-width:760px; margin:0 auto; }
.article p { font-size:17px; line-height:1.75; color: var(--fg-2); margin:0 0 20px; }
.article h2 { margin:36px 0 14px; }
.article h3 { margin:28px 0 10px; }
.article ul { margin:0 0 20px; padding-left:22px; }
.article ul li { font-size:17px; line-height:1.7; color: var(--fg-2); margin-bottom:8px; }
.article blockquote { border-left:4px solid var(--orange-500); margin:24px 0; padding:6px 0 6px 22px; font-size:19px; color: var(--navy-900); font-style:italic; }

/* ---------- Footer ---------- */
.ftr { background: var(--navy-950); color: var(--fg-on-dark-2); }
.ftr-main { display:grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap:36px; padding-block:56px 40px; }
.ftr-logo img { height:84px; width:auto; margin-bottom:16px; }
.ftr-blurb { font-size:14px; line-height:1.65; max-width:300px; }
.ftr-social { display:flex; gap:10px; margin-top:16px; }
.ftr-social a { width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; color:#fff; }
.ftr-social a:hover { background: var(--orange-500); }
.ftr-social .lic { width:18px; height:18px; }
.ftr-col h4 { font-family: var(--font-display); color:#fff; font-size:16px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; }
.ftr-col a { display:block; color: var(--fg-on-dark-2); font-size:14px; padding:5px 0; text-decoration:none; }
.ftr-col a:hover { color:#fff; }
.ftr-contact .row { display:flex; align-items:flex-start; gap:10px; font-size:14px; padding:5px 0; }
.ftr-contact .lic { width:16px; height:16px; color: var(--sky-400); flex:none; margin-top:3px; }
.ftr-contact .phone { font-family: var(--font-display); font-size:22px; color:#fff; font-weight:700; text-decoration:none; }
.ftr-map { height:150px; border-radius: var(--radius-md); overflow:hidden; margin-top:14px; border:1px solid rgba(255,255,255,.12); background: var(--navy-800); display:flex; align-items:center; justify-content:center; color: var(--fg-on-dark-2); font-size:13px; gap:8px; }
.ftr-map .lic { width:20px; height:20px; color: var(--sky-400); }
.ftr-bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:18px; font-size:13px; }
.ftr-bottom .inner { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }

@media (max-width: 1080px) {
  .hero .inner, .split { grid-template-columns: 1fr; }
  .prod-grid, .prod-grid.four, .cat-tiles, .trio, .valuecards, .testi-grid, .area-grid, .blog-grid, .form-grid { grid-template-columns: repeat(2,1fr); }
  .ftr-main { grid-template-columns: 1fr 1fr; }
  .hero h1 { font-size:48px; }
}
@media (max-width: 640px) {
  .prod-grid, .prod-grid.four, .cat-tiles, .trio, .valuecards, .testi-grid, .area-grid, .blog-grid, .form-grid, .ftr-main { grid-template-columns: 1fr; }
  .hero h1, .pagehead h1 { font-size:38px; }
}