/* Brand contrast contract: black on pale panels, white on dark, yellow as accent.
   Final shared layer; do not put this inside the image-normalization CSS block. */
:root{--blue:#16191d;--steel:#58616b}
body{color:#16191d;background:#fff}
.eyebrow{color:#16191d}
.btn-d:hover{background:var(--yellow);color:#000}
.stats,.card .bd,.ddm,.mini{border-top-color:var(--yellow)}
.safety-strip{background:#111418;color:#fff;border-top:3px solid var(--yellow)}
.safety-strip b{color:#fff}
.map i{color:#bec5ce}
.map i.on{background:var(--yellow);color:#000}
.legend span::before{background:var(--yellow)}
/* Set foreground AND surface together. These beat the adjacent-light-section rule. */
section.editorial-dark.light-sec,section.editorial-dark.light-sec+.light-sec.editorial-dark,
section.editorial-dark{background:#111417;color:#fff}
:is(.dark,.editorial-dark,.svc,.safety,.confirm){--blue:#FCC625}
:is(.dark,.editorial-dark,.svc,.safety,.confirm) :is(h2,h3,h4,b,strong,summary){color:#fff}
:is(.dark,.editorial-dark,.svc,.safety,.confirm) :is(.rich p,.lead-first p:first-child,.mini p,.faq p,.ticks li,.prose p,.head p,.note){color:#e3e6e9}
:is(.dark,.editorial-dark) :is(.ticks li,.steps li,.faq,.list-box){border-color:#495158}
:is(.dark,.editorial-dark,.svc,.safety,.confirm) :is(.eyebrow,.vals small){color:#ffe169}
:is(.dark,.editorial-dark) .card{background:#1c2228;color:#fff;border-color:#495158}
:is(.dark,.editorial-dark) .card :is(p,.sub){color:#e3e6e9}
/* Pale children inside a dark parent must not inherit its white text. */
:is(.dark,.editorial-dark) :is(.rig-card,.careers-band .tx){background:#fff;color:#16191d;--blue:#16191d}
:is(.dark,.editorial-dark) .rig-card :is(h3,b,strong,p,dd){color:#16191d}
:is(.dark,.editorial-dark,.svc,.safety,.confirm) .btn-y,
:is(.dark,.editorial-dark,.svc,.safety,.confirm) .btn-y :is(b,span){background:var(--yellow);color:#000}
:is(.dark,.editorial-dark,.svc,.safety,.confirm) .btn-b{color:#fff;border-color:#fff}
:is(.dark,.editorial-dark,.svc,.safety,.confirm) .btn-b:hover{background:#fff;color:#000}
.ylink{color:#16191d;text-decoration:underline;text-underline-offset:3px}
footer .ylink,:is(.dark,.editorial-dark,.svc) .ylink{color:#ffe169}
.rich a.btn,.tx p a.btn{color:#000;text-decoration:none}
footer .fbot{color:#aeb5be}
.rig-src a{color:#16191d;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.external-notice{font-size:inherit;font-weight:500;white-space:normal}
/* Compact, explicit comparison: no tick indentation, invisible labels, or spacer rows. */
section.fleet-comparison,section.fleet-comparison.light-sec{padding:40px 0;background:#fff;color:#16191d}
.fleet-comparison .eyebrow{color:#16191d}
.fleet-comparison h2{color:#111418;margin:10px 0 22px}
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.method-card{padding:22px 24px;background:#F7F7F4;border:1px solid #D9DCE0;border-top:4px solid var(--yellow)}
.fleet-comparison .method-card h3{color:#111418;font-size:26px;line-height:1.2;margin:0 0 14px}
.method-label{display:inline-block;background:var(--yellow);color:#000;padding:4px 8px;margin-right:6px}
.fleet-comparison .method-card p{color:#292f35;font-size:16px;line-height:1.6;margin:0}
.light-sec .ticks{margin-bottom:18px}
.light-sec>.wrap>.head{margin-bottom:28px}
@media(max-width:1000px){section.fleet-comparison,section.fleet-comparison.light-sec{padding:32px 0}.method-grid{grid-template-columns:1fr;gap:16px}.method-card{padding:20px}}

/* Owner t137: comparison belongs BELOW Epiroc intro and BEFORE model cards.
   Tophammer uses the approved deep blue; t138 adds compatible blue accents sitewide. */
#our-rigs .fleet-comparison{padding:0 0 28px;background:#fff;color:#16191d}
#our-rigs .fleet-comparison h2{font-size:clamp(28px,3vw,36px);margin:10px 0 20px}
.fleet-comparison .method-card{overflow:hidden;padding:22px 24px 20px}
.fleet-comparison .method-card h3{padding:12px 24px;margin:-22px -24px 16px;line-height:1.25;background:var(--yellow);color:#000}
.fleet-comparison .method-card .method-label{padding:0;margin-right:6px;background:transparent;color:inherit}
.fleet-comparison .method-top{border-top-color:#075985}
.fleet-comparison .method-top h3{background:#075985;color:#fff}
.fleet-comparison .method-card p{font-size:15.5px;line-height:1.55;margin:0 0 12px}
.fleet-comparison .method-card p:last-child{margin-bottom:0}
.fleet-comparison .method-note,.fleet-comparison .method-sources{font-size:14px;line-height:1.6;color:#3d434a;margin:14px 0 0;max-width:none}
.fleet-comparison .method-sources a{color:#16191d;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){#our-rigs .fleet-comparison{padding-bottom:24px}.fleet-comparison .method-card{padding:22px 24px 20px}}
/* Owner t138: tighter editorial rhythm, left-aligned rows, accessible yellow/blue.
   Heroes and documentary photo dimensions deliberately remain untouched. */
:root{--brand-blue:#075985;--blue-accent:#62C6F4}
.light-sec,.light-sec+.light-sec,section.editorial-dark{padding:48px 0}
.intro-sec{padding:56px 0 28px}
.intro,.projects,.svc{padding:64px 0}
.cta{padding:56px 0;background:var(--yellow);color:#000}
.cta :is(h2,h3,p){color:#000}
.cta a:not(.btn){color:#000;text-decoration:underline}
.head{gap:24px;margin-bottom:28px}
.light-sec h2,.rich h2{margin-bottom:20px}
.light-sec :is(.rich,.ticks,.head,.minis,.steps,.rig-bd),.editorial-dark :is(.rich,.ticks,.minis,.steps){text-align:left}
.rich p{margin-bottom:16px}
.ticks li{padding-top:10px;padding-bottom:10px;line-height:1.55}
.ticks li b,.ticks li strong{font-weight:700}
.light-sec .ticks{margin:0 0 18px}
section.editorial-dark>.wrap::before{margin-bottom:16px;background:linear-gradient(90deg,#FCC625 0 65%,#62C6F4 65%);width:64px}
:is(.dark,.editorial-dark) .mini:nth-child(even){border-top-color:var(--blue-accent)}
:is(.dark,.editorial-dark) .steps li:nth-child(even) span{color:var(--blue-accent)}
/* Blue surfaces always pair with white lettering; yellow surfaces with black. */
.safety-strip{background:var(--brand-blue);color:#fff;border-top:3px solid var(--yellow)}
.safety-strip b{color:#fff}
.rig-badge.th{background:var(--brand-blue);border-color:var(--brand-blue);color:#fff}
.brand-blue{background:var(--brand-blue);color:#fff}
.brand-blue :is(h2,h3,h4,p,b,strong,a){color:#fff}
a.btn.btn-y,button.btn.btn-y,
a.btn.btn-y:is(:link,:visited,:hover,:focus,:focus-visible,:active),
button.btn.btn-y:is(:hover,:focus,:focus-visible,:active){background:var(--yellow);color:#000;text-decoration:none}
a.btn.btn-y:hover,button.btn.btn-y:hover{background:#ffd84f;color:#000}
:is(a,button).btn.btn-y :is(span,b,strong){color:#000;text-decoration:none}
:is(a,button).btn:focus-visible{outline:3px solid currentColor;outline-offset:4px}
/* Careers: the CTA leads straight into readable benefits instead of blank bands. */
#registered-apprenticeship-program{padding:44px 0 32px}
#registered-apprenticeship-program .ctas{margin-top:16px}
#why-work-at-xcel,#benefits,#who-we-hire,#what-we-look-for{padding:40px 0}
#why-work-at-xcel .ticks,#benefits .ticks,#who-we-hire .ticks,#what-we-look-for .ticks{margin-bottom:0}
#why-work-at-xcel h2,#benefits h2,#who-we-hire h2,#what-we-look-for h2{margin:0 0 18px}
@media(max-width:1000px){
 .light-sec,.light-sec+.light-sec,section.editorial-dark{padding:36px 0}
 .intro-sec{padding:40px 0 20px}
 .intro,.projects,.svc{padding:44px 0}
 .cta{padding:40px 0}
 #registered-apprenticeship-program{padding:36px 0 28px}
 #why-work-at-xcel,#benefits,#who-we-hire,#what-we-look-for{padding:32px 0}
}

/* Keep editorial prose and card rows anchored to a consistent reading edge. */
.rich,.mini,.card .bd,.split .tx,.steps,.ticks{text-align:left}

/* Owner t139: one continuous yellow card rule; image-only cool-blue tint.
   PNG image canvases use the exact same RGB tint to avoid rectangle seams. */
.rig-card{border-top:4px solid var(--yellow)}
.rig-card .rig-bd{border-top:0}
#our-rigs .rig-im,:is(#pile-driving-equipment,#tracked-carrier-equipment) .rig-im{background:#F5F9FC}

/* Owner t141: every project is a black/white experience box, regardless of band. */
article.card.pcard{background:#111418;color:#fff;border:1px solid #414a52;border-top:4px solid #FCC625}
article.card.pcard .bd{border-top:0;padding:24px;gap:0;text-align:left}
article.card.pcard :is(h3,p,b,strong){color:#fff}
article.card.pcard .sub{color:#d5dce4}
article.card.pcard .chips{gap:8px;margin-top:auto;padding-top:4px}
article.card.pcard .chips span{background:#293440;color:#fff;border:1px solid #607184}
article.card.pcard:nth-child(even){border-top-color:#62C6F4}
article.card.pcard .more{color:#ffe169}
.projects-page .cards{gap:24px}
.projects-page .experience-cards{grid-template-columns:1fr}
.projects-page #service-area{padding:32px 0;background:#fff;color:#16191d}
.projects-page #service-area .wrap{display:block}
.projects-page #service-area h2{font-size:clamp(28px,3vw,36px);margin:10px 0 14px;color:#16191d}
.projects-page #service-area p{max-width:1000px;color:#3d434a;margin:0}
.projects-page #field-gallery{padding:32px 0 40px;background:#fff;color:#16191d}
.projects-page #field-gallery .head{margin-bottom:20px;gap:16px}
.projects-page #field-gallery h2{margin:10px 0 0;color:#111418}
.projects-page #field-gallery .eyebrow{color:#16191d}
.projects-page #field-gallery::before,.projects-page #field-gallery::after{display:none}
.projects-page #recent-projects-solar-pile-pre-drilling h2{font-size:clamp(30px,3.5vw,44px)}
@media(max-width:1000px){article.card.pcard .bd{padding:22px}.projects-page #service-area{padding:28px 0}.projects-page #field-gallery{padding:28px 0 36px}}

/* Owner t142: phone-only real flow clearance, not a translated/clipped overlay.
   Home moves 36px down (56px -> 20px bottom inset) when the viewport has room.
   On short screens the 140px top floor lets the hero grow and scroll naturally. */
@media(max-width:600px){
 .hero:not(.short){height:auto;min-height:100vh;min-height:100svh;max-height:none}
 .hero:not(.short)>.wrap{height:auto;min-height:100vh;min-height:100svh;padding-top:calc(104px + env(safe-area-inset-top,0px));padding-bottom:calc(56px + env(safe-area-inset-bottom,0px));justify-content:flex-end}
 .hero.home-hero>.wrap{padding-top:calc(140px + env(safe-area-inset-top,0px));padding-bottom:calc(20px + env(safe-area-inset-bottom,0px))}
 .hero:not(.short)>.wrap>:is(.eyebrow,h1,p,.ctas){flex-shrink:0}
}

/* Owner t143: explicit whole-run checkerboard, never global nth-child.
   Only Fleet documentary splits receive these classes. Photo styles are untouched. */
.fleet-scene.fleet-photo-left>.ph{order:0}
.fleet-scene.fleet-photo-left>.tx{order:1}
.fleet-scene.fleet-photo-right>.tx{order:0}
.fleet-scene.fleet-photo-right>.ph{order:1}
.fleet-scene.fleet-scene-gap{position:relative;margin-top:24px;border-top:1px solid #D9DCE0}
.fleet-scene.fleet-scene-gap::before{content:"";position:absolute;z-index:1;top:-2px;left:calc(50% - 32px);width:64px;height:4px;background:linear-gradient(90deg,#FCC625 0 65%,#62C6F4 65%)}
.fleet-scene.dark>.tx{background:#111418;color:#fff}
.fleet-scene.dark .tx :is(h2,p){color:#fff}
@media(max-width:1000px){
 .fleet-scene.fleet-scene-gap{margin-top:20px}
 .fleet-scene:is(.fleet-photo-left,.fleet-photo-right)>.tx{order:0}
 .fleet-scene:is(.fleet-photo-left,.fleet-photo-right)>.ph{order:1}
}

/* Owner t144: reusable service navigation cards, not forms or equipment panels. */
#services,#services-overview{background:#fff;color:#16191d}
.service-card-grid{align-items:stretch;grid-auto-rows:1fr;gap:24px}
.service-card-grid>.service-card{height:100%;background:#111418;color:#fff;border:1px solid #414a52;border-top:4px solid #FCC625;overflow:hidden}
.service-card .bd{flex:1;padding:28px;border-top:0;background:#111418;color:#fff;text-align:left}
.service-card .bd::before{content:"";display:block;width:56px;height:3px;background:#62C6F4;margin-bottom:16px;flex-shrink:0}
.service-card .bd :is(h3,b,strong){color:#fff}
.service-card .bd p{color:#e3e6e9;line-height:1.6;margin-bottom:22px;flex:1}
.service-card .bd .sub{color:#cbd0d5}
.service-card .bd .more{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;font-size:19px;font-weight:700;color:#ffe169;text-decoration:underline;text-underline-offset:5px;margin-top:auto}
.service-card .bd a.more:is(:link,:visited){color:#ffe169}
.service-card .bd a.more:is(:hover,:focus-visible),.service-card:is(:hover,:focus-visible) .more{color:#62C6F4}
.service-card-grid>.service-card:is(:hover,:focus-within,:focus-visible){border-color:#62C6F4;box-shadow:0 14px 32px rgba(17,20,24,.2);transform:translateY(-4px)}
.service-card-grid>.service-card:focus-visible,.service-card .more:focus-visible{outline:3px solid #62C6F4;outline-offset:4px}
@media(max-width:1000px){.service-card .bd{padding:24px}.service-card-grid{grid-auto-rows:auto;gap:20px}}

/* Owner t145: deliberate white bands interrupt adjacent dark Home topics.
   Remove only the standalone section ornament; keep all eyebrow brand dashes. */
.home-page .home-white-transition{margin-top:32px}
.home-page #industries>.wrap::before{content:none;display:none}
@media(max-width:1000px){.home-page .home-white-transition{margin-top:24px}}

/* Owner t146 / phone QA: repair intrinsic-width sizing; never hide page overflow.
   Bare 1fr tracks used min-content floors (notably CONSTRUCTION in stats).
   Keep scrolling intentional INSIDE Projects' existing .pscroll-track only. */
:root{--rule-blue:#1686C8}
.service-card-grid>.service-card.service-accent-blue{border-top-color:var(--rule-blue)}
article.card.pcard:nth-child(even){border-top-color:var(--rule-blue)}
.service-card .bd::before{content:none;display:none}
.wrap,.split>.tx,.card>.bd,.formcol,aside.next{min-width:0}
.cards>.card,.tiles>.tile,.stats .wrap>.stat,.fgrid>div,.intro .wrap>*,.svc .wrap>*,.formwrap>*,.xform>*{min-width:0}
.xform :is(input,select,textarea){min-width:0;max-width:100%}
.card :is(h3,p,.sub,.more),.fgrid,.formcol,.note{overflow-wrap:anywhere}
@media(max-width:1000px){
 .cards,.intro .wrap,.svc .wrap,.two,.formwrap,.xform,.split{grid-template-columns:minmax(0,1fr)}
 .stats .wrap,.stats .wrap:is(.n3,.n4,.n6){grid-template-columns:repeat(2,minmax(0,1fr))}
 .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 .regions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .fgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}
 .fbot{flex-wrap:wrap;gap:12px 20px}
 .map{grid-template-columns:repeat(12,minmax(0,1fr));min-width:0;max-width:100%;gap:3px}
 .map i{min-width:0;min-height:0;line-height:1;font-size:13px}
 .legend{flex-wrap:wrap;gap:8px 18px}
 .hdr .wrap>.logo,.nav,.dd,.ddm{min-width:0}
 .nav a,.btn{max-width:100%;white-space:normal;overflow-wrap:anywhere}
 .pscroll{min-width:0;max-width:100%}
 .tile h3{overflow-wrap:anywhere}
}
@media(max-width:600px){
 .stats .stat{padding:28px 12px}
 .stats .stat span{letter-spacing:.03em;line-height:1.45;overflow-wrap:anywhere}
}
/* Let narrow industry labels wrap inside their unchanged photo frames. */
@media(max-width:600px){
 .tiles .tile .t{left:14px;right:14px;bottom:18px}
 .tiles .tile h3{font-size:22px;hyphens:auto;overflow-wrap:anywhere}
 .tiles .tile p{font-size:13.5px;line-height:1.45}
 .rig-card,.rig-bd,.rig-im,.rig-specs,.rig-spec{min-width:0}
}

/* Owner t147: Home project previews reuse exactly the Projects card family. */
.project-preview-grid{align-items:stretch;grid-auto-rows:1fr;gap:24px}
.project-preview-grid>.pcard{height:100%}
article.card.pcard :is(h3,p,.sub,.chips span){opacity:1}
article.card.pcard a:not(.btn){color:#ffe169;text-decoration:underline;text-underline-offset:4px}
article.card.pcard a:not(.btn):visited{color:#ffe169}
article.card.pcard a:not(.btn):is(:hover,:focus-visible){color:#62C6F4}
article.card.pcard a:focus-visible{outline:3px solid #62C6F4;outline-offset:4px}
@media(max-width:1000px){.project-preview-grid{grid-auto-rows:auto}}

/* Owner t148: transition motifs ONLY at explicitly verified white/white joins.
   Flags never set backgrounds, so dark surfaces cannot be accidentally whitened. */
section.section-boundary.section-boundary:where(:not(.hero):not(.safety))::before,
section.section-boundary.section-boundary:where(:not(.hero):not(.safety))::after,
section.section-boundary>.wrap::before{content:none;display:none}
section.fleet-scene.fleet-scene-gap{border-top:0}
section.section-boundary.boundary-white-white{position:relative}
section.section-boundary.boundary-white-white::before{content:"";display:block;position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(900px,calc(100% - 64px));height:1px;background:#D9DCE0}
section.section-boundary.boundary-white-white::after{content:"";display:block;position:absolute;top:-6px;left:50%;transform:translateX(-50%);width:64px;height:13px;background-color:#fff;background-image:url("../brand/xcel-x-icon-stripes.svg");background-repeat:no-repeat;background-position:center;background-size:58px auto}

/* Checkerboard and split photos: an inner picture fills the same frame the background image used. */
.split > .ph{position:relative;overflow:hidden}
.split > .ph > picture,.split > .ph > img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.split > .ph > picture img{width:100%;height:100%;object-fit:cover}
.form-error{border:2px solid #9f2d22;background:#fff4f2;color:#6d1d16;padding:12px 14px;margin:0 0 14px;font-size:15px;font-weight:600;letter-spacing:0;text-transform:none;line-height:1.45}
.form-status{margin:8px 0 0;font-size:15px;letter-spacing:0;text-transform:none;font-weight:500}
.turnstile-slot{margin:4px 0 8px;min-height:0}
button.btn:disabled{opacity:.7;cursor:not-allowed}

/* Short phone landscape only. Portrait stays on the max-width:600 rules.
   Desktop and tablet heights are above this cap.
   min-aspect-ratio covers Safari when the orientation feature lags after rotation.
   html.phone-land (set from the visual viewport) covers the same case when the
   layout viewport height is still the portrait value. */
@media (max-width: 1100px) and (max-height: 540px) and (min-aspect-ratio: 1/1) {
  .hdr .wrap{
    height:64px;
    padding-left:max(16px, env(safe-area-inset-left, 0px));
    padding-right:max(16px, env(safe-area-inset-right, 0px));
  }
  .logo img{height:26px}
  body.menu .nav{
    top:calc(64px + env(safe-area-inset-top, 0px));
    bottom:0;
    max-height:calc(100dvh - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;
  }
  .hero:not(.short),
  .page-hero:not(.short){
    width:100%;
    max-width:100%;
    height:auto;
    min-height:100svh;
    min-height:100dvh;
    min-height:var(--vvh, 100dvh);
    max-height:none;
  }
  .hdr{width:100%;max-width:100%;left:0;right:0}
  .hero:not(.short) > .wrap,
  .page-hero:not(.short) > .wrap{
    height:auto;
    min-height:100svh;
    min-height:100dvh;
    min-height:var(--vvh, 100dvh);
    box-sizing:border-box;
    justify-content:flex-end;
    padding-top:calc(64px + env(safe-area-inset-top, 0px) + 14px);
    /* Extra bottom inset is about one third of the empty gap under the header
       on an 852x393 phone (10vh ≈ 40px). The block moves up together. */
    padding-bottom:calc(16px + 10vh + env(safe-area-inset-bottom, 0px));
    padding-left:max(20px, env(safe-area-inset-left, 0px));
    padding-right:max(20px, env(safe-area-inset-right, 0px));
  }
  .hero h1,
  .page-hero h1{
    font-size:clamp(30px, 8.4vh, 42px);
    line-height:.98;
    margin:6px 0 8px;
    max-width:16em;
  }
  .hero p.sub,
  .page-hero p.sub{
    font-size:16px;
    line-height:1.4;
    margin-bottom:12px;
    max-width:68ch;
  }
  .hero .eyebrow{font-size:13px;letter-spacing:.14em}
  .hero .ctas,
  .page-hero .ctas{gap:8px}
  .hero .btn,
  .page-hero .btn{padding:10px 14px;font-size:15px;letter-spacing:.06em}
  .page-hero.short{height:auto;min-height:0;max-height:none}
  .page-hero.short > .wrap{
    height:auto;
    min-height:0;
    box-sizing:border-box;
    justify-content:flex-end;
    padding-top:calc(64px + env(safe-area-inset-top, 0px) + 16px);
    padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
    padding-left:max(20px, env(safe-area-inset-left, 0px));
    padding-right:max(20px, env(safe-area-inset-right, 0px));
  }
  .wrap{
    padding-left:max(20px, env(safe-area-inset-left, 0px));
    padding-right:max(20px, env(safe-area-inset-right, 0px));
  }
  h2{font-size:clamp(28px, 7vh, 40px)}
  .stats .stat{padding:18px 10px}
  .stats .stat b{font-size:34px}
  html,body{overflow-x:clip;max-width:100%}
}

/* Same landscape geometry when JS sees a short wide visual viewport
   but the CSS viewport height is still the portrait number. */
html.phone-land .hdr .wrap{
  height:64px;
  padding-left:max(16px, env(safe-area-inset-left, 0px));
  padding-right:max(16px, env(safe-area-inset-right, 0px));
}
html.phone-land .logo img{height:26px;width:auto;max-width:none}
html.phone-land .hdr,
html.phone-land .hero,
html.phone-land .page-hero{width:100%;max-width:100%;left:0;right:0}
html.phone-land body.menu .nav{
  top:calc(64px + env(safe-area-inset-top, 0px));
  bottom:0;
  max-height:calc(var(--vvh, 100dvh) - 64px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
html.phone-land .hero:not(.short),
html.phone-land .page-hero:not(.short){
  height:auto;
  min-height:var(--vvh, 100dvh);
  max-height:none;
}
html.phone-land .hero:not(.short) > .wrap,
html.phone-land .page-hero:not(.short) > .wrap{
  height:auto;
  min-height:var(--vvh, 100dvh);
  box-sizing:border-box;
  justify-content:flex-end;
  padding-top:calc(64px + env(safe-area-inset-top, 0px) + 14px);
  padding-bottom:calc(16px + 10vh + env(safe-area-inset-bottom, 0px));
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
}
html.phone-land .hero h1,
html.phone-land .page-hero h1{font-size:clamp(30px, 8.4vh, 42px);line-height:.98;margin:6px 0 8px;max-width:16em}
html.phone-land .hero p.sub,
html.phone-land .page-hero p.sub{font-size:16px;line-height:1.4;margin-bottom:12px;max-width:68ch}
html.phone-land .hero .eyebrow{font-size:13px;letter-spacing:.14em}
html.phone-land .hero .ctas,
html.phone-land .page-hero .ctas{gap:8px}
html.phone-land .hero .btn,
html.phone-land .page-hero .btn{padding:10px 14px;font-size:15px;letter-spacing:.06em}
html.phone-land .page-hero.short{height:auto;min-height:0;max-height:none}
html.phone-land .page-hero.short > .wrap{
  height:auto;min-height:0;box-sizing:border-box;justify-content:flex-end;
  padding-top:calc(64px + env(safe-area-inset-top, 0px) + 16px);
  padding-bottom:calc(18px + env(safe-area-inset-bottom, 0px));
  padding-left:max(20px, env(safe-area-inset-left, 0px));
  padding-right:max(20px, env(safe-area-inset-right, 0px));
}
html.phone-land, html.phone-land body{overflow-x:clip;max-width:100%;width:100%}

/* Placeholder frames keep the template box. The photo covers that box.
   max-width:none stops Safari from ignoring object-fit and stretching
   when the global img rule sets max-width:100% and height:auto.
   Stacked splits stay 560px tall — the template minimum — so a 1400px
   file cannot lengthen the row. Desktop splits still grow with the text column. */
.card .im,
.tile,
.pscroll-item,
.split > .ph,
.safety{position:relative}
.card .im{aspect-ratio:4/3;overflow:hidden;width:100%}
.tile{aspect-ratio:3/4.4;overflow:hidden}
.pscroll-item{aspect-ratio:16/10;overflow:hidden}
.split > .ph{overflow:hidden;min-height:560px}
@media (max-width: 1000px){
  .split > .ph{height:560px;min-height:560px;max-height:560px}
}
.hero > video,
.hero > img,
.hero > picture,
.hero > picture img,
.page-hero > img,
.split > .ph > picture,
.split > .ph > img,
.split > .ph > picture img,
.card .im > picture,
.card .im img,
.tile > picture,
.tile img,
.safety > img,
.safety > picture,
.safety > picture img,
.pscroll-item > picture,
.pscroll-item img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  min-width:0;
  min-height:0;
  aspect-ratio:auto;
  object-fit:cover;
}
.tile img{opacity:.88}
.tile:hover img{transform:scale(1.06);opacity:1}
.card:hover .im img{transform:scale(1.04)}
/* Whole machine stays inside the fixed rig frame. Contain, not stretch. */
#our-rigs .rig-im img,
:is(#pile-driving-equipment,#tracked-carrier-equipment) .rig-im img,
#doyle-rambo-500 .rig-im img{
  position:static;
  inset:auto;
  width:100%;
  height:100%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  object-position:center;
  aspect-ratio:auto;
}
/* Sidebar photos have no fixed frame. Leave the file's own ratio in
   charge. Forcing object-fit painted a blank band under the bitmap. */
aside.next img{
  position:static;
  inset:auto;
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  max-height:none;
}

/* Focal points. Wide slots crop empty sky or foreground, not the subject.
   Inline styles on p56, p77 and the seismic hero still win. */
.split > .ph > img[src*="p44-load-test-readings"]{object-position:46% 36%}
.split > .ph > img[src*="p42-epiroc-drill-fleet"]{object-position:center 30%}
.split > .ph > img[src*="p64-pile-driver-two-workers"]{object-position:center 42%}
.card .im img[src*="p05-pile-load-test"]{object-position:center 42%}
.card .im img[src*="p49-xcel-epiroc"]{object-position:center 38%}
.card .im img[src*="p115-3-pile-drivers"]{object-position:center 40%}