/* ===== Mulish, self-hosted ==================================================
   Was two third-party origins on the critical path - DNS, TLS and a fetch to
   fonts.googleapis.com and then fonts.gstatic.com before any text rendered in
   the real face.

   ONE VARIABLE FONT covers every weight the theme uses (400/600/700/800/900)
   in a single 29KB file, against roughly 100KB across five static files. The
   latin-ext subset is a separate face with its own unicode-range, so it only
   downloads if a glyph actually needs it - the same trick Google uses.

   font-display:swap keeps text visible while it loads, exactly as before. */
@font-face{
  font-family:"Mulish";
  src:url("/Themes/bronzeshield/fonts/mulish-latin.woff2") format("woff2");
  font-weight:200 1000;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Mulish";
  src:url("/Themes/bronzeshield/fonts/mulish-latin-ext.woff2") format("woff2");
  font-weight:200 1000;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* theme.css (bronzeshield) v1.24 - 29th Jul 2026 (the header shows the reversed logo
   in dark mode and loses its white plate) */
/* theme.css (bronzeshield) v1.23 - 29th Jul 2026 (the bare footer logo is 60px and
   its rule now outranks .ftr-logo img by specificity rather than by order) */
/* theme.css (bronzeshield) v1.22 - 29th Jul 2026 (.ftr-logo-bare - no white plate
   behind a reversed footer logo) */
/* theme.css (bronzeshield) v1.21 - 28th Jul 2026 (Mulish self-hosted as one
   variable woff2; the chosen hero dot no longer draws a red square) */
/* theme.css (bronzeshield) v1.20 - 28th Jul 2026 (DARK MODE: --coal-surface so a dark
   panel stays dark when --coal flips light, and the three-selector rule that painted
   crane names with a slider gradient is untangled. AA: ticker pause control, 24px hero
   dot targets, 3:1 field boundaries, 4.5:1 footer text.) */
/* theme.css (bronzeshield) v1.19 - 28th Jul 2026 (the run rule REWRITTEN against the
   .ms-rv wrappers - v1.18 targeted the sections, which are never siblings, so it did
   nothing; + .lede body copy moves to --muted-strong and that token is now declared
   in all three theme scopes) */
/* theme.css (bronzeshield) v1.18 - 28th Jul 2026 (a run of RichText sections closes
   up instead of stacking 148px between every heading - see the note above .oc-rich) */
/* theme.css (bronzeshield) v1.17 - 28th Jul 2026 (.ftr-tag strapline + .ftr-legal-links
   for legal pages in the bottom bar) */
/* theme.css (bronzeshield) v1.16 - 27th Jul 2026 23:55 (grid column counts come
   from the block rather than being hardcoded - see the note above .ocx-related) */
/* theme.css (bronzeshield) v1.15 - 25th Jul 2026 (hero Ken Burns no longer snaps back:
   the zoom moves onto the photo and its resting state becomes the zoom's end state, so
   an outgoing photo holds and keeps easing through the crossfade instead of jumping to
   full size. Carries v1.14:
   v1.14 - 25th Jul 2026 (hero photos: the slide-visible and
   Ken Burns rules only matched .hs.on, but the hero partial and bronzeshield.js
   both use .hs.is-on - so every slide sat at opacity 0 and the zoom never ran.
   Both selectors now accept either class. Carries v1.13:
   theme.css (bronzeshield) v1.13 - 25th Jul 2026 (top bar sticks again - a duplicate .bar rule was cancelling it; (blog card headings get card padding; (CTA row fix that never landed in v1.9, logo further right and down; (blog listing + post layer; (Sol's dim restored on both finders, logo repositioned, header CTA on one line; (bigger logo, fleet slider = the homepage control, filter fade, boom bars one row; service pages layer: crane-hire, downloads, training, training-course; (crane detail layer verbatim, incl spectbl/faq detail bodies; (contact form plumbing: honeypot hidden, ok/error banners; (contact page: ocx tab rules verbatim; drop-5 gallery rules that shadowed Sol removed; check b exact (body-level corrections from Sol pages: cmp overflow, svc photo stacking, hero dots, check/gal/gtile; earlier: v1.1 header comment contained the pair star-slash inside "sg-star-slash-fleetx", which closed the comment early and killed the :root tokens and base rules - fixed. Adds the sg and fleetx subpage layer at the end)
   Forensic clone of Sol's signed-off bronzeshield-theme-extended.html v2.2 CSS,
   with the agreed conversion amendments and nothing else restyled:
   - hero slides become real <img> elements (perf + R1-03), with a visible
     pause control and labelled dot buttons (WCAG 2.2.2 / 4.1.2)
   - .ftr-h / .mega-h carry the old h5 look (headings out of the a11y tree)
   - --muted-strong for muted text at body sizes (#8a949b fails 4.5:1 on #ebebeb)
   - :focus-visible ring on interactive chrome                                  */
:root{
  --red:#eb0601;--red-dk:#940502;--steel:#455560;--coal:#323236;--ftr:#393939;
  --bg:#ebebeb;--card:#fff;--line:#d8d8d8;--panel:#f4f4f4;--coal-surface:#323236;--muted:#8a949b;--lighter:#b2b2b2;
  --fb:'Mulish',Verdana,Arial,sans-serif;
  --hz:repeating-linear-gradient(135deg,#eb0601 0 14px,#c00500 14px 28px);
  --hzg:repeating-linear-gradient(135deg,#4a4a4a 0 14px,#3a3a3a 14px 28px);
  --sh-sm:0 4px 14px rgba(50,50,54,.14);--sh:0 18px 42px rgba(50,50,54,.24);--r:4px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--steel);font-family:var(--fb);font-size:1.0312rem;line-height:1.65;font-weight:400}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-weight:800;line-height:1.12;margin:0 0 14px;color:var(--coal);text-transform:uppercase;letter-spacing:.01em}
p{margin:0 0 14px}
a{color:var(--red);text-decoration:none;transition:color .2s}
a:hover{color:var(--red-dk)}
.wrap{max-width:1180px;margin:0 auto;padding:0 26px}
.skip{position:fixed;left:14px;top:-60px;z-index:400;background:var(--coal-surface);color:#fff;padding:10px 18px;border-radius:0 0 6px 6px;font-weight:800;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:0}
#prog{position:fixed;top:0;left:0;height:4px;width:0;z-index:320;background:var(--hz)}
.ic{width:1em;height:1em;display:inline-block;vertical-align:-.12em;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-weight:800;text-transform:uppercase;letter-spacing:.18em;font-size:0.7812rem;color:var(--coal)}
.eyebrow::before{content:"";width:34px;height:8px;background:var(--hz)}
.on-dark .eyebrow,.coalband .eyebrow{color:#fff}
/* header - white bar, boxed tabs like theirs */
.bar{position:sticky;top:0;z-index:200;background:rgba(255,255,255,.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.bar .wrap{display:flex;align-items:center;gap:24px;height:104px;max-width:1280px}
/* The wordmark is 78px inside an 86px bar - 4px of air top and bottom, which
   reads as cramped, and the script "the crane people" tail makes the block sit
   low, so its optical centre is above its geometric one. Bar to 104px gives
   13px clear above and below; margin-top:5px drops it to sit optically level
   with the nav row; margin-left:14px takes it off the 26px wrap gutter to 40px,
   lining its left edge up with the hero copy below. */
.logo{flex:0 0 auto;display:flex;align-items:center;margin:10px 0 0 34px}
.logo img{height:78px;width:auto}
.nav{display:flex;margin-left:auto;align-items:stretch}
.nvi{display:flex;align-items:center}
.nvi>a,.npair>a{color:var(--coal);font-weight:600;font-size:0.8125rem;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;padding:11px 14px;border:1px solid var(--line);margin-left:-1px;transition:all .18s;display:flex;align-items:center;gap:6px}
.nvi>a:hover,.npair>a:hover{background:var(--panel);color:var(--red)}
.nvi>a.on,.npair>a.on{background:var(--red);border-color:var(--red);color:#fff}
.ncar{border:1px solid var(--line);margin-left:-1px;background:none;color:var(--muted);cursor:pointer;padding:0 8px;display:grid;place-items:center;align-self:stretch}
.ncar .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.nvi.open .ncar .chev{transform:rotate(180deg)}
/* mega menu */
.nvi{position:relative}
/* .bar{position:relative} was here and silently cancelled the sticky rule
   above it - last declaration wins. Sticky already establishes a containing
   block for the absolutely-positioned mega panels, so nothing needed it. */
.mega{position:absolute;top:100%;left:0;right:0;background:#fff;border-top:4px solid var(--red);box-shadow:0 30px 50px rgba(50,50,54,.28);display:none;z-index:240;padding:30px 0 12px}
.mega::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:26px}
.nvi.has-mega:hover .mega,.nvi.has-mega:focus-within .mega,.nvi.open .mega{display:block}
.mega .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;align-items:start}
.mega .mega-h{margin:0 0 10px;font-size:0.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:var(--coal);display:inline-block;padding:5px 12px}
.mega .mega-h.hot{background:var(--red)}
.mega a{display:block;padding:6px 0 6px 16px;font-size:0.8438rem;font-weight:600;color:var(--steel);border-bottom:1px solid #eee;position:relative;text-transform:none}
.mega a::before{content:"";position:absolute;left:0;top:13px;border:4px solid transparent;border-left:6px solid var(--red)}
.mega a:hover{color:var(--red);background:#fafafa}
.mega .allrow{grid-column:1/-1;border-top:1px solid var(--line);margin-top:8px;padding-top:12px;text-align:right}
.mega .allrow a{display:inline-block;border:0;font-weight:800;text-transform:uppercase;letter-spacing:.08em;color:var(--red);font-size:0.8125rem}
/* buttons - square industrial */
.btn{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:0.875rem;border-radius:var(--r);padding:16px 30px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap;border:2px solid var(--red);color:#fff;background:var(--red);transition:all .2s;line-height:1}
.btn:hover{background:var(--red-dk);border-color:var(--red-dk);color:#fff}
.btn.ghost{background:transparent;color:var(--red)}
.btn.ghost:hover{background:var(--red);color:#fff}
.btn.white{border-color:#fff;color:#fff;background:transparent}
.btn.white:hover{background:#fff;color:var(--coal)}
.btn.coal{background:var(--coal-surface);border-color:var(--coal)}
.btn.coal:hover{background:#000;border-color:#000}
.bar .btn{padding:12px 20px;font-size:0.7812rem}
@media(prefers-reduced-motion:no-preference){
  .cta-pulse::after{content:"";position:absolute;inset:-7px;border-radius:inherit;border:2px solid rgba(235,6,1,.5);animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{opacity:.9;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.1)}}
}
.cta-pulse{position:relative}
.burger{display:none;width:46px;height:46px;border-radius:6px;border:2px solid var(--line);background:none;cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:11px;right:11px;height:2.6px;background:var(--coal)}
.burger span{top:21px}.burger span::before{top:-7px}.burger span::after{top:7px}
/* a11y toolbar (dark-on-white header variant) */
.a11y{position:relative}
.a11y-btn{width:44px;height:44px;border-radius:50%;border:2px solid var(--line);background:none;color:var(--coal);display:grid;place-items:center;cursor:pointer}
.a11y-btn svg{width:24px;height:24px}
.a11y-btn:hover{border-color:var(--red);color:var(--red)}
.a11y-panel{position:absolute;right:0;top:calc(100% + 14px);width:310px;background:#fff;color:var(--steel);border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh);padding:18px;display:none;z-index:230}
.a11y-panel.open{display:block}
.a11y-panel h4{font-size:0.75rem;letter-spacing:.14em;margin:0 0 10px;color:var(--coal)}
.a11y-row{display:flex;align-items:center;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.a11y-row .aic{width:26px;color:var(--red)}.a11y-row .aic svg{width:22px;height:22px}
.a11y-row .lbl{flex:1;font-weight:700;font-size:0.8438rem;line-height:1.3}
.a11y-row .lbl small{display:block;font-weight:400;color:var(--muted);font-size:0.7188rem}
.tts-btn{border:2px solid var(--red);background:#fff;color:var(--red);border-radius:var(--r);padding:6px 15px;font-weight:800;font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.tgl{width:46px;height:25px;border-radius:99px;border:0;background:#cfd4d3;position:relative;cursor:pointer;transition:background .2s}
.tgl::after{content:"";position:absolute;left:3px;top:3px;width:19px;height:19px;border-radius:50%;background:#fff;transition:left .2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.tgl[aria-pressed="true"]{background:var(--red)}.tgl[aria-pressed="true"]::after{left:24px}
.fs-group{display:flex;gap:5px}
.fs-group button{border:2px solid var(--line);background:#fff;border-radius:6px;cursor:pointer;font-weight:700;color:var(--coal);width:31px;height:31px}
.fs-group .fs2{font-size:0.9375rem}.fs-group .fs3{font-size:1.125rem}
.fs-group button[aria-pressed="true"]{border-color:var(--red);background:#fdeceb;color:var(--red-dk)}
/* hero */
.hero{position:relative;min-height:min(86vh,820px);display:flex;align-items:center;overflow:hidden;background:radial-gradient(95% 130% at 70% 15%,#55636e 0%,#39444c 55%,#2c343a 100%)}
.hero-slides{position:absolute;inset:0}
.hero-slides .hs{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.6s ease;z-index:1}
.hero-slides .hs.on,.hero-slides .hs.is-on{opacity:1;z-index:2}
@media(prefers-reduced-motion:no-preference){
  @keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(35,42,47,.93) 0%,rgba(35,42,47,.72) 45%,rgba(35,42,47,.2) 85%);z-index:2}
.hero .hzedge{position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--hz);z-index:4}
.hero .wrap{position:relative;z-index:3;padding:80px 26px 170px;width:100%}
.hero h1{color:#fff;font-weight:900;font-size:clamp(2.125rem,5vw,3.875rem);line-height:1.05;max-width:840px;margin:20px 0}
.hero h1 .em{color:#fff;background:var(--red);padding:0 12px;display:inline-block;transform:skewX(-6deg)}
.hero h1 .em>span{display:inline-block;transform:skewX(6deg)}
.hero .lede{color:#dfe5e8;font-size:clamp(1.0625rem,1.6vw,1.25rem);max-width:640px;line-height:1.7;text-transform:none;font-weight:400}
.hero .acts{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.hero-dots{position:absolute;right:34px;bottom:150px;z-index:4;display:flex;flex-direction:column;gap:9px}
/* The page-title section, emitted only when no block supplies an h1. No bottom
   padding: the block below brings its own top padding, so the pair does not
   stack two full sections' worth. */
.oc-pagetitle{padding-bottom:0}

/* SC 2.5.8 Target Size (AA in WCAG 2.2): the dot was an 11px button with a 9px
   gap, so neither the 24x24 minimum nor the spacing exception was met - 24px
   circles on centres 20px apart overlap. The BUTTON is now 24x24 and the dot is
   drawn inside it, so nothing changes visually.
   NOTE: this rule was DUPLICATED at two places in this file; the second copy is
   removed, because a later duplicate silently wins. */
.hero-dots button{width:24px;height:24px;border:0;background:none;cursor:pointer;padding:0;display:grid;place-items:center}
.hero-dots button::before{content:"";width:11px;height:11px;border-radius:50%;border:1.6px solid rgba(255,255,255,.75)}

/* stat strip */
.statwrap{position:relative;z-index:5;margin-top:-104px}
.stats{display:grid;grid-template-columns:repeat(var(--stat-cols,4),1fr);gap:16px}
.stat{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:24px 16px 20px;text-align:center;position:relative;overflow:hidden}
.stat::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--hz)}
.stat:nth-child(even)::before{background:var(--hzg)}
.stat .si{display:block;width:42px;height:42px;margin:6px auto 8px;color:var(--red)}
.stat .si svg{width:42px;height:42px;stroke-width:1.6}
.stat .n{font-weight:900;font-size:clamp(1.75rem,3vw,2.625rem);color:var(--coal);line-height:1.05}
.stat .n small{font-size:.5em;font-weight:800;color:var(--red)}
.stat .l{font-weight:700;font-size:0.8438rem;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.06em}
/* marquee */
.ticker{background:var(--coal);padding:16px 0;overflow:hidden;white-space:nowrap;border-top:5px solid var(--red);position:relative}
/* SC 2.2.2 Pause, Stop, Hide. The strip auto-starts and runs for 44s on a loop.
   prefers-reduced-motion is a USER AGENT preference, not a mechanism provided by
   the content, so it does not satisfy this - most people never set it. */
.tk-pause{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:2;width:34px;height:34px;border-radius:50%;border:2px solid rgba(255,255,255,.5);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0}
.tk-pause:hover{border-color:#fff}
.tk-pause:focus-visible{outline:3px solid #fff;outline-offset:2px}
.ticker.paused .run{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.tk-pause{display:none}}
.ticker .run{display:inline-flex;gap:44px;will-change:transform}
@media(prefers-reduced-motion:no-preference){.ticker .run.go{animation:mq var(--mq,44s) linear infinite}@keyframes mq{to{transform:translateX(-50%)}}}
@media(prefers-reduced-motion:reduce){.ticker{overflow-x:auto}}
.ticker .it{color:#fff;font-weight:800;font-size:0.8125rem;letter-spacing:.14em;text-transform:uppercase;display:inline-flex;align-items:center;gap:20px}
.ticker .it::after{content:"";width:12px;height:12px;background:var(--red);transform:rotate(45deg)}
/* sections */
.blk{padding:74px 0}
.blk.white{background:#fff}
.blk.coalband{background:linear-gradient(160deg,#393939,#26292c);color:#cfd4d7}
.blk.coalband h2,.blk.coalband h3{color:#fff}
.center{text-align:center}
.tt{font-size:clamp(1.6875rem,3.2vw,2.5rem)}
.lede{color:var(--muted);font-size:clamp(1.0312rem,1.4vw,1.1562rem);max-width:800px;text-transform:none}
.center .lede{margin-left:auto;margin-right:auto}
.center .eyebrow{justify-content:center}
.rv,.rv-l,.rv-r{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .rv,.rv-l,.rv-r{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.22,.9,.35,1);transition-delay:var(--d,0s)}
  .rv{transform:translateY(30px)}.rv-l{transform:translateX(-34px)}.rv-r{transform:translateX(34px)}
  .rv.in,.rv-l.in,.rv-r.in{opacity:1;transform:none}
}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
/* service hazard tiles */
.svc{position:relative;border-radius:var(--r);overflow:hidden;min-height:250px;display:flex;align-items:flex-end;text-decoration:none;box-shadow:var(--sh-sm);transition:transform .22s,box-shadow .25s}
.svc:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.svc.red{background:var(--hz)}.svc.grey{background:var(--hzg)}
.svc .inner{position:relative;z-index:2;padding:28px;color:#fff;width:100%;background:linear-gradient(transparent,rgba(0,0,0,.42))}
.svc h3{color:#fff;font-size:1.5rem;margin:0 0 6px}
.svc p{margin:0;font-weight:600;text-transform:none}
.svc .go{position:absolute;top:20px;right:20px;width:46px;height:46px;background:#fff;color:var(--red);display:grid;place-items:center;border-radius:var(--r);transition:transform .2s}
.svc:hover .go{transform:translateX(5px)}

/* ===== v1.9 photo tiles: photo + brand wash + hazard texture + readable base ===== */
.svc.photo{background-size:cover;background-position:center;isolation:isolate}
/* layer 1: brand colour wash so the photo reads as brand, not stock */
.svc.photo::before{content:"";position:absolute;inset:0;z-index:1;mix-blend-mode:multiply}
.svc.red.photo::before{background:linear-gradient(150deg,rgba(235,6,1,.82),rgba(148,5,2,.7))}
.svc.grey.photo::before{background:linear-gradient(150deg,rgba(40,43,46,.8),rgba(24,27,30,.78))}
/* layer 2: hazard stripes as low-opacity texture across the whole tile */
.svc.photo .haz{position:absolute;inset:0;z-index:2;opacity:.16;pointer-events:none}
.svc.red.photo .haz{background:var(--hz)}
.svc.grey.photo .haz{background:var(--hzg)}
/* keep the top hazard strip solid as a brand anchor */
.svc.photo::after{content:"";position:absolute;top:0;left:0;right:0;height:12px;z-index:4;background:var(--hz)}
.svc.grey.photo::after{background:var(--hzg)}
/* layer 3: strong bottom gradient so heading/text sit on near-solid colour */
/* THE SAME SCRIM WORK AS .ocx-card, ON THE SHAPE THAT ACTUALLY NEEDED IT.
   20th Aug 2026. CardCollection renders three shapes - "cards" (.ocx-card),
   "courses", and this photo style (.svc.photo). The 18th Aug blur landed on
   .ocx-card, which is the crane-hire page; the homepage pair is this one, so it
   never got the treatment. Same block, same fault, different markup.

   The gradient lived ON .inner, which is only as tall as its own text plus
   padding - so the ramp was compressed into a couple of dozen pixels and the top
   of the heading sat on almost nothing. Room to ramp, then weight where the
   words are. */
.svc.photo .inner{position:relative;z-index:3;padding-top:96px;background:linear-gradient(180deg,
    rgba(10,12,14,0) 0%,
    rgba(10,12,14,.28) 34%,
    rgba(10,12,14,.70) 60%,
    rgba(10,12,14,.93) 100%)}

/* And the part that fixes a busy photo rather than merely dimming it - blur the
   detail out from behind the words. Masked so there is no edge, and additive:
   with no backdrop-filter support nothing renders and the gradient copes alone. */
.svc.photo .inner::before{content:"";position:absolute;inset:0;z-index:-1;
    -webkit-backdrop-filter:blur(12px) saturate(.9);backdrop-filter:blur(12px) saturate(.9);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 40%);
    mask-image:linear-gradient(180deg,transparent 0,#000 40%)}
.svc.photo .inner h3{color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.5)}
.svc.photo .inner p{color:#f2f4f5;text-shadow:0 1px 5px rgba(0,0,0,.6)}
.svc.photo .go{z-index:5}

/* comparison cards */
.cmp{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:32px;border-top:8px solid var(--red);display:flex;flex-direction:column}
.cmp.alt{border-top-color:var(--coal)}
.cmp h3{font-size:1.3125rem}
.cmp .who{font-weight:700;color:var(--muted);text-transform:uppercase;font-size:0.75rem;letter-spacing:.1em;margin-bottom:14px}
.cmp ul{margin:0;padding:0;list-style:none;flex:1}
.cmp li{padding:9px 0 9px 32px;position:relative;border-bottom:1px solid #eee;font-size:0.9375rem}
.cmp li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;background:var(--red);clip-path:polygon(14% 44%,0 59%,40% 100%,100% 18%,84% 5%,39% 70%)}
.cmp.alt li::before{background:var(--coal)}
/* ============ WOW 1: find your crane ============ */
.fleetctl{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:32px;margin-bottom:30px;position:relative;overflow:hidden}
.fleetctl::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--hz)}
.fleetctl .frow{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center}
.fleetctl label{font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:0.8125rem;color:var(--coal);display:block;margin-bottom:12px}
.fslide input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:12px;border-radius:99px;background:linear-gradient(90deg,var(--red) var(--p,0%),#e3e3e3 var(--p,0%));outline:none;cursor:pointer}
.fslide input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:8px solid var(--red);box-shadow:var(--sh-sm);cursor:pointer}
.fslide input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:8px solid var(--red);cursor:pointer}
.fslide .fsv{display:flex;justify-content:space-between;font-weight:800;font-size:0.6875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:9px}
.freadout{text-align:center;min-width:210px}
.freadout b{font-weight:900;font-size:2.875rem;color:var(--red);line-height:1;display:block}
.freadout span{font-weight:700;font-size:0.7812rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.fcount{font-weight:800;color:var(--coal);font-size:0.9375rem;margin-top:16px}
.fcount b{color:var(--red)}
.fleet{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.crane{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:20px;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s,box-shadow .25s,opacity .3s;display:block}
.crane:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.crane.dim{opacity:.22;filter:grayscale(1);pointer-events:none}
.crane .t{font-weight:900;font-size:1.875rem;color:var(--red);line-height:1}
.crane .t small{font-size:.5em}
.crane .m{font-weight:700;color:var(--coal);font-size:0.9062rem;margin:6px 0 2px;line-height:1.35}
.crane .mk{font-weight:700;font-size:0.6562rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:var(--coal-surface);display:inline-block;padding:3px 8px;margin-top:8px}
.crane .mk.sp{background:var(--red)}
.crane .cap{height:7px;background:#eee;border-radius:99px;margin-top:12px;overflow:hidden}
.crane .cap i{display:block;height:100%;background:var(--hz);width:var(--w,10%)}
/* ============ WOW 2: boom reach ============ */
.boomwrap{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:34px;position:relative;overflow:hidden}
.boomwrap::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--hzg)}
.boomsvg svg{width:100%;height:auto;display:block}
.bnote{font-size:0.7812rem;color:var(--muted);margin:12px 0 0;text-transform:none}
/* accreditation band */
.fors{display:grid;grid-template-columns:auto 1fr auto;gap:30px;align-items:center;background:linear-gradient(120deg,#2e3134,#26292c);border-radius:var(--r);padding:36px;border-left:10px solid #d4af37;box-shadow:var(--sh)}
.fors .medal{width:86px;height:86px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#f4d97b,#d4af37 60%,#a8862a);display:grid;place-items:center;color:#3a2f10;font-weight:900;text-align:center;font-size:0.8125rem;line-height:1.1;box-shadow:var(--sh-sm)}
.fors h3{color:#fff;margin:0 0 6px}
.fors p{color:#c8ccd0;margin:0;text-transform:none}
/* news */
.newsgrid{display:grid;grid-template-columns:repeat(var(--cc-cols,3),1fr);gap:22px}
.newsc{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .25s}
.newsc:hover{transform:translateY(-5px);box-shadow:var(--sh)}
.newsc .nimg{overflow:hidden;aspect-ratio:16/9}
.newsc .nimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.newsc:hover .nimg img{transform:scale(1.08)}
.newsc .nd{font-weight:800;font-size:0.7188rem;letter-spacing:.12em;text-transform:uppercase;color:var(--lighter);padding:16px 20px 0}
.newsc h3{font-size:1.0312rem;padding:6px 20px 4px;margin:0;text-transform:none;font-weight:700}
.newsc h3 a{color:var(--coal)}
.newsc h3 a:hover{color:var(--red)}
.newsc p{padding:0 20px;color:var(--muted);font-size:0.875rem;flex:1;text-transform:none}
.newsc .nm{padding:8px 20px 20px}
.newsc .nm a{font-weight:800;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:3px solid var(--red);padding-bottom:5px}
/* cta band */
.ctaband{background:var(--hz);padding:8px}
.ctaband .in{background:var(--coal);padding:56px 26px;text-align:center}
.ctaband h2{color:#fff}
.ctaband p{color:#c8ccd0;max-width:640px;margin:0 auto 24px;text-transform:none}
.ctaband .tel{font-weight:900;font-size:clamp(1.75rem,3.4vw,2.75rem);color:#fff;letter-spacing:.02em}
.ctaband .tel:hover{color:#ffd6d5}
/* footer */
/* was #999 = 4.05:1 on --ftr, under the 4.5:1 AA needs for body text */
.ftr{background:var(--ftr);color:#adadad;padding:64px 0 26px}
.ftr a{color:#999}
.ftr a:hover{color:#ddd}
.ftr-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr;gap:36px}
.ftr h5{font-weight:800;font-size:0.75rem;letter-spacing:.16em;text-transform:uppercase;color:#ddd;margin:0 0 16px}
.ftr-col a,.ftr-col p{display:block;padding:3px 0;font-size:0.9062rem;margin:0;font-weight:600}
.ftr-col a{text-transform:uppercase;font-size:0.7812rem;letter-spacing:.06em}
.ftr-logo{background:#fff;padding:12px 16px;border-radius:var(--r);display:inline-block;margin-bottom:16px}
/* No plate when a reversed lockup is supplied - it is already made for this ground. */
.ftr-logo-bare{background:none;padding:0;border-radius:0}
/* Specificity (0,2,1), not order. `.ftr-logo img{height:44px}` sits BELOW this in
   the file at equal specificity, so a plain `.ftr-logo-bare img` loses to it - and
   `max-height` cannot beat an explicit `height` anyway. Qualifying with both
   classes wins wherever either rule ends up.

   60px rather than 44px because the plate is gone: the old block was a 44px mark
   plus 12px of padding top and bottom on a white ground, so it carried far more
   visual weight than 44px of bare artwork on the dark footer. */
.ftr-logo.ftr-logo-bare img{height:60px;max-height:none;width:auto}
.ftr-logo img{height:44px}
.ftr-bot{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;font-size:0.7812rem;color:#777}
/* a11y modes */
html[data-fs="2"]{font-size:112.5%}html[data-fs="3"]{font-size:125%}
html[data-contrast="1"]{--coal-surface:#25252a;--red:#b00400;--red-dk:#7d0300;--muted:#4a545c;--muted-strong:#39424a;--lighter:#6d6d6d;--steel:#28323a}
html[data-theme="dark"]{--bg:#22272a;--card:#2c3236;--coal-surface:#3a4145;--steel:#d7dcdf;--coal:#f0f2f3;--muted:#a6aeb3;--muted-strong:#c6ccd0;--line:#41494e;--panel:#31383c;--sh-sm:0 4px 16px rgba(0,0,0,.4);--sh:0 18px 44px rgba(0,0,0,.55)}
html[data-theme="dark"] body{background:var(--bg);color:var(--steel)}
html[data-theme="dark"] .bar{background:rgba(34,39,42,.97);border-bottom-color:#41494e}
html[data-theme="dark"] .nvi>a,html[data-theme="dark"] .npair>a,html[data-theme="dark"] .ncar{border-color:#41494e;color:var(--steel)}
html[data-theme="dark"] .nvi>a:hover{background:#31383c}
html[data-theme="dark"] .mega,html[data-theme="dark"] .stat,html[data-theme="dark"] .cmp,html[data-theme="dark"] .fleetctl,html[data-theme="dark"] .crane,html[data-theme="dark"] .boomwrap,html[data-theme="dark"] .newsc,html[data-theme="dark"] .a11y-panel{background:var(--card)}
html[data-theme="dark"] .mega a{color:var(--steel);border-bottom-color:#3a4145}
html[data-theme="dark"] .blk.white{background:#272c30}
/* Was ONE rule with three unrelated selectors, the last of them prefixed
   html[data-theme="dark"] THREE times - an <html> inside an <html> can never
   match, so the slider never got its dark track, while .crane .m and .newsc h3 a
   were painted with a RANGE SLIDER GRADIENT. At --p:0% that renders as flat
   #41494e, which is the grey box that appeared behind every crane name and news
   headline in dark mode. Only the slider ever wanted a background. */
html[data-theme="dark"] .fslide input[type=range]{background:linear-gradient(90deg,var(--red) var(--p,0%),#41494e var(--p,0%))}
html[data-theme="dark"] .logo,html[data-theme="dark"] .lgbadge{background:#fff;border-radius:var(--r)}
/* ===== header logo, light and dark ========================================
   The white plate above is the same stand-in the footer used to have: a
   dark-on-light mark would vanish on the dark header. When the site supplies a
   reversed lockup the layout renders BOTH and .logo-dual appears, so the right
   one is shown and the plate is not needed.

   Specificity, not order: .logo.logo-dual is (0,3,1) against the plate rule's
   (0,2,1), so this wins wherever either ends up in the file. */
.logo-ondark{display:none}
html[data-theme="dark"] .logo.logo-dual{background:none}
html[data-theme="dark"] .logo-dual .logo-onlight{display:none}
html[data-theme="dark"] .logo-dual .logo-ondark{display:block}
:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* responsive */
@media(max-width:1160px){
  .nav{position:fixed;inset:86px 0 auto 0;background:#fff;flex-direction:column;padding:6px 26px 24px;display:none;box-shadow:0 30px 44px rgba(0,0,0,.25);max-height:calc(100vh - 86px);overflow:auto;border-top:1px solid var(--line)}
  html[data-theme="dark"] .nav{background:#2c3236}
  .nav.open{display:flex}
  .burger{display:block}
  .bar .cta{display:none}
  .nvi{display:block;border-bottom:1px solid var(--line)}
  .npair{display:flex;justify-content:space-between;align-items:center}
  .nvi>a,.npair>a{border:0;margin:0;padding:14px 0;width:100%}
  .ncar{border:0}
  .mega{position:static;display:none;box-shadow:none;border-top:0;padding:0 0 14px}
  .mega .wrap{grid-template-columns:1fr;gap:14px;padding:0}
  .nvi.has-mega:hover .mega,.nvi.has-mega:focus-within .mega{display:none}
  .mega::before{display:none}
  .nvi.open .mega{display:block}
  .stats,.fleet{grid-template-columns:1fr 1fr}
  .statwrap{margin-top:-70px}
  .g4{grid-template-columns:1fr 1fr}
  .newsgrid{grid-template-columns:1fr}
  .fleetctl .frow{grid-template-columns:1fr}
  .ftr-grid{grid-template-columns:1fr 1fr}
  .hero-dots{display:none}
  .fors{grid-template-columns:1fr;text-align:center}
  .fors .medal{margin:0 auto}
}
@media(max-width:640px){
  .stats,.fleet,.g4,.g3,.g2,.ftr-grid{grid-template-columns:1fr}
  .hero .wrap{padding-bottom:130px}
  .blk{padding:54px 0}
  .logo img{height:54px}
}

/* v1.1 mega menu fixes */
.chev{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s;flex:0 0 auto}
.npair{display:flex;align-items:stretch}
.mega .wrap{height:auto;max-width:1180px;align-items:start}
.nvi.has-mega{position:static}
.mega{left:0;right:0;top:calc(100% + 1px);z-index:250}
.mega .wrap{max-height:calc(100vh - 150px);overflow:auto}
@media(max-width:1160px){.mega{max-height:none;overflow:visible;top:100%}.mega .wrap{max-height:none;overflow:visible}.npair>a{width:auto;flex:1}}

/* ===== v1.2 ===== */
:root{--skym:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNjAwIDMyMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNYXggc2xpY2UiPjxnIGZpbGw9IiMwMDAiPjxyZWN0IHg9IjAiIHk9IjE4MyIgd2lkdGg9IjgwIiBoZWlnaHQ9IjEzNyIvPjxyZWN0IHg9IjIwIiB5PSIxNzMiIHdpZHRoPSI0MCIgaGVpZ2h0PSIxMCIvPjxyZWN0IHg9IjkwIiB5PSIyMjEiIHdpZHRoPSIxMTEiIGhlaWdodD0iOTkiLz48cmVjdCB4PSIxMTciIHk9IjIxMSIgd2lkdGg9IjU1IiBoZWlnaHQ9IjEwIi8+PHJlY3QgeD0iMjA1IiB5PSIxODYiIHdpZHRoPSIxMDEiIGhlaWdodD0iMTM0Ii8+PHJlY3QgeD0iMzIyIiB5PSIyMDQiIHdpZHRoPSI1NyIgaGVpZ2h0PSIxMTYiLz48cmVjdCB4PSIzODgiIHk9IjIxNiIgd2lkdGg9Ijg1IiBoZWlnaHQ9IjEwNCIvPjxyZWN0IHg9IjQ4MSIgeT0iMjU0IiB3aWR0aD0iNzciIGhlaWdodD0iNjYiLz48cmVjdCB4PSI1NzQiIHk9IjE5MSIgd2lkdGg9IjgzIiBoZWlnaHQ9IjEyOSIvPjxyZWN0IHg9IjU5NCIgeT0iMTgxIiB3aWR0aD0iNDEiIGhlaWdodD0iMTAiLz48cmVjdCB4PSI2NjUiIHk9IjE2NSIgd2lkdGg9Ijg3IiBoZWlnaHQ9IjE1NSIvPjxyZWN0IHg9IjY4NiIgeT0iMTU1IiB3aWR0aD0iNDMiIGhlaWdodD0iMTAiLz48cmVjdCB4PSI3NjUiIHk9IjE2MSIgd2lkdGg9IjkzIiBoZWlnaHQ9IjE1OSIvPjxyZWN0IHg9Ijg2NCIgeT0iMTM5IiB3aWR0aD0iODEiIGhlaWdodD0iMTgxIi8+PHJlY3QgeD0iODg0IiB5PSIxMjkiIHdpZHRoPSI0MCIgaGVpZ2h0PSIxMCIvPjxyZWN0IHg9Ijk2MyIgeT0iMTg0IiB3aWR0aD0iMTIwIiBoZWlnaHQ9IjEzNiIvPjxyZWN0IHg9Ijk5MyIgeT0iMTc0IiB3aWR0aD0iNjAiIGhlaWdodD0iMTAiLz48cmVjdCB4PSIxMDkxIiB5PSIxODEiIHdpZHRoPSIxMjMiIGhlaWdodD0iMTM5Ii8+PHJlY3QgeD0iMTIyNiIgeT0iMTU1IiB3aWR0aD0iNzQiIGhlaWdodD0iMTY1Ii8+PHJlY3QgeD0iMTI0NCIgeT0iMTQ1IiB3aWR0aD0iMzciIGhlaWdodD0iMTAiLz48cmVjdCB4PSIxMzA4IiB5PSIxNDUiIHdpZHRoPSIxMDUiIGhlaWdodD0iMTc1Ii8+PHJlY3QgeD0iMTMzNCIgeT0iMTM1IiB3aWR0aD0iNTIiIGhlaWdodD0iMTAiLz48cmVjdCB4PSIxNDIxIiB5PSIyNDkiIHdpZHRoPSI4MyIgaGVpZ2h0PSI3MSIvPjxyZWN0IHg9IjE0NDEiIHk9IjIzOSIgd2lkdGg9IjQxIiBoZWlnaHQ9IjEwIi8+PHJlY3QgeD0iMTUxNSIgeT0iMTg5IiB3aWR0aD0iMTMwIiBoZWlnaHQ9IjEzMSIvPjxyZWN0IHg9IjE4NiIgeT0iNTAiIHdpZHRoPSI5IiBoZWlnaHQ9IjI3MCIvPjxyZWN0IHg9IjEyMCIgeT0iNTAiIHdpZHRoPSIyODAiIGhlaWdodD0iNyIvPjxwb2x5Z29uIHBvaW50cz0iMTkwLDE2IDE4Nyw1MCAxOTMsNTAiLz48bGluZSB4MT0iMTkwIiB5MT0iMTYiIHgyPSI0MDAiIHkyPSI1MyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIvPjxsaW5lIHgxPSIxOTAiIHkxPSIxNiIgeDI9IjEyMCIgeTI9IjUzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi41Ii8+PGxpbmUgeDE9IjMyMCIgeTE9IjU3IiB4Mj0iMzIwIiB5Mj0iMTA0IiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi41Ii8+PHJlY3QgeD0iMzE0IiB5PSIxMDQiIHdpZHRoPSIxMiIgaGVpZ2h0PSI4Ii8+PHJlY3QgeD0iMTYwIiB5PSI1NyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEyIi8+PHJlY3QgeD0iNTU2IiB5PSI0MCIgd2lkdGg9IjkiIGhlaWdodD0iMjgwIi8+PHJlY3QgeD0iNDc2IiB5PSI0MCIgd2lkdGg9IjM0NCIgaGVpZ2h0PSI3Ii8+PHBvbHlnb24gcG9pbnRzPSI1NjAsNiA1NTcsNDAgNTYzLDQwIi8+PGxpbmUgeDE9IjU2MCIgeTE9IjYiIHgyPSI4MjAiIHkyPSI0MyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIvPjxsaW5lIHgxPSI1NjAiIHkxPSI2IiB4Mj0iNDc2IiB5Mj0iNDMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiLz48bGluZSB4MT0iNjgzIiB5MT0iNDciIHgyPSI2ODMiIHkyPSI4NSIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIvPjxyZWN0IHg9IjY3NyIgeT0iODUiIHdpZHRoPSIxMiIgaGVpZ2h0PSI4Ii8+PHJlY3QgeD0iNTMwIiB5PSI0NyIgd2lkdGg9IjE2IiBoZWlnaHQ9IjEyIi8+PHJlY3QgeD0iOTE2IiB5PSI2MCIgd2lkdGg9IjkiIGhlaWdodD0iMjYwIi8+PHJlY3QgeD0iNzQwIiB5PSI2MCIgd2lkdGg9IjI0MCIgaGVpZ2h0PSI3Ii8+PHBvbHlnb24gcG9pbnRzPSI5MjAsMjYgOTE3LDYwIDkyMyw2MCIvPjxsaW5lIHgxPSI5MjAiIHkxPSIyNiIgeDI9Ijc0MCIgeTI9IjYzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi41Ii8+PGxpbmUgeDE9IjkyMCIgeTE9IjI2IiB4Mj0iOTgwIiB5Mj0iNjMiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiLz48bGluZSB4MT0iODUyIiB5MT0iNjciIHgyPSI4NTIiIHkyPSIxMTkiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLXdpZHRoPSIyLjUiLz48cmVjdCB4PSI4NDYiIHk9IjExOSIgd2lkdGg9IjEyIiBoZWlnaHQ9IjgiLz48cmVjdCB4PSI5MzQiIHk9IjY3IiB3aWR0aD0iMTYiIGhlaWdodD0iMTIiLz48cmVjdCB4PSIxMjg2IiB5PSI1MCIgd2lkdGg9IjkiIGhlaWdodD0iMjcwIi8+PHJlY3QgeD0iMTA1MCIgeT0iNTAiIHdpZHRoPSIzMTYiIGhlaWdodD0iNyIvPjxwb2x5Z29uIHBvaW50cz0iMTI5MCwxNiAxMjg3LDUwIDEyOTMsNTAiLz48bGluZSB4MT0iMTI5MCIgeTE9IjE2IiB4Mj0iMTA1MCIgeTI9IjUzIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi41Ii8+PGxpbmUgeDE9IjEyOTAiIHkxPSIxNiIgeDI9IjEzNjYiIHkyPSI1MyIgc3Ryb2tlPSIjMDAwIiBzdHJva2Utd2lkdGg9IjIuNSIvPjxsaW5lIHgxPSIxMTU5IiB5MT0iNTciIHgyPSIxMTU5IiB5Mj0iMTExIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iMi41Ii8+PHJlY3QgeD0iMTE1MyIgeT0iMTExIiB3aWR0aD0iMTIiIGhlaWdodD0iOCIvPjxyZWN0IHg9IjEzMDQiIHk9IjU3IiB3aWR0aD0iMTYiIGhlaWdodD0iMTIiLz48L2c+PC9zdmc+")}
/* hero drama: staggered entrance + crane skyline silhouette */
@media(prefers-reduced-motion:no-preference){
 .hero .eyebrow{animation:rise .7s ease .15s both}
 .hero h1{animation:rise .8s ease .3s both}
 .hero .lede{animation:rise .8s ease .5s both}
 .hero .acts{animation:rise .8s ease .68s both}
 @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
}
/* service tiles with their photos */
.svc{background-size:cover;background-position:center;min-height:290px}
.svc::before{content:"";position:absolute;top:0;left:0;right:0;height:12px;background:var(--hz);z-index:3}
.svc.grey::before{background:var(--hzg)}
.svc.red:not(.photo) .inner{background:linear-gradient(transparent 20%,rgba(148,5,2,.88))}
.svc.grey:not(.photo) .inner{background:linear-gradient(transparent 20%,rgba(30,33,36,.9))}
/* condensed fleet - one screen */
.fleet{grid-template-columns:repeat(6,1fr);gap:10px}
.crane{padding:12px 13px}
.crane .t{font-size:1.3125rem}
.crane .m{font-size:0.7188rem;font-weight:700;margin:4px 0 0;min-height:32px}
.crane .mk{font-size:0.5312rem;padding:2px 6px;margin-top:5px;letter-spacing:.06em}
.crane .cap{height:5px;margin-top:8px}
@media(max-width:1160px){.fleet{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.fleet{grid-template-columns:repeat(2,1fr)}}
/* comparison pizazz */
.cmpgrid{position:relative}
.cmp{transition:transform .2s,box-shadow .25s;position:relative;overflow:visible}
.cmp:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.cmp::after{content:"01";position:absolute;top:10px;right:22px;font-weight:900;font-size:3.75rem;line-height:1;color:rgba(235,6,1,.12);z-index:0;pointer-events:none}
.cmp.alt::after{content:"02";color:rgba(50,50,54,.12)}
.cmp>*{position:relative;z-index:1}
.cmp .who,.cmp h3{background:transparent}
html[data-theme="dark"] .cmp::after{color:rgba(235,6,1,.22)}
html[data-theme="dark"] .cmp.alt::after{color:rgba(255,255,255,.14)}
.cmp .tag{position:absolute;top:-14px;left:24px;background:var(--red);color:#fff;font-weight:800;font-size:0.6562rem;letter-spacing:.12em;text-transform:uppercase;padding:5px 12px;z-index:2}
.cmpgrid::after{content:"OR";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:58px;height:58px;background:var(--red);color:#fff;font-weight:900;font-size:1rem;display:grid;place-items:center;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);z-index:3;box-shadow:var(--sh)}
@media(max-width:1160px){.cmpgrid::after{display:none}}
/* 3D boom stage */
.boombars{display:grid;grid-template-columns:repeat(var(--bcols,5),1fr);gap:18px;align-items:end;min-height:340px;padding:10px 0 0}
.bbar{display:flex;flex-direction:column;align-items:center;gap:12px;height:100%;justify-content:flex-end}
.bbl{font-weight:900;font-size:1.125rem;color:var(--red)}
.btrack{width:100%;max-width:64px;flex:1;display:flex;align-items:flex-end;background:linear-gradient(#f2f4f5,#e7ebee);border-radius:6px 6px 0 0;position:relative;overflow:hidden;min-height:220px}
html[data-theme="dark"] .btrack{background:linear-gradient(#31383c,#272c30)}
.btrack i{display:block;width:100%;height:var(--h);background:var(--hz);border-radius:5px 5px 0 0;position:relative;transition:height 1s cubic-bezier(.22,.9,.3,1);min-height:8px}
.bbar:nth-child(even) .btrack i{background:var(--hzg)}
.bcap{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-weight:900;font-size:0.9375rem;color:var(--coal);white-space:nowrap}
.bnm{font-weight:700;font-size:0.6875rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;text-align:center;min-height:26px}
@media(prefers-reduced-motion:reduce){.btrack i{transition:none}}
@media(max-width:640px){.boombars{grid-template-columns:1fr 1fr;gap:12px}.btrack{min-height:150px}}
/* footer skyline */
.ftr{position:relative;overflow:hidden}
.ftr::before{content:"";position:absolute;left:0;right:0;bottom:0;height:250px;background:rgba(255,255,255,.05);-webkit-mask:var(--skym) bottom center/auto 100% repeat-x;mask:var(--skym) bottom center/auto 100% repeat-x;pointer-events:none}
.ftr .wrap{position:relative;z-index:1}

/* ===== v1.3 ===== */
html[data-theme="dark"] .ticker,html[data-theme="dark"] .ctaband .in,html[data-theme="dark"] th,html[data-theme="dark"] .mega .mega-h,html[data-theme="dark"] .crail,html[data-theme="dark"] .step .num{background:#1b1f22}


.step{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:26px;position:relative;overflow:hidden}
.step::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--hz)}
.step .num{width:46px;height:46px;background:var(--coal);color:#fff;font-weight:900;display:grid;place-items:center;font-size:1.1875rem;margin-bottom:14px;border-radius:var(--r)}
.step h3{font-size:1.0625rem}.step p{color:var(--muted);font-size:0.9062rem;margin:0;text-transform:none}
.check{display:flex;gap:13px;align-items:flex-start;background:#fff;border-radius:var(--r);padding:18px 20px;box-shadow:var(--sh-sm);border-left:6px solid var(--red)}
.check b{font-weight:800;font-size:0.9375rem;text-transform:uppercase;color:var(--coal)}.check small{display:block;color:var(--muted);text-transform:none;font-size:0.8438rem}
.tblwrap{overflow-x:auto;border-radius:var(--r);box-shadow:var(--sh-sm);background:#fff}
table{width:100%;border-collapse:collapse;font-size:0.9375rem}
th{font-weight:800;font-size:0.75rem;letter-spacing:.1em;text-transform:uppercase;text-align:left;background:var(--coal);color:#fff;padding:14px 18px}
td{padding:13px 18px;border-top:1px solid #eee}
tr:nth-child(even) td{background:#fafafa}
td b{font-weight:800;color:var(--red)}
.gal{display:grid;grid-template-columns:repeat(var(--gal-cols,4),1fr);gap:12px}
.gtile{position:relative;border-radius:var(--r);overflow:hidden;cursor:pointer;border:0;padding:0;background:none}
.gtile img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .5s}
.gtile:hover img{transform:scale(1.08)}
.lbox{position:fixed;inset:0;background:rgba(30,34,37,.94);z-index:500;display:none;place-items:center;padding:30px}
.lbox.open{display:grid}
.lbox img{max-width:min(1100px,94vw);max-height:86vh;border-radius:var(--r)}
.lbox button{position:absolute;top:18px;right:18px;width:46px;height:46px;border-radius:var(--r);border:0;background:var(--red);color:#fff;font-size:1.25rem;cursor:pointer}
.faq{max-width:860px;margin:0 auto;display:grid;gap:10px}
.qa{background:#fff;border:1.6px solid var(--line);border-radius:var(--r);transition:border-color .18s}
.qa:hover{border-color:var(--red)}
.qa summary{list-style:none;display:flex;gap:14px;align-items:center;padding:17px 22px;cursor:pointer;font-weight:800;font-size:0.9688rem;color:var(--coal);text-transform:uppercase}
.qa summary::-webkit-details-marker{display:none}
.qa .qi{width:28px;height:28px;background:#fdeceb;color:var(--red);display:grid;place-items:center;flex:0 0 auto;transition:transform .25s;font-weight:900;border-radius:var(--r)}
.qa[open] .qi{background:var(--red);color:#fff;transform:rotate(45deg)}
.qa .ans p{padding:0 22px 18px 64px;color:var(--muted);margin:0;text-transform:none}
.dlx{display:flex;gap:18px;align-items:center;background:#fff;border:2.5px dashed var(--red);border-radius:var(--r);padding:24px 26px;text-decoration:none;color:inherit}
.dlx:hover{background:#fff8f8}
.dlx .di{width:54px;height:54px;background:var(--red);color:#fff;display:grid;place-items:center;flex:0 0 auto;border-radius:var(--r)}
.dlx b{font-weight:800;font-size:1.0625rem;color:var(--coal);text-transform:uppercase}
.dlx small{display:block;color:var(--muted);text-transform:none}
.rolex{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:30px;border-left:10px solid var(--red)}
.rolex .meta{display:flex;gap:20px;flex-wrap:wrap;color:var(--muted);font-size:0.8438rem;font-weight:700;text-transform:uppercase}
.cgrid{display:grid;grid-template-columns:1fr .8fr;gap:32px;align-items:start}
.cform{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:32px}
.fld{margin-bottom:15px}
.fld label{display:block;font-weight:800;font-size:0.6875rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:6px;color:var(--coal)}
.fld input,.fld textarea,.fld select{width:100%;border:2px solid var(--line);border-radius:var(--r);padding:12px 14px;font:inherit;background:#fff;color:var(--steel)}
/* SC 1.4.11: the field boundary is the only thing marking the input, and
   var(--line) #d8d8d8 was 1.43:1 against the white fill. #7d7d7d clears 3:1
   against both the fill and the page. */
.fld input,.fld textarea,.fld select{border-color:var(--field-line,#7d7d7d)}
html[data-theme="dark"]{--field-line:#8b959b}
.fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--red)}
.half{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.crail{background:var(--coal);color:#cfd4d7;border-radius:var(--r);padding:30px;box-shadow:var(--sh)}
.crail h3{color:#fff}
.crail .rl{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid rgba(255,255,255,.12)}
.crail .rl:first-of-type{border-top:0}
.crail .rl .ri{color:var(--red);margin-top:3px}
.crail a{color:#fff}
#lmap{height:380px;border-radius:var(--r);box-shadow:var(--sh-sm);z-index:1;margin-top:20px}
html[data-theme="dark"] .step,html[data-theme="dark"] .check,html[data-theme="dark"] .tblwrap,html[data-theme="dark"] .qa,html[data-theme="dark"] .dlx,html[data-theme="dark"] .rolex,html[data-theme="dark"] .cform{background:var(--card)}
html[data-theme="dark"] tr:nth-child(even) td{background:#272c30}
html[data-theme="dark"] td{border-top-color:#3a4145}
html[data-theme="dark"] .fld input,html[data-theme="dark"] .fld textarea,html[data-theme="dark"] .fld select{background:var(--card);border-color:#41494e}
@media(max-width:1160px){.cgrid{grid-template-columns:1fr}.gal{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.gal{grid-template-columns:1fr}.rolex{grid-template-columns:1fr}}


/* ===== v2.2 - agreed OliveCore extension blocks ===== */
.ocx-intro{background:linear-gradient(145deg,#f7f7f7,#e7e9ea);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.ocx-intro .ocx-chips{display:flex;justify-content:center;gap:9px;flex-wrap:wrap;margin-top:22px}
.ocx-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--coal);font-size:.75rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;box-shadow:var(--sh-sm)}
.ocx-chip::before{content:"";width:9px;height:9px;background:var(--red);transform:rotate(45deg)}
.ocx-head{margin-bottom:32px}

/* Card collection */
.ocx-cards{display:grid;grid-template-columns:1.15fr .85fr .85fr;gap:18px}
.ocx-card{position:relative;min-height:315px;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh-sm);display:flex;align-items:flex-end;color:#fff;background:var(--coal-surface);isolation:isolate;transition:transform .22s,box-shadow .25s}
.ocx-card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
/* CARD SCRIM v2 - 18th Aug 2026. These images are CLIENT-EDITABLE, and the
   treatment that suited the tight crops WE chose stopped carrying the text once
   Aaron swapped in drone shots full of sky and roofline.

   V1 FAILED AND THE ARITHMETIC SAYS WHY. The original was a straight ramp .04 to
   .92, which at the text band (about 78% down) works out at .73. My first attempt
   used stops of .68 at 74% and .93 at 100% - which interpolates to .72 at that
   same point. I redistributed the gradient and left the one place that mattered
   exactly where it was. Only the blur changed anything, and not much on its own.

   So this version is measured at the text band rather than eyeballed as a curve:
   ~.88 by 78%, against .73 before. The top 30% is still clear - the photograph is
   the point - and the ramp does its work in the middle third. */
.ocx-card::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,
    rgba(20,23,25,0) 0%,
    rgba(20,23,25,.04) 30%,
    rgba(20,23,25,.42) 52%,
    rgba(20,23,25,.82) 70%,
    rgba(20,23,25,.95) 88%,
    rgba(20,23,25,.96) 100%)}

/* AND THE PART THAT ACTUALLY FIXES A BUSY PHOTO: blur what is behind the words.
   Darkening fights BRIGHTNESS; what breaks legibility here is DETAIL - a roofline
   or a lattice tower running through a line of type. Blurring removes the detail
   and keeps the colour, so the photo still reads as itself.

   Masked so it fades in with no visible edge, and purely additive: where
   backdrop-filter is unsupported nothing renders and the gradient carries on
   alone. Raised from 7px to 12px and the band extended - at 7px it was doing too
   little to notice. */
.ocx-card-body::before{content:"";position:absolute;inset:-70px 0 0;z-index:-1;
    -webkit-backdrop-filter:blur(12px) saturate(.9);backdrop-filter:blur(12px) saturate(.9);
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 38%);
    mask-image:linear-gradient(180deg,transparent 0,#000 38%)}

/* Belt and braces for the worst case - a light sky directly behind a descender. */
.ocx-card h3,.ocx-card p,.ocx-card-link{text-shadow:0 1px 3px rgba(12,15,17,.55)}
.ocx-card::after{content:"";position:absolute;left:0;right:0;top:0;height:10px;background:var(--hz);z-index:3}
.ocx-card:nth-child(3)::after{background:var(--hzg)}
.ocx-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .55s}
.ocx-card:hover img{transform:scale(1.06)}
.ocx-card-body{position:relative;z-index:2;padding:26px;width:100%}
.ocx-card-k{display:inline-block;background:var(--red);color:#fff;padding:4px 9px;font-size:.625rem;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.ocx-card h3{color:#fff;font-size:1.35rem;margin-bottom:7px}.ocx-card p{color:#e9ecee;font-size:.875rem;margin:0 0 13px;text-transform:none}
.ocx-card-link{display:inline-flex;align-items:center;gap:8px;color:#fff;font-weight:900;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;border-bottom:3px solid var(--red);padding-bottom:4px}
.ocx-card-link:hover{color:#fff}

/* People */
.ocx-people{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ocx-person{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;border-top:8px solid var(--red);display:flex;flex-direction:column}
.ocx-person:nth-child(even){border-top-color:var(--coal)}
.ocx-person-visual{min-height:168px;background:linear-gradient(145deg,#555f66,#272c30);display:grid;place-items:center;position:relative;overflow:hidden}
.ocx-person-visual::after{content:"";position:absolute;inset:0;background:var(--hzg);opacity:.12}
.ocx-person-mark{position:relative;z-index:1;width:82px;height:82px;border-radius:50%;background:#fff;color:var(--red);display:grid;place-items:center;font-size:1.65rem;font-weight:900;box-shadow:var(--sh)}
.ocx-person-body{padding:22px;display:flex;flex-direction:column;flex:1}
.ocx-person h3{font-size:1.0625rem;margin-bottom:4px}.ocx-role{color:var(--red);font-weight:900;font-size:.6875rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px}
.ocx-person p{font-size:.8438rem;color:var(--muted);text-transform:none;flex:1}.ocx-person a{font-size:.75rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

/* Pricing/packages */
.ocx-packages{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch}
.ocx-package{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:30px 28px;border-top:9px solid var(--coal);position:relative;display:flex;flex-direction:column}
.ocx-package.featured{border-top-color:var(--red);box-shadow:0 0 0 3px rgba(235,6,1,.13),var(--sh);transform:translateY(-7px)}
.ocx-ribbon{position:absolute;right:18px;top:-15px;background:var(--red);color:#fff;padding:5px 10px;font-size:.625rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase}
.ocx-package h3{font-size:1.25rem}.ocx-price{font-weight:900;font-size:1.75rem;color:var(--red);line-height:1.1;margin:8px 0 10px}.ocx-price small{display:block;font-size:.6875rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:6px}
.ocx-package p{color:var(--muted);font-size:.875rem;text-transform:none}
.ocx-package ul{list-style:none;padding:0;margin:14px 0 24px;display:grid;gap:9px;flex:1}
.ocx-package li{position:relative;padding-left:25px;font-size:.875rem}.ocx-package li::before{content:"";position:absolute;left:0;top:6px;width:14px;height:14px;background:var(--red);clip-path:polygon(14% 44%,0 59%,40% 100%,100% 18%,84% 5%,39% 70%)}
.ocx-package .btn{justify-content:center}

/* Logo cloud */
.ocx-logos{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}
.ocx-logo{min-height:112px;background:#fff;border:1px solid var(--line);border-radius:var(--r);display:grid;place-items:center;text-align:center;padding:16px;box-shadow:var(--sh-sm);transition:transform .2s,border-color .2s}
.ocx-logo:hover{transform:translateY(-4px);border-color:var(--red)}
.ocx-logo b{font-size:.875rem;font-weight:900;color:var(--coal);line-height:1.15;text-transform:uppercase}.ocx-logo small{display:block;color:var(--muted);font-size:.625rem;letter-spacing:.09em;margin-top:5px;text-transform:uppercase}
.ocx-logo.gold{background:linear-gradient(145deg,#f7e8a3,#caa83c);border-color:#c6a238}.ocx-logo.gold b,.ocx-logo.gold small{color:#3c3110}

/* Opening hours */
.ocx-hours{display:grid;grid-template-columns:1.15fr .85fr;gap:22px}
.ocx-hours-card,.ocx-hours-call{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:30px}
.ocx-status{display:inline-flex;align-items:center;gap:9px;background:#e5f6ed;color:#176342;border-radius:999px;padding:7px 12px;font-size:.75rem;font-weight:900;text-transform:uppercase;letter-spacing:.06em;margin-bottom:18px}
.ocx-status::before{content:"";width:9px;height:9px;border-radius:50%;background:#24a66b;box-shadow:0 0 0 4px rgba(36,166,107,.14)}
.ocx-hours-list{display:grid}.ocx-hours-row{display:grid;grid-template-columns:1fr auto;gap:16px;padding:12px 0;border-top:1px solid var(--line);font-size:.9062rem}.ocx-hours-row:first-child{border-top:0}.ocx-hours-row b{color:var(--coal);text-transform:uppercase;font-size:.75rem;letter-spacing:.08em}.ocx-hours-row span{font-weight:800;color:var(--muted)}
.ocx-hours-call{background:linear-gradient(150deg,#3b4146,#24282b);color:#d5dadd;border-left:10px solid var(--red);display:flex;flex-direction:column;justify-content:center}.ocx-hours-call h3{color:#fff}.ocx-hours-call p{text-transform:none}.ocx-hours-call .tel{font-weight:900;color:#fff;font-size:1.75rem;line-height:1.2;margin:8px 0 18px}

/* Scheduled announcement */
.ocx-announcement{background:var(--coal-surface);color:#fff;border-radius:var(--r);box-shadow:var(--sh);display:grid;grid-template-columns:auto 1fr auto auto;gap:18px;align-items:center;padding:24px 26px;position:relative;overflow:hidden;border-left:11px solid var(--red)}
.ocx-announcement::after{content:"";position:absolute;inset:0;background:var(--hzg);opacity:.12;pointer-events:none}.ocx-announcement>*{position:relative;z-index:1}
.ocx-ann-icon{width:58px;height:58px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1.3rem;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.ocx-announcement h3{color:#fff;font-size:1.1rem;margin:0 0 4px}.ocx-announcement p{color:#ced3d6;margin:0;text-transform:none;font-size:.875rem}.ocx-ann-meta{color:#fff;font-weight:900;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;white-space:nowrap}
.ocx-ann-close{width:40px;height:40px;border:1px solid rgba(255,255,255,.28);background:transparent;color:#fff;cursor:pointer;font-size:1.1rem}.ocx-ann-close:hover{background:#fff;color:var(--coal)}

/* Tabs */
.ocx-tabs{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.ocx-tablist{display:grid;grid-template-columns:repeat(3,1fr);background:var(--coal-surface);padding:8px;gap:7px}
.oc-tab{border:0;background:transparent;color:#d7dbdd;padding:15px 18px;font:inherit;font-weight:900;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--r)}
.oc-tab:hover{background:rgba(255,255,255,.08);color:#fff}.oc-tab[aria-selected="true"]{background:var(--red);color:#fff}
.oc-tabpanel{padding:32px}.ocx-tab-layout{display:grid;grid-template-columns:1fr .9fr;gap:30px;align-items:center}.ocx-tab-layout h3{font-size:1.45rem}.ocx-tab-layout p{color:var(--muted);text-transform:none}.ocx-tab-list{list-style:none;padding:0;margin:18px 0;display:grid;gap:9px}.ocx-tab-list li{position:relative;padding-left:25px}.ocx-tab-list li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:14px;background:var(--red);clip-path:polygon(14% 44%,0 59%,40% 100%,100% 18%,84% 5%,39% 70%)}
.ocx-tab-visual{min-height:255px;border-radius:var(--r);background-size:cover;background-position:center;position:relative;overflow:hidden}.ocx-tab-visual::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(235,6,1,.2),rgba(30,33,36,.74))}.ocx-tab-badge{position:absolute;left:18px;bottom:18px;z-index:1;background:#fff;color:var(--coal);padding:7px 11px;font-weight:900;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}

/* Before/after */
.ocx-compare{display:grid;grid-template-columns:1.35fr .65fr;gap:28px;align-items:center}
.ocx-compare-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh);--pos:52%;background:#dde1e3}
.ocx-before,.ocx-after{position:absolute;inset:0}
.ocx-before{background-color:#eef1f2;background-image:linear-gradient(rgba(69,85,96,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(69,85,96,.1) 1px,transparent 1px);background-size:26px 26px;display:grid;place-items:center;color:var(--coal)}
.ocx-plan{width:72%;height:65%;border:3px solid var(--steel);position:relative;background:rgba(255,255,255,.78)}.ocx-plan::before,.ocx-plan::after{content:"";position:absolute;background:var(--red)}.ocx-plan::before{width:58%;height:3px;left:18%;top:34%;transform:rotate(-24deg)}.ocx-plan::after{width:3px;height:65%;left:62%;top:12%}.ocx-plan span{position:absolute;left:8%;bottom:8%;font-size:.6875rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.ocx-after{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}.ocx-after img{width:100%;height:100%;object-fit:cover}.ocx-compare-line{position:absolute;top:0;bottom:0;left:var(--pos);width:4px;background:#fff;transform:translateX(-2px);box-shadow:0 0 0 1px rgba(0,0,0,.22)}.ocx-compare-handle{position:absolute;left:var(--pos);top:50%;transform:translate(-50%,-50%);width:52px;height:52px;background:var(--red);color:#fff;border-radius:50%;display:grid;place-items:center;font-weight:900;box-shadow:var(--sh)}
.ocx-compare-label{position:absolute;top:15px;z-index:2;background:rgba(39,42,45,.86);color:#fff;padding:5px 10px;font-size:.625rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.ocx-compare-label.before{left:15px}.ocx-compare-label.after{right:15px}.ocx-compare-range{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0}.ocx-compare-copy h3{font-size:1.55rem}.ocx-compare-copy p{color:var(--muted);text-transform:none}.ocx-compare-value{display:inline-flex;background:var(--red);color:#fff;padding:7px 11px;font-size:.6875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}

/* Related pages */
/* ===== column counts come from the block, not from here =============
   Seven grids hardcoded their column count, so a block with fewer items than
   columns sat in the left part of the row under a centred heading - two
   related-page cards in the left two thirds, three stats in the left three
   quarters. Each partial now emits its own count and these read it, with the
   old number as the fallback so an un-migrated block renders exactly as before.

   .gal is the notable one: _gallery has ALWAYS emitted --gal-cols from the
   author's Columns setting, and this rule never read it. That control has been
   in the editor doing nothing.

   .ocx-cards is deliberately NOT in the list - 1.15fr .85fr .85fr is Sol's
   asymmetric service-tile layout with a wider first card, not a repeat().

   The breakpoints below still override everything here, so a narrow screen is
   unchanged. ================================================================ */
.ocx-related{display:grid;grid-template-columns:repeat(var(--rel-cols,3),1fr);gap:18px}
.ocx-related-card{position:relative;min-height:245px;overflow:hidden;border-radius:var(--r);box-shadow:var(--sh-sm);display:flex;align-items:flex-end;text-decoration:none;isolation:isolate;transition:transform .22s,box-shadow .25s}.ocx-related-card:hover{transform:translateY(-6px);box-shadow:var(--sh)}
.ocx-related-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;transition:transform .55s}.ocx-related-card:hover img{transform:scale(1.06)}.ocx-related-card::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(25,28,30,.1),rgba(25,28,30,.93));z-index:1}.ocx-related-card::after{content:"";position:absolute;left:0;right:0;top:0;height:9px;background:var(--hz);z-index:2}.ocx-related-body{position:relative;z-index:3;padding:24px;color:#fff;width:100%}.ocx-related-body h3{color:#fff;font-size:1.15rem}.ocx-related-body p{font-size:.8125rem;color:#e4e7e9;text-transform:none}.ocx-related-go{display:flex;justify-content:space-between;align-items:center;font-weight:900;font-size:.6875rem;letter-spacing:.09em;text-transform:uppercase;color:#fff}.ocx-related-go b{font-size:1.3rem;color:var(--red)}

html[data-theme="dark"] .ocx-intro{background:linear-gradient(145deg,#292e32,#22272a)}
html[data-theme="dark"] .ocx-chip,html[data-theme="dark"] .ocx-person,html[data-theme="dark"] .ocx-package,html[data-theme="dark"] .ocx-logo,html[data-theme="dark"] .ocx-hours-card,html[data-theme="dark"] .ocx-tabs{background:var(--card)}
html[data-theme="dark"] .ocx-hours-row{border-top-color:#3a4145}
html[data-theme="dark"] .ocx-before{background-color:#2c3236;background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px)}
html[data-theme="dark"] .ocx-plan{background:rgba(34,39,42,.88);border-color:#d4dade}

@media(max-width:1000px){.ocx-cards{grid-template-columns:1fr 1fr}.ocx-card:first-child{grid-column:1/-1}.ocx-people{grid-template-columns:1fr 1fr}.ocx-logos{grid-template-columns:repeat(3,1fr)}.ocx-packages{grid-template-columns:1fr}.ocx-package.featured{transform:none}.ocx-compare{grid-template-columns:1fr}.ocx-related{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.ocx-cards,.ocx-people,.ocx-hours,.ocx-related{grid-template-columns:1fr}.ocx-card:first-child{grid-column:auto}.ocx-logos{grid-template-columns:1fr 1fr}.ocx-announcement{grid-template-columns:auto 1fr}.ocx-ann-meta,.ocx-ann-close{grid-column:2}.ocx-tablist{grid-template-columns:1fr}.ocx-tab-layout{grid-template-columns:1fr}.ocx-tab-visual{min-height:210px}}
@media(max-width:460px){.ocx-logos{grid-template-columns:1fr}.ocx-announcement{padding:20px}.oc-tabpanel{padding:22px}}

/* ===== conversion amendments (audit) ===== */
:root{--muted-strong:#5e686f}                       /* 4.6:1 on --bg for readable muted body text */
.ftr-h,.mega-h{display:block;font-weight:800;font-size:0.8125rem;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 12px}
.mega-h{color:var(--coal)}
a:focus-visible,button:focus-visible,[role=tab]:focus-visible{outline:3px solid var(--red);outline-offset:2px;border-radius:3px}
/* hero as real images: first eager, the rest arrive lazily as the rotation needs them */
.hero-slides .hs{background:none}
.hero-slides .hs>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Ken Burns rides the photo, not the slide - the slide div owns the crossfade.
   The RESTING state is the zoom's END state, so when a photo stops being current
   it holds where the zoom got to and eases the last fraction instead of snapping
   back to full size halfway through the fade. The incoming photo restarts from
   scale(1) while it is still fully transparent, so that reset is never seen. */
@media(prefers-reduced-motion:no-preference){
  .hero-slides .hs>img{transform:scale(1.06);transition:transform 1.6s ease}
  .hero-slides .hs.on>img,.hero-slides .hs.is-on>img{animation:kb 9s ease-out forwards}
}
.hero-ctl{position:absolute;right:18px;bottom:16px;z-index:5;display:flex;gap:8px;align-items:center}
.hero-pause{width:40px;height:40px;border-radius:50%;border:2px solid rgba(255,255,255,.75);background:rgba(50,50,54,.45);color:#fff;cursor:pointer;display:grid;place-items:center}
.hero-pause:hover{background:rgba(50,50,54,.7)}

/* The active state paints the DOT, not the button. Since the button became
   24x24 for SC 2.5.8 it is a square box, so a background on it drew a red
   square around the chosen dot. */
.hero-dots button[aria-current=true]::before{background:var(--red);border-color:#fff}
@media(prefers-reduced-motion:reduce){.hero-slides .hs{transition:none}}


/* layout-binding additions (classes the razor layout introduces) */

.logo-text{font-weight:900;font-size:1.3rem;color:var(--coal);text-transform:uppercase;letter-spacing:.02em}

.bar-cta{display:inline-flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;line-height:1.15;padding:10px 18px;white-space:nowrap;min-width:max-content}

.bar-cta small{font-weight:700;font-size:.72rem;opacity:.92;text-transform:none;flex-basis:100%;text-align:center;margin-top:-2px}

.ftr-logo-text{font-weight:900;font-size:1.2rem;color:#fff;text-transform:uppercase}

.ftr-legal{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;border-top:1px solid rgba(255,255,255,.14);margin-top:26px;padding-top:16px;font-size:.8rem;color:var(--lighter)}

.ftr-legal a{color:#fff}
/* ===== a RUN of text sections is one piece of prose ========================
   .blk is padding:74px 0, which is right when two DIFFERENT kinds of band meet.
   Stack several RichText blocks - a legal page, a long article - and every join
   gets 74px above plus 74px below, 148px of empty grey between one paragraph
   and the next heading.

   So: inside a run, the join closes up. The first section keeps its full top
   padding and the last keeps its full bottom padding, so the run still sits
   properly against whatever comes before and after it.

   WRITTEN AGAINST THE WRAPPERS, NOT THE SECTIONS. Microsite.cshtml wraps every
   block in its own div, so two <section class="blk"> elements are never siblings
   and ".blk + .blk" can never match - which is why the first attempt at this did
   nothing at all. The wrapper carries ms-b-{type}, so adjacency is expressed
   there and the section is reached with ">".

   The :has() rule is the nicety, not the fix - without it the join is still
   only 74px rather than 148px, so an older browser degrades to better-than-now
   rather than to broken. ===================================================== */
/* ===== body copy contrast =================================================
   .lede is the body text of every prose section, and it used var(--muted) -
   #8a949b on the #ebebeb page background, which is 2.6:1. AA wants 4.5:1.

   --muted-strong existed already, added during the accessibility pass with the
   comment "4.6:1 on --bg", and was used by three rules while forty used --muted.
   The token was only ever declared in :root, though, which is why switching to
   it was not safe on its own - so it is now declared in all three scopes:
   light, high-contrast (darker still) and dark (lighter, for a dark ground).

   Scoped to .blk so the heroes keep their own treatment, and :not(.coalband)
   so text on a dark band stays light. ===================================== */
.blk:not(.coalband) .lede{color:var(--muted-strong)}

.ms-b-richtext + .ms-b-richtext > .oc-rich{padding-top:0}
.ms-b-richtext:has(+ .ms-b-richtext) > .oc-rich{padding-bottom:38px}
/* The strapline under the footer logo. The brand cell is a bare div, not a
   .ftr-col, so it gets none of that column's type - this is its own rule. */
.ftr-tag{margin:0;font-size:.875rem;line-height:1.55;color:var(--lighter);text-transform:none;font-weight:400;max-width:34ch}
/* Legal links in the bottom bar, beside the copyright. */
.ftr-legal-links{display:flex;gap:16px;flex-wrap:wrap}
.ftr-legal-links a{text-decoration:none}
.ftr-legal-links a:hover{text-decoration:underline}



/* a11y helper: exposed to screen readers, invisible on screen (marquee + stats) */

.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

@media(prefers-reduced-motion:reduce){.ticker .run{animation:none!important;transform:none!important}}



/* service tiles: photo as a real <img> behind the wash (was background-image) */

/* svc photo tiles: the photo is a real <img> (R1-03) slipped UNDER
   Sol's own stacking - img at z 0, his ::before multiply tint at 1, .inner
   at 3, the hazard ::after strip at 4 and the .go arrow at 5 (isolation is
   on .svc.photo). Nothing else overridden: his flex bottom-alignment,
   top-right arrow and hazard strips all apply as designed. */
.svc.photo .svc-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}

/* MediaText with a real photo rather than the medal */

.fors .fors-media{flex:0 0 auto;width:min(280px,38%)}

.fors .fors-media img{width:100%;height:auto;border-radius:var(--r);display:block}

.fors.reverse .fors-media{order:3}

@media(max-width:820px){.fors .fors-media{width:100%}.fors.reverse .fors-media{order:0}}



/* ---- blocks added in drop 5: styles Sol's concept implied but never needed

        because his pages hard-coded them ---- */

.checkgrid { list-style: none; padding: 0; margin: 0; }


.check .ck { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--red); color: #fff; display: grid; place-items: center; }

.check .ck .ic { width: 15px; height: 15px; }

.check b { display: block; }

.check .ck-body { display: block; font-weight: 400; text-transform: none; color: var(--muted-strong); margin-top: 2px; }

.steps { list-style: none; padding: 0; margin: 0; }

.step .when { display: block; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--red); margin-bottom: 6px; }

.step.hot { border-color: var(--red); }

.dlist { display: flex; flex-direction: column; gap: 12px; }
/* .dlx and .di are Sol's own classes (the dashed row, and the 54px icon square
   inside it) - left exactly as he wrote them. Only the two spans my markup adds
   are styled here. */
.dlx .di-txt { flex: 1; min-width: 0; }
.dlx .di-kind { flex: 0 0 auto; font-size: .72rem; font-weight: 900; letter-spacing: .06em; color: var(--steel); background: var(--panel); border-radius: 50rem; padding: 6px 12px; }

.tblwrap:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }

.spectbl { width: 100%; border-collapse: collapse; background: var(--card); }

.spectbl th, .spectbl td { padding: 12px 15px; border-bottom: 1px solid var(--line); text-align: left; }

.spectbl thead th { background: var(--coal); color: #fff; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; }

.spectbl tbody th { width: 38%; font-weight: 800; color: var(--coal); }

.spectbl td { color: var(--muted-strong); text-transform: none; }

.spectbl.striped tbody tr:nth-child(even) { background: var(--panel); }

.spectbl tr.hot { background: rgba(235,6,1,.06); }

.gal figure { margin: 0; }

.gtile.wide { grid-column: span 2; }

.gtile figcaption { padding: 9px 12px; font-size: .82rem; color: var(--muted-strong); background: var(--card); text-transform: none; }

@media (max-width: 820px) { .gal { grid-template-columns: repeat(2, 1fr); } .gtile.wide { grid-column: span 2; } }

@media (max-width: 520px) { .gal { grid-template-columns: 1fr; } .checkgrid { grid-template-columns: 1fr; } }


/* ============ subpage layer v1.1 - cloned verbatim from Sol's page CSS
   (bronzeshield-crane-fleet.html v1.0). Shared by every sg-* subpage:
   breadcrumb, banner hero, split, ticks, faq, downloads, courses, events,
   contact, review - plus the fleetx crane filter. Do not restyle: any
   change here must come from a Sol page. ============ */
.sg-crumb{background:#fff;border-bottom:1px solid var(--line)}
.sg-crumb .wrap{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px;font-size:.7188rem;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted)}
.sg-crumb a{color:var(--muted)}
.sg-crumb a:hover{color:var(--red)}
.sg-crumb .sep{color:var(--lighter)}
.sg-crumb .cur{color:var(--coal)}
html[data-theme="dark"] .sg-crumb{background:#272c30}
.sg-hero{position:relative;overflow:hidden;color:#fff;background:#30383e;isolation:isolate}
.sg-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-3}
.sg-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(95deg,rgba(28,32,35,.96),rgba(35,42,47,.78) 55%,rgba(35,42,47,.28));z-index:-2}
.sg-hero::after{content:"";position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--hz);z-index:-1}
.sg-hero .wrap{padding-top:68px;padding-bottom:72px}
.sg-hero h1{color:#fff;font-size:clamp(2rem,4.7vw,3.45rem);max-width:880px;margin:16px 0}
.sg-hero .lede{color:#e1e6e8;max-width:730px}
.sg-hero .acts{display:flex;gap:14px;flex-wrap:wrap;margin-top:25px}
.sg-hero .meta{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px}
.sg-hero .meta span{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:6px 10px;font-size:.6875rem;font-weight:900;letter-spacing:.08em;text-transform:uppercase}
.sg-split{display:grid;grid-template-columns:1fr 1fr;gap:42px;align-items:center}
.sg-split.reverse .sg-media{order:2}
.sg-media{position:relative}
.sg-media img{width:100%;min-height:360px;max-height:500px;object-fit:cover;border-radius:var(--r);box-shadow:var(--sh)}
.sg-media::after{content:"";position:absolute;left:-10px;top:18px;bottom:18px;width:10px;background:var(--hz)}
.sg-copy h2{font-size:clamp(1.65rem,3vw,2.35rem)}
.sg-copy p{color:var(--muted);text-transform:none}
.sg-kicker{font-weight:900;text-transform:uppercase;letter-spacing:.12em;font-size:.7188rem;color:var(--red);margin-bottom:10px}
.sg-icons{display:grid;grid-template-columns:repeat(var(--icon-cols,4),1fr);gap:17px}
.sg-icon{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:25px;border-top:7px solid var(--red)}
.sg-icon:nth-child(even){border-top-color:var(--coal)}
.sg-icon .mark{width:44px;height:44px;background:var(--coal-surface);color:#fff;display:grid;place-items:center;font-weight:900;margin-bottom:14px}
.sg-icon h3{font-size:1rem}
.sg-icon p{color:var(--muted);font-size:.8438rem;margin:0;text-transform:none}
html[data-theme="dark"] .sg-icon{background:var(--card)}
.sg-ticks{list-style:none;padding:0;margin:20px 0;display:grid;gap:9px}
.sg-ticks li{position:relative;padding-left:28px}
.sg-ticks li::before{content:"";position:absolute;left:0;top:7px;width:16px;height:16px;background:var(--red);clip-path:polygon(14% 44%,0 59%,40% 100%,100% 18%,84% 5%,39% 70%)}
.fleetx-shell{background:#fff;border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}
.fleetx-toolbar{padding:26px;border-top:9px solid var(--red);display:grid;gap:20px}
.fleetx-types{display:flex;gap:8px;flex-wrap:wrap}
.fleetx-filter{border:2px solid var(--line);background:#fff;color:var(--coal);font:inherit;font-size:.7188rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;padding:9px 13px;cursor:pointer;border-radius:var(--r)}
.fleetx-filter:hover{border-color:var(--red);color:var(--red)}
.fleetx-filter[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}
.fleetx-cap{display:grid;grid-template-columns:1fr auto;gap:22px;align-items:end}
.fleetx-cap label{display:block;color:var(--coal);font-weight:900;text-transform:uppercase;letter-spacing:.08em;font-size:.7188rem;margin-bottom:9px}
.fleetx-cap input{width:100%;accent-color:var(--red)}
.fleetx-readout{min-width:132px;background:var(--coal-surface);color:#fff;padding:13px 16px;text-align:center}
.fleetx-readout b{display:block;font-size:1.55rem;line-height:1}
.fleetx-readout small{font-size:.625rem;text-transform:uppercase;letter-spacing:.08em}
.fleetx-status{font-size:.8438rem;font-weight:800;color:var(--muted)}
.fleetx-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-top:1px solid var(--line)}
.fleetx-card{background:#fff;padding:22px;display:flex;flex-direction:column;min-height:230px;position:relative;overflow:hidden;text-decoration:none}
.fleetx-card::before{content:"";position:absolute;top:0;left:0;right:0;height:7px;background:var(--hzg)}
.fleetx-card[data-kind="tower"]::before,.fleetx-card[data-kind="specialist"]::before{background:var(--hz)}
.fleetx-card:hover{background:#fff8f8}
.fleetx-card[hidden]{display:none}
.fleetx-tonnes{font-size:2.2rem;font-weight:900;color:var(--red);line-height:1}
.fleetx-tonnes small{font-size:.45em}
.fleetx-card h3{font-size:.95rem;margin:10px 0 4px;text-transform:none}
.fleetx-card .kind{font-size:.625rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.fleetx-card .facts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:17px}
.fleetx-card .facts span{background:var(--panel);color:var(--coal);padding:4px 7px;font-size:.625rem;font-weight:900;text-transform:uppercase}
.fleetx-card .go{margin-top:13px;color:var(--red);font-weight:900;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
html[data-theme="dark"] .fleetx-shell,html[data-theme="dark"] .fleetx-card{background:var(--card)}
html[data-theme="dark"] .fleetx-toolbar{background:var(--card)}
html[data-theme="dark"] .fleetx-filter{background:var(--card);color:var(--coal);border-color:#41494e}
html[data-theme="dark"] .fleetx-card:hover{background:#31383c}
.sg-download-stack{display:grid;gap:12px}
.sg-download-note{background:var(--panel);border-left:7px solid var(--red);padding:18px 20px;font-size:.875rem;color:var(--steel)}
.sg-download-note b{color:var(--coal)}
.sg-docmeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px}
.sg-docmeta span{font-size:.625rem;font-weight:900;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);padding:3px 7px}
.sg-courses{display:grid;grid-template-columns:repeat(var(--course-cols,2),1fr);gap:20px}
.sg-course{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;display:grid;grid-template-columns:180px 1fr}
.sg-course-media{background-size:cover;background-position:center;min-height:240px;position:relative}
.sg-course-media::after{content:"";position:absolute;inset:0;background:linear-gradient(145deg,rgba(235,6,1,.18),rgba(32,36,39,.48))}
.sg-course-body{padding:25px;display:flex;flex-direction:column}
.sg-course-body h3{font-size:1.12rem}
.sg-course-body p{color:var(--muted);font-size:.875rem;text-transform:none}
.sg-course-meta{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}
.sg-course-meta span{background:var(--panel);font-size:.625rem;font-weight:900;text-transform:uppercase;letter-spacing:.07em;padding:5px 8px;color:var(--coal)}
.sg-course-body .link{margin-top:auto;font-weight:900;font-size:.7188rem;letter-spacing:.08em;text-transform:uppercase}
.sg-events{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.sg-event{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);padding:24px;border-left:8px solid var(--red);display:flex;flex-direction:column}
.sg-event .date{font-weight:900;color:var(--red);font-size:1.3rem;line-height:1.1}
.sg-event .date small{display:block;font-size:.625rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-top:5px}
.sg-event h3{font-size:1rem;margin-top:16px}
.sg-event p{font-size:.8438rem;color:var(--muted);text-transform:none}
.sg-event .btn{margin-top:auto;justify-content:center}
html[data-theme="dark"] .sg-course,html[data-theme="dark"] .sg-event{background:var(--card)}
.sg-contact-grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:26px;align-items:start}
.sg-contact-card{background:var(--coal-surface);color:#d7dcdf;border-radius:var(--r);box-shadow:var(--sh);padding:30px;border-top:9px solid var(--red)}
.sg-contact-card h2,.sg-contact-card h3{color:#fff}
.sg-contact-card a{color:#fff}
.sg-contact-row{padding:13px 0;border-top:1px solid rgba(255,255,255,.13)}
.sg-contact-row:first-of-type{border-top:0}
.sg-contact-row b{display:block;color:#fff;text-transform:uppercase;font-size:.6875rem;letter-spacing:.09em}
.sg-contact-row span{display:block;text-transform:none;margin-top:3px}
.sg-map-note{font-size:.75rem;color:var(--muted);margin-top:11px}
.sg-faq{max-width:880px;margin:0 auto;display:grid;gap:10px}
.sg-faq details{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-sm)}
.sg-faq summary{cursor:pointer;padding:17px 20px;font-weight:900;color:var(--coal);text-transform:uppercase;font-size:.8438rem;letter-spacing:.03em}
.sg-faq details p{padding:0 20px 18px;color:var(--muted);text-transform:none;margin:0}
html[data-theme="dark"] .sg-faq details{background:var(--card)}
.sg-review{background:#fff4d8;border-left:7px solid #d99a00;padding:17px 19px;color:#58410a;font-size:.8438rem}
.sg-review b{display:block;text-transform:uppercase;letter-spacing:.08em;font-size:.6875rem;margin-bottom:4px}
.ocx-tablist.sg-tabs-4{grid-template-columns:repeat(4,1fr)}
.ocx-tablist.sg-tabs-5{grid-template-columns:repeat(5,1fr)}
/* conversion amendments (R1-03 pattern): the banner photo is a real <img>
   inside .sg-hero-bg, and Sol's inline margin-top:14px on every centered
   h2 after an eyebrow becomes one rule so partials stay clean. */
.sg-hero-bg img{width:100%;height:100%;object-fit:cover;display:block}
.center .eyebrow+.tt,.center .eyebrow+h1,.center .eyebrow+h2{margin-top:14px}
/* The renderer's block anchors (span.ms-nav-anchor) and the finder's own
   #fleet-list land clear of the sticky bar. */
.ms-nav-anchor{display:block;height:0;scroll-margin-top:96px}
.blk[id]{scroll-margin-top:96px}
@media(max-width:1080px){.sg-icons{grid-template-columns:1fr 1fr}.fleetx-grid{grid-template-columns:repeat(3,1fr)}.sg-courses{grid-template-columns:1fr}.sg-events{grid-template-columns:1fr 1fr}}
@media(max-width:820px){.sg-split,.sg-contact-grid{grid-template-columns:1fr}.sg-split.reverse .sg-media{order:0}.fleetx-cap{grid-template-columns:1fr}.fleetx-readout{justify-self:start}.fleetx-grid{grid-template-columns:1fr 1fr}.sg-course{grid-template-columns:145px 1fr}}
@media(max-width:620px){.sg-icons,.fleetx-grid,.sg-events{grid-template-columns:1fr}.sg-course{grid-template-columns:1fr}.sg-course-media{min-height:210px}.sg-hero .wrap{padding-top:52px;padding-bottom:56px}}
@media(max-width:900px){.ocx-tablist.sg-tabs-4{grid-template-columns:repeat(2,1fr)}.ocx-tablist.sg-tabs-5{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.ocx-tablist.sg-tabs-4,.ocx-tablist.sg-tabs-5{grid-template-columns:1fr}}
/* contact-page additions v1.4 - verbatim from bronzeshield-contact.html v1.0
   (ocx tab styling + the small no-answer note). */
.ocx-no{display:inline-grid;place-items:center;min-width:46px;height:31px;padding:0 12px;background:var(--coal-surface);color:#fff;font-weight:900;font-size:.6875rem;letter-spacing:.1em;margin-bottom:12px;clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}
.ocx-tab{border:0;background:transparent;color:#d7dbdd;padding:15px 18px;font:inherit;font-weight:900;font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border-radius:var(--r)}
.ocx-tab:hover{background:rgba(255,255,255,.08);color:#fff}
.ocx-tab[aria-selected="true"]{background:var(--red);color:#fff}
.ocx-tabpanel{padding:32px}
/* contact form plumbing v1.5 - classes the form partial emits that Sol's
   sheets never styled (his concept form was static). The honeypot must be
   hidden off-screen or humans see a "Website" field and bots are the least
   of the problems; the ok/error banners follow the princess treatment in
   Bronzeshield colours. */
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.cok{background:#e8f6ee;border:1px solid #bfe3cf;color:#1d6b40;border-radius:var(--r);padding:16px 18px;font-weight:700}
.cerr{background:#fdecec;border:1px solid #f3c1c0;color:var(--red2);border-radius:var(--r);padding:14px 18px;font-weight:700;margin-bottom:16px}
/* ============ crane detail layer v1.6 - cloned verbatim from Sol's
   bronzeshield-crane-detail.html v1.2: masthead, gallery, key figures,
   spec table + download row, reach bars, faq accordion and the related
   crane cards. Includes his .spectbl/.faq bodies so the detail sheet wins
   the cascade over the earlier generic table styles. His .crumb rules are
   not carried - the layout's sg-crumb breadcrumb serves every page. */
html[data-theme="dark"] .crumb{background:#272c30}
.dmast{position:relative;overflow:hidden;color:#fff;background:radial-gradient(95% 130% at 72% 12%,#55636e 0%,#39444c 55%,#2c343a 100%)}
.dmast .hzedge{position:absolute;left:0;top:0;bottom:0;width:14px;background:var(--hz);z-index:4}
.dmast .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center;padding-top:52px;padding-bottom:56px}
.dmast .capchip{display:inline-flex;align-items:baseline;gap:3px;background:var(--red);color:#fff;font-weight:900;padding:6px 15px;font-size:1.5rem;line-height:1;transform:skewX(-6deg)}
.dmast .capchip>span{display:inline-block;transform:skewX(6deg)}
.dmast .capchip small{font-size:.55em;font-weight:800}
.dmast h1{color:#fff;font-size:clamp(1.9rem,4.4vw,3.1rem);margin:16px 0 6px;line-height:1.03}
.dmast .sub{color:#dfe5e8;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:0.9062rem}
.dmast .mdesc{color:#cfd6da;text-transform:none;font-weight:400;max-width:520px;margin:16px 0 24px}
.dmast .acts{display:flex;gap:14px;flex-wrap:wrap}
.mfig{position:relative;z-index:2}
.mfig img{width:100%;border-radius:var(--r);box-shadow:var(--sh);aspect-ratio:4/3;object-fit:cover;background:#222}
.mfig .mcap{position:absolute;left:14px;bottom:14px;background:rgba(20,22,24,.72);color:#fff;font-weight:700;font-size:0.7188rem;letter-spacing:.04em;padding:6px 11px;border-radius:3px;text-transform:uppercase}
@media(prefers-reduced-motion:no-preference){
  .dmast .eyebrow,.dmast .capchip{animation:rise .6s ease .1s both}
  .dmast h1,.dmast .sub{animation:rise .7s ease .22s both}
  .dmast .mdesc{animation:rise .7s ease .34s both}
  .dmast .acts{animation:rise .7s ease .46s both}
}
@media(max-width:960px){
  .dmast .wrap{grid-template-columns:1fr;gap:26px}
  .mfig{order:-1}
}
.two{display:grid;grid-template-columns:1.05fr .95fr;gap:46px;align-items:start}
@media(max-width:960px){
  .two{grid-template-columns:1fr;gap:34px}
}
.dhead{margin-bottom:22px}
.gal .gmain{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);aspect-ratio:16/10;background:#222}
.gal .gmain img{width:100%;height:100%;object-fit:cover}
.gthumbs{display:grid;grid-template-columns:repeat(var(--gal-cols,4),1fr);gap:12px;margin-top:12px}
.gthumbs button{padding:0;border:3px solid transparent;border-radius:var(--r);overflow:hidden;cursor:pointer;background:none;aspect-ratio:4/3;transition:border-color .18s}
.gthumbs button:hover{border-color:var(--lighter)}
.gthumbs img{width:100%;height:100%;object-fit:cover}
.gthumbs button[aria-current="true"]{border-color:var(--red)}
.kfigs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.kfig{background:var(--panel);border-radius:var(--r);padding:18px 20px;border-left:6px solid var(--red)}
.kfig:nth-child(even){border-left-color:var(--coal)}
.kfig .kn{font-weight:900;font-size:2rem;color:var(--coal);line-height:1}
.kfig .kn small{font-size:.5em;color:var(--red);font-weight:800}
.kfig .kl{font-weight:700;font-size:0.7188rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-top:6px}
html[data-theme="dark"] .kfig{background:#272c30}
.spectbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-sm)}
.spectbl tbody tr{border-bottom:1px solid var(--line)}
.spectbl tbody tr:last-child{border-bottom:0}
.spectbl th{text-align:left;font-weight:700;color:var(--steel);padding:13px 20px;width:54%;font-size:0.9062rem;background:#fafafa;text-transform:none;letter-spacing:0}
.spectbl td{padding:13px 20px;font-weight:800;color:var(--coal);font-size:0.9375rem}
html[data-theme="dark"] .spectbl{background:var(--card)}
html[data-theme="dark"] .spectbl th{background:#31383c;color:var(--steel)}
.specnote{font-size:0.7812rem;color:var(--muted);margin:14px 0 0;text-transform:none}
.feats{list-style:none;margin:0;padding:0;columns:2;column-gap:36px}
.feats li{padding:9px 0 9px 32px;position:relative;break-inside:avoid;border-bottom:1px solid var(--line);font-size:0.9375rem;text-transform:none;color:var(--steel)}
.feats li::before{content:"";position:absolute;left:0;top:12px;width:18px;height:18px;background:var(--red);clip-path:polygon(14% 44%,0 59%,40% 100%,100% 18%,84% 5%,39% 70%)}
@media(max-width:640px){
  .feats{columns:1}
}
.dreach{background:#fff;border-radius:var(--r);box-shadow:var(--sh);padding:30px 34px;position:relative;overflow:hidden}
.dreach::before{content:"";position:absolute;top:0;left:0;right:0;height:8px;background:var(--hzg)}
html[data-theme="dark"] .dreach{background:var(--card)}
.rbars{display:grid;gap:18px;margin-top:8px}
.rbar{display:grid;grid-template-columns:168px 1fr auto;align-items:center;gap:16px}
.rbar .rl{font-weight:800;font-size:0.8125rem;text-transform:uppercase;letter-spacing:.03em;color:var(--coal)}
.rtrack{height:22px;background:linear-gradient(#f2f4f5,#e7ebee);border-radius:4px;overflow:hidden}
html[data-theme="dark"] .rtrack{background:#31383c}
.rtrack i{display:block;height:100%;width:0;background:var(--hz);border-radius:4px;transition:width 1.1s cubic-bezier(.22,.9,.3,1)}
.rbar:nth-child(even) .rtrack i{background:var(--hzg)}
.rbar.in .rtrack i{width:var(--w)}
.rbar .rv2{font-weight:900;color:var(--red);font-size:0.9375rem;white-space:nowrap}
@media(prefers-reduced-motion:reduce){
  .rtrack i{transition:none;width:var(--w)}
}
@media(max-width:640px){
  .rbar{grid-template-columns:1fr auto;gap:8px}
  .rbar .rl{grid-column:1/-1}
}
.faq{max-width:840px;margin:0 auto}
.fq{background:#fff;border-radius:var(--r);box-shadow:var(--sh-sm);margin-bottom:12px;overflow:hidden}
html[data-theme="dark"] .fq{background:var(--card)}
.fq-q{width:100%;text-align:left;border:0;background:none;cursor:pointer;padding:18px 22px;font-weight:800;font-family:inherit;color:var(--coal);font-size:1rem;display:flex;justify-content:space-between;align-items:center;gap:16px;transition:background .18s}
.fq-q:hover{background:var(--panel)}
.fq-ic{flex:0 0 auto;width:22px;height:22px;color:var(--red);transition:transform .25s}
.fq-q[aria-expanded="true"] .fq-ic{transform:rotate(45deg)}
.fq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
@media(prefers-reduced-motion:reduce){
  .fq-a{transition:none}
}
.fq-inner{padding:0 22px 20px}
.fq-inner p{color:var(--muted);text-transform:none;margin:0}
.related{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.related .crane{flex:0 1 224px;max-width:250px}
@media(max-width:640px){
  .related .crane{flex-basis:150px}
}
.specdl{display:flex;align-items:center;gap:18px;background:var(--panel);border-radius:var(--r);padding:20px 22px;margin-top:18px;border-left:6px solid var(--red)}
html[data-theme="dark"] .specdl{background:#272c30}
.specdl .sdi{flex:0 0 auto;width:46px;height:46px;border-radius:var(--r);background:var(--red);color:#fff;display:grid;place-items:center}
.specdl .sdi svg{width:26px;height:26px}
.specdl .sdt{flex:1;min-width:0}
.specdl .sdt strong{display:block;color:var(--coal);font-size:0.9688rem;text-transform:none}
.specdl .sdt span{display:block;color:var(--muted);font-size:0.8125rem;text-transform:none}
.specdl .btn{flex:0 0 auto}
@media(max-width:560px){
  .specdl{flex-wrap:wrap}
  .specdl .btn{width:100%;justify-content:center}
}
/* ============ service pages layer v1.7 - cloned verbatim from Sol's
   bronzeshield-crane-hire / downloads / training / training-course v1.0:
   the announcement band, ocx card and related-card grids, his tab layouts
   with visual panels, the download stack and doc meta chips, accreditation
   logos, course cards, event cards, the coal step band and the review note.
   Deduplicated across the four sheets; nav and crumb rules are not carried
   (the layout serves those). */
html[data-theme="dark"] .ticker,html[data-theme="dark"] .ctaband .in,html[data-theme="dark"] th,html[data-theme="dark"] .mega h5,html[data-theme="dark"] .crail,html[data-theme="dark"] .step .num{background:#1b1f22}
@media(max-width:460px){
  .ocx-tabpanel{padding:22px}
}

/* ---- 25th Jul round: filter fade, the bigger fleet slider, boom row ---- */

/* KP 25th Jul, second pass: back to Sol's own treatment on BOTH pages - a
   filtered crane FADES but stays put, so the fleet keeps its shape and you
   can still see what sits just outside the filter. Values are his, lifted
   from .crane.dim; the fleet card borrows them. pointer-events:none keeps a
   faded card out of the click and tab order, so what is reachable matches
   what reads as available. */
.fleetx-card,.crane{transition:opacity .18s ease,filter .18s ease}
.fleetx-card.dim{opacity:.22;filter:grayscale(1);pointer-events:none}
@media(prefers-reduced-motion:reduce){.fleetx-card,.crane{transition:none}}

/* The fleet page borrows the homepage capacity control - bigger, easier to grab,
   and the red fill shows the chosen minimum at a glance (JS paints --p). The
   stock range widget it replaces has a thumb barely wider than a hairline. */
.fleetx-cap input[type=range]{-webkit-appearance:none;appearance:none;height:12px;border-radius:99px;background:linear-gradient(90deg,var(--red) var(--p,0%),#e3e3e3 var(--p,0%));outline:none;cursor:pointer;margin:6px 0 2px}
.fleetx-cap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:8px solid var(--red);box-shadow:var(--sh-sm);cursor:pointer}
.fleetx-cap input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:8px solid var(--red);cursor:pointer}
.fleetx-cap input[type=range]:focus-visible{outline:3px solid var(--coal);outline-offset:3px}
html[data-theme="dark"] .fleetx-cap input[type=range]{background:linear-gradient(90deg,var(--red) var(--p,0%),#41494e var(--p,0%))}

/* Boom chart: the bar count drives the columns, so six machines sit on one row
   instead of wrapping a lone bar onto a second. */
@media(max-width:1080px){.boombars{grid-template-columns:repeat(3,1fr)}}

/* ---- blog (25th Jul 2026) -------------------------------------------------
   Sol drew news cards for the homepage but never a blog, so the listing reuses
   his .newsgrid/.newsc wholesale and only the genuinely new pieces are added
   here: the category chip on a card, the post masthead, and the prose block.
   .blog-prose is the one place in the theme where BARE tags get typography -
   an author writing in the CMS editor has no classes to hand, so their h2s,
   lists and quotes have to land styled on their own. */
.newsc .nd{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.newsc .ncat{background:var(--red);color:#fff;padding:3px 9px;font-size:.625rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase}

.blog-head{max-width:760px}
.blog-meta{display:flex;align-items:center;gap:10px;margin-top:14px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.09em;font-size:.7188rem}
.blog-meta .sep{opacity:.5}
.blog-cover{border-radius:var(--r);overflow:hidden;box-shadow:var(--sh)}
.blog-cover img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.blog-cover figcaption{padding:11px 14px;background:var(--card);color:var(--muted);font-size:.8125rem;text-transform:none}

.blog-prose{max-width:760px;margin:0 auto;color:var(--steel)}
.blog-prose > *:first-child{margin-top:0}
.blog-prose h2{font-size:1.75rem;text-transform:uppercase;letter-spacing:-.01em;margin:38px 0 14px;color:var(--coal)}
.blog-prose h3{font-size:1.25rem;text-transform:uppercase;margin:30px 0 12px;color:var(--coal)}
.blog-prose p{margin:0 0 18px;text-transform:none}
.blog-prose ul,.blog-prose ol{margin:0 0 18px;padding-left:22px}
.blog-prose li{margin-bottom:9px;text-transform:none}
.blog-prose a{color:var(--red);font-weight:800;text-decoration:underline;text-underline-offset:3px}
.blog-prose a:hover{color:var(--red2)}
.blog-prose strong,.blog-prose b{font-weight:900;color:var(--coal)}
.blog-prose img{max-width:100%;height:auto;border-radius:var(--r);display:block;margin:26px 0}
.blog-prose blockquote{margin:26px 0;padding:18px 22px;border-left:5px solid var(--red);background:var(--bg);font-size:1.0938rem;text-transform:none}
.blog-prose blockquote p:last-child{margin-bottom:0}
.blog-prose hr{border:0;border-top:1px solid var(--line);margin:34px 0}

html[data-theme="dark"] .blog-prose{color:#cdd9de}
html[data-theme="dark"] .blog-prose h2,html[data-theme="dark"] .blog-prose h3,html[data-theme="dark"] .blog-prose strong{color:#fff}
html[data-theme="dark"] .blog-cover figcaption{background:var(--card)}

/* ---- blog list cards (25th Jul 2026) --------------------------------------
   The listing uses h2 for each card title (it is the page's real content
   heading), but the news-card rules only ever styled h3 - so the title inherited
   the page-level heading and sat flush against the card edge. Same padding as
   the rest of the card, a touch roomier on the blog page where the cards carry
   more text. The h2 keeps its display treatment: it reads well and is doing the
   job of a headline. */
.newsc h2{padding:6px 20px 4px;margin:0;font-size:1.3125rem;line-height:1.2}
.newsc h2 a{color:inherit}
.newsc h2 a:hover{color:var(--red2)}
.ms-page-blog .newsc .nd{padding:18px 26px 0}
.ms-page-blog .newsc h2{padding:10px 26px 6px}
.ms-page-blog .newsc p{padding:0 26px}
.ms-page-blog .newsc .nm{padding:12px 26px 24px}

/* theme.css (bronzeshield) v1.25 - 4th Aug 2026 (the hero carries per-slide COPY,
   not only a per-slide photo. See _hero.cshtml v1.3 for why.

   THE STACK: every slide's copy is a .hero-copy panel and all of them sit in ONE
   grid cell, so .wrap is as tall as the tallest slide and the section never
   changes height as they cycle. .wrap keeps its own padding, so Sol's spacing is
   untouched.

   VISIBILITY, NOT JUST OPACITY: a transparent panel keeps its buttons in the tab
   order, and a keyboard user would tab into invisible CTAs. visibility:hidden
   takes them out of the tab order and out of the accessibility tree, and it is
   transitioned with a delay so it only flips once the fade has finished.

   THE STAGGER re-runs on every change for free: the elements only match these
   selectors while their panel has .is-on, so adding the class starts the
   animation and removing it resets. No reflow trick needed. These are more
   specific than the v1.2 entrance rules above, so they win for the hero; those
   still cover the pagehead header, which has no slides. */

.hero .wrap { display: grid }

.hero-copy {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity .55s ease, visibility 0s linear .55s;
}

.hero-copy.is-on {
  opacity: 1;
  visibility: visible;
  transition: opacity .55s ease, visibility 0s linear 0s;
}

/* Slide 0 is an h1, the rest are <p> - identical to look at. */
.hero .hero-h { color:#fff; font-weight:900; font-size:clamp(2.125rem,5vw,3.875rem); line-height:1.05; max-width:840px; margin:20px 0 }
.hero .hero-h .em { color:#fff; background:var(--red); padding:0 12px; display:inline-block; transform:skewX(-6deg) }
.hero .hero-h .em > span { display:inline-block; transform:skewX(6deg) }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy.is-on .eyebrow { animation: rise .6s ease .10s both }
  .hero-copy.is-on .hero-h  { animation: rise .7s ease .18s both }
  .hero-copy.is-on .lede    { animation: rise .7s ease .30s both }
  .hero-copy.is-on .acts    { animation: rise .7s ease .40s both }
}

/* Reduced motion: the states still change, they just arrive. */
@media (prefers-reduced-motion: reduce) {
  .hero-copy, .hero-copy.is-on { transition: none }
}

/* ==========================================================================
   CRANE TOOLS - lift planner + site access checker      v1.2, 13th Aug 2026
   ---------------------------------------------------------------------------
   v1.2 - THE CONCEPT'S OWN RULES, taken from crane-tools-concept.html and
   scoped under .oc-tool. Earlier versions approximated them from screenshots
   and drifted every time. Where a value looks arbitrary it is the concept's
   value, not a guess: .cs at minmax(58px,1fr), gaps of 26px, .sl label at
   .7188rem/900/.08em, the answer class in RED at 1.75rem rather than in a dark
   chip. If any of it needs changing it changes in the concept first.

   TOKENS: --muted-strong is real (declared in a SECOND :root further up this
   file, added by the accessibility pass because --muted fails 4.5:1 on --bg at
   body sizes). Body copy uses --muted-strong; small uppercase labels use --muted.

   This block sits at the END of the file deliberately - rules in here are
   sometimes duplicated, so equal specificity at the end is the reliable place
   to win.
   ========================================================================== */

/* No top padding: the preceding .blk already carries 74px, and doubling it was
   the "big gap" under the intro. */
.oc-tool { padding: 0 0 74px; }
.oc-tool-h { margin: 6px 0 10px; }
.oc-tool-lede { max-width: 68ch; margin: 0 0 22px; }
.oc-tool-note { margin-top: 18px; font-size: .75rem; color: var(--muted-strong); }

/* A select is clickable and must say so. Site-wide on purpose - every drop-down
   on this site should show a hand, not an arrow. */
select, .oc-tool select { cursor: pointer; }

.oc-tool .warn { background: var(--card); border-left: 9px solid var(--red);
    box-shadow: var(--sh-sm); padding: 18px 22px; margin-bottom: 26px; }
.oc-tool .warn p { margin: 8px 0 0; font-size: .9062rem; color: var(--muted-strong); max-width: 84ch; }
.oc-tool-empty { border-left-color: var(--steel) !important; }
.oc-chart-warnlist { margin: 10px 0 0; padding-left: 18px; font-size: .8438rem; color: var(--muted-strong); }
.oc-chart-warnlist li { margin-bottom: 4px; }

/* ---- sliders: the two sit SIDE BY SIDE, each with its readout to the right ---- */
.oc-tool .sliders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.oc-tool .sliders--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 820px) { .oc-tool .sliders { grid-template-columns: 1fr; } }
.oc-tool .sl { display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.oc-tool .sl-main { min-width: 0; }
.oc-tool .sl label { display: block; color: var(--coal); font-weight: 900; text-transform: uppercase;
    letter-spacing: .08em; font-size: .7188rem; margin-bottom: 11px; }
.oc-tool .sl .hint { display: block; margin-top: 9px; font-size: .75rem; color: var(--muted-strong); font-weight: 600; }
.oc-tool .fleetx-readout small { display: block; opacity: .8; }

/* ---- the answer. The class reads in RED at 1.75rem, right aligned - not a
   dark chip, which is what an earlier version invented. ---- */
.oc-tool .hit { background: var(--card); padding: 18px 22px; display: flex; flex-wrap: wrap; gap: 16px;
    justify-content: space-between; align-items: center; }
.oc-tool .hit h3 { margin: 0; font-size: 1rem; }
.oc-tool .hit .cfg { margin: 5px 0 0; font-size: .75rem; color: var(--muted-strong); text-transform: none; font-weight: 600; }
.oc-tool .hit .at { text-align: right; white-space: nowrap; }
.oc-tool .hit .at b { display: block; font-size: 1.75rem; font-weight: 900; color: var(--red); line-height: 1; }
.oc-tool .hit .at small { font-size: .6875rem; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: var(--muted); }

.oc-tool .card { background: var(--card); box-shadow: var(--sh-sm); border-radius: var(--r); padding: 20px 22px; }
.oc-tool .card svg { width: 100%; height: auto; display: block; margin-top: 10px; }
.oc-tool .card p.sm { font-size: .75rem; color: var(--muted-strong); margin: 12px 0 0; }
.oc-tool .card ul { margin: 10px 0 0; padding-left: 20px; font-size: .8438rem; color: var(--muted-strong); }
.oc-tool .card li { margin-bottom: 5px; }
.oc-tool .cards2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px;
    margin-top: 26px; align-items: start; }
@media (max-width: 820px) { .oc-tool .cards2 { grid-template-columns: 1fr; } }
.oc-tool .cards2 .card { margin-top: 0 !important; }
.oc-tool .lp-unknown { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.oc-tool .lp-over:empty { display: none; }

/* ---- the chart row, read ACROSS the way Aaron's sheet reads ---- */
.oc-tool .cstrip-card { margin-top: 26px; }
.oc-tool .cstrip { display: grid; grid-template-columns: repeat(auto-fit, minmax(58px, 1fr)); gap: 4px; margin-top: 12px; }
.oc-tool .cs { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    padding: 9px 4px; background: var(--panel); border-radius: var(--r); text-align: center; }
.oc-tool .cs b { font-size: .9375rem; font-weight: 900; color: var(--coal); line-height: 1; white-space: nowrap; }
.oc-tool .cs b i { font-style: normal; font-size: .62em; opacity: .6; margin-left: 1px; }
.oc-tool .cs small { font-size: .6875rem; font-weight: 700; color: var(--muted); }
.oc-tool .cs.out b { color: var(--lighter); }
.oc-tool .cs.on { background: var(--red); }
.oc-tool .cs.on b, .oc-tool .cs.on small { color: #fff; }
.oc-tool .cs.on b i { opacity: .75; }

/* ---- machine picker. .mk MUST stay inline-block - setting it to block turned
   the theme's neat tag into a full-width dark bar across every card. ---- */
.picker-head { display: block; margin-bottom: 12px; }
.pickgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(184px, 1fr)); gap: 8px; }
.pickgrid .crane { text-align: left; cursor: pointer; border: 1px solid var(--line); width: 100%; }
.pickgrid .crane .t, .pickgrid .crane .m { display: block; }
.pickgrid .crane .mk { display: inline-block; }
.pickgrid .crane.on { border-color: var(--red); box-shadow: inset 0 0 0 2px var(--red); }
.pickgrid .crane.on:hover { transform: none; }

/* ---- the access summary sheet, the concept's rules ----
   .spectbl IS A TABLE - the theme styles th + td inside tbody. An earlier
   version emitted a <dl> with dt/dd and the whole column rendered unstyled.
   .sheet-body is a TWO-COLUMN GRID: drawing left, figures right. ---- */
.oc-tool .sheet { background: var(--card); box-shadow: var(--sh); border-radius: var(--r);
    overflow: hidden; margin-top: 26px; }
.oc-tool .sheet-head { border-top: 9px solid var(--red); padding: 24px 26px; display: flex;
    flex-wrap: wrap; gap: 18px; justify-content: space-between; align-items: flex-start;
    border-bottom: 1px solid var(--line); }
.oc-tool .sheet-head h2 { margin: 0; font-size: 1.5rem; }
.oc-tool .sheet-head .cls { margin: 4px 0 0; font-size: .8125rem; color: var(--muted-strong);
    text-transform: none; font-weight: 600; }
.oc-tool .sheet-head .head-r { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.oc-tool .capchip { background: var(--coal); color: #fff; padding: 10px 15px; border-radius: var(--r);
    font-weight: 900; font-size: 1.6rem; line-height: 1; white-space: nowrap; }
.oc-tool .capchip small { font-size: .5em; opacity: .75; }
.oc-tool .capchip:not(:has(small)) { font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; padding: 14px 16px; }

.oc-tool .sheet-body { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr); }
@media (max-width: 900px) { .oc-tool .sheet-body { grid-template-columns: 1fr; } }
.oc-tool .sheet-body .plan { padding: 22px 26px; border-right: 1px solid var(--line); background: #fafafa; }
@media (max-width: 900px) { .oc-tool .sheet-body .plan { border-right: 0; border-bottom: 1px solid var(--line); } }
.oc-tool .plan svg { width: 100%; height: auto; display: block; }
/* Sticky must sit on an INNER div - a stretched grid item cannot stick. */
.oc-tool .plan-stick { position: sticky; top: 14px; }
.oc-tool .plan-key { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: .75rem;
    font-weight: 700; color: var(--muted-strong); }
.oc-tool .plan-key span { display: inline-flex; align-items: center; gap: 7px; }
.oc-tool .kline { width: 18px; height: 0; border-top-width: 2px; border-top-style: solid; display: inline-block; }
.oc-tool .k-og { border-color: var(--coal); }
.oc-tool .k-red { border-color: var(--coal); border-top-style: dashed; }
.oc-tool .k-tail { border-color: var(--red); border-top-style: dashed; }

.oc-tool .figs { padding: 22px 26px; }
.oc-tool .figs .eyebrow { display: block; margin-bottom: 12px; }
.oc-tool .figs .grp + .grp { margin-top: 26px; }
/* A blank is a stated answer, in words, and is meant to be noticed - never a
   zero, which a haulier could plan against. */
.oc-tool .blank { color: var(--red-dk); font-weight: 800; font-size: .78rem;
    text-transform: uppercase; letter-spacing: .05em; }
.oc-tool .note { margin-top: 18px; background: var(--panel); border-left: 5px solid var(--red); padding: 14px 16px; }
.oc-tool .note p { margin: 6px 0 0; font-size: .875rem; color: var(--muted-strong); }

.oc-tool .sheet-foot { padding: 22px 26px; border-top: 1px solid var(--line); background: var(--panel); }
.oc-tool .caveat { margin: 0 0 16px; font-size: .8438rem; color: var(--muted-strong); max-width: 80ch; }
.oc-tool .caveat b { color: var(--coal); }
.oc-tool .acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* FOUR BUTTONS, ONE ROW. The access sheet's foot gained a fourth when Download
   as PDF arrived, and at the theme's full button size - 0.875rem, 16px/30px
   padding - four will not fit, so the last one dropped to a line of its own and
   looked like an afterthought rather than a peer.

   The row is tightened rather than the labels shortened: the wording came off
   Sol's signed-off concept and is not ours to trim for a layout problem. Only
   the tool's own foot is affected; .btn everywhere else on the site is untouched.

   It still wraps below 1180px, because four of these on a tablet would be a row
   of unreadable slivers. */
.oc-tool .sheet-foot .acts { flex-wrap: nowrap; gap: 10px; }
.oc-tool .sheet-foot .acts .btn {
    padding: 13px 18px;
    font-size: .8125rem;
    letter-spacing: .05em;
    flex: 0 1 auto;
    min-width: 0;
    justify-content: center;
}
@media (max-width: 1180px) {
    .oc-tool .sheet-foot .acts { flex-wrap: wrap; }
    .oc-tool .sheet-foot .acts .btn { padding: 15px 24px; font-size: .875rem; letter-spacing: .08em; }
}
/* The theme has only .btn, so the secondary treatment is defined here. */
.oc-tool .btn.ghost { background: transparent; color: var(--coal); box-shadow: inset 0 0 0 2px var(--coal); }
.oc-tool .btn.ghost:hover { background: var(--coal); color: #fff; }

@media print {
    .pickgrid, .oc-tool .acts, .oc-tool .lp-over, .picker-head { display: none !important; }
    .oc-tool .plan-stick { position: static; }
    .oc-tool .sheet { box-shadow: none; border: 1px solid #999; page-break-inside: avoid; }
    .oc-tool .sheet-body { grid-template-columns: 1.02fr 1fr; }
    .oc-tool .card, .oc-tool .cstrip-card { box-shadow: none; border: 1px solid #999; }
}

/* ---- Steps: a three-item block must not sit in the left three quarters ----
   The partial emits .grid.g4, so three steps filled three of four columns and
   left a hole on the right. _icongrid already solves this by computing its own
   column count; Steps has no such setting, so the column count is derived from
   the item count here instead. Applies to any Steps block on the site, which is
   the behaviour anyone would expect. */
.steps:has(> li:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.steps:has(> li:only-child) { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1080px) { .steps:has(> li) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .steps:has(> li) { grid-template-columns: minmax(0, 1fr); } }

/* The step's mark row: number, then the optional icon beside it. */
.step .step-mark { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.step .step-mark .num { margin-bottom: 0; }
.step .step-ic { color: var(--red); display: inline-flex; }
.step .step-ic .ic { width: 26px; height: 26px; }
.sg-icon .mark .ic { width: 22px; height: 22px; }

/* ================= PDF EXPORT ==================================
   [data-pdf="1"] is set on <body> by the theme layout when ?pdf=1. Everything here
   describes A DOCUMENT, not a web page: no shadows, no sticky anything, no
   hover affordances, and colours that survive being printed.

   These are ordinary rules rather than @media print because headless Chrome
   renders the SCREEN stylesheet and then prints it - the print media query
   applies to the paper pass, and by then the layout decisions have been made.
   The @media print block further up still stands for someone using Ctrl+P.

   THE SELECTOR MUST MATCH THE VALUE, NOT JUST THE ATTRIBUTE. It was written as
   [data-pdf] on the reasoning that Razor omits an attribute whose value is null,
   so the attribute would simply not be there on an ordinary page. It IS there:
   <body> is a tag helper target, and for those the value goes through the tag
   helper output, where a null renders as data-pdf="" rather than being dropped.
   An empty attribute still satisfies [data-pdf], so every rule below was firing
   on every page and the tool lost its sliders site-wide. */
[data-pdf="1"] { background: #fff; }
[data-pdf="1"] main { padding: 0; }

/* print-color-adjust keeps the brand red and the coal panels. Chrome strips
   backgrounds by default even with PrintBackground on, for anything it decides
   is decorative. */
[data-pdf="1"] * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

/* THE MASTHEAD. It was full-bleed while everything below it sits in .wrap, so
   the logo was clipped at the left edge and the contact details ran off the
   right. It now uses the theme's own container, which is what aligns it with the
   content underneath.

   The contact details are DELIBERATELY LARGE. This document is printed and
   handed to a site manager who has never seen the website; after the answer
   itself, the way back to us is the most useful thing on it. Small grey type at
   the top right is how a phone number goes unread. */
[data-pdf="1"] .pdf-mast { border-bottom: 3px solid var(--red, #eb0601); margin: 0 0 26px; }
[data-pdf="1"] .pdf-mast-in {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 24px; padding: 22px 0 16px;
}
[data-pdf="1"] .pdf-mast-logo { height: 58px; width: auto; display: block; }
[data-pdf="1"] .pdf-mast-name { font-weight: 900; font-size: 1.7rem; color: var(--coal, #323236); }

[data-pdf="1"] .pdf-mast-contact { display: flex; gap: 30px; flex: none; }
[data-pdf="1"] .pdf-mast-contact .pmc { display: flex; flex-direction: column; gap: 3px; }
[data-pdf="1"] .pdf-mast-contact small {
    font-size: .625rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
    color: var(--red, #eb0601);
}
[data-pdf="1"] .pdf-mast-contact b {
    font-size: 1.0625rem; font-weight: 800; color: var(--coal, #323236);
    line-height: 1.15; white-space: nowrap;
}

/* The tool loses its controls. A slider is not a thing you can operate on paper,
   and a picker listing 26 machines would run to pages. What is left is the
   answer, which is the whole point of the document. */
[data-pdf="1"] .oc-tool .sliders,
[data-pdf="1"] .oc-tool .pickgrid,
[data-pdf="1"] .oc-tool .picker-head,
[data-pdf="1"] .oc-tool .acts,
[data-pdf="1"] .oc-tool .lp-over { display: none !important; }

/* THE EMPTY BOX ON PAGE ONE. Hiding .pickgrid and .picker-head leaves their
   parent .fleetx-shell rendering as a container with a red top rule and nothing
   in it. Hide the shell instead - but ONLY on the access checker, because the
   planner's shell holds the sliders AND the answer, and losing that would take
   the whole point of the document with it. */
[data-pdf="1"] .oc-siteaccess .fleetx-shell { display: none !important; }

[data-pdf="1"] .oc-tool { padding: 0 !important; }
[data-pdf="1"] .oc-tool .plan-stick { position: static; }
[data-pdf="1"] .oc-tool .sheet,
[data-pdf="1"] .oc-tool .card,
[data-pdf="1"] .oc-tool .cstrip-card,
[data-pdf="1"] .oc-tool .fleetx-shell { box-shadow: none; border: 1px solid var(--line, #d9dde0); }

/* PAGE BREAKS. break-inside: avoid was on .sheet, which is right for something
   card-sized and wrong for something a page tall: it cannot fit in what is left,
   so it jumps whole to the next page and leaves the gap you get on page one.

   So the sheet is allowed to flow, and the things that must NOT split are named
   individually - a table row whose label and value land on different pages is
   the actual harm here, not a sheet that spans two. */
[data-pdf="1"] .oc-tool .card,
[data-pdf="1"] .oc-tool .cstrip-card { break-inside: avoid; page-break-inside: avoid; }

[data-pdf="1"] .oc-tool .sheet-head,
[data-pdf="1"] .oc-tool .sheet-foot,
[data-pdf="1"] .oc-tool .plan-stick,
[data-pdf="1"] .oc-tool .spectbl tr,
[data-pdf="1"] .oc-tool .warn { break-inside: avoid; page-break-inside: avoid; }

/* A heading should never be the last thing on a page. */
[data-pdf="1"] .oc-tool h2,
[data-pdf="1"] .oc-tool h3,
[data-pdf="1"] .oc-tool .eyebrow { break-after: avoid; page-break-after: avoid; }