/* ==========================================================================
   DVIG – theme on top of Bootstrap 5.3
   Layout and components are Bootstrap; this file sets the brand through
   Bootstrap's CSS variables and adds only what Bootstrap has no utility for.
   ========================================================================== */

/* brand → Bootstrap variables
   -------------------------------------------------------------------------- */
:root {
    --bs-primary: #f5c518;
    --bs-primary-rgb: 245, 197, 24;
    --bs-primary-bg-subtle: #fcf0c3;
    --bs-primary-border-subtle: #f7dc7a;
    --bs-primary-text-emphasis: #8a6a00;
    --bs-dark-rgb: 17, 24, 39;

    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --bs-body-font-size: 1.0625rem;
    --bs-body-line-height: 1.65;
    --bs-body-color: #374151;
    --bs-body-color-rgb: 55, 65, 81;
    --bs-emphasis-color: #111827;
    --bs-emphasis-color-rgb: 17, 24, 39;
    --bs-heading-color: #111827;
    --bs-secondary-color: #6b7280;
    --bs-secondary-color-rgb: 107, 114, 128;
    --bs-tertiary-bg: #f2f4f7;
    --bs-tertiary-bg-rgb: 242, 244, 247;
    --bs-border-color: #e5e7eb;
    --bs-link-color: #111827;
    --bs-link-color-rgb: 17, 24, 39;
    --bs-link-hover-color: #000;
    --bs-link-hover-color-rgb: 0, 0, 0;
    --bs-focus-ring-color: rgba(245, 197, 24, .45);

    --dv-navy: 15, 23, 36;
    --dv-header-h: 84px;
}

html { scroll-padding-top: calc(var(--dv-header-h) + 16px); }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
h1, h2, h3, h4, .h1, .h2, .h3, .h4, .display-3, .display-4, .display-5, .display-6 { font-weight: 800; letter-spacing: -.02em; }
a { text-decoration-color: var(--bs-primary); text-underline-offset: 3px; }
.container { max-width: 1240px; }
/* side padding matches the wide g-lg-5 row gutter, so rows never poke out */
@media (min-width: 992px) { .container { padding-left: 1.5rem; padding-right: 1.5rem; } }

/* spacing a step above Bootstrap's py-5 */
@media (min-width: 992px) { .py-lg-6 { padding-top: 5rem !important; padding-bottom: 5rem !important; } }
.pb-6 { padding-bottom: 4.5rem !important; }
@media (min-width: 992px) { .pt-lg-6 { padding-top: 5rem !important; } .pb-lg-7 { padding-bottom: 7rem !important; } }

.eyebrow { display: block; margin-bottom: .75rem; font-size: .8125rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--bs-primary-text-emphasis); }
.icon-circle { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; }
.icon-circle-sm { width: 2.375rem; height: 2.375rem; font-size: .875rem; }
.skip-link:focus { position: fixed !important; top: .5rem; left: .5rem; z-index: 2000; padding: .6rem 1rem; background: var(--bs-primary); color: #111827; font-weight: 700; }

/* buttons: brand colours through Bootstrap's button variables, icon spacing
   -------------------------------------------------------------------------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .65rem; font-weight: 700; --bs-btn-border-width: 2px; --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: .85rem; --bs-btn-border-radius: .25rem; }
.btn-lg { --bs-btn-padding-x: 1.9rem; --bs-btn-padding-y: 1rem; --bs-btn-font-size: 1.0625rem; --bs-btn-border-radius: .25rem; }
.btn .fa-arrow-right, .link-arrow .fa-arrow-right { transition: transform .2s; }
.btn:hover .fa-arrow-right, .link-arrow:hover .fa-arrow-right { transform: translateX(3px); }
.btn-primary {
    --bs-btn-color: #111827; --bs-btn-bg: #f5c518; --bs-btn-border-color: #f5c518;
    --bs-btn-hover-color: #111827; --bs-btn-hover-bg: #e8b800; --bs-btn-hover-border-color: #e8b800;
    --bs-btn-active-color: #111827; --bs-btn-active-bg: #e8b800; --bs-btn-active-border-color: #e8b800;
    --bs-btn-disabled-color: #111827; --bs-btn-disabled-bg: #f5c518; --bs-btn-disabled-border-color: #f5c518;
    --bs-btn-focus-shadow-rgb: 245, 197, 24;
}
.btn-outline-light { --bs-btn-bg: rgba(var(--dv-navy), .25); --bs-btn-border-color: rgba(255, 255, 255, .75); }
.form-control:focus, .form-check-input:focus { border-color: #d9a900; box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }
.form-check-input:checked { background-color: #111827; border-color: #111827; }

/* header (Bootstrap navbar)
   -------------------------------------------------------------------------- */
.site-header { transition: box-shadow .2s; }
.site-header.is-scrolled { box-shadow: 0 6px 24px rgba(17, 24, 39, .08); }
.site-header .navbar { min-height: var(--dv-header-h); --bs-navbar-color: #111827; --bs-navbar-hover-color: #000; --bs-navbar-active-color: #000; --bs-navbar-nav-link-padding-x: .7rem; }
.site-header .navbar-brand img { height: 52px; width: auto; }
.site-header .nav-link { font-weight: 600; font-size: .96rem; }
.site-header .nav-item.active > .nav-link:first-child { box-shadow: inset 0 -3px 0 var(--bs-primary); }
.site-header .dropdown-toggle-split { padding-left: .1rem !important; padding-right: .5rem !important; border: 0; background: none; }
.site-header .dropdown-menu { --bs-dropdown-link-active-bg: var(--bs-primary-bg-subtle); --bs-dropdown-link-active-color: #111827; --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); --bs-dropdown-padding-x: .5rem; --bs-dropdown-border-color: var(--bs-border-color); }
.site-header .dropdown-item { border-radius: .25rem; padding-top: .5rem; padding-bottom: .5rem; }
@media (min-width: 992px) {
    .site-header .navbar-nav .dropdown { display: flex; align-items: center; }
    .site-header .navbar-nav .dropdown-menu { box-shadow: 0 12px 32px rgba(17, 24, 39, .12); }
    /* submenus also open on hover on desktop */
    .site-header .navbar-nav .dropdown:hover > .dropdown-menu, .site-header .navbar-nav .dropdown:focus-within > .dropdown-menu { display: block; top: 100%; left: 0; margin-top: 0; }
}
@media (max-width: 991.98px) {
    :root { --dv-header-h: 72px; }
    .site-header .navbar-brand img { height: 42px; }
    .site-header .navbar-nav .dropdown { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
    .site-header .navbar-nav .dropdown > .dropdown-menu { flex-basis: 100%; border: 0; padding-top: 0; }
    .site-header .navbar-nav > .nav-item { border-bottom: 1px solid var(--bs-border-color); }
    .site-header .navbar-collapse { max-height: calc(100vh - var(--dv-header-h)); overflow-y: auto; }
}

/* hero: photo, dark on the left fading out to the right
   -------------------------------------------------------------------------- */
.hero { position: relative; isolation: isolate; min-height: 560px; background-color: rgb(var(--dv-navy)); background-size: cover; background-position: right center; }
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(90deg, rgba(var(--dv-navy), .96) 0%, rgba(var(--dv-navy), .9) 22%, rgba(var(--dv-navy), .62) 42%, rgba(var(--dv-navy), .18) 64%, rgba(var(--dv-navy), 0) 80%),
        linear-gradient(0deg, rgba(var(--dv-navy), .35) 0%, rgba(var(--dv-navy), 0) 30%);
}
.hero-home { min-height: clamp(560px, 41.4vw, 800px); background-position: center; }
.hero-sub { min-height: 440px; }
.hero .lead { color: rgba(255, 255, 255, .88); }
.hero .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .5); --bs-breadcrumb-item-active-color: var(--bs-primary); font-size: .95rem; }
.hero .breadcrumb a { color: rgba(255, 255, 255, .85); text-decoration: none; }
.hero .breadcrumb a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 991.98px) {
    .hero { min-height: 480px; }
    .hero::before { background: linear-gradient(90deg, rgba(var(--dv-navy), .95) 0%, rgba(var(--dv-navy), .8) 50%, rgba(var(--dv-navy), .45) 100%); }
}
@media (max-width: 575.98px) {
    .hero { min-height: 0; }
    .hero-sub { min-height: 360px; }
    /* phones: banner fills the screen below the header, smaller text so more of the photo shows */
    .hero-home { min-height: calc(100vh - var(--dv-header-h) - 1px); min-height: calc(100svh - var(--dv-header-h) - 1px); } /* 1px = header border */
    .hero-home h1 { font-size: 1.85rem; }
    .hero-home .lead { font-size: 1rem !important; }
    .hero-home .btn-lg { --bs-btn-padding-y: .75rem; --bs-btn-font-size: 1rem; }
    /* buttons pinned to the bottom edge, text sits just above them */
    .hero-home { align-items: flex-end !important; }
    .hero-home .hero-row { padding-bottom: calc(10.5rem + 14px) !important; }
    .hero-home .hero-actions { position: absolute; left: 0; right: 0; bottom: 0; gap: 30px !important; margin: 0 !important; padding: 0 .75rem 1.5rem !important; }
}

/* features strip: dividers between columns */
@media (min-width: 768px) { .features .col + .col { border-left: 1px solid var(--bs-border-color); } }
@media (max-width: 767.98px) { .features .col + .col { border-top: 1px solid var(--bs-border-color); } }

/* cards: lift on hover, arrow turns yellow */
.card-hover { transition: box-shadow .25s, transform .25s; }
.card-hover:hover { box-shadow: 0 12px 32px rgba(17, 24, 39, .12) !important; transform: translateY(-3px); }
.card-hover .ratio img { transition: transform .5s; }
.card-hover:hover .ratio img { transform: scale(1.04); }
.card-hover:hover .icon-circle { background-color: var(--bs-primary) !important; }

/* fleet: text lines up with the container, the cut-out vehicle is wider and
   runs to the right edge of the window, standing on a soft floor shadow */
.fleet-text { padding-left: .75rem; padding-right: .75rem; }
.fleet-cutout { padding: 1.5rem .75rem; }
.fleet-cutout-inner { position: relative; display: inline-block; max-width: 100%; padding-bottom: .6rem; }
.fleet-cutout-inner::after { content: ""; position: absolute; left: 2%; right: 2%; bottom: 0; height: 34px; background: radial-gradient(ellipse at center, rgba(17, 24, 39, .3) 0%, rgba(17, 24, 39, .12) 42%, rgba(17, 24, 39, 0) 70%); }
.fleet-cutout img { position: relative; z-index: 1; display: block; width: auto; max-width: 100%; height: auto; max-height: 470px; }
@media (min-width: 992px) {
    .fleet-text { padding-left: calc(max(0px, (100vw - 1240px) / 2) + 1.5rem); padding-right: .5rem; }
    .fleet-cutout { padding: 2.5rem 1.5rem; }
}

/* call-to-action band over a photo */
.cta-band { position: relative; isolation: isolate; background-color: rgb(var(--dv-navy)); background-size: cover; background-position: center; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(var(--dv-navy), .95) 0%, rgba(var(--dv-navy), .82) 45%, rgba(var(--dv-navy), .55) 100%); }

/* process: arrow between the steps */
@media (min-width: 768px) {
    .process-step { position: relative; }
    .process-step:not(:last-child)::after { content: "\f178"; position: absolute; top: .9rem; right: -.4rem; font-family: FontAwesome; font-size: 1.25rem; color: var(--bs-secondary-color); }
}

/* sticky sidebar below the sticky header */
@media (min-width: 992px) { .aside-sticky { position: sticky; top: calc(var(--dv-header-h) + 1.5rem); } }

/* footer */
@media (min-width: 992px) { .footer-tagline { border-left: 1px solid var(--bs-border-color); } }
.footer-social a:hover { background-color: var(--bs-primary) !important; }

/* editor content (category / news / static page texts)
   -------------------------------------------------------------------------- */
.prose { font-size: 1.125rem; line-height: 1.75; }
.prose > *:first-child { margin-top: 0; }
.prose h2 { margin: 1.8em 0 .6em; font-size: 2rem; }
.prose h3 { margin: 1.6em 0 .5em; font-size: 1.5rem; }
.prose h4 { margin: 1.4em 0 .5em; font-size: 1.25rem; }
.prose ul { padding-left: 0; list-style: none; }
.prose ul li { position: relative; margin-bottom: .6rem; padding-left: 2.1rem; }
.prose ul li::before { content: "\f00c"; position: absolute; left: 0; top: .2rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--bs-primary-bg-subtle); color: #111827; font-family: FontAwesome; font-size: .7rem; line-height: 1.375rem; text-align: center; }
.prose img { border-radius: var(--bs-border-radius); }
/* spec tables (e.g. crane list): equal photos, clean header, PDF button; cards on phones */
.prose table { width: 100%; margin: 1.5em 0 2em; border-collapse: separate; border-spacing: 0; font-size: .95rem; line-height: 1.5; --bs-table-bg: transparent; --bs-table-hover-bg: var(--bs-tertiary-bg); }
.prose table th, .prose table td { padding: .85rem .75rem; border-bottom: 1px solid var(--bs-border-color); vertical-align: middle; }
.prose table thead th { background: var(--bs-tertiary-bg); border-bottom: 0; font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--bs-secondary-color); }
.prose table thead th:first-child { border-radius: .375rem 0 0 .375rem; }
.prose table thead th:last-child { border-radius: 0 .375rem .375rem 0; }
.prose table td strong { color: var(--bs-emphasis-color); }
.prose table td img.img-responsive { width: 112px; max-width: none; aspect-ratio: 4 / 3; object-fit: cover; margin: 0; }
.prose .table-responsive { margin: 1.5em 0 2em; }
/* vehicle cards built from spec tables (see scripts.js) */
.spec-cards .card-title { font-size: 1.1rem; }
.spec-cards dl { font-size: .9rem; line-height: 1.45; }
.spec-cards dt, .spec-cards dd { padding-top: .1rem; }
.spec-cards .spec-label { font-size: .7rem; letter-spacing: .05em; }
.prose .spec-cards ul.spec-list li { margin-bottom: .3rem; padding-left: 1.4rem; }
.prose .spec-cards ul.spec-list li::before { width: 1rem; height: 1rem; line-height: 1rem; font-size: .55rem; top: .15rem; }
.prose .table-responsive > table { margin: 0; }
.prose table a[href$=".pdf" i] img[src*="ico_pdf"] { display: none; }
.prose table a[href$=".pdf" i]:has(img[src*="ico_pdf"])::before { content: "\f1c1\00a0 PDF"; display: inline-block; padding: .35rem .7rem; border: 1px solid var(--bs-border-color); border-radius: .25rem; background: #fff; font-family: FontAwesome, var(--bs-body-font-family); font-size: .8rem; font-weight: 700; color: var(--bs-emphasis-color); white-space: nowrap; }
.prose table a[href$=".pdf" i]:hover::before { border-color: var(--bs-primary); background: var(--bs-primary-bg-subtle); }
.prose table a[href$=".pdf" i]:has(img[src*="ico_pdf"]) { text-decoration: none; }
@media (max-width: 767.98px) {
    .prose table, .prose table tbody, .prose table tr, .prose table td { display: block; width: 100%; }
    .prose table thead { display: none; }
    .prose table tr { margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--bs-border-color); border-radius: .5rem; background: #fff; }
    .prose table td { display: flex; justify-content: space-between; gap: 1rem; padding: .45rem 0; border-bottom: 1px dashed var(--bs-border-color); text-align: right; }
    .prose table td:last-child { border-bottom: 0; }
    .prose table td[data-label]::before { content: attr(data-label); flex: 0 0 auto; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--bs-secondary-color); text-align: left; }
    .prose table td:first-child { display: block; padding: 0 0 .75rem; border: 0; }
    .prose table td:first-child::before { display: none; }
    .prose table td img.img-responsive { width: 100%; }
    .prose table td:empty, .prose table td:has(> br:only-child) { display: none; }
}
.prose blockquote { padding-left: 1.25rem; border-left: 4px solid var(--bs-primary); font-size: 1.25rem; color: var(--bs-emphasis-color); }
.about-content { column-gap: 4rem; }
@media (min-width: 992px) { .about-content { columns: 2; } .about-content > * { break-inside: avoid; } }

/* classes used inside editor content written for Bootstrap 3 */
.img-responsive { display: block; max-width: 100%; height: auto; }
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.center-block { display: block; margin-left: auto; margin-right: auto; }
.btn-black { --bs-btn-color: #fff; --bs-btn-bg: #111827; --bs-btn-border-color: #111827; --bs-btn-hover-color: #f5c518; --bs-btn-hover-bg: #000; --bs-btn-hover-border-color: #000; }

/* back to top */
.cd-top { position: fixed; right: 1.75rem; bottom: 1.75rem; z-index: 1030; width: 3rem; height: 3rem; opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .3s, transform .3s, visibility 0s .3s; }
.cd-top.cd-is-visible { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }

/* October CMS */
.hp-field { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
[data-validate-error]:not(.oc-visible) { display: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition-duration: .01ms !important; }
}