/* fp-custom.css
   Fitzgerald Plant Services - custom section styles kept out of the page HTML.
   Loaded on every page from chunk "css" via the asset snippet (cache-busted automatically when this file changes).
   Created 13 Nov 2026. */

/* ==========================================================================
   Home page - Latest Insights section (chunk: homeLatestInsights, card: homeInsightCard)
   ========================================================================== */
/* card styles copied from the All Insights template so the cards look the same here (the grid itself is Bootstrap 5: see the <ul> classes below) */
.insight-card{display:flex;min-width:0}
.insight-card__link{display:flex;flex-direction:column;width:100%;background:#fff;border:0;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,.04);overflow:hidden;color:inherit;text-decoration:none;transition:box-shadow .25s ease,transform .25s ease,border-color .25s ease}
.insight-card__link:hover,.insight-card__link:focus-visible{box-shadow:0 14px 32px rgba(0,0,0,.12);transform:translateY(-3px)}
.insight-card__link:focus-visible{outline:3px solid var(--fps-red);outline-offset:2px}
.insight-card__media{aspect-ratio:16/10;overflow:hidden;background:#f2f2f4}
.insight-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s ease}
.insight-card__link:hover .insight-card__media img{transform:scale(1.04)}
.insight-card__body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.insight-card__date{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--fps-red);margin-bottom:8px}
.insight-card__title{font-size:18px;line-height:1.4;font-weight:600;color:var(--fps-ink);margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.insight-card__excerpt{font-size:15px;line-height:1.6;color:var(--fps-muted);margin:0 0 16px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.insight-card__more{margin-top:auto;font-size:14px;font-weight:600;color:var(--fps-red)}
.insight-card__link:hover .insight-card__more{text-decoration:underline;text-underline-offset:3px}
@media (max-width:575px){.insight-card__body{padding:16px 18px 18px}}
@media (prefers-reduced-motion:reduce){.insight-card__link,.insight-card__media img{transition:none}.insight-card__link:hover,.insight-card__link:hover .insight-card__media img{transform:none}}
/* home page section */
.fpi{--fps-red:var(--base-color,#d6262c);--fps-ink:#1d1d1f;--fps-muted:#6b6b70;--fps-line:#e6e6e9;padding:70px 0;background:#fff}
.fpi-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.fpi-title{margin:0;font-size:36px;line-height:1.15;font-weight:700;color:#000}
.fpi-all{display:inline-block;font-weight:600;color:#000;border-bottom:2px solid #cf2e25;text-decoration:none;padding-bottom:2px}
.fpi-all:hover{color:#cf2e25}
.fpi-all:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}
.fpi .insight-card__link{border:1px solid var(--fps-line)}
@media (max-width:991px){.fpi{padding:50px 0}.fpi-title{font-size:30px}}
@media (max-width:575px){.fpi-title{font-size:26px}}

/* ==========================================================================
   Accreditation logo row - Home, About us, Services (chunk: homeLogoTpl)
   ========================================================================== */
/* accreditation logos: one row, vertically centred, never drawn larger than half their pixel size so they stay sharp on high-density screens (13 Nov 2026) */
.fp-accred{display:flex;flex-wrap:nowrap;align-items:center;gap:clamp(14px,2.2vw,36px)}
.fp-accred__item{flex-grow:0;flex-shrink:1;min-width:0}
.fp-accred__item img{display:block;width:100%;height:auto}
@media (max-width:575px){.fp-accred{flex-wrap:wrap;justify-content:center;gap:18px 26px}.fp-accred__item{max-width:28%}}
/* sidebar version (Service All): always 3 per row (3 + 2) */
.fp-accred--stack{flex-wrap:wrap;gap:18px 26px;max-width:440px}
.fp-accred--stack .fp-accred__item{max-width:calc((100% - 53px)/3)}
@media (max-width:575px){.fp-accred--stack{margin-left:auto;margin-right:auto}}

/* ==========================================================================
   Insights sidebar on the individual insight pages (template: Insight (4), chunk: insightsSidebar)
   Added 13 Nov 2026
   ========================================================================== */
/* sidebar boxes: same rules as in the All Insights template (3), which still has its own inline copy. If the boxes are restyled there, copy the change here. */
.insights-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:36px;align-items:start}
.insights-main{min-width:0}
.insights-side{position:sticky;top:110px;display:flex;flex-direction:column;gap:20px}
.insights-side__box{background:#fff;border-radius:6px;padding:24px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.insights-side__box h3{font-size:19px;line-height:1.3;margin:0 0 8px}
.insights-side__box p{font-size:15px;line-height:1.55;color:#6b6b70;margin:0 0 16px}
.insights-side__box--red{background:var(--base-color,#cf2e25)}
.insights-side__box--red h3,.insights-side__box--red p{color:#fff}
.insights-side__tel{display:block;font-size:24px;font-weight:700;color:#fff;margin-bottom:14px}
.insights-side__tel:hover{color:#fff;text-decoration:underline}
.insights-side__btn{display:inline-block;background:#fff;color:#1d1d1f;font-weight:600;font-size:14px;padding:10px 18px;border-radius:4px}
.insights-side__btn:hover{background:#1d1d1f;color:#fff}
.insights-side__links{list-style:none;margin:0;padding:0}
.insights-side__links li+li{border-top:1px solid #eee}
.insights-side__links a{display:flex;justify-content:space-between;padding:11px 0;font-size:15px;font-weight:600;color:#1d1d1f}
.insights-side__links a span{color:var(--base-color,#cf2e25);transition:transform .2s}
.insights-side__links a:hover span{transform:translateX(3px)}
.insights-side__ticks{list-style:none;margin:0;padding:0;font-size:15px}
.insights-side__ticks li{position:relative;padding:6px 0 6px 26px}
.insights-side__ticks li:before{content:"\2713";position:absolute;left:0;color:var(--base-color,#cf2e25);font-weight:700}
@media (max-width:991px){.insights-layout{grid-template-columns:1fr}.insights-side{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}
/* article page layout. Below 1200px: the article is as before and the boxes sit underneath it. From 1200px: article on the left, sticky 300px sidebar on the right, lined up with the Insights page. */
.insights-layout--article{display:block}
.insights-layout--article .insights-side{position:static;display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding:10px 12% 50px}
.insights-layout--article .insights-side__box{border:1px solid #e6e6e9}
.insights-layout--article .insights-side__box--red{border-color:transparent}
@media (min-width:1200px){
.insights-layout--article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:48px;align-items:start;padding:0 calc(15px + (100% - 30px) * .08)}
.insights-layout--article .insights-main>section,.insights-layout--article .insights-main>section .row{padding-left:0!important;padding-right:0!important}
.insights-layout--article .insights-side{position:sticky;top:110px;display:flex;flex-direction:column;padding:0;margin:8px 0 40px}
}

/* ==========================================================================
   Insight pages - breadcrumb + publish date bar (chunk: insightMeta) and "More insights" cards (chunk: insightRelated)
   Added 13 Nov 2026
   ========================================================================== */
.insight-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;padding:6px 12% 0;font-size:14px;line-height:1.5;color:#6b6b70}
/* breadcrumb band under the hero (chunk insightCrumbs): same markup and look as the construction pages; only the side padding is changed so it lines up with the article text */
.insight-crumbband{padding-left:0!important;padding-right:0!important}
.insight-crumbband .container-fluid{padding-left:0;padding-right:0}
section.insight-crumbband .container-fluid .row{margin-left:0;margin-right:0;padding-left:12%!important;padding-right:12%!important}
.insight-crumbband .breadcrumb{padding-left:0;padding-right:0}
@media (min-width:1200px){section.insight-crumbband .container-fluid .row{padding-left:calc(15px + (100% - 30px) * .08)!important;padding-right:calc(15px + (100% - 30px) * .08)!important}}
/* sidebar (chunk insightsSidebar): Authorised Dealers logos and Why Fitzgerald icon rows, same format as the construction sidebar */
.insights-side .fp-brands-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;list-style:none;margin:4px -10px 0;padding:0}
.insights-side .fp-brands-list li{margin:0;padding:0}
.insights-side .fp-brands-list a{display:block;background:#fff;border:1px solid #e4e4e4;border-radius:6px;padding:1px;transition:border-color .2s,box-shadow .2s}
.insights-side .fp-brands-list a:hover,.insights-side .fp-brands-list a:focus-visible{border-color:#cf2e25;box-shadow:0 2px 10px rgba(0,0,0,.08)}
.insights-side .fp-brands-list img{display:block;width:100%;height:auto;max-width:100%}
.insights-side__why{list-style:none;margin:4px 0 0;padding:0}
.insights-side__why li{padding:7px 0}
.insights-side__why .feature-box-icon{width:26px;text-align:center}
.insights-side__why .feature-box-icon i{font-size:20px}
.insights-side__why .feature-box-content span{font-size:14px;font-weight:600;color:#232323}
.insight-date{margin:0;font-size:14px;color:#6b6b70;white-space:nowrap}
@media (min-width:1200px){.insights-layout--article .insight-meta{padding:6px 0 0}}
/* "More insights": same section and cards as the home page Latest Insights (.fpi), on a light grey band */
.fpi--related{background:#f4f4f5}

/* Sections below were moved out of inline <style> blocks on 13 Nov 2026 (below-the-fold styles only).
   Above-the-fold styles (header, hero, page intro) are deliberately still inline in their chunks/templates. */

/* ==========================================================================
   Product spec tables (.fp-specs) - was inline in chunk "css" (block 3 of 19)
   ========================================================================== */
.fp-specs{list-style:none;margin:0 0 18px;padding:0;font-size:14px;line-height:1.35;width:100%}.fp-specs>li{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;width:100%!important;float:none!important;position:static!important;margin:0!important;padding:5px 0!important;border-top:1px solid #e4e4e4}.fp-specs>li>span{color:#595959;flex:0 0 auto}.fp-specs>li>strong{font-weight:400;color:#232323;margin-left:auto;text-align:right}.fp-specs:empty{display:none}

/* ==========================================================================
   Spec table / grid item tweaks (.fp-specs, .grid-item) - was inline in chunk "css" (block 7 of 19)
   ========================================================================== */
/* product cards: equal height, aligned buttons */.fp-specs>li{flex-wrap:nowrap!important;align-items:baseline}.fp-specs>li>span{white-space:nowrap}.fp-specs>li>strong{white-space:nowrap}.grid-item>.card{display:flex;flex-direction:column}.grid-item>.card>.card-body{display:flex;flex-direction:column;flex:1 1 auto}.grid-item>.card>.card-body>.btn{margin-top:auto}.grid-item>.card .card-title{min-height:69px;box-sizing:border-box;display:block!important}@media (max-width:575px){.grid-item>.card .card-title{min-height:0}}

/* ==========================================================================
   Section helper (.fp-sec) - was inline in chunk "css" (block 11 of 19)
   ========================================================================== */
/* section "View all" links */.fp-sec{display:grid;grid-template-columns:1fr auto;column-gap:24px;align-items:baseline}.fp-sec>*{grid-column:1/-1}.fp-sec>h2{grid-column:1;grid-row:1}.fp-sec>.fp-sec__all{grid-column:2;grid-row:1;white-space:nowrap;font-size:15px;font-weight:600;color:#cf2e25;text-decoration:none}.fp-sec>.fp-sec__all span{display:inline-block;transition:transform .2s}.fp-sec>.fp-sec__all:hover{color:#a8241d}.fp-sec>.fp-sec__all:hover span{transform:translateX(3px)}@media (max-width:575px){.fp-sec>.fp-sec__all{grid-column:1/-1;grid-row:auto;margin:-6px 0 20px}}

/* ==========================================================================
   Grid items (.grid-item) - was inline in chunk "css" (block 12 of 19)
   ========================================================================== */
/* product cards: quieter "More Details" link, whole card clickable */.grid-item>.card{position:relative;border:1px solid transparent!important;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .25s}.grid-item>.card:hover{transform:translateY(-3px);border-color:#cf2e25!important;box-shadow:0 10px 24px rgba(0,0,0,.07)}.grid-item>.card>.card-body>.btn{width:auto!important;align-self:flex-start;background:none!important;border:0!important;box-shadow:none!important;padding:6px 0 0!important;color:#cf2e25!important;font-size:15px!important;font-weight:600!important;text-transform:none!important;letter-spacing:0!important;line-height:1.3!important;min-height:0!important}.grid-item>.card>.card-body>.btn::after{content:" \2192";display:inline-block;margin-left:6px;transition:transform .2s}.grid-item>.card:hover>.card-body>.btn::after{transform:translateX(4px)}.grid-item>.card>.card-body>.btn::before{content:"";position:absolute;inset:0;z-index:1}.grid-item>.card .blog-image img{transition:transform .4s cubic-bezier(.16,1,.3,1)}.grid-item>.card:hover .blog-image img{transform:scale(1.04)}@media (hover:none){.grid-item>.card:hover{transform:none;box-shadow:none;border-color:transparent!important}.grid-item>.card:hover .blog-image img{transform:none}}

/* ==========================================================================
   Related products (.fp-related) - chunk: relatedProducts
   ========================================================================== */
.fp-related .fp-rel-more.is-loading{pointer-events:none;opacity:.85}
.fp-related .fp-rel-spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:fpRelSpin .7s linear infinite;margin-right:8px;vertical-align:-2px}
@keyframes fpRelSpin{to{transform:rotate(360deg)}}
.fp-related .grid-item.fp-rel-new>.card{animation:fpRelIn .45s ease-out both}
@keyframes fpRelIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.fp-related .grid-item.fp-rel-new>.card{animation:none}.fp-related .fp-rel-spin{animation-duration:2s}}
.fp-related .fp-rel-sentinel{height:1px}

/* ==========================================================================
   Home page machinery carousel (.fpc) - chunk: homeConstructionCarousel
   ========================================================================== */
.fpc{--fpc-red:#cf2e25;--fpc-dark:#232323;padding:70px 0 60px;background:#f7f7f7}
.fpc-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:26px}
.fpc-eyebrow{display:block;color:var(--fpc-red);text-transform:uppercase;letter-spacing:1px;font-size:14px;font-weight:600;margin-bottom:6px}
.fpc-title{margin:0;font-size:36px;line-height:1.15;font-weight:700;color:#000}
.fpc-tabs{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;margin:0 0 24px;padding:4px;background:#1d1d1d;border-radius:6px}
.fpc-tabs::-webkit-scrollbar{display:none}
.fpc-tab{flex:1 0 auto;min-width:96px;appearance:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:62px;padding:9px 12px 8px;margin:0;background:transparent;border:0;border-radius:4px;color:#d2d2d2;font:600 12.5px/1.2 Figtree,sans-serif;letter-spacing:.5px;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.fpc-tab i{font-size:19px;line-height:1;color:#9d9d9d;transition:color .2s,transform .2s}
.fpc-tab:hover{background:#2e2e2e;color:#fff}
.fpc-tab:hover i{color:#fff;transform:translateY(-2px)}
.fpc-tab[aria-selected="true"],.fpc-tab[aria-selected="true"]:hover{background:var(--fpc-red);color:#fff;box-shadow:0 4px 10px rgba(207,46,37,.3)}
.fpc-tab[aria-selected="true"] i{color:#fff;transform:none}
.fpc-tab:focus-visible{outline:3px solid #fff;outline-offset:-5px}
.fpc-nav:focus-visible,.fpc-all:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}
@media (max-width:575px){.fpc-tab{min-width:92px;min-height:56px;padding:8px 10px 7px;font-size:11.5px;gap:5px}.fpc-tab i{font-size:17px}}
@media (prefers-reduced-motion:reduce){.fpc-tab,.fpc-tab i{transition:none}.fpc-tab:hover i{transform:none}}
.fpc-panel[hidden]{display:none}
.fpc-bar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.fpc-intro{margin:0;font-size:15px;color:#555;flex:1 1 auto}
.fpc-ctrls{display:flex;gap:8px;flex:0 0 auto}
.fpc-nav{width:44px;height:44px;border-radius:50%;border:1px solid #d6d6d6;background:#fff;color:#000;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.fpc-nav:hover:not(:disabled){background:var(--fpc-red);border-color:var(--fpc-red);color:#fff}
.fpc-nav:disabled{opacity:.35;cursor:default}
.fpc-nav svg{width:18px;height:18px}
.fpc-track{display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;list-style:none;margin:0;padding:4px 2px 18px;scrollbar-width:thin;scrollbar-color:#cfcfcf transparent}
.fpc-snap .fpc-track{scroll-snap-type:x mandatory}
.fpc-slide{flex:0 0 calc((100% - 60px)/4);scroll-snap-align:start;min-width:0}
.fpc-slide .card{display:flex;flex-direction:column;border-radius:6px}
.fpc-slide .blog-image img{width:100%;height:auto;display:block}
.fpc-slide .card-body{display:flex;flex-direction:column;flex:1 1 auto}
.fpc-name{margin:0;font-size:inherit;line-height:inherit}
.fpc-btn{margin-top:auto}
.fpc-links{display:flex;flex-wrap:wrap;gap:10px 28px}
.fpc-foot{margin-top:6px}
.fpc-all{display:inline-block;font-weight:600;color:#000;border-bottom:2px solid var(--fpc-red);text-decoration:none;padding-bottom:2px}
.fpc-all:hover{color:var(--fpc-red)}
@media (max-width:1199px){.fpc-slide{flex-basis:calc((100% - 40px)/3)}}
@media (max-width:991px){.fpc{padding:50px 0 40px}.fpc-title{font-size:30px}.fpc-slide{flex-basis:calc((100% - 20px)/2)}}
@media (max-width:575px){.fpc-title{font-size:26px}.fpc-slide{flex-basis:82%}.fpc-intro{display:none}.fpc-bar{justify-content:flex-end}}
@media (prefers-reduced-motion:reduce){.fpc-track{scroll-behavior:auto}}

/* ==========================================================================
   Construction hub search (.fp-hub) - chunk: constructionHub
   ========================================================================== */
section.fp-hub{margin:30px 0 0;padding:0 0 24px !important}
.fp-hub-h{font-size:22px;font-weight:700;line-height:1.3;color:#1d1d1f;margin:0 0 12px}
.fp-hub-h2{margin-top:34px}
.fp-hub-form{position:relative;margin:0 0 10px}
.fp-hub .fp-hub-input{display:block;width:100% !important;height:52px !important;padding:0 128px 0 18px !important;border:1px solid #d6d6d6 !important;border-radius:10px !important;background:#fff !important;font-size:16px !important;color:#1d1d1f;outline:0;box-shadow:none !important;-webkit-appearance:none;appearance:none;transition:border-color .15s,box-shadow .15s}
.fp-hub .fp-hub-input::placeholder{color:#8a8a8a}
.fp-hub .fp-hub-input:hover{border-color:#b9b9b9 !important}
.fp-hub .fp-hub-input:focus{border-color:#1d1d1f !important;box-shadow:0 0 0 3px rgba(29,29,31,.12) !important}
.fp-hub-btn{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:8px;height:40px;padding:0 20px;border:0;border-radius:7px;background:#cf2e25;color:#fff;font-size:15px;font-weight:600;line-height:1;cursor:pointer;transition:background .15s}
.fp-hub-btn:hover{background:#b0251e}
.fp-hub-results{display:none;background:#fff;border-radius:12px;padding:20px 22px;margin:0 0 8px}
.fp-hub-results.is-on{display:block}
.fp-hub-rh{font-size:15px;color:#555;margin:0 0 14px}
.fp-hub-rh strong{color:#1d1d1f}
.fp-hub-g{padding:12px 0;border-top:1px solid #eee}
.fp-hub-g:first-of-type{border-top:0;padding-top:0}
.fp-hub-gt{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:0 0 10px}
.fp-hub-gt a{font-size:16px;font-weight:700;color:#1d1d1f;text-decoration:none}
.fp-hub-gt a:hover{text-decoration:underline}
.fp-hub-gt span{font-size:14px;color:#6b6b6b;white-space:nowrap}
.fp-hub-items{display:flex;flex-wrap:wrap;gap:8px}
.fp-hub-items a{padding:6px 14px;border:1px solid #e2e2e2;border-radius:20px;background:#fff;font-size:14px;font-weight:600;color:#1d1d1f;text-decoration:none;transition:border-color .15s}
.fp-hub-items a:hover{border-color:#1d1d1f}
.fp-hub-items a.fp-hub-more{border-style:dashed;color:#6b6b6b}
.fp-hub-none{font-size:16px;line-height:1.6;color:#555;margin:0}
.fp-hub-none a{color:#cf2e25;font-weight:600}
.fp-hub-load{font-size:14px;color:#8a8a8a;margin:0}
.fp-hub-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fp-hub-card{display:flex;flex-direction:column;background:#fff;border:1px solid #ececec;border-radius:12px;overflow:hidden;text-decoration:none;color:#1d1d1f;transition:border-color .2s,box-shadow .2s,transform .2s}
.fp-hub-card:hover{border-color:#d0d0d0;box-shadow:0 10px 26px rgba(0,0,0,.08);transform:translateY(-2px)}
.fp-hub-img{display:block;aspect-ratio:16/10;background:#fff;overflow:hidden;border-bottom:1px solid #eee}
.fp-hub-img img{display:block;width:100%;height:100%;object-fit:contain;padding:4px 8px;transform:scale(1.06);transition:transform .3s ease}.fp-hub-card:hover .fp-hub-img img{transform:scale(1.1)}
.fp-hub-body{display:flex;flex-direction:column;gap:6px;padding:16px 18px 18px;flex:1}
.fp-hub-top{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.fp-hub-top strong{font-size:18px;font-weight:700;line-height:1.25}
.fp-hub-n{font-size:13px;font-weight:600;color:#8a8a8a;white-space:nowrap}
.fp-hub-d{font-size:14px;line-height:1.5;color:#6b6b6b;flex:1}
.fp-hub-go{font-size:14px;font-weight:600;color:#cf2e25;margin-top:4px}
.fp-hub-col{position:relative;display:block;aspect-ratio:4/3;background:#fff;overflow:hidden}.fp-hub-col>img,.fp-hub-card:hover .fp-hub-col>img{position:absolute;display:block;box-sizing:border-box;margin:0;max-width:none;max-height:none;background:#fff;object-fit:contain;object-position:center;padding:7% 6%;transform:none;transition:transform .35s ease}.fp-hub-col>img.fp-hub-m{left:0;top:0;width:60%;height:100%;padding:6% 5%}.fp-hub-col>img:nth-child(2){left:60%;top:0;width:40%;height:50%;border-left:1px solid #ececec;border-bottom:1px solid #ececec}.fp-hub-col>img:nth-child(3){left:60%;top:50%;width:40%;height:50%;border-left:1px solid #ececec}.fp-hub-card:hover .fp-hub-col>img.fp-hub-m{transform:scale(1.04)}
.fp-hub-stick.is-on{position:fixed;left:0;right:0;top:var(--fp-hdr,0px);z-index:98;margin:0;background:#000;box-shadow:0 10px 28px rgba(0,0,0,.28);padding:18px calc(8% + 15px);animation:fpHubIn .2s ease}
.fp-hub-stick.is-on .fp-hub-form{margin:0}
.fp-hub-stick.is-on .fp-hub-input{height:44px !important}
.fp-hub-stick.is-on .fp-hub-btn{height:34px}
.fp-hub-stick.is-on .fp-hub-input:focus{border-color:#fff !important;box-shadow:0 0 0 3px rgba(255,255,255,.25) !important}
@keyframes fpHubIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:767px){.fp-hub-stick.is-on{padding:14px}}
@media (prefers-reduced-motion:reduce){.fp-hub-stick.is-on{animation:none}}
@media (max-width:1199px){.fp-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:575px){.fp-hub-grid{grid-template-columns:1fr}.fp-hub-btn{padding:0 14px}.fp-hub-btn span{display:none}.fp-hub .fp-hub-input{padding-right:60px !important;font-size:15px !important}.fp-hub-h{font-size:19px}}
@media (prefers-reduced-motion:reduce){.fp-hub-card,.fp-hub-card:hover{transition:none;transform:none}}

/* ==========================================================================
   Unimog model comparison (.unimog-*) - chunk: mercedes_tech_tab
   ========================================================================== */
/* =========================================================
   COMPARISON WRAPPER
========================================================= */

.unimog-compare {
    width: 100%;
    background: #fff;
    color: #111;
}

.unimog-compare-title {
    margin-bottom: 10px;
    font-weight: 500;
}

.unimog-compare-intro {
    max-width: 760px;
    margin-bottom: 35px;
    color: #666;
}


/* =========================================================
   VEHICLE SELECTORS
========================================================= */

.unimog-selector-area {
    padding: 24px 0;
    border-top: 1px solid #d8d8d8;
    border-bottom: 1px solid #d8d8d8;
}

.unimog-select-label {
    display: block;
    margin-bottom: 8px;
    color: #666;
    font-size: 13px;
    font-weight: 400;
}

.unimog-select-wrap {
    position: relative;
}

.unimog-selector {
    width: 100%;
    min-height: 72px;
    padding: 12px 48px 12px 18px;

    background-color: #fff;
    color: #111;

    border: 1px solid #aaa;
    border-radius: 0;

    font-size: 16px;
    font-weight: 500;

    box-shadow: none;
    cursor: pointer;
}

.unimog-selector:hover {
    border-color: #111;
}

.unimog-selector:focus {
    border-color: #111;
    box-shadow: none;
}


/* =========================================================
   SELECTED VEHICLE HEADER
========================================================= */

.unimog-model-header {
    display: block;
}

.unimog-model-name {
    display: block;
    font-size: 20px;
    font-weight: 600;
}

.unimog-model-wheelbase {
    display: block;
    margin-top: 4px;
    color: #666;
    font-size: 14px;
    font-weight: 400;
}


/* =========================================================
   TABLE
========================================================= */

.unimog-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.unimog-comparison-table {
    width: 100%;
    min-width: 760px;
    margin: 0;

    border-collapse: collapse;
    border: 0;
}

.unimog-comparison-table > :not(caption) > * > * {
    border: 0;
}


/* TABLE HEAD */

.unimog-comparison-table thead th {
    padding: 24px 20px;

    background: #fff;
    color: #111;

    border-bottom: 2px solid #111;

    text-align: left;
    vertical-align: bottom;
}

.unimog-comparison-table thead th:first-child {
    width: 38%;

    color: #666;
    font-size: 14px;
    font-weight: 400;
}

.unimog-comparison-table thead th:nth-child(2),
.unimog-comparison-table thead th:nth-child(3) {
    width: 31%;
}


/* BODY */

.unimog-comparison-table tbody th,
.unimog-comparison-table tbody td {
    padding: 17px 20px;

    background: #fff;

    border-bottom: 1px solid #d8d8d8;

    vertical-align: top;
}

.unimog-comparison-table tbody th {
    color: #555;
    font-size: 15px;
    font-weight: 400;
}

.unimog-comparison-table tbody td {
    color: #111;
    font-size: 15px;
    font-weight: 500;
}


/* HOVER */

.unimog-comparison-table tbody tr:hover th,
.unimog-comparison-table tbody tr:hover td {
    background: #f5f5f5;
}


/* =========================================================
   DISCLAIMER
========================================================= */

.unimog-disclaimer {
    margin-top: 25px;

    color: #666;

    font-size: 12px;
    line-height: 1.6;
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767.98px) {

    .unimog-selector-area {
        padding: 16px 0;
    }

    .unimog-selector {
        min-height: 62px;
        padding: 10px 35px 10px 12px;

        font-size: 13px;
    }

    .unimog-select-label {
        font-size: 12px;
    }

    .unimog-comparison-table {
        min-width: 680px;
    }

    .unimog-comparison-table thead th,
    .unimog-comparison-table tbody th,
    .unimog-comparison-table tbody td {
        padding: 14px;
    }

    .unimog-comparison-table tbody th,
    .unimog-comparison-table tbody td {
        font-size: 14px;
    }

    .unimog-model-name {
        font-size: 17px;
    }

    .unimog-model-wheelbase {
        font-size: 12px;
    }

}

/* ==========================================================================
   One card look across the site - matches the construction product cards (e.g. /sany/)
   White card, 6px corners, 20px padding, no shadow or border at rest; on hover it lifts 3px with a soft shadow and a red border.
   Photo in a 6px rounded tile, Outfit bold title, Outfit 15px red link.
   Applies to: insight cards (Insights page, home Latest Insights, More insights), job cards (Careers), range cards (/construction/).
   These rules override the older card rules in templates All Insights (3) and All Jobs (10) and in chunk constructionHub. Added 13 Nov 2026
   ========================================================================== */
.insight-card .insight-card__link{padding:20px;border:1px solid transparent;border-radius:6px;box-shadow:none;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),border-color .25s}
.insight-card .insight-card__link:hover,.insight-card .insight-card__link:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.07);border-color:#cf2e25}
.insight-card .insight-card__media{border-radius:6px;background:#f3f3f4}
.insight-card .insight-card__body{padding:22px 0 6px}
.insight-card .insight-card__title{font-family:var(--alt-font,'Outfit',sans-serif);font-size:20px;line-height:28px;font-weight:700;color:#232323;-webkit-line-clamp:4}
.insight-card .insight-card__excerpt{font-size:14px;line-height:1.55;color:#595959}
.insight-card .insight-card__more{font-family:var(--alt-font,'Outfit',sans-serif);font-size:15px;font-weight:600;color:#cf2e25}
.insight-card .insight-card__link:hover .insight-card__more{text-decoration:none}
/* home page Latest Insights sits on a white background, so its cards keep a thin grey outline at rest */
.fpi:not(.fpi--related) .insight-card .insight-card__link{border-color:#e6e6e9}
.fpi:not(.fpi--related) .insight-card .insight-card__link:hover,.fpi:not(.fpi--related) .insight-card .insight-card__link:focus-visible{border-color:#cf2e25}
/* range cards on /construction/ */
a.fp-hub-card{border:1px solid transparent;border-radius:6px;padding:20px;transition:transform .25s cubic-bezier(.16,1,.3,1),box-shadow .25s cubic-bezier(.16,1,.3,1),border-color .25s}
a.fp-hub-card:hover,a.fp-hub-card:focus-visible{transform:translateY(-3px);box-shadow:0 10px 24px rgba(0,0,0,.07);border-color:#cf2e25}
a.fp-hub-card .fp-hub-img{background:#f3f3f4;border-radius:6px;border-bottom:0}
a.fp-hub-card .fp-hub-col>img,a.fp-hub-card:hover .fp-hub-col>img{background:transparent;mix-blend-mode:multiply;border-color:#dcdcdf}
a.fp-hub-card .fp-hub-body{padding:22px 0 6px}
a.fp-hub-card .fp-hub-top{flex-wrap:wrap}
a.fp-hub-card .fp-hub-top strong{font-family:var(--alt-font,'Outfit',sans-serif);font-size:22px;line-height:30px;color:#232323}
a.fp-hub-card .fp-hub-d{color:#595959}
a.fp-hub-card .fp-hub-go{font-family:var(--alt-font,'Outfit',sans-serif);font-size:15px}
/* team cards on /our-team/ (chunk teamRow, theme class team-style-10): same card look. They are not links, so there is no hover lift. Added 13 Nov 2026 */
.team-style-10 figure{display:flex;flex-direction:column;height:100%;background:#fff;border:1px solid transparent;border-radius:6px;padding:20px}
/* photos cropped from 2:3 to 4:5, anchored near the top so heads stay in frame. To go back to the full photo, delete aspect-ratio, object-fit and object-position. */
.team-style-10 figure img{display:block;border-radius:6px;background:#f3f3f4;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 12%}
.team-style-10 .team-member-strip{padding:22px 0 6px!important;background:transparent!important}
.team-style-10 .team-member-name{font-size:22px!important;line-height:30px;color:#232323!important;margin:0 0 4px!important;word-break:normal;overflow-wrap:break-word}
.team-style-10 .member-designation{font-size:14px;line-height:1.5;color:#595959;margin:0;word-break:normal}
/* tablets: 2 then 3 per row (was one very large card per row below 992px) */
@media (min-width:576px) and (max-width:991px){.col.team-style-10{flex:0 0 auto;width:50%}}
@media (min-width:768px) and (max-width:991px){.col.team-style-10{width:33.3333%}}
/* small laptops: five narrow cards per row, so slightly tighter */
@media (min-width:992px) and (max-width:1199px){.team-style-10 figure{padding:14px}.team-style-10 .team-member-name{font-size:19px!important;line-height:26px}}
@media (max-width:575px){.team-style-10 figure{padding:16px}.team-style-10 .team-member-strip{padding:18px 0 4px!important}}
@media (max-width:575px){.insight-card .insight-card__link,a.fp-hub-card{padding:16px}.insight-card .insight-card__body,a.fp-hub-card .fp-hub-body{padding:18px 0 4px}}
@media (hover:none){.insight-card .insight-card__link:hover,a.fp-hub-card:hover{transform:none;box-shadow:none;border-color:transparent}.fpi:not(.fpi--related) .insight-card .insight-card__link:hover{border-color:#e6e6e9}}
@media (prefers-reduced-motion:reduce){.insight-card .insight-card__link,.insight-card .insight-card__link:hover,a.fp-hub-card,a.fp-hub-card:hover{transition:none;transform:none}}

/* ==========================================================================
   Insight article pages - spacing under the breadcrumb band (13 Nov 2026, ~17:10)
   More room between the breadcrumb band and the sidebar / publish date,
   less empty space between the publish date and the first paragraph.
   ========================================================================== */
.insights-layout.insights-layout--article{padding-top:28px}
.insights-layout.insights-layout--article>.insights-main>.insight-meta{padding-top:0}
.insights-layout.insights-layout--article>.insights-main>.insight-meta+section{padding-top:0!important}
@media (min-width:1200px){
  .insights-layout.insights-layout--article{padding-top:36px}
  .insights-layout.insights-layout--article>.insights-side{margin-top:0}
}
@media (max-width:575px){.insights-layout.insights-layout--article>.insights-main>.insight-meta{margin-bottom:8px}}