/* ==========================================================================
   Creatio Construction: Excavators category page styles
   Loaded only by excavators.html, after style.css. Every class here starts
   with "ex-" (or sits under .page-excavators), so the homepage, Services,
   Equipment Overview and Backhoes are not affected.
   The look is the cut and the strata: a split hero with the machine photo
   cut in benches like an excavated slope, layered earth bands, faint
   contour lines and a single large feature card for the one unit.

   CONTENTS
   01  Page tokens and navigation state
   02  Hero
   03  Strata band
   04  Introduction and fact panel
   05  The CAT 320GC
   06  Uses
   07  Excavator or backhoe
   08  Why Creatio
   09  Operator option
   10  Service area
   11  Request a quote and related links
   12  FAQ
   13  Motion preferences
   14  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-excavators {
  --ex-stone: #ece6db;
  --ex-stone-2: #f6f3ee;
  --ex-sand: #d9c6a3;
  --ex-clay: #a88a5c;
  --ex-line: rgba(60, 48, 30, .14);
  --ex-graphite: #141517;
  --ex-plate: #1c1d20;
  --ex-plate-line: rgba(255, 255, 255, .1);
  --ex-brass-text: #6f5830; /* darker brass for small text on light surfaces (5.4:1 on stone, 6.7:1 on white) */
  /* earth layers, used as a band under the hero and above the footer */
  --ex-strata: linear-gradient(180deg,
    var(--ex-graphite) 0 18%,
    #2a2723 18% 30%,
    var(--ex-clay) 30% 44%,
    #c3a97c 44% 62%,
    var(--ex-sand) 62% 80%,
    var(--ex-stone) 80% 100%);
}

/* The submenu link for this page */
.page-excavators .nav__sub a[aria-current="page"] { color: var(--accent); }


/* 02 HERO ================================================================== */
.ex-hero { position: relative; isolation: isolate; overflow: hidden; background: var(--ex-graphite); color: var(--white); }
/* faint topographic contour lines */
.ex-hero__contours {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background:
    repeating-radial-gradient(ellipse at 18% 120%, transparent 0 38px, rgba(196, 168, 116, .09) 38px 39px),
    repeating-radial-gradient(ellipse at 95% -20%, transparent 0 52px, rgba(255, 255, 255, .04) 52px 53px);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 85%);
  mask-image: linear-gradient(90deg, #000 0%, #000 45%, transparent 85%);
}
.ex-hero__layout { display: grid; }
.ex-hero__content { padding: 30px var(--gutter) 34px; }

.ex-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 26px; font: 500 .76rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); }
.ex-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.ex-crumbs li + li::before { content: ""; width: 14px; height: 1px; background: var(--accent); }
.ex-crumbs a { display: inline-block; padding: 6px 0; color: rgba(255, 255, 255, .84); text-decoration: none; }
.ex-crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.ex-crumbs [aria-current] { color: var(--white); }

.ex-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 18px; font: 500 .78rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .78); }
.ex-hero__kicker span { padding: 7px 10px 6px; background: var(--accent); color: var(--black); }
.ex-hero__title { max-width: 11ch; margin-bottom: 22px; color: var(--white); font-size: clamp(2.5rem, 7.6vw, 4.9rem); line-height: .96; letter-spacing: -.045em; }
.ex-hero__lead { max-width: 52ch; margin-bottom: 30px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .84); }
.ex-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ex-hero__actions .btn { flex: 1 1 220px; }

.ex-hero__facts { display: grid; grid-template-columns: 1fr 1fr; margin: 0 var(--gutter) 40px; border-top: 1px solid rgba(255, 255, 255, .16); }
.ex-hero__facts div { padding: 14px 12px 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ex-hero__facts div:nth-child(even) { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
.ex-hero__facts dt { margin-bottom: 4px; font: 500 .72rem/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--accent); }
.ex-hero__facts dd { color: var(--white); font: 600 1rem/1.25 var(--font-head); }

/* Photo: on phones it sits above the text at its own 3:2 shape */
.ex-hero__media { position: relative; order: -1; aspect-ratio: 3 / 2; overflow: hidden; background: var(--ex-plate); }
.ex-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.ex-hero__media::after { /* gentle shade at the bottom so the tag stays readable */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 55%, rgba(10, 10, 11, .6) 100%);
}
.ex-hero__tag {
  position: absolute; left: 14px; bottom: 12px; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 500 .74rem/1.3 var(--font-head); letter-spacing: .08em; color: var(--white);
}
.ex-hero__tag span { padding: 5px 8px 4px; border: 1px solid var(--accent); color: var(--accent); letter-spacing: .18em; text-transform: uppercase; font-size: .7rem; }


/* 03 STRATA BAND ============================================================ */
.ex-strata { height: 26px; background: var(--ex-strata); }


/* 04 INTRODUCTION AND FACT PANEL ============================================ */
.ex-intro { background: var(--white); }
.ex-intro__grid { display: grid; gap: 44px; align-items: start; }
.ex-intro__text .section-title { max-width: 15ch; margin-bottom: 28px; }
.ex-intro__statement { max-width: 30ch; margin-bottom: 28px; padding-left: 20px; border-left: 3px solid var(--accent); color: var(--black); font: 500 clamp(1.3rem, 2.3vw, 1.8rem)/1.35 var(--font-head); letter-spacing: -.02em; }
.ex-intro__text p:last-child { margin-bottom: 0; }
.ex-intro__text a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.ex-glance { position: relative; padding: 30px 24px 26px; background: var(--ex-stone); }
.ex-glance::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--ex-strata); }
.ex-glance__title { margin: 6px 0 16px; font-size: 1.2rem; }
.ex-glance__list div { display: grid; gap: 2px; padding: 12px 0; border-top: 1px solid var(--ex-line); }
.ex-glance__list dt { font: 600 .72rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--ex-brass-text); }
.ex-glance__list dd { color: var(--ink); line-height: 1.45; }
.ex-glance__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 10px; color: var(--black); font: 600 .95rem var(--font-head); text-decoration: none; border-bottom: 1px solid var(--accent); }
.ex-glance__link .icon { transition: transform .3s var(--ease); }
.ex-glance__link:hover .icon { transform: translateX(4px); }


/* 05 THE CAT 320GC ========================================================== */
.ex-model { overflow: hidden; background: var(--ex-stone-2); }
.ex-model__mark {
  display: none;
  position: absolute; z-index: 0; right: -1vw; top: 34px; margin: 0;
  font: 600 clamp(5rem, 17vw, 15rem)/1 var(--font-head); letter-spacing: -.05em;
  color: transparent; -webkit-text-stroke: 1px rgba(10, 10, 11, .08);
  pointer-events: none; user-select: none; white-space: nowrap;
}
.ex-model .container { position: relative; z-index: 1; }

.ex-unit { display: grid; background: var(--white); border: 1px solid var(--ex-line); box-shadow: var(--shadow-sm); }
.ex-unit__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--ex-stone); }
.ex-unit__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.ex-unit__body { padding: 28px 22px 30px; }
.ex-unit__index { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font: 500 .72rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-500); }
.ex-unit__index span { padding: 5px 8px 4px; background: var(--black); color: var(--accent); }
.ex-unit__name { margin-bottom: 16px; font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
.ex-unit__desc { color: var(--ink); font-size: 1.08rem; }
.ex-unit__label { margin: 0 0 8px; font: 600 .72rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--ex-brass-text); }
.ex-unit__uses li { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--ex-line); color: var(--ink); line-height: 1.5; }
.ex-unit__uses .icon { margin-top: 5px; color: var(--ex-clay); font-size: .85rem; }
.ex-unit__operator { display: flex; gap: 12px; align-items: flex-start; margin: 22px 0 24px; padding: 14px 16px; background: var(--ex-stone); line-height: 1.5; color: var(--ink); }
.ex-unit__operator .icon { margin-top: 3px; color: var(--ex-brass-text); font-size: 1.1rem; }
.ex-unit__operator strong { color: var(--black); }
.ex-unit__cta { width: 100%; }
.ex-unit__suited { order: 2; padding: 0 22px 30px; }

.ex-model__note { display: flex; gap: 14px; align-items: flex-start; max-width: 80ch; margin: 28px 0 0; font-size: .95rem; line-height: 1.6; }
.ex-model__note .icon { margin-top: 5px; color: var(--ex-brass-text); }
.ex-model__note strong { color: var(--black); }


/* 06 USES =================================================================== */
.ex-uses { overflow: hidden; background: var(--ex-graphite); color: rgba(255, 255, 255, .76); }
.ex-uses .container { position: relative; z-index: 1; }
.ex-uses__grid { display: grid; gap: 40px; align-items: start; }
.ex-uses__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; clip-path: polygon(0 0, 100% 0, 100% 84%, 92% 84%, 92% 100%, 0 100%); }
.ex-uses__photo figcaption { margin-top: 12px; font-size: .86rem; color: rgba(255, 255, 255, .6); }

.ex-tasks { display: grid; counter-reset: ex-task; }
.ex-tasks li { position: relative; padding: 22px 0 20px 56px; border-top: 1px solid var(--ex-plate-line); counter-increment: ex-task; }
.ex-tasks li::before {
  content: counter(ex-task, decimal-leading-zero);
  position: absolute; left: 0; top: 22px; width: 38px; padding-top: 6px; border-top: 2px solid var(--accent);
  font: 600 .82rem/1 var(--font-head); letter-spacing: .1em; color: var(--accent);
}
.ex-tasks h3 { margin-bottom: 6px; color: var(--white); }
.ex-tasks p { margin: 0; line-height: 1.6; }


/* 07 EXCAVATOR OR BACKHOE =================================================== */
.ex-choose { background: var(--ex-stone); }
.ex-choose__head { max-width: 640px; margin-bottom: clamp(36px, 5vw, 56px); }
.ex-choose__head .section-title { margin-bottom: 18px; }
.ex-choose__head p:last-child { margin: 0; color: var(--ink); }
.ex-choose__grid { display: grid; gap: 14px; align-items: stretch; }
.ex-choice { padding: 28px 22px; background: var(--white); border-top: 3px solid var(--ex-clay); }
.ex-choice--primary { background: var(--black); border-top-color: var(--accent); color: rgba(255, 255, 255, .82); }
.ex-choice__label { margin: 0 0 12px; font: 600 .76rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--ex-brass-text); }
.ex-choice--primary .ex-choice__label { color: var(--accent); }
.ex-choice li { position: relative; padding: 12px 0 12px 22px; border-top: 1px solid var(--ex-line); line-height: 1.5; color: var(--ink); }
.ex-choice--primary li { border-top-color: var(--ex-plate-line); color: rgba(255, 255, 255, .86); }
.ex-choice li::before { content: ""; position: absolute; left: 0; top: 21px; width: 9px; height: 9px; border: 2px solid var(--ex-clay); }
.ex-choice--primary li::before { border-color: var(--accent); background: var(--accent); }
.ex-choice__link { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; color: var(--black); font: 600 .95rem var(--font-head); text-decoration: none; border-bottom: 1px solid var(--accent); }
.ex-choice__link:hover .icon { transform: translateX(4px); }
.ex-choice__link .icon { transition: transform .3s var(--ease); }
.ex-choose__or { display: grid; place-items: center; justify-self: center; width: 48px; height: 48px; margin: 0; border-radius: 50%; background: var(--accent); color: var(--black); font: 600 .8rem/1 var(--font-head); letter-spacing: .14em; text-transform: uppercase; }
.ex-choose__foot { margin: 28px 0 0; color: var(--ink); }
.ex-choose__foot a, .ex-area a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }


/* 08 WHY CREATIO ============================================================ */
.ex-why { background: var(--white); }
.ex-why__grid { display: grid; gap: 1px; background: var(--ex-line); border: 1px solid var(--ex-line); }
.ex-why__item { padding: 28px 22px; background: var(--white); }
.ex-why__item h3 { margin-bottom: 8px; }
.ex-why__item p:last-child { margin: 0; line-height: 1.6; }
.ex-why__icon { display: inline-grid; place-items: center; width: 46px; height: 46px; margin-bottom: 18px; background: var(--ex-stone); color: var(--ex-brass-text); font-size: 1.15rem; }
.ex-why__item--wide { background: var(--black); color: rgba(255, 255, 255, .78); }
.ex-why__item--wide h3 { color: var(--white); }
.ex-why__big { margin: 0 0 6px; font: 600 clamp(3.4rem, 8vw, 5.4rem)/1 var(--font-head); letter-spacing: -.05em; color: var(--accent); }


/* 09 OPERATOR OPTION ======================================================== */
.ex-operator { background: var(--black); color: rgba(255, 255, 255, .78); }
.ex-operator__grid { display: grid; gap: 40px; align-items: start; }
.ex-operator__head .section-title { max-width: 12ch; margin-bottom: 22px; color: var(--white); }
.ex-operator__head p:last-child { max-width: 46ch; margin: 0; }
.ex-modes { display: grid; gap: 14px; }
.ex-mode { padding: 26px 22px; background: var(--ex-plate); border: 1px solid var(--ex-plate-line); }
.ex-mode--accent { border-color: var(--accent); background: linear-gradient(160deg, rgba(196, 168, 116, .14), rgba(196, 168, 116, 0) 60%), var(--ex-plate); }
.ex-mode__tag { margin: 0 0 10px; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ex-mode h3 { margin-bottom: 8px; color: var(--white); }
.ex-mode p:last-child { margin: 0; line-height: 1.6; }
.ex-modes__note { display: flex; gap: 12px; align-items: flex-start; margin: 6px 0 0; font-size: .95rem; line-height: 1.55; }
.ex-modes__note .icon { margin-top: 4px; color: var(--accent); }


/* 10 SERVICE AREA =========================================================== */
.ex-area { position: relative; background: var(--ex-graphite); color: rgba(255, 255, 255, .8); }
.ex-area__media { aspect-ratio: 4 / 3; overflow: hidden; }
.ex-area__media img { width: 100%; height: 100%; object-fit: cover; object-position: 35% 60%; }
.ex-area__inner { position: relative; padding-top: 0; padding-bottom: 56px; }
.ex-area__panel { position: relative; margin-top: -28px; padding: 30px 22px 28px; background: var(--ex-graphite); border-top: 3px solid var(--accent); }
.ex-area__panel .section-title { max-width: 13ch; margin-bottom: 18px; color: var(--white); font-size: clamp(1.9rem, 3.6vw, 2.9rem); }
.ex-area__panel > p { max-width: 54ch; }
.ex-route { position: relative; display: grid; gap: 0; margin: 22px 0; }
.ex-route::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 14px; width: 1px; background: rgba(196, 168, 116, .5); }
.ex-route li { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 0 7px 26px; color: var(--white); font: 500 1rem/1.3 var(--font-head); }
.ex-route li::before { content: ""; position: absolute; left: 1px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ex-graphite); border: 2px solid var(--accent); }
.ex-route li.is-base::before { background: var(--accent); }
.ex-route small { padding: 3px 7px 2px; background: var(--accent); color: var(--black); font: 600 .7rem/1.2 var(--font-head); letter-spacing: .14em; text-transform: uppercase; }
.ex-area__note { margin: 0; font-size: .95rem; color: rgba(255, 255, 255, .68); }


/* 11 REQUEST A QUOTE AND RELATED LINKS ====================================== */
.ex-quote { background: var(--white); }
.ex-quote__grid { display: grid; gap: 40px; align-items: start; }
.ex-quote__main .section-title { margin-bottom: 18px; }
.ex-quote__intro { max-width: 56ch; margin-bottom: 28px; color: var(--ink); }
.ex-prompts { display: grid; gap: 12px; counter-reset: ex-prompt; }
.ex-prompts li { position: relative; padding: 22px 20px 20px 70px; background: var(--ex-stone-2); border-left: 3px solid var(--ex-clay); counter-increment: ex-prompt; }
.ex-prompts li::before {
  content: counter(ex-prompt);
  position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 34px; height: 34px;
  background: var(--black); color: var(--accent); font: 600 .95rem/1 var(--font-head);
}
.ex-prompts h3 { margin-bottom: 4px; font-size: 1.08rem; }
.ex-prompts p { margin: 0; line-height: 1.55; }
.ex-quote__extra { margin: 18px 0 0; font-size: .95rem; color: var(--gray-500); }

.ex-quote__box { display: grid; gap: 12px; padding: 30px 22px; background: var(--ex-graphite); color: rgba(255, 255, 255, .8); }
.ex-quote__kicker { margin: 0; font: 500 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.ex-quote__box h3 { margin: 0 0 8px; color: var(--white); font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.ex-quote__lines { display: grid; gap: 4px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--ex-plate-line); }
.ex-quote__lines a { display: flex; align-items: center; gap: 12px; min-height: 40px; color: var(--white); font-weight: 700; font-size: .95rem; text-decoration: none; overflow-wrap: anywhere; }
.ex-quote__lines a .icon { color: var(--accent); }
.ex-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.ex-related { margin-top: clamp(48px, 6vw, 80px); padding-top: 26px; border-top: 1px solid var(--line-light); }
.ex-related__title { margin-bottom: 14px; font: 600 .76rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-500); }
.ex-related ul { display: flex; flex-wrap: wrap; gap: 10px; }
.ex-related a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 16px; border: 1px solid var(--line-light); color: var(--black); font: 500 .92rem/1.2 var(--font-head); text-decoration: none; transition: border-color .3s, background-color .3s; }
.ex-related a .icon { font-size: .8rem; color: var(--ex-clay); transition: transform .3s var(--ease); }
.ex-related a:hover { border-color: var(--black); background: var(--ex-stone-2); }
.ex-related a:hover .icon { transform: translateX(3px); }


/* 12 FAQ ==================================================================== */
.ex-faq { border-top: 1px solid var(--line-light); }
.ex-faq .faq__intro .section-title { max-width: 12ch; }


/* 13 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .ex-glance__link .icon, .ex-choice__link .icon, .ex-related a, .ex-related a .icon { transition: none; }
  .ex-glance__link:hover .icon, .ex-choice__link:hover .icon, .ex-related a:hover .icon { transform: none; }
}


/* 14 RESPONSIVE ============================================================= */
@media (max-width: 379px) {
  .ex-quote__lines a { font-size: .86rem; }
  .ex-hero__facts div:nth-child(even) { padding-left: 10px; }
  .ex-hero__facts dd { font-size: .92rem; }
  .ex-prompts li { padding-left: 62px; }
  .ex-prompts li::before { left: 16px; }
  .ex-hero__tag { left: 10px; right: 10px; }
}

@media (min-width: 700px) {
  .ex-area__media { aspect-ratio: 16 / 9; }
  .ex-hero__content { padding-top: 36px; padding-bottom: 40px; }
  .ex-hero__facts { margin-bottom: 52px; }
  .ex-hero__facts { grid-template-columns: repeat(4, 1fr); }
  .ex-hero__facts div { padding-left: 14px; border-left: 1px solid rgba(255, 255, 255, .1); }
  .ex-hero__facts div:first-child { padding-left: 0; border-left: 0; }
  .ex-hero__tag { left: 20px; bottom: 18px; }
  .ex-strata { height: 32px; }

  .ex-glance { padding: 34px 32px 30px; }
  .ex-model__mark { display: block; }
  .ex-glance__list div { grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline; }

  .ex-unit__body { padding: 34px 34px 36px; }
  .ex-unit__suited { padding: 0 34px 36px; }
  .ex-uses__grid { gap: 48px; }
  .ex-tasks { grid-template-columns: 1fr 1fr; column-gap: 36px; }

  .ex-choose__grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; }
  .ex-choose__or { align-self: center; }
  .ex-choice { padding: 34px 30px; }

  .ex-why__grid { grid-template-columns: 1fr 1fr; }
  .ex-why__item { padding: 32px 28px; }
  .ex-why__item--wide { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; column-gap: 32px; align-items: center; }
  .ex-why__item--wide .ex-why__big { grid-row: span 2; margin: 0; }

  .ex-modes { grid-template-columns: 1fr 1fr; }
  .ex-modes__note { grid-column: 1 / -1; }
  .ex-mode { padding: 30px 28px; }

  .ex-area__panel { margin-top: -90px; max-width: 640px; padding: 38px 36px 34px; }
  .ex-route { grid-template-columns: 1fr 1fr; column-gap: 24px; }
  .ex-route li.is-base { grid-column: 1 / -1; }
  .ex-route::before { display: none; }

  .ex-prompts { grid-template-columns: 1fr 1fr; }
  .ex-quote__box { padding: 36px 32px; }
}

@media (min-width: 1024px) {
  /* Split hero: headline column inside the container line, photo running to the right edge */
  .ex-hero__layout {
    grid-template-columns: max(var(--gutter), calc((100% - var(--container)) / 2)) minmax(0, 4.4fr) minmax(0, 7fr);
    grid-template-rows: 1fr auto;
    align-items: center;
  }
  .ex-hero__content { grid-column: 2; grid-row: 1 / span 2; padding: 40px 44px 48px 0; }
  .ex-hero__media {
    grid-column: 3; grid-row: 1; order: 0; align-self: end; margin-top: 40px;
    /* the photo keeps its 3:2 shape so the whole machine stays in frame;
       benches are cut into the left edge, like a stepped excavation */
    clip-path: polygon(8% 0, 100% 0, 100% 100%, 0 100%, 0 70%, 2.7% 70%, 2.7% 45%, 5.4% 45%, 5.4% 20%, 8% 20%);
  }
  .ex-hero__tag { left: auto; right: 24px; bottom: 22px; }
  .ex-hero__actions .btn { flex: 0 1 auto; white-space: nowrap; }
  .ex-hero__facts { grid-column: 3; grid-row: 2; margin: 0 var(--gutter) 40px 8%; }
  .ex-hero__title { font-size: clamp(3rem, 5.3vw, 4.9rem); }
  .ex-hero__facts dd { font-size: .98rem; }

  .ex-intro__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4.4fr); gap: clamp(48px, 6vw, 96px); }
  .ex-glance { position: sticky; top: calc(var(--header-h) + 24px); }
  .ex-glance__list div { grid-template-columns: 1fr; gap: 2px; }

  .ex-unit { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto 1fr; }
  .ex-unit__media { grid-column: 1; grid-row: 1; }
  .ex-unit__suited { grid-column: 1; grid-row: 2; order: 0; padding: 28px 40px 34px; border-top: 1px solid var(--ex-line); }
  .ex-unit__body { grid-column: 2; grid-row: 1 / span 2; border-left: 1px solid var(--ex-line); }
  .ex-unit__body { display: flex; flex-direction: column; padding: 40px 40px 42px; }

  .ex-uses__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(40px, 5vw, 88px); }
  .ex-uses__photo { position: sticky; top: calc(var(--header-h) + 24px); }

  .ex-why__grid { grid-template-columns: 1.15fr 1fr 1fr; }
  .ex-why__item--wide { grid-column: 1; grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 40px 36px; }
  .ex-why__item--wide .ex-why__big { margin: 0 0 18px; font-size: clamp(5rem, 9vw, 7.5rem); }

  .ex-operator__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }

  .ex-area { display: grid; }
  .ex-area__media { grid-area: 1 / 1; aspect-ratio: auto; height: 100%; min-height: clamp(600px, 48vw, 800px); }
  .ex-area__inner { grid-area: 1 / 1; display: flex; align-items: center; padding-top: 56px; padding-bottom: 56px; }
  .ex-area__panel { margin-top: 0; max-width: 520px; background: rgba(20, 21, 23, .9); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }

  .ex-quote__grid { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 48px; }
  .ex-quote__box { position: sticky; top: calc(var(--header-h) + 24px); }
}

@media (min-width: 1180px) {
  .page-excavators .nav__link[aria-current="true"] { color: var(--white); }
  .page-excavators .nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .ex-hero__content { padding-right: 64px; }
  .ex-hero__facts { margin-right: max(var(--gutter), 200px); }
  .ex-uses__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .ex-quote__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 56px; }
}

@media (min-width: 1400px) {
  .ex-unit__body { padding: 48px 48px 50px; }
}