/* ==========================================================================
   Creatio Construction: Compactors category page styles
   Loaded only by compactors.html, after style.css. Every class here starts
   with "cp-" (or sits under .page-compactors), so the homepage, Services,
   Equipment Overview, Backhoes, Excavators and Skid Steers are not affected.
   The look is "rolled layers": a graphite type block over a wide panoramic
   photo band, stacked lift stripes that thin out as they compact, a drum
   tread texture, overlapping pass bands, a spec sheet with leader rules and
   the service area drawn as a stretch of road.

   CONTENTS
   01  Page tokens and navigation state
   02  Hero, lift stripes and ledger
   03  Introduction and layer profile
   04  The CASE SV210
   05  Uses (passes)
   06  Loader, grader or roller
   07  Why Creatio
   08  Operator option
   09  Service area
   10  Request a quote and related links
   11  FAQ
   12  Motion preferences
   13  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-compactors {
  --cp-graphite: #141517;
  --cp-asphalt: #1d1e21;
  --cp-asphalt-2: #26272b;
  --cp-stone: #e9e3d7;
  --cp-stone-2: #f4f1eb;
  --cp-sand: #d8c6a2;
  --cp-line: rgba(28, 24, 18, .14);
  --cp-line-dark: rgba(255, 255, 255, .12);
  --cp-brass-text: #6f5830; /* darker brass for small text on light surfaces (5.4:1 on stone, 6.7:1 on white) */
  /* diagonal drum tread, used as a thin texture strip */
  --cp-tread: repeating-linear-gradient(135deg, rgba(196, 168, 116, .9) 0 6px, transparent 6px 14px);
}

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


/* 02 HERO, LIFT STRIPES AND LEDGER ========================================= */
.cp-hero { position: relative; isolation: isolate; overflow: hidden; padding: 22px 0 0; background: var(--cp-graphite); color: rgba(255, 255, 255, .8); }
/* faint chevron tread pattern in the top right corner, like a tire print */
.cp-hero__tread {
  position: absolute; z-index: -1; top: 0; right: 0; width: min(560px, 70vw); height: 340px; pointer-events: none;
  background:
    repeating-linear-gradient(60deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 26px),
    repeating-linear-gradient(-60deg, rgba(255, 255, 255, .045) 0 2px, transparent 2px 26px);
  -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
  mask-image: radial-gradient(ellipse at 100% 0%, #000 0%, transparent 70%);
}

.cp-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; margin-bottom: 10px; font: 500 .76rem var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.cp-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.cp-crumbs li + li::before { content: ""; width: 14px; height: 2px; background: var(--accent); opacity: .8; }
.cp-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .86); text-decoration: none; }
.cp-crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.cp-crumbs [aria-current] { color: var(--accent); font-weight: 600; }

.cp-hero__head { display: grid; gap: 22px; padding-bottom: 0; }
/* phones: headline, then the photo, then the lead and buttons */
.cp-hero__titles { order: 1; }
.cp-hero__band { order: 2; }
.cp-hero__side { order: 3; padding-bottom: 34px; }
.cp-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, .7); }
.cp-hero__kicker span { padding: 7px 10px 6px; background: var(--accent); color: var(--black); }
.cp-hero__title { max-width: 11ch; margin: 0; color: var(--white); font-size: clamp(2.45rem, 7.6vw, 5.4rem); line-height: .95; letter-spacing: -.045em; }
.cp-hero__lead { max-width: 52ch; margin-bottom: 26px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .82); }
.cp-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.cp-hero__actions .btn { flex: 1 1 240px; }
.cp-hero__jump {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px;
  color: var(--white); font: 600 .95rem var(--font-head); text-decoration: none;
  border-bottom: 2px solid var(--accent);
}
.cp-hero__jump .icon { transition: transform .3s var(--ease); }
.cp-hero__jump:hover .icon { transform: translateY(3px); }

/* Panoramic photo band: 4:3 on phones, wide on tablets and up */
.cp-hero__band { position: relative; margin: 0; overflow: hidden; background: var(--cp-asphalt); }
.cp-hero__band::before { /* tread strip along the top edge */
  content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 8px; background: var(--cp-tread); pointer-events: none;
}
.cp-hero__band picture, .cp-hero__band img { display: block; width: 100%; }
.cp-hero__band img { aspect-ratio: 4 / 3; height: auto; object-fit: cover; object-position: 50% 55%; }
.cp-hero__band::after { /* shade at the bottom so the caption stays readable */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0) 60%, rgba(10, 10, 11, .7) 100%);
}
.cp-hero__tag {
  position: absolute; left: 16px; right: 16px; bottom: 14px; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font: 500 .74rem/1.3 var(--font-head); letter-spacing: .06em; color: var(--white);
}
.cp-hero__tag span { padding: 5px 8px 4px; background: var(--accent); color: var(--black); letter-spacing: .18em; text-transform: uppercase; font-size: .7rem; }

/* Lift stripes: four layers, each thinner and lighter, read as compacted ground */
.cp-lifts { display: grid; }
.cp-lifts span { display: block; }
.cp-lifts span:nth-child(1) { height: 22px; background: #2b2a27; }
.cp-lifts span:nth-child(2) { height: 14px; background: #575043; }
.cp-lifts span:nth-child(3) { height: 9px; background: #9b8c6e; }
.cp-lifts span:nth-child(4) { height: 5px; background: var(--cp-sand); }

/* Ledger: four key facts on the stone base below the stripes */
.cp-hero > .container:last-child { background: var(--cp-stone); max-width: none; }
.cp-ledger {
  display: grid; grid-template-columns: 1fr 1fr;
  max-width: calc(var(--container)); margin: 0 auto; padding: 26px 0 30px;
}
.cp-ledger__row { padding: 14px 14px 12px 0; border-top: 3px solid var(--black); }
.cp-ledger__row:nth-child(even) { padding-left: 14px; border-left: 1px solid var(--cp-line); }
.cp-ledger dt { margin-bottom: 4px; font: 600 .7rem/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--cp-brass-text); }
.cp-ledger dd { color: var(--black); font: 600 clamp(1rem, 2.2vw, 1.45rem)/1.2 var(--font-head); letter-spacing: -.02em; }


/* 03 INTRODUCTION AND LAYER PROFILE ======================================== */
.cp-intro { background: var(--white); }
.cp-intro__grid { display: grid; gap: 44px; align-items: start; }
.cp-intro__text .section-title { max-width: 15ch; margin-bottom: 28px; }
.cp-intro__statement {
  max-width: 34ch; margin-bottom: 28px; padding: 6px 0 6px 24px;
  color: var(--black); font: 500 clamp(1.2rem, 2.1vw, 1.55rem)/1.4 var(--font-head); letter-spacing: -.02em;
  /* left edge drawn as stacked layers */
  background: linear-gradient(var(--black), var(--black)) 0 0 / 4px 34% no-repeat,
              linear-gradient(var(--gray-500), var(--gray-500)) 0 38% / 4px 26% no-repeat,
              linear-gradient(var(--accent), var(--accent)) 0 68% / 4px 18% no-repeat,
              linear-gradient(var(--cp-sand), var(--cp-sand)) 0 100% / 4px 10% no-repeat;
}
.cp-intro__text p:last-child { margin-bottom: 0; }
.cp-intro__text a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.cp-profile { padding: 28px 22px 24px; background: var(--cp-graphite); color: rgba(255, 255, 255, .8); }
.cp-profile__title { margin-bottom: 18px; color: var(--white); font-size: 1.15rem; }
.cp-profile__layers { display: grid; }
.cp-profile__layer { display: grid; gap: 2px; padding: 14px 16px 12px; color: var(--black); }
.cp-profile__layer strong { font: 600 .74rem/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase; }
.cp-profile__layer span { font-size: .96rem; line-height: 1.45; }
.cp-profile__layer--surface { background: var(--cp-asphalt-2); color: var(--white); border-top: 3px solid var(--accent); }
.cp-profile__layer--base { background-color: #a49a87; background-image: radial-gradient(rgba(20, 20, 20, .16) 1.2px, transparent 1.6px); background-size: 9px 9px; }
.cp-profile__layer--fill { background-color: #c8b993; background-image: repeating-linear-gradient(0deg, rgba(20, 20, 20, .07) 0 1px, transparent 1px 8px); }
.cp-profile__layer--ground { background-color: var(--cp-sand); background-image: radial-gradient(rgba(20, 20, 20, .1) 1.6px, transparent 2px); background-size: 14px 12px; }
.cp-profile__note { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0 0; font-size: .96rem; line-height: 1.5; }
.cp-profile__note .icon { margin-top: .3em; color: var(--accent); }


/* 04 THE CASE SV210 ========================================================= */
.cp-model { background: var(--cp-stone-2); }
.cp-model__head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 60px); }
.cp-model__head .section-title { margin-bottom: 20px; }
.cp-model__head p:last-child { margin: 0; }

.cp-unit { display: grid; background: var(--white); border: 1px solid var(--cp-line); }
.cp-unit__visual { display: grid; grid-template-rows: auto 1fr; }
.cp-unit__media { position: relative; overflow: hidden; background: var(--cp-asphalt); }
.cp-unit__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cp-unit__media::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--cp-tread); }
.cp-unit__uses { padding: 24px 22px 26px; background: var(--cp-graphite); color: rgba(255, 255, 255, .84); }
.cp-unit__label { margin: 0 0 12px; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.cp-unit__uses ul { display: grid; gap: 8px; }
.cp-unit__uses li { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; line-height: 1.5; }
.cp-unit__uses .icon { margin-top: .35em; color: var(--accent); font-size: .85rem; }

.cp-unit__body { padding: 28px 22px 30px; }
.cp-unit__index { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 10px; font: 500 .74rem/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--gray-700); }
.cp-unit__index span { padding: 6px 8px 5px; background: var(--cp-graphite); color: var(--accent); }
.cp-unit__name { margin-bottom: 14px; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.04em; }
.cp-unit__desc { color: var(--ink); }

/* spec sheet with leader rules between the label and the value */
.cp-specs { margin: 22px 0 24px; border-top: 2px solid var(--black); }
.cp-specs__row { display: flex; align-items: baseline; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--cp-line); }
.cp-specs__row dt { flex: 0 0 auto; font: 600 .76rem/1.3 var(--font-head); letter-spacing: .12em; text-transform: uppercase; color: var(--cp-brass-text); }
.cp-specs__row::after { content: ""; order: 1; flex: 1 1 20px; min-width: 20px; border-bottom: 1px dotted rgba(28, 24, 18, .35); transform: translateY(-4px); }
.cp-specs__row dd { order: 2; flex: 0 1 auto; color: var(--black); font: 600 1rem/1.3 var(--font-head); text-align: right; }

.cp-unit__operator { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 22px; padding: 14px 16px; background: var(--cp-stone-2); border-left: 3px solid var(--accent); font-size: .98rem; line-height: 1.55; }
.cp-unit__operator .icon { margin-top: .25em; font-size: 1.1rem; color: var(--cp-brass-text); }
.cp-unit__operator strong { color: var(--black); }
.cp-unit__cta { width: 100%; }

.cp-model__note { display: flex; gap: 12px; align-items: flex-start; max-width: 76ch; margin: 26px 0 0; font-size: .98rem; line-height: 1.6; }
.cp-model__note .icon { margin-top: .3em; color: var(--cp-brass-text); }
.cp-model__note strong { color: var(--black); }


/* 05 USES (PASSES) ========================================================== */
.cp-uses {
  background-color: var(--cp-graphite); color: rgba(255, 255, 255, .78);
  background-image: repeating-linear-gradient(180deg, rgba(255, 255, 255, .025) 0 1px, transparent 1px 44px);
}
.cp-passes { display: grid; }
/* each band overlaps the one above it, the way roller passes overlap */
.cp-pass {
  position: relative; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  margin-top: -1px; padding: 22px 18px 20px; overflow: hidden;
  background: linear-gradient(180deg, rgba(255, 255, 255, .07) 0 10px, rgba(255, 255, 255, .03) 10px 100%);
  border: 1px solid var(--cp-line-dark); border-left: 3px solid var(--accent);
}
.cp-pass::after { /* chevrons showing the travel direction of the pass */
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 120px; pointer-events: none;
  background:
    repeating-linear-gradient(60deg, transparent 0 14px, rgba(196, 168, 116, .16) 14px 16px, transparent 16px 30px);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000);
  mask-image: linear-gradient(90deg, transparent, #000);
}
.cp-pass:nth-child(even)::after { transform: scaleX(-1); }
.cp-pass__no { font: 600 1.6rem/1 var(--font-head); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1px var(--accent); min-width: 2.2em; }
.cp-pass__text { position: relative; z-index: 1; }
.cp-pass h3 { margin-bottom: 6px; color: var(--white); font-size: 1.15rem; }
.cp-pass p { margin: 0; font-size: 1rem; line-height: 1.6; }


/* 06 LOADER, GRADER OR ROLLER ============================================== */
.cp-sequence { background: var(--white); }
.cp-sequence__head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 56px); }
.cp-sequence__head .section-title { margin-bottom: 20px; }
.cp-sequence__head p:last-child { margin: 0; }
.cp-steps { position: relative; display: grid; gap: 12px; }
.cp-step { position: relative; display: flex; flex-direction: column; padding: 26px 22px 22px; background: var(--cp-stone-2); border: 1px solid var(--cp-line); border-top: 4px solid var(--cp-sand); }
.cp-step__stage { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 12px; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--cp-brass-text); }
.cp-step__stage span { padding: 5px 8px 4px; background: var(--accent); color: var(--black); letter-spacing: .16em; }
.cp-step h3 { margin-bottom: 8px; font-size: 1.18rem; }
.cp-step p { margin: 0 0 14px; font-size: 1rem; line-height: 1.6; }
.cp-step__link { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; min-height: 44px; margin-top: auto; color: var(--black); font: 600 .95rem var(--font-head); text-decoration: none; border-bottom: 1px solid var(--accent); }
.cp-step__link .icon { transition: transform .3s var(--ease); }
.cp-step__link:hover .icon { transform: translateX(4px); }
.cp-step--main { background: var(--cp-graphite); border-color: var(--cp-graphite); border-top-color: var(--accent); color: rgba(255, 255, 255, .8); }
.cp-step--main h3, .cp-step--main .cp-step__link { color: var(--white); }
.cp-step--main .cp-step__stage { color: var(--accent); }
.cp-sequence__note { max-width: 70ch; margin: 22px 0 0; font-size: .98rem; }


/* 07 WHY CREATIO ============================================================
   A tall graphite figure block beside a register of reasons, each row set
   between double level lines like a survey sheet. */
.cp-why { background: var(--cp-stone); }
.cp-why__grid { display: grid; gap: 0; }
.cp-why__item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; padding: 22px 0 20px; border-top: 3px double rgba(28, 24, 18, .3); }
.cp-why__item:last-child { border-bottom: 3px double rgba(28, 24, 18, .3); }
.cp-why__item h3 { grid-column: 2; margin-bottom: 6px; font-size: 1.15rem; }
.cp-why__item p { grid-column: 2; margin: 0; font-size: 1rem; line-height: 1.6; }
.cp-why__icon { grid-column: 1; grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cp-brass-text); color: var(--cp-brass-text); }
.cp-why__item--lead { display: block; margin-bottom: 18px; padding: 30px 24px 26px; background: var(--cp-graphite); border: 0; color: rgba(255, 255, 255, .8); }
.cp-why__item--lead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: var(--cp-tread); }
.cp-why__item--lead h3 { color: var(--white); font-size: 1.3rem; }
.cp-why__item .cp-why__figure { margin: 0 0 12px; color: var(--white); font: 600 clamp(3.6rem, 8vw, 6.4rem)/.9 var(--font-head); letter-spacing: -.05em; }
.cp-why__figure span { color: var(--accent); }


/* 08 OPERATOR OPTION ======================================================== */
.cp-operator { background: var(--black); color: rgba(255, 255, 255, .76); }
.cp-operator__head { max-width: 62ch; margin-bottom: 34px; }
.cp-operator__head .section-title { max-width: 16ch; margin-bottom: 22px; color: var(--white); }
.cp-operator__lead { margin: 0; font-size: var(--fs-lead); }
.cp-operator__lead strong { color: var(--white); }

.cp-lanes { display: grid; background: var(--cp-asphalt); border: 1px solid var(--cp-line-dark); }
.cp-lane { padding: 26px 22px 24px; }
.cp-lane h3 { margin-bottom: 8px; color: var(--white); font-size: 1.2rem; }
.cp-lane p:last-child { margin: 0; line-height: 1.6; }
.cp-lane__label { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 14px; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.cp-lane__label span { padding: 5px 8px 4px; border: 1px solid rgba(255, 255, 255, .3); letter-spacing: .14em; }
.cp-lane--ours { background: rgba(196, 168, 116, .07); }
.cp-lane--ours .cp-lane__label { color: var(--accent); }
.cp-lane--ours .cp-lane__label span { border-color: var(--accent); background: var(--accent); color: var(--black); }
/* the road center line between the two lanes */
.cp-lanes__divider { height: 4px; margin: 0 22px; background: repeating-linear-gradient(90deg, var(--accent) 0 26px, transparent 26px 44px); opacity: .85; }
.cp-operator__note { display: flex; gap: 12px; align-items: flex-start; max-width: 76ch; margin: 22px 0 0; font-size: .98rem; line-height: 1.6; }
.cp-operator__note .icon { margin-top: .3em; color: var(--accent); }


/* 09 SERVICE AREA =========================================================== */
.cp-area { background: var(--white); }
.cp-area__text { max-width: 62ch; margin-bottom: 34px; }
.cp-area__text .section-title { max-width: 16ch; margin-bottom: 22px; }
.cp-area__text p:last-child { margin: 0; }
.cp-area__note { max-width: 76ch; margin: 26px 0 0; padding-top: 16px; border-top: 1px solid var(--cp-line); font-size: .98rem; }

/* phones: the road runs down the left side with a stop at each place */
.cp-route__stops { position: relative; display: grid; gap: 4px; padding: 6px 0 6px 58px; }
.cp-route__stops::before { content: ""; position: absolute; top: 0; bottom: 0; left: 10px; width: 26px; background: var(--cp-asphalt); }
.cp-route__stops::after { content: ""; position: absolute; top: 8px; bottom: 8px; left: 22px; width: 2px; background: repeating-linear-gradient(180deg, var(--accent) 0 12px, transparent 12px 22px); }
.cp-route__stop { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; min-height: 50px; padding: 10px 14px; background: var(--cp-stone-2); color: var(--black); font: 600 1rem/1.25 var(--font-head); }
.cp-route__stop::before { /* stop marker on the road */
  content: ""; position: absolute; z-index: 1; left: -43px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  background: var(--white); border: 3px solid var(--accent); border-radius: 50%;
}
.cp-route__stop small { font: 600 .66rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--cp-brass-text); }
.cp-route__stop.is-base { background: var(--cp-graphite); color: var(--white); font-size: 1.12rem; }
.cp-route__stop.is-base small { color: var(--accent); }
.cp-route__stop.is-base::before { background: var(--accent); border-color: var(--white); }
.cp-route__stop--more { background: transparent; border: 1px dashed var(--cp-line); color: var(--gray-700); font-weight: 500; }


/* 10 REQUEST A QUOTE AND RELATED LINKS ===================================== */
.cp-quote { background: var(--cp-asphalt); color: rgba(255, 255, 255, .78); }
.cp-quote::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 8px; background: var(--cp-tread); opacity: .7; }
.cp-quote__grid { display: grid; gap: 36px; align-items: start; }
.cp-quote__main .section-title { max-width: 14ch; margin-bottom: 22px; color: var(--white); }
.cp-quote__intro { max-width: 52ch; font-size: var(--fs-lead); }
.cp-checklist { display: grid; gap: 8px; margin: 26px 0 22px; counter-reset: cp-step; }
.cp-checklist li { position: relative; display: grid; gap: 2px; padding: 16px 16px 14px 62px; background: var(--cp-graphite); border: 1px solid var(--cp-line-dark); counter-increment: cp-step; }
.cp-checklist li::before {
  content: counter(cp-step, decimal-leading-zero);
  position: absolute; left: 0; top: 0; bottom: 0; display: grid; place-items: center; width: 46px;
  background: rgba(196, 168, 116, .12); border-right: 1px solid rgba(196, 168, 116, .4); color: var(--accent); font: 600 .82rem/1 var(--font-head);
}
.cp-checklist h3 { margin: 0; color: var(--white); font-size: 1.05rem; }
.cp-checklist p { margin: 0; font-size: .98rem; line-height: 1.5; }
.cp-quote__extra { margin: 0; font-size: .98rem; }

.cp-quote__box { display: grid; gap: 12px; padding: 30px 24px; background: var(--white); color: var(--ink); border-top: 6px solid var(--accent); }
.cp-quote__kicker { margin: 0; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--cp-brass-text); }
.cp-quote__box h3 { margin: 0 0 8px; font-size: 1.45rem; }
.cp-quote__box .btn--light { background: var(--black); color: var(--white); }
.cp-quote__box .btn--light::before { background: var(--steel); }
.cp-quote__box .btn--ghost { background: transparent; color: var(--black); border-color: rgba(10, 10, 11, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.cp-quote__box .btn--ghost::before { background: var(--black); }
.cp-quote__box .btn--ghost:hover { color: var(--white); border-color: var(--black); }
.cp-quote__lines { display: grid; gap: 4px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--cp-line); }
.cp-quote__lines a { display: flex; align-items: center; gap: 10px; min-height: 44px; color: var(--black); font-size: .92rem; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.cp-quote__lines a .icon { color: var(--cp-brass-text); }
.cp-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

.cp-related { margin-top: clamp(44px, 6vw, 72px); padding-top: 26px; border-top: 1px solid var(--cp-line-dark); }
.cp-related__title { margin-bottom: 14px; color: var(--white); font-size: 1rem; letter-spacing: .02em; }
.cp-related ul { display: flex; flex-wrap: wrap; gap: 8px; }
.cp-related a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px; border: 1px solid var(--cp-line-dark); border-bottom-color: var(--accent); color: var(--white); font: 500 .92rem var(--font-head); text-decoration: none; transition: border-color .2s, background-color .2s; }
.cp-related a .icon { color: var(--accent); font-size: .8rem; }
.cp-related a:hover { border-color: var(--accent); background: rgba(196, 168, 116, .08); }


/* 11 FAQ ==================================================================== */
.cp-faq .faq__contact { background: var(--cp-stone-2); border-radius: 0; border-left: 4px solid var(--accent); }
.cp-faq .faq__contact a { min-height: 44px; }


/* 12 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .cp-hero__jump .icon, .cp-step__link .icon { transition: none; }
  .cp-hero__jump:hover .icon, .cp-step__link:hover .icon { transform: none; }
}


/* 13 RESPONSIVE ============================================================= */
@media (max-width: 380px) {
  .cp-hero__tag { left: 12px; right: 12px; font-size: .7rem; }
  .cp-ledger dd { font-size: .95rem; }
  .cp-specs__row { flex-wrap: wrap; }
  .cp-specs__row::after { display: none; }
  .cp-specs__row dd { flex-basis: 100%; text-align: left; }
}

@media (min-width: 768px) {
  .cp-hero__band img { aspect-ratio: 1540 / 659; object-position: 50% 50%; }
  .cp-hero__tag { left: 24px; bottom: 20px; }
  .cp-ledger { grid-template-columns: repeat(4, 1fr); }
  .cp-ledger__row { padding-left: 16px; border-left: 1px solid var(--cp-line); }
  .cp-ledger__row:first-child { padding-left: 0; border-left: 0; }

  .cp-unit__body { padding: 34px 32px 36px; }
  .cp-pass { grid-template-columns: 70px minmax(0, 1fr); padding: 24px 26px 22px; }
  .cp-pass__text { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 24px; align-items: baseline; padding-right: 90px; }
  .cp-pass h3 { margin: 0; }
  .cp-pass:nth-child(even) { margin-left: 5%; }

  .cp-steps { grid-template-columns: repeat(3, 1fr); }

  .cp-lanes { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .cp-lanes__divider { width: 4px; height: auto; margin: 22px 0; background: repeating-linear-gradient(180deg, var(--accent) 0 26px, transparent 26px 44px); }
  .cp-lane { padding: 32px 30px 30px; }

  .cp-route__stops { grid-template-columns: 1fr 1fr; column-gap: 8px; }
  .cp-route__stops { padding-left: 0; padding-top: 52px; }
  .cp-route__stops::before { top: 0; bottom: auto; left: 0; right: 0; width: auto; height: 26px; }
  .cp-route__stops::after { top: 12px; bottom: auto; left: 8px; right: 8px; width: auto; height: 2px; background: repeating-linear-gradient(90deg, var(--accent) 0 18px, transparent 18px 30px); }
  .cp-route__stop::before { display: none; }
  .cp-checklist { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 1024px) {
  .cp-hero { padding-top: 30px; }
  .cp-hero__head { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px 56px; align-items: end; }
  .cp-hero__titles { order: 1; }
  .cp-hero__side { order: 2; padding-bottom: 0; }
  .cp-hero__band { order: 3; grid-column: 1 / -1; }
  .cp-hero__title { font-size: clamp(3.8rem, 6vw, 5.6rem); }
  .cp-hero__lead { margin-bottom: 22px; }
  .cp-ledger { padding: 30px 0 36px; }

  .cp-intro__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 72px; }
  .cp-profile { position: sticky; top: calc(var(--header-h) + 24px); padding: 32px 28px 28px; }

  .cp-unit { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .cp-unit__body { padding: 44px 44px 46px; }
  .cp-unit__cta { width: auto; }

  /* passes step across in a three band rhythm */
  .cp-pass:nth-child(3n+1) { margin-left: 0; }
  .cp-pass:nth-child(3n+2) { margin-left: 6%; }
  .cp-pass:nth-child(3n) { margin-left: 12%; }

  /* the three stages joined by a line at the level of the stage labels */
  .cp-steps { gap: 18px; }
  .cp-steps::before { content: ""; position: absolute; z-index: 0; left: 0; right: 0; top: -14px; height: 2px; background: linear-gradient(90deg, var(--cp-sand), var(--accent)); }

  .cp-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 64px; }
  .cp-why__item { grid-column: 2; }
  .cp-why__item--lead { grid-column: 1; grid-row: 1 / span 4; align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; margin: 0; padding: 40px 34px 44px; }
  .cp-why__item:nth-child(2) { border-top: 0; }
  .cp-why__item:last-child { border-bottom: 0; }

  /* a straight stretch of road with a stop for each place */
  .cp-route__stops { grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 6px; padding-top: 56px; }
  .cp-route__stop { flex-direction: column; align-items: flex-start; justify-content: flex-start; min-height: 96px; padding: 14px 12px; font-size: .95rem; }
  .cp-route__stop::before { display: block; left: 12px; top: -44px; margin-top: 0; }
  .cp-route__stop.is-base { font-size: 1rem; }

  .cp-quote__grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 64px; }
  .cp-quote__box { position: sticky; top: calc(var(--header-h) + 24px); padding: 36px 32px; }
}

@media (min-width: 1440px) {
  .cp-hero__head { column-gap: 88px; }
  .cp-route__stop { padding: 16px 14px; font-size: 1rem; }
}