/* ==========================================================================
   Creatio Construction: Backhoes category page styles
   Loaded only by backhoes.html, after style.css. Every class here starts
   with "bh-" (or sits under .page-backhoes), so the homepage, Services and
   Equipment Overview are not affected.
   The look is the dig line: warm stone surfaces, graphite bands, measured
   brass rules and an annotated machine photo, so the page reads as part of
   the equipment section without repeating the fleet yard cards.

   CONTENTS
   01  Page tokens and navigation state
   02  Hero
   03  Introduction and annotated photo
   04  Fit check
   05  Model cards
   06  Common jobs
   07  How to rent
   08  Operators and service area
   09  Related services
   10  FAQ
   11  Motion preferences
   12  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-backhoes {
  --bh-stone: #ebe5da;
  --bh-stone-2: #f5f2ec;
  --bh-stone-line: rgba(60, 48, 30, .14);
  --bh-graphite: #151618;
  --bh-plate: #1d1e21;
  --bh-plate-line: rgba(255, 255, 255, .1);
  --bh-brass-text: #6f5830; /* darker brass for small text on light surfaces (5.4:1 on stone, 6.7:1 on white) */
  /* measured rule: brass ticks every 12px, a longer tick every 60px */
  --bh-rule:
    repeating-linear-gradient(90deg, var(--accent) 0 1px, transparent 1px 60px) 0 0 / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(196, 168, 116, .55) 0 1px, transparent 1px 12px) 0 6px / 100% 6px no-repeat;
}

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


/* 02 HERO ================================================================== */
.bh-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(620px, calc(100vh - 42px - var(--header-h)), 900px);
  min-height: clamp(620px, calc(100svh - 42px - var(--header-h)), 900px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white); background: var(--black);
}
.bh-hero__media { position: absolute; inset: 0; z-index: -3; }
.bh-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 40%; }
.bh-hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, .55) 0%, rgba(10, 10, 11, .1) 26%, rgba(10, 10, 11, .4) 60%, rgba(10, 10, 11, .95) 100%),
    linear-gradient(90deg, rgba(10, 10, 11, .9) 0%, rgba(10, 10, 11, .55) 40%, rgba(10, 10, 11, 0) 75%);
}
.bh-hero__inner { position: relative; display: grid; gap: 28px; padding-top: 28px; padding-bottom: 44px; }

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

.bh-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); }
.bh-hero__kicker span { padding: 7px 10px 6px; border: 1px solid var(--accent); color: var(--accent); }
.bh-hero__title { max-width: 13ch; margin-bottom: 22px; color: var(--white); font-size: clamp(2.6rem, 7vw, 5.8rem); line-height: .96; letter-spacing: -.045em; }
.bh-hero__lead { max-width: 56ch; margin-bottom: 32px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .86); }
.bh-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.bh-hero__actions .btn { flex: 1 1 220px; }

/* Unit strip along the bottom edge of the hero */
.bh-hero__strip { position: relative; border-top: 1px solid rgba(255, 255, 255, .16); background: rgba(10, 10, 11, .72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.bh-hero__strip::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 12px; background: var(--bh-rule); opacity: .5; pointer-events: none; }
.bh-hero__units { display: grid; grid-template-columns: repeat(3, 1fr); }
.bh-hero__units li { border-left: 1px solid rgba(255, 255, 255, .12); }
.bh-hero__units li:first-child { border-left: 0; }
.bh-hero__units a { display: flex; flex-direction: column; justify-content: center; gap: 4px; min-height: 64px; padding: 14px 12px; color: var(--white); text-decoration: none; font: 600 .98rem/1.1 var(--font-head); transition: background-color .3s; }
.bh-hero__units a span { font: 500 .66rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.bh-hero__units a:hover { background: rgba(255, 255, 255, .06); }


/* 03 INTRODUCTION AND ANNOTATED PHOTO ====================================== */
.bh-intro { background: var(--white); }
.bh-intro__grid { display: grid; gap: 44px; align-items: start; }
.bh-intro__text .section-title { max-width: 14ch; margin-bottom: 26px; }
.bh-intro__text p:last-child { margin-bottom: 0; }

.bh-anatomy { margin: 0; }
.bh-anatomy__frame { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--bh-stone); }
.bh-anatomy__frame img { width: 100%; height: 100%; object-fit: cover; }
.bh-anatomy__pin {
  position: absolute; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%;
  background: var(--black); border: 2px solid var(--accent); box-shadow: 0 0 0 6px rgba(196, 168, 116, .28);
  display: grid; place-items: center; color: var(--accent); font: 600 .9rem/1 var(--font-head);
}
.bh-anatomy__pin--front { left: 17%; top: 22%; }
.bh-anatomy__pin--rear { left: 83%; top: 52%; }
.bh-anatomy__pin--front::after { content: "A"; }
.bh-anatomy__pin--rear::after { content: "B"; }
.bh-anatomy__keys { display: grid; gap: 1px; margin-top: 1px; background: var(--bh-stone-line); }
.bh-anatomy__keys li { padding: 16px 18px; background: var(--bh-stone-2); font-size: .95rem; line-height: 1.5; }
.bh-anatomy__keys strong { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; color: var(--black); font: 600 1rem/1.3 var(--font-head); }
.bh-anatomy__keys strong span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--black); color: var(--accent); font-size: .75rem; }
.bh-anatomy figcaption { margin-top: 12px; font-size: .86rem; color: var(--gray-500); }


/* 04 FIT CHECK ============================================================= */
.bh-fit { margin-top: clamp(56px, 7vw, 96px); padding: 32px 22px; background: var(--bh-stone); border-top: 3px solid var(--black); }
.bh-fit__title { margin-bottom: 22px; font-size: clamp(1.35rem, 2.2vw, 1.75rem); letter-spacing: -.02em; }
.bh-fit__cols { display: grid; gap: 28px; }
.bh-fit__label { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 600 .74rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--black); }
.bh-fit__label .icon { color: var(--bh-brass-text); }
.bh-fit__list li { position: relative; padding: 13px 0 13px 22px; border-top: 1px solid var(--bh-stone-line); line-height: 1.5; color: var(--ink); }
.bh-fit__list li::before { content: ""; position: absolute; left: 0; top: 21px; width: 8px; height: 8px; background: var(--accent); }
.bh-fit__list--alt li::before { background: none; border: 1px solid var(--black); }
.bh-fit__list a { display: inline-flex; align-items: center; min-height: 32px; margin-left: 8px; padding: 2px 10px; border: 1px solid var(--black); color: var(--black); font: 500 .78rem var(--font-head); letter-spacing: .04em; text-decoration: none; white-space: nowrap; transition: background-color .25s, color .25s; }
.bh-fit__list a:hover { background: var(--black); color: var(--white); }


/* 05 MODEL CARDS ===========================================================
   All three photos sit in the same 4:3 frame at every width. */
.bh-models { background: var(--bh-stone); }
.bh-models .section-title { max-width: 18ch; }
.bh-models__grid { display: grid; gap: 22px; }
.bh-model { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--bh-stone-line); transition: box-shadow .45s var(--ease), border-color .35s; }
.bh-model:hover, .bh-model:focus-within { border-color: rgba(111, 88, 48, .6); box-shadow: 0 30px 50px -34px rgba(10, 10, 11, .55); }
.bh-model__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel); }
.bh-model__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.bh-model:hover .bh-model__media img { transform: scale(1.04); }
.bh-model__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 12px; background: var(--bh-rule); opacity: .9; }
.bh-model__body { display: flex; flex-direction: column; flex: 1; padding: 26px 24px 24px; }
.bh-model__index { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; font: 500 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--gray-500); }
.bh-model__index span { color: var(--bh-brass-text); font-weight: 600; }
.bh-model__name { margin-bottom: 14px; font-size: clamp(1.9rem, 3vw, 2.4rem); line-height: 1; letter-spacing: -.035em; }
.bh-model__label { margin: 4px 0 8px; font: 600 .7rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--black); }
.bh-model__uses { margin-bottom: 24px; }
.bh-model__uses li { position: relative; padding: 9px 0 9px 20px; border-top: 1px solid var(--line-light); font-size: .95rem; line-height: 1.45; }
.bh-model__uses li::before { content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; background: var(--accent); }
.bh-model__cta { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; min-height: 44px; margin-top: auto; padding: 10px 0; color: var(--black); font: 600 .95rem var(--font-head); text-decoration: none; border-bottom: 2px solid var(--accent); }
.bh-model__cta .icon { font-size: .85em; transition: transform .3s var(--ease); }
.bh-model__cta:hover .icon { transform: translateX(4px); }
.bh-models__note { max-width: 78ch; margin: 34px 0 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--accent); font-size: .95rem; color: var(--gray-700); }
.bh-models__note strong { color: var(--black); }


/* 06 COMMON JOBS ============================================================ */
.bh-jobs { background: var(--bh-graphite); color: rgba(255, 255, 255, .74); overflow: hidden; }
.bh-jobs .tech-grid { -webkit-mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 65%); mask-image: radial-gradient(ellipse at 80% 0%, #000 0%, transparent 65%); }
.bh-jobs > .container { position: relative; z-index: 1; }
.bh-jobs__grid { display: grid; gap: 40px; align-items: start; }
.bh-jobs__photo { margin: 0; }
.bh-jobs__photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border: 1px solid var(--bh-plate-line); }
.bh-jobs__photo figcaption { margin-top: 12px; font-size: .86rem; color: rgba(255, 255, 255, .6); }

.bh-log { counter-reset: job; display: grid; border-top: 1px solid var(--bh-plate-line); }
.bh-log li { counter-increment: job; position: relative; padding: 20px 0 20px 56px; border-bottom: 1px solid var(--bh-plate-line); }
.bh-log li::before { content: counter(job, decimal-leading-zero); position: absolute; left: 0; top: 22px; font: 600 .8rem/1 var(--font-head); letter-spacing: .14em; color: var(--accent); }
.bh-log h3 { margin: 0 0 6px; color: var(--white); font-size: 1.1rem; }
.bh-log p { margin: 0; font-size: .96rem; line-height: 1.55; }

.bh-scale { display: grid; gap: 1px; margin-top: clamp(48px, 6vw, 80px); background: var(--bh-plate-line); border: 1px solid var(--bh-plate-line); }
.bh-scale__item { padding: 28px 24px; background: var(--bh-plate); }
.bh-scale__item h3 { margin: 0 0 10px; color: var(--white); font-size: 1.25rem; }
.bh-scale__item h3::before { content: ""; display: block; width: 40px; height: 2px; margin-bottom: 16px; background: var(--accent); }
.bh-scale__item p { margin: 0; }


/* 07 HOW TO RENT ============================================================ */
.bh-rent { background: var(--white); }
.bh-rent__grid { display: grid; gap: 36px; align-items: start; }
.bh-brief { counter-reset: brief; display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
.bh-brief li { counter-increment: brief; position: relative; padding: 22px 20px 22px 66px; background: var(--white); }
.bh-brief li::before {
  content: counter(brief); position: absolute; left: 20px; top: 20px;
  display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--black);
  font: 600 .85rem/1 var(--font-head); color: var(--black);
}
.bh-brief h3 { margin: 0 0 4px; font-size: 1.05rem; }
.bh-brief p { margin: 0; font-size: .95rem; line-height: 1.5; }

.bh-quote { display: grid; gap: 14px; padding: 32px 24px; background: var(--bh-graphite); color: rgba(255, 255, 255, .76); border-top: 3px solid var(--accent); }
.bh-quote__kicker { margin: 0; font: 500 .72rem/1 var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.bh-quote h3 { margin: 0 0 4px; color: var(--white); font-size: 1.5rem; }
.bh-quote__steps { counter-reset: step; display: grid; gap: 12px; margin-bottom: 12px; }
.bh-quote__steps li { counter-increment: step; position: relative; padding-left: 34px; font-size: .96rem; line-height: 1.5; }
.bh-quote__steps li::before { content: counter(step); position: absolute; left: 0; top: 1px; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: var(--black); font: 600 .75rem/1 var(--font-head); }
.bh-quote .btn { width: 100%; }
.bh-quote__lines { display: grid; gap: 4px; margin-top: 6px; padding-top: 16px; border-top: 1px solid var(--bh-plate-line); }
.bh-quote__lines a { display: flex; align-items: center; gap: 10px; min-height: 40px; color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.bh-quote__lines a .icon { color: var(--accent); }
.bh-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }


/* 08 OPERATORS AND SERVICE AREA ============================================= */
.bh-field { position: relative; background: var(--black); color: rgba(255, 255, 255, .76); }
.bh-field::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 12px; background: var(--bh-rule); opacity: .6; }
.bh-field__head { margin-bottom: clamp(36px, 5vw, 60px); }
.bh-field__head .section-title { max-width: 22ch; color: var(--white); }
.bh-field__grid { display: grid; gap: 1px; background: var(--bh-plate-line); border: 1px solid var(--bh-plate-line); }
.bh-field__block { padding: 30px 24px; background: var(--bh-graphite); }
.bh-field__icon { display: inline-grid; place-items: center; width: 48px; height: 48px; margin-bottom: 18px; border: 1px solid rgba(196, 168, 116, .5); color: var(--accent); font-size: 20px; }
.bh-field__block h3 { margin: 0 0 12px; color: var(--white); font-size: 1.35rem; }
.bh-field__block p:last-child { margin-bottom: 0; }
.bh-places { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 22px; }
.bh-places li { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .22); color: var(--white); font: 500 .9rem/1.2 var(--font-head); }
.bh-places li.is-base { border-color: var(--accent); background: rgba(196, 168, 116, .14); }
.bh-places li small { color: var(--accent); font: 400 .82rem/1.2 var(--font-head); }
.bh-field__note { display: flex; gap: 12px; align-items: flex-start; padding-top: 18px; border-top: 1px solid var(--bh-plate-line); font-size: .95rem; }
.bh-field__note .icon { flex: none; margin-top: 4px; color: var(--accent); }


/* 09 RELATED SERVICES ======================================================= */
.bh-related { background: var(--bh-stone-2); }
.bh-related__grid { display: grid; gap: 36px; align-items: start; }
.bh-related .section-title { max-width: 14ch; margin-bottom: 20px; }
.bh-related__intro { max-width: 46ch; margin: 0; font-size: 1.0625rem; }
.bh-links { border-top: 1px solid var(--bh-stone-line); }
.bh-links li { border-bottom: 1px solid var(--bh-stone-line); }
.bh-links a {
  display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; row-gap: 2px;
  min-height: 64px; padding: 16px 4px; color: var(--black); text-decoration: none; transition: padding .3s var(--ease), background-color .3s;
}
.bh-links__name { font: 600 1.05rem/1.3 var(--font-head); }
.bh-links__desc { grid-column: 1; font-size: .92rem; line-height: 1.45; color: var(--gray-700); }
.bh-links a .icon { grid-column: 2; grid-row: 1 / span 2; color: var(--bh-brass-text); transition: transform .3s var(--ease); }
.bh-links a:hover { padding-left: 12px; background: rgba(196, 168, 116, .12); }
.bh-links a:hover .icon { transform: translateX(4px); }


/* 10 FAQ ==================================================================== */
.bh-faq .faq__intro .section-title { max-width: 12ch; }


/* 11 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .bh-model, .bh-model__media img, .bh-links a, .bh-model__cta .icon { transition: none; }
  .bh-model:hover .bh-model__media img { transform: none; }
  .bh-links a:hover { padding-left: 4px; }
}


/* 12 RESPONSIVE ============================================================= */
@media (max-width: 379px) {
  .bh-hero__units a { padding: 12px 8px; font-size: .86rem; }
  .bh-hero__units a span { letter-spacing: .12em; }
  .bh-fit { padding: 26px 16px; }
  .bh-fit__list a { margin-left: 0; margin-top: 6px; }
}

@media (min-width: 700px) {
  .bh-fit { padding: 40px 36px; }
  .bh-fit__cols { grid-template-columns: 1fr 1fr; gap: 40px; }
  /* Tablet: one model per row, photo beside the text, frames still identical */
  .bh-model { display: grid; grid-template-columns: minmax(0, 46%) minmax(0, 1fr); }
  .bh-model__media { aspect-ratio: 4 / 3; align-self: start; }
  .bh-brief { grid-template-columns: 1fr 1fr; }
  .bh-brief li:last-child { grid-column: 1 / -1; }
  .bh-scale { grid-template-columns: 1fr 1fr; }
  .bh-field__grid { grid-template-columns: 1fr 1fr; }
  .bh-field__block { padding: 36px 32px; }
}

@media (min-width: 1024px) {
  .bh-hero__units a { min-height: 76px; padding: 16px 22px; font-size: 1.1rem; }

  .bh-intro__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(48px, 6vw, 96px); }
  .bh-anatomy { position: sticky; top: calc(var(--header-h) + 24px); }
  .bh-anatomy__keys { grid-template-columns: 1fr 1fr; }

  .bh-models__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bh-model { display: flex; }

  .bh-jobs__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 88px); }
  .bh-jobs__photo { position: sticky; top: calc(var(--header-h) + 24px); }
  .bh-log { grid-template-columns: 1fr 1fr; column-gap: 40px; }

  .bh-rent__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 48px; }
  .bh-quote { position: sticky; top: calc(var(--header-h) + 24px); padding: 36px 32px; }

  .bh-related__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); }
}

@media (min-width: 1180px) {
  .page-backhoes .nav__link[aria-current="true"] { color: var(--white); }
  .page-backhoes .nav__link[aria-current="true"]::after { transform: scaleX(1); }
  .bh-hero__inner { padding-bottom: 60px; }
  .bh-hero__content { max-width: 760px; }
}

@media (min-width: 1400px) {
  .bh-model__body { padding: 30px 30px 28px; }
}