/* ────────────────────────────────────────────────────────────────────
   SERVICE-DETAIL.CSS — Altida transport service pages  (sd-* system)

   Built for /general-haulage/, reusable across /abnormal-loads/,
   /hiab-transport/, /plant-movement/. A full editorial service-page
   system, modelled on the agreed quality bar (the C&R service page) and
   reskinned to Altida tokens: black/yellow, Lovelo (display, ≥32px only)
   / Inter caps (structural) / Aller (body), --ease-mech motion.

   Loads AFTER tokens.css + components.css + homepage.css + projects.css +
   project-detail.css. Reuses the chrome + .prj-hero/.pd-hero hero shell +
   .pd-related/.prj-card recent-work + .prj-cta closing band from those.

   Motion keys off the .is-revealed flag homepage.js adds to
   [data-section-reveal]; the FAQ smooth-open is the only bespoke JS
   (service-detail.js) and degrades to a native <details> accordion.
   ──────────────────────────────────────────────────────────────────── */


/* ══ SHARED PRIMITIVES ════════════════════════════════════════════════ */

.sd-dot { color: var(--altida-yellow); font-style: normal; }

.sd-eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--altida-black); margin: 0;
}
.sd-eyebrow__rule { flex: 0 0 auto; width: clamp(28px, 3vw, 40px); height: 1px; background: var(--altida-yellow); }
.sd-eyebrow--light { color: var(--altida-white); }

/* The repeating section-header molecule: eyebrow → title → sub */
.sd-head { max-width: 760px; margin: 0 0 clamp(40px, 5vw, 64px); }
.sd-head__title {
  font-family: var(--font-display); font-size: clamp(34px, 4.2vw, 56px);
  line-height: 1.04; letter-spacing: -0.015em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--altida-black); text-wrap: balance;
}
.sd-head__sub {
  font-family: var(--font-body); font-size: clamp(15.5px, 1.2vw, 18px);
  line-height: 1.6; color: rgba(10, 10, 10, 0.68); margin: 18px 0 0; max-width: 64ch;
}

/* Two-layer card shadow — hairline contact + soft far-throw (the premium
   elevated-but-not-heavy recipe, reskinned from navy to Altida black). */
.sd-shadow { box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 18px 40px -24px rgba(10, 10, 10, 0.22); }


/* ══ 1 · HERO additions (on .prj-hero / .pd-hero) ═════════════════════ */

.sd-crumb {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7); margin: 0 0 clamp(16px, 2vw, 22px);
}
.sd-crumb a { color: var(--altida-yellow); text-decoration: none; }
.sd-crumb a:hover { text-decoration: underline; text-underline-offset: 3px; }
.sd-crumb span { color: rgba(255, 255, 255, 0.4); }

.sd-hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(28px, 3.2vw, 40px);
}
.sd-hero__call { display: inline-flex; flex-direction: column; gap: 2px; text-decoration: none; }
.sd-hero__call-key {
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55);
}
.sd-hero__call-val {
  font-family: var(--font-body); font-weight: 700; font-size: clamp(18px, 1.4vw, 21px);
  color: var(--altida-white); font-feature-settings: 'tnum' 1;
  background-image: linear-gradient(var(--altida-yellow), var(--altida-yellow));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px;
  padding-bottom: 2px; transition: background-size var(--dur-base) var(--ease-mech);
}
.sd-hero__call:hover .sd-hero__call-val { background-size: 100% 2px; }
.sd-hero__call:focus-visible { outline: 2px solid var(--altida-yellow); outline-offset: 3px; }


/* ══ 2 · STORY (sticky-aside intro · bone) ════════════════════════════ */

.sd-story { background: var(--altida-bone); color: var(--altida-black); padding: clamp(72px, 9vw, 128px) 0; }
.sd-story__inner {
  max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 4vw, 48px);
}
@media (min-width: 920px) {
  .sd-story__inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(48px, 6vw, 96px); }
  .sd-story__aside { position: sticky; top: 110px; }
}
.sd-story__aside { align-self: start; }
.sd-story__h {
  font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.05; letter-spacing: -0.015em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--altida-black);
}
.sd-story__lede {
  font-family: var(--font-body); font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.5; color: var(--altida-black); margin: 0 0 22px; max-width: 62ch;
}
.sd-story__p {
  font-family: var(--font-body); font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.7; color: rgba(10, 10, 10, 0.7); margin: 0 0 18px; max-width: 62ch;
}
.sd-story__p:last-child { margin-bottom: 0; }


/* ══ 3 · WHAT WE MOVE (expertise 2-col + capability list · white) ═════ */

.sd-cap { background: var(--altida-white); color: var(--altida-black); padding: clamp(80px, 10vw, 136px) 0; }
.sd-cap__inner {
  max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 64px); align-items: start;
}
@media (min-width: 920px) {
  .sd-cap__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
}
.sd-cap__title {
  font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--altida-black);
}
.sd-cap__lede {
  font-family: var(--font-body); font-size: clamp(17px, 1.4vw, 21px);
  line-height: 1.55; color: rgba(10, 10, 10, 0.78); margin: 22px 0 0; max-width: 48ch;
}
.sd-cap__list { list-style: none; margin: 0; padding: 0; }
.sd-cap__item { padding: clamp(18px, 2vw, 24px) 0; border-top: 1px solid var(--grey-200); }
.sd-cap__item:first-child { border-top: 0; padding-top: 0; }
.sd-cap__item-h {
  display: block; position: relative; padding-left: 24px;
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(14.5px, 1.1vw, 16.5px);
  letter-spacing: 0.02em; color: var(--altida-black); margin-bottom: 7px;
}
.sd-cap__item-h::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 12px; height: 12px;
  background: var(--altida-yellow); clip-path: polygon(0 0, 68% 0, 100% 100%, 32% 100%);
}
.sd-cap__item-b {
  display: block; padding-left: 24px;
  font-family: var(--font-body); font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.55; color: rgba(10, 10, 10, 0.66);
}


/* ══ 4 · FLEET (premium vehicle cards · bone) ═════════════════════════ */

.sd-fleet { background: var(--altida-bone); color: var(--altida-black); padding: clamp(72px, 9vw, 128px) 0; }
.sd-fleet__inner { max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.sd-fleet__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 2vw, 28px); }
@media (min-width: 680px)  { .sd-fleet__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .sd-fleet__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sd-fleet__card {
  position: relative; display: flex; flex-direction: column;
  background: var(--altida-white); border-radius: 6px; padding: clamp(26px, 2.4vw, 34px);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 18px 40px -24px rgba(10, 10, 10, 0.22);
  transition: transform var(--dur-base) var(--ease-mech), box-shadow var(--dur-base) var(--ease-mech);
}
.sd-fleet__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 28px 56px -28px rgba(10, 10, 10, 0.32);
}
.sd-fleet__badge {
  align-self: flex-start;
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--altida-black);
  background: color-mix(in srgb, var(--altida-yellow) 32%, #fff);
  border-radius: 999px; padding: 6px 12px; margin-bottom: 18px;
}
.sd-fleet__name {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(15px, 1.15vw, 17.5px);
  letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.2;
  margin: 0 0 14px; color: var(--altida-black);
}
.sd-fleet__body {
  font-family: var(--font-body); font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.6; color: rgba(10, 10, 10, 0.7); margin: 0 0 18px;
}
.sd-fleet__best {
  margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--grey-200);
  font-family: var(--font-body); font-size: clamp(13px, 0.95vw, 14.5px);
  line-height: 1.5; color: rgba(10, 10, 10, 0.6);
}
.sd-fleet__best strong {
  display: block; margin-bottom: 4px;
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--altida-black);
}


/* ══ 5 · LIMITS (general vs abnormal reference table · white) ═════════ */

.sd-limits { background: var(--altida-white); color: var(--altida-black); padding: clamp(72px, 9vw, 128px) 0; }
.sd-limits__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter, 24px); }
.sd-table__wrap { overflow-x: auto; }
.sd-table {
  width: 100%; border-collapse: collapse; font-family: var(--font-body);
  background: var(--altida-white); border-radius: 6px; overflow: hidden;
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 18px 40px -24px rgba(10, 10, 10, 0.22);
}
.sd-table thead th {
  background: var(--altida-black); color: var(--altida-white);
  font-family: var(--font-sans); font-weight: 700; font-size: clamp(13px, 1vw, 15px);
  letter-spacing: 0.02em; text-align: left; vertical-align: top;
  padding: clamp(16px, 1.6vw, 22px) clamp(16px, 1.6vw, 24px);
}
.sd-table thead th:first-child { width: 1%; }
.sd-table thead th span {
  display: block; margin-top: 5px;
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--altida-yellow);
}
.sd-table tbody th {
  text-align: left; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700; font-size: clamp(12.5px, 1vw, 14px);
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--altida-black);
  padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 24px);
}
.sd-table tbody td {
  font-family: var(--font-body); font-size: clamp(14px, 1.1vw, 16px);
  color: rgba(10, 10, 10, 0.8); padding: clamp(14px, 1.4vw, 20px) clamp(16px, 1.6vw, 24px);
  border-top: 1px solid var(--grey-200);
}
.sd-table tbody th { border-top: 1px solid var(--grey-200); }
.sd-table tbody tr:nth-child(even) th,
.sd-table tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--altida-bone) 50%, #fff); }
.sd-table tbody td:last-child { border-left: 1px solid var(--grey-200); }
@media (max-width: 720px) {
  .sd-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sd-table, .sd-table tbody, .sd-table tr, .sd-table th, .sd-table td { display: block; width: 100%; }
  .sd-table tr { border-bottom: 2px solid var(--altida-black); padding: 10px 0; }
  .sd-table tr:last-child { border-bottom: 0; }
  .sd-table tbody th { white-space: normal; border-top: 0; padding: 4px 16px; }
  .sd-table tbody td { border: 0 !important; padding: 3px 16px; display: flex; gap: 10px; background: none !important; }
  .sd-table tbody td::before {
    content: attr(data-label); flex: 0 0 42%;
    font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
    letter-spacing: 0.06em; text-transform: uppercase; color: rgba(10, 10, 10, 0.45);
  }
}
.sd-limits__foot {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 16px 32px; margin-top: clamp(20px, 2vw, 28px);
}
.sd-limits__note {
  font-family: var(--font-body); font-size: clamp(13px, 1vw, 14.5px);
  line-height: 1.55; color: rgba(10, 10, 10, 0.55); margin: 0; max-width: 62ch;
}
.sd-limits__link {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--altida-black);
  text-decoration: none; border-bottom: 2px solid var(--altida-yellow); padding-bottom: 3px;
}
.sd-limits__link .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.sd-limits__link:hover .arrow { transform: translateX(4px); }


/* ══ 6 · CHECK (planning checklist · bone) ════════════════════════════ */

.sd-check { background: var(--altida-bone); color: var(--altida-black); padding: clamp(72px, 9vw, 128px) 0; }
.sd-check__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter, 24px); }
.sd-check__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(12px, 1.4vw, 16px); }
@media (min-width: 760px) { .sd-check__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 36px); } }
.sd-check__item {
  display: flex; gap: 16px; align-items: flex-start;
  background: var(--altida-white); border-radius: 6px; padding: clamp(18px, 1.8vw, 24px);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 12px 28px -20px rgba(10, 10, 10, 0.18);
}
.sd-check__box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid var(--altida-yellow); border-radius: 3px; margin-top: 1px; }
.sd-check__text { margin: 0; font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.5; color: var(--altida-black); }
.sd-check__foot { margin: clamp(24px, 2.6vw, 36px) 0 0; font-family: var(--font-body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(10, 10, 10, 0.7); max-width: 72ch; }


/* ══ 7 · WHY ALTIDA (sticky-aside hairline list · white) ══════════════ */

.sd-why { background: var(--altida-white); color: var(--altida-black); padding: clamp(80px, 10vw, 136px) 0; }
.sd-why__inner {
  max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px);
}
@media (min-width: 920px) {
  /* Wider list column than the Story section's 0.85/1.15 so the two
     sticky-aside layouts don't read as the same section twice. */
  .sd-why__inner { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: clamp(48px, 6vw, 96px); }
  .sd-why__head { position: sticky; top: 110px; }
}
.sd-why__head { align-self: start; }
.sd-why__title {
  font-family: var(--font-display); font-size: clamp(32px, 3.4vw, 46px);
  line-height: 1.04; letter-spacing: -0.015em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--altida-black);
}
.sd-why__sub { font-family: var(--font-body); font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.6; color: rgba(10, 10, 10, 0.68); margin: 18px 0 0; max-width: 46ch; }
.sd-why__list { list-style: none; margin: 0; padding: 0; }
.sd-why__item { padding: clamp(24px, 2.8vw, 34px) 0; border-top: 1px solid var(--grey-200); }
.sd-why__item:first-child { border-top: 0; padding-top: 0; }
.sd-why__item-h {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.25;
  margin: 0 0 12px; color: var(--altida-black);
}
.sd-why__item-b { font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.6; color: rgba(10, 10, 10, 0.68); margin: 0; max-width: 64ch; }


/* ══ 9 · BENTO (photographic sectors · white) ═════════════════════════ */

.sd-bento { background: var(--altida-white); color: var(--altida-black); padding: clamp(72px, 9vw, 128px) 0; }
.sd-bento__inner { max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.sd-bento__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 1.4vw, 16px); }
@media (min-width: 900px) {
  .sd-bento__grid { grid-template-columns: repeat(12, 1fr); grid-auto-rows: clamp(210px, 22vw, 280px); }
}
.sd-bento__tile {
  position: relative; overflow: hidden; border-radius: 8px; isolation: isolate;
  min-height: 200px; display: block; text-decoration: none;
}
@media (min-width: 900px) {
  .sd-bento__tile { min-height: 0; grid-column: span 6; }
  .sd-bento__tile--feature { grid-column: span 6; grid-row: span 2; }
  .sd-bento__tile:nth-child(4),
  .sd-bento__tile:nth-child(5),
  .sd-bento__tile:nth-child(6) { grid-column: span 4; }
}
/* Non-interactive showcase — no hover-scale (it would imply a click the
   tiles don't deliver) and no permanent will-change. */
.sd-bento__tile img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.sd-bento__veil {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.88) 0%, rgba(0, 0, 0, 0.5) 38%, rgba(0, 0, 0, 0.14) 100%);
}
.sd-bento__meta { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(20px, 2.2vw, 32px); color: var(--altida-white); }
.sd-bento__name {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(15px, 1.4vw, 19px);
  letter-spacing: 0.04em; text-transform: uppercase; margin: 0 0 8px; color: var(--altida-white);
}
.sd-bento__tile--feature .sd-bento__name { font-size: clamp(18px, 1.8vw, 24px); }
.sd-bento__eg { font-family: var(--font-body); font-size: clamp(13px, 1vw, 15px); line-height: 1.5; color: rgba(255, 255, 255, 0.86); margin: 0; max-width: 46ch; }


/* ══ 10 · FAQ (dark anchor · sticky-aside · accordion) ════════════════ */

.sd-faq { background: var(--altida-black); color: var(--altida-white); padding: clamp(80px, 10vw, 136px) 0; }
.sd-faq__inner {
  max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter, 24px);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 5vw, 56px);
}
@media (min-width: 920px) {
  .sd-faq__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(48px, 6vw, 96px); }
  .sd-faq__aside { position: sticky; top: 120px; }
}
.sd-faq__aside { align-self: start; }
.sd-faq__title {
  font-family: var(--font-display); font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.04; letter-spacing: -0.015em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--altida-white);
}
.sd-faq__sub { font-family: var(--font-body); font-size: clamp(15px, 1.15vw, 17px); line-height: 1.6; color: rgba(255, 255, 255, 0.6); margin: 18px 0 0; max-width: 42ch; }
.sd-faq__list { margin: 0; }
.sd-faq__item { border-top: 1px solid rgba(255, 255, 255, 0.14); }
.sd-faq__item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
.sd-faq__item summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
  gap: 20px; padding: clamp(20px, 2.2vw, 28px) 0;
}
.sd-faq__item summary::-webkit-details-marker { display: none; }
.sd-faq__item summary:focus-visible { outline: 2px solid var(--altida-yellow); outline-offset: 4px; }
.sd-faq__q {
  font-family: var(--font-sans); font-weight: 600; font-size: clamp(15px, 1.3vw, 18px);
  letter-spacing: 0.01em; color: var(--altida-white);
  transition: color var(--dur-base) var(--ease-mech);
}
.sd-faq__item summary:hover .sd-faq__q { color: var(--altida-yellow); }
.sd-faq__toggle {
  flex: 0 0 auto; position: relative; width: 30px; height: 30px;
  border: 1.5px solid rgba(255, 255, 255, 0.4); border-radius: 50%;
  transition: background var(--dur-base) var(--ease-mech), border-color var(--dur-base) var(--ease-mech), transform var(--dur-base) var(--ease-mech);
}
.sd-faq__toggle::before, .sd-faq__toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%; background: var(--altida-white);
  transition: background var(--dur-base) var(--ease-mech);
}
.sd-faq__toggle::before { width: 11px; height: 1.5px; transform: translate(-50%, -50%); }
.sd-faq__toggle::after { width: 1.5px; height: 11px; transform: translate(-50%, -50%); }
.sd-faq__item[open] .sd-faq__toggle { transform: rotate(135deg); border-color: var(--altida-yellow); background: var(--altida-yellow); }
.sd-faq__item[open] .sd-faq__toggle::before,
.sd-faq__item[open] .sd-faq__toggle::after { background: var(--altida-black); }
.sd-faq__a-wrap { overflow: hidden; transition: height 340ms var(--ease-mech); }
.sd-faq__a {
  padding: 0 0 clamp(22px, 2.4vw, 30px); max-width: 64ch;
  font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.7; color: rgba(255, 255, 255, 0.72);
}
.sd-faq__a a { color: var(--altida-yellow); text-decoration: underline; text-underline-offset: 3px; }


/* ══ SCROLL REVEALS (key off .is-revealed from homepage.js) ═══════════ */

/* Hidden + revealed states are kept at EQUAL specificity (both a single
   leading selector + the target class) so the revealed rule — later in
   source order — always wins once homepage.js adds .is-revealed to the
   section. A <noscript> block in the page <head> forces everything visible
   when JS is off, so content is never left invisible. */
[data-section-reveal] .sd-head,
[data-section-reveal] .sd-story__inner > *,
[data-section-reveal] .sd-cap__copy,
[data-section-reveal] .sd-why__head,
[data-section-reveal] .sd-table__wrap,
[data-section-reveal] .sd-limits__foot,
[data-section-reveal] .sd-cap__item,
[data-section-reveal] .sd-fleet__card,
[data-section-reveal] .sd-check__item,
[data-section-reveal] .sd-why__item,
[data-section-reveal] .sd-bento__tile {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms var(--ease-mech), transform 560ms var(--ease-mech);
}
.is-revealed .sd-head,
.is-revealed .sd-story__inner > *,
.is-revealed .sd-cap__copy,
.is-revealed .sd-why__head,
.is-revealed .sd-table__wrap,
.is-revealed .sd-limits__foot,
.is-revealed .sd-cap__item,
.is-revealed .sd-fleet__card,
.is-revealed .sd-check__item,
.is-revealed .sd-why__item,
.is-revealed .sd-bento__tile { opacity: 1; transform: none; }

.is-revealed .sd-cap__item:nth-child(2),  .is-revealed .sd-fleet__card:nth-child(2),
.is-revealed .sd-check__item:nth-child(2), .is-revealed .sd-why__item:nth-child(2),
.is-revealed .sd-bento__tile:nth-child(2) { transition-delay: 80ms; }
.is-revealed .sd-cap__item:nth-child(3),  .is-revealed .sd-fleet__card:nth-child(3),
.is-revealed .sd-check__item:nth-child(3), .is-revealed .sd-why__item:nth-child(3),
.is-revealed .sd-bento__tile:nth-child(3) { transition-delay: 160ms; }
.is-revealed .sd-cap__item:nth-child(4),  .is-revealed .sd-fleet__card:nth-child(4),
.is-revealed .sd-check__item:nth-child(4), .is-revealed .sd-why__item:nth-child(4),
.is-revealed .sd-bento__tile:nth-child(4) { transition-delay: 240ms; }
.is-revealed .sd-cap__item:nth-child(5),  .is-revealed .sd-check__item:nth-child(5),
.is-revealed .sd-bento__tile:nth-child(5) { transition-delay: 320ms; }
.is-revealed .sd-cap__item:nth-child(6),  .is-revealed .sd-check__item:nth-child(6),
.is-revealed .sd-bento__tile:nth-child(6) { transition-delay: 400ms; }


/* ══ REDUCED MOTION ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .sd-hero__call-val,
  .sd-fleet__card,
  .sd-bento__tile img,
  .sd-limits__link .arrow,
  .sd-faq__toggle, .sd-faq__toggle::before, .sd-faq__toggle::after,
  .sd-faq__q,
  .sd-faq__a-wrap { transition: none !important; }

  [data-section-reveal] .sd-head,
  .sd-story__inner > *,
  .sd-cap__copy, .sd-cap__item,
  .sd-fleet__card,
  .sd-table__wrap, .sd-limits__foot,
  .sd-check__item,
  .sd-why__head, .sd-why__item,
  .sd-bento__tile { opacity: 1 !important; transform: none !important; transition: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   FRONTIER POLISH LAYER (2026-06-20)
   Shared, restrained craft lifted from the operator-approved About page
   (about.css FRONTIER POLISH LAYER): clip-path reveals, a self-drawing
   table rule, an interactive comparison table, hover-reveal sector tiles,
   and per-page hero-accent variants. ALL motion is transform / opacity /
   clip-path only, on --ease-mech, no library, no layout-trigger.

   Accessibility floor (WD-F8): the STATIC, finished, readable state is the
   DEFAULT. Motion is added ONLY inside
   @media (prefers-reduced-motion: no-preference). So reduced-motion users
   (and the <noscript> path) always land on the completed state. The
   section reveals still key off .is-revealed (added to the
   [data-section-reveal] section by homepage.js / the IntersectionObserver).
   ════════════════════════════════════════════════════════════════════ */


/* ── 1 · COMPARISON TABLE — premium interactive moment ───────────────────
   The sd-limits table becomes a considered element: the two compared
   columns are visually distinguished (the right "Altida-runs-it" column
   carries a faint yellow tint), rows draw/stagger in on scroll, and the
   header cells are real <button>s that highlight a chosen column (hover +
   keyboard). Table semantics are untouched — the buttons sit INSIDE the
   <th scope="col"> cells, so screen-reader column association is intact. */

/* Distinguish the second compared column with a faint tint + left hairline.
   (Column 1 = "you/standard", column 2 = "Altida/abnormal" — the tint
   pulls the eye to the differentiated column without adding a new colour.) */
.sd-table thead th:nth-child(3),
.sd-table tbody td:last-child {
  background: color-mix(in srgb, var(--altida-yellow) 7%, #fff);
}
.sd-table thead th:nth-child(3) {
  background: color-mix(in srgb, var(--altida-yellow) 16%, var(--altida-black));
}
/* keep the even-row zebra readable on the tinted column */
.sd-table tbody tr:nth-child(even) td:last-child {
  background: color-mix(in srgb, var(--altida-yellow) 11%, #fff);
}

/* The column-header sort/highlight control. A real <button> for keyboard +
   AT; visually it's just the header text it replaces. */
.sd-table__colbtn {
  display: block; width: 100%; margin: 0; padding: 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: inherit; color: inherit; letter-spacing: inherit;
}
.sd-table__colbtn span {
  display: block; margin-top: 5px;
  font-weight: 600; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--altida-yellow);
}
.sd-table__colbtn:focus-visible { outline: 2px solid var(--altida-yellow); outline-offset: 3px; }

/* Active-column highlight — a yellow underbar under the chosen header +
   a stronger tint down that column's body cells. Toggled by .is-col-active
   (JS) on hover/focus/click; degrades to the static tint with no JS. */
.sd-table thead th { position: relative; }
.sd-table thead th.is-col-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--altida-yellow);
}
.sd-table.is-c1-active tbody td:nth-of-type(1),
.sd-table.is-c2-active tbody td:nth-of-type(2) {
  background: color-mix(in srgb, var(--altida-yellow) 20%, #fff);
}
.sd-table.is-c1-active tbody tr:nth-child(even) td:nth-of-type(1),
.sd-table.is-c2-active tbody tr:nth-child(even) td:nth-of-type(2) {
  background: color-mix(in srgb, var(--altida-yellow) 24%, #fff);
}

/* A self-drawing yellow rule under the table head — the considered detail
   that reads as "this is a designed comparison, not a dumped grid". Drawn
   by default (reduced-motion safe). */
.sd-table thead tr { position: relative; }

@media (prefers-reduced-motion: no-preference) {
  /* Row stagger-in: each body row rises + fades as the section reveals.
     Hidden state scoped to the un-revealed section; revealed state wins by
     source order at equal specificity, same pattern as the base reveals. */
  [data-section-reveal] .sd-table tbody tr {
    opacity: 0; transform: translateY(12px);
    transition: opacity 520ms var(--ease-mech), transform 520ms var(--ease-mech);
  }
  .is-revealed .sd-table tbody tr { opacity: 1; transform: none; }
  .is-revealed .sd-table tbody tr:nth-child(1) { transition-delay: 120ms; }
  .is-revealed .sd-table tbody tr:nth-child(2) { transition-delay: 200ms; }
  .is-revealed .sd-table tbody tr:nth-child(3) { transition-delay: 280ms; }
  .is-revealed .sd-table tbody tr:nth-child(4) { transition-delay: 360ms; }
  .is-revealed .sd-table tbody tr:nth-child(5) { transition-delay: 440ms; }
  .is-revealed .sd-table tbody tr:nth-child(6) { transition-delay: 520ms; }

  .sd-table.is-c1-active tbody td:nth-of-type(1),
  .sd-table.is-c2-active tbody td:nth-of-type(2),
  .sd-table tbody td:last-child { transition: background 320ms var(--ease-mech); }
}


/* ── 2 · SECTOR (BENTO) TILES — tasteful hover-reveal ────────────────────
   Was explicitly non-interactive. Now the tiles are keyboard-focusable
   (tabindex on the tile), the image gently scales WITHIN the clipped frame,
   the dark veil lifts a touch, and the description rises into view. Subtle:
   the label is always visible; the example copy is what rises. Static state
   (everything visible, no transform) is the default. */
.sd-bento__tile { outline: none; }
.sd-bento__tile::after {
  content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border: 2px solid transparent;
  transition: border-color var(--dur-base) var(--ease-mech);
}
.sd-bento__tile:focus-visible::after { border-color: var(--altida-yellow); }
.sd-bento__corner {
  position: absolute; top: 0; right: 0; z-index: 3; width: 0; height: 0;
  border-style: solid; border-width: 0 28px 28px 0;
  border-color: transparent var(--altida-yellow) transparent transparent;
  opacity: 0; transform: translate(6px, -6px);
  transition: opacity var(--dur-base) var(--ease-mech), transform var(--dur-base) var(--ease-mech);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .sd-bento__tile img {
    transform: scale(1.001); transition: transform 0.7s var(--ease-mech);
    will-change: auto;
  }
  .sd-bento__tile:hover img,
  .sd-bento__tile:focus-visible img { transform: scale(1.06); }

  .sd-bento__veil { transition: opacity var(--dur-base) var(--ease-mech); }
  .sd-bento__tile:hover .sd-bento__veil,
  .sd-bento__tile:focus-visible .sd-bento__veil { opacity: 0.82; }

  .sd-bento__eg {
    transform: translateY(8px); opacity: 0.86;
    transition: transform var(--dur-base) var(--ease-mech), opacity var(--dur-base) var(--ease-mech);
  }
  .sd-bento__tile:hover .sd-bento__eg,
  .sd-bento__tile:focus-visible .sd-bento__eg { transform: none; opacity: 1; }

  .sd-bento__tile:hover .sd-bento__corner,
  .sd-bento__tile:focus-visible .sd-bento__corner { opacity: 1; transform: none; }
}


/* ── 3 · MOTION VARIETY — alternative reveal treatments ──────────────────
   So adjacent sections don't all reveal with the same translateY(16px).
   Three restrained variants, applied via the shared reveal hook:
     a) clip-path WIPE — for the dark "what we move" capability list head
        (sd-cap copy) so it reads in like a rule being drawn across,
     b) staggered LINE-RISE — for the sd-why hairline list headings, each
        item title rises from a masked baseline,
     c) self-drawing EDGE — the sd-story aside gets a yellow rule that draws
        down beside the heading as the section enters.
   All gated on no-preference; static state is the default. */
@media (prefers-reduced-motion: no-preference) {

  /* a) CLIP-PATH WIPE — the capability copy block (sd-cap__copy) reveals as
        a left-to-right wipe instead of a translateY fade. Replaces the base
        translateY for this element only. */
  [data-section-reveal] .sd-cap__copy {
    opacity: 1; transform: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 760ms var(--ease-mech);
  }
  .is-revealed .sd-cap__copy { clip-path: inset(0 0 0 0); }

  /* b) LINE-RISE — sd-why item headings rise from a clipped baseline as the
        section reveals. The whole heading is masked by its own overflow and
        translated up from below; the body text keeps the base translateY
        fade, so heading and body don't move identically. */
  .sd-why__item-h { overflow: hidden; }
  [data-section-reveal] .sd-why__item-h {
    transform: translateY(110%);
    transition: transform 620ms var(--ease-mech);
  }
  .is-revealed .sd-why__item-h { transform: none; }
  .is-revealed .sd-why__item:nth-child(2) .sd-why__item-h { transition-delay: 90ms; }
  .is-revealed .sd-why__item:nth-child(3) .sd-why__item-h { transition-delay: 180ms; }
  .is-revealed .sd-why__item:nth-child(4) .sd-why__item-h { transition-delay: 270ms; }
  .is-revealed .sd-why__item:nth-child(5) .sd-why__item-h { transition-delay: 360ms; }

  /* c) SELF-DRAWING EDGE on the story aside — a yellow rule draws down the
        left of the sticky heading as the section reveals. */
  .sd-story__aside { position: relative; }
  .sd-story__aside::before {
    content: ""; position: absolute; left: -14px; top: 4px; bottom: 4px; width: 2px;
    background: var(--altida-yellow);
    transform: scaleY(0); transform-origin: top;
    transition: transform 900ms var(--ease-mech) 120ms;
  }
  .is-revealed .sd-story__aside::before { transform: scaleY(1); }
}
@media (min-width: 920px) {
  /* the drawing edge only makes sense beside the sticky aside on 2-col */
  .sd-story__aside::before { display: block; }
}
@media (max-width: 919px) {
  .sd-story__aside::before { display: none; }
}


/* ── 4 · HERO — ONE variation-3 hero, identical on every page ────────────
   Every service page + the About page uses the SAME hero as General Haulage:
   same yellow bottom-left corner slash, same title size (pd-hero__title), and
   the same fixed section height — whatever the sub length or whether the page
   carries buttons. The earlier per-page sd-pg-* accent variants are gone: the
   hero must read identically across the whole variation, not as a different
   corner on each page. */
.sd-hero { position: relative; }
.sd-hero__accent {
  position: absolute; z-index: 2; pointer-events: none;
  width: clamp(64px, 8vw, 132px); height: clamp(64px, 8vw, 132px);
  background: var(--altida-yellow);
  bottom: 0; left: 0;
  clip-path: polygon(0 100%, 100% 100%, 0 0);   /* bottom-left slash — same on every v3 page */
}

/* Hero bottom motif matches the About hero: a clean full-width line, no
   right-side slash. (The sd-hero__accent corner slash is removed from the
   service-page markup too, so the motif reads identically to About.) */
.sd-hero .prj-hero__base { clip-path: none; height: calc(var(--line-h) + var(--bleed)); }

/* Fixed v3 hero height so every service page + About is the SAME height,
   regardless of sub length or buttons. Desktop only — on narrow screens the
   hero sizes to its content. Higher specificity than the v2 .prj-hero rule,
   so it overrides it for the variation-3 pages (which carry .sd-hero). */
@media (min-width: 760px) {
  .prj-hero.sd-hero { min-height: 856px; }
}

@media (prefers-reduced-motion: no-preference) {
  .sd-hero__accent {
    transform: scale(0); transform-origin: bottom left;
    animation: sdAccentIn 0.7s var(--ease-mech) 0.35s both;
  }
  @keyframes sdAccentIn { from { transform: scale(0); } to { transform: scale(1); } }
}


/* ── REDUCED MOTION — hard stop for the frontier layer ───────────────────
   Belt-and-braces: even though every motion above is already inside a
   no-preference query, restate the static end-state here so any UA that
   evaluates reduce wins decisively. */
@media (prefers-reduced-motion: reduce) {
  [data-section-reveal] .sd-table tbody tr,
  .sd-table tbody tr,
  [data-section-reveal] .sd-cap__copy,
  .sd-cap__copy { opacity: 1 !important; transform: none !important; clip-path: none !important; transition: none !important; }
  [data-section-reveal] .sd-why__item-h,
  .sd-why__item-h { transform: none !important; transition: none !important; }
  .sd-table thead th.is-col-active::after { transition: none; }
  .sd-bento__tile img,
  .sd-bento__veil,
  .sd-bento__eg { transition: none !important; transform: none !important; opacity: 1 !important; }
  .sd-story__aside::before { transform: scaleY(1) !important; transition: none !important; }
  .sd-hero__accent { animation: none !important; transform: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   CREDENTIALS STRIP (ab-creds) — matched to the About page strip.
   Yellow top accent, slash marks, centred flex. Sits right under the hero.
   The homepage carries an identical copy inline; About defines it in
   about.css. Reveal keys off .is-revealed from homepage.js. */
.ab-creds { position: relative; background: var(--altida-black); color: var(--altida-white); border-top: 2px solid var(--altida-yellow); padding-block: 0; }
.ab-creds__row { list-style: none; margin: 0 auto; padding: clamp(13px, 1.4vw, 17px) var(--gutter, 24px); max-width: var(--container-wide, 1440px); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: clamp(20px, 3vw, 52px); row-gap: 10px; }
.ab-creds__item { display: inline-flex; align-items: center; gap: 11px; font-family: var(--font-sans); font-weight: 700; font-size: clamp(11px, 0.9vw, 13px); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255, 255, 255, 0.88); white-space: nowrap; }
.ab-creds__mark { flex: none; width: 8px; height: 8px; background: var(--altida-yellow); clip-path: polygon(0 0, 68% 0, 100% 100%, 32% 100%); }
@media (max-width: 560px) { .ab-creds__row { column-gap: 16px; } .ab-creds__item { font-size: 11px; letter-spacing: 0.12em; } }
[data-section-reveal] .ab-creds__item { opacity: 0; transform: translateY(16px); transition: opacity 560ms var(--ease-mech), transform 560ms var(--ease-mech); }
.is-revealed .ab-creds__item { opacity: 1; transform: none; }
.is-revealed .ab-creds__item:nth-child(2) { transition-delay: 55ms; }
.is-revealed .ab-creds__item:nth-child(3) { transition-delay: 110ms; }
.is-revealed .ab-creds__item:nth-child(4) { transition-delay: 165ms; }
.is-revealed .ab-creds__item:nth-child(5) { transition-delay: 220ms; }
@media (prefers-reduced-motion: reduce) { [data-section-reveal] .ab-creds__item { opacity: 1 !important; transform: none !important; transition: none !important; } }


/* ════════════════════════════════════════════════════════════════════
   CONTENT-DEPTH COMPONENTS (2026-06-21)
   Three shared, restrained components added to take the service pages to
   best-in-market depth: a responsibility SPLIT (we provide / you provide),
   a named-phase PROCESS (no numerals — anti-pattern #9), and a ROLES grid
   (the lift team). Same grammar as the system above: sd-head molecule,
   --ease-mech, two-layer shadow, .is-revealed reveal, reduced-motion floor,
   yellow corner-slash glyph, Lovelo only on ≥32px titles, Inter caps subs.
   ════════════════════════════════════════════════════════════════════ */

/* ── SPLIT — two-column "what we provide / what you provide" ──────────── */
.sd-split { background: var(--altida-white); color: var(--altida-black); padding: clamp(72px, 9vw, 128px) 0; }
.sd-split__inner { max-width: 1100px; margin: 0 auto; padding: 0 var(--gutter, 24px); }
.sd-split__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (min-width: 760px) { .sd-split__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2vw, 28px); } }
.sd-split__col {
  background: var(--altida-bone); border-radius: 6px; padding: clamp(26px, 2.8vw, 38px);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 18px 40px -24px rgba(10, 10, 10, 0.22);
}
.sd-split__col--ours { background: color-mix(in srgb, var(--altida-yellow) 9%, #fff); }
.sd-split__label {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 6px;
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(10, 10, 10, 0.55);
}
.sd-split__label::before { content: ""; width: 8px; height: 8px; background: var(--altida-yellow); }
.sd-split__h {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(17px, 1.7vw, 22px);
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.15;
  margin: 0 0 clamp(18px, 2vw, 24px); color: var(--altida-black);
}
.sd-split__list { list-style: none; margin: 0; padding: 0; }
.sd-split__item {
  position: relative; padding: 12px 0 12px 26px; border-top: 1px solid var(--grey-200);
  font-family: var(--font-body); font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.55; color: rgba(10, 10, 10, 0.74);
}
.sd-split__item:first-child { border-top: 0; }
.sd-split__item::before {
  content: ""; position: absolute; left: 0; top: 1.05em; width: 11px; height: 11px;
  background: var(--altida-yellow); clip-path: polygon(0 0, 68% 0, 100% 100%, 32% 100%);
}
.sd-split__foot { margin: clamp(22px, 2.4vw, 32px) 0 0; }
.sd-split__note {
  font-family: var(--font-body); font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.6; color: rgba(10, 10, 10, 0.7); margin: 0 0 14px; max-width: 70ch;
}
.sd-split__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-sans); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--altida-black);
  text-decoration: none; border-bottom: 2px solid var(--altida-yellow); padding-bottom: 3px;
}
.sd-split__link .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.sd-split__link:hover .arrow { transform: translateX(4px); }

/* ── STEPS — named-phase process (no numerals) ───────────────────────── */
.sd-steps { background: var(--altida-bone); color: var(--altida-black); padding: clamp(72px, 9vw, 128px) 0; }
.sd-steps__inner { max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.sd-steps__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 20px); }
@media (min-width: 720px)  { .sd-steps__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sd-steps__grid { grid-template-columns: repeat(var(--sd-steps-cols, 4), minmax(0, 1fr)); } }
.sd-steps__step {
  position: relative; background: var(--altida-white); border-radius: 6px;
  padding: clamp(24px, 2.4vw, 32px);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 18px 40px -24px rgba(10, 10, 10, 0.22);
  display: flex; flex-direction: column;
}
.sd-steps__step::before {
  content: ""; position: absolute; top: 0; left: clamp(24px, 2.4vw, 32px); right: clamp(24px, 2.4vw, 32px);
  height: 3px; background: var(--altida-yellow); border-radius: 0 0 3px 3px;
}
.sd-steps__phase {
  font-family: var(--font-sans); font-weight: 700; font-size: 10.5px;
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(10, 10, 10, 0.5);
  margin: clamp(6px, 0.8vw, 10px) 0 14px;
}
.sd-steps__h {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(15px, 1.2vw, 17.5px);
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.2;
  margin: 0 0 10px; color: var(--altida-black);
}
.sd-steps__b {
  font-family: var(--font-body); font-size: clamp(14px, 1.02vw, 15.5px);
  line-height: 1.6; color: rgba(10, 10, 10, 0.68); margin: 0;
}

/* ── ROLES — the lift team (grid of role entries) ────────────────────── */
.sd-roles { background: var(--altida-white); color: var(--altida-black); padding: clamp(80px, 10vw, 136px) 0; }
.sd-roles__inner { max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.sd-roles__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2px, 0.4vw, 6px); }
@media (min-width: 680px)  { .sd-roles__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(40px, 5vw, 80px); } }
.sd-roles__item {
  position: relative; padding: clamp(20px, 2.2vw, 26px) 0 clamp(20px, 2.2vw, 26px) 30px;
  border-top: 1px solid var(--grey-200);
}
@media (min-width: 680px) { .sd-roles__item:nth-child(2) { border-top: 1px solid var(--grey-200); } }
.sd-roles__item::before {
  content: ""; position: absolute; left: 0; top: calc(clamp(20px, 2.2vw, 26px) + 0.3em); width: 13px; height: 13px;
  background: var(--altida-yellow); clip-path: polygon(0 0, 68% 0, 100% 100%, 32% 100%);
}
.sd-roles__role {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(15px, 1.25vw, 18px);
  letter-spacing: 0.03em; text-transform: uppercase; line-height: 1.2;
  margin: 0 0 9px; color: var(--altida-black);
}
.sd-roles__b {
  font-family: var(--font-body); font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6; color: rgba(10, 10, 10, 0.68); margin: 0; max-width: 56ch;
}

/* ── Reveal hooks for the three new components (key off .is-revealed) ─── */
[data-section-reveal] .sd-split__col,
[data-section-reveal] .sd-split__foot,
[data-section-reveal] .sd-steps__step,
[data-section-reveal] .sd-roles__item {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms var(--ease-mech), transform 560ms var(--ease-mech);
}
.is-revealed .sd-split__col,
.is-revealed .sd-split__foot,
.is-revealed .sd-steps__step,
.is-revealed .sd-roles__item { opacity: 1; transform: none; }
.is-revealed .sd-split__col:nth-child(2) { transition-delay: 100ms; }
.is-revealed .sd-steps__step:nth-child(2) { transition-delay: 90ms; }
.is-revealed .sd-steps__step:nth-child(3) { transition-delay: 180ms; }
.is-revealed .sd-steps__step:nth-child(4) { transition-delay: 270ms; }
.is-revealed .sd-steps__step:nth-child(5) { transition-delay: 360ms; }
.is-revealed .sd-roles__item:nth-child(2) { transition-delay: 80ms; }
.is-revealed .sd-roles__item:nth-child(3) { transition-delay: 160ms; }
.is-revealed .sd-roles__item:nth-child(4) { transition-delay: 240ms; }
.is-revealed .sd-roles__item:nth-child(5) { transition-delay: 320ms; }
@media (prefers-reduced-motion: reduce) {
  [data-section-reveal] .sd-split__col,
  [data-section-reveal] .sd-split__foot,
  [data-section-reveal] .sd-steps__step,
  [data-section-reveal] .sd-roles__item { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ════════════════════════════════════════════════════════════════════
   2026-07-01 ELEVATION LAYER — the crane-hire / homepage standard
   applied to the shared service-page template (cpa-hire, contract-lift,
   transport + 4 subpages). Look-and-feel only; markup and copy
   untouched. The grammar: floating cards (radius + layered shadow +
   hover lift), slash-marked rows, the comparison table floated as a
   card with a warm-charcoal header, checklists on a single panel,
   why as spec-sheet rows, bento tiles rounded with a deeper veil,
   darks warm charcoal (never flat black on text), contrast ≥ 7:1,
   yellow only where it carries meaning.
   ════════════════════════════════════════════════════════════════════ */

/* ── story intro: print column rule + firmer body ── */
@media (min-width: 861px){
  .sd-story__body{position:relative;padding-left:clamp(1.5rem,2.5vw,2.75rem)}
  .sd-story__body::before{content:"";position:absolute;left:0;top:.45rem;bottom:.3rem;width:1px;
    background:linear-gradient(180deg,var(--grey-300),rgba(0,0,0,0) 96%)}
}
.sd-story__p{color:rgba(10,10,10,.72)}

/* ── fleet / capability text cards: float + aligned feet ── */
.sd-fleet__card{display:flex;flex-direction:column;background:var(--altida-white);
  border:1px solid rgba(10,10,10,.08);border-radius:10px;
  box-shadow:0 26px 54px -28px rgba(10,10,10,.24),0 6px 16px -10px rgba(10,10,10,.08);
  transition:transform .4s var(--ease-mech),box-shadow .4s var(--ease-mech)}
.sd-fleet__card:hover{transform:translateY(-4px);
  box-shadow:0 34px 64px -30px rgba(10,10,10,.32),0 10px 22px -12px rgba(10,10,10,.12)}
.sd-fleet__badge{border-radius:5px}
.sd-fleet__body{color:rgba(10,10,10,.72)}
.sd-fleet__best{margin-top:auto;padding-top:14px;border-top:1px solid var(--grey-200)}
@media (prefers-reduced-motion: reduce){.sd-fleet__card{transition:none}.sd-fleet__card:hover{transform:none}}

/* ── capability list: the base heading already carries the slash marker —
   elevation keeps only the hairline + contrast (2026-07-02: a second
   item-level slash was doubling the bullets; removed) ── */
.sd-cap__item{border-top-color:var(--grey-300)}
.sd-cap__item-b{color:rgba(10,10,10,.72)}

/* ── limits comparison: the table floats as a card, charcoal header ── */
.sd-table{border-radius:14px;overflow:hidden;border:1px solid var(--grey-200);
  box-shadow:0 34px 64px -30px rgba(10,10,10,.30),0 10px 24px -12px rgba(10,10,10,.12)}
.sd-table thead th{background:#1B1A17}
.sd-table thead th:nth-child(3){background:#2A2721}
.sd-limits__note{color:rgba(10,10,10,.72)}

/* ── planning checklist: the items are already cards — refine them,
   warm the ground (no double-surfacing) ── */
.sd-check{background:radial-gradient(135% 130% at 84% -10%,var(--grey-100) 0%,var(--altida-bone) 58%)}
.sd-check__item{border-radius:9px;
  box-shadow:0 16px 36px -22px rgba(10,10,10,.22),0 3px 10px -6px rgba(10,10,10,.08)}
.sd-check__box{width:18px;height:18px}
.sd-check__foot{color:rgba(10,10,10,.72)}

/* ── why altida: spec-sheet rows ── */
.sd-why__item{position:relative;padding-left:2.3rem;border-top-color:var(--grey-300)}
.sd-why__item::before{content:"";position:absolute;left:0;top:calc(clamp(24px,2.8vw,34px) + .2em);
  width:15px;height:15px;background:var(--altida-yellow);
  clip-path:polygon(0 0,68% 0,100% 100%,32% 100%);filter:drop-shadow(0 3px 5px rgba(10,10,10,.14))}
.sd-why__item-h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(1.15rem,1.7vw,1.5rem);letter-spacing:.02em;line-height:1.08}
.sd-why__item-b{color:rgba(10,10,10,.72)}

/* ── bento tiles: rounded, deeper veil, readable captions ── */
.sd-bento__tile{border-radius:9px;overflow:hidden}
.sd-bento__veil{background:linear-gradient(180deg,rgba(10,10,10,.06) 40%,rgba(10,10,10,.88) 100%)}
.sd-bento__eg{color:rgba(255,255,255,.82)}

/* ── provide split: the softened comparison pair (homepage-risk grammar) ── */
.sd-split__col{border-radius:10px;overflow:hidden;border:1px solid rgba(10,10,10,.09);
  background:var(--altida-white);padding:clamp(1.6rem,2.4vw,2.2rem);
  box-shadow:0 26px 54px -28px rgba(10,10,10,.26),0 6px 16px -10px rgba(10,10,10,.09)}
.sd-split__col--ours{background:#1B1A17;color:var(--altida-white);border:0;
  box-shadow:0 26px 54px -28px rgba(10,10,10,.38),0 6px 16px -10px rgba(10,10,10,.14)}
.sd-split__col--ours .sd-split__h{color:var(--altida-white)}
.sd-split__col--ours .sd-split__item{color:rgba(255,255,255,.90);border-top-color:rgba(255,255,255,.12)}
.sd-split__col--ours .sd-split__label{color:rgba(255,255,255,.92)}
.sd-split__h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;
  font-size:clamp(19px,1.7vw,24px);letter-spacing:.03em;line-height:1}
.sd-split__label::before{display:none}
.sd-split__label{border-bottom:2px solid var(--altida-yellow);padding-bottom:3px}
.sd-split__note{color:rgba(10,10,10,.72)}
.sd-split__col--ours .sd-split__note{color:rgba(255,255,255,.78)}

/* ── steps + roles: elevated cards / marked rows ── */
.sd-steps__step{background:var(--altida-white);border:1px solid rgba(10,10,10,.08);border-radius:10px;
  padding:clamp(1.3rem,1.8vw,1.7rem);
  box-shadow:0 20px 44px -26px rgba(10,10,10,.22)}
.sd-steps__b{color:rgba(10,10,10,.72)}
/* roles: base already carries the slash marker — contrast only */
.sd-roles__b{color:rgba(10,10,10,.72)}

/* 2026-07-02 contrast floor: small caps labels raised past 4.5:1 */
.sd-steps__phase{color:rgba(10,10,10,.66)}
.sd-split__label{color:rgba(10,10,10,.66)}
/* 2026-07-02 mobile: the limits foot link forced horizontal overflow at 375 */
@media (max-width: 640px){
  .sd-limits__foot{flex-wrap:wrap}
  .sd-limits__link{white-space:normal;max-width:100%}
}

/* 2026-07-02 — sub-service tags in the story intro (parity with the
   crane-hire intro's CPA Hire / Contract Lift tag row) */
.sd-story__tags{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;row-gap:.6rem;margin:2rem 0 0;
  font-family:var(--font-sans);font-weight:700;font-size:.78rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey-800)}
.sd-story__slash{flex:0 0 auto;width:10px;height:18px;background:var(--altida-yellow);
  clip-path:polygon(0 100%,52% 0,100% 0,48% 100%)}
/* each separator binds to its following name — no dangling slashes on wrap */
.sd-story__tagg{display:inline-flex;align-items:center;gap:1rem;white-space:nowrap}
/* 2026-07-02 — Plant Movement sits PERFECTLY under Abnormal Loads (slash
   under slash, text under text). Grid placement pins the wrapped tag to the
   same column as the tag above — aligned by construction, not by centring.
   Applies only in the viewport windows where the row naturally wraps 3+1
   (measured: 580–806px single-column and ≥1128px two-column layouts);
   everywhere else the row is a single line or a balanced 2+2 and keeps the
   plain flex flow. width:0 stops the wider bottom tag inflating the column
   (which would push Hiab Transport right); its content overflows harmlessly. */
@media (min-width:580px) and (max-width:806px), (min-width:1128px){
  .sd-pg-transport .sd-story__tags{display:grid;grid-template-columns:repeat(3,max-content);
    justify-content:start;column-gap:1rem;row-gap:.6rem}
  .sd-pg-transport .sd-story__tagg:last-child{grid-column:2;grid-row:2;width:0;min-width:0}
}

/* 2026-07-02 mobile polish — touch hit-areas for the template's link
   atoms (visual layout unchanged: padding offset by negative margin). */
@media (pointer: coarse) {
  .sd-crumb a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .sd-limits__link, .sd-split__link { padding-block: 9px; margin-block: -9px; }
  .sd-hero__call { padding-block: 6px; margin-block: -6px; }
}