/* ==========================================================================
   FORKLIFT RENTALS DFW - Design System (mrforklifts.com)
   Source of truth: Cloud Design handoff
     forklift-rentals-dfw-design-system/project/colors_and_type.css + ui_kits/website/site.css
   Brand: navy gear / sky-blue forklift / orange ring. Barlow + Barlow Semi Condensed.
   Navy = primary/ink/chrome. Orange = single high-intent action + eyebrows. Sky = soft fills/links.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Barlow+Semi+Condensed:wght@500;600;700&display=swap');

:root {
  /* ---- Brand: Navy (primary) ---- */
  --navy-950: #07182B;   /* logo gear / footer / deepest ink */
  --navy-900: #0F2A47;   /* PRIMARY brand navy */
  --navy-800: #18395C;
  --navy-700: #234A72;
  --navy-600: #335F8C;

  /* ---- Brand: Orange (accent / action) ---- */
  --orange-600: #D8641C;
  --orange-500: #F2792E;  /* PRIMARY accent - CTAs, highlights */
  --orange-400: #F79152;
  --orange-100: #FDE7D6;

  /* ---- Brand: Sky (secondary) ---- */
  --sky-600: #3E9BE0;
  --sky-500: #5FB4F4;
  --sky-400: #6AB9F9;     /* logo forklift blue */
  --sky-200: #C2E2FB;
  --sky-100: #E3F2FD;

  /* ---- Neutrals (cool grays) ---- */
  --white:    #FFFFFF;
  --gray-50:  #F6F8FA;
  --gray-100: #EDF1F5;
  --gray-200: #E3E8EE;
  --gray-300: #CBD4DE;
  --gray-400: #94A3B4;
  --gray-500: #64748B;
  --gray-600: #475569;
  --gray-700: #33425A;
  --gray-900: #0F2A47;

  /* ---- Semantic feedback ---- */
  --success: #1F8A4C;  --success-bg: #E4F4EA;
  --warning: #C9820B;  --warning-bg: #FBF0D9;
  --danger:  #C8372B;  --danger-bg:  #FBE7E5;
  --info:    var(--sky-600);

  /* ---- Semantic roles ---- */
  --color-bg: var(--white);
  --color-bg-subtle: var(--gray-50);
  --color-surface: var(--white);
  --color-border: var(--gray-200);
  --color-border-strong: var(--gray-300);
  --fg-1: var(--navy-900);
  --fg-2: var(--gray-700);
  --fg-3: var(--gray-500);
  --fg-on-dark: #FFFFFF;
  --fg-on-dark-2: #B9C6D6;
  --color-primary: var(--navy-900);
  --color-primary-hover: var(--navy-800);
  --color-accent: var(--orange-500);
  --color-accent-hover: var(--orange-600);
  --color-link: var(--sky-600);
  --focus-ring: 0 0 0 3px rgba(95, 180, 244, 0.45);

  /* ---- Type ---- */
  --font-display: 'Barlow Semi Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    ui-monospace, 'SFMono-Regular', 'Menlo', monospace;
  --text-xs:12px; --text-sm:14px; --text-base:16px; --text-md:18px; --text-lg:20px;
  --text-xl:24px; --text-2xl:30px; --text-3xl:38px; --text-4xl:48px; --text-5xl:62px; --text-6xl:80px;
  --leading-tight:1.08; --leading-snug:1.25; --leading-normal:1.5; --leading-relaxed:1.65;
  --tracking-tight:-0.01em; --tracking-normal:0; --tracking-wide:0.04em; --tracking-wider:0.08em;
  --weight-regular:400; --weight-medium:500; --weight-semi:600; --weight-bold:700;

  /* ---- Radius / shadow / space ---- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px; --radius-pill:999px;
  --shadow-xs: 0 1px 2px rgba(15,42,71,.06);
  --shadow-sm: 0 1px 3px rgba(15,42,71,.08), 0 1px 2px rgba(15,42,71,.06);
  --shadow-md: 0 4px 12px rgba(15,42,71,.10);
  --shadow-lg: 0 12px 28px rgba(15,42,71,.14);
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-24:96px;
  --container-max:1240px;
  --transition-fast:120ms ease; --transition:180ms ease;

  /* Back-compat aliases used by interior page bodies */
  --maxw: var(--container-max);
  --border: var(--gray-200);
  --bg-soft: var(--gray-50);
  --bg-band: var(--gray-100);
  --text: var(--fg-2);
  --text-muted: var(--fg-3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--fg-2);
  font-family: var(--font-body); font-size: var(--text-base);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
button { font-family: inherit; }
.container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding-inline: 24px; }

/* ---- Type ---- */
h1, h2, h3, h4 { color: var(--fg-1); margin: 0 0 .5em; }
h1, .h1 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-4xl);
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); }
h2, .h2 { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-3xl);
  line-height: var(--leading-snug); }
h3, .h3 { font-family: var(--font-display); font-weight: var(--weight-semi); font-size: var(--text-2xl);
  line-height: var(--leading-snug); }
h4, .h4 { font-family: var(--font-body); font-weight: var(--weight-bold); font-size: var(--text-lg);
  line-height: var(--leading-snug); }
p, .body { font-family: var(--font-body); font-size: var(--text-base); line-height: var(--leading-relaxed); color: var(--fg-2); margin: 0 0 1em; }
.lead { font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--fg-2); }
small, .caption { font-size: var(--text-sm); color: var(--fg-3); }
a { color: var(--color-link); text-decoration: none; }
a:hover { text-decoration: underline; }

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

/* skip link */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--orange-500);
  color: #fff; padding: 10px 16px; z-index: 200; border-radius: 0 0 8px 0; }
.skip-link:focus { left: 0; }

/* ---- Lucide icon sizing ---- */
.lic, [data-lucide] { display: inline-block; vertical-align: middle; }
svg.lucide { width: 1em; height: 1em; }

/* ---- Buttons (navy = primary, orange = accent) ---- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; cursor:pointer;
  font-family: var(--font-body); 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:hover { text-decoration:none; }
.btn:focus-visible { outline:none; box-shadow: var(--focus-ring); }
.btn svg { width:18px; height:18px; }
.btn-primary { background: var(--navy-900); color:#fff; }
.btn-primary:hover { background: var(--navy-800); color:#fff; }
.btn-accent { background: var(--orange-500); color:#fff; }
.btn-accent:hover { background: var(--orange-600); color:#fff; }
.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); color: var(--navy-900); }
.btn-light { background:#fff; color: var(--navy-900); }
.btn-light:hover { background: var(--gray-100); color: var(--navy-900); }
.btn-on-dark { background:transparent; color:#fff; border-color: rgba(255,255,255,.4); }
.btn-on-dark:hover { background: rgba(255,255,255,.12); color:#fff; }
.btn-lg { padding:15px 30px; font-size:16px; }
.btn-block { width:100%; }
/* legacy aliases mapped to the handoff hierarchy */
.btn-secondary { background: var(--navy-900); color:#fff; }
.btn-secondary:hover { background: var(--navy-800); color:#fff; }
.btn-ghost-light { background:transparent; color:#fff; border-color: rgba(255,255,255,.4); }
.btn-ghost-light:hover { background: rgba(255,255,255,.12); color:#fff; }

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

/* ---- Header / nav ---- */
.site-header { position: sticky; top:0; z-index:50; background:#fff; border-bottom:1px solid var(--gray-200); box-shadow: var(--shadow-xs); }
.site-header .container { display:flex; align-items:center; gap:24px; padding-block:14px; }
.brand { display:flex; align-items:center; flex:none; gap:0; }
.brand:hover { text-decoration:none; }
.brand img { height:58px; width:auto; display:block; }
.main-nav { display:flex; align-items:center; gap:4px; margin-left:auto; }
.main-nav a.navlink { 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; }
.main-nav a.navlink:hover { background: var(--gray-100); text-decoration:none; }
.main-nav a.navlink.active { color: var(--orange-500); }
.header-cta { display:flex; align-items:center; gap:12px; flex:none; }
.header-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; }
.header-phone:hover { color: var(--navy-900); text-decoration:none; }
.header-phone svg { width:18px; height:18px; color: var(--orange-500); }
.nav-toggle { display:none; background:none; border:none; cursor:pointer; color: var(--navy-900); padding:4px; }
.nav-toggle svg { width:28px; height:28px; }

/* mobile menu */
.mnav { display:none; }
.mnav-backdrop { display:none; }
@media (max-width: 1140px) {
  .main-nav, .header-phone { display:none; }
  .nav-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 svg { 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; }
}

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

/* ---- Hero ---- */
.hero { position:relative; background: var(--navy-950); color:#fff; overflow:hidden; }
.hero::after { content:''; position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(1100px 500px at 75% -10%, rgba(95,180,244,.18), transparent 60%); }
.hero .container { 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.lead, .hero > .container > div > p { color: var(--fg-on-dark-2); font-size:19px; line-height:1.6; margin:20px 0 0; max-width:520px; }
.hero-cta, .hero-actions { 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 svg { 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 svg { 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 svg { 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 .container { 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); text-decoration:none; }
.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 svg { 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 svg { 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); }
.tag { display:inline-flex; background: var(--sky-100); color: var(--sky-600); font-family:var(--font-display); font-weight:700; font-size:13px; padding:4px 14px; border-radius: var(--radius-pill); }

/* ---- 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:hover { box-shadow: var(--shadow-lg); text-decoration:none; }
.cat-tile svg.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 svg { width:15px; height:15px; }

/* ---- 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 svg { 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 svg { width:54px; height:54px; color: var(--gray-300); }
.valuecard .vbody { 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); }

/* ---- Generic feature card (interior pages) ---- */
.grid { display:grid; gap:24px; }
.grid-2 { grid-template-columns: repeat(2,1fr); }
.grid-3 { grid-template-columns: repeat(3,1fr); }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.card { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-md);
  padding:26px; box-shadow: var(--shadow-sm); transition: var(--transition); }
.card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.card .icon { width:54px; height:54px; border-radius: var(--radius-md); background: var(--sky-100); color: var(--navy-900); display:flex; align-items:center; justify-content:center; margin-bottom:16px; }
.card .icon svg { width:28px; height:28px; }
.card h3 { margin:0 0 8px; font-size:21px; }
.card p { color: var(--fg-3); margin-bottom:0; }
.card .num { width:46px; height:46px; border-radius:50%; background: var(--navy-900); color:#fff; font-family:var(--font-display); font-weight:700; display:flex; align-items:center; justify-content:center; margin-bottom:14px; font-size:20px; }

/* equipment cards (interior category figures) */
.equip-card { display:flex; flex-direction:column; overflow:hidden; padding:0; text-decoration:none; }
.equip-card:hover { text-decoration:none; }
.equip-card .equip-figure { background: var(--gray-50); border-bottom:1px solid var(--gray-100); aspect-ratio:16/10; display:flex; align-items:center; justify-content:center; color: var(--gray-300); }
.equip-card .equip-figure svg { width:38%; height:38%; }
.equip-card .equip-body { padding:22px; flex:1; display:flex; flex-direction:column; }
.equip-card .equip-body p { color: var(--fg-3); flex:1; }
.equip-card .equip-meta { font-family:var(--font-display); font-size:13px; color: var(--orange-500); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-bottom:8px; }
.equip-card h3 { margin:0 0 6px; }
.equip-card .equip-link { margin-top:14px; font-weight:600; color: var(--orange-500); display:inline-flex; align-items:center; gap:6px; }

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

/* spec-list (interior pages) */
.spec-list { list-style:none; padding:0; margin:0; display:grid; gap:11px; }
.spec-list li { display:flex; gap:11px; align-items:flex-start; color: var(--fg-2); font-size:15.5px; }
.spec-list li svg { width:22px; height:22px; flex:none; color: var(--success); margin-top:1px; }
.spec-list li b { color: var(--navy-900); }

/* ---- 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 svg { 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, .cta-band { background: var(--orange-500); color:#fff; }
.ctaband .container, .cta-band .container { display:flex; align-items:center; justify-content:space-between; gap:28px; padding-block:48px; flex-wrap:wrap; }
.ctaband h2, .cta-band h2 { color:#fff; margin:0; font-size:36px; max-width:640px; }
.ctaband p, .cta-band p { color: rgba(255,255,255,.92); margin:8px 0 0; font-size:17px; max-width:640px; }
.cta-actions { display:flex; gap:12px; flex-wrap:wrap; }
.ctaband .btn-primary, .cta-band .btn-primary { background: var(--navy-950); }
.ctaband .btn-primary:hover, .cta-band .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); text-decoration:none; }
.area-card .img { height:150px; background: var(--gray-100); display:flex; align-items:center; justify-content:center; }
.area-card .img svg { width:44px; height:44px; color: var(--gray-300); }
.area-card .abody { padding:16px 18px; display:flex; align-items:center; justify-content:space-between; }
.area-card h3 { margin:0; font-size:19px; }
.area-card svg.arr { width:18px; height:18px; color: var(--orange-500); }

/* ---- Page header (interior) ---- */
.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 .container { position:relative; z-index:1; padding-block:56px; }
.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; }
.pagehead .eyebrow { color: var(--sky-400); }

/* ---- Breadcrumb ---- */
.breadcrumb { font-size:13.5px; color: var(--fg-3); padding:16px 0; background:#fff; border-bottom:1px solid var(--gray-100); }
.breadcrumb a { color: var(--sky-600); }
.breadcrumb span { color: var(--fg-3); }

/* ---- Forms ---- */
.quote-wrap { display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:start; }
.quote-form { background:#fff; border:1px solid var(--gray-200); border-radius: var(--radius-lg); padding:32px; box-shadow: var(--shadow-sm); }
.form-row { margin-bottom:16px; }
.form-row.two { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
label { display:block; font-family: var(--font-body); font-weight:600; font-size:13.5px; margin-bottom:6px; color: var(--fg-1); }
input, select, textarea { width:100%; 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; }
input:focus, select:focus, textarea:focus { outline:none; border-color: var(--sky-500); box-shadow: var(--focus-ring); }
textarea { min-height:110px; resize:vertical; }
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; }
.form-note { font-size:13px; color: var(--fg-3); }
.form-success { display:none; background: var(--success-bg); border:1px solid #9ad9b0; color: var(--success); padding:14px 16px; border-radius: var(--radius-md); margin-bottom:16px; }

/* contact info blocks */
.info-list { list-style:none; padding:0; margin:0; display:grid; gap:22px; }
.info-list li { display:flex; gap:16px; align-items:flex-start; }
.info-list .info-ic { width:46px; height:46px; border-radius: var(--radius-md); background: var(--navy-900); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.info-list .info-ic svg { width:22px; height:22px; }
.info-list b { display:block; color: var(--navy-900); }
.info-list a { color: var(--sky-600); font-weight:700; }

/* ---- FAQ accordion ---- */
.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 svg { width:20px; height:20px; color: var(--orange-500); transition: transform var(--transition); flex:none; }
.faq-item.open .faq-q svg { 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:360px; }

/* ---- Prose (legal / about) ---- */
.prose { max-width: 75ch; }
.prose h2 { margin-top: 1.6em; }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: .4em; line-height:1.65; }

/* ---- Footer ---- */
.site-footer { background: var(--navy-950); color: var(--fg-on-dark-2); }
.footer-grid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:36px; padding-block:56px 40px; }
.footer-brand img { height:84px; width:auto; margin-bottom:16px; }
.footer-brand p { font-size:14px; line-height:1.65; max-width:300px; color: var(--fg-on-dark-2); }
.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 svg { width:18px; height:18px; }
.site-footer h4 { font-family: var(--font-display); color:#fff; font-size:16px; text-transform:uppercase; letter-spacing:.04em; margin:0 0 14px; }
.footer-links { list-style:none; padding:0; margin:0; }
.footer-links li { padding:0; }
.site-footer a { color: var(--fg-on-dark-2); }
.footer-links a { display:block; color: var(--fg-on-dark-2); font-size:14px; padding:5px 0; text-decoration:none; }
.footer-links a:hover { color:#fff; }
.ftr-contact .row { display:flex; align-items:flex-start; gap:10px; font-size:14px; padding:5px 0; color: var(--fg-on-dark-2); }
.ftr-contact .row svg { width:16px; height:16px; color: var(--sky-400); flex:none; margin-top:3px; }
.footer-phone { font-family: var(--font-display); font-size:22px; color:#fff !important; 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 svg { width:20px; height:20px; color: var(--sky-400); }
.footer-bottom { border-top:1px solid rgba(255,255,255,.1); padding-block:18px; font-size:13px; }
.footer-bottom .container { display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px; }
.footer-bottom span { color: var(--fg-on-dark-2); }

/* ---- Utilities ---- */
.text-center { text-align:center; }
.mt-0 { margin-top:0; } .mb-0 { margin-bottom:0; }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
  .hero .container, .split, .quote-wrap { grid-template-columns:1fr; }
  .prod-grid, .prod-grid.four, .cat-tiles, .trio, .valuecards, .testi-grid, .area-grid,
  .grid-2, .grid-3, .grid-4 { grid-template-columns: repeat(2,1fr); }
  .footer-grid { 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,
  .grid-2, .grid-3, .grid-4, .form-row.two, .footer-grid { grid-template-columns:1fr; }
  .hero h1, .pagehead h1 { font-size:38px; }
  .topbar .container { justify-content:center; }
}