/* ==========================================================================
   Creatio Construction: Motor Graders category page styles
   Loaded only by motor-graders.html, after style.css. Every class here starts
   with "mg-" (or sits under .page-motor-graders), so the homepage, Services,
   Equipment Overview, Backhoes, Excavators, Skid Steers and Compactors are
   not affected.
   The look is "drafting sheet": the hero photo is set inside a framed drawing
   sheet with zone letters, a station ruler and a title block, a crowned road
   cross section runs under it, the intro sits beside a leveling rod, the
   figures are a data plate beside a blade elevation drawing, applications
   are stations along a chainage line, reasons are benchmarks on one level
   line and the quote list is laid out like a field form.

   CONTENTS
   01  Page tokens and navigation state
   02  Hero: drawing sheet, ruler and title block
   03  Crown cross section
   04  Introduction and leveling rod
   05  The CASE VHP 865B
   06  Published figures and blade drawing
   07  Applications (stations)
   08  Which machine
   09  Why Creatio (benchmarks)
   10  Operator option
   11  Service area
   12  Request a quote and related links
   13  FAQ
   14  Motion preferences
   15  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-motor-graders {
  --mg-sheet: #15161a;
  --mg-sheet-2: #1d1f23;
  --mg-sheet-3: #272a2f;
  --mg-paper: #f6f3ec;
  --mg-paper-2: #ece6da;
  --mg-earth: #c9b48c;
  --mg-line: rgba(28, 24, 18, .14);
  --mg-line-strong: rgba(28, 24, 18, .32);
  --mg-hair: rgba(196, 168, 116, .38); /* brass hairline on graphite */
  --mg-line-dark: rgba(255, 255, 255, .12);
  --mg-brass-text: #6f5830; /* darker brass for small text on light surfaces (5.4:1 on paper, 6.7:1 on white) */
  /* fine drafting grid used only behind the hero sheet */
  --mg-grid:
    linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 100% 24px,
    linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px) 0 0 / 24px 100%;
}

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


/* 02 HERO: DRAWING SHEET, RULER AND TITLE BLOCK ============================= */
.mg-hero { position: relative; isolation: isolate; padding: 22px 0 0; background: var(--mg-sheet); color: rgba(255, 255, 255, .8); }

/* the sheet: a hairline frame with a second inset frame, like a drawing border */
.mg-sheet {
  position: relative; padding: 18px 14px 20px;
  background: var(--mg-grid);
  border: 1px solid var(--mg-hair);
  box-shadow: inset 0 0 0 6px var(--mg-sheet), inset 0 0 0 7px rgba(196, 168, 116, .16);
}
/* zone letters across the top edge and numbers down the side (decorative) */
.mg-sheet__zones { position: absolute; display: flex; pointer-events: none; font: 500 .62rem/1 var(--font-head); letter-spacing: .12em; color: rgba(196, 168, 116, .7); }
.mg-sheet__zones--top { top: -7px; left: 10%; right: 10%; justify-content: space-between; }
.mg-sheet__zones--side { top: 18%; bottom: 18%; left: -5px; flex-direction: column; justify-content: space-between; }
.mg-sheet__zones span { padding: 0 4px; background: var(--mg-sheet); }

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

.mg-hero__head { display: grid; gap: 20px; margin-bottom: 26px; }
.mg-hero__kicker { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 0 0 16px; font: 500 .78rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mg-hero__kicker span { padding: 6px 10px 5px; border: 1px solid var(--accent); color: var(--accent); }
.mg-hero__title { max-width: 12ch; margin: 0; color: var(--white); font-size: clamp(2.35rem, 7.2vw, 5.2rem); line-height: .96; letter-spacing: -.045em; }
/* one long blade line under the headline */
.mg-hero__title::after { content: ""; display: block; width: min(100%, 420px); height: 3px; margin-top: 22px; background: linear-gradient(90deg, var(--accent) 0 72%, transparent 72% 76%, var(--accent) 76% 80%, transparent 80%); }
.mg-hero__lead { max-width: 54ch; margin-bottom: 24px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .82); }
.mg-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.mg-hero__actions .btn { flex: 1 1 240px; }
.mg-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: 1px dashed var(--accent); }
.mg-hero__jump .icon { transition: transform .3s var(--ease); }
.mg-hero__jump:hover .icon { transform: translateY(3px); }

/* the photo plate with crop marks at its corners */
.mg-hero__plate { position: relative; margin: 0; padding: 10px; border: 1px solid var(--mg-hair); background: var(--mg-sheet-2); }
.mg-hero__plate::before, .mg-hero__plate::after { content: ""; position: absolute; z-index: 1; width: 22px; height: 22px; pointer-events: none; border-color: var(--accent); border-style: solid; }
.mg-hero__plate::before { top: -6px; left: -6px; border-width: 2px 0 0 2px; }
.mg-hero__plate::after { right: -6px; bottom: 30px; border-width: 0 2px 2px 0; }
.mg-hero__plate picture, .mg-hero__plate img { display: block; width: 100%; }
.mg-hero__plate img { aspect-ratio: 3 / 2; height: auto; object-fit: cover; object-position: 50% 50%; }

/* station ruler along the foot of the photo */
.mg-ruler {
  display: flex; justify-content: space-between; height: 30px; padding-top: 12px; margin-top: 2px;
  background:
    linear-gradient(90deg, var(--accent) 1px, transparent 1px) 0 0 / 10% 12px repeat-x,
    linear-gradient(90deg, rgba(196, 168, 116, .55) 1px, transparent 1px) 0 0 / 2% 6px repeat-x;
  border-top: 1px solid var(--accent);
  font: 500 .62rem/1 var(--font-head); letter-spacing: .08em; color: rgba(255, 255, 255, .62);
}
.mg-ruler span:nth-child(even) { display: none; }

/* title block: the machine facts set as a drawing title block */
.mg-titleblock { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border: 1px solid var(--mg-hair); background: var(--mg-sheet); }
.mg-titleblock__row { padding: 12px 14px 11px; border-top: 1px solid var(--mg-hair); }
.mg-titleblock__row:nth-child(even) { border-left: 1px solid var(--mg-hair); }
.mg-titleblock__row--wide { grid-column: 1 / -1; border-top: 0; background: rgba(196, 168, 116, .08); }
.mg-titleblock__row--wide + .mg-titleblock__row { border-left: 0; }
.mg-titleblock__row--wide ~ .mg-titleblock__row:nth-child(odd) { border-left: 1px solid var(--mg-hair); }
.mg-titleblock__row--wide ~ .mg-titleblock__row:nth-child(even) { border-left: 0; }
.mg-titleblock dt { margin-bottom: 4px; font: 600 .64rem/1.2 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.mg-titleblock dd { color: var(--white); font: 600 clamp(1rem, 2vw, 1.2rem)/1.2 var(--font-head); letter-spacing: -.01em; }
.mg-titleblock__row--wide dd { font-size: clamp(1.2rem, 2.6vw, 1.55rem); }


/* 03 CROWN CROSS SECTION ==================================================== */
.mg-crown { position: relative; height: 92px; margin-top: 34px; background: linear-gradient(180deg, var(--mg-sheet) 0 40%, var(--mg-paper) 40%); }
.mg-crown svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.mg-crown__ground { fill: var(--mg-paper); stroke: var(--accent); stroke-width: 2; vector-effect: non-scaling-stroke; }
.mg-crown__axis { stroke: rgba(111, 88, 48, .55); stroke-width: 1; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; }
.mg-crown__tag { position: absolute; font: 600 .66rem/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--mg-brass-text); }
.mg-crown__tag--left { left: 22%; top: 60%; }
.mg-crown__tag--mid { left: 50%; top: 60%; transform: translateX(10px); }
.mg-crown__tag--right { right: 22%; top: 60%; }


/* 04 INTRODUCTION AND LEVELING ROD ========================================== */
.mg-intro { background: var(--mg-paper); padding-top: clamp(48px, 6vw, 90px); }
.mg-intro__grid { display: grid; gap: 44px; align-items: start; }
.mg-intro__text .section-title { max-width: 15ch; margin-bottom: 28px; }
.mg-intro__statement {
  max-width: 36ch; margin-bottom: 28px; padding: 0 0 18px;
  color: var(--black); font: 500 clamp(1.2rem, 2.1vw, 1.55rem)/1.4 var(--font-head); letter-spacing: -.02em;
  border-bottom: 1px solid var(--mg-line-strong);
  background: linear-gradient(var(--accent), var(--accent)) 0 100% / 96px 3px no-repeat;
}
.mg-intro__text p:last-child { margin-bottom: 0; }
.mg-intro__text a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }

.mg-rod { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 20px; padding: 26px 22px 24px; background: var(--white); border: 1px solid var(--mg-line); }
/* a surveyor's leveling rod: alternating black and white blocks with a brass tenth mark */
.mg-rod__staff {
  align-self: stretch; min-height: 260px; border: 1px solid var(--black);
  background:
    linear-gradient(180deg, transparent 0 48%, var(--accent) 48% 52%, transparent 52%),
    repeating-linear-gradient(180deg, var(--black) 0 10px, var(--white) 10px 20px) 0 0 / 50% 100% no-repeat,
    repeating-linear-gradient(180deg, var(--white) 0 10px, var(--black) 10px 20px) 100% 0 / 50% 100% no-repeat;
}
.mg-rod__title { margin-bottom: 14px; font-size: 1.15rem; }
.mg-rod__readings { display: grid; counter-reset: mg-read; }
.mg-rod__readings li { position: relative; display: grid; gap: 2px; padding: 12px 0 12px 44px; border-top: 1px solid var(--mg-line); counter-increment: mg-read; }
.mg-rod__readings li::before { content: "R" counter(mg-read); position: absolute; left: 0; top: 13px; font: 600 .74rem/1 var(--font-head); letter-spacing: .08em; color: var(--mg-brass-text); }
.mg-rod__readings strong { color: var(--black); font: 600 .78rem/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase; }
.mg-rod__readings span { font-size: .98rem; line-height: 1.5; }


/* 05 THE CASE VHP 865B ====================================================== */
.mg-model { background: var(--white); }
.mg-model__head { max-width: 60ch; margin-bottom: clamp(36px, 5vw, 60px); }
.mg-model__head .section-title { margin-bottom: 20px; }
.mg-model__head p:last-child { margin: 0; }

.mg-unit { display: grid; border-top: 4px solid var(--black); background: var(--mg-paper); }
.mg-unit__media { position: relative; margin: 0; background: var(--mg-sheet); }
.mg-unit__media picture, .mg-unit__media img { display: block; width: 100%; }
.mg-unit__media img { height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.mg-unit__caption { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 12px 16px; font: 500 .74rem/1.3 var(--font-head); letter-spacing: .06em; color: rgba(255, 255, 255, .78); border-top: 1px solid var(--accent); }
.mg-unit__caption span { padding: 4px 8px 3px; border: 1px solid var(--accent); color: var(--accent); letter-spacing: .18em; font-size: .68rem; }

.mg-unit__body { padding: 28px 22px 30px; }
.mg-unit__index { margin: 0 0 8px; font: 600 .74rem/1.2 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--mg-brass-text); }
.mg-unit__name { margin-bottom: 14px; font-size: clamp(2rem, 4.4vw, 3rem); letter-spacing: -.04em; }
.mg-unit__desc { color: var(--ink); }
.mg-unit__label { margin: 22px 0 10px; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--mg-brass-text); }
.mg-unit__uses { display: grid; gap: 0; margin-bottom: 24px; border-top: 1px solid var(--mg-line-strong); }
.mg-unit__uses li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--mg-line); color: var(--black); font-size: 1rem; line-height: 1.5; }
.mg-unit__uses .icon { margin-top: .35em; color: var(--mg-brass-text); font-size: .85rem; }

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


/* 06 PUBLISHED FIGURES AND BLADE DRAWING ==================================== */
.mg-figures { background: var(--mg-sheet); color: rgba(255, 255, 255, .78); }
.mg-figures::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--mg-grid); -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%); mask-image: linear-gradient(180deg, #000, transparent 70%); }
.mg-figures .container { position: relative; }
.mg-figures__grid { display: grid; gap: 28px; align-items: start; }

/* data plate: a riveted metal plate with stamped rows */
.mg-plate { position: relative; padding: 22px 18px; background: linear-gradient(160deg, #2b2d32, #202226); border: 1px solid rgba(255, 255, 255, .14); }
.mg-plate::before, .mg-plate::after { content: ""; position: absolute; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: rgba(196, 168, 116, .7); box-shadow: 0 calc(100% - 0px) 0 transparent; }
.mg-plate::before { left: 9px; }
.mg-plate::after { right: 9px; }
.mg-plate__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; padding: 11px 4px; border-bottom: 1px solid var(--mg-line-dark); }
.mg-plate__row:first-child { border-top: 1px solid var(--mg-line-dark); }
.mg-plate dt { font: 600 .72rem/1.35 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.mg-plate dd { color: var(--white); font: 600 1rem/1.35 var(--font-head); }

.mg-blade { margin: 0; padding: 20px 18px 18px; background: var(--mg-paper); color: var(--ink); }
.mg-blade__drawing { display: block; width: 100%; height: auto; }
.mg-blade__ground { stroke: var(--black); stroke-width: 2; }
.mg-blade__cut { fill: rgba(201, 180, 140, .45); stroke: var(--mg-brass-text); stroke-width: 1; stroke-dasharray: 5 4; }
.mg-blade__steel { fill: var(--accent); stroke: var(--black); stroke-width: 2; }
.mg-blade__edge { stroke: var(--black); stroke-width: 5; }
.mg-blade__dim { stroke: var(--black); stroke-width: 1.2; marker-start: none; }
.mg-blade__ext { stroke: rgba(10, 10, 11, .45); stroke-width: 1; stroke-dasharray: 3 3; }
.mg-blade__label { fill: var(--black); font: 600 15px var(--font-head); letter-spacing: .02em; }
.mg-blade figcaption { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--mg-line); font-size: .92rem; line-height: 1.5; color: var(--gray-700); }

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


/* 07 APPLICATIONS (STATIONS) ================================================ */
.mg-uses { background: var(--mg-paper); }
.mg-stations { position: relative; display: grid; gap: 0; padding-left: 26px; }
/* chainage line: a solid rule with a tick at every station */
.mg-stations::before { content: ""; position: absolute; top: 6px; bottom: 6px; left: 6px; width: 2px; background: var(--black); }
.mg-station { position: relative; padding: 0 0 26px 18px; }
.mg-station::before { content: ""; position: absolute; left: -26px; top: 4px; width: 14px; height: 14px; background: var(--mg-paper); border: 2px solid var(--black); transform: rotate(45deg); }
.mg-station:first-child::before { background: var(--accent); }
.mg-station__sta { margin: 0 0 8px; font: 600 .74rem/1 var(--font-head); letter-spacing: .16em; color: var(--mg-brass-text); }
.mg-station h3 { margin-bottom: 6px; font-size: 1.15rem; }
.mg-station p:last-child { margin: 0; font-size: 1rem; line-height: 1.6; }


/* 08 WHICH MACHINE ========================================================== */
.mg-match { background: var(--white); }
.mg-match__head { max-width: 62ch; margin-bottom: clamp(32px, 4.5vw, 52px); }
.mg-match__head .section-title { max-width: 18ch; margin-bottom: 20px; }
.mg-match__head p:last-child { margin: 0; }
.mg-rows { display: grid; border-top: 2px solid var(--black); }
.mg-row { display: grid; gap: 6px; padding: 20px 0 18px; border-bottom: 1px solid var(--mg-line); }
.mg-row__job { margin: 0; font-size: 1.12rem; }
.mg-row__why { margin: 0; font-size: 1rem; line-height: 1.55; }
.mg-row__machine { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 4px 0 0; }
.mg-row__machine span { font: 600 .72rem/1 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--mg-brass-text); }
.mg-row__machine a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--black); font: 600 .95rem var(--font-head); text-decoration: none; border-bottom: 1px solid var(--accent); }
.mg-row__machine a .icon { transition: transform .3s var(--ease); }
.mg-row__machine a:hover .icon { transform: translateX(4px); }
.mg-row--main { position: relative; margin: 0 -14px; padding: 22px 14px 20px; background: var(--mg-sheet); border-bottom: 0; color: rgba(255, 255, 255, .8); }
.mg-row--main .mg-row__job, .mg-row--main .mg-row__machine a { color: var(--white); }
.mg-row--main .mg-row__machine span { color: var(--accent); }
.mg-match__note { max-width: 72ch; margin: 22px 0 0; font-size: .98rem; }


/* 09 WHY CREATIO (BENCHMARKS) =============================================== */
.mg-why { background: var(--mg-paper-2); }
.mg-marks { position: relative; display: grid; gap: 0; }
.mg-mark { position: relative; padding: 22px 0 22px 64px; border-top: 1px solid var(--mg-line-strong); }
.mg-mark:last-child { border-bottom: 1px solid var(--mg-line-strong); }
/* benchmark symbol: a filled triangle on a short base line */
.mg-mark::before { content: ""; position: absolute; left: 6px; top: 26px; width: 0; height: 0; border-left: 13px solid transparent; border-right: 13px solid transparent; border-bottom: 20px solid var(--black); }
.mg-mark::after { content: ""; position: absolute; left: 0; top: 46px; width: 38px; height: 2px; background: var(--accent); }
.mg-mark__bm { margin: 0 0 6px; font: 600 .7rem/1 var(--font-head); letter-spacing: .2em; color: var(--mg-brass-text); }
.mg-mark h3 { margin-bottom: 6px; font-size: 1.15rem; }
.mg-mark p:last-child { margin: 0; font-size: 1rem; line-height: 1.6; }


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

.mg-modes { display: grid; gap: 0; }
.mg-mode { padding: 26px 22px 24px; background: var(--mg-sheet-2); border: 1px solid var(--mg-line-dark); }
.mg-mode h3 { margin-bottom: 8px; color: var(--white); font-size: 1.22rem; }
.mg-mode p:last-child { margin: 0; line-height: 1.6; }
.mg-mode__label { margin: 0 0 14px; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.mg-mode--ours { border-color: rgba(196, 168, 116, .5); background: linear-gradient(180deg, rgba(196, 168, 116, .12), rgba(196, 168, 116, .04)); }
.mg-mode--ours .mg-mode__label { color: var(--accent); }
/* "or" sits on a horizontal blade bar between the two options */
.mg-modes__or { position: relative; display: grid; place-items: center; height: 54px; }
.mg-modes__or::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 6px; margin-top: -3px; background: linear-gradient(180deg, var(--accent) 0 70%, #8a7448 70%); }
.mg-modes__or span { position: relative; display: grid; place-items: center; width: 40px; height: 40px; background: var(--black); border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 600 .8rem/1 var(--font-head); letter-spacing: .1em; text-transform: uppercase; }
.mg-operator__note { display: flex; gap: 12px; align-items: flex-start; max-width: 76ch; margin: 22px 0 0; font-size: .98rem; line-height: 1.6; }
.mg-operator__note .icon { margin-top: .3em; color: var(--accent); }


/* 11 SERVICE AREA =========================================================== */
.mg-area { background: var(--white); }
.mg-area__grid { display: grid; gap: 36px; align-items: start; }
.mg-area__text .section-title { max-width: 15ch; margin-bottom: 22px; }
.mg-area__note { margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--mg-line); font-size: .98rem; }

/* coverage sheet: groups of places set between level lines */
.mg-cover { display: grid; border: 1px solid var(--mg-line-strong); background: var(--mg-paper); }
.mg-cover__group { display: grid; grid-template-columns: minmax(0, 9.5em) minmax(0, 1fr); column-gap: 16px; padding: 14px 16px; border-top: 1px solid var(--mg-line); }
.mg-cover__group:first-child { border-top: 0; }
.mg-cover dt { grid-row: 1 / span 3; align-self: start; padding-top: 3px; font: 600 .7rem/1.3 var(--font-head); letter-spacing: .18em; text-transform: uppercase; color: var(--mg-brass-text); }
.mg-cover dd { grid-column: 2; color: var(--black); font: 600 1.05rem/1.45 var(--font-head); }
.mg-cover__group--base { background: var(--mg-sheet); }
.mg-cover__group--base dt { color: var(--accent); }
.mg-cover__group--base dd { color: var(--white); font-size: 1.25rem; }
.mg-cover__group--more dd { color: var(--gray-700); font-weight: 500; }


/* 12 REQUEST A QUOTE AND RELATED LINKS ===================================== */
.mg-quote { background: var(--mg-sheet); color: rgba(255, 255, 255, .78); }
.mg-quote__grid { display: grid; gap: 36px; align-items: start; }
.mg-quote__main .section-title { max-width: 14ch; margin-bottom: 22px; color: var(--white); }
.mg-quote__intro { max-width: 52ch; font-size: var(--fs-lead); }
/* field form: numbered entries, each with a blank line to fill, as on a site form */
.mg-fieldform { display: grid; margin: 26px 0 22px; border-top: 1px solid var(--mg-hair); counter-reset: mg-field; }
.mg-fieldform li { position: relative; display: grid; gap: 2px; padding: 16px 0 18px 54px; border-bottom: 1px dashed rgba(196, 168, 116, .45); counter-increment: mg-field; }
.mg-fieldform li::before { content: counter(mg-field, decimal-leading-zero); position: absolute; left: 0; top: 16px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--accent); color: var(--accent); font: 600 .8rem/1 var(--font-head); }
.mg-fieldform h3 { margin: 0; color: var(--white); font-size: 1.05rem; }
.mg-fieldform p { margin: 0; font-size: .98rem; line-height: 1.5; }
.mg-quote__extra { margin: 0; font-size: .98rem; }

.mg-quote__box { display: grid; gap: 12px; padding: 30px 24px; background: var(--white); color: var(--ink); border: 1px solid var(--accent); box-shadow: 8px 8px 0 -1px var(--mg-sheet), 8px 8px 0 0 var(--accent); }
.mg-quote__kicker { margin: 0; font: 600 .72rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--mg-brass-text); }
.mg-quote__box h3 { margin: 0 0 8px; font-size: 1.45rem; }
.mg-quote__box .btn--light { background: var(--black); color: var(--white); }
.mg-quote__box .btn--light::before { background: var(--steel); }
.mg-quote__box .btn--ghost { background: transparent; color: var(--black); border-color: rgba(10, 10, 11, .35); backdrop-filter: none; -webkit-backdrop-filter: none; }
.mg-quote__box .btn--ghost::before { background: var(--black); }
.mg-quote__box .btn--ghost:hover { color: var(--white); border-color: var(--black); }
.mg-quote__lines { display: grid; gap: 4px; margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--mg-line); }
.mg-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; }
.mg-quote__lines a .icon { color: var(--mg-brass-text); }
.mg-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }

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


/* 13 FAQ ==================================================================== */
.mg-faq .faq__contact { background: var(--mg-paper); border-radius: 0; border-top: 3px solid var(--black); }
.mg-faq .faq__contact a { min-height: 44px; }


/* 14 MOTION PREFERENCES ===================================================== */
@media (prefers-reduced-motion: reduce) {
  .mg-hero__jump .icon, .mg-row__machine a .icon { transition: none; }
  .mg-hero__jump:hover .icon, .mg-row__machine a:hover .icon { transform: none; }
}


/* 15 RESPONSIVE ============================================================= */
@media (max-width: 380px) {
  .mg-sheet { padding: 16px 10px 16px; }
  .mg-titleblock dd { font-size: .95rem; }
  .mg-plate__row { grid-template-columns: 1fr; gap: 4px; }
  .mg-cover__group { grid-template-columns: 1fr; }
  .mg-cover dt { grid-row: auto; margin-bottom: 4px; }
  .mg-cover dd { grid-column: 1; }
  .mg-crown__tag--left { left: 12%; }
  .mg-crown__tag--right { right: 12%; }
}

@media (min-width: 560px) {
  .mg-ruler span:nth-child(even) { display: inline; }
}

@media (min-width: 768px) {
  .mg-unit__media img { aspect-ratio: 2 / 1; }
  .mg-sheet { padding: 24px 28px 28px; }
  .mg-hero__plate img { aspect-ratio: 1386 / 660; }
  .mg-titleblock { grid-template-columns: 1.6fr repeat(4, 1fr); }
  .mg-titleblock__row, .mg-titleblock__row:nth-child(n) { border-top: 0; border-left: 1px solid var(--mg-hair); }
  .mg-titleblock__row--wide { grid-column: auto; border-left: 0; }
  .mg-crown { height: 110px; }

  .mg-rod { padding: 30px 28px 28px; }
  .mg-unit__body { padding: 34px 32px 36px; }
  .mg-plate { padding: 28px 26px; }
  .mg-blade { padding: 26px 24px 22px; }

  .mg-stations { grid-template-columns: 1fr 1fr; column-gap: 36px; }

  .mg-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, .8fr); gap: 24px; align-items: center; }
  .mg-row__machine { flex-direction: column; align-items: flex-start; margin: 0; }
  .mg-row--main { margin: 0 -20px; padding: 24px 20px 22px; }

  .mg-marks { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .mg-mark:nth-last-child(2) { border-bottom: 1px solid var(--mg-line-strong); }

  .mg-modes { grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr); }
  .mg-modes__or { height: auto; }
  .mg-modes__or::before { left: 50%; right: auto; top: 0; bottom: 0; width: 6px; height: auto; margin: 0 0 0 -3px; background: linear-gradient(90deg, var(--accent) 0 70%, #8a7448 70%); }
  .mg-mode { padding: 32px 30px 30px; }

  .mg-fieldform { grid-template-columns: 1fr 1fr; column-gap: 28px; }
}

@media (min-width: 1024px) {
  .mg-hero { padding-top: 30px; }
  .mg-sheet { padding: 30px 40px 40px; }
  .mg-hero__head { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px 56px; align-items: end; margin-bottom: 34px; }
  .mg-hero__title { font-size: clamp(3.6rem, 5.8vw, 5.4rem); }
  .mg-hero__lead { margin-bottom: 22px; }
  /* the title block overlaps the lower right corner of the photo, like a drawing title block */
  .mg-titleblock { position: relative; z-index: 2; width: min(880px, 76%); margin: -46px 0 0 auto; box-shadow: 0 -12px 0 0 var(--mg-sheet); grid-template-columns: 2fr repeat(4, minmax(0, 1fr)); }
  .mg-titleblock dd { white-space: nowrap; }
  .mg-hero__plate::after { bottom: 62px; }
  .mg-crown { height: 130px; margin-top: 40px; }

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

  /* photo across the top, then the description and the booking details side by side */
  .mg-unit__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: start; padding: 44px 48px 48px; }
  .mg-unit__label { margin-top: 0; }
  .mg-unit__cta { width: auto; }

  .mg-figures__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; }
  .mg-blade { position: sticky; top: calc(var(--header-h) + 24px); }

  /* stations become a horizontal chainage line with six stops */
  .mg-stations { grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 22px; padding: 46px 0 0; }
  .mg-stations::before { top: 13px; bottom: auto; left: 0; right: 0; width: auto; height: 2px; }
  .mg-stations::after { content: ""; position: absolute; top: 6px; left: 0; right: 0; height: 16px; background: linear-gradient(90deg, var(--black) 1px, transparent 1px) 0 0 / calc(100% / 30) 100% repeat-x; opacity: .35; }
  .mg-station { padding: 0 0 0; }
  .mg-station::before { left: 0; top: -40px; }

  .mg-marks { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 24px; padding-top: 42px; border-top: 2px solid var(--black); }
  .mg-marks::before { content: "Level line"; position: absolute; top: 12px; right: 0; font: 600 .66rem/1 var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--mg-brass-text); }
  .mg-mark, .mg-mark:last-child, .mg-mark:nth-last-child(2) { padding: 0; border: 0; }
  .mg-mark::before { left: 0; top: -53px; }
  .mg-mark::after { top: -33px; }

  .mg-area__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; }

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

@media (min-width: 1440px) {
  .mg-hero__head { column-gap: 88px; }
  .mg-sheet { padding: 34px 48px 44px; }
}