/* ==========================================================================
   Creatio Construction: Equipment Overview page styles
   Loaded only by equipment.html, after style.css. Every class here starts
   with "eq-" (or sits under .page-equipment), so the homepage and the
   Services page are not affected.
   The look is the fleet yard: graphite and steel surfaces, stencil style
   unit numbers, fine plate borders and the existing brass accent.

   CONTENTS
   01  Page tokens
   02  Hero (with slow scroll effect)
   03  Introduction and brands
   04  Category cards
   05  Fleet register
   06  Work finder
   07  Operators and rental
   08  Service area
   09  Request checklist
   10  Call to action band
   11  FAQ
   12  Motion preferences
   13  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS ============================================================ */
.page-equipment {
  --plate: #1b1c1f;
  --plate-2: #222327;
  --plate-line: rgba(255, 255, 255, .1);
  --sand-50: #f5f3ef;
  --sand-100: #ebe7df;
  --hazard: repeating-linear-gradient(135deg, var(--accent) 0 8px, transparent 8px 16px);
}

/* Shared small label used as a unit code ("EQ 01") */
.eq-code { display: inline-flex; align-items: center; gap: 8px; font: 600 .72rem/1 var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.eq-code::before { content: ""; width: 8px; height: 8px; background: var(--accent); }


/* 02 HERO ===================================================================
   The photo layer is taller than the hero so equipment.js can move it a
   little on scroll without showing an edge. Without JS it sits still. */
.eq-hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(640px, calc(100vh - 42px - var(--header-h)), 940px);
  min-height: clamp(640px, calc(100svh - 42px - var(--header-h)), 940px);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--white); background: var(--black);
}
.eq-hero__media { position: absolute; left: 0; right: 0; top: -8%; height: 116%; z-index: -3; will-change: transform; }
.eq-hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.eq-hero__shade {
  position: absolute; inset: 0; z-index: -2;
  background:
    linear-gradient(180deg, rgba(10, 10, 11, .62) 0%, rgba(10, 10, 11, .12) 28%, rgba(10, 10, 11, .35) 58%, rgba(10, 10, 11, .96) 100%),
    linear-gradient(90deg, rgba(10, 10, 11, .88) 0%, rgba(10, 10, 11, .5) 42%, rgba(10, 10, 11, 0) 78%);
}
/* thin brass and steel stripe along the bottom edge of the hero */
.eq-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 1; background: var(--hazard); opacity: .55; }

.eq-hero__inner { position: relative; display: grid; gap: 40px; padding-top: 30px; padding-bottom: 56px; }
.eq-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: clamp(24px, 6vh, 64px); font: 500 .78rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.eq-crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.eq-crumbs li + li::before { content: "/"; color: var(--accent); }
.eq-crumbs a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.eq-crumbs a:hover { color: var(--white); text-decoration: underline; text-underline-offset: 4px; }
.eq-crumbs [aria-current] { color: var(--white); }

.eq-hero__kicker { margin: 0 0 18px; }
.eq-hero__title { max-width: 16ch; margin-bottom: 24px; color: var(--white); font-size: clamp(2.5rem, 6.4vw, 5.4rem); line-height: .98; letter-spacing: -.045em; text-transform: none; }
.eq-hero__title span { display: block; max-width: 24ch; margin-top: .3em; font-size: .4em; font-weight: 500; line-height: 1.2; letter-spacing: -.015em; color: rgba(255, 255, 255, .8); }
.eq-hero__lead { max-width: 54ch; margin-bottom: 34px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .84); }
.eq-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eq-hero__actions .btn { flex: 1 1 220px; }

/* Fleet index on the right of the hero (laptop and up) */
.eq-index { display: none; }
.eq-index__label { display: flex; justify-content: space-between; margin: 0 0 10px; font: 500 .7rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .55); }
.eq-index ol { border-top: 1px solid rgba(255, 255, 255, .22); }
.eq-index li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.eq-index a { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px 4px; color: rgba(255, 255, 255, .86); text-decoration: none; font: 500 .95rem var(--font-head); transition: color .2s, padding .3s var(--ease); }
.eq-index a span { font-size: .72rem; letter-spacing: .14em; color: var(--accent); }
.eq-index a .icon { font-size: 11px; opacity: .45; transition: transform .3s var(--ease), opacity .3s; }
.eq-index a:hover { color: var(--white); padding-left: 10px; }
.eq-index a:hover .icon { opacity: 1; transform: translateX(4px); }


/* 03 INTRODUCTION AND BRANDS ================================================ */
.eq-intro { background: var(--white); overflow: hidden; }
.eq-intro__grid { position: relative; z-index: 1; display: grid; gap: 40px; }
.eq-intro__head .section-title { max-width: 16ch; }
.eq-intro__body p:last-child { margin-bottom: 0; }

.eq-plates { display: grid; gap: 1px; margin-top: 8px; background: var(--line-light); border: 1px solid var(--line-light); }
.eq-plates li { display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px; background: var(--white); }
.eq-plates .icon { margin-top: 3px; font-size: 20px; color: var(--accent); }
.eq-plates strong { display: block; color: var(--black); font: 600 1rem/1.35 var(--font-head); }
.eq-plates span { display: block; font-size: .94rem; line-height: 1.5; }

.eq-brands { margin-top: clamp(56px, 7vw, 90px); padding-top: 36px; border-top: 1px solid var(--line-light); }
.eq-brands__head { display: grid; gap: 10px; margin-bottom: 26px; }
.eq-brands__head h3 { margin: 0; font-size: 1.2rem; }
.eq-brands__head p { margin: 0; max-width: 62ch; font-size: .98rem; }
.eq-brands__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
.eq-brands__list li { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-height: 150px; padding: 22px 20px 18px; background: var(--sand-50); }
.eq-brands__logo { display: flex; align-items: center; height: 54px; }
.eq-brands__logo img { width: auto; max-width: 100%; height: 42px; }
.eq-brands__logo img.is-square { height: 54px; }
/* Brands without an archived logo are written as plain text, not drawn as badges */
.eq-brands__word { font: 600 1.35rem/1 var(--font-head); letter-spacing: .04em; text-transform: uppercase; color: var(--black); }
.eq-brands__units { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--gray-500); }
.eq-brands__units strong { display: block; margin-bottom: 2px; font: 500 .68rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--black); }
.eq-brands__note { margin: 16px 0 0; font-size: .82rem; color: var(--gray-500); }


/* 04 CATEGORY CARDS =========================================================
   Every card image sits in the same 4:3 frame, whatever the source size. */
.eq-cats { background: var(--graphite); color: rgba(255, 255, 255, .72); overflow: hidden; }
.eq-cats .tech-grid { -webkit-mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(ellipse at 20% 0%, #000 0%, transparent 70%); }
.eq-cats > .container { position: relative; z-index: 1; }
.eq-cats .eyebrow { color: rgba(255, 255, 255, .7); }
.eq-cats .eyebrow__num { color: var(--accent); }

.eq-grid { display: grid; grid-template-columns: 1fr; gap: 18px; }
.eq-card {
  position: relative; display: flex; flex-direction: column;
  background: var(--plate); border: 1px solid var(--plate-line); border-radius: 6px; overflow: hidden;
  transition: border-color .35s var(--ease), transform .45s var(--ease), box-shadow .45s var(--ease);
}
.eq-card:hover, .eq-card:focus-within { border-color: rgba(196, 168, 116, .55); transform: translateY(-4px); box-shadow: 0 30px 50px -30px rgba(0, 0, 0, .9); }
.eq-card__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--steel); }
.eq-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.eq-card:hover .eq-card__media img { transform: scale(1.05); }
.eq-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10, 10, 11, 0) 55%, rgba(10, 10, 11, .55) 100%); pointer-events: none; }
.eq-card__num {
  position: absolute; left: 0; top: 0; z-index: 1; padding: 9px 12px 8px;
  background: var(--black); color: var(--white); font: 600 .72rem/1 var(--font-head); letter-spacing: .2em;
}
.eq-card__num::after { content: ""; display: block; height: 3px; margin-top: 7px; background: var(--accent); }
.eq-card__body { display: flex; flex-direction: column; flex: 1; padding: 22px 20px 20px; }
.eq-card__title { margin-bottom: 10px; color: var(--white); font-size: 1.3rem; }
.eq-card__body > p { margin-bottom: 18px; font-size: .95rem; line-height: 1.6; }
.eq-card__units { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 22px; }
.eq-card__units li { padding: 5px 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 3px; font: 500 .74rem/1.2 var(--font-head); letter-spacing: .04em; color: rgba(255, 255, 255, .86); }
.eq-card__cta {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 48px; padding: 12px 14px; border-top: 1px solid var(--plate-line); margin-left: -20px; margin-right: -20px; margin-bottom: -20px;
  color: var(--white); text-decoration: none; font: 600 .9rem var(--font-head); background: var(--plate-2);
  transition: background-color .3s, color .3s;
}
.eq-card__cta::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.eq-card__cta .icon { color: var(--accent); transition: transform .3s var(--ease); }
.eq-card:hover .eq-card__cta { background: var(--accent); color: var(--black); }
.eq-card:hover .eq-card__cta .icon { color: var(--black); transform: translateX(4px); }
.eq-card__cta:focus-visible { outline: none; }
.eq-card:has(.eq-card__cta:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }


/* 05 FLEET REGISTER ========================================================= */
.eq-register { background: var(--sand-50); }
.eq-register__table { border-top: 2px solid var(--black); }
.eq-register__row { display: grid; gap: 10px; padding: 20px 0; border-bottom: 1px solid var(--line-light); }
.eq-register__cat { display: flex; align-items: baseline; gap: 12px; margin: 0; color: var(--black); font: 600 1.05rem var(--font-head); }
.eq-register__cat span { font-size: .72rem; letter-spacing: .18em; color: var(--accent); }
.eq-register__units { display: flex; flex-wrap: wrap; gap: 8px; }
.eq-register__units li { display: inline-flex; align-items: baseline; gap: 8px; padding: 8px 12px; background: var(--white); border: 1px solid var(--line-light); border-radius: 3px; color: var(--black); font: 500 .95rem/1.2 var(--font-head); }
.eq-register__units small { font: 500 .66rem var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-500); }
.eq-register__foot { margin: 22px 0 0; font-size: .92rem; color: var(--gray-500); }


/* 06 WORK FINDER ============================================================ */
.eq-work { background: var(--white); }
.eq-tasks { display: grid; gap: 1px; background: var(--line-light); border: 1px solid var(--line-light); }
.eq-task { position: relative; padding: 26px 22px 24px; background: var(--white); transition: background-color .3s; }
.eq-task:hover { background: var(--sand-50); }
.eq-task__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 18px; border: 1px solid var(--line-light); border-radius: 50%; color: var(--accent); font-size: 18px; }
.eq-task h3 { margin-bottom: 8px; font-size: 1.12rem; }
.eq-task p { margin-bottom: 16px; font-size: .95rem; line-height: 1.6; }
.eq-task__match { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-top: 14px; border-top: 1px dashed var(--line-light); }
.eq-task__match span { width: 100%; font: 500 .66rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--gray-500); }
.eq-task__match a { color: var(--black); font: 600 .9rem var(--font-head); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.eq-task__match a:hover { color: var(--gray-700); }


/* 07 OPERATORS AND RENTAL =================================================== */
.eq-operate { background: var(--black); color: rgba(255, 255, 255, .74); overflow: hidden; }
.eq-operate > .container { position: relative; z-index: 1; }
.eq-operate__grid { display: grid; gap: 48px; }
.eq-operate .section-title { margin-bottom: 24px; color: var(--white); }
.eq-operate .lead { color: rgba(255, 255, 255, .86); }
.eq-operate__quote { margin: 30px 0 0; padding: 22px 24px; border-left: 3px solid var(--accent); background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .86); font: 500 1.05rem/1.6 var(--font-head); }
.eq-terms { display: grid; gap: 14px; }
.eq-term { position: relative; padding: 26px 24px 24px 76px; border: 1px solid var(--line-dark); border-radius: 6px; background: var(--plate); }
.eq-term__num { position: absolute; left: 22px; top: 24px; color: var(--accent); font: 600 1.6rem/1 var(--font-head); letter-spacing: -.02em; }
.eq-term h3 { margin-bottom: 8px; color: var(--white); font-size: 1.1rem; }
.eq-term p { margin: 0; font-size: .96rem; line-height: 1.6; }


/* 08 SERVICE AREA =========================================================== */
.eq-area { background: var(--sand-100); overflow: hidden; }
.eq-area__grid { display: grid; gap: 44px; }
.eq-area .section-title { margin-bottom: 24px; }
.eq-route { position: relative; padding: 8px 0 0 30px; }
.eq-route::before { content: ""; position: absolute; left: 7px; top: 18px; bottom: 18px; width: 2px; background: repeating-linear-gradient(180deg, var(--black) 0 6px, transparent 6px 12px); opacity: .35; }
.eq-route li { position: relative; padding: 12px 0; border-bottom: 1px solid var(--line-light); color: var(--black); font: 500 1.08rem var(--font-head); }
.eq-route li::before { content: ""; position: absolute; left: -29px; top: 50%; width: 14px; height: 14px; margin-top: -7px; border: 2px solid var(--black); border-radius: 50%; background: var(--sand-100); }
.eq-route li.is-base::before { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 5px rgba(196, 168, 116, .25); }
.eq-route small { display: block; font: 500 .66rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--gray-500); }
.eq-area__note { display: flex; gap: 14px; align-items: flex-start; margin: 28px 0 0; padding: 20px; background: var(--white); border-radius: 6px; font-size: .96rem; line-height: 1.55; }
.eq-area__note .icon { margin-top: 3px; font-size: 18px; color: var(--accent); }


/* 09 REQUEST CHECKLIST ====================================================== */
.eq-request { background: var(--white); }
.eq-request__grid { display: grid; gap: 44px; }
.eq-checklist { counter-reset: req; display: grid; gap: 12px; }
.eq-checklist li { counter-increment: req; position: relative; padding: 20px 20px 20px 70px; border: 1px solid var(--line-light); border-radius: 6px; background: var(--sand-50); }
.eq-checklist li::before {
  content: counter(req, decimal-leading-zero); position: absolute; left: 18px; top: 20px;
  width: 36px; height: 36px; display: grid; place-items: center;
  background: var(--black); color: var(--accent); border-radius: 3px; font: 600 .78rem var(--font-head); letter-spacing: .06em;
}
.eq-checklist h3 { margin-bottom: 4px; font-size: 1.05rem; }
.eq-checklist p { margin: 0; font-size: .94rem; line-height: 1.55; }
.eq-quote-card { padding: 30px 26px; border-radius: 8px; background: var(--black); color: rgba(255, 255, 255, .74); }
.eq-quote-card h3 { margin-bottom: 12px; color: var(--white); font-size: 1.45rem; }
.eq-quote-card > p { margin-bottom: 24px; }
.eq-quote-card .btn { width: 100%; margin-bottom: 10px; }
.eq-quote-card__lines { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-dark); }
.eq-quote-card__lines a { display: flex; align-items: center; gap: 12px; padding: 10px 0; color: var(--white); text-decoration: none; font: 500 .96rem var(--font-head); overflow-wrap: anywhere; }
.eq-quote-card__lines .icon { color: var(--accent); }
.eq-quote-card__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }


/* 10 CALL TO ACTION BAND ==================================================== */
.eq-cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(90px, 12vw, 170px) 0; color: rgba(255, 255, 255, .8); background: var(--black); }
.eq-cta__bg { position: absolute; left: 0; right: 0; top: -8%; height: 116%; z-index: -2; will-change: transform; }
.eq-cta__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; filter: grayscale(.35) contrast(1.05); }
.eq-cta::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(10, 10, 11, .94) 0%, rgba(10, 10, 11, .78) 50%, rgba(10, 10, 11, .55) 100%); }
.eq-cta__inner { max-width: 760px; }
.eq-cta__title { margin-bottom: 20px; color: var(--white); font-size: clamp(2.2rem, 5.6vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; }
.eq-cta__text { max-width: 52ch; margin-bottom: 32px; font-size: var(--fs-lead); }
.eq-cta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.eq-cta__actions .btn { flex: 1 1 240px; max-width: 340px; }


/* 11 FAQ ==================================================================== */
.eq-faq { background: var(--sand-50); }
.eq-faq .faq__contact { background: var(--white); }
.eq-faq .faq__item[open] { background: linear-gradient(90deg, var(--white), rgba(255, 255, 255, 0)); }
.eq-faq .faq__item summary:focus-visible { outline-offset: -2px; }


/* 12 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .eq-hero__media, .eq-cta__bg { top: 0; height: 100%; transform: none !important; }
  .eq-card, .eq-card:hover, .eq-card:focus-within { transform: none; }
  .eq-card:hover .eq-card__media img { transform: none; }
}


/* 13 RESPONSIVE ============================================================= */
@media (min-width: 560px) {
  .eq-hero__actions .btn { flex: 0 0 auto; }
  .eq-plates { grid-template-columns: repeat(2, 1fr); }
  .eq-brands__list { grid-template-columns: repeat(3, 1fr); }
  .eq-tasks { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 640px) {
  .eq-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  .eq-register__row { grid-template-columns: 220px 1fr; align-items: center; gap: 24px; }
  .eq-brands__head { grid-template-columns: auto 1fr; align-items: end; gap: 40px; }
  .eq-brands__head p { justify-self: end; text-align: right; }
}

@media (min-width: 1024px) {
  .eq-intro__grid { grid-template-columns: .9fr 1.1fr; gap: 80px; align-items: start; }
  .eq-intro__head { position: sticky; top: calc(var(--header-h) + 40px); }
  .eq-brands__list { grid-template-columns: repeat(5, 1fr); }
  .eq-tasks { grid-template-columns: repeat(4, 1fr); }
  .eq-operate__grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
  .eq-area__grid { grid-template-columns: 1.1fr .9fr; gap: 96px; align-items: center; }
  .eq-request__grid { grid-template-columns: 1.35fr .85fr; gap: 64px; align-items: start; }
  .eq-checklist { grid-template-columns: repeat(2, 1fr); }
  .eq-quote-card { position: sticky; top: calc(var(--header-h) + 40px); padding: 38px 34px; }
}

@media (min-width: 1180px) {
  .eq-hero__inner { grid-template-columns: minmax(0, 1fr) 330px; align-items: end; gap: 64px; padding-bottom: 72px; }
  .eq-hero__inner .eq-crumbs { grid-column: 1 / -1; }
  .eq-index { display: block; padding: 22px 22px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; background: rgba(10, 10, 11, .55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .eq-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .eq-card__title { font-size: 1.22rem; }
}

@media print {
  .eq-hero__media, .eq-cta__bg { transform: none !important; }
  .eq-index { display: none; }
}