/* ==========================================================================
   Creatio Construction: Front Loaders category page styles
   Loaded only by front-loaders.html, after style.css. Every class here starts
   with "fl-" (or sits under .page-front-loaders), so the homepage, Services,
   Equipment Overview, Backhoes, Excavators, Skid Steers, Compactors and
   Motor Graders are not affected.
   The look is "stockpile and bucket": the hero photo sits in a frame cut
   like a loader bucket with a brass cutting edge and teeth, a four step
   loading cycle runs under it and stockpile cones rise into the next
   section. The figures are a perforated quarry load ticket beside a dump
   sketch, materials are textured stockpile bays between block walls, jobs
   are cards with a toothed edge, the comparison is a table, the operator
   choice is one panel split on the angle of a bucket lip and the service
   area is a dispatch board.

   CONTENTS
   01  Page tokens and navigation state
   02  Hero: copy, bucket frame and teeth
   03  Loading cycle and stockpile cones
   04  Introduction and naming note
   05  The LiuGong 856H
   06  Published figures: load ticket and dump sketch
   07  Materials (stockpile bays)
   08  Applications (toothed cards)
   09  Which machine (table)
   10  Why Creatio
   11  Operator option (split panel)
   12  Service area (dispatch board)
   13  Request a quote and related links
   14  FAQ
   15  Motion preferences
   16  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-front-loaders {
  --fl-coal: #141518;
  --fl-coal-2: #1c1e22;
  --fl-coal-3: #26282d;
  --fl-stone: #f4f0e8;
  --fl-stone-2: #e8e1d3;
  --fl-concrete: #cfc8ba;
  --fl-line: rgba(28, 24, 18, .14);
  --fl-line-strong: rgba(28, 24, 18, .3);
  --fl-line-dark: rgba(255, 255, 255, .12);
  --fl-brass-text: #6f5830; /* darker brass for small text on light surfaces (5.4:1 on stone, 6.7:1 on white) */
  /* crushed stone speckle used on the dark bands */
  --fl-gravel:
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .07) 0 1.4px, transparent 2px) 0 0 / 23px 19px,
    radial-gradient(circle at 70% 60%, rgba(196, 168, 116, .09) 0 1.8px, transparent 2.4px) 0 0 / 37px 29px,
    radial-gradient(circle at 40% 80%, rgba(255, 255, 255, .045) 0 1px, transparent 1.6px) 0 0 / 13px 17px;
  /* the bucket outline: a chamfered back corner and an angled lip */
  --fl-bucket: polygon(0 0, 89% 0, 100% 15%, 100% 100%, 7% 100%, 0 88%);
}

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


/* 02 HERO: COPY, BUCKET FRAME AND TEETH ===================================== */
.fl-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 0 0; color: rgba(255, 255, 255, .8);
  background: var(--fl-gravel), linear-gradient(180deg, var(--fl-coal) 0%, var(--fl-coal-2) 100%);
}
.fl-hero::before { /* warm light behind the photo */
  content: ""; position: absolute; z-index: -1; right: -10%; top: 4%; width: 70%; height: 70%;
  background: radial-gradient(closest-side, rgba(196, 168, 116, .14), transparent);
  pointer-events: none;
}
.fl-hero__grid { display: grid; gap: 34px; }
.fl-hero__copy { min-width: 0; }

.fl-crumbs { margin-bottom: 30px; }
.fl-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .82rem; }
.fl-crumbs li { display: inline-flex; align-items: center; }
.fl-crumbs li + li::before { content: ""; width: 5px; height: 5px; margin: 0 12px; border-top: 1px solid var(--accent); border-right: 1px solid var(--accent); transform: rotate(45deg); }
.fl-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .7); text-decoration: none; }
.fl-crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.fl-crumbs [aria-current] { color: var(--white); font-weight: 700; }

.fl-hero__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px;
  font: 500 .76rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.fl-hero__kicker span { padding: 5px 10px; color: var(--fl-coal); background: var(--accent); border-radius: 2px; font-weight: 600; letter-spacing: .16em; }
.fl-hero__title { max-width: 13ch; margin-bottom: 22px; color: var(--white); font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -.035em; }
.fl-hero__lead { max-width: 54ch; margin-bottom: 30px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .84); }
.fl-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.fl-hero__actions .btn { flex: 1 1 220px; }
.fl-hero__jump {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  font: 500 .92rem var(--font-head); color: var(--white); text-decoration: none;
  border-bottom: 1px solid rgba(196, 168, 116, .6);
}
.fl-hero__jump .icon { color: var(--accent); transition: transform .3s var(--ease); }
.fl-hero__jump:hover .icon { transform: translateY(3px); }

/* The photo frame, cut to a bucket outline */
.fl-hero__media { position: relative; min-width: 0; padding-bottom: 16px; }
.fl-bucket { position: relative; clip-path: var(--fl-bucket); background: var(--fl-coal-3); }
.fl-bucket img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 40% 55%; }
.fl-bucket::after { /* faint inner edge so the cut reads on light skies */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 70%, rgba(10, 10, 11, .35));
}
/* The cutting edge and teeth along the foot of the bucket */
.fl-teeth {
  position: absolute; left: 7%; right: 0; bottom: 4px; height: 12px;
  background:
    linear-gradient(var(--accent), var(--accent)) left top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--accent) 0 16px, transparent 16px 42px) 10px 3px / 100% 9px no-repeat;
}
.fl-hero__tag { /* sits on the open ground at the foot of the phone crop, then moves to the top left on wider screens */
  position: absolute; right: 0; bottom: 30px; z-index: 2;
  display: flex; flex-direction: column; padding: 10px 14px;
  font: 500 .86rem/1.35 var(--font-head); color: var(--white);
  background: rgba(10, 10, 11, .72); border-left: 3px solid var(--accent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.fl-hero__tag span { font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }


/* 03 LOADING CYCLE AND STOCKPILE CONES ====================================== */
.fl-cycle {
  position: relative; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px;
  margin-top: 30px; background: var(--fl-line-dark); border: 1px solid var(--fl-line-dark);
  counter-reset: flstep;
}
.fl-cycle li { position: relative; padding: 16px 16px 18px; background: rgba(20, 21, 24, .92); counter-increment: flstep; }
.fl-cycle li::before {
  content: counter(flstep, decimal-leading-zero); display: block; margin-bottom: 8px;
  font: 600 .7rem var(--font-head); letter-spacing: .18em; color: var(--accent);
}
.fl-cycle strong { display: block; margin-bottom: 2px; font: 600 1.15rem/1.2 var(--font-head); color: var(--white); letter-spacing: -.01em; }
.fl-cycle span { display: block; font-size: .9rem; line-height: 1.45; color: rgba(255, 255, 255, .72); }

.fl-piles { position: relative; height: clamp(54px, 9vw, 120px); margin-top: clamp(30px, 5vw, 56px); }
.fl-piles svg { position: absolute; left: 0; right: 0; top: 0; bottom: -1px; width: 100%; height: calc(100% + 1px); }
.fl-piles__back { fill: var(--fl-stone-2); }
.fl-piles__front { fill: var(--fl-stone); }


/* 04 INTRODUCTION AND NAMING NOTE =========================================== */
.fl-intro { background: var(--fl-stone); padding-top: clamp(50px, 6vw, 90px); }
.fl-intro__grid { display: grid; gap: 44px; align-items: start; }
.fl-intro__text .section-title { margin-bottom: 26px; }
.fl-intro__statement { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.fl-intro__text a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.fl-names {
  position: relative; padding: 30px 26px 26px; background: var(--white);
  border: 1px solid var(--fl-line); box-shadow: var(--shadow-sm);
  clip-path: polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 0 100%);
}
.fl-names::before { content: ""; position: absolute; left: 0; top: 0; width: 64px; height: 3px; background: var(--accent); }
.fl-names__label { margin: 0 0 8px; font: 500 .72rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--fl-brass-text); }
.fl-names__title { margin-bottom: 12px; font-size: 1.35rem; }
.fl-names > p:not(.fl-names__label):not(.fl-names__foot) { font-size: .98rem; }
.fl-names__terms { margin: 4px 0 18px; border-top: 1px solid var(--fl-line); }
.fl-names__terms div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 16px; padding: 11px 0; border-bottom: 1px solid var(--fl-line); }
.fl-names__terms dt { font: 600 .98rem var(--font-head); color: var(--black); }
.fl-names__terms dd { font-size: .9rem; color: var(--gray-500); }
.fl-names__foot { margin: 0; font-size: .94rem; color: var(--ink); }


/* 05 THE LIUGONG 856H ======================================================= */
.fl-model { background: var(--white); }
.fl-model__head { max-width: 60ch; margin-bottom: clamp(36px, 4vw, 56px); }
.fl-model__head .section-title { margin-bottom: 20px; }
.fl-model__head p:last-child { margin: 0; }

.fl-unit { display: grid; gap: 0; background: var(--fl-stone); border: 1px solid var(--fl-line); }
.fl-unit__media { position: relative; background: var(--fl-coal); }
.fl-unit__media img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }
.fl-unit__caption {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 18px;
  font-size: .86rem; line-height: 1.4; color: rgba(255, 255, 255, .78);
  border-top: 3px solid var(--accent);
}
.fl-unit__caption span { font: 600 .7rem var(--font-head); letter-spacing: .18em; color: var(--accent); }
.fl-unit__body { padding: 30px 22px 30px; }
.fl-unit__index { margin: 0 0 6px; font: 500 .74rem var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--fl-brass-text); }
.fl-unit__name { margin-bottom: 16px; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: -.03em; }
.fl-unit__desc { margin-bottom: 24px; color: var(--ink); }
.fl-unit__label { margin: 0 0 10px; font: 500 .72rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--gray-500); }
.fl-unit__uses { display: grid; gap: 10px; margin-bottom: 24px; }
.fl-unit__uses li { display: flex; gap: 12px; align-items: flex-start; font-size: .98rem; line-height: 1.45; color: var(--ink); }
.fl-unit__uses .icon { margin-top: 4px; color: var(--fl-brass-text); }
.fl-unit__operator {
  display: flex; gap: 14px; align-items: flex-start; margin-bottom: 26px; padding: 16px 18px;
  font-size: .95rem; line-height: 1.5; background: var(--white); border-left: 3px solid var(--fl-coal);
}
.fl-unit__operator .icon { margin-top: 3px; font-size: 1.1rem; color: var(--fl-brass-text); }
.fl-unit__operator strong { color: var(--black); }
.fl-unit__cta { width: 100%; }


/* 06 PUBLISHED FIGURES: LOAD TICKET AND DUMP SKETCH ========================= */
.fl-figures { overflow: hidden; color: rgba(255, 255, 255, .74); background: var(--fl-coal); }
.fl-figures__grid { display: grid; gap: 40px; align-items: center; }

/* A perforated quarry load ticket */
.fl-ticket {
  position: relative; max-width: 520px; padding: 34px 26px 30px;
  color: var(--ink); background: var(--fl-stone);
  -webkit-mask:
    radial-gradient(circle 6px at 50% 0, transparent 97%, #000) top / 18px 51% repeat-x,
    radial-gradient(circle 6px at 50% 100%, transparent 97%, #000) bottom / 18px 51% repeat-x;
  mask:
    radial-gradient(circle 6px at 50% 0, transparent 97%, #000) top / 18px 51% repeat-x,
    radial-gradient(circle 6px at 50% 100%, transparent 97%, #000) bottom / 18px 51% repeat-x;
}
.fl-ticket__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding-bottom: 14px; margin-bottom: 6px; border-bottom: 2px solid var(--fl-coal); }
.fl-ticket__kind { margin: 0; font: 600 1.3rem var(--font-head); letter-spacing: -.01em; color: var(--black); }
.fl-ticket__no { margin: 0; font: 500 .72rem var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--fl-brass-text); }
.fl-ticket__rows div { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-bottom: 1px dashed var(--fl-line-strong); }
.fl-ticket__rows div:last-child { border-bottom: 0; }
.fl-ticket__rows dt { flex: none; font: 500 .74rem var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--gray-700); }
.fl-ticket__rows div::after { content: ""; flex: 1 1 12px; order: 1; min-width: 12px; border-bottom: 1px dotted var(--fl-line-strong); transform: translateY(-4px); }
.fl-ticket__rows dd { order: 2; text-align: right; font: 600 1rem var(--font-head); color: var(--black); font-variant-numeric: tabular-nums; }
.fl-ticket__stamp {
  position: absolute; left: 44%; top: 176px; margin: 0;
  display: grid; place-items: center; width: 82px; height: 82px;
  font: 600 .62rem/1.15 var(--font-head); letter-spacing: .16em; text-transform: uppercase; text-align: center;
  color: rgba(111, 88, 48, .62); border: 2px solid rgba(111, 88, 48, .5); border-radius: 50%;
  box-shadow: inset 0 0 0 3px var(--fl-stone), inset 0 0 0 4px rgba(111, 88, 48, .4);
  transform: rotate(-14deg); pointer-events: none; opacity: .9;
}
.fl-ticket__stamp span { display: block; font-size: .78rem; letter-spacing: .08em; }

/* The dump sketch */
.fl-dump { margin: 0; }
.fl-dump__drawing { width: 100%; height: auto; overflow: visible; }
.fl-dump__ground { stroke: rgba(255, 255, 255, .5); stroke-width: 2; }
.fl-dump__truck { fill: rgba(255, 255, 255, .04); stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.fl-dump__truck-top { stroke: rgba(255, 255, 255, .8); stroke-width: 3; }
.fl-dump__body { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .55); stroke-width: 2; stroke-linejoin: round; }
.fl-dump__wheel { fill: none; stroke: rgba(255, 255, 255, .55); stroke-width: 2; }
.fl-dump__arm { stroke: rgba(255, 255, 255, .7); stroke-width: 6; stroke-linecap: round; }
.fl-dump__bucket { fill: rgba(196, 168, 116, .25); stroke: var(--accent); stroke-width: 2.5; stroke-linejoin: round; }
.fl-dump__load { fill: none; stroke: rgba(196, 168, 116, .6); stroke-width: 2; stroke-dasharray: 3 6; stroke-linecap: round; }
.fl-dump__dim { stroke: var(--accent); stroke-width: 1.5; }
.fl-dump__ext { stroke: rgba(255, 255, 255, .35); stroke-width: 1; stroke-dasharray: 4 4; }
.fl-dump__label { fill: rgba(255, 255, 255, .72); font: 500 15px var(--font-head); letter-spacing: .04em; }
.fl-dump__label--strong { fill: var(--white); font-weight: 600; font-size: 17px; }
.fl-dump figcaption { margin-top: 14px; padding-left: 14px; font-size: .9rem; line-height: 1.5; color: rgba(255, 255, 255, .66); border-left: 2px solid var(--accent); }

.fl-figures__note {
  display: flex; gap: 14px; align-items: flex-start; margin: 44px 0 0; padding: 18px 20px;
  font-size: .98rem; line-height: 1.55; border: 1px solid var(--fl-line-dark); background: rgba(255, 255, 255, .03);
}
.fl-figures__note .icon { margin-top: 3px; font-size: 1.15rem; color: var(--accent); }
.fl-figures__note strong { color: var(--white); }


/* 07 MATERIALS (STOCKPILE BAYS) ============================================= */
.fl-materials { background: var(--fl-stone); }
.fl-bays { display: grid; grid-template-columns: 1fr; gap: 18px; }
.fl-bay { position: relative; padding: 0 22px 24px 30px; background: var(--white); border-bottom: 3px solid var(--fl-concrete); }
.fl-bay::before { /* the block wall at the side of each bay */
  content: ""; position: absolute; left: 0; top: 0; bottom: -3px; width: 10px;
  background:
    linear-gradient(180deg, transparent 0 32%, rgba(0, 0, 0, .08) 32% calc(32% + 1px), transparent calc(32% + 1px) 66%, rgba(0, 0, 0, .08) 66% calc(66% + 1px), transparent calc(66% + 1px)),
    var(--fl-concrete);
}
.fl-bay__pile { display: block; height: 104px; margin: 0 -22px 20px -20px; clip-path: polygon(0 100%, 16% 64%, 36% 26%, 50% 8%, 62% 22%, 82% 58%, 100% 100%); }
.fl-bay h3 { margin-bottom: 8px; }
.fl-bay p { margin: 0; font-size: .97rem; line-height: 1.55; }
.fl-bay--earth .fl-bay__pile {
  background:
    radial-gradient(circle at 30% 40%, rgba(0, 0, 0, .18) 0 1.2px, transparent 1.8px) 0 0 / 9px 8px,
    radial-gradient(circle at 70% 70%, rgba(255, 255, 255, .12) 0 1px, transparent 1.6px) 0 0 / 13px 11px,
    linear-gradient(180deg, #7a5d45, #5b4433);
}
.fl-bay--sand .fl-bay__pile {
  background:
    radial-gradient(circle at 40% 40%, rgba(120, 92, 48, .25) 0 .8px, transparent 1.3px) 0 0 / 6px 5px,
    radial-gradient(circle at 80% 20%, rgba(255, 255, 255, .35) 0 .8px, transparent 1.3px) 0 0 / 7px 9px,
    linear-gradient(180deg, #e0cda4, #c9b184);
}
.fl-bay--gravel .fl-bay__pile {
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .26) 0 1.8px, transparent 2.4px) 0 0 / 13px 11px,
    radial-gradient(circle at 70% 60%, rgba(0, 0, 0, .2) 0 2px, transparent 2.6px) 3px 5px / 17px 15px,
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .14) 0 1.4px, transparent 2px) 6px 2px / 7px 19px,
    radial-gradient(circle at 20% 80%, rgba(0, 0, 0, .16) 0 1.6px, transparent 2.2px) 1px 7px / 23px 9px,
    linear-gradient(180deg, #9a948b, #77726a);
}
.fl-bay--aggregate .fl-bay__pile {
  background:
    radial-gradient(circle at 30% 40%, rgba(255, 255, 255, .2) 0 2.8px, transparent 3.4px) 0 0 / 21px 17px,
    radial-gradient(circle at 75% 70%, rgba(196, 168, 116, .32) 0 2.2px, transparent 2.8px) 5px 3px / 17px 23px,
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, .28) 0 1.6px, transparent 2.2px) 2px 6px / 9px 13px,
    radial-gradient(circle at 60% 20%, rgba(255, 255, 255, .12) 0 1.2px, transparent 1.8px) 4px 1px / 11px 7px,
    radial-gradient(circle at 10% 60%, rgba(0, 0, 0, .2) 0 3.2px, transparent 3.8px) 9px 4px / 29px 31px,
    linear-gradient(180deg, #5f5e5b, #3f3e3c);
}


/* 08 APPLICATIONS (TOOTHED CARDS) =========================================== */
.fl-uses { background: var(--white); }
.fl-uses__head { max-width: 60ch; margin-bottom: clamp(44px, 5vw, 70px); }
.fl-uses__head .section-title { margin-bottom: 20px; }
.fl-uses__head p:last-child { margin: 0; }
.fl-jobs { display: grid; gap: 30px 22px; }
.fl-job { position: relative; padding: 26px 22px 24px; background: var(--fl-stone); border-top: 3px solid var(--fl-coal); }
.fl-job::before { /* teeth along the cutting edge */
  content: ""; position: absolute; left: 22px; top: -11px; width: 112px; height: 8px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 14px, transparent 14px 24px);
}
.fl-job__num { margin: 0 0 12px; font: 600 .78rem var(--font-head); letter-spacing: .16em; color: var(--fl-brass-text); }
.fl-job h3 { margin-bottom: 10px; }
.fl-job p:last-child { margin: 0; font-size: .97rem; line-height: 1.55; }


/* 09 WHICH MACHINE (TABLE) ================================================== */
.fl-compare { background: var(--fl-stone-2); }
.fl-compare__head { max-width: 62ch; margin-bottom: clamp(36px, 4vw, 56px); }
.fl-compare__head .section-title { margin-bottom: 20px; }
.fl-compare__head p:last-child { margin: 0; }
.fl-table-wrap { background: var(--white); border: 1px solid var(--fl-line); }
.fl-table { width: 100%; border-collapse: collapse; font-size: .97rem; line-height: 1.5; }
.fl-table__caption {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.fl-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.fl-table tr { display: block; padding: 20px 20px 18px; border-bottom: 1px solid var(--fl-line); }
.fl-table tbody tr:last-child { border-bottom: 0; }
.fl-table th[scope="row"] { display: block; margin-bottom: 10px; text-align: left; font: 600 1.2rem/1.25 var(--font-head); color: var(--black); }
.fl-table th[scope="row"] span { display: block; margin-top: 4px; font: 500 .7rem var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--fl-brass-text); }
.fl-table td { display: block; padding: 6px 0; color: var(--gray-700); }
.fl-table td::before { content: attr(data-label); display: block; font: 500 .68rem var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-500); }
.fl-table a { display: inline-flex; align-items: center; min-height: 44px; color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.fl-table__row--main { position: relative; background: var(--fl-coal); }
.fl-table__row--main th[scope="row"], .fl-table__row--main a { color: var(--white); }
.fl-table__row--main th[scope="row"] span { color: var(--accent); }
.fl-table__row--main td { color: rgba(255, 255, 255, .8); }
.fl-table__row--main td::before { color: rgba(255, 255, 255, .55); }
.fl-compare__note { max-width: 70ch; margin: 30px 0 0; }
.fl-compare__note a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }


/* 10 WHY CREATIO ============================================================ */
.fl-why { overflow: hidden; color: rgba(255, 255, 255, .74); background: var(--fl-gravel), var(--fl-coal-2); }
.fl-reasons { display: grid; gap: 1px; background: var(--fl-line-dark); border: 1px solid var(--fl-line-dark); }
.fl-reason { position: relative; padding: 26px 22px 26px; background: rgba(20, 21, 24, .94); }
.fl-reason__num {
  margin: 0 0 14px; font: 600 3rem/1 var(--font-head); letter-spacing: -.04em;
  color: transparent; -webkit-text-stroke: 1.2px var(--accent);
}
.fl-reason h3 { margin-bottom: 10px; color: var(--white); font-size: 1.12rem; }
.fl-reason p:last-child { margin: 0; font-size: .95rem; line-height: 1.55; }


/* 11 OPERATOR OPTION (SPLIT PANEL) ========================================== */
.fl-operator { background: var(--white); }
.fl-operator__head { max-width: 60ch; margin-bottom: clamp(36px, 4vw, 56px); }
.fl-operator__head .section-title { margin-bottom: 20px; }
.fl-operator__lead { margin: 0; font-size: var(--fs-lead); color: var(--ink); }
.fl-operator__lead strong { color: var(--black); }
.fl-split { display: grid; }
.fl-split__side { padding: 30px 24px; background: var(--fl-stone); }
.fl-split__side h3 { margin-bottom: 10px; font-size: 1.3rem; }
.fl-split__side p:last-child { margin: 0; }
.fl-split__label { margin: 0 0 10px; font: 500 .72rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--fl-brass-text); }
.fl-split__side--ours {
  margin-top: -26px; padding-top: 52px; color: rgba(255, 255, 255, .8);
  background: var(--fl-coal); clip-path: polygon(0 26px, 100% 0, 100% 100%, 0 100%);
}
.fl-split__side--ours h3 { color: var(--white); }
.fl-split__side--ours .fl-split__label { color: var(--accent); }
.fl-operator__note { display: flex; gap: 14px; align-items: flex-start; margin: 26px 0 0; font-size: .98rem; }
.fl-operator__note .icon { margin-top: 4px; font-size: 1.1rem; color: var(--fl-brass-text); }


/* 12 SERVICE AREA (DISPATCH BOARD) ========================================== */
.fl-area { background: var(--fl-stone); }
.fl-area__grid { display: grid; gap: 44px; align-items: center; }
.fl-area__text .section-title { margin-bottom: 26px; }
.fl-area__note { padding-left: 16px; border-left: 2px solid var(--accent); font-size: .98rem; color: var(--ink); }
.fl-board { padding: 22px 18px 18px; background: var(--fl-coal); box-shadow: var(--shadow); }
.fl-board__head {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding-bottom: 14px;
  font: 500 .74rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
  border-bottom: 1px solid var(--fl-line-dark);
}
.fl-board__head .icon { font-size: 1.1rem; color: var(--accent); }
.fl-board__rows { display: grid; gap: 8px; }
.fl-board__row { display: grid; grid-template-columns: 1fr; gap: 6px; }
.fl-board__row dt { font: 500 .68rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
/* two tone cells, like a flap display */
.fl-board__row dd {
  position: relative; padding: 10px 14px; font: 500 1rem/1.35 var(--font-head); color: var(--white);
  background: linear-gradient(180deg, var(--fl-coal-3) 0 50%, #202226 50% 100%);
  border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
.fl-board__row--base dd { color: var(--fl-coal); background: linear-gradient(180deg, #d2b986 0 50%, var(--accent) 50% 100%); }
.fl-board__row--more dd { color: rgba(255, 255, 255, .72); }


/* 13 REQUEST A QUOTE AND RELATED LINKS ====================================== */
.fl-quote { overflow: hidden; color: rgba(255, 255, 255, .76); background: var(--black); }
.fl-quote__grid { display: grid; gap: 44px; }
.fl-quote__main .section-title { margin-bottom: 20px; color: var(--white); }
.fl-quote__intro { max-width: 56ch; font-size: var(--fs-lead); }
.fl-checks { display: grid; gap: 28px; margin: 30px 0 26px; }
.fl-checks__title { margin-bottom: 12px; padding-bottom: 10px; color: var(--white); font-size: 1.05rem; border-bottom: 1px solid var(--fl-line-dark); }
.fl-checks li { position: relative; padding: 9px 0 9px 32px; font-size: .95rem; line-height: 1.45; }
.fl-checks li::before { content: ""; position: absolute; left: 0; top: 12px; width: 16px; height: 16px; border: 1.5px solid var(--accent); border-radius: 2px; }
.fl-checks li strong { display: block; color: var(--white); font: 500 1rem var(--font-head); }
.fl-quote__extra { margin: 0; padding-left: 16px; border-left: 2px solid var(--accent); font-size: .95rem; }

.fl-quote__box {
  display: grid; gap: 12px; align-content: start; padding: 28px 24px;
  background: var(--fl-coal-2); border: 1px solid var(--fl-line-dark);
  clip-path: polygon(0 0, calc(100% - 30px) 0, 100% 30px, 100% 100%, 0 100%);
}
.fl-quote__kicker { margin: 0; font: 500 .72rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.fl-quote__box h3 { margin-bottom: 8px; color: var(--white); font-size: 1.5rem; }
.fl-quote__lines { display: grid; gap: 4px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--fl-line-dark); }
.fl-quote__lines a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.fl-quote__lines .icon { color: var(--accent); }
.fl-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.fl-related { margin-top: clamp(50px, 6vw, 80px); padding-top: 30px; border-top: 1px solid var(--fl-line-dark); }
.fl-related__title { margin-bottom: 16px; color: rgba(255, 255, 255, .7); font: 500 .76rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; }
.fl-related ul { display: flex; flex-wrap: wrap; gap: 10px; }
.fl-related a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
  color: var(--white); text-decoration: none; font: 500 .92rem var(--font-head);
  border: 1px solid var(--fl-line-dark); border-radius: 2px; transition: border-color .25s, background-color .25s;
}
.fl-related a .icon { font-size: .8em; color: var(--accent); transition: transform .3s var(--ease); }
.fl-related a:hover { border-color: var(--accent); background: rgba(196, 168, 116, .08); }
.fl-related a:hover .icon { transform: translateX(3px); }


/* 14 FAQ ==================================================================== */
.fl-faq .faq__item[open] { background: linear-gradient(90deg, var(--fl-stone), rgba(244, 240, 232, 0)); }
.fl-faq .faq__item[open] summary h3 { color: var(--black); }
.fl-faq .faq__item[open] { box-shadow: inset 3px 0 0 var(--accent); }
.fl-faq .faq__item[open] summary, .fl-faq .faq__item[open] .faq__answer { padding-left: 16px; }


.fl-faq .faq__contact a { min-height: 44px; }


/* 15 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .fl-hero__jump .icon, .fl-related a .icon { transition: none; }
}


/* 16 RESPONSIVE ============================================================= */
/* Small phones: each ticket line becomes label over value, and the stamp is left out */
@media (max-width: 479px) {
  .fl-ticket__rows div { flex-direction: column; align-items: flex-start; gap: 2px; }
  .fl-ticket__rows div::after { content: none; }
  .fl-ticket__rows dd { text-align: left; }
  .fl-ticket__stamp { display: none; }
}

/* Phones and small tablets: larger labels inside the dump sketch, which is drawn smaller */
@media (max-width: 767px) {
  .fl-dump__label { font-size: 21px; }
  .fl-dump__label--strong { font-size: 23px; }
}

@media (min-width: 480px) {
  .fl-ticket { padding: 36px 32px 32px; }
  .fl-bays { grid-template-columns: repeat(2, 1fr); }
  .fl-board__row { grid-template-columns: 110px 1fr; align-items: center; gap: 14px; }
}

@media (min-width: 560px) {
  .fl-hero__actions .btn { flex: 0 0 auto; }
}

@media (min-width: 768px) {
  .fl-hero { padding-top: 34px; }
  .fl-bucket img { aspect-ratio: 16 / 9; object-position: 50% 50%; }
  .fl-hero__tag { right: auto; bottom: auto; left: 0; top: 14px; }
  .fl-hero__title { max-width: 16ch; font-size: clamp(3.2rem, 6.6vw, 3.6rem); }
  .fl-cycle { grid-template-columns: repeat(4, 1fr); }
  .fl-cycle li { padding: 20px 22px 22px; }
  .fl-unit__body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; padding: 36px 34px; }
  .fl-unit__index, .fl-unit__name, .fl-unit__desc { grid-column: 1; }
  .fl-unit__label, .fl-unit__uses, .fl-unit__operator, .fl-unit__cta { grid-column: 2; }
  .fl-unit__index { grid-row: 1; }
  .fl-unit__name { grid-row: 2; }
  .fl-unit__desc { grid-row: 3 / span 3; }
  .fl-unit__label { grid-row: 1; }
  .fl-unit__uses { grid-row: 2 / span 2; }
  .fl-unit__operator { grid-row: 4; }
  .fl-unit__cta { grid-row: 5; width: auto; justify-self: start; }
  .fl-jobs { grid-template-columns: repeat(2, 1fr); }
  .fl-reasons { grid-template-columns: repeat(2, 1fr); }
  .fl-reason:last-child { grid-column: span 2; }
  .fl-checks { grid-template-columns: 1fr 1fr; gap: 36px; }

  /* the comparison becomes a real table */
  .fl-table thead { position: static; width: auto; height: auto; overflow: visible; clip: auto; clip-path: none; white-space: normal; display: table-header-group; }
  .fl-table tr { display: table-row; padding: 0; }
  .fl-table th, .fl-table td { display: table-cell; padding: 20px 18px; vertical-align: top; border-bottom: 1px solid var(--fl-line); }
  .fl-table tbody tr:last-child th, .fl-table tbody tr:last-child td { border-bottom: 0; }
  .fl-table thead th { padding: 14px 18px; text-align: left; font: 500 .7rem var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-500); background: var(--fl-stone); }
  .fl-table { table-layout: fixed; }
  .fl-table thead th:first-child { width: 23%; }
  .fl-table thead th:nth-child(2) { width: 24%; }
  .fl-table th[scope="row"] { margin: 0; }
  .fl-table td::before { content: none; }
  .fl-table__corner { color: var(--fl-brass-text); }
  .fl-table__row--main th, .fl-table__row--main td { border-bottom-color: transparent; }

  .fl-split { grid-template-columns: 1fr 1fr; }
  .fl-split__side { padding: 40px 36px; }
  .fl-split__side--ours { margin: 0 0 0 -56px; padding: 40px 36px 40px calc(56px + 40px); clip-path: polygon(56px 0, 100% 0, 100% 100%, 0 100%); }
}

@media (min-width: 1024px) {
  .fl-hero__grid { grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: 56px; align-items: center; }
  .fl-crumbs { margin-bottom: 40px; }
  .fl-hero__title { max-width: 13ch; font-size: var(--fs-h1); }
  .fl-hero__actions .btn { flex: 0 0 auto; }
  .fl-cycle { margin-top: 44px; }
  .fl-cycle::before { /* the path the bucket travels, from the pile up to the truck */
    content: ""; position: absolute; left: 12%; right: 12%; top: -26px; height: 52px;
    border: 1.5px dashed rgba(196, 168, 116, .5); border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    pointer-events: none;
  }
  .fl-intro__grid { grid-template-columns: 1.25fr .85fr; gap: 80px; }
  .fl-names { position: sticky; top: calc(var(--header-h) + 40px); margin-top: 54px; }
  .fl-unit__body { gap: 0 64px; padding: 44px 48px; }
  .fl-figures__grid { grid-template-columns: .9fr 1.1fr; gap: 70px; }
  .fl-bays { grid-template-columns: repeat(4, 1fr); gap: 0; }
  .fl-bay { padding-right: 20px; }
  .fl-bay:last-child::after { content: ""; position: absolute; right: -10px; top: 0; bottom: -3px; width: 10px; background: var(--fl-concrete); }
  .fl-bay + .fl-bay { margin-left: 0; }
  .fl-jobs { grid-template-columns: repeat(3, 1fr); gap: 44px 26px; }
  .fl-reasons { grid-template-columns: repeat(5, 1fr); }
  .fl-reason:last-child { grid-column: auto; }
  .fl-area__grid { grid-template-columns: 1fr 1fr; gap: 90px; }
  .fl-quote__grid { grid-template-columns: 1.5fr .9fr; gap: 72px; align-items: start; }
  .fl-quote__box { position: sticky; top: calc(var(--header-h) + 40px); padding: 34px 30px; }
}

@media (min-width: 1440px) {
  .fl-hero__grid { gap: 72px; }
  .fl-unit__body { padding: 52px 60px; }
}