/* Next Truck chrome (2026-11-05): tokens, fonts, the floating header, the footer sheet, buttons,
   reveals, the cookie banner and the Estimate Sweep window. Every Next Truck page loads this.
   Hand-built pages add nt-level.css; pages that keep their older layout add nt-level-pages.css. */

@font-face { font-family: "Manrope"; src: url("/assets/fonts/manrope.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/assets/fonts/geist-mono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }

@property --intro { syntax: "<number>"; inherits: true; initial-value: 0; }

:root {
  --paper: #fffdfa;
  --paper-2: #f8f4ee;
  --ink: #101820;
  --ink-2: #1a2430;
  --text: #2a333d;
  --muted: #5d6671;
  --hair: rgba(16, 24, 32, .1);
  --hair-2: rgba(16, 24, 32, .17);
  --on-ink: #f7f4ef;
  --on-ink-2: rgba(247, 244, 239, .68);
  --on-ink-hair: rgba(247, 244, 239, .14);
  --ember: #ff5a00;
  --ember-2: #ff7a2e;
  --amber: #ffb26b;
  --ember-text: #b83f00;
  --ember-big: #d94a00;
  --wash: #ffe9da;
  --rule: rgba(16, 24, 32, .13);
  --ground: var(--paper-2);
  --r: 16px;
  --r-card: 26px;
  --r-sheet: 40px;
  --mat: 7px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --sans: "Inter", Arial, sans-serif;
  --head: "Manrope", Arial, sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --mono: "Geist Mono", ui-monospace, Menlo, monospace;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  --j: 0;
  --intro: 0;
}

*, *::before, *::after { box-sizing: border-box; }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 22px; border: 0; border-radius: var(--r); background: var(--ember); color: var(--ink); font: 700 .97rem/1.2 var(--head); letter-spacing: -.01em; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 1px 2px rgba(120, 40, 0, .24), 0 12px 26px -12px rgba(255, 90, 0, .72); transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s; }
.btn:hover { transform: translateY(-1px); background: var(--ember-2); }
.btn svg { width: 15px; height: 15px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-soft { background: rgba(255, 255, 255, .86); box-shadow: inset 0 0 0 1px var(--hair), 0 10px 22px -16px rgba(16, 24, 32, .4); }
.btn-soft:hover { background: #fff; }
.on-ink .btn-soft { background: rgba(255, 255, 255, .1); color: var(--on-ink); box-shadow: inset 0 0 0 1px var(--on-ink-hair); }
.on-ink .btn-soft:hover { background: rgba(255, 255, 255, .16); }

/* Header: a floating glass bar */
.top { position: fixed; z-index: 50; left: 0; right: 0; top: 14px; pointer-events: none; }
.bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; width: min(1200px, 100% - 48px); margin-inline: auto; padding: 8px 8px 8px 18px; border-radius: 24px; background: rgba(255, 253, 250, .62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7), 0 0 0 1px var(--hair), 0 18px 34px -24px rgba(16, 24, 32, .4); pointer-events: auto; }
.logo img { width: 142px; height: auto; }
.top-cta { display: flex; align-items: center; gap: 8px; }
.tel { padding: 0 12px; font: 600 .9rem var(--head); text-decoration: none; color: var(--ink); letter-spacing: -.01em; }
.tel:hover { color: var(--ember-text); }
.top .btn { min-height: 44px; padding: 0 16px; font-size: .9rem; border-radius: 14px; }
.menu-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .78); color: var(--ink); font: 500 .88rem var(--sans); cursor: pointer; box-shadow: inset 0 0 0 1px var(--hair); }
.menu-btn span { position: relative; width: 16px; height: 8px; border-block: 1.5px solid var(--ink); transition: height .2s; }
.top.open .menu-btn span { height: 1.5px; border-bottom: 0; }
.nav { position: absolute; top: calc(100% + 8px); right: 0; display: none; width: 260px; padding: 10px; border-radius: 22px; background: rgba(255, 253, 250, .92); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); box-shadow: 0 0 0 1px var(--hair), 0 26px 44px -22px rgba(16, 24, 32, .45); }
.top.open .nav { display: grid; }
.nav a { padding: 11px 14px; border-radius: 13px; font-weight: 500; text-decoration: none; color: var(--ink); }
.nav a:hover { background: var(--wash); }

/* Footer: a sheet rising over the close */
.foot { position: relative; margin-top: calc(var(--r-sheet) * -1.6); padding: 24px 24px 18px; border-radius: var(--r-sheet) var(--r-sheet) 0 0; background: var(--paper); }
.foot-in { width: min(1200px, 100%); margin-inline: auto; padding: clamp(24px, 4vw, 44px); border-radius: 30px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); }
.foot-top { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 28px; }
.foot-top .foot-line { margin: 0; font: 700 clamp(1.3rem, 2.2vw, 1.65rem)/1.14 var(--head); letter-spacing: -.03em; color: var(--ink); }
.foot-line em { font-family: var(--serif); font-weight: 400; color: var(--ember-big); }
.foot-top p { margin-top: 12px; font-size: .92rem; color: var(--muted); }
.foot-top a { text-decoration: none; }
.foot-top a:hover { color: var(--ember-text); }
.foot-k { margin-bottom: 10px; font: 500 .7rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.foot-top ul a { display: block; padding: 4px 0; font-size: .96rem; color: var(--ink); }
.foot-mark { container-type: inline-size; margin-top: clamp(24px, 4vw, 44px); }
.foot-mark span { display: block; font: 800 20.4cqw/.9 var(--head); letter-spacing: -.055em; text-align: center; white-space: nowrap; color: transparent; background: linear-gradient(95deg, var(--ink) 20%, var(--ember) 96%); -webkit-background-clip: text; background-clip: text; }
.verse { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 24px; margin-top: 18px; font-size: .82rem; color: var(--muted); }


/* The older stylesheets (v3.css, nt-skin.css, site.css) still load under this one on most pages and
   style .top, .nav, .menu-btn and .foot themselves. These carry enough weight to win. */
header.top { position: fixed; top: 14px; left: 0; right: 0; height: auto; padding: 0; background: none; border: 0; box-shadow: none; }
.top .bar { height: auto; }
.top .logo { gap: 0; }
.top .logo img { width: 142px; height: auto; }
.top .top-cta { gap: 8px; }
.top .top-cta .tel { display: inline-block; padding: 0 12px; color: var(--ink); font: 600 .9rem var(--head); text-decoration: none; }
.top .top-cta .btn { min-height: 44px; padding: 0 16px; border-radius: 14px; font-size: .9rem; }
.top .menu-btn { display: inline-flex; align-items: center; gap: 10px; width: auto; height: auto; min-height: 44px; padding: 0 14px; border: 0; border-radius: 14px; background: rgba(255, 255, 255, .78); color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); }
.top .menu-btn b { font: 500 .88rem var(--sans); }
.top .menu-btn span { position: relative; display: block; width: 16px; height: 8px; border-block: 1.5px solid var(--ink); background: none; }
.top .menu-btn span::before, .top .menu-btn span::after { content: none; display: none; }
.top.open .menu-btn span { height: 1.5px; border-bottom: 0; }
.top .nav { position: absolute; top: calc(100% + 8px); left: auto; right: 0; bottom: auto; display: none; width: 260px; height: auto; padding: 10px; flex-direction: column; gap: 0; border: 0; border-radius: 22px; background: rgba(255, 253, 250, .92); box-shadow: 0 0 0 1px var(--hair), 0 26px 44px -22px rgba(16, 24, 32, .45); }
.top.open .nav { display: grid; }
.top .nav a { margin: 0; padding: 11px 14px; border: 0; border-radius: 13px; background: none; font: 500 1rem var(--sans); text-decoration: none; color: var(--ink); }
.top .nav a:hover, .top .nav a[aria-current="page"] { background: var(--wash); color: var(--ink); }
footer.foot { border: 0; background: var(--paper); color: var(--text); }
.foot .foot-top a { color: var(--ink); }
.foot .foot-mark { margin: clamp(24px, 4vw, 44px) 0 0; padding: 0; font-size: 1rem; line-height: 1; }
/* The nav visible on wide screens; the Menu button stays for tablets and phones */
@media (min-width: 1021px) {
  header.top .nav { position: static; display: flex; flex-direction: row; align-items: center; gap: 2px; width: auto; margin-left: auto; padding: 0; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  header.top .nav a { padding: 8px 12px; font: 500 .92rem var(--sans); }
  header.top .nav a[href^="tel:"] { display: none; }
  header.top .top-cta { margin-left: 10px; }
  header.top .menu-btn { display: none; }
}
@media (max-width: 720px) {
  header.top { top: 10px; }
  .top .bar { width: calc(100% - 24px); padding-left: 12px; gap: 8px; }
  .top .logo img { width: 118px; }
  .top .top-cta .tel { display: none; }
  .top .top-cta .btn { padding: 0 12px; font-size: .84rem; }
  .top .menu-btn { padding: 0 11px; }
  .top .menu-btn b { display: none; }
}

/* site.css remaps the colour tokens to white inside header, footer and every hero; put them back.
   nt-skin.css and v3.css reach .menu-btn and the open nav with heavier selectors; outweigh those. */
header.top, footer.foot, body :is(.hero, .pillar-hero, .blog-hero, .article-head, .bp-hero, .intake-hero, .page-head) { --ink: #101820; --ink-2: #1a2430; --text: #2a333d; --muted: #5d6671; --line: rgba(16, 24, 32, .13); --line-2: rgba(16, 24, 32, .17); --line-soft: rgba(16, 24, 32, .1); --paper: #fffdfa; --paper-2: #f8f4ee; --paper-3: #f1ebe3; --card: #fff; --on-dark: #101820; --on-dark-muted: #5d6671; --on-ink-muted: #5d6671; --btn-primary-bg: #ff5a00; --btn-primary-fg: #101820; --btn-primary-hover: #ff7a2e; }
header.top::before, header.top::after { content: none; display: none; }
header.top.scrolled { background: none; }
header.top .menu-btn { border: 0 !important; border-radius: 14px !important; background: rgba(255, 255, 255, .78) !important; }
header.top .menu-btn span, header.top .menu-btn span::before, header.top .menu-btn span::after { width: 16px; height: 8px; background: none; border-block: 1.5px solid var(--ink); }
header.top .menu-btn span::before, header.top .menu-btn span::after { content: none; display: none; }
header.top.open .menu-btn span { height: 1.5px; border-bottom: 0; }
header.top.open .nav { display: grid; position: absolute; top: calc(100% + 8px); left: auto; right: 0; width: 260px; padding: 10px; border: 0; border-radius: 22px; background: rgba(255, 253, 250, .92); box-shadow: 0 0 0 1px var(--hair), 0 26px 44px -22px rgba(16, 24, 32, .45); }
header.top.open .nav a, header.top .nav a { padding: 11px 14px; border: 0; border-radius: 13px; font-size: 1rem; color: var(--ink); }
header.top.open .nav a:hover, header.top .nav a[aria-current="page"] { background: var(--wash); color: var(--ink); }
header.top .nav a.tel-m { display: block; }

/* Reveals (only once the script has confirmed it can show them) */
html.rv [data-rv] { opacity: 0; transform: translateY(20px); transition: opacity .7s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--d, 0) * 90ms); }
html.rv [data-rv].in-view { opacity: 1; transform: none; }
html.rv .meter i { transform: scaleX(0); transition: transform 1.3s var(--ease) .25s; }
html.rv [data-rv].in-view .meter i { transform: none; }

/* The cookie banner comes from analytics.js; on this page its accept button wears Ember */
#tk-consent-banner button:last-of-type { background: var(--ember) !important; color: var(--ink) !important; border-color: var(--ember) !important; }
#tk-consent-banner { border-top-color: var(--ember) !important; }

/* The Estimate Sweep window (nt-fix.js), on the light page */
dialog.fx { width: min(540px, calc(100vw - 32px)); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; background: transparent; overflow: visible; color: var(--text); }
dialog.fx::backdrop { background: rgba(16, 24, 32, .52); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html.fx-open { overflow: hidden; }
.fx-wrap { position: relative; }
.fx-card { max-height: calc(100dvh - 40px); overflow: auto; margin: 0; padding: 28px 28px 22px; box-shadow: 0 40px 90px -30px rgba(16, 24, 32, .7); }
.fx-k { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 500 .7rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fx-k::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 0 3px rgba(255, 90, 0, .16); }
.fx-card h2 { margin: 0 0 6px; padding-right: 36px; font-size: 1.6rem; }
.fx-card .sub { margin: 0 0 16px; font-size: .93rem; color: var(--muted); }
.fx-preview { margin: 0 0 18px; padding: 12px 14px; border-radius: 16px; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--hair); }
.fx-preview span { display: block; margin-bottom: 7px; font: 500 .66rem/1.3 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.fx-preview p { margin: 0 0 0 auto; max-width: 90%; padding: 9px 13px; border-radius: 16px 16px 4px 16px; background: var(--ember); color: #1b0d03; font-size: .9rem; line-height: 1.4; }
.fx-preview b { font-weight: 700; }
.fx-preview:not(.typed) b { opacity: .7; }
.fx-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; margin: 14px 0 0; font-size: .8rem; color: var(--muted); }
.fx-close { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; }
.fx-close span, .fx-close span::after { display: block; width: 14px; height: 1.6px; border-radius: 2px; background: var(--ink); transform: rotate(45deg); }
.fx-close span::after { content: ""; transform: rotate(90deg); }
dialog.fx[open] .fx-wrap { animation: fx-in .38s var(--ease); }
dialog.fx[open]::backdrop { animation: fx-fade .3s ease; }
@keyframes fx-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes fx-fade { from { opacity: 0; } }
@media (max-width: 560px) {
  dialog.fx { width: 100vw; margin: auto 0 0; }
  .fx-card { max-height: calc(100dvh - 24px); padding: 26px 20px calc(18px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
}
@media (prefers-reduced-motion: reduce) { dialog.fx[open] .fx-wrap, dialog.fx[open]::backdrop { animation: none; } }


/* Five nav links with Websites added (2026-11-06): stay on one line, and the phone number gives way on small laptops */
@media (min-width: 1021px) {
  header.top .nav a, header.top .top-cta .tel, header.top .top-cta .btn { white-space: nowrap; }
}
@media (min-width: 1021px) and (max-width: 1199px) {
  header.top .top-cta .tel { display: none; }
  header.top .nav a { padding: 8px 9px; }
}