/* ==========================================================================
   Creatio Construction: Special Equipment category page styles
   Loaded only by special-equipment.html, after style.css. Every class here
   starts with "se-" (or sits under .page-special-equipment), so the homepage,
   Services, Equipment Overview and the other category pages are not affected.
   The look is "tread plate and nameplates": dark bands carry a fine diamond
   tread plate texture like the decks of the trucks, each unit is introduced
   by a riveted brass nameplate, figures sit on a stamped steel data plate,
   the three tasks hang on a pegboard shadow board, the applications are
   punched tool tags and the reasons to choose Creatio are a column of rivets.
   Photos sit in identical 3:2 frames with brass corner rivets and are never
   cropped or enlarged.

   CONTENTS
   01  Page tokens and navigation state
   02  Shared pieces: frames, rivets, textures
   03  Hero: copy, framed photo and unit nameplates
   04  Overview and shadow board
   05  The units: nameplate, photos and data plate
   06  Match the job (table)
   07  Applications (tool tags) and site photo
   08  Who rents
   09  Pairings with the fleet
   10  Why Creatio (rivet list)
   11  Operator option
   12  Service area
   13  Request a quote and related links
   14  FAQ and footer
   15  Motion preferences
   16  Responsive
   ========================================================================== */


/* 01 PAGE TOKENS AND NAVIGATION STATE ======================================= */
.page-special-equipment {
  --se-black: #0e0f11;
  --se-steel: #1a1b1f;
  --se-steel-2: #24262b;
  --se-stone: #f2ede3;
  --se-stone-2: #e5ddcd;
  --se-line: rgba(30, 25, 16, .14);
  --se-line-strong: rgba(30, 25, 16, .3);
  --se-line-dark: rgba(255, 255, 255, .12);
  --se-brass-text: #6f5830; /* darker brass for small text on light surfaces */
  --se-brass: linear-gradient(135deg, #e0c993 0%, #b8975c 42%, #dcc28c 62%, #a8884f 100%);
  /* fine diamond tread plate used on the dark bands */
  --se-tread:
    linear-gradient(45deg, transparent 43%, rgba(255, 255, 255, .055) 43% 57%, transparent 57%) 0 0 / 24px 24px,
    linear-gradient(-45deg, transparent 43%, rgba(255, 255, 255, .055) 43% 57%, transparent 57%) 12px 12px / 24px 24px;
  /* pegboard holes used on the stone bands */
  --se-peg: radial-gradient(circle, rgba(30, 25, 16, .13) 0 2.2px, transparent 2.8px) 0 0 / 26px 26px;
  /* four brass rivets, one in each corner of an element */
  --se-rivets:
    radial-gradient(circle at 10px 10px, #f1dfb4 0 1.5px, #9c7d46 2.6px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) 10px, #f1dfb4 0 1.5px, #9c7d46 2.6px, transparent 3.4px),
    radial-gradient(circle at 10px calc(100% - 10px), #f1dfb4 0 1.5px, #9c7d46 2.6px, transparent 3.4px),
    radial-gradient(circle at calc(100% - 10px) calc(100% - 10px), #f1dfb4 0 1.5px, #9c7d46 2.6px, transparent 3.4px);
}
.page-special-equipment .nav__sub a[aria-current="page"] { color: var(--accent); }


/* 02 SHARED PIECES =========================================================== */
.se-frame {
  position: relative; overflow: hidden; aspect-ratio: 3 / 2;
  background: var(--se-steel-2); border-radius: var(--radius);
  box-shadow: 0 0 0 1px rgba(196, 168, 116, .45), var(--shadow-sm);
}
.se-frame img { width: 100%; height: 100%; object-fit: cover; }
.se-frame::after { /* brass rivets on the four corners of every photo */
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--se-rivets);
}


/* 03 HERO ==================================================================== */
.se-hero {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 26px 0 clamp(48px, 6vw, 80px); color: rgba(255, 255, 255, .8);
  background: var(--se-tread), linear-gradient(180deg, var(--se-black) 0%, var(--se-steel) 100%);
}
.se-hero::before { /* brass seam along the bottom edge */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--se-brass); opacity: .9;
}
.se-crumbs { margin-bottom: 18px; }
.se-crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; font-size: .82rem; }
.se-crumbs li { display: inline-flex; align-items: center; }
.se-crumbs li + li::before { content: ""; width: 6px; height: 6px; margin: 0 12px; border-radius: 50%; background: var(--accent); }
.se-crumbs a { display: inline-flex; align-items: center; min-height: 44px; color: rgba(255, 255, 255, .7); text-decoration: none; }
.se-crumbs a:hover { color: var(--white); text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.se-crumbs [aria-current] { color: var(--white); font-weight: 700; }

.se-hero__grid { display: grid; gap: 36px; align-items: center; }
.se-hero__copy { min-width: 0; }
.se-hero__kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 18px;
  font: 500 .74rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .7);
}
.se-hero__kicker span {
  padding: 5px 10px; color: var(--black); font-weight: 600; letter-spacing: .14em;
  background: var(--se-brass); border-radius: 2px;
}
.se-hero__title { margin-bottom: 22px; max-width: 13ch; color: var(--white); font-size: clamp(2.3rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -.04em; }
.se-hero__lead { max-width: 54ch; margin-bottom: 30px; font-size: var(--fs-lead); color: rgba(255, 255, 255, .84); }
.se-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; }
.se-hero__jump {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
  color: var(--white); font: 500 .95rem var(--font-head); text-decoration: none;
  border-bottom: 1px solid var(--accent);
}
.se-hero__jump:hover .icon { transform: translateY(3px); }
.se-hero__jump .icon { color: var(--accent); transition: transform .3s var(--ease); }

.se-hero__media { min-width: 0; }
.se-frame--hero { box-shadow: 0 0 0 1px rgba(196, 168, 116, .55), var(--shadow); }
.se-hero__caption { display: flex; gap: 12px; align-items: baseline; margin-top: 14px; font-size: .85rem; color: rgba(255, 255, 255, .62); }
.se-hero__caption span { flex-shrink: 0; font: 600 .72rem var(--font-head); letter-spacing: .16em; color: var(--accent); }

/* unit nameplates (jump links) */
.se-plates { display: grid; gap: 12px; margin-top: clamp(36px, 5vw, 56px); }
.se-plate {
  position: relative; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 16px;
  min-height: 72px; padding: 16px 26px; color: var(--black); text-decoration: none;
  background: var(--se-rivets), var(--se-brass); border-radius: 3px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 14px 30px -18px rgba(0, 0, 0, .9);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.se-plate:hover { transform: translateY(-3px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -2px 0 rgba(0, 0, 0, .18), 0 20px 34px -18px rgba(0, 0, 0, .95); }
.se-plate__code { grid-row: span 2; padding-right: 16px; font: 600 .78rem var(--font-head); letter-spacing: .16em; border-right: 1px solid rgba(0, 0, 0, .25); }
.se-plate__task { font: 600 .7rem var(--font-head); letter-spacing: .24em; text-transform: uppercase; color: rgba(0, 0, 0, .62); }
.se-plate__name { font: 600 1rem/1.3 var(--font-head); letter-spacing: -.01em; }


/* 04 OVERVIEW AND SHADOW BOARD ============================================== */
.se-intro { background: var(--white); }
.se-intro__grid { display: grid; gap: 48px; align-items: start; }
.se-intro__text .section-title { margin-bottom: 26px; }
.se-intro__statement { font-size: var(--fs-lead); line-height: 1.6; color: var(--ink); }
.se-intro__text a, .se-pair__card a, .se-area a { color: var(--black); font-weight: 700; text-decoration-color: var(--accent); text-underline-offset: 3px; }
.se-intro__text a:hover, .se-pair__card a:hover { text-decoration-thickness: 2px; }

.se-board {
  position: relative; padding: 30px 26px 26px;
  background: var(--se-peg), var(--se-stone); border: 1px solid var(--se-line); border-radius: var(--radius-lg);
}
.se-board__label { margin: 0 0 6px; font: 600 .7rem var(--font-head); letter-spacing: .24em; text-transform: uppercase; color: var(--se-brass-text); }
.se-board__title { margin-bottom: 22px; font-size: 1.3rem; }
.se-board__list { display: grid; gap: 14px; }
.se-tag {
  display: grid; grid-template-columns: 58px 1fr; align-items: center; column-gap: 18px;
  padding: 16px 18px; background: rgba(255, 255, 255, .78); border: 1px dashed var(--se-line-strong); border-radius: 10px;
}
.se-tag__shape { grid-row: span 2; position: relative; width: 58px; height: 58px; border: 2px dashed var(--black); opacity: .75; }
.se-tag--lift .se-tag__shape { border-radius: 4px; border-width: 0 0 2px 2px; }
.se-tag--lift .se-tag__shape::after { content: ""; position: absolute; left: 4px; bottom: 6px; width: 64px; height: 2px; background: repeating-linear-gradient(90deg, var(--black) 0 6px, transparent 6px 10px); transform: rotate(-45deg); transform-origin: left center; }
.se-tag--patch .se-tag__shape { border-radius: 50%; }
.se-tag--patch .se-tag__shape::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--black); opacity: .55; }
.se-tag--pour .se-tag__shape { width: 46px; height: 46px; margin: 6px; border-radius: 0 50% 50% 50%; transform: rotate(45deg); }
.se-tag__task { font: 600 1.05rem var(--font-head); color: var(--black); letter-spacing: -.01em; }
.se-tag__unit { font-size: .92rem; line-height: 1.45; color: var(--gray-700); }


/* 05 THE UNITS =============================================================== */
.se-units { background: var(--se-peg), var(--se-stone); }
.se-units__head { max-width: 760px; margin-bottom: clamp(40px, 5vw, 64px); }
.se-units__head .section-title { margin-bottom: 22px; }
.se-unit {
  position: relative; display: grid; gap: 0; margin-bottom: clamp(32px, 4vw, 48px);
  background: var(--white); border: 1px solid var(--se-line); border-radius: var(--radius-lg); overflow: clip;
  box-shadow: 0 30px 60px -44px rgba(30, 25, 16, .6);
}
.se-unit:last-child { margin-bottom: 0; }
.se-unit__plate {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; padding: 14px 28px;
  font: 600 .74rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--black);
  background: var(--se-rivets), var(--se-brass);
}
.se-unit__media { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-content: start; padding: 20px 20px 0; }
.se-unit__media > .se-frame:first-child { grid-column: span 2; }
.se-unit__caption { align-self: center; font-size: .86rem; line-height: 1.45; color: var(--gray-500); }
.se-unit__body { padding: 26px 22px 30px; }
.se-unit__index { margin: 0 0 8px; font: 500 .74rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--se-brass-text); }
.se-unit__name { margin-bottom: 14px; font-size: clamp(1.5rem, 2.4vw, 2rem); letter-spacing: -.03em; }
.se-unit__desc { color: var(--gray-700); }

.se-data { /* stamped steel data plate */
  display: grid; margin: 24px 0 16px; padding: 22px 24px; border-radius: 6px;
  color: rgba(255, 255, 255, .86); background: var(--se-rivets), var(--se-tread), linear-gradient(160deg, var(--se-steel-2), var(--se-black));
  box-shadow: inset 0 0 0 1px rgba(196, 168, 116, .35);
}
.se-data div { display: grid; grid-template-columns: minmax(110px, 38%) 1fr; gap: 14px; padding: 9px 0; border-bottom: 1px dashed rgba(255, 255, 255, .14); }
.se-data div:last-child { border-bottom: 0; }
.se-data dt { font: 500 .7rem/1.7 var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.se-data dd { font: 500 .95rem/1.45 var(--font-head); color: var(--white); }
.se-unit__note { padding-left: 14px; font-size: .92rem; line-height: 1.55; color: var(--gray-500); border-left: 2px solid var(--accent); }
.se-unit__operator { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; font-size: .95rem; line-height: 1.5; background: var(--se-stone); border-radius: 8px; }
.se-unit__operator .icon { margin-top: 3px; font-size: 1.1rem; color: var(--se-brass-text); }
.se-unit__operator strong { color: var(--black); }
.se-unit__cta { margin-top: 6px; }


/* 06 MATCH THE JOB =========================================================== */
.se-match { color: rgba(255, 255, 255, .78); background: var(--se-tread), var(--se-black); }
.se-table-wrap { border-radius: var(--radius-lg); }
.se-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.se-table caption { padding: 0 0 16px; text-align: left; font: 500 .74rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.se-table thead { display: none; }
.se-table tr { display: block; margin-bottom: 14px; padding: 18px 20px; background: rgba(255, 255, 255, .04); border: 1px solid var(--se-line-dark); border-radius: 10px; }
.se-table tbody th { display: block; margin-bottom: 10px; padding-bottom: 10px; text-align: left; font: 600 1.08rem var(--font-head); color: var(--white); border-bottom: 1px solid rgba(196, 168, 116, .4); }
.se-table td { display: grid; grid-template-columns: 9.5em 1fr; gap: 12px; padding: 6px 0; color: rgba(255, 255, 255, .86); }
.se-table td::before { content: attr(data-label); font: 500 .7rem/1.9 var(--font-head); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.se-match__note { max-width: 70ch; margin: 26px 0 0; color: rgba(255, 255, 255, .72); }


/* 07 APPLICATIONS ============================================================ */
.se-apps { background: var(--white); }
.se-apps__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.se-apps__head .section-title { margin-bottom: 22px; }
.se-apps__grid { display: grid; gap: 22px; }
.se-app { /* punched tool tag */
  position: relative; padding: 46px 26px 26px; background: var(--se-stone); border: 1px solid var(--se-line); border-radius: 6px 6px 14px 14px;
}
.se-app::before { /* punched hole */
  content: ""; position: absolute; left: 50%; top: 14px; width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 3px #b8975c;
}
.se-app__code { position: absolute; right: 18px; top: 14px; margin: 0; font: 600 .7rem var(--font-head); letter-spacing: .16em; color: var(--se-brass-text); }
.se-app h3 { margin-bottom: 14px; }
.se-app li { position: relative; padding: 8px 0 8px 22px; line-height: 1.5; border-top: 1px dashed var(--se-line); }
.se-app li::before { content: ""; position: absolute; left: 2px; top: 16px; width: 8px; height: 8px; border-radius: 50%; background: #b8975c; }
.se-apps__photo { margin-top: clamp(36px, 5vw, 56px); }
.se-apps__photo figcaption { display: flex; gap: 14px; align-items: baseline; margin-top: 14px; font-size: .92rem; color: var(--gray-500); }
.se-apps__photo figcaption span { flex-shrink: 0; font: 600 .7rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--se-brass-text); }


/* 08 WHO RENTS =============================================================== */
.se-who { background: var(--se-peg), var(--se-stone); }
.se-who__grid { display: grid; gap: 40px; }
.se-who__intro .section-title { margin-bottom: 22px; }
.se-who__list { display: grid; gap: 14px; }
.se-who__list li { padding: 22px 22px 18px; background: var(--white); border-top: 3px solid #b8975c; border-radius: 0 0 10px 10px; }
.se-who__list h3 { margin-bottom: 8px; font-size: 1.08rem; }
.se-who__list p { margin: 0; font-size: .97rem; line-height: 1.55; }


/* 09 PAIRINGS ================================================================ */
.se-pair { color: rgba(255, 255, 255, .76); background: var(--se-tread), linear-gradient(180deg, var(--se-steel), var(--se-black)); }
.se-pair__head { max-width: 760px; margin-bottom: clamp(36px, 5vw, 56px); }
.se-pair__head .section-title { margin-bottom: 22px; color: var(--white); }
.se-pair__grid { display: grid; gap: 18px; }
.se-pair__card { padding: 28px 24px; background: rgba(255, 255, 255, .04); border: 1px solid var(--se-line-dark); border-radius: 12px; }
.se-pair__label { margin: 0 0 10px; font: 600 .7rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.se-pair__card h3 { color: var(--white); }
.se-pair__card p:last-child { margin: 0; }
.se-pair__card a { color: var(--white); }


/* 10 WHY CREATIO ============================================================= */
.se-why { background: var(--white); }
.se-why__grid { display: grid; gap: 40px; }
.se-why__intro .section-title { margin-bottom: 22px; }
.se-why__list { position: relative; display: grid; }
.se-why__list li { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 18px; padding: 20px 0; border-bottom: 1px solid var(--se-line); }
.se-why__list li:first-child { border-top: 1px solid var(--se-line); }
.se-why__rivet {
  width: 22px; height: 22px; margin-top: 3px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f3e3bb 0 3px, #c4a874 6px, #8d6f3c 11px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .3), 0 0 0 4px var(--se-stone);
}
.se-why__list h3 { margin-bottom: 6px; font-size: 1.1rem; }
.se-why__list p { margin: 0; }


/* 11 OPERATOR OPTION ========================================================= */
.se-operator { background: var(--se-stone); }
.se-operator__head { max-width: 760px; margin-bottom: 36px; }
.se-operator__head .section-title { margin-bottom: 22px; }
.se-operator__lead { font-size: var(--fs-lead); color: var(--ink); }
.se-choice { display: grid; gap: 16px; }
.se-choice__item { position: relative; padding: 30px 26px 26px; background: var(--white); border: 1px solid var(--se-line-strong); border-radius: 8px; }
.se-choice__item--ours { color: rgba(255, 255, 255, .82); background: var(--se-rivets), var(--se-tread), var(--se-steel); border-color: rgba(196, 168, 116, .55); }
.se-choice__item--ours h3 { color: var(--white); }
.se-choice__label { display: inline-block; margin: 0 0 14px; padding: 4px 10px; font: 600 .7rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--black); background: var(--se-brass); border-radius: 2px; }
.se-choice__item p:last-child { margin: 0; }
.se-operator__note { display: flex; gap: 12px; align-items: flex-start; margin: 26px 0 0; color: var(--gray-700); }
.se-operator__note .icon { margin-top: 5px; color: var(--se-brass-text); }


/* 12 SERVICE AREA ============================================================ */
.se-area { color: rgba(255, 255, 255, .76); background: var(--se-tread), var(--se-black); }
.se-area__grid { display: grid; gap: 40px; align-items: start; }
.se-area__text .section-title { margin-bottom: 22px; color: var(--white); }
.se-area__list { display: grid; grid-template-columns: 1fr; gap: 10px; }
.se-area__list li {
  display: grid; gap: 2px; padding: 14px 18px; font: 600 1.05rem var(--font-head); color: var(--white);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--se-line-dark); border-radius: 8px;
}
.se-area__list span { font: 500 .68rem var(--font-head); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.se-area__base { color: var(--black) !important; background: var(--se-rivets), var(--se-brass) !important; border-color: transparent !important; }
.se-area__base span { color: rgba(0, 0, 0, .65); }
.se-area__ask { border-style: dashed !important; font-weight: 500 !important; }


/* 13 REQUEST A QUOTE ========================================================= */
.se-quote { background: var(--se-peg), var(--se-stone); }
.se-quote__grid { display: grid; gap: 36px; align-items: start; }
.se-quote__main .section-title { margin-bottom: 18px; }
.se-quote__intro { font-size: var(--fs-lead); color: var(--ink); }
.se-checks { display: grid; gap: 14px; margin: 28px 0 22px; }
.se-checks__group { padding: 22px 22px 16px; background: var(--white); border: 1px solid var(--se-line); border-radius: 10px; }
.se-checks__title { margin-bottom: 10px; font-size: 1rem; letter-spacing: 0; }
.se-checks__group li { padding: 7px 0; line-height: 1.5; border-top: 1px dashed var(--se-line); }
.se-checks__group li:first-child { border-top: 0; }
.se-checks__group strong { display: block; color: var(--black); font-family: var(--font-head); font-weight: 600; font-size: .92rem; }
.se-quote__extra { font-size: .95rem; color: var(--gray-500); }
.se-quote__box {
  display: grid; gap: 14px; padding: 30px 26px; color: rgba(255, 255, 255, .78);
  background: var(--se-rivets), var(--se-tread), var(--se-black); border-radius: var(--radius-lg);
  box-shadow: inset 0 0 0 1px rgba(196, 168, 116, .4), var(--shadow);
}
.se-quote__kicker { margin: 0; font: 600 .7rem var(--font-head); letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.se-quote__box h3 { margin: 0 0 6px; color: var(--white); font-size: 1.5rem; }
.se-quote__box .btn { width: 100%; justify-content: center; }
.se-quote__lines { display: grid; gap: 4px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--se-line-dark); }
.se-quote__lines a { display: flex; align-items: center; gap: 12px; min-height: 44px; color: var(--white); text-decoration: none; overflow-wrap: anywhere; }
.se-quote__lines a .icon { color: var(--accent); }
.se-quote__lines a:hover { text-decoration: underline; text-decoration-color: var(--accent); text-underline-offset: 4px; }
.se-related { margin-top: clamp(40px, 5vw, 64px); padding-top: 28px; border-top: 1px solid var(--se-line-strong); }
.se-related__title { margin-bottom: 16px; font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--se-brass-text); }
.se-related ul { display: flex; flex-wrap: wrap; gap: 10px; }
.se-related a {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px;
  color: var(--black); font: 500 .92rem var(--font-head); text-decoration: none;
  background: var(--white); border: 1px solid var(--se-line-strong); border-radius: 999px; transition: border-color .2s, background-color .2s;
}
.se-related a .icon { color: var(--se-brass-text); }
.se-related a:hover { border-color: var(--black); }


/* 14 FAQ AND FOOTER ========================================================== */
.se-faq { border-top: 1px solid var(--se-line); }
.se-faq .faq__list { counter-reset: se-q; }
.se-faq .faq__item summary { padding-left: 58px; min-height: 44px; }
.se-faq .faq__item summary::before { /* question number stamped on a small brass plate */
  counter-increment: se-q; content: counter(se-q, decimal-leading-zero);
  position: absolute; left: 0; top: 22px; width: 40px; padding: 4px 0; text-align: center;
  font: 600 .72rem var(--font-head); letter-spacing: .08em; color: var(--black);
  background: var(--se-brass); border-radius: 2px;
}
.se-faq .faq__answer { padding-left: 58px; }
.se-faq .faq__contact { background: var(--se-stone); }
.se-faq .faq__contact a { min-height: 44px; }
.se-faq .faq__contact a .icon { color: var(--se-brass-text); }

.page-special-equipment .footer__claim span { color: var(--accent); -webkit-text-stroke: 0; }
.se-explore { padding-top: 44px; padding-bottom: 8px; }
.se-explore__title { margin-bottom: 20px; }
.se-explore__list { display: grid; gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; }
.se-explore__list a { display: grid; align-content: start; gap: 4px; min-height: 44px; height: 100%; padding: 16px 18px; background: var(--black); }
.se-explore__list strong { color: var(--white); font: 600 .98rem var(--font-head); }
.se-explore__list span { font-size: .88rem; line-height: 1.45; color: rgba(255, 255, 255, .6); }
.se-explore__list a:hover { background: #151619; }
.se-explore__list a:hover strong { color: var(--accent); }
.se-explore__list a[aria-current="page"] { background: linear-gradient(135deg, rgba(196, 168, 116, .2), rgba(196, 168, 116, .06)); box-shadow: inset 3px 0 0 var(--accent); }
.se-explore__list a[aria-current="page"] strong { color: var(--accent); }


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


/* 16 RESPONSIVE ============================================================== */
@media (max-width: 379px) {
  .se-plate { padding: 14px 18px; gap: 2px 12px; }
  .se-plate__code { padding-right: 12px; }
  .se-unit__plate { padding: 12px 20px; }
  .se-data { padding: 18px 16px; }
  .se-data div { grid-template-columns: 1fr; gap: 2px; }
  .se-table td { grid-template-columns: 1fr; gap: 0; }
  .se-faq .faq__item summary { padding-left: 50px; }
  .se-faq .faq__answer { padding-left: 0; }
}

@media (min-width: 560px) {
  .se-who__list { grid-template-columns: repeat(2, 1fr); }
  .se-area__list { grid-template-columns: repeat(2, 1fr); }
  .se-area__base, .se-area__ask { grid-column: span 2; }
  .se-explore__list { grid-template-columns: repeat(2, 1fr); }
  .se-checks { grid-template-columns: repeat(3, 1fr); }
  .se-checks__group--all { grid-column: span 3; }
}

@media (min-width: 768px) {
  .se-plates { grid-template-columns: repeat(3, 1fr); }
  .se-plate { grid-template-columns: 1fr; gap: 4px; padding: 20px 24px 22px; }
  .se-plate__code { grid-row: auto; padding: 0 0 8px; border-right: 0; border-bottom: 1px solid rgba(0, 0, 0, .25); }
  .se-board { padding: 34px 32px 30px; }
  .se-unit__media { padding: 26px 26px 0; }
  .se-unit__body { padding: 30px 32px 34px; }
  .se-data div { grid-template-columns: 34% 1fr; }
  .se-table-wrap { overflow: hidden; border: 1px solid var(--se-line-dark); }
  .se-table caption { padding: 18px 22px; }
  .se-table thead { display: table-header-group; }
  .se-table tr { display: table-row; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; }
  .se-table th, .se-table td { display: table-cell; padding: 18px 22px; text-align: left; vertical-align: top; border-top: 1px solid var(--se-line-dark); }
  .se-table thead th { font: 600 .72rem var(--font-head); letter-spacing: .16em; text-transform: uppercase; color: var(--black); background: var(--se-brass); border-top: 0; }
  .se-table tbody th { margin: 0; font-size: 1rem; border-bottom: 0; }
  .se-table td::before { content: none; }
  .se-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, .03); }
  .se-apps__grid { grid-template-columns: repeat(3, 1fr); }
  .se-pair__grid { grid-template-columns: repeat(3, 1fr); }
  .se-choice { grid-template-columns: 1fr 1fr; gap: 22px; }
  .se-explore__list { grid-template-columns: repeat(4, 1fr); }
  .page-special-equipment .footer__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .se-hero { padding-top: 30px; }
  .se-hero__grid { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: 56px; }
  .se-intro__grid { grid-template-columns: 1.15fr .85fr; gap: 80px; }
  .se-board { position: sticky; top: calc(var(--header-h) + 32px); }
  .se-unit { grid-template-columns: 1fr 1fr; }
  .se-unit__plate { grid-column: span 2; }
  .se-unit__media { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; padding: 32px 0 32px 32px; }
  .se-unit__body { padding: 34px 40px 38px; }
  .se-unit--flip .se-unit__media { order: 2; padding: 32px 32px 32px 0; }
  .se-unit--flip .se-unit__body { order: 1; }
  .se-apps__photo { display: grid; grid-template-columns: 1.4fr .6fr; gap: 36px; align-items: end; }
  .se-apps__photo figcaption { display: grid; gap: 10px; margin: 0; padding-bottom: 8px; font-size: 1rem; }
  .se-who__grid { grid-template-columns: .8fr 1.6fr; gap: 72px; align-items: start; }
  .se-who__intro { position: sticky; top: calc(var(--header-h) + 40px); }
  .se-who__list { grid-template-columns: repeat(3, 1fr); }
  .se-why__grid { grid-template-columns: .9fr 1.3fr; gap: 80px; align-items: start; }
  .se-why__intro { position: sticky; top: calc(var(--header-h) + 40px); }
  .se-area__grid { grid-template-columns: 1fr 1.1fr; gap: 80px; }
  .se-quote__grid { grid-template-columns: 1.5fr .75fr; gap: 56px; }
  .se-quote__box { position: sticky; top: calc(var(--header-h) + 32px); }
  .page-special-equipment .footer__grid { grid-template-columns: 1.5fr 1.4fr 1fr 1fr; }
}

@media (min-width: 1440px) {
  .se-hero__title { font-size: 4.6rem; }
  .se-unit__media { padding: 40px 0 40px 40px; }
  .se-unit--flip .se-unit__media { padding: 40px 40px 40px 0; }
  .se-unit__body { padding: 40px 52px 44px; }
}