/* ────────────────────────────────────────────────────────────────────
   ABOUT.CSS — Altida /about/ page

   Composed from the shared sd-* editorial system (service-detail.css) + the
   prj-hero / pd-related / prj-cta chrome, with four About-only bands defined
   here: the credentials rail (ab-creds), the family band (ab-roots), the
   history timeline (ab-road) and the in-house process rail (ab-flow).

   Everything is scoped to .about-main (or the ab-* classes used only here) so
   the shared sd-* sections on the eight service pages are never touched.

   Tokens: black / yellow, Lovelo (display ≥32px) / Inter caps / Aller body,
   --ease-mech motion, reveal keyed off .is-revealed (homepage.js).

   ── 2026-06-24 PHOTOGRAPHIC REBUILD ─────────────────────────────────
   Root cause of the earlier misses: the page leaned on type-on-flat-colour
   where the homepage earns its premium feel from PHOTOGRAPHY and cinematic
   depth. This pass brings real imagery + the homepage's cinematic treatment
   (image + layered overlay + grain, lifted from prj-hero) into the two
   thesis sections:
     · ab-roots (the family) — was flat (black, then flat white). Now a
       CINEMATIC photographic band: a real Altida image under a layered dark
       overlay + grain, white editorial copy over it. This is the homepage's
       signature device — "dark done properly" (photographic), not flat black.
     · sd-story (one team) — gains a real fleet photo in the sticky aside, so
       the page's thesis reads photographic, not as a wall of text.
     · ab-creds — slim dark credentials rail (kept from the prior pass).
     · ab-road — grand Lovelo-year timeline (kept).
   Pop levers (per feedback_premium_is_clean_not_more): photography, cinematic
   contrast, statement-scale Lovelo, ONE yellow accent per area. No new
   sections, no stat widgets, no coloured glow.
   ──────────────────────────────────────────────────────────────────── */


/* ══ Page-scoped band rhythm ══════════════════════════════════════════
     hero(dark) → creds(dark slim) → story(bone) → family(DARK cinematic) →
     history(bone) → in-house(white) → fleet(bone) → industries(white) →
     why(bone) → recent(white) → cta(yellow).
   The dark cinematic family band sits between bone Story and bone History,
   so it reads as a strong photographic centrepiece against the light bands
   either side. The one intentional dark-on-dark join is hero → creds: the
   slim creds rail is the hero's dark "foot", welded by the 2px yellow top
   rule (the same move as the approved homepage v3-assure strip). */
.about-main .sd-why { background: var(--altida-bone); }
.about-main .pd-related { background: var(--altida-white); }


/* ══ ab-creds — slim credentials rail (dark) ══════════════════════════
   A single centred row of tracked Inter caps, each led by a small yellow
   brand-slash, on a slim black band with a 2px yellow top rule. The hero's
   refined "foot", not a floating sliver. */
.ab-creds {
  position: relative;
  background: var(--altida-black);
  color: var(--altida-white);
  border-top: 2px solid var(--altida-yellow);
  /* Kill the global `section { padding-block: var(--section-pad-y) }` rule
     (homepage.css) — without this the rail inherits ~144px top/bottom and
     balloons to ~340px tall. THIS is the real cause of the "way too high"
     trust bar; the slim look lives entirely in .ab-creds__row's own padding. */
  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; }
}


/* ══ ab-offer — "What we offer" immersive editorial ═══════════════════
   The page's thesis as a full-bleed editorial: a large fleet image bleeding
   to the right viewport edge, statement-scale Lovelo, a yellow brand edge-rule
   and generous space. Aiming beyond the homepage split: bigger type, immersive
   edge-bleed image, scroll parallax, finer seam detail. Bone band. */
.ab-offer { position: relative; overflow: hidden; background: var(--altida-bone); color: var(--altida-black); }
.ab-offer__edge { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--altida-yellow); z-index: 4; }
.ab-offer__inner {
  position: relative; z-index: 2;
  max-width: var(--container-wide, 1440px); margin: 0 auto;
  padding: clamp(56px, 6vw, 92px) var(--gutter, 24px);
}
.ab-offer__copy { max-width: 34rem; }
.ab-offer__h {
  font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 66px);
  line-height: 0.98; letter-spacing: -0.025em; text-transform: uppercase;
  margin: clamp(18px, 2vw, 26px) 0 clamp(24px, 3vw, 36px); color: var(--altida-black); text-wrap: balance;
}
.ab-offer__lede {
  font-family: var(--font-body); font-size: clamp(18px, 1.6vw, 24px);
  line-height: 1.5; color: var(--altida-black); margin: 0 0 22px; max-width: 38ch; text-wrap: pretty;
}
.ab-offer__p {
  font-family: var(--font-body); font-size: clamp(15.5px, 1.15vw, 17.5px);
  line-height: 1.72; color: rgba(10, 10, 10, 0.72); margin: 0 0 16px; max-width: 50ch; text-wrap: pretty;
}
.ab-offer__p:last-child { margin-bottom: 0; }
.ab-offer__media { margin: 0; }
.ab-offer__media img { display: block; width: 100%; }

@media (min-width: 920px) {
  /* No min-height — the section is exactly copy + padding tall, so the image
     (absolute, full height) matches it and there is no dead space; it fits
     comfortably within a viewport. */
  .ab-offer__inner { display: flex; align-items: center; padding-right: 52%; }
  .ab-offer__media { position: absolute; top: 0; right: 0; bottom: 0; width: clamp(46%, 50vw, 54%); z-index: 1; overflow: hidden; }
  .ab-offer__media img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: center; }
  /* clean crisp edge where the image meets the bone (no muddy fade); a thin
     yellow rule makes the seam a deliberate brand divider, not an accident. */
  .ab-offer__media::before {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 3px; z-index: 2;
    pointer-events: none; background: var(--altida-yellow);
  }
}
@media (max-width: 919px) {
  .ab-offer__inner { padding-bottom: clamp(30px, 5vw, 40px); }
  .ab-offer__media { aspect-ratio: 16 / 10; overflow: hidden; }
  .ab-offer__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* scroll parallax on the image (native scroll-timeline, no-build, gated) */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 920px) {
    .ab-offer__media img { animation: abOfferPar linear both; animation-timeline: view(); animation-range: cover; }
    @keyframes abOfferPar { from { transform: translateY(-8%); } to { transform: translateY(8%); } }
  }
}

/* reveal — copy lines stagger up; image fades in */
[data-section-reveal] .ab-offer__copy > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 620ms var(--ease-mech), transform 620ms var(--ease-mech);
}
.is-revealed .ab-offer__copy > * { opacity: 1; transform: none; }
.is-revealed .ab-offer__copy > *:nth-child(2) { transition-delay: 80ms; }
.is-revealed .ab-offer__copy > *:nth-child(3) { transition-delay: 160ms; }
.is-revealed .ab-offer__copy > *:nth-child(4) { transition-delay: 240ms; }
.is-revealed .ab-offer__copy > *:nth-child(5) { transition-delay: 320ms; }
[data-section-reveal] .ab-offer__media { opacity: 0; transition: opacity 900ms var(--ease-mech); }
.is-revealed .ab-offer__media { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  [data-section-reveal] .ab-offer__copy > *, [data-section-reveal] .ab-offer__media {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}


/* ══ ab-roots — the family band (CINEMATIC photographic) ══════════════
   A real Altida image under a layered dark overlay + grain, white editorial
   copy over it. The homepage's hero treatment (prj-hero), applied to the
   page's emotional centre. Statement-scale Lovelo, two-column body, refined
   anchor row split off by a white hairline. */
.ab-roots {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--altida-black); color: var(--altida-white);
  padding: clamp(78px, 9vw, 128px) 0;
}
.ab-roots__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* Image is taller than its frame so GSAP can parallax it (yPercent) on scroll
   without revealing an edge. Static fallback (no JS / reduced-motion) just
   shows the centred crop. Transform-only parallax — compositor-only (WD-F119),
   gated behind prefers-reduced-motion in about-motion.js (WD-F8). */
.ab-roots__bg img {
  position: absolute; left: 0; top: -16%; width: 100%; height: 132%;
  object-fit: cover; object-position: center 42%;
  opacity: 0.4; filter: grayscale(0.3);
}
.ab-roots__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0.22) 24%),
    linear-gradient(110deg, rgba(10,10,10,0.9) 0%, rgba(10,10,10,0.55) 52%, rgba(10,10,10,0.32) 100%),
    linear-gradient(0deg, rgba(10,10,10,0.72) 0%, rgba(10,10,10,0) 42%);
}
.ab-roots__grain {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='abn'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.16 0'/></filter><rect width='100%25' height='100%25' filter='url(%23abn)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.4;
}
/* Scroll-driven cinematic parallax on the family image — native CSS
   scroll-timeline (WD-F114): off the main thread, no library, no scroll
   handler. The image is sized 132%/top:-16% above, so ±8% travel never reveals
   an edge. Gated behind @supports + prefers-reduced-motion (WD-F8): unsupported
   browsers and reduced-motion users get the static centred crop. transform-only
   (WD-F119). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ab-roots__bg img {
      animation: abRootsParallax linear both;
      animation-timeline: view();
      animation-range: cover 0% cover 100%;
    }
    @keyframes abRootsParallax {
      from { transform: translateY(-8%); }
      to   { transform: translateY(8%); }
    }
  }
}
.ab-roots__inner {
  position: relative; z-index: 3;
  max-width: var(--container-wide, 1440px); margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}
.ab-roots__eyebrow {
  display: inline-flex; align-items: center; gap: 14px; margin: 0;
  font-family: var(--font-sans); font-weight: 700; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase; color: var(--altida-white);
}
.ab-roots__eyebrow-rule {
  flex: 0 0 auto; width: clamp(28px, 3vw, 40px); height: 1px;
  background: var(--altida-yellow);
}
.ab-roots__title {
  font-family: var(--font-display); font-size: clamp(40px, 6vw, 88px);
  line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase;
  margin: clamp(18px, 2vw, 26px) 0 0; color: var(--altida-white);
  max-width: 15ch; text-wrap: balance;
}
/* Coherent flow: a full-width lead paragraph, then the two supporting
   paragraphs in an even two-column block below it. No thin orphan column, no
   "dumped" right-hand text. */
.ab-roots__body { margin: clamp(28px, 3.4vw, 44px) 0 0; }
.ab-roots__lede {
  font-family: var(--font-body); font-size: clamp(19px, 1.7vw, 25px);
  line-height: 1.5; color: var(--altida-white); margin: 0 0 clamp(22px, 2.6vw, 32px);
  max-width: 44ch; text-wrap: pretty;
}
.ab-roots__p {
  font-family: var(--font-body); font-size: clamp(15.5px, 1.1vw, 17px);
  line-height: 1.72; color: rgba(255, 255, 255, 0.78); margin: 0 0 16px; max-width: 60ch;
  text-wrap: pretty;
}
.ab-roots__p:last-child { margin-bottom: 0; }
@media (min-width: 760px) {
  .ab-roots__body { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(44px, 5vw, 88px); row-gap: 0; }
  .ab-roots__lede { grid-column: 1 / -1; max-width: 46ch; }
  .ab-roots__p { margin: 0; max-width: 42ch; }
}
.ab-roots__anchors {
  list-style: none; margin: clamp(32px, 4vw, 52px) 0 0;
  padding: clamp(26px, 3vw, 38px) 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px;
}
@media (min-width: 720px) {
  .ab-roots__anchors { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 3.4vw, 60px); }
}
.ab-roots__anchor { position: relative; padding-left: 26px; }
.ab-roots__anchor::before {
  content: ""; position: absolute; left: 0; top: 0.35em; width: 13px; height: 13px;
  background: var(--altida-yellow); clip-path: polygon(0 0, 68% 0, 100% 100%, 32% 100%);
}
.ab-roots__anchor-h {
  display: block; font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(13px, 1vw, 15px); letter-spacing: 0.04em;
  text-transform: uppercase; margin: 0 0 9px; color: var(--altida-white);
}
.ab-roots__anchor-b {
  display: block; font-family: var(--font-body); font-size: clamp(14px, 1.02vw, 15.5px);
  line-height: 1.6; color: rgba(255, 255, 255, 0.72);
}


/* ══ ab-road — the history timeline (bone, statement years) ═══════════
   Statement-scale Lovelo years, each with a short yellow rule, content to
   the right, rows split by hairlines. Bone, between the dark family band and
   the white in-house rail. */
.ab-road { background: var(--altida-bone); color: var(--altida-black); padding: clamp(64px, 7.5vw, 108px) 0; }
.ab-road__inner { max-width: var(--container-wide, 1440px); margin: 0 auto; padding: 0 var(--gutter, 24px); }
.ab-road__head { max-width: 760px; margin: 0 0 clamp(32px, 4vw, 52px); }
.ab-road__title {
  font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 64px);
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--altida-black); text-wrap: balance;
}
.ab-road__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: 20px 0 0; max-width: 58ch; text-wrap: pretty;
}
/* Connected self-drawing rail (the timeline moved here from How-we-work) —
   a continuous yellow line with a node per milestone, year as the eyebrow. */
.ab-road__list { position: relative; list-style: none; margin: 0; padding: 0; max-width: 840px; }
.ab-road__item { position: relative; padding: 0 0 clamp(30px, 3.6vw, 50px) clamp(46px, 5vw, 64px); }
.ab-road__item:last-child { padding-bottom: 0; }
.ab-road__list::before { content: ""; position: absolute; left: 10px; top: 7px; bottom: 7px; width: 2px; background: rgba(10, 10, 10, 0.12); }
.ab-road__list::after { content: ""; position: absolute; left: 10px; top: 7px; bottom: 7px; width: 2px; background: var(--altida-yellow); transform: scaleY(1); transform-origin: top; }
.ab-road__node {
  position: absolute; left: 3px; top: 4px; width: 16px; height: 16px;
  background: var(--altida-bone); border: 2px solid rgba(10, 10, 10, 0.24);
  display: grid; place-items: center; z-index: 1;
}
.ab-road__node::after { content: ""; width: 6px; height: 6px; background: var(--altida-yellow); }
.ab-road__when {
  margin: 0 0 6px; font-family: var(--font-sans); font-weight: 800;
  font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(10, 10, 10, 0.55);
}
.ab-road__h {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(17px, 1.6vw, 22px);
  letter-spacing: 0.01em; text-transform: uppercase; line-height: 1.2;
  color: var(--altida-black); margin: 0 0 10px;
}
.ab-road__b {
  font-family: var(--font-body); font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.7; color: rgba(10, 10, 10, 0.72); margin: 0; max-width: 62ch; text-wrap: pretty;
}
@media (prefers-reduced-motion: no-preference) {
  .ab-road__list::after { transform: scaleY(0); transition: transform 1200ms var(--ease-mech); }
  .ab-road.is-revealed .ab-road__list::after { transform: scaleY(1); }
  .ab-road__node::after { transform: scale(0); transition: transform 420ms var(--ease-mech); }
  .ab-road__node { border-color: rgba(10, 10, 10, 0.16); transition: border-color 420ms var(--ease-mech); }
  .ab-road.is-revealed .ab-road__node::after { transform: scale(1); }
  .ab-road.is-revealed .ab-road__node { border-color: var(--altida-black); }
  .ab-road.is-revealed .ab-road__item:nth-child(1) .ab-road__node::after { transition-delay: 120ms; }
  .ab-road.is-revealed .ab-road__item:nth-child(2) .ab-road__node::after { transition-delay: 340ms; }
  .ab-road.is-revealed .ab-road__item:nth-child(3) .ab-road__node::after { transition-delay: 560ms; }
  .ab-road.is-revealed .ab-road__item:nth-child(4) .ab-road__node::after { transition-delay: 780ms; }
  .ab-road.is-revealed .ab-road__item:nth-child(5) .ab-road__node::after { transition-delay: 1000ms; }
}


/* ══ ab-flow — the "one team" in-house process rail (white) ═══════════
   The in-house chain as a self-drawing vertical rail whose nodes light up in
   sequence as the section scrolls in: one continuous line, one team, end to
   end. White, between the bone history above and the bone fleet below. */
.ab-flow { background: var(--altida-white); color: var(--altida-black); padding: clamp(64px, 7.5vw, 110px) 0; }
.ab-flow__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(40px, 5vw, 60px);
}
@media (min-width: 960px) {
  .ab-flow__inner { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(56px, 7vw, 112px); align-items: start; }
  .ab-flow__head { position: sticky; top: 112px; }
}
.ab-flow__head { max-width: 460px; margin: 0; }
.ab-flow__title {
  font-family: var(--font-display); font-size: clamp(36px, 4.6vw, 62px);
  line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  margin: 16px 0 0; color: var(--altida-black); text-wrap: balance;
}
.ab-flow__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: 20px 0 0; max-width: 46ch; text-wrap: pretty;
}
/* No rail here (the rail moved to History) — a clean marked list of what's
   kept in-house, paired with the sticky statement head on the left. */
.ab-flow__steps { list-style: none; margin: 0; padding: 0; max-width: none; }
.ab-flow__step { position: relative; padding: clamp(20px, 2.4vw, 30px) 0 clamp(20px, 2.4vw, 30px) 32px; border-top: 1px solid var(--grey-200); }
.ab-flow__step:first-child { border-top: 0; padding-top: 0; }
.ab-flow__node { display: none; }
.ab-flow__step::before {
  content: ""; position: absolute; left: 0; top: calc(clamp(20px, 2.4vw, 30px) + 0.3em);
  width: 14px; height: 14px; background: var(--altida-yellow);
  clip-path: polygon(0 0, 68% 0, 100% 100%, 32% 100%);
}
.ab-flow__step:first-child::before { top: 0.3em; }
.ab-flow__step-h {
  font-family: var(--font-sans); font-weight: 800; font-size: clamp(16px, 1.5vw, 21px);
  letter-spacing: 0.02em; text-transform: uppercase; color: var(--altida-black);
  margin: 0 0 10px; line-height: 1.2;
}
.ab-flow__step-b {
  font-family: var(--font-body); font-size: clamp(15.5px, 1.15vw, 17px);
  line-height: 1.7; color: rgba(10, 10, 10, 0.7); margin: 0; max-width: 60ch; text-wrap: pretty;
}
@media (prefers-reduced-motion: no-preference) {
  .ab-flow__step-h, .ab-flow__step-b { opacity: 0; transform: translateY(12px); transition: opacity 560ms var(--ease-mech), transform 560ms var(--ease-mech); }
  .ab-flow.is-revealed .ab-flow__step-h, .ab-flow.is-revealed .ab-flow__step-b { opacity: 1; transform: none; }
  .ab-flow.is-revealed .ab-flow__step:nth-child(2) .ab-flow__step-h, .ab-flow.is-revealed .ab-flow__step:nth-child(2) .ab-flow__step-b { transition-delay: 80ms; }
  .ab-flow.is-revealed .ab-flow__step:nth-child(3) .ab-flow__step-h, .ab-flow.is-revealed .ab-flow__step:nth-child(3) .ab-flow__step-b { transition-delay: 160ms; }
  .ab-flow.is-revealed .ab-flow__step:nth-child(4) .ab-flow__step-h, .ab-flow.is-revealed .ab-flow__step:nth-child(4) .ab-flow__step-b { transition-delay: 240ms; }
  .ab-flow.is-revealed .ab-flow__step:nth-child(5) .ab-flow__step-h, .ab-flow.is-revealed .ab-flow__step:nth-child(5) .ab-flow__step-b { transition-delay: 320ms; }
}


/* ══ History (rail) + How-we-work — supporting images (de-bore + soften) ══
   Both text sections gain a real image alongside the content: fills the empty
   space, adds richness, keeps them LIGHT (softer than dark/text strips). */
.ab-road__cols { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(30px, 4vw, 48px); }
.ab-road__cols .ab-road__list { max-width: none; }
@media (min-width: 920px) {
  .ab-road__cols { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: clamp(44px, 5vw, 84px); align-items: stretch; }
}
.ab-road__media { margin: 0; overflow: hidden; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 30px 60px -30px rgba(10, 10, 10, 0.42); }
.ab-road__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; min-height: clamp(260px, 38vh, 460px); }

.ab-flow__media { margin: clamp(26px, 3vw, 38px) 0 0; overflow: hidden; aspect-ratio: 4 / 3; box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 26px 54px -30px rgba(10, 10, 10, 0.4); }
.ab-flow__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
@media (max-width: 959px) { .ab-flow__media { max-width: 520px; } }


/* ══ Industries (bento) — square the tiles to match the site's 90° edges ══ */
.about-main .sd-bento__tile { border-radius: 0; }


/* ══ Why Altida — premium differentiators grid (scoped to About) ══════
   Convert the shared sticky-aside list into a confident full-width header +
   a bold 2-column differentiators grid, each a refined block led by a yellow
   brand-slash. Distinct from the page's other sections; bone band. */
.about-main .sd-why__inner { display: block; max-width: var(--container-wide, 1440px); }
.about-main .sd-why__head { position: static; max-width: 820px; margin: 0 0 clamp(32px, 4vw, 52px); }
.about-main .sd-why__title { font-size: clamp(38px, 5vw, 72px); line-height: 0.98; letter-spacing: -0.02em; }
.about-main .sd-why__sub { max-width: 54ch; }
.about-main .sd-why__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 1.6vw, 22px); }
@media (min-width: 680px)  { .about-main .sd-why__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .about-main .sd-why__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* elevated cards with a yellow top accent — depth, not a flat list. Square. */
.about-main .sd-why__item {
  position: relative; background: var(--altida-white); border-top: 0; overflow: hidden;
  padding: clamp(26px, 2.4vw, 36px);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 18px 40px -24px rgba(10, 10, 10, 0.22);
}
.about-main .sd-why__item:first-child { border-top: 0; padding-top: clamp(26px, 2.4vw, 36px); }
.about-main .sd-why__item::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; width: auto; height: 4px;
  background: var(--altida-yellow); clip-path: none;
}
.about-main .sd-why__item-h { font-size: clamp(17px, 1.5vw, 21px); margin: 0 0 12px; letter-spacing: 0.02em; }
.about-main .sd-why__item-b { font-size: clamp(15px, 1.1vw, 16.5px); line-height: 1.66; color: rgba(10, 10, 10, 0.7); max-width: none; text-wrap: pretty; }


/* ══ Fleet — finessed photo cards (scoped to About) ══════════════════
   Image on top at a FIXED ratio, badge as a sharp chip on the image corner
   (no overlap), text below. Cards stretch to equal height (grid default), the
   image ratio is fixed and "Best for" is pinned to the bottom — so badges,
   names and "Best for" all line up across the row. Light cards soften the band
   vs the dark overlay. */
.about-main .sd-fleet__card {
  position: relative; padding: 0; overflow: hidden; border-radius: 0;
  display: flex; flex-direction: column; background: var(--altida-white);
  box-shadow: 0 1px 2px rgba(10, 10, 10, 0.05), 0 20px 44px -26px rgba(10, 10, 10, 0.26);
}
.about-main .sd-fleet__media { position: relative; margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: var(--altida-bone); }
.about-main .sd-fleet__media img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.about-main .sd-fleet__badge {
  position: absolute; top: 0; left: 0; z-index: 2; margin: 0; align-self: auto;
  background: var(--altida-yellow); color: var(--altida-black); border-radius: 0;
  padding: 7px 13px; font-weight: 700; font-size: 10.5px; letter-spacing: 0.12em;
}
.about-main .sd-fleet__content { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 1.9vw, 28px); }
.about-main .sd-fleet__name { color: var(--altida-black); margin: 0 0 12px; }
.about-main .sd-fleet__body { color: rgba(10, 10, 10, 0.7); margin: 0 0 18px; }
.about-main .sd-fleet__best { margin: auto 0 0; padding-top: 16px; border-top: 1px solid var(--grey-200); }
.about-main .sd-fleet__card::after {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 3;
  background: var(--altida-yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.45s var(--ease-mech);
}
.about-main .sd-fleet__card:hover::after,
.about-main .sd-fleet__card:focus-within::after { transform: scaleX(1); }
@media (prefers-reduced-motion: no-preference) {
  .about-main .sd-fleet__media img { transition: transform 0.9s var(--ease-mech); }
  .about-main .sd-fleet__card:hover .sd-fleet__media img,
  .about-main .sd-fleet__card:focus-within .sd-fleet__media img { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .about-main .sd-fleet__card::after { transition: none; }
}


/* ══ Scroll reveals (key off .is-revealed from homepage.js) ═══════════ */
[data-section-reveal] .ab-creds__item,
[data-section-reveal] .ab-roots__eyebrow,
[data-section-reveal] .ab-roots__title,
[data-section-reveal] .ab-roots__lede,
[data-section-reveal] .ab-roots__p,
[data-section-reveal] .ab-roots__anchor {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms var(--ease-mech), transform 560ms var(--ease-mech);
}
.is-revealed .ab-creds__item,
.is-revealed .ab-roots__eyebrow,
.is-revealed .ab-roots__title,
.is-revealed .ab-roots__lede,
.is-revealed .ab-roots__p,
.is-revealed .ab-roots__anchor { 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; }
.is-revealed .ab-roots__title { transition-delay: 80ms; }
.is-revealed .ab-roots__lede { transition-delay: 140ms; }
.is-revealed .ab-roots__anchor:nth-child(2) { transition-delay: 120ms; }
.is-revealed .ab-roots__anchor:nth-child(3) { transition-delay: 220ms; }

/* Premium cinematic entrance on the family statement title — a left-to-right
   clip-path wipe instead of a plain fade (ease-out entrance feel, WD-F18/F115;
   transform/clip-path only, WD-F119). Overrides the base fade for the title
   only; reduced-motion keeps the static end-state (WD-F8). */
@media (prefers-reduced-motion: no-preference) {
  [data-section-reveal] .ab-roots__title {
    opacity: 1; transform: none;
    clip-path: inset(0 100% 0 0);
    transition: clip-path 820ms var(--ease-mech);
  }
  .is-revealed .ab-roots__title { clip-path: inset(0 0 0 0); }
}

/* Body copy: text-wrap: pretty minimises orphans / short last lines (WD-F113) —
   cheap typographic polish that reads as craft. Headings already use balance. */
.ab-roots__lede, .ab-roots__p, .ab-road__lede, .ab-road__b,
.ab-flow__lede, .ab-flow__step-b { text-wrap: pretty; }

[data-section-reveal] .ab-road__item {
  opacity: 0; transform: translateY(16px);
  transition: opacity 560ms var(--ease-mech), transform 560ms var(--ease-mech);
}
.is-revealed .ab-road__item { opacity: 1; transform: none; }
.is-revealed .ab-road__item:nth-child(2) { transition-delay: 90ms; }
.is-revealed .ab-road__item:nth-child(3) { transition-delay: 180ms; }
.is-revealed .ab-road__item:nth-child(4) { transition-delay: 270ms; }
.is-revealed .ab-road__item:nth-child(5) { transition-delay: 360ms; }
.is-revealed .ab-road__item:nth-child(6) { transition-delay: 450ms; }


/* ══ Reduced motion ═══════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  [data-section-reveal] .ab-creds__item,
  .ab-roots__eyebrow, .ab-roots__title, .ab-roots__lede, .ab-roots__p, .ab-roots__anchor,
  [data-section-reveal] .ab-road__item {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .about-main .sd-fleet__card::after { transition: none; }
  .about-main .ab-story-media img { transition: none !important; transform: none !important; }
  .about-main .prj-hero__bg img { animation: none; }
}


/* ============================================================
   ABOUT — HYBRID REDESIGN (2026-06-26). Middle sections 3-8
   rebuilt; chrome (nav/hero/ab-creds/pd-related/prj-cta/footer)
   untouched. Folded in from the approved comp-h.
   ============================================================ */

/* ============================================================
   COMP TOKENS — bridges my middle-section CSS (comp-c.css +
   comp-cN.css) onto the REAL Altida tokens.css. Loaded AFTER the
   real site CSS, only aliases + a few utilities my sections use.
   Does NOT touch the real chrome (nav/hero/trust-bar/cta/footer).
   ============================================================ */
:root{
  --yellow:var(--altida-yellow); --yellow-warm:var(--altida-yellow-warm);
  --black:var(--altida-black); --pure-black:var(--altida-pure-black);
  --white:var(--altida-white); --bone:var(--altida-bone);
  --g-950:var(--grey-950); --g-900:var(--grey-900); --g-850:#191919; --g-800:var(--grey-800);
  --g-700:var(--grey-700); --g-600:var(--grey-600); --g-500:var(--grey-500); --g-400:var(--grey-400);
  --g-300:var(--grey-300); --g-200:var(--grey-200); --g-100:var(--grey-100); --g-50:var(--grey-50);
  --wide:var(--container-wide);
}

/* utilities my middle sections reference */
.about-main .c .eyebrow{display:flex;align-items:center;gap:.85rem;font-family:var(--font-sans);font-weight:600;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--g-600)}
.about-main .c .eyebrow::before{content:"";width:34px;height:3px;background:var(--yellow);flex:0 0 auto}
.about-main .c .eyebrow--light{color:rgba(255,255,255,.7)}
.about-main .c .dot{color:var(--yellow)}
.about-main .c .grain{position:absolute;inset:0;pointer-events:none;opacity:.5;mix-blend-mode:overlay;z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E")}

/* preview label chip (comp only) */
.complabel{position:fixed;top:10px;right:10px;z-index:99;background:var(--altida-black);color:var(--altida-yellow);
  font-family:var(--font-sans);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;padding:.5rem .8rem}


/* ---- middle layout (was comp-c.css) ---- */
/* ============================================================
   COMP C — REFINED HYBRID
   Deliberate light/dark rhythm + a tailored device per section
   (two-trades diagram, connected process rail, coverage map),
   the two-corner-slash motif as the through-line.
   ============================================================ */

.c section{position:relative;overflow:hidden}
.c h2{font-family:var(--font-display);font-weight:900;text-transform:uppercase;letter-spacing:.01em;line-height:.97}

/* signature corner slash */
.c-slash{position:absolute;width:120px;height:64px;background:var(--yellow);z-index:3;pointer-events:none}
.c-slash--tr{top:0;right:0;clip-path:polygon(100% 0,100% 100%,0 0)}
.c-slash--bl{left:0;bottom:0;clip-path:polygon(0 100%,0 30%,100% 100%)}
.c-slash--light{opacity:.95}

/* ---- 2 · CREDENTIALS — dark slim ---- */
.c-creds{background:var(--black);border-top:3px solid var(--yellow)}
.c-creds__row{max-width:var(--wide);margin:0 auto;padding:1.35rem var(--gutter);display:flex;flex-wrap:wrap;gap:2.4rem;
  font-family:var(--font-sans);font-weight:600;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.c-creds__row li{display:flex;align-items:center;gap:.7rem}
.c-creds__row li span{width:7px;height:7px;background:var(--yellow);transform:rotate(45deg)}

/* ---- 4 · THE FAMILY — dark cinematic anchor ---- */
.c-family{background:var(--black);padding:clamp(2rem,4vw,3.5rem) 0;min-height:calc(100vh - 64px);display:grid;align-content:center}
.c-family__bg{position:absolute;inset:0}
.c-family__bg img{width:100%;height:100%;object-fit:cover;opacity:.42;object-position:center 30%}
.c-family__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.66),rgba(10,10,10,.85))}
.c-family__in{position:relative;z-index:2;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.c-family__h{color:var(--white);font-size:clamp(2.6rem,5.2vw,5rem);margin:1.4rem 0 2.4rem;max-width:14ch}
.c-family__body{max-width:760px;margin-bottom:3.4rem}
.c-family__lede{font-family:var(--font-body);color:#fff;font-size:clamp(1.2rem,1.7vw,1.55rem);line-height:1.5;margin-bottom:1.5rem}
.c-family__p{font-family:var(--font-body);color:rgba(255,255,255,.66);font-size:1.05rem;line-height:1.74;margin-bottom:1.2rem}
.c-family__anchors{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2rem;border-top:1px solid rgba(255,255,255,.14);padding-top:2.6rem}
.c-family__anchors li{display:flex;flex-direction:column;gap:.7rem;padding-left:1.4rem;position:relative}
.c-anchor__mark{position:absolute;left:0;top:.4rem;width:10px;height:11px;background:var(--yellow);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%)}
.c-anchor__h{font-family:var(--font-sans);font-weight:700;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.c-anchor__b{font-family:var(--font-body);color:rgba(255,255,255,.74);font-size:.98rem;line-height:1.6}
@media(max-width:820px){.c-family__anchors{grid-template-columns:1fr}}

/* ---- 4b · HISTORY — bone heritage row ---- */
.c-history{background:var(--bone);padding:clamp(5rem,9vw,8rem) 0}
.c-history__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.c-history__head{max-width:680px;margin-bottom:3.6rem}
.c-history__h{color:var(--black);font-size:clamp(2.2rem,4.2vw,3.4rem);margin:1.2rem 0 1.1rem}
.c-history__lede{font-family:var(--font-body);color:var(--g-600);font-size:1.08rem;line-height:1.65}
.c-history__row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6rem;position:relative;list-style:none;margin:0;padding:0}
/* strip stray ordered-list 1./2./3. markers + ul discs from the other redesigned lists (same artifact as the history years) */
.c-flow__rail{list-style:none}
.c-why__list,.c-family__anchors{list-style:none;padding-inline-start:0}
.c-history__row::before{content:"";position:absolute;top:11px;left:6px;right:6px;height:2px;background:linear-gradient(90deg,var(--yellow),var(--g-300))}
.c-mile{position:relative;padding-top:2.6rem}
/* year markers = the trust-strip slash (clip-path), sized up: a yellow slash with a bone outline (backing slash) so it stays clear of the yellow rail */
.c-mile::before{content:"";position:absolute;top:1px;left:0;width:25px;height:23px;background:var(--bone);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%);filter:drop-shadow(0 4px 8px rgba(10,10,10,.30));z-index:1}
.c-mile::after{content:"";position:absolute;top:4px;left:4px;width:18px;height:17px;background:var(--yellow);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%);z-index:2}
.c-mile__yr{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(1.4rem,2.2vw,2rem);color:var(--black);margin-bottom:.8rem;letter-spacing:.02em}
.c-mile h3{font-family:var(--font-sans);font-weight:700;font-size:.98rem;color:var(--black);margin-bottom:.6rem;line-height:1.25}
.c-mile p{font-family:var(--font-body);color:var(--g-600);font-size:.9rem;line-height:1.6}
@media(max-width:980px){.c-history__row{grid-template-columns:1fr 1fr}.c-history__row::before{display:none}.c-mile{padding-top:2rem;padding-bottom:1.4rem}}

/* ---- 6 · FLEET — CINEMATIC dark showcase (rebuilt 2026-06-26): full-bleed
   machine photos in tall panels, dark cinematic veil, meta overlaid, hover-zoom.
   The machines are the hero; dark like the family band the operator rated. ---- */
.c-fleet{position:relative;background:var(--g-950);padding:clamp(4.5rem,8vw,7.5rem) 0;overflow:hidden}
.c-fleet::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 82% -5%,rgba(255,236,0,.05),transparent 55%)}
.c-fleet__in{position:relative;z-index:2;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.c-fleet__head{max-width:720px;margin-bottom:clamp(2.6rem,4vw,3.6rem)}
.c-fleet__h{color:var(--white);font-size:clamp(2.2rem,4vw,3.4rem);margin:1.2rem 0 1.1rem}
.c-fleet__sub{font-family:var(--font-body);color:rgba(255,255,255,.62);font-size:1.05rem;line-height:1.65}
.c-fleet__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.3rem}
.c-plate{position:relative;display:block;min-height:clamp(440px,54vh,580px);overflow:hidden;border-radius:10px;background:var(--g-900)}
.c-plate__img{position:absolute;inset:0;overflow:hidden}
.c-plate__img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease-mech)}
.c-plate:hover .c-plate__img img{transform:scale(1.05)}
.c-plate::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(10,10,10,.28) 0%,rgba(10,10,10,.08) 30%,rgba(10,10,10,.72) 66%,rgba(10,10,10,.96) 100%)}
.c-plate__slash{position:absolute;left:0;bottom:0;width:64px;height:34px;background:var(--yellow);clip-path:polygon(0 100%,0 35%,100% 100%);z-index:3}
.c-plate__meta{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.5rem 1.4rem 1.6rem}
.c-plate__badge{display:inline-block;font-family:var(--font-sans);font-weight:700;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:var(--black);background:var(--yellow);padding:.3rem .55rem;margin-bottom:.8rem}
.c-plate__meta h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.22rem;letter-spacing:.02em;color:var(--white);margin-bottom:.6rem;line-height:1.05}
.c-plate__meta p{font-family:var(--font-body);color:rgba(255,255,255,.78);font-size:.86rem;line-height:1.55;margin-bottom:.6rem}
.c-plate__best{color:rgba(255,255,255,.92)!important}
.c-plate__best b{font-family:var(--font-sans);font-weight:700;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow);display:block;margin-bottom:.12rem}
/* Line the overlaid meta up across the row: the cards are equal height but the
   meta is bottom-anchored, so variable-length copy floated each badge/title to a
   different height. Give the title + description consistent slots (multi-column
   only; single-column mobile stays tight) so the metas match and the badges align. */
@media(min-width:561px){
  .c-plate__meta h3{min-height:calc(1.05em * 2)}
  .c-plate__meta p:not(.c-plate__best){min-height:calc(1.55em * 5)}
}
@media(max-width:1080px){.c-fleet__grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.c-fleet__grid{grid-template-columns:1fr}}

/* ---- 7 · INDUSTRIES — LIGHT bento (bone ground, dark photo tiles) ---- */
.c-bento{background:var(--bone);padding:clamp(4.5rem,8vw,7.5rem) 0}
.c-bento__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.c-bento__head{margin-bottom:2.8rem}
.c-bento__h{color:var(--black);font-size:clamp(2rem,3.6vw,3.2rem);margin-top:1.2rem}
.c-bento__grid{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:230px;gap:1.1rem}
.c-tile{position:relative;overflow:hidden;display:flex;align-items:flex-end}
.c-tile--feature{grid-column:span 2;grid-row:span 2}
.c-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-mech)}
.c-tile__veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.08) 42%,rgba(10,10,10,.84) 100%)}
.c-tile__meta{position:relative;z-index:2;padding:1.4rem}
.c-tile__meta h3{font-family:var(--font-sans);font-weight:800;font-size:1.02rem;color:var(--white);margin-bottom:.3rem}
.c-tile--feature .c-tile__meta h3{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:1.7rem;letter-spacing:.02em}
.c-tile__meta p{font-family:var(--font-body);color:rgba(255,255,255,.74);font-size:.84rem;line-height:1.5}
@media(max-width:820px){.c-bento__grid{grid-template-columns:1fr 1fr;grid-auto-rows:minmax(190px,auto)}.c-tile--feature{grid-column:span 2}}
/* Narrow phones: long single-word labels ("manufacturing") beat a half-width
   tile at <=380px — tighter meta padding + a type step + hyphenation floor
   (mobile audit 2026-07-09, about @320: meta 165px in a 135px tile). */
@media(max-width:380px){
  .c-tile__meta{padding:1rem}
  .c-tile__meta h3{font-size:.92rem;hyphens:auto;overflow-wrap:anywhere}
}
/* ^ 190px is a FLOOR (minmax), not fixed: fixed rows clipped the tile captions 19px
   at 360-412px when the text wrapped taller than the row (mobile audit 2026-07-08). */

/* ---- hybrid theme (was comp-h.css) ---- */
/* ============================================================
   HYBRID — best of C1/C2/C3, colour overuse removed.
   • Editorial breathers (offer, why) = crisp WHITE (kills the
     "sand" wash from C3).
   • Warmth via BONE panels (history, fleet) + warm-charcoal darks,
     not a beige wash.
   • Darks are warm charcoal + always carry imagery/texture — never
     a flat pure-black wall.
   • Consistent 9px radius (C2's friendliness, restrained).
   • "What we offer" reworked: copy + compact diagram | real photo,
     so the right side is anchored, not empty.
   ============================================================ */

/* ---------- consistent soft radius ---------- */
.h .c-plate{border-radius:9px;overflow:hidden}
.h .c-tile{border-radius:9px}
.h .c-diagram{border-radius:9px}
.h .c-flow__media{border-radius:9px}
.h .c-reach__card{border-radius:9px}
.h .c-offer__photo{border-radius:9px;overflow:hidden}
.h .c-plate__badge,.h .c-diagram__bar--one,
.h .c-diagram__bar--split span,.h .c-diagram__gap{border-radius:5px}

/* ---------- 3 · WHAT WE OFFER — copy left | vertical stage-diagram right ----------
   Side-by-side keeps the section compact (its height tracks the copy, not
   copy+diagram). The diagram is VERTICAL so each stage box gets the column's
   full width — the handover boxes read clearly instead of being squeezed.
   Same stages as the homepage equivalent, Altida's own compact treatment. */
.h .c-offer{background:var(--white)}
.h .c-offer--hybrid .c-offer__in{display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:clamp(2.5rem,5vw,5rem)}
.h .c-offer__copy{align-self:center}
.h .c-diff .c-diagram{background:transparent;border:0;padding:0;border-radius:0;max-width:none;margin:0;display:flex;flex-direction:column;gap:1.6rem}
.c-diagram__tag{display:block;font-family:var(--font-sans);font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--g-500);margin-bottom:.75rem}
.c-diagram__tag--on{color:var(--black)}
.c-diagram__stack{display:flex;flex-direction:column;border-radius:8px;overflow:hidden}
.c-diagram__seg{font-family:var(--font-sans);font-weight:700;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;color:var(--g-800);background:var(--g-200);padding:.95rem 1.1rem;text-align:center}
.c-diagram__seg:nth-of-type(3){background:var(--g-300)}
.c-diagram__gap{font-family:var(--font-sans);font-weight:700;font-size:.62rem;letter-spacing:.06em;text-transform:uppercase;color:#b3261e;text-align:center;padding:.62rem 1.1rem;
  background:repeating-linear-gradient(45deg,#fffdf0,#fffdf0 7px,rgba(255,236,0,.6) 7px,rgba(255,236,0,.6) 14px);border-block:2px dashed var(--g-400)}
.c-diagram__one{background:var(--black);color:var(--yellow);font-family:var(--font-sans);font-weight:700;font-size:.84rem;letter-spacing:.03em;text-transform:uppercase;text-align:center;padding:1.15rem;border-left:5px solid var(--yellow);border-radius:8px}

/* About-only hero bottom edge: keep the full-width yellow line, drop the
   bottom-right slash. (The bottom-left slash element is removed in the markup.)
   Shared service-page heroes are untouched — this is scoped to .about-main. */
.about-main .prj-hero__base{clip-path:none;height:calc(var(--line-h) + var(--bleed))}

/* ---------- 4 · FAMILY — warm charcoal veil (softened cinematic) ---------- */
.h .c-family__veil{background:linear-gradient(180deg,rgba(22,20,17,.6),rgba(17,16,14,.84))}

/* ---------- 5 · HOW WE WORK — warm charcoal softened dark beat ---------- */
.h .c-flow{background:#1b1a17}
.h .c-flow::before{background:radial-gradient(120% 80% at 12% -10%,rgba(255,236,0,.06),transparent 55%),
  linear-gradient(180deg,#23211a,#171512)}
.h .c-flow__media{aspect-ratio:4/3}

/* ---------- 7 · INDUSTRIES — LIGHT ground (operator 2026-06-26: break the two-darks with fleet; tiles are photographic so they pop on bone) ---------- */
.h .c-bento{background:var(--bone)}

/* ---------- 8 · WHY ALTIDA — crisp white (NOT sand) + refined reach card ---------- */
.h .c-why{background:var(--white)}
.h .c-reach__card{background:#161412}
.h .c-reach__pin{font-size:1.5rem}

/* history + fleet stay BONE (warmth) from comp-c.css defaults */

/* ============================================================
   POLISH PASS (2026-06-26) — lift "What we offer" + "Our history"
   so they pop off the page (depth + accent + contrast). No element
   changes; lifting what's there. Operator: they read flat/editorial.
   ============================================================ */

/* ---- What we offer — float the diagram as a clean card on a tonal ground ---- */
.h .c-offer{background:radial-gradient(135% 120% at 86% 0%, var(--g-100) 0%, var(--g-50) 58%)}
.h .c-offer--hybrid .c-offer__lede{color:var(--altida-black)}
.h .c-offer--hybrid .c-offer__p{color:var(--g-700)}
.h .c-diff .c-diagram{background:#FBFAF8;background:color-mix(in srgb,var(--altida-white),var(--altida-bone));border:1px solid var(--g-200);border-radius:14px;padding:clamp(1.5rem,2.2vw,2.1rem);box-shadow:0 34px 64px -30px rgba(10,10,10,.36),0 10px 24px -12px rgba(10,10,10,.14)}
.h .c-diff .c-diagram__one{font-size:.9rem;padding:1.3rem;background-image:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,0) 46%);box-shadow:0 14px 26px -8px rgba(10,10,10,.44),inset 0 1px 0 rgba(255,255,255,.14)}
.h .c-diff .c-diagram__tag--on{letter-spacing:.16em}
/* lift the diagram bits a touch — soft dimension + edge definition, no major change */
.h .c-diff .c-diagram__seg{background-image:linear-gradient(180deg,rgba(255,255,255,.4),rgba(10,10,10,.05));box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -1px 0 rgba(10,10,10,.08)}
.h .c-diff .c-diagram__gap{box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -1px 0 rgba(10,10,10,.06)}

/* ---- Our history — pop the timeline (bolder nodes, brighter rail, year accent) ---- */
.h .c-history{background:radial-gradient(120% 95% at 50% -14%, var(--white) 0%, var(--bone) 50%)}
.h .c-history__row::before{height:3px;top:10px;background:linear-gradient(90deg,var(--yellow) 0%,var(--yellow-warm) 55%,var(--g-300) 100%)}
.h .c-mile::before{box-shadow:none}
/* "Today" marker matches the other four — a clean yellow slash on the bone
   backing. (Removed the black backing: a high-contrast black clip-path edge
   read as a jagged/pixelated outline; it's distinguished by its label.) */
.h .c-mile__yr{position:relative;padding-bottom:.55rem;margin-bottom:.55rem}
.h .c-mile__yr::after{content:"";position:absolute;left:0;bottom:0;width:28px;height:3px;background:var(--yellow)}
.h .c-mile p{color:var(--g-700)}

/* ============================================================
   c-keep — "What we keep in-house" REBUILT 2026-06-26 (v2). Light BONE
   section, header on top, the 5 in-house points as OPEN ruled columns
   ("pillars") with a yellow cap each — NO boxes (so it doesn't clash
   with the Fleet cards below), NO rail/nodes (doesn't double History),
   NO stacked hairline-list (doesn't double Why). Bone tone flows with
   the bone History/Fleet neighbours.
   ============================================================ */
/* LIFT: float the 5 OPEN columns on ONE soft surface (the offer's float
   technique — a single panel, NOT the five separate boxes that clashed with
   the Fleet) on a tonal ground; bold yellow slash caps that pop off; stronger
   titles; darker body. The columns stay open (hairline dividers) inside. */
.c-keep{background:radial-gradient(135% 130% at 84% -10%, var(--g-100) 0%, var(--bone) 58%);padding:clamp(4.5rem,8vw,7.5rem) 0}
.c-keep__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.c-keep__head{max-width:760px;margin-bottom:clamp(2.4rem,4vw,3.4rem)}
.c-keep__h{font-family:var(--font-display);font-weight:900;text-transform:uppercase;font-size:clamp(2rem,3.6vw,3.2rem);line-height:.97;letter-spacing:.01em;color:var(--black);margin:1.1rem 0 1.1rem}
.c-keep__lede{font-family:var(--font-body);color:var(--g-600);font-size:1.08rem;line-height:1.65}
.c-keep__cols{display:grid;grid-template-columns:repeat(5,1fr);background:var(--white);border-radius:16px;padding:clamp(2rem,2.6vw,2.7rem) clamp(.6rem,1vw,1rem);box-shadow:0 36px 70px -34px rgba(10,10,10,.32),0 12px 28px -16px rgba(10,10,10,.12)}
.c-keep__col{padding:0 1.7rem;border-left:1px solid var(--g-200)}
.c-keep__col:first-child{border-left:0}
.c-keep__cap{display:block;width:46px;height:25px;background:var(--yellow);clip-path:polygon(0 0,100% 0,0 100%);margin-bottom:1.35rem;filter:drop-shadow(0 5px 7px rgba(10,10,10,.16))}
.c-keep__col h3{font-family:var(--font-sans);font-weight:800;font-size:1.04rem;color:var(--black);margin:0 0 .7rem;line-height:1.25;letter-spacing:.01em}
.c-keep__col p{font-family:var(--font-body);color:var(--g-700);font-size:.92rem;line-height:1.62}
@media(max-width:980px){.c-keep__cols{grid-template-columns:repeat(2,1fr);row-gap:2.6rem;column-gap:0}.c-keep__col{border-left:0;padding:0 1.6rem}.c-keep__col:nth-child(odd){padding-left:0}.c-keep__col:nth-child(even){border-left:1px solid var(--g-300)}}
@media(max-width:560px){.c-keep__cols{grid-template-columns:1fr;row-gap:2.2rem}.c-keep__col{border-left:0!important;padding:0}}

/* ============================================================
   3 · WHO WE ARE — editorial opening (light, type-led). Added
   2026-06-26 restructure: Who-We-Are / family / history / Difference.
   ============================================================ */
.c-intro{background:radial-gradient(120% 115% at 84% -12%,var(--white),var(--bone) 70%);padding:clamp(4.5rem,8vw,7.5rem) 0}
.c-intro__in{max-width:var(--wide);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(2.5rem,5vw,5rem);align-items:start}
.c-intro__h{font-family:var(--font-display);font-weight:900;color:var(--black);font-size:clamp(2.3rem,4.4vw,3.7rem);line-height:1.03;letter-spacing:-.01em;margin-top:1.1rem}
.c-intro__body{max-width:580px}
.c-intro__lede{font-family:var(--font-body);color:var(--g-800);font-size:clamp(1.18rem,1.8vw,1.45rem);line-height:1.5;margin-bottom:1.2rem}
.c-intro__p{font-family:var(--font-body);color:var(--g-600);font-size:1.02rem;line-height:1.68}
.c-intro__tags{display:flex;align-items:center;gap:1rem;margin-top:1.9rem;font-family:var(--font-sans);font-weight:700;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--g-800)}
.c-intro__slash{flex:0 0 auto;width:10px;height:18px;background:var(--yellow);clip-path:polygon(0 100%,52% 0,100% 0,48% 100%)}
@media(max-width:900px){.c-intro__in{grid-template-columns:1fr;gap:1.4rem}.c-intro__h br{display:none}}

/* ============================================================
   4c · THE ALTIDA DIFFERENCE — dark consolidated centerpiece.
   Diagram card styling re-scoped from the old offer to .c-diff
   (sed above); this is the section frame + copy + differentiators.
   ============================================================ */
.c-diff{position:relative;background:#161412;padding:clamp(4.8rem,9vw,8rem) 0;overflow:hidden}
.c-diff::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(110% 78% at 85% -8%,rgba(255,236,0,.06),transparent 55%)}
.c-diff__in{position:relative;z-index:2;max-width:var(--wide);margin:0 auto;padding:0 var(--gutter)}
.c-diff__head{max-width:760px;margin-bottom:clamp(2.6rem,4.2vw,3.8rem)}
.c-diff__h{color:var(--white);font-size:clamp(2.2rem,4vw,3.4rem);margin:1.1rem 0 1rem}
.c-diff__sub{font-family:var(--font-body);color:rgba(255,255,255,.6);font-size:1.05rem;line-height:1.6}
.c-diff__model{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,4.5vw,4.8rem);align-items:center;margin-bottom:clamp(3rem,5.5vw,5rem)}
.c-diff__lede{font-family:var(--font-body);color:rgba(255,255,255,.92);font-size:clamp(1.12rem,1.6vw,1.32rem);line-height:1.56;margin-bottom:1.1rem}
.c-diff__p{font-family:var(--font-body);color:rgba(255,255,255,.64);font-size:1rem;line-height:1.66;margin-bottom:.9rem}
.c-diff__p:last-child{margin-bottom:0}
.h .c-diff .c-diagram{max-width:500px;margin:0 0 0 auto;width:100%}
.c-diff__points{list-style:none;margin:0;padding:clamp(2.2rem,3.5vw,3rem) 0 0;display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.4rem,2.6vw,2.4rem);border-top:1px solid rgba(255,255,255,.12)}
.c-diff__points li{position:relative}
.c-diff__mark{display:block;width:26px;height:13px;background:var(--yellow);clip-path:polygon(0 0,68% 0,100% 100%,32% 100%);margin-bottom:1.1rem}
.c-diff__points h3{font-family:var(--font-sans);font-weight:800;text-transform:uppercase;font-size:.94rem;letter-spacing:.01em;color:var(--white);margin-bottom:.6rem;line-height:1.22}
.c-diff__points p{font-family:var(--font-body);color:rgba(255,255,255,.62);font-size:.875rem;line-height:1.56}
@media(max-width:980px){.c-diff__model{grid-template-columns:1fr;gap:2.2rem}.h .c-diff .c-diagram{margin:0;max-width:560px}.c-diff__points{grid-template-columns:1fr 1fr;gap:1.8rem}}
@media(max-width:560px){.c-diff__points{grid-template-columns:1fr}}

/* ============================================================
   4c · THE ALTIDA DIFFERENCE — cloned homepage wedge (white editorial canvas).
   Goal: behave EXACTLY like the homepage wedge.
   (1) The wedge's PDF-depth single-column layout lives INLINE on the homepage
       (not in homepage.css), so it's replicated here, scoped to .about-main.
   (2) STICKY FIX: `.c section{overflow:hidden}` (above) clips every section in
       the .c wrapper, and an overflow:hidden ANCESTOR silently kills
       position:sticky — so the left anchor scrolled away instead of holding.
       The homepage wedge isn't inside any .c wrapper, so it's never clipped.
       Restore overflow:visible on the wedge → the sticky anchor works.
   (3) REVEAL: the About page now loads /scripts/wedge.js (same script as the
       homepage), which adds .is-revealed to the section/diagram/beats on scroll
       — so NO force-visible here; the reveal animation runs natively, identical
       to the homepage.  Sticky+reveal parity 2026-06-27.
   ============================================================ */
.about-main .v3-wedge__feed{gap:clamp(2.5rem,4vw,3.5rem)}
.about-main .v3-wedge__beats{grid-template-columns:1fr;row-gap:clamp(2rem,3.5vw,3rem)}
.about-main .v3-wedge__beat-body{max-width:68ch}
.about-main .v3-wedge__beats-intro{display:flex;align-items:center;gap:clamp(1rem,2vw,1.5rem);margin:0}
.about-main .v3-wedge__beats-intro .v3-eyebrow{margin:0;flex:none}
.about-main .v3-wedge__beats-rule{flex:1;height:1px;background:var(--hairline-strong)}
.about-main .c .v3-wedge{overflow:visible}


/* ══ 2026-07-01 — entrance choreography for the middle (the deferred
   page-wide motion decision, resolved: the whole site now speaks the
   restrained rise-stagger; the About middle joins it) + contrast bumps
   to the newer readability floor. ══ */
@media (prefers-reduced-motion: no-preference){
  .about-main [data-section-reveal] .ab-r{opacity:0;transform:translateY(18px);
    transition:opacity 620ms var(--ease-mech),transform 620ms var(--ease-mech)}
  .about-main .is-revealed .ab-r{opacity:1;transform:none}
  .about-main .is-revealed .ab-r:nth-child(2){transition-delay:70ms}
  .about-main .is-revealed .ab-r:nth-child(3){transition-delay:140ms}
  .about-main .is-revealed .ab-r:nth-child(4){transition-delay:210ms}
  .about-main .is-revealed .ab-r:nth-child(5){transition-delay:280ms}
}
@media (prefers-reduced-motion: reduce){
  .about-main .ab-r{opacity:1!important;transform:none!important;transition:none!important}
}
.c-tile__meta p{color:rgba(255,255,255,.82)}
.c-plate__meta p{color:rgba(255,255,255,.85)}
.c-family__p{color:rgba(255,255,255,.74)}

/* 2026-07-02 mobile polish.
   · The history timeline stays 2-up below 980px; at phone widths that
     makes ~150px text columns (4-5 words a line) and the odd fifth
     milestone leaves an empty right cell. One column reads properly.
   · The intro tag row wrapped INSIDE tag names ("CRANE" / "HIRE") —
     each separator now binds to its following name in a no-wrap group
     (markup rebind), so wraps happen only between whole tags. */
@media (max-width: 560px) {
  .c-history__row { grid-template-columns: 1fr; }
}
.c-intro__tagg { display: inline-flex; align-items: center; gap: 1rem; white-space: nowrap; }
.c-intro__tags { flex-wrap: wrap; row-gap: 0.6rem; }