/* ────────────────────────────────────────────────────────────────────
   CRANE-HIRE.CSS — Altida /crane-hire/ page (middle sections)

   2026-07-01 design rebuild: the hybrid editorial+cinematic grammar
   (the About-page direction) executed with this page's OWN devices.
   Copy is verbatim-locked — this stylesheet changes look and feel only.

   Sections (all scoped under .k so the shared sd-styles and chrome are untouched):
     k-intro — light editorial opening, print-style column rule
     k-ways  — the decision centrepiece: two photographic panels, each
               backed by a real Altida job of that hire type
     k-size  — engineering boom diagram (capacity falls with reach)
               + the four sizing factors
     k-fleet — dark cinematic 2×2 machine showcase (real photography)
     k-bento — sectors mosaic (4-col, its own geometry)
     k-why   — spec-sheet rows (Lovelo titles) + photographic anchor

   Rhythm: light → photographic → bone → DARK → bone → white → dark FAQ.
   Contrast floor: body text ≥ 4.5:1 against its effective ground;
   photo-set text always sits on a ≥ .8 dark veil. Yellow is flat fill.
   Motion: reveal + parallax only, --ease-mech, reduced-motion disabled.
   ──────────────────────────────────────────────────────────────────── */

.k{
  --yellow:var(--altida-yellow); --black:var(--altida-black);
  --white:var(--altida-white); --bone:var(--altida-bone);
  --g-950:var(--grey-950); --g-900:var(--grey-900); --g-800:var(--grey-800);
  --g-700:var(--grey-700); --g-600:var(--grey-600); --g-500:var(--grey-500);
  --g-400:var(--grey-400); --g-300:var(--grey-300); --g-200:var(--grey-200);
  --g-100:var(--grey-100); --g-50:var(--grey-50);
  --wide:var(--container-wide);
}
.k section{position:relative}
.k h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.97}
.k .eyebrow{display:flex;align-items:center;gap:.85rem;font-family:var(--font-sans);font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-600);margin:0}
.k .eyebrow::before{content:"";width:34px;height:3px;background:var(--yellow);flex:0 0 auto}
.k .eyebrow--light{color:rgba(255,255,255,.72)}
.k .dot{color:var(--yellow)}

/* ---------- shared reveal (keys off homepage.js .is-revealed) ---------- */
@media (prefers-reduced-motion: no-preference){
  .k [data-section-reveal] .k-r{opacity:0;transform:translateY(18px);
    transition:opacity 620ms var(--ease-mech),transform 620ms var(--ease-mech)}
  .k .is-revealed .k-r{opacity:1;transform:none}
  .k .is-revealed .k-r:nth-child(2){transition-delay:70ms}
  .k .is-revealed .k-r:nth-child(3){transition-delay:140ms}
  .k .is-revealed .k-r:nth-child(4){transition-delay:210ms}
  .k .is-revealed .k-r:nth-child(5){transition-delay:280ms}
  .k .is-revealed .k-r:nth-child(6){transition-delay:350ms}
}
@media (prefers-reduced-motion: reduce){
  .k .k-r{opacity:1!important;transform:none!important;transition:none!important}
}

/* ════════════════════════════════════════════════════════════
   1 · K-INTRO — light editorial opening. A print-style column
   rule between the title and the body gives it the considered,
   engineering-document feel without adding a single element.
   ════════════════════════════════════════════════════════════ */
.k-intro{background:radial-gradient(120% 115% at 84% -12%,var(--white),var(--bone) 70%);padding:clamp(4.75rem,8.5vw,8rem) 0}
.k-intro__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);
  display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.75rem,5.5vw,5.5rem);align-items:start}
.k-intro__h{color:var(--black);font-size:clamp(2.4rem,4.6vw,4rem);margin-top:1.15rem}
.k-intro__body{max-width:600px;position:relative;padding-left:clamp(0rem,2.5vw,2.75rem)}
@media(min-width:901px){
  .k-intro__body::before{content:"";position:absolute;left:0;top:.45rem;bottom:.3rem;width:1px;
    background:linear-gradient(180deg,var(--g-300),rgba(0,0,0,0) 96%)}
}
.k-intro__lede{font-family:var(--font-body);color:var(--g-800);font-size:clamp(1.18rem,1.8vw,1.45rem);line-height:1.52;margin-bottom:1.25rem}
.k-intro__p{font-family:var(--font-body);color:var(--g-700);font-size:1.02rem;line-height:1.7;margin-bottom:1rem}
.k-intro__p:last-of-type{margin-bottom:0}
.k-intro__tags{display:flex;align-items:center;gap:1rem;margin-top:2rem;font-family:var(--font-sans);font-weight:700;
  font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-800)}
.k-intro__slash{flex:0 0 auto;width:10px;height:18px;background:var(--yellow);clip-path:polygon(0 100%,52% 0,100% 0,48% 100%)}
@media(max-width:900px){.k-intro__in{grid-template-columns:1fr;gap:1.5rem}.k-intro__h br{display:none}.k-intro__body{padding-left:0}}

/* ════════════════════════════════════════════════════════════
   2 · K-WAYS — the decision centrepiece. Two photographic panels
   on bone; each backed by a real Altida job of that hire type.
   The whole panel is clickable (stretched link); the text zone
   sits on a deep veil for guaranteed contrast.
   ════════════════════════════════════════════════════════════ */
.k-ways{background:var(--bone);padding:clamp(4.75rem,8.5vw,8rem) 0}
.k-ways__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.k-ways__head{max-width:820px;margin-bottom:clamp(2.5rem,4.2vw,3.6rem)}
.k-ways__h{color:var(--black);font-size:clamp(2.2rem,4vw,3.4rem);margin:1.2rem 0 1.1rem}
.k-ways__sub{font-family:var(--font-body);color:var(--g-700);font-size:1.05rem;line-height:1.68;max-width:62ch}
.k-ways__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2vw,1.8rem)}
.k-way{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(490px,58vh,610px);
  overflow:hidden;border-radius:9px;background:var(--g-900);
  box-shadow:0 30px 60px -30px rgba(10,10,10,.38),0 8px 20px -12px rgba(10,10,10,.16);
  transition:transform .45s var(--ease-mech),box-shadow .45s var(--ease-mech)}
.k-way:hover,.k-way:focus-within{transform:translateY(-5px);
  box-shadow:0 42px 76px -32px rgba(10,10,10,.46),0 12px 26px -14px rgba(10,10,10,.2)}
.k-way__img{position:absolute;inset:0;overflow:hidden}
.k-way__img img{width:100%;height:112%;object-fit:cover;object-position:center 34%;transition:transform .8s var(--ease-mech)}
.k-way:hover .k-way__img img,.k-way:focus-within .k-way__img img{transform:scale(1.045)}
.k-way::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.30) 0%,rgba(10,10,10,.10) 24%,rgba(10,10,10,.82) 56%,rgba(12,11,10,.97) 100%)}
.k-way__slash{position:absolute;left:0;bottom:0;width:64px;height:34px;background:var(--yellow);
  clip-path:polygon(0 100%,0 35%,100% 100%);z-index:3}
.k-way__meta{position:relative;z-index:2;padding:clamp(1.7rem,2.5vw,2.5rem)}
.k-way__badge{display:inline-block;font-family:var(--font-sans);font-weight:700;font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--black);background:var(--yellow);padding:.38rem .66rem;margin-bottom:1.05rem;border-radius:5px}
.k-way__name{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.7rem,2.6vw,2.4rem);
  letter-spacing:.02em;color:var(--white);margin:0 0 .85rem;line-height:1}
.k-way__body{font-family:var(--font-body);color:rgba(255,255,255,.88);font-size:.99rem;line-height:1.64;margin:0 0 1rem;max-width:56ch}
.k-way__best{font-family:var(--font-body);color:rgba(255,255,255,.94);font-size:.9rem;line-height:1.5;margin:0 0 1.35rem;
  padding-top:1rem;border-top:1px solid rgba(255,255,255,.22)}
.k-way__best strong{font-family:var(--font-sans);font-weight:700;font-size:.66rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--yellow);display:block;margin-bottom:.2rem}
/* whole panel clickable — stretched link, visible label keeps the affordance */
.k-way__link{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-sans);font-weight:700;
  font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);text-decoration:none}
.k-way__link::before{content:"";position:absolute;inset:0;z-index:4}
.k-way__link .arrow{transition:transform .3s var(--ease-mech)}
.k-way:hover .k-way__link .arrow,.k-way:focus-within .k-way__link .arrow{transform:translateX(5px)}
.k-way__link:focus-visible{outline:none}
.k-way:focus-within{outline:3px solid var(--yellow);outline-offset:3px}
/* alignment: bottom-anchored metas with variable copy — consistent slots at 2-across */
@media(min-width:881px){
  .k-way__body{min-height:calc(1.64em * 5)}
}
/* subtle scroll parallax on the panel photos (native, gated) */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .k-way__img img{animation:kWayPar linear both;animation-timeline:view();animation-range:cover}
    @keyframes kWayPar{from{transform:translateY(-5%)}to{transform:translateY(3%)}}
  }
}
@media(max-width:880px){.k-ways__grid{grid-template-columns:1fr}.k-way{min-height:440px}}

/* ════════════════════════════════════════════════════════════
   3 · K-SIZE — the four sizing factors + an ENGINEERING BOOM
   DIAGRAM: a minimal crane side-profile whose capacity bars fall
   as the radius extends. Drawn for this page — labels are pure
   geometry ("close in" … "full reach"), no invented figures.
   ════════════════════════════════════════════════════════════ */
.k-size{background:radial-gradient(135% 120% at 12% -10%,var(--g-100) 0%,var(--bone) 58%);padding:clamp(4.75rem,8.5vw,8rem) 0}
.k-size__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.k-size__head{max-width:820px;margin-bottom:clamp(2.5rem,4.2vw,3.6rem)}
.k-size__grid{display:grid;grid-template-columns:.98fr 1.02fr;gap:clamp(2.6rem,5vw,5.4rem);align-items:start}
.k-size__device{position:sticky;top:110px}
.k-size__h{color:var(--black);font-size:clamp(2.2rem,4vw,3.4rem);margin:1.2rem 0 1.1rem}
.k-size__lede{font-family:var(--font-body);color:var(--g-700);font-size:1.06rem;line-height:1.68;max-width:62ch;margin:0}
/* the floated diagram card */
.k-boom{background:color-mix(in srgb,var(--altida-white),var(--altida-bone));
  border:1px solid var(--g-200);border-radius:14px;padding:clamp(1.5rem,2.2vw,2.1rem);margin:0;
  box-shadow:0 34px 64px -30px rgba(10,10,10,.36),0 10px 24px -12px rgba(10,10,10,.14)}
.k-boom__tag{display:block;font-family:var(--font-sans);font-weight:700;font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--g-700);margin-bottom:1rem}
.k-boom__svg{display:block;width:100%;height:auto}
.k-boom__axis{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;padding-top:.95rem;border-top:1px solid var(--g-200);
  font-family:var(--font-sans);font-weight:700;font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;color:var(--g-600)}
.k-boom__axis b{color:var(--black)}
/* capacity bars grow from the ground on reveal */
.k-boom__bar{transform-box:fill-box;transform-origin:bottom}
@media (prefers-reduced-motion: no-preference){
  .k-size[data-section-reveal] .k-boom__bar{transform:scaleY(0);transition:transform 850ms var(--ease-mech)}
  .k-size.is-revealed .k-boom__bar{transform:scaleY(1)}
  .k-size.is-revealed .k-boom__bar:nth-of-type(2){transition-delay:120ms}
  .k-size.is-revealed .k-boom__bar:nth-of-type(3){transition-delay:240ms}
  .k-size.is-revealed .k-boom__bar:nth-of-type(4){transition-delay:360ms}
}
/* the four factors — open marked items, yellow slash marks, hairlines */
.k-size__list{list-style:none;margin:0;padding:0}
.k-size__item{position:relative;padding:clamp(1.5rem,2.1vw,2rem) 0 clamp(1.5rem,2.1vw,2rem) 2.15rem;border-top:1px solid var(--g-300)}
.k-size__item:first-child{border-top:0;padding-top:0}
.k-size__item::before{content:"";position:absolute;left:0;top:calc(clamp(1.5rem,2.1vw,2rem) + .26em);width:14px;height:14px;
  background:var(--yellow);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%);filter:drop-shadow(0 3px 5px rgba(10,10,10,.14))}
.k-size__item:first-child::before{top:.26em}
.k-size__item-h{display:block;font-family:var(--font-sans);font-weight:800;font-size:clamp(1.02rem,1.4vw,1.2rem);letter-spacing:.01em;
  text-transform:uppercase;color:var(--black);margin:0 0 .55rem;line-height:1.22}
.k-size__item-b{display:block;font-family:var(--font-body);color:var(--g-700);font-size:.99rem;line-height:1.68;margin:0;max-width:58ch;text-wrap:pretty}
@media(max-width:900px){.k-size__grid{grid-template-columns:1fr}.k-size__device{position:static}.k-boom{max-width:560px}}

/* ════════════════════════════════════════════════════════════
   4 · K-FLEET — dark cinematic 2×2 machine showcase. The
   machines are the hero; deep bottom veil guarantees contrast.
   ════════════════════════════════════════════════════════════ */
.k-fleet{background:var(--g-950);padding:clamp(4.75rem,8.5vw,8rem) 0;overflow:hidden}
.k-fleet::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 80% at 82% -5%,rgba(255,236,0,.05),transparent 55%)}
.k-fleet__in{position:relative;z-index:2;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.k-fleet__head{max-width:760px;margin-bottom:clamp(2.6rem,4vw,3.6rem)}
.k-fleet__h{color:var(--white);font-size:clamp(2.2rem,4vw,3.4rem);margin:1.2rem 0 1.1rem}
.k-fleet__sub{font-family:var(--font-body);color:rgba(255,255,255,.72);font-size:1.05rem;line-height:1.66;max-width:60ch}
.k-fleet__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.2rem,2vw,1.6rem)}
.k-machine{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:clamp(380px,48vh,480px);
  overflow:hidden;border-radius:9px;background:var(--g-900)}
.k-machine__img{position:absolute;inset:0;overflow:hidden}
.k-machine__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-mech)}
.k-machine:hover .k-machine__img img{transform:scale(1.05)}
.k-machine::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(10,10,10,.24) 0%,rgba(10,10,10,.05) 28%,rgba(10,10,10,.78) 62%,rgba(10,10,10,.97) 100%)}
.k-machine__slash{position:absolute;left:0;bottom:0;width:64px;height:34px;background:var(--yellow);
  clip-path:polygon(0 100%,0 35%,100% 100%);z-index:3}
.k-machine__meta{position:relative;z-index:2;padding:clamp(1.5rem,2.1vw,2rem)}
.k-machine__badge{display:inline-block;font-family:var(--font-sans);font-weight:700;font-size:.64rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--black);background:var(--yellow);padding:.3rem .55rem;margin-bottom:.85rem;border-radius:5px}
.k-machine__meta h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(1.25rem,1.9vw,1.6rem);
  letter-spacing:.02em;color:var(--white);margin:0 0 .6rem;line-height:1.05}
.k-machine__meta p{font-family:var(--font-body);color:rgba(255,255,255,.85);font-size:.92rem;line-height:1.6;margin:0 0 .6rem;max-width:60ch}
.k-machine__best{color:rgba(255,255,255,.94)!important;margin-bottom:0!important}
.k-machine__best strong{font-family:var(--font-sans);font-weight:700;font-size:.66rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--yellow);display:block;margin-bottom:.12rem}
/* alignment slots so the overlaid metas line up across each row */
@media(min-width:881px){
  .k-machine__meta h3{min-height:1.05em}
  .k-machine__meta p:not(.k-machine__best){min-height:calc(1.6em * 3)}
}
@media(max-width:880px){.k-fleet__grid{grid-template-columns:1fr}.k-machine{min-height:340px}}

/* ════════════════════════════════════════════════════════════
   5b · K-SHEETS — data-sheet downloads on their own LIGHT section
   after the dark fleet band (dark = cinematic imagery; a reference
   table reads on a light ground). White ground between the dark
   k-fleet and bone k-bento keeps the page's alternation. Header
   speaks the light-section grammar (eyebrow + Lovelo h2, per
   k-bento); rows are the approved hairline table, translated to
   ink-on-light. No yellow type on light (design-system rule) —
   yellow lives only in the eyebrow rule + the h2 dot.
   ════════════════════════════════════════════════════════════ */
.k-sheets{background:var(--white);padding:clamp(4.75rem,8.5vw,8rem) 0}
.k-sheets__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.k-sheets__head{max-width:760px;margin-bottom:clamp(2.2rem,3.4vw,3rem)}
.k-sheets__h{color:var(--black);font-size:clamp(2rem,3.6vw,3.2rem);margin:1.2rem 0 1rem}
.k-sheets__sub{font-family:var(--font-body);color:rgba(10,10,10,.72);font-size:1.02rem;line-height:1.66;max-width:60ch;margin:0}
.k-sheets__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.2vw,2rem)}
.k-sheets__cat{font-family:var(--font-sans);font-weight:700;font-size:.66rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--black);margin:0 0 .4rem;padding-bottom:.55rem;border-bottom:2px solid var(--black)}
.k-sheets__list{list-style:none;margin:0;padding:0}
.k-sheets__list li{border-bottom:1px solid rgba(10,10,10,.12)}
.k-sheets__list a{display:grid;grid-template-columns:1fr auto;grid-template-areas:"model stat" "file file";
  align-items:baseline;gap:.05rem .8rem;padding:.66rem .15rem;text-decoration:none;
  transition:background-color .25s var(--ease-mech)}
.k-sheets__model{grid-area:model;font-family:var(--font-sans);font-weight:700;font-size:.9rem;color:var(--black);line-height:1.35}
.k-sheets__stat{grid-area:stat;font-family:var(--font-sans);font-weight:700;font-size:.74rem;color:rgba(10,10,10,.55);white-space:nowrap}
.k-sheets__file{grid-area:file;font-family:var(--font-body);font-size:.72rem;color:rgba(10,10,10,.45)}
.k-sheets__list a:hover,.k-sheets__list a:focus-visible{background:rgba(10,10,10,.045)}
.k-sheets__list a:focus-visible{outline:2px solid var(--black);outline-offset:2px}
@media(max-width:1100px){.k-sheets__grid{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.k-sheets__grid{grid-template-columns:1fr;gap:1.5rem}}

/* ════════════════════════════════════════════════════════════
   5 · K-BENTO — sectors mosaic on bone. Its own 4-column
   geometry (feature + tall + two wides), not the About bento.
   ════════════════════════════════════════════════════════════ */
.k-bento{background:var(--bone);padding:clamp(4.75rem,8.5vw,8rem) 0}
.k-bento__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.k-bento__head{margin-bottom:2.8rem}
.k-bento__h{color:var(--black);font-size:clamp(2rem,3.6vw,3.2rem);margin-top:1.2rem}
.k-bento__grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:215px;gap:1.1rem}
.k-tile{position:relative;overflow:hidden;display:flex;align-items:flex-end;border-radius:9px}
.k-tile--feature{grid-column:span 2;grid-row:span 2}
.k-tile--tall{grid-row:span 2}
.k-tile--wide{grid-column:span 2}
.k-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-mech)}
.k-tile:hover img{transform:scale(1.04)}
.k-tile__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.06) 40%,rgba(10,10,10,.88) 100%)}
.k-tile__meta{position:relative;z-index:2;padding:1.4rem}
.k-tile__meta h3{font-family:var(--font-sans);font-weight:800;font-size:1.02rem;color:var(--white);margin:0 0 .3rem}
.k-tile--feature .k-tile__meta h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.7rem;letter-spacing:.02em}
.k-tile__meta p{font-family:var(--font-body);color:rgba(255,255,255,.82);font-size:.85rem;line-height:1.5;margin:0}
@media(max-width:960px){
  /* Mobile: reset the desktop mosaic spans → an EVEN 2-col grid (no orphan cell).
     Construction (feature) + Oil & gas (last tile) stay full-width bands; the four
     middle sectors sit as equal squares between them (2×2). 6 tiles tile cleanly. */
  .k-bento__grid{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(195px,auto)}
  /* ^ floor-not-fixed rows: same clip class as the About c-bento (audit 2026-07-08) —
     fixed rows clip captions when text wraps taller than the row on narrow phones. */
  .k-bento__grid > .k-tile{grid-column:auto;grid-row:auto}
  .k-bento__grid > .k-tile--feature,
  .k-bento__grid > .k-tile:last-child{grid-column:1 / -1}
}

/* ════════════════════════════════════════════════════════════
   6 · K-WHY — the spec sheet. Each differentiator as a ruled
   row with a Lovelo display title (type is the hero), anchored
   by a photographic card of the fleet on the right.
   ════════════════════════════════════════════════════════════ */
.k-why{background:radial-gradient(135% 130% at 84% -10%,var(--g-100) 0%,var(--white) 58%);padding:clamp(4.75rem,8.5vw,8rem) 0}
.k-why__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.k-why__head{max-width:820px;margin-bottom:clamp(2.5rem,4.2vw,3.6rem)}
.k-why__h{color:var(--black);font-size:clamp(2.2rem,4vw,3.4rem);margin:1.2rem 0 1.1rem}
.k-why__sub{font-family:var(--font-body);color:var(--g-700);font-size:1.05rem;line-height:1.66;max-width:60ch}
.k-why__grid{display:grid;grid-template-columns:1.18fr .82fr;gap:clamp(2.75rem,5vw,5.5rem);align-items:start}
.k-why__list{list-style:none;margin:0;padding:0}
.k-why__row{position:relative;padding:clamp(1.7rem,2.4vw,2.3rem) 0 clamp(1.7rem,2.4vw,2.3rem) 2.3rem;border-top:1px solid var(--g-300)}
.k-why__row:first-child{border-top:0;padding-top:0}
.k-why__row::before{content:"";position:absolute;left:0;top:calc(clamp(1.7rem,2.4vw,2.3rem) + .2em);width:15px;height:15px;
  background:var(--yellow);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%);filter:drop-shadow(0 3px 5px rgba(10,10,10,.14))}
.k-why__row:first-child::before{top:.2em}
.k-why__row h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:.02em;color:var(--black);margin:0 0 .65rem;line-height:1.08}
.k-why__row p{font-family:var(--font-body);color:var(--g-700);font-size:1rem;line-height:1.68;margin:0;max-width:60ch;text-wrap:pretty}
.k-why__media{position:sticky;top:110px;margin:0;overflow:hidden;border-radius:14px;
  box-shadow:0 36px 70px -34px rgba(10,10,10,.4),0 12px 28px -16px rgba(10,10,10,.14)}
.k-why__media img{display:block;width:100%;height:100%;min-height:460px;object-fit:cover}
.k-why__media::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:34px;background:var(--yellow);
  clip-path:polygon(0 100%,0 35%,100% 100%)}
@media(max-width:900px){
  .k-why__grid{grid-template-columns:1fr}
  .k-why__media{position:static;max-width:560px}
  .k-why__media img{min-height:300px}
}

/* boom diagram station labels (SVG text) */
.k-boom__lbl{font-family:var(--font-sans);font-weight:700;font-size:10px;letter-spacing:.08em;
  text-transform:uppercase;fill:var(--g-600)}

/* ════════════════════════════════════════════════════════════
   HERO — page-specific photo crop only; the shared hero elevation
   (settle / parallax / line-rise / base draw / tonality) now lives
   in projects.css (site-wide rollout 2026-07-01).
   ════════════════════════════════════════════════════════════ */
.sd-pg-crane .prj-hero__bg img{object-position:center 55%}

/* 2026-07-02 mobile polish — touch hit-area for the two decision links. */
@media (pointer: coarse) {
  .k-way__link { padding-block: 10px; margin-block: -10px; }
}