/* ============================================================
   ALTIDA — Homepage v3
   Synthesis: best of v1/v2 + Direction A/B/C + positioning brief.
   - Black nav OVER hero (image bleeds into header — C pattern)
   - Slanted yellow ribbons on hero (parallelogram corners — C)
   - Two-service split with Crane + Transport at parity (B)
   - Wedge with diagram bar — single-vendor argument (B, refined)
   - 4-up specialist fleet film strip (B + v1 spec rows)
   - Editorial 4-USP "Why Altida" list (USPs operator-supplied)
   - 3-card "Get a Quote" pattern (C, hybridised with v1's yellow band)
   ============================================================ */

/* Pull Inter Light (300) — the design system's tokens.css loads 400+ only,
   and the split-card titles want the refined light-weight tracked-caps
   feel of the marketing-tile lockup. */
/* Inter 300 now covered by the self-hosted Inter variable font in tokens.css. */

:root {
  --gutter: clamp(1rem, 4vw, 3.5rem);
  --section-pad-y: clamp(80px, 10vw, 144px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body.v3 {
  margin: 0;
  background: var(--altida-white);
  color: var(--ink-primary);
  font-family: var(--font-body);
  overflow-x: clip;
}

.v3-container { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--gutter); }
section { padding-block: var(--section-pad-y); }

.icon { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; }

/* ─── Eyebrow + section title pattern ─────────────────────── */
.v3-eyebrow {
  font-family: var(--font-sans); font-weight: 700; font-size: var(--fs-12);
  letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-primary);
  display: inline-flex; align-items: center; gap: 14px;
  margin: 0 0 22px;
}
.v3-eyebrow__rule {
  width: 36px; height: 4px; background: var(--altida-yellow); display: inline-block;
}
.v3-eyebrow--light { color: var(--altida-white); }
.v3-eyebrow--inverse { color: var(--altida-black); }
.v3-eyebrow__rule--inverse { background: var(--altida-pure-black); }

/* ─── Buttons ──────────────────────────────────────────────── */
.v3-btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 16px 24px; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-mech),
              background var(--dur-fast) var(--ease-mech),
              color var(--dur-fast) var(--ease-mech),
              box-shadow var(--dur-fast) var(--ease-mech);
}
.v3-btn--lg { padding: 20px 30px; font-size: 14px; }

.v3-btn--solid { background: var(--altida-yellow); color: var(--altida-black); }
.v3-btn--solid:hover {
  background: var(--altida-white);
  box-shadow: 0 12px 32px -8px rgba(255, 236, 0, 0.45);
}

.v3-btn--ghost {
  background: transparent; color: var(--altida-white);
  border: 2px solid rgba(255,255,255,0.45);
}
.v3-btn--ghost:hover { border-color: var(--altida-white); background: rgba(255,255,255,0.06); }

.v3-btn--ghost-light {
  background: transparent; color: var(--altida-white);
  border: 2px solid var(--altida-white);
}
.v3-btn--ghost-light:hover { background: var(--altida-yellow); color: var(--altida-black); border-color: var(--altida-yellow); }

.v3-btn--dark { background: var(--altida-black); color: var(--altida-white); }
.v3-btn--dark:hover { background: var(--grey-900); }

.v3-btn .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.v3-btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   1. UTILITY BAR
   ============================================================ */
.v3-util {
  background: var(--altida-pure-black);
  color: var(--grey-300);
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  border-bottom: 1px solid var(--grey-800);
  position: relative; z-index: 25;
}
.v3-util__inner {
  max-width: var(--container-wide); margin: 0 auto;
  padding: 10px var(--gutter);
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.v3-util__left, .v3-util__right { display: flex; align-items: center; gap: 16px; }
.v3-util a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.v3-util a:hover { color: var(--altida-yellow); }
.v3-util__sep { display: inline-block; width: 1px; height: 12px; background: var(--grey-700); }
.v3-util__pulse {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px;
}
.v3-util__pulse i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--altida-yellow);
  box-shadow: 0 0 0 0 rgba(255, 236, 0, 0.5);
  animation: v3-pulse 2s infinite;
}
@keyframes v3-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255,236,0,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(255,236,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,236,0,0); }
}
.v3-util__phone {
  /* Matches the email links on the right exactly: same weight, tracking,
     colour. Phone-specific extras kept: tabular numerals (so the number
     never reflows on hover) and explicit text-decoration reset. */
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: inherit;
  text-decoration: none;
  font-feature-settings: 'tnum' 1;
}
.v3-util__phone:hover { color: var(--altida-yellow); }

/* ============================================================
   2. NAV (overlays the hero)
   ============================================================ */
.v3-nav {
  /* top: 32px lets the yellow flags overlap the util bar's bottom edge.
     .v3-util sits at higher z-index (25) so it covers the overlap, leaving
     the visual edge clean at util-bar-bottom on every viewport — no gap
     between black bar and yellow flag at any breakpoint. */
  position: absolute; top: 32px; left: 0; right: 0; z-index: 20;
  color: var(--altida-white);
  transition: background var(--dur-base) var(--ease-mech),
              backdrop-filter var(--dur-base) var(--ease-mech),
              border-color var(--dur-base) var(--ease-mech);
}
/* Yellow flag behind the wordmark — geometry lifted from Direction C's
   .altC2__hero-slash--tl: 200 px × 80 px box, polygon(0 0, 100% 0, 60% 100%, 0 100%)
   gives an 80-px-wide 45° slant.
   Adapted for v3: flag width stretches with the centered-container offset on
   wide viewports so it always reaches the wordmark, but the slant itself stays
   FIXED at 80 px wide via calc() in the clip-path. */
.v3-nav::before {
  content: '';
  position: absolute; top: 0; bottom: 0; left: 0;
  width: max(285px, calc((100vw - var(--container-wide)) / 2 + 285px));
  background: var(--altida-yellow);
  clip-path: polygon(0 0, 100% 0, calc(100% - 56px) 100%, 0 100%);
  z-index: 0;
  pointer-events: none;
}
.v3-nav__inner {
  max-width: var(--container-wide); margin: 0 auto;
  padding: 22px var(--gutter);
  /* Reserve right-side space for the absolutely-positioned CTA flag. */
  padding-right: calc(var(--gutter) + 240px);
  display: grid; grid-template-columns: auto 1fr auto auto;
  gap: 36px; align-items: center;
  position: relative; z-index: 1;
}
.v3-nav__brand { position: relative; display: inline-flex; }
.v3-nav__brand-img { display: block; height: 30px; width: auto; }
/* Default: black wordmark over the yellow nav flag */
.v3-nav__brand-img--scrolled { display: none; }
/* Scrolled: solid black nav, swap to white wordmark */
.v3-nav.is-scrolled .v3-nav__brand-img--default { display: none; }
.v3-nav.is-scrolled .v3-nav__brand-img--scrolled { display: block; }

.v3-nav__links {
  display: flex; gap: clamp(16px, 2vw, 28px); list-style: none; margin: 0; padding: 0;
  justify-content: center;
}
.v3-nav__links a {
  position: relative;
  font-family: var(--font-sans); font-weight: 600;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  color: rgba(255,255,255,0.85); text-decoration: none;
  padding: 8px 2px;
  transition: color var(--dur-fast) var(--ease-mech);
}
.v3-nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 2px; background: var(--altida-yellow);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-mech);
}
.v3-nav__links a:hover { color: var(--altida-white); }
.v3-nav__links a:hover::after,
.v3-nav__links a[aria-current="page"]::after { transform: scaleX(1); }

/* ── DROPDOWN — Transport sub-services (desktop nav) ────────────────
   Hover/focus-within reveal of a small dark glass panel below the
   parent link. Items are sentence-case + lighter tracking to differ
   from the uppercase parent links. Yellow on hover matches the brand
   accent already used on the drawer + util-bar. */
.v3-nav__item--has-dropdown { position: relative; }
/* Caret is an inline-block child of the trigger <a> so the <a> stays
   `inline` (same baseline as its sibling nav links). Using inline-flex
   on the trigger created a baseline shift that put the Transport label
   visibly out of line with the others. */
.v3-nav__caret {
  display: inline-block;
  vertical-align: middle;
  width: 5px; height: 5px;
  margin-left: 8px;
  margin-top: -2px; /* optical centre vs uppercase x-height */
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: center;
  transition: transform var(--dur-fast) var(--ease-mech);
}
.v3-nav__item--has-dropdown:hover .v3-nav__caret,
.v3-nav__item--has-dropdown:focus-within .v3-nav__caret {
  transform: rotate(225deg);
}
.v3-nav__dropdown {
  position: absolute;
  top: calc(100% + 10px);
  left: -16px;
  min-width: 220px;
  margin: 0; padding: 8px 0;
  list-style: none;
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  /* Square corners by default — Altida design system rule. */
  border-radius: 0;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.32);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-mech),
              transform var(--dur-fast) var(--ease-mech),
              visibility 0s linear var(--dur-fast);
}
/* Invisible hover bridge across the gap between the trigger and the panel, so
   moving the pointer down to a sub-link keeps :hover and the menu doesn't
   collapse before it can be clicked. Only captures while the panel is open
   (the panel is pointer-events:none when hidden, so this can't block the link
   underneath at rest). */
.v3-nav__dropdown::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: -12px; height: 16px;
}
.v3-nav__item--has-dropdown:hover .v3-nav__dropdown,
.v3-nav__item--has-dropdown:focus-within .v3-nav__dropdown {
  opacity: 1; visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity var(--dur-fast) var(--ease-mech),
              transform var(--dur-fast) var(--ease-mech),
              visibility 0s linear 0s;
}
.v3-nav__dropdown li { margin: 0; }
.v3-nav__dropdown a {
  display: block;
  padding: 10px 20px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-mech),
              background var(--dur-fast) var(--ease-mech);
}
.v3-nav__dropdown a::after { display: none; }
.v3-nav__dropdown a:hover,
.v3-nav__dropdown a:focus-visible {
  color: var(--altida-yellow);
  background: rgba(255, 255, 255, 0.05);
}
@media (prefers-reduced-motion: reduce) {
  .v3-nav__caret,
  .v3-nav__dropdown { transition: none !important; }
}

/* Actions block: absolutely-positioned full-height container holding both
   the phone flag (black) and the CTA flag (yellow), nesting via shared
   56 px slant — phone sits left, CTA sits right, both span nav top-to-bottom
   exactly like the logo flag (.v3-nav::before) on the left. */
.v3-nav__actions {
  position: absolute;
  top: 0; bottom: 0;
  /* Initial position only — homepage.js's alignNav() overrides this at
     runtime to align the CTA's top-right corner with the transport
     email's right edge in the util bar above. */
  right: var(--gutter);
  display: flex;
  align-items: stretch;
  gap: 0;
}
.v3-nav__phone {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: stretch;
  height: 100%;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--altida-white); text-decoration: none;
  font-feature-settings: 'tnum' 1;
  background: var(--altida-pure-black);
  padding-inline: 44px;
  /* Pull the next sibling (CTA) leftward by the slant width so the phone's
     bottom-left-to-top-right slant nests exactly with the CTA's
     top-left-to-bottom-left slant. */
  margin-right: -56px;
  clip-path: polygon(56px 0, 100% 0, calc(100% - 56px) 100%, 0 100%);
  transition: background var(--dur-fast) var(--ease-mech),
              color var(--dur-fast) var(--ease-mech),
              transform var(--dur-fast) var(--ease-mech);
}
.v3-nav__phone:hover { background: var(--altida-white); color: var(--altida-black); transform: translateY(-1px); }
.v3-nav__phone:hover .icon { color: var(--altida-black); }
.v3-nav__phone .icon { color: var(--altida-yellow); width: 14px; height: 14px; transition: color var(--dur-fast) var(--ease-mech); }

.v3-nav__cta {
  /* Yellow flag sits in flex flow inside the absolutely-positioned actions
     container; height inherits from the container (full nav span). Slant
     direction matches the logo flag exactly: both edges slant down-left. */
  display: inline-flex; align-items: center; gap: 10px;
  align-self: stretch;
  height: 100%;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--altida-yellow); color: var(--altida-black);
  padding-inline: 44px;
  clip-path: polygon(56px 0, 100% 0, calc(100% - 56px) 100%, 0 100%);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-mech), transform var(--dur-fast) var(--ease-mech);
}
.v3-nav__cta:hover { background: var(--altida-white); transform: translateY(-1px); }
.v3-nav__cta .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.v3-nav__cta:hover .arrow { transform: translateX(3px); }

/* When scrolled past hero — solid black bar, no yellow flag, white wordmark.
   Slides down from above the viewport so the appearance is smooth, not an
   abrupt position-jump (CSS can't transition position: absolute → fixed). */
.v3-nav.is-scrolled {
  position: fixed; top: 0;
  background: var(--altida-pure-black);
  backdrop-filter: none;
  border-bottom: 1px solid var(--grey-800);
  box-shadow: 0 12px 28px -12px rgba(0,0,0,0.6);
  animation: v3-nav-slide-in 320ms var(--ease-mech) both;
}
.v3-nav.is-scrolled::before { display: none; }
.v3-nav.is-scrolled .v3-nav__inner { padding-block: 16px; }
@keyframes v3-nav-slide-in {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .v3-nav.is-scrolled { animation: none; }
}

.v3-nav__burger {
  display: none; background: transparent; border: 0;
  width: 36px; height: 32px; cursor: pointer;
  padding: 6px; gap: 5px;
  flex-direction: column; justify-content: center;
}
.v3-nav__burger span {
  display: block; height: 2px; background: var(--altida-white);
  transition: transform var(--dur-fast) var(--ease-mech), opacity var(--dur-fast) var(--ease-mech);
}
.v3-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.v3-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.v3-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ────────────────────────────────────────────────────────────
   MOBILE DRAWER
   Fixed slide-in panel from the right with backdrop. Lives outside
   .v3-nav so transforms and backdrop-filter don't trap it.
   ──────────────────────────────────────────────────────────── */
.v3-drawer-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 90;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-mech);
}
.v3-drawer-backdrop.is-open { opacity: 1; }

.v3-drawer[hidden] { visibility: hidden; }  /* display:flex below overrides [hidden]'s
  display:none, leaving off-screen links focusable (axe aria-hidden-focus / keyboard trap).
  visibility removes them from tab order + a11y tree; JS re-adds hidden only after the
  slide-out transition ends, so open/close animation is untouched. */
.v3-drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(360px, 88vw);
  background: var(--altida-pure-black);
  color: var(--altida-white);
  z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 360ms var(--ease-mech);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  box-shadow: -24px 0 60px rgba(0,0,0,0.5);
}
.v3-drawer.is-open { transform: translateX(0); }

.v3-drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 24px;
  border-bottom: 1px solid var(--grey-800);
  flex-shrink: 0;
}
.v3-drawer__brand img { display: block; height: 28px; width: auto; }
.v3-drawer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  border: 1px solid var(--grey-800);
  color: var(--altida-white);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-mech),
              color var(--dur-fast) var(--ease-mech);
}
.v3-drawer__close:hover { border-color: var(--altida-yellow); color: var(--altida-yellow); }

.v3-drawer__nav {
  padding: 12px 0;
  flex: 1 1 auto;
}
.v3-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
/* Drawer nav link — [yellow leading rule] [label] [yellow chevron].
   Brand-grammar-aligned: the leading rule mirrors the eyebrow pattern
   used across the site. Press state extends the rule, brightens the
   chevron, slides it right, and tints the label yellow. */
.v3-drawer__nav a {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 24px;
  text-decoration: none;
  color: var(--altida-white);
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 18px; letter-spacing: 0.01em;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  transition: color var(--dur-fast) var(--ease-mech);
}
.v3-drawer__nav a::before {
  content: '';
  width: 12px; height: 1px;
  background: var(--altida-yellow);
  flex-shrink: 0;
  transition: width var(--dur-fast) var(--ease-mech);
}
.v3-drawer__label { flex: 1; }
.v3-drawer__arrow {
  color: rgba(255, 236, 0, 0.45);
  font-size: 18px; line-height: 1;
  transition: color var(--dur-fast) var(--ease-mech),
              transform var(--dur-fast) var(--ease-mech);
}
.v3-drawer__nav a:hover,
.v3-drawer__nav a:focus-visible,
.v3-drawer__nav a:active {
  color: var(--altida-yellow);
  background: transparent;
  outline: none;
}
.v3-drawer__nav a:hover::before,
.v3-drawer__nav a:focus-visible::before,
.v3-drawer__nav a:active::before { width: 28px; }
.v3-drawer__nav a:hover .v3-drawer__arrow,
.v3-drawer__nav a:focus-visible .v3-drawer__arrow,
.v3-drawer__nav a:active .v3-drawer__arrow {
  color: var(--altida-yellow);
  transform: translateX(4px);
}

/* ── DROPDOWN — Transport sub-services (mobile drawer, nested) ──────
   Always-visible nested children indented under Transport. Smaller
   font + dimmer text signals subordinate hierarchy without needing
   an expand/collapse interaction. Inherits the existing drawer-link
   reveal (yellow on hover / focus) via the shared .v3-drawer__nav a
   selector; this block only ADDS the indent + scale-down treatment. */
.v3-drawer__children {
  list-style: none;
  margin: 0; padding: 0;
  background: rgba(255, 255, 255, 0.02);
}
.v3-drawer__children > li > a {
  padding-left: 56px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.v3-drawer__children > li:last-child > a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.v3-drawer__children > li > a::before {
  display: none; /* no yellow leading-rule on nested items — visual
                    differentiation from parent rows */
}
.v3-drawer__children > li > a .v3-drawer__arrow {
  /* Hide the arrow on nested children — the indent + size step
     already signals "this is a subordinate link"; a dim 32 %-yellow
     arrow read as noise below perceptual threshold per design-reviewer
     2026-06-15 delta. */
  display: none;
}
.v3-drawer__num {
  font-family: var(--font-sans);
  font-weight: 600; font-size: 11px;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--altida-yellow);
  font-variant-numeric: tabular-nums;
  min-width: 28px;
}

.v3-drawer__contact {
  padding: 20px 24px 12px;
  border-top: 1px solid var(--grey-800);
  display: grid; gap: 14px;
  flex-shrink: 0;
}
.v3-drawer__line {
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: var(--altida-white);
}
.v3-drawer__line-label {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--grey-400);
}
.v3-drawer__line-value {
  font-family: var(--font-sans); font-weight: 600; font-size: 16px;
  font-feature-settings: 'tnum' 1;
  transition: color var(--dur-fast) var(--ease-mech);
}
.v3-drawer__line:hover .v3-drawer__line-value { color: var(--altida-yellow); }

.v3-drawer__cta {
  /* Content-sized + left-aligned, not a full-bleed slab. Sized to its
     label + arrow so it reads as a deliberate CTA, not a wall of yellow.
     Vertical padding 12 px (not 14) so the 48 px height matches the hero
     CTAs — the 20 px arrow inflates the flex row by ~4 px vs the hero's
     inherited 12 px arrow. */
  display: inline-flex; align-items: center; gap: 14px;
  align-self: flex-start;
  margin: 16px 24px 28px;
  padding: 12px 22px;
  background: var(--altida-yellow);
  color: var(--altida-pure-black);
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-mech), color var(--dur-fast) var(--ease-mech);
}
.v3-drawer__cta:hover { background: var(--altida-pure-black); color: var(--altida-yellow); outline: 1px solid var(--altida-yellow); }
.v3-drawer__cta-arrow { font-size: 20px; transition: transform var(--dur-fast) var(--ease-mech); }
.v3-drawer__cta:hover .v3-drawer__cta-arrow { transform: translateX(4px); }

/* ── DRAWER REFINEMENT (2026-07-09 v2 — operator: the display-type/flag/full-screen
   version was "too much... in your face". This keeps the ORIGINAL slim panel and
   type, with only quiet improvements: a real close X on the span-variant markup
   (19 pages never drew one), the children's tint-slab swapped for a subtle yellow
   edge rule, and a soft reduced-motion-gated entrance stagger.) */

/* Close X for the span-variant close button; the homepage SVG variant has no
   child spans so this cannot collide. */
.v3-drawer__close { position: relative; }
.v3-drawer__close > span {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 2px; background: currentColor;
}
.v3-drawer__close > span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.v3-drawer__close > span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }

/* Children: quiet yellow edge rule instead of the tinted slab. */
.v3-drawer__nav .v3-drawer__children { background: transparent; margin: 0 0 4px 24px; border-left: 2px solid var(--altida-yellow); }
.v3-drawer__children > li > a { padding: 12px 20px 12px 24px; border-bottom: 0; }
.v3-drawer__children > li:last-child > a { border-bottom: 0; }

/* Soft entrance stagger — compositor-only, reduced-motion gated. */
@media (prefers-reduced-motion: no-preference) {
  .v3-drawer__nav > ul > li,
  .v3-drawer__contact,
  .v3-drawer__cta { opacity: 0; transform: translateY(10px); }
  .v3-drawer.is-open .v3-drawer__nav > ul > li,
  .v3-drawer.is-open .v3-drawer__contact,
  .v3-drawer.is-open .v3-drawer__cta {
    opacity: 1; transform: none;
    transition: opacity 360ms var(--ease-mech), transform 360ms var(--ease-mech);
  }
  .v3-drawer.is-open .v3-drawer__nav > ul > li:nth-child(1) { transition-delay: 40ms; }
  .v3-drawer.is-open .v3-drawer__nav > ul > li:nth-child(2) { transition-delay: 70ms; }
  .v3-drawer.is-open .v3-drawer__nav > ul > li:nth-child(3) { transition-delay: 100ms; }
  .v3-drawer.is-open .v3-drawer__nav > ul > li:nth-child(4) { transition-delay: 130ms; }
  .v3-drawer.is-open .v3-drawer__nav > ul > li:nth-child(5) { transition-delay: 160ms; }
  .v3-drawer.is-open .v3-drawer__nav > ul > li:nth-child(6) { transition-delay: 190ms; }
  .v3-drawer.is-open .v3-drawer__contact { transition-delay: 220ms; }
  .v3-drawer.is-open .v3-drawer__cta { transition-delay: 250ms; }
}

/* Scroll lock for body when drawer open */
body.v3-drawer-open { overflow: hidden; }

/* Legacy mobile nav (kept-class fallback if anything still references it) */
.v3-nav__mobile {
  background: var(--altida-pure-black); color: var(--altida-white);
  padding: 24px var(--gutter);
}
.v3-nav__mobile ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.v3-nav__mobile a {
  display: block; padding: 14px 0; text-decoration: none;
  font-family: var(--font-sans); font-weight: 700; font-size: 16px;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--altida-white);
  border-bottom: 1px solid var(--grey-800);
}
.v3-nav__mobile a:hover { color: var(--altida-yellow); }

/* ============================================================
   3. HERO — image bleeds into nav, slanted yellow ribbons
   ============================================================ */
.v3-hero {
  position: relative;
  /* Hero starts at y = utility-bar height (35px) + margin-top (-86px) = -51px.
     To reach the viewport bottom we need 100dvh + 51px. dvh (dynamic
     viewport height) so the bottom yellow strip stays above iOS Safari's
     URL bar at scroll-top — vh would put it under the URL bar. */
  min-height: max(820px, calc(100dvh + 51px));
  background: var(--altida-pure-black);
  color: var(--altida-white);
  overflow: hidden; isolation: isolate;
  padding: 0;
  display: grid; grid-template-rows: 1fr auto;
  align-items: center; /* free space splits 50/50 above and below content; padding-top vs padding-bottom differential (153px) compensates for the nav covering the hero's upper 161px and the eyebrow's 8px internal offset → top-gap = bottom-gap. */
  margin-top: -86px; /* tuck nav over the hero */
}
.v3-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.v3-hero__bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center center;
  /* Trial 2026-05-11: image opacity lifted (0.72 → 0.82) so the photo
     shows through more. Paired with lighter overlay below. */
  opacity: 0.82;
}
.v3-hero__overlay {
  position: absolute; inset: 0;
  /* Trial 2026-05-11: lighter overall overlay (the photo breathes more)
     plus a dedicated horizontal nav-band darkness at the top so the
     centralised nav reads against bright skies / cloud backgrounds.
     Layer order (top of stack = first):
     1) Nav-band — 50% black at very top, fades to transparent by 15%
        down. Targets only the nav region (~86px tall).
     2) Diagonal — top-left dark, bottom-right near-transparent. Adds
        depth without flattening the photo.
     3) Bottom anchor — vertical fade so the yellow strip + service
        tiles below have something to land against.
     Previous: 115deg 85/45/10 + 0deg 55/0 (no dedicated nav band). */
  background:
    linear-gradient(180deg, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0)    15%),
    linear-gradient(115deg, rgba(0,0,0,0.70) 0%, rgba(0,0,0,0.28) 50%, rgba(0,0,0,0.05) 100%),
    linear-gradient(0deg,   rgba(0,0,0,0.45) 0%, rgba(0,0,0,0)    55%);
}

/* Mobile readability restoration 2026-05-11 (revised) — geometry-driven
   only. The service-card veil needs heavier values on mobile because
   the cards collapse from 100vh (desktop) to aspect-ratio 4/3 (mobile),
   so bottom-anchored text occupies a much larger PROPORTION of card
   height, ending up over a lighter band of the percentage gradient.
   The HERO does NOT need a mobile override — it stays 100vh on mobile,
   so the gradient-vs-text-position relationship is the same as desktop.
   Hero now follows desktop trial values on both viewports for visual
   parity with the service cards (operator pull-up 2026-05-11: hero felt
   "a fair bit darker" than service cards on mobile because the hero
   had a mobile-specific heaviness restoration the service cards didn't
   structurally need). */
@media (max-width: 860px) {
  .v3-split__veil {
    background: linear-gradient(180deg, rgba(10,10,10,0.25) 0%, rgba(10,10,10,0.55) 50%, rgba(10,10,10,0.85) 100%);
  }
}
.v3-hero__grain {
  position: absolute; inset: 0; 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='n'><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.18 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: overlay; opacity: 0.45;
}

/* Bottom assembly wrapper — the reveal unit for slash + strip. position:relative
   re-anchors the absolute ribbon to this box (its bottom edge == hero bottom, same
   place as before); fading the WRAPPER composites both yellows as one group. */
.v3-hero__base { position: relative; }

/* Slanted yellow ribbon — bottom-right only. (Top-left moved into the nav
   as ::before, so the yellow flag travels behind the wordmark.) */
.v3-hero__ribbon {
  position: absolute; z-index: 2;
  background: var(--altida-yellow);
  pointer-events: none;
}
.v3-hero__ribbon--br {
  bottom: 0; right: 0;
  width: clamp(220px, 28vw, 360px);
  --rib-h: clamp(72px, 7vw, 100px);
  height: var(--rib-h);
  /* Left-edge slant matched EXACTLY to the nav flags. The nav flag + CTA flag
     slant 56px over the nav's rendered HEIGHT, so the angle = atan(56/navH).
     navH changes with the nav's responsive padding + burger size: 74px desktop,
     64px ≤1024, 76px ≤640. --nav-slant carries 56/navH per breakpoint and the
     offset = ribbon height × that ratio — so the ribbon angle is identical to
     the nav's at every width, whatever the ribbon's own height. */
  --nav-slant: 0.756757; /* 56 / 74 (desktop nav height) */
  clip-path: polygon(calc(var(--rib-h) * var(--nav-slant)) 0, 100% 0, 100% 100%, 0 100%);
}

.v3-hero__content {
  position: relative; z-index: 3;
  max-width: var(--container-wide); margin: 0 auto;
  width: 100%;
  /* padding-top and padding-bottom scale in parallel (24vh) and stay 153px apart so
     visible top-gap = bottom-gap regardless of viewport height. */
  padding: clamp(180px, 24vh, 240px) var(--gutter) clamp(27px, calc(24vh - 153px), 87px);
}

/* Hero H1 — Lovelo display title carrying the brand statement. Owner
   pull-up 2026-05-11 v2: the previous "promote-the-eyebrow-to-H1"
   attempt looked editorial / WordPress-tier because eyebrow vocabulary
   (small caps + tracking + small size) isn't designed to anchor a hero.
   This restores proper display vocabulary: Lovelo Black at hero size,
   uppercase, tight line-height, with the brand-yellow ampersand as the
   visual accent that holds the two service-name halves together. No
   eyebrow above — title alone carries SEO + brand statement; no
   redundant supporting label. */
.v3-hero__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 6.6vw, 88px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--altida-white);
  margin: 0 0 32px;
  text-wrap: balance;
}
.v3-hero__amp {
  font-family: var(--font-display); font-weight: 900;
  color: var(--altida-yellow);
  font-style: normal;
  display: inline-block;
  padding-right: 0.04em;
}

.v3-hero__sub {
  font-family: var(--font-body); font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.5; color: rgba(255,255,255,0.9);
  max-width: 600px; margin: 0 0 36px;
}
.v3-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
/* Wiggle — lifted verbatim from c-2it.co.uk (.hero-actions .btn-gold:
   animation:wiggle 10s ease infinite). Two bursts per 10 s cycle: a
   quick 2.5° tremor at 45–48 % and a bigger 5° shake at 91–95 %. */
@keyframes v3-wiggle {
  0%, 44%, 49%, 90%, 96%, 100% { transform: rotate(0); }
  45% { transform: rotate(2.5deg); }
  46% { transform: rotate(-2.5deg); }
  47% { transform: rotate(2.5deg); }
  48% { transform: rotate(-2.5deg); }
  91% { transform: rotate(5deg); }
  92% { transform: rotate(-5deg); }
  93% { transform: rotate(5deg); }
  94% { transform: rotate(-5deg); }
  95% { transform: rotate(5deg); }
}
.v3-hero__actions .v3-btn--solid {
  animation: v3-wiggle 10s ease infinite;
  transform-origin: center;
}
@media (prefers-reduced-motion: reduce) {
  .v3-hero__actions .v3-btn--solid { animation: none; }
}

/* Hero CTA label — desktop reads "Get in touch", mobile reads "Get a quote".
   Defaults to desktop label; mobile label hidden until the 860 px stack point. */
.v3-hero__cta-text--mobile { display: none; }

/* Bottom yellow strip — service category anchors */
.v3-hero__strip {
  position: relative; z-index: 3;
  background: var(--altida-yellow); color: var(--altida-black);
  padding: 16px var(--gutter);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 3vw, 48px);
  justify-content: center; align-items: center;
  list-style: none; margin: 0;
  font-family: var(--font-sans); font-weight: 700;
  font-size: var(--fs-12); letter-spacing: var(--track-wider);
  text-transform: uppercase;
}
.v3-hero__strip li { display: inline-flex; align-items: center; gap: 12px; }
.v3-hero__strip-mark {
  width: 6px; height: 6px; background: var(--altida-black);
  transform: rotate(45deg); flex-shrink: 0;
}

/* hero text reveal */
[data-reveal] {
  opacity: 0; transform: translate3d(0, 18px, 0);
  transition: opacity 700ms var(--ease-mech), transform 700ms var(--ease-mech);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================
   4. TWO-SERVICE SPLIT (Crane + Transport at parity)
   ============================================================ */
.v3-split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  background: var(--altida-pure-black);
  padding: 0;
}
.v3-split__card {
  position: relative; overflow: hidden;
  aspect-ratio: 7/8;
  isolation: isolate;
  cursor: default;
}
/* Desktop: Crane + Transport photo cards fill the viewport so the row reads as a
   single full-height "screen" between hero and the bottom band. Maintenance +
   Paintshop keep their auto-sized band shape beneath. */
@media (min-width: 861px) {
  .v3-split__card:not(.v3-split__card--maintenance):not(.v3-split__card--paintshop) {
    aspect-ratio: auto;
    height: 100vh;
  }
}
.v3-split__media { position: absolute; inset: 0; z-index: 0; }
.v3-split__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(0.4) brightness(0.7);
  transition: transform 900ms var(--ease-mech), filter 400ms var(--ease-mech);
}
.v3-split__card:hover .v3-split__media img {
  transform: scale(1.03);
  filter: grayscale(0) brightness(0.85);
}
.v3-split__veil {
  position: absolute; inset: 0; z-index: 1;
  /* Trial v2 2026-05-11: midpoint between the original (25/55/85) and the
     first trial (0/12/70). Joe felt the first trial pulled too far —
     this lands in-between for owner / Joe / readability balance. */
  background: linear-gradient(180deg, rgba(10,10,10,0.12) 0%, rgba(10,10,10,0.33) 50%, rgba(10,10,10,0.78) 100%);
}
/* Content sits as a bottom-anchored box. Auto-sized to its content. */
.v3-split__content {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(24px, 2.8vw, 44px) clamp(32px, 4vw, 64px);
  display: flex; flex-direction: column;
  color: var(--altida-white);
}
.v3-split__tag {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--altida-yellow);
  margin: 0 0 16px;
}
/* Inter Light + wide tracking — matches the delicate "CRANE HIRE" lockup on
   the marketing tile (refined, not heavy). */
.v3-split__title {
  font-family: var(--font-sans); font-weight: 300;
  font-size: clamp(32px, 4vw, 64px); line-height: 1.1;
  letter-spacing: 0.22em; text-transform: uppercase;
  margin: 0 0 24px;
}
.v3-split__sub {
  font-family: var(--font-body); font-size: 16px; line-height: 1.55;
  color: rgba(255,255,255,0.85);
  max-width: 460px; margin: 0 0 28px;
}
.v3-split__link {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--altida-yellow); text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--altida-yellow);
  align-self: flex-start;
  transition: color var(--dur-fast), border-color var(--dur-fast);
}
.v3-split__link:hover { color: var(--altida-white); border-color: var(--altida-white); }
.v3-split__link .arrow { transition: transform var(--dur-fast) var(--ease-mech); }
.v3-split__link:hover .arrow { transform: translateX(4px); }

/* Maintenance + Paintshop — sub-card horizontal bands.
   No photo bg, no aspect-ratio. Each takes one column of the parent 2-col
   grid on desktop; collapses to stacked full-width on mobile. Content is
   top-aligned so the Workshop heading and the Paintshop heading sit at the
   same Y (operator pull-up 2026-05-11: heading-row alignment between the
   two cards). */
.v3-split__card--maintenance,
.v3-split__card--paintshop {
  aspect-ratio: auto;
  background: var(--altida-pure-black);
  color: var(--altida-white);
  padding: clamp(24px, 2.8vw, 44px) clamp(32px, 4vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: clamp(220px, 22vw, 320px);
}
.v3-split__card--maintenance .v3-split__sub {
  max-width: 720px;
}
.v3-split__card--maintenance .v3-split__link {
  align-self: flex-start;
}

/* Workshop + Paintshop are sub-services beneath the HGV maintenance
   category (signalled by the per-card "HGV maintenance" eyebrow). On
   DESKTOP, titles read smaller than the peer service titles above
   (Crane Hire / Transport) because they are a slightly lesser service
   offered (operator direction 2026-05-11). On MOBILE, the side-by-side
   comparison disappears (cards stack), so titles return to standard
   v3-split__title size. */
@media (min-width: 861px) {
  .v3-split__card--maintenance .v3-split__title,
  .v3-split__card--paintshop .v3-split__title {
    font-size: clamp(20px, 2.4vw, 40px);
    letter-spacing: 0.2em;
  }
}

/* Paintshop is a placeholder — service not live yet. Hairline yellow rule
   at the column boundary separates it from Maintenance without a heavy
   background contrast. */
.v3-split__card--paintshop {
  position: relative;
}
@media (min-width: 861px) {
  .v3-split__card--paintshop::before {
    content: "";
    position: absolute;
    top: clamp(24px, 2.8vw, 44px);
    bottom: clamp(24px, 2.8vw, 44px);
    left: 0;
    width: 1px;
    background: rgba(255, 236, 0, 0.35);
  }
}

/* Coming-soon pill — filled yellow tag, sits above the Paintshop title.
   On-brand re-use of the existing yellow accent (vs a chintzy diagonal
   stamp) so the not-yet-live status reads without breaking the row's
   visual restraint. */
.v3-split__tag--soon {
  background: var(--altida-yellow);
  color: var(--altida-pure-black);
  align-self: flex-start;
  padding: 6px 12px;
  margin: 0 0 16px;
}

/* ============================================================
   5. THE ALTIDA DIFFERENCE (wedge with diagram)
   ============================================================ */
/* THE ALTIDA DIFFERENCE — anchored editorial chapter on a white canvas.
   Left: sticky title block holds the section together. Right: comparison
   diagram + compact 2-col capability grid + closer. Yellow rule on the
   section's far-left edge anchors the brand without competing with type. */
.v3-wedge {
  position: relative;
  background: var(--altida-white);
  color: var(--altida-black);
  isolation: isolate;
  /* Wedge sits above Recent Work (also white). Bottom padding is full
     section-default minus a touch (Recent Work has no top padding so
     this single value is the entire gap between wedge content and the
     spotlight image). */
  padding-bottom: clamp(72px, 9vw, 128px);
}
/* Yellow vertical edge rule — full section height, brand-anchor that
   doesn't shout. */
.v3-wedge__edge {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 1;
  width: 4px;
  background: var(--altida-yellow);
  pointer-events: none;
}

.v3-wedge__container {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 5fr 7fr;
  gap: clamp(48px, 6vw, 120px);
  align-items: start;
}

/* LEFT — sticky title anchor. The `top` value is normally
   clamp(96px, 14vh, 140px), but JS (wedge.js) computes a viewport-
   aware override and writes it to --wedge-anchor-top so that at
   end-of-scroll, lead 1 first line ↔ closer first line and lead 2
   last line ↔ trust strip last line. Falls back to the static clamp
   if JS hasn't run yet. */
.v3-wedge__anchor {
  position: sticky;
  top: var(--wedge-anchor-top, clamp(96px, 14vh, 140px));
  align-self: start;
  padding-top: clamp(32px, 4vw, 64px);
}
.v3-wedge__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 5.6vw, 96px); line-height: 0.92;
  letter-spacing: -0.025em; text-transform: uppercase;
  color: var(--altida-black); margin: 0 0 32px;
  text-wrap: balance;
}
.v3-wedge__title em {
  font-family: var(--font-display); font-weight: 900;
  /* 2026-07-02 contrast: yellow fill on white was 1.22:1 — converged on the
     site's approved emphasis grammar (black + thick yellow underline, as the
     risk title and carry-tags): accessible, same yellow signature. */
  color: var(--altida-black); font-style: normal;
  box-shadow: inset 0 -0.16em 0 var(--altida-yellow);
}
.v3-wedge__lead {
  font-family: var(--font-body); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65;
  color: var(--ink-secondary); margin: 0 0 16px;
  max-width: 44ch;
}
.v3-wedge__lead:last-child { margin-bottom: 0; }

/* RIGHT — diagram + compact capability grid + closer, stacked. */
.v3-wedge__feed {
  display: grid; gap: clamp(56px, 6vw, 96px);
  padding-top: clamp(32px, 4vw, 64px);
}

/* Diagram (light variant — original). */
.v3-wedge__diagram {
  margin: 0;
  display: flex; flex-direction: column; gap: clamp(28px, 3vw, 44px);
}
.v3-wedge__row { display: flex; flex-direction: column; gap: 10px; }
.v3-wedge__row-tag {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-secondary);
}
.v3-wedge__row-tag--us { color: var(--altida-black); }

/* Bar gap widened from 4 px to 20 px so the handover gap's red corner
   brackets + outer glow have breathing room and don't visually encroach
   on the Crane firm / Haulier segments either side. */
.v3-wedge__bar { display: flex; height: 88px; gap: 10px; align-items: stretch; position: relative; }
/* Connecting track removed 2026-05-12 — the reference design uses
   double-chevron arrows (›› on desktop, ∨∨ on mobile) with NO
   underlying track. The chevron repetition gives directional emphasis
   on its own; no shaft / connecting line needed. */
.v3-wedge__seg {
  flex: 1;
  /* min-width: 0 overrides the default min-width: auto on flex items.
     Without it, longer content ("Crane unloads" = 12 chars) gets a wider
     min-content width than shorter ("Crane loads" = 10 chars), so the
     three flex: 1 segments end up unequal. min-width: 0 forces true
     equal flex-grow regardless of content length. */
  min-width: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--grey-200); color: var(--altida-black);
  padding: 0 12px;
  border-radius: 2px;
  position: relative;
  text-align: center;
  line-height: 1.15;
}
/* THEM bars — subtle vertical gradients give material depth without
   leaving brand colour. */
.v3-wedge__seg--a {
  background: linear-gradient(180deg, var(--grey-300) 0%, color-mix(in srgb, var(--grey-300) 92%, black) 100%);
}
.v3-wedge__seg--b {
  background: linear-gradient(180deg, var(--grey-500) 0%, color-mix(in srgb, var(--grey-500) 92%, black) 100%);
  color: var(--altida-white);
}
/* ALTIDA bar — large Lovelo display wordmark, 1px yellow inset border at
   20 % opacity adds object-quality at close inspection without shouting.
   line-height:1 + a 2 px translate-down on the inner span correct
   Lovelo's cap metric (caps sit slightly above em-square centre) so the
   wordmark reads visually centred in the 88 px bar. */
.v3-wedge__seg--us {
  background: var(--altida-black); color: var(--altida-yellow);
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 2.4vw, 32px); letter-spacing: 0.06em;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255, 200, 0, 0.20);
}
.v3-wedge__seg--us span {
  display: inline-block;
  transform: translateY(2px);
}
/* Handover gap — semantic warning state. Yellow chevron background
   (operator-preferred) signals "this is the hand-off zone"; red corner
   brackets at top-left + bottom-right mirror Altida's brand corner-slash
   motif and read as engineering registration marks rather than a
   continuous border. Soft red outer-glow pulse adds cinematic warning
   depth without dominating the diagram.
   Iteration log: dashed yellow border (broken-looking) → solid red 1.5 px
   border (Excel-cell thin) → corner brackets (premium / instrument feel,
   operator-tuned 2026-05-07 evening). */
.v3-wedge__gap {
  position: relative;
  width: 108px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: repeating-linear-gradient(45deg, var(--altida-yellow) 0 4px, var(--altida-white) 4px 8px);
  border: none;
  border-radius: 0;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--altida-black);
  text-align: center;
  line-height: 1.2;
  padding: 4px 6px;
}
/* Flow chevrons 2026-05-12 — double-chevron (›› pointing right on
   desktop, ∨∨ pointing down on mobile). Two 7×7 chevrons spaced 9px
   apart, 2px stroke. Lifted directly from the reference Altida Website
   design so the wedge workflow visual now matches across device types. */
.v3-wedge__arrow {
  position: relative;
  width: 18px;
  flex-shrink: 0;
  align-self: stretch;
  color: var(--altida-black);
  pointer-events: none;
}
.v3-wedge__arrow::before,
.v3-wedge__arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 7px; height: 7px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);
}
.v3-wedge__arrow::before { right: 10px; }
.v3-wedge__arrow::after  { right: 1px; }
/* (Corner brackets removed 2026-05-07 evening — operator pull-up:
   "remove the two red corners; the red pulse alone is the right effect
   now that the gap exists between all the bars".) */
.v3-wedge__row-meta {
  font-family: var(--font-body); font-size: 14px; line-height: 1.55;
  color: var(--ink-secondary);
  max-width: 60ch;
}
.v3-wedge__row-meta--us { color: var(--altida-black); }

/* Compact 2-col capability grid. Each cell — yellow rule on the left,
   Lovelo head, Aller body. No numbers, no tag lines, no photos. The
   cells live as evidence beneath the section title, not as standalone
   feature cards. */
.v3-wedge__beats {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(2, 1fr);
  column-gap: clamp(32px, 3.2vw, 56px);
  row-gap: clamp(28px, 3vw, 40px);
}
.v3-wedge__beat {
  padding-left: clamp(16px, 1.5vw, 22px);
  display: grid; gap: 8px;
  align-content: start;
}
.v3-wedge__beat-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(18px, 1.6vw, 24px); line-height: 1.1;
  letter-spacing: -0.005em; text-transform: uppercase;
  color: var(--altida-black); margin: 0;
  text-wrap: balance;
}
.v3-wedge__beat-body {
  font-family: var(--font-body); font-size: clamp(14px, 1vw, 15px); line-height: 1.55;
  color: var(--ink-secondary); margin: 0;
  max-width: 38ch;
}

/* Closer — final paragraph, type matched to .v3-wedge__lead so the
   section's running copy reads as one consistent voice. Hairline above. */
.v3-wedge__closer {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.2vw, 18px); line-height: 1.65;
  color: var(--ink-secondary); margin: 0;
  max-width: 64ch;
  padding-top: clamp(32px, 4vw, 48px);
  border-top: 1px solid var(--hairline-strong);
}

/* Sign-off block — wraps the closer paragraph + trust strip into a
   single grid child of .v3-wedge__feed. Internal gap matches the feed's
   grid-gap rhythm (closer ~96 px above trust strip at desktop) so the
   trust strip reads as a quiet sign-off below the closer rather than a
   tightly-bound continuation. Operator-tuned 2026-05-07 evening. */
/* Sign-off internal gap — tight polished spacing chosen so the closer +
   trust strip block height naturally matches the LEFT lead block height
   (lead 1 + 16 px margin + lead 2). Approximate equality means the JS
   only needs to nudge the anchor's sticky-top — no synthetic lead
   margin extension required (operator pull-up 2026-05-07 evening:
   prior big-gap approach looked unpolished). */
.v3-wedge__signoff {
  display: flex; flex-direction: column;
  gap: clamp(24px, 3vw, 32px);
}

/* Trust strip — credentials as a quiet sign-off below the closer.
   Same typographic rhythm as the diagram tags. Not a feature card. */
.v3-wedge__trust {
  margin: 0;
  display: flex; flex-wrap: wrap;
  align-items: center; gap: clamp(8px, 1vw, 14px);
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-muted);
}
.v3-wedge__trust [aria-hidden="true"] { color: var(--altida-yellow); }

/* ============================================================
   Wedge — motion (IntersectionObserver-driven, transform/opacity only).
   Initial state: hidden / shifted. Revealed state set by JS adding
   .is-revealed to relevant nodes (or .v3-wedge--in-view to the section).
   prefers-reduced-motion short-circuits to instant final state.
   ============================================================ */

/* Edge rule reveal — scaleY top-down. */
.v3-wedge .v3-wedge__edge {
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 700ms var(--ease-mech);
}
.v3-wedge.is-revealed .v3-wedge__edge { transform: scaleY(1); }

/* Anchor reveal — eyebrow + title (line-by-line) + leads. */
.v3-wedge .v3-eyebrow,
.v3-wedge .v3-wedge__lead {
  opacity: 0; transform: translateY(12px);
  transition: opacity 600ms var(--ease-mech), transform 600ms var(--ease-mech);
}
.v3-wedge.is-revealed .v3-eyebrow {
  opacity: 1; transform: translateY(0);
  transition-delay: 220ms;
}
.v3-wedge.is-revealed .v3-wedge__lead { opacity: 1; transform: translateY(0); }
.v3-wedge.is-revealed .v3-wedge__lead:nth-of-type(1) { transition-delay: 720ms; }
.v3-wedge.is-revealed .v3-wedge__lead:nth-of-type(2) { transition-delay: 820ms; }

/* Title — three lines reveal in sequence. JS wraps each line in a span
   with .v3-wedge__title-line for staggered control; until then a simple
   block-level reveal applies. */
.v3-wedge .v3-wedge__title {
  opacity: 0; transform: translateY(16px);
  transition: opacity 600ms var(--ease-mech), transform 600ms var(--ease-mech);
  transition-delay: 320ms;
}
.v3-wedge.is-revealed .v3-wedge__title { opacity: 1; transform: translateY(0); }

/* The em-italic ONE — yellow fill draws via clip-path. Climax of the
   section's reveal sequence. */
.v3-wedge .v3-wedge__title em {
  position: relative;
  background: linear-gradient(currentColor, currentColor) no-repeat;
  background-size: 100% 100%;
  background-position: 0 0;
  -webkit-background-clip: text; background-clip: text;
  color: var(--altida-black); /* 2026-07-02: black + yellow underline (contrast) */
  /* Use clip-path to reveal the word (and its underline) left to right. */
  clip-path: inset(0 100% 0 0);
  transition: clip-path 480ms var(--ease-mech);
  transition-delay: 760ms;
}
.v3-wedge.is-revealed .v3-wedge__title em { clip-path: inset(0 0 0 0); }

/* Diagram — staged build inside .v3-wedge__diagram.is-revealed. */
.v3-wedge__diagram .v3-wedge__row-tag,
.v3-wedge__diagram .v3-wedge__row-meta { opacity: 0; transition: opacity 360ms var(--ease-mech); }
.v3-wedge__diagram .v3-wedge__seg--a,
.v3-wedge__diagram .v3-wedge__seg--b,
.v3-wedge__diagram .v3-wedge__seg--c,
.v3-wedge__diagram .v3-wedge__seg--us {
  transform-origin: left; transform: scaleX(0);
  transition: transform 520ms var(--ease-mech);
}
/* Both THEM segments grow left-to-right; seg-b is delayed so it builds
   AFTER the gap appears — the bar reads as a left-to-right construction
   (crane firm → handover → haulier) rather than two segments rushing
   inward to meet a hole. */
.v3-wedge__diagram .v3-wedge__seg--us { transition-duration: 680ms; }
.v3-wedge__diagram .v3-wedge__gap {
  opacity: 0;
  transition: opacity 320ms var(--ease-mech);
}

/* Flow chevrons fade in shortly after the box they trail from. */
.v3-wedge__diagram .v3-wedge__arrow {
  opacity: 0;
  transition: opacity 280ms var(--ease-mech);
}

/* Three-segment THEM bar reveal:
     tag → Crane lift → arrow-1 → handover-1 → arrow-2 → Transport
     → arrow-3 → handover-2 → arrow-4 → Crane offload → caption */
.v3-wedge__diagram.is-revealed .v3-wedge__row--them .v3-wedge__row-tag { transition-delay: 80ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__seg--a { transition-delay: 220ms; transform: scaleX(1); }
.v3-wedge__diagram.is-revealed .v3-wedge__arrow--1 { transition-delay: 320ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__gap--1 { transition-delay: 420ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__arrow--2 { transition-delay: 540ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__seg--b { transition-delay: 620ms; transform: scaleX(1); }
.v3-wedge__diagram.is-revealed .v3-wedge__arrow--3 { transition-delay: 760ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__gap--2 { transition-delay: 840ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__arrow--4 { transition-delay: 960ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__seg--c { transition-delay: 1040ms; transform: scaleX(1); }
.v3-wedge__diagram.is-revealed .v3-wedge__row--them .v3-wedge__row-meta { transition-delay: 1220ms; opacity: 1; }
/* Both handover gaps pulse warning-red — applied to both via class. */
.v3-wedge__diagram.is-revealed .v3-wedge__gap { animation: v3-wedge-gap-pulse 2.4s ease-in-out infinite 1000ms; }

.v3-wedge__diagram.is-revealed .v3-wedge__row--us  .v3-wedge__row-tag { transition-delay: 1500ms; opacity: 1; }
.v3-wedge__diagram.is-revealed .v3-wedge__seg--us  { transition-delay: 1640ms; transform: scaleX(1); }
.v3-wedge__diagram.is-revealed .v3-wedge__row--us  .v3-wedge__row-meta { transition-delay: 2240ms; opacity: 1; }

@keyframes v3-wedge-gap-pulse {
  /* Cinematic warning pulse — red outer-glow halo expands around the
     whole gap box and dissipates. Peak intensity bumped from 14 % to
     32 % red mix so the pulse reads clearly against the yellow chevron
     ground (operator-tuned 2026-05-07 evening). Composited. */
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  50%      { box-shadow: 0 0 0 7px color-mix(in srgb, var(--status-stop) 32%, transparent); }
}

/* Beat grid — each beat fades up, yellow rule scales-in slightly ahead.
   Stagger by pairs (1+2 → 3+4 → 5+6) via :nth-child rules. */
.v3-wedge__beat {
  opacity: 0; transform: translateY(20px);
  transition: opacity 520ms var(--ease-mech), transform 520ms var(--ease-mech);
}
.v3-wedge__beats.is-revealed .v3-wedge__beat { opacity: 1; transform: translateY(0); }
.v3-wedge__beats.is-revealed .v3-wedge__beat:nth-child(1),
.v3-wedge__beats.is-revealed .v3-wedge__beat:nth-child(2) { transition-delay: 0ms; }
.v3-wedge__beats.is-revealed .v3-wedge__beat:nth-child(3),
.v3-wedge__beats.is-revealed .v3-wedge__beat:nth-child(4) { transition-delay: 120ms; }
.v3-wedge__beats.is-revealed .v3-wedge__beat:nth-child(5),
.v3-wedge__beats.is-revealed .v3-wedge__beat:nth-child(6) { transition-delay: 240ms; }

/* Border-left rule scales-in via a wrapping technique — the border itself
   can't be scaled, so we set border-left to 0 initially and animate a
   pseudo-element. */
.v3-wedge__beat {
  border-left: 0;
  position: relative;
}
.v3-wedge__beat::after {
  content: ''; position: absolute; left: 0; top: 0;
  width: 4px; height: 100%;
  background: var(--altida-yellow);
  transform-origin: top; transform: scaleY(0);
  transition: transform 480ms var(--ease-mech);
}
.v3-wedge__beats.is-revealed .v3-wedge__beat::after { transform: scaleY(1); }

/* Closer + trust strip reveal. */
.v3-wedge__closer,
.v3-wedge__trust {
  opacity: 0; transform: translateY(12px);
  transition: opacity 480ms var(--ease-mech), transform 480ms var(--ease-mech);
}
.v3-wedge__closer.is-revealed,
.v3-wedge__trust.is-revealed { opacity: 1; transform: translateY(0); }

/* Reduced-motion — short-circuit every transition + animation. */
@media (prefers-reduced-motion: reduce) {
  .v3-wedge .v3-wedge__edge,
  .v3-wedge .v3-eyebrow,
  .v3-wedge .v3-wedge__title,
  .v3-wedge .v3-wedge__title em,
  .v3-wedge .v3-wedge__lead,
  .v3-wedge__diagram .v3-wedge__row-tag,
  .v3-wedge__diagram .v3-wedge__row-meta,
  .v3-wedge__diagram .v3-wedge__seg--a,
  .v3-wedge__diagram .v3-wedge__seg--b,
  .v3-wedge__diagram .v3-wedge__seg--us,
  .v3-wedge__diagram .v3-wedge__gap,
  .v3-wedge__beat,
  .v3-wedge__beat::after,
  .v3-wedge__closer,
  .v3-wedge__trust {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
}


/* ============================================================
   5b. STATEMENT — editorial pull-quote between wedge and Recent Work
   ============================================================
   White ground, Lovelo Black centered, single yellow word-accent
   matching the brand's existing display-face accent vocabulary
   (hero & ampersand, wedge title <em>one</em>). All contrast words
   render at the SAME size — the BIG/small size-differentiation
   that lived in the reference design was rejected by operator
   2026-05-12 as not brand-aligned. */
.v3-statement {
  position: relative;
  background: var(--altida-white);
  color: var(--altida-black);
  /* Asymmetric padding: the wedge above already adds clamp(72,9vw,128)
     of padding-bottom, so the gap above the statement gets a head-start.
     Recent Work below has zero top padding. To equalise the visual gap
     above + below the statement text, top padding is reduced to roughly
     (bottom - wedge's contribution). 2026-05-12. */
  padding: clamp(24px, 5vw, 72px) 0 clamp(96px, 14vw, 200px);
}
.v3-statement__container {
  display: grid;
  justify-items: center;
}
.v3-statement__quote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  /* Sized between the current hero (88 max) and the old "Lift. Move.
     Maintain." H1 (128 max) — sits at ~85% of the old hero scale.
     Big enough to feel like a deliberate display moment, but doesn't
     overpower the new hero. */
  font-size: clamp(44px, 7.5vw, 108px);
  line-height: 0.95;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  color: var(--altida-black);
  text-align: center;
  text-wrap: balance;
  max-width: 22ch;
}
.v3-statement__quote em {
  /* Single yellow brand-stamp on the closing period — confident
     typography carries the statement; one character carries the brand.
     Apple / Stripe level of restraint: no decoration, no marker, no
     ornament; the dot at the end is the only flourish. */
  color: var(--altida-yellow);
  font-style: normal;
}

/* Reveal — gentle fade up on scroll into view; opacity transition
   only, no per-word effects (those were rejected). */
.v3-statement[data-section-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 720ms var(--ease-mech), transform 720ms var(--ease-mech);
}
.v3-statement[data-section-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

@media (max-width: 860px) {
  /* Same asymmetric padding logic on mobile — wedge's own padding-bottom
     handles most of the top breathing space; statement adds a touch only. */
  .v3-statement { padding: clamp(20px, 6vw, 48px) 0 clamp(72px, 18vw, 120px); }
  .v3-statement__quote {
    /* Mobile scaled to ~85% of old hero H1 mobile sizing, matching
       the desktop reduction. */
    font-size: clamp(36px, 8.5vw, 64px);
    max-width: none;
  }
}

/* ============================================================
   6. SPECIALIST FLEET (4-up film strip)
   ============================================================ */
.v3-fleet {
  background: var(--altida-pure-black);
  color: var(--altida-white);
}
.v3-fleet__head {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; gap: 32px;
  padding-bottom: clamp(32px, 4vw, 56px);
  border-bottom: 1px solid var(--grey-800);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.v3-fleet__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 5vw, 80px); line-height: 0.92;
  letter-spacing: -0.025em; text-transform: uppercase;
  color: var(--altida-yellow); margin: 0 0 20px;
}
.v3-fleet__intro {
  font-family: var(--font-body); font-size: 16px; line-height: 1.6;
  color: var(--grey-300); max-width: 60ch; margin: 0;
}

.v3-fleet__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.6vw, 24px);
}
.v3-fleet-card {
  background: var(--grey-900);
  border: 1px solid var(--grey-800);
  display: flex; flex-direction: column;
  transition: transform var(--dur-base) var(--ease-mech),
              border-color var(--dur-base) var(--ease-mech);
}
.v3-fleet-card:hover {
  transform: translateY(-4px);
  border-color: var(--altida-yellow);
}
.v3-fleet-card__media {
  position: relative; aspect-ratio: 1;
  background: var(--altida-white); overflow: hidden;
}
.v3-fleet-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--dur-slow) var(--ease-mech);
}
.v3-fleet-card:hover .v3-fleet-card__media img { transform: scale(1.04); }
.v3-fleet-card__tag {
  position: absolute; top: 12px; left: 12px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--altida-pure-black); color: var(--altida-yellow);
  padding: 6px 10px;
}
.v3-fleet-card__body {
  padding: 24px;
  border-top: 4px solid var(--altida-yellow);
}
.v3-fleet-card__model {
  font-family: var(--font-sans); font-weight: 800;
  font-size: var(--fs-24); letter-spacing: 0.04em;
  text-transform: uppercase; line-height: 1;
  color: var(--altida-white); margin: 0 0 18px;
}
.v3-fleet-card__model em {
  font-style: normal; color: var(--altida-yellow);
}
.v3-fleet-card__rows {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
}
.v3-fleet-card__rows li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--grey-800);
}
.v3-fleet-card__rows li:last-child { border-bottom: 0; }
.v3-fleet-card__rows span {
  font-family: var(--font-sans); font-weight: 600;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--grey-400);
}
/* Spec values — yellow + Inter 800 caps. (Inter caps not Lovelo because the
   system reserves Lovelo Black for ≥ 32 px display only; at 16 px it goes
   muddy. Inter 800 caps gives the same premium-industrial read on-system.) */
.v3-fleet-card__rows b {
  font-family: var(--font-sans); font-weight: 800;
  font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--altida-yellow);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
}

/* ============================================================
   7. WHY ALTIDA (4 USPs, editorial list)
   ============================================================ */
.v3-why {
  background: var(--altida-bone);
  color: var(--altida-black);
}
.v3-why__head {
  margin-bottom: clamp(40px, 5vw, 72px);
  max-width: 720px;
}
.v3-why__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 5vw, 80px); line-height: 0.95;
  letter-spacing: -0.025em; text-transform: uppercase;
  margin: 0; color: var(--altida-black);
}

.v3-why__list {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 0;
  border-top: 2px solid var(--altida-black);
}
.v3-why__row {
  display: grid; grid-template-columns: 80px 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding: clamp(28px, 3vw, 44px) 0;
  border-bottom: 1px solid var(--hairline-strong);
  align-items: start;
  transition: background var(--dur-base) var(--ease-mech);
}
.v3-why__row:last-child { border-bottom: 2px solid var(--altida-black); }
.v3-why__row:hover { background: var(--altida-white); }
.v3-why__num {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 3.5vw, 56px); line-height: 1;
  letter-spacing: -0.02em; color: var(--altida-yellow);
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  padding-top: 4px;
}
.v3-why__row-text { display: grid; gap: 14px; max-width: 60ch; }
.v3-why__row-title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(22px, 2.4vw, 36px); line-height: 1.05;
  letter-spacing: -0.005em; text-transform: uppercase;
  margin: 0; color: var(--altida-black);
}
.v3-why__row-text p {
  font-family: var(--font-body); font-size: 16px; line-height: 1.65;
  color: var(--ink-secondary); margin: 0;
}

/* ============================================================
   7b. RECENT WORK (replaces Why Altida — pattern-break vs competitors:
       only crane-hire homepage to show real customer projects with
       location, scope and equipment.)
   ============================================================ */
/* Recent Work — scroll-pinned spotlight. Outer section is N×100vh so each
   project gets a viewport of scroll runway; inner sticks to the viewport
   for the section's duration; JS toggles `.is-active` on the spotlight
   that matches scroll progress. Frontier-tier scrollytelling — single
   immersive panel at any moment with full-bleed photography, brand-voice
   narrative, and animated data callouts. Operator pull-up 2026-05-07
   evening: the prior alternating-grid was wordpress-tier; this needs a
   frontier treatment with no count-locked copy. */
/* Section: scroll-pinned spotlight. The section has min-height of
   N×100vh (set dynamically by JS for any project count). The inner pin
   sticks to the viewport for that runway, swapping the active spotlight
   based on scroll progress. Document-height is intentionally extended;
   the visible section at any moment is the 100vh pin.
   Section bg is white so the spotlight image's top/bottom fade band
   blends into the white wedge above and white FAQ below — no abrupt
   black bars between sections. Operator-tuned 2026-05-08. */
.v3-projects {
  position: relative;
  background: var(--altida-white);
  color: var(--altida-white);
  min-height: 300vh;
  /* Zero the inherited section padding-block — the spotlight image fills
     the pin viewport-edge to viewport-edge, no extra white frame top /
     bottom around it. Adjacent sections have their own padding. */
  padding-block: 0;
}
.v3-projects__pin {
  position: sticky;
  /* Pin pins to viewport-top with full 100vh height. The nav (fixed
     z-index 20, black bg) overlays the top ~65 px of the image during
     the pinned state — no visible "gap" between nav-bottom and
     image-top because the image is positioned all the way up at
     viewport-top:0 (just covered by the nav above it). This is also
     what eliminates the 5-10px transitional gap during scroll-in /
     scroll-out: section-top never has to "catch up" to a positive
     sticky-top before image fills the viewport. */
  top: 0;
  height: 100vh;
  background: var(--altida-white);
  isolation: isolate;
  overflow: hidden;
}
/* (Section header removed 2026-05-07 evening — operator pull-up: the
   "Recent Work" eyebrow looked stranded at the top of the dark canvas
   on its own. Now lives inside each spotlight's copy block, immediately
   above the project meta line, where it identifies the section type
   without the dead-space-at-top look.) */

/* Stage — fills the entire pin via absolute positioning so the
   spotlight image runs edge-to-edge of the 100vh viewport. */
.v3-projects__stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

/* Spotlight panel — one full-bleed photographic project. Absolute-
   stacked with the active layer fading in over the previous one as
   scroll progress advances. */
.v3-spotlight {
  position: absolute; inset: 0;
  display: grid; grid-template-rows: 1fr;
  opacity: 0;
  pointer-events: none;
  transition: opacity 700ms var(--ease-mech);
  isolation: isolate;
}
.v3-spotlight.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Background image — slow ken-burns scale on the active panel for
   subtle life. Starting at native scale (1.0) so the initial render is
   sharp; eased zoom to 1.06 over 10s when active. The earlier 1.04 →
   1.10 was paired with a low-resolution source image which read as
   blurry; restored as 1.0 → 1.06 with sharper sources. */
.v3-spotlight__bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform 10000ms linear;
  filter: brightness(0.7) saturate(0.95);
}
.v3-spotlight.is-active .v3-spotlight__bg {
  transform: scale(1.06);
}
/* Overlay — left-side gradient for type legibility (still dark since
   the copy is white text). Top + bottom fade removed 2026-05-08 —
   operator pull-up: image should run sharp-edge into the white section
   bg above and below, no feathering. */
.v3-spotlight__overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.45) 50%, rgba(0,0,0,0.10) 100%);
}
.v3-spotlight__inner {
  position: relative; z-index: 2;
  max-width: var(--container-wide);
  margin: 0 auto;
  /* Bottom padding clears the absolute-positioned footer (counter + bar +
     CTA float over the bottom band of the image; copy block must sit
     above them, not behind). */
  padding: clamp(24px, 3vh, 48px) var(--gutter) clamp(110px, 14vh, 150px);
  width: 100%;
  display: flex;
  align-items: flex-end;
  height: 100%;
}
.v3-spotlight__copy {
  display: flex; flex-direction: column;
  gap: clamp(14px, 1.4vw, 22px);
  max-width: 60ch;
}
.v3-spotlight__meta {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--altida-yellow);
  margin: 0;
}
.v3-spotlight__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 4.4vw, 72px); line-height: 0.95;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--altida-white); margin: 0;
  text-wrap: balance;
}
.v3-spotlight__scope {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.6;
  color: rgba(255, 255, 255, 0.85); margin: 0;
  max-width: 56ch;
}

/* (Data callouts removed 2026-05-07 evening — operator pull-up: most
   rows duplicated info from the meta line or the scope copy. Numbers
   that matter ("18 tonnes", "twelve metres", "100-tonne crane") are
   already in the scope, woven into the brand-voice narrative. The
   spotlight panel now reads as a clean editorial: photo, meta, title,
   scope. Photography dominates the right side of the panel. */

/* Active panel's copy block slides up on becoming active. Four children
   now: eyebrow, meta, title, scope — each with a 120 ms stagger. */
.v3-spotlight__copy > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity 600ms var(--ease-mech), transform 600ms var(--ease-mech);
}
.v3-spotlight.is-active .v3-spotlight__copy > * { opacity: 1; transform: translateY(0); }
.v3-spotlight.is-active .v3-spotlight__copy > *:nth-child(1) { transition-delay: 60ms; }
.v3-spotlight.is-active .v3-spotlight__copy > *:nth-child(2) { transition-delay: 180ms; }
.v3-spotlight.is-active .v3-spotlight__copy > *:nth-child(3) { transition-delay: 300ms; }
.v3-spotlight.is-active .v3-spotlight__copy > *:nth-child(4) { transition-delay: 420ms; }

/* Footer — just the progress strip (counter + bar). Floats over the
   bottom of the active spotlight image, lifted clamp(40,5vh,64) px from
   the viewport bottom so the bar sits in a comfortable reading band
   rather than at the very edge. CTA was removed 2026-05-08. */
.v3-projects__foot {
  position: absolute;
  bottom: clamp(40px, 5vh, 64px);
  left: 0; right: 0;
  z-index: 5;
  padding: 0 var(--gutter);
  max-width: var(--container-wide);
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;
}
.v3-projects__foot > * { pointer-events: auto; }
.v3-projects__progress {
  display: flex; align-items: center; gap: 16px;
  flex: 1;
}
/* (Prev/next nav buttons removed 2026-05-07 evening — operator pull-up:
   I dropped the scroll-pin in error and added them as a substitute.
   Reverted to scroll-driven; navigation is the natural page scroll, no
   extra controls needed.) */
.v3-projects__counter {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  font-feature-settings: 'tnum' 1;
  flex-shrink: 0;
  min-width: 50px;
}
.v3-projects__bar {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.18);
  position: relative;
  max-width: 360px;
  overflow: hidden;
}
.v3-projects__bar-fill {
  position: absolute; inset: 0;
  background: var(--altida-yellow);
  transform-origin: left;
  transform: scaleX(0.333);
  transition: transform 500ms var(--ease-mech);
}
.v3-projects__cta {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--altida-white);
  text-decoration: none;
  padding: 12px 20px;
  border: 1px solid rgba(255, 255, 255, 0.30);
  background: transparent;
  transition: background var(--dur-fast) var(--ease-mech),
              color var(--dur-fast) var(--ease-mech),
              border-color var(--dur-fast) var(--ease-mech);
}
.v3-projects__cta:hover {
  background: var(--altida-yellow);
  color: var(--altida-black);
  border-color: var(--altida-yellow);
}
.v3-projects__cta .arrow {
  transition: transform var(--dur-fast) var(--ease-mech);
}
.v3-projects__cta:hover .arrow { transform: translateX(3px); }

/* Reduced-motion + small-viewport fallback — strip the pin, render the
   spotlight panels in a stacked stream as aspect-ratio cards. */
@media (max-width: 860px), (prefers-reduced-motion: reduce) {
  .v3-projects { min-height: 0; }
  .v3-projects__pin {
    position: static; height: auto;
    grid-template-rows: auto auto;
    overflow: visible;
  }
  .v3-projects__stage {
    position: static; inset: auto;
    display: flex; flex-direction: column; gap: 0;
    overflow: visible;
  }
  .v3-spotlight {
    position: relative; inset: auto;
    aspect-ratio: 4 / 3;
    opacity: 1; pointer-events: auto;
  }
  /* Recent Work eyebrow only on the first card on mobile — repeating it
     on every stacked card reads as filler. */
  .v3-spotlight:not(:first-child) .v3-spotlight__copy .v3-eyebrow { display: none; }
  .v3-spotlight__bg { transform: scale(1) !important; }
  .v3-spotlight__inner {
    padding: 24px var(--gutter);
    align-items: flex-end;
  }
  .v3-projects__progress { display: none; }
  .v3-projects__foot { grid-template-columns: 1fr; justify-items: center; }
  .v3-spotlight.is-active .v3-spotlight__copy > *,
  .v3-spotlight__copy > * {
    opacity: 1; transform: none;
    transition: none;
  }
}

.v3-footer__hashtag {
  display: block;
  font-family: var(--font-sans); font-weight: 700;
  letter-spacing: 0.04em; text-transform: none;
  color: var(--altida-yellow);
  font-size: 13px;
  margin: -10px 0 22px;
}

/* ============================================================
   8. FAQ — single-column rebuild on white. Compact label-sized
   question buttons stacked vertically; clicking one opens an
   overlay panel with a clip-path reveal that covers the list area
   while the list itself fades out. One answer visible at a time;
   close via × button or Escape. No accordion height-grow, no
   sticky-anchor 2-column — that's the wedge's vehicle.
   Brand grammar kept (yellow vertical edge rule, Lovelo display
   for the section title, eyebrow with yellow rule). Question
   typography is intentionally small + Aller — labels, not display.
   ============================================================ */
.v3-faq {
  position: relative;
  background-color: var(--altida-white);
  color: var(--altida-black);
  isolation: isolate;
  padding-top: clamp(72px, 9vw, 128px);
  padding-bottom: clamp(28px, 3.5vw, 48px);
}
/* Masked pattern layer — sits behind everything, fades in from the top
   and out at the bottom so the pattern doesn't crash into the wedge
   above or the CTA below. */
.v3-faq::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('../assets/altida-pattern.png?v=3');
  background-repeat: repeat;
  background-size: 600px auto;
  background-position: center top;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 23.5%, transparent 30.5%, transparent 85%, #000 90%, #000 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 23.5%, transparent 30.5%, transparent 85%, #000 90%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
.v3-faq__edge {
  position: absolute; top: 0; left: 0; bottom: 0; z-index: 1;
  width: 4px;
  background: var(--altida-yellow);
  pointer-events: none;
}

/* Centered narrow content column — single-column layout. */
.v3-faq__container {
  position: relative; z-index: 2;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(40px, 4vw, 64px);
  max-width: 760px;
  margin-inline: auto;
}

.v3-faq__header {
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
  gap: 14px;
}
.v3-faq__header .v3-eyebrow { margin: 0; justify-content: center; }
.v3-faq__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(36px, 4.4vw, 64px); line-height: 0.92;
  letter-spacing: -0.022em; text-transform: uppercase;
  color: var(--altida-black);
  margin: 0;
  text-wrap: balance;
}

/* The stage holds the question list AND the answer panel stacked on
   top of each other via grid. Whichever has more height sets the
   stage height — so the panel's clip-path reveal never disturbs
   layout. Clean overlay reveal, no jump. */
.v3-faq__stage {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-areas: "stack";
}
.v3-faq__list,
.v3-faq__panel {
  grid-area: stack;
  width: 100%;
}

/* Question list — compact label buttons. Sentence case Aller, small,
   tracked. Hairline below each. Reads as a refined index of topics. */
.v3-faq__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  border-top: 1px solid var(--hairline);
  transition: opacity 240ms var(--ease-mech),
              transform 240ms var(--ease-mech);
}
.v3-faq__item { margin: 0; }
.v3-faq__btn {
  appearance: none; background: transparent; border: 0;
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(20px, 2vw, 28px);
  padding: clamp(18px, 1.9vw, 24px) clamp(8px, 1vw, 14px);
  border-bottom: 1px solid var(--hairline);
  cursor: pointer;
  text-align: left;
  color: var(--ink-primary);
  transition: color 220ms var(--ease-mech),
              background 220ms var(--ease-mech);
}
.v3-faq__btn-text {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(14px, 1vw, 15.5px); line-height: 1.4;
  letter-spacing: 0.015em;
  color: inherit;
}
/* Mark — minimal arrow pad on the right; hairline at rest, yellow on
   hover, with a precise 4px slide right. Felt-not-seen interaction. */
.v3-faq__btn-mark {
  position: relative;
  width: 28px; height: 1px; flex-shrink: 0;
  background: var(--hairline-strong);
  transition: background 220ms var(--ease-mech),
              width 280ms var(--ease-mech),
              transform 280ms var(--ease-mech);
}
.v3-faq__btn-mark::after {
  content: ''; position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid var(--hairline-strong);
  border-right: 1px solid var(--hairline-strong);
  transform: translateY(-50%) rotate(45deg) translateX(-2px);
  transition: border-color 220ms var(--ease-mech),
              transform 280ms var(--ease-mech);
}
.v3-faq__btn:hover .v3-faq__btn-mark,
.v3-faq__btn:focus-visible .v3-faq__btn-mark {
  background: var(--altida-yellow);
  width: 40px;
}
.v3-faq__btn:hover .v3-faq__btn-mark::after,
.v3-faq__btn:focus-visible .v3-faq__btn-mark::after {
  border-top-color: var(--altida-yellow);
  border-right-color: var(--altida-yellow);
}
.v3-faq__btn:focus-visible {
  outline: 2px solid var(--altida-black);
  outline-offset: -2px;
}
/* Hide the source content used to populate the panel. */
.v3-faq__src { display: none; }

/* Stage open — list fades + lifts away while panel reveals. */
.v3-faq__stage[data-faq-state="open"] .v3-faq__list {
  opacity: 0; transform: translate3d(0, -8px, 0);
  pointer-events: none;
}

/* ── Answer panel — overlay covering the list area on open ── */
.v3-faq__panel {
  position: relative;
  background: var(--altida-white);
  /* Clip-path reveal: blind-from-top opening. The stage's grid keeps
     the panel layered with the list; clip-path controls visibility. */
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 440ms cubic-bezier(.22, .61, .36, 1),
              opacity 200ms var(--ease-mech);
  pointer-events: none;
}
.v3-faq__panel[hidden] { display: none; }
.v3-faq__stage[data-faq-state="open"] .v3-faq__panel {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  pointer-events: auto;
}
.v3-faq__panel-inner {
  padding: clamp(32px, 3.6vw, 56px) clamp(0px, 2vw, 24px) clamp(8px, 1vw, 16px);
  position: relative;
  /* Yellow vertical hairline running down the left of the panel —
     a brand moment that's distinct from the section's far-left
     yellow edge rule. Appears with the reveal. */
  border-left: 2px solid var(--altida-yellow);
}
.v3-faq__panel-eyebrow {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-secondary);
  margin: 0 0 14px;
  display: inline-flex; align-items: center; gap: 12px;
}
.v3-faq__panel-rule {
  display: inline-block; width: 24px; height: 1px;
  background: var(--altida-black);
}
.v3-faq__panel-title {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--altida-black);
  margin: 0 0 clamp(20px, 2vw, 28px);
  text-wrap: balance;
  max-width: 32ch;
}
.v3-faq__panel-body {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7;
  color: var(--ink-primary);
  max-width: 60ch;
}
.v3-faq__panel-body p { margin: 0; }
.v3-faq__panel-body p + p { margin-top: 14px; }
.v3-faq__panel-body strong { font-weight: 700; color: var(--altida-black); }

/* Stagger the panel content slightly behind the clip-path reveal. */
.v3-faq__panel-eyebrow,
.v3-faq__panel-title,
.v3-faq__panel-body {
  opacity: 0; transform: translate3d(0, 8px, 0);
  transition: opacity 320ms var(--ease-mech),
              transform 320ms var(--ease-mech);
}
.v3-faq__stage[data-faq-state="open"] .v3-faq__panel-eyebrow {
  opacity: 1; transform: none; transition-delay: 220ms;
}
.v3-faq__stage[data-faq-state="open"] .v3-faq__panel-title {
  opacity: 1; transform: none; transition-delay: 280ms;
}
.v3-faq__stage[data-faq-state="open"] .v3-faq__panel-body {
  opacity: 1; transform: none; transition-delay: 340ms;
}

/* Close button — top-right of panel; hairline circle, × inside,
   rotates 90° on hover. Refined dismiss affordance. */
.v3-faq__close {
  position: absolute; top: 0; right: 0;
  appearance: none; background: transparent;
  border: 1px solid var(--hairline-strong);
  border-radius: 50%;
  width: 40px; height: 40px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 220ms var(--ease-mech),
              background 220ms var(--ease-mech),
              transform 320ms var(--ease-mech);
  z-index: 2;
}
.v3-faq__close-mark {
  position: relative;
  width: 12px; height: 12px;
  display: block;
}
.v3-faq__close-mark::before,
.v3-faq__close-mark::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1px;
  background: var(--altida-black);
  transform-origin: center;
}
.v3-faq__close-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.v3-faq__close-mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.v3-faq__close:hover,
.v3-faq__close:focus-visible {
  border-color: var(--altida-black);
  background: var(--altida-black);
  transform: rotate(90deg);
}
.v3-faq__close:hover .v3-faq__close-mark::before,
.v3-faq__close:hover .v3-faq__close-mark::after,
.v3-faq__close:focus-visible .v3-faq__close-mark::before,
.v3-faq__close:focus-visible .v3-faq__close-mark::after {
  background: var(--altida-yellow);
}
.v3-faq__close:focus-visible { outline: 2px solid var(--altida-black); outline-offset: 4px; }

/* Sober closing line under the stage — tel CTA. */
.v3-faq__footer {
  font-family: var(--font-body); font-size: clamp(14px, 1vw, 15px); line-height: 1.5;
  color: var(--ink-secondary);
  text-align: center;
  margin: 0;
}
.v3-faq__footer a {
  color: var(--altida-black); font-weight: 700;
  transition: color 200ms var(--ease-mech);
}
.v3-faq__footer a:hover { color: var(--ink-secondary); }

/* Section reveal — the whole section fades up via [data-section-reveal];
   inside, header and stage cascade in. */
.v3-faq__header,
.v3-faq__stage,
.v3-faq__footer {
  opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity 600ms var(--ease-mech), transform 600ms var(--ease-mech);
}
.v3-faq.is-revealed .v3-faq__header { opacity: 1; transform: none; transition-delay: 120ms; }
.v3-faq.is-revealed .v3-faq__stage  { opacity: 1; transform: none; transition-delay: 240ms; }
.v3-faq.is-revealed .v3-faq__footer { opacity: 1; transform: none; transition-delay: 360ms; }

@media (max-width: 700px) {
  .v3-faq__container { gap: 32px; max-width: 100%; }
  .v3-faq__btn { padding: 18px 6px; }
  .v3-faq__panel-inner { padding: 28px 0 16px; padding-left: 18px; }
  .v3-faq__close { width: 36px; height: 36px; }
}

/* ============================================================
   9. GET IN TOUCH — yellow ground with a BIG black diagonal wedge
   covering the bottom-right region. Yellow strip top-left holds
   the title; black wedge holds the four equal-weight contact
   methods (white text on black, no hierarchy). The diagonal
   composition is the visual move; the contact row beneath it sits
   FULLY inside the black region so there's no black-on-black risk.
   Form opens in a dedicated modal that slides up from the bottom.
   ============================================================ */
.v3-cta {
  background: var(--altida-pure-black);
  color: var(--altida-white);
  position: relative;
  overflow: hidden;
}
/* Yellow A-leg strip — true parallelogram, uniform 192px width.
   Top from (110, 0) to (302, 0); both diagonals at slope -3 (fixed
   pixel values, so slope stays constant regardless of section height).
   Inner crosses x=0 at y=330; outer crosses x=0 at y=906. For
   typical section heights (~500-600px), the right diagonal exits via
   the section bottom edge naturally. */
.v3-cta__wedge {
  position: absolute; inset: 0; z-index: 1;
  background: var(--altida-yellow);
  clip-path: polygon(110px 0, 302px 0, 0 906px, 0 330px);
  pointer-events: none;
}

.v3-cta__container {
  position: relative; z-index: 2;
  padding-inline: clamp(24px, 3vw, 48px);
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* All content sits to the right of the yellow strip. Margin-left is
   tuned to clear the strip's widest point at the top (380px) with
   breathing room. Strip is decorative only — no content overlaps it. */
.v3-cta__content {
  margin-left: clamp(160px, 32vw, 480px);
  display: flex; flex-direction: column;
  gap: clamp(28px, 3vw, 44px);
  color: var(--altida-white);
}

.v3-cta__head {
  display: flex; flex-direction: column; gap: 16px;
}
.v3-cta__head .v3-eyebrow {
  color: var(--altida-yellow);
}
.v3-cta__head .v3-eyebrow__rule {
  background: var(--altida-yellow);
}
.v3-cta__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(40px, 5vw, 80px); line-height: 0.94;
  letter-spacing: -0.035em; text-transform: uppercase;
  margin: 0;
  color: var(--altida-white);
  max-width: 18ch;
}
.v3-cta__sub {
  font-family: var(--font-body); font-size: clamp(15px, 1.2vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 52ch;
}

/* Send a message button — yellow on black, prominent CTA */
.v3-cta__send-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 14px;
  padding: clamp(14px, 1.4vw, 20px) clamp(22px, 2.2vw, 32px);
  background: var(--altida-yellow);
  color: var(--altida-pure-black);
  border: 0;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.08em; text-transform: uppercase;
  align-self: flex-start;
  transition: background 220ms var(--ease-mech),
              transform 220ms var(--ease-mech);
}
.v3-cta__send-btn-arrow {
  display: inline-block;
  font-family: var(--font-body); font-size: 1.2em;
  transition: transform 280ms var(--ease-mech);
}
.v3-cta__send-btn:hover {
  background: var(--altida-white);
  transform: translateY(-2px);
}
.v3-cta__send-btn:hover .v3-cta__send-btn-arrow { transform: translateX(8px); }
.v3-cta__send-btn:focus-visible {
  outline: 2px solid var(--altida-yellow);
  outline-offset: 4px;
}

/* ─── 3 equal contacts on black, separator above (only inside content
   container — never extends into the yellow strip area) ─── */
.v3-cta__contacts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 2.6vw, 48px);
  padding-top: clamp(28px, 2.8vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  margin-top: clamp(8px, 1vw, 16px);
}
.v3-cta__contact {
  display: flex; flex-direction: column; gap: 12px;
  align-items: flex-start;
}
.v3-cta__contact-key {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--altida-yellow);
  margin: 0;
}
.v3-cta__contact-val {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.4;
  color: var(--altida-white);
  text-decoration: none;
  transition: color 200ms var(--ease-mech);
  word-break: break-word;
}
.v3-cta__contact-val + .v3-cta__contact-val { margin-top: 2px; }
.v3-cta__contact-val:hover { color: var(--altida-yellow); }
.v3-cta__contact-addr {
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(15px, 1.15vw, 17px); line-height: 1.5;
  color: var(--altida-white);
  margin: 0;
}
@media (max-width: 900px) {
  .v3-cta__wedge {
    clip-path: polygon(60px 0, 200px 0, 0 83.3%, 0 25%);
  }
  .v3-cta__contacts { grid-template-columns: 1fr 1fr; gap: 32px; }
  .v3-cta__content { margin-left: clamp(120px, 32vw, 280px); gap: 28px; }
  .v3-cta__title { font-size: clamp(36px, 5vw, 56px); max-width: 14ch; }
}
@media (max-width: 540px) {
  /* Mobile: strip becomes a horizontal yellow band at top; content full-width below */
  .v3-cta__wedge {
    clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
  }
  .v3-cta__contacts { grid-template-columns: 1fr; gap: 28px; }
  .v3-cta__container { min-height: 0; padding-top: 30vh; }
  .v3-cta__content { margin-left: 0; }
  .v3-cta__title { max-width: none; }
}

/* ============================================================
   9b. CTA MODAL — full-viewport overlay, slides up from bottom
   on open. Form lives here. Backdrop blurs the page beneath.
   Bespoke motion: panel transform from translateY(100%) to 0
   over 480ms with custom easing; backdrop fades.
   ============================================================ */
.v3-cta-modal {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.v3-cta-modal[hidden] { display: none; }
.v3-cta-modal__backdrop {
  position: absolute; inset: 0;
  background: rgba(8, 8, 8, 0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  opacity: 0;
  transition: opacity 320ms var(--ease-mech);
  pointer-events: auto;
  cursor: pointer;
}
.v3-cta-modal__panel {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--altida-pure-black);
  color: var(--altida-white);
  max-height: 92vh;
  overflow-y: auto;
  transform: translateY(100%);
  transition: transform 480ms cubic-bezier(.22, .61, .36, 1);
  pointer-events: auto;
}
.v3-cta-modal[data-faq-state="open"] .v3-cta-modal__backdrop,
.v3-cta-modal[data-state="open"] .v3-cta-modal__backdrop { opacity: 1; }
.v3-cta-modal[data-state="open"] .v3-cta-modal__panel { transform: translateY(0); }
.v3-cta-modal__close {
  position: absolute; top: clamp(20px, 2vw, 28px); right: clamp(20px, 2vw, 28px);
  appearance: none; background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  width: 40px; height: 40px;
  cursor: pointer;
  display: grid; place-items: center;
  transition: border-color 220ms var(--ease-mech),
              background 220ms var(--ease-mech),
              transform 320ms var(--ease-mech);
  z-index: 2;
}
.v3-cta-modal__close-mark {
  position: relative; width: 14px; height: 14px; display: block;
}
.v3-cta-modal__close-mark::before,
.v3-cta-modal__close-mark::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 14px; height: 1px;
  background: var(--altida-white);
}
.v3-cta-modal__close-mark::before { transform: translate(-50%, -50%) rotate(45deg); }
.v3-cta-modal__close-mark::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.v3-cta-modal__close:hover,
.v3-cta-modal__close:focus-visible {
  border-color: var(--altida-yellow);
  background: var(--altida-yellow);
  transform: rotate(90deg);
}
.v3-cta-modal__close:hover .v3-cta-modal__close-mark::before,
.v3-cta-modal__close:hover .v3-cta-modal__close-mark::after,
.v3-cta-modal__close:focus-visible .v3-cta-modal__close-mark::before,
.v3-cta-modal__close:focus-visible .v3-cta-modal__close-mark::after {
  background: var(--altida-pure-black);
}
.v3-cta-modal__close:focus-visible { outline: none; }

.v3-cta-modal__inner {
  max-width: 760px; margin: 0 auto;
  padding: clamp(48px, 6vw, 88px) clamp(28px, 4vw, 64px) clamp(48px, 6vw, 88px);
  display: flex; flex-direction: column;
  gap: clamp(24px, 2.4vw, 36px);
}
.v3-cta-modal__eyebrow {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--altida-yellow);
  margin: 0;
  display: inline-flex; align-items: center; gap: 12px;
}
.v3-cta-modal__rule {
  display: inline-block; width: 28px; height: 1px;
  background: var(--altida-yellow);
}
.v3-cta-modal__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(30px, 3.6vw, 56px); line-height: 0.96;
  letter-spacing: -0.02em; text-transform: uppercase;
  color: var(--altida-white);
  margin: 0;
  text-wrap: balance;
}
.v3-cta-modal__sub {
  font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.7);
  max-width: 56ch; margin: 0;
}
.v3-cta-modal__sub a {
  color: var(--altida-white); font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 1px;
  text-decoration: none;
  transition: border-bottom-color 220ms var(--ease-mech);
}
.v3-cta-modal__sub a:hover { border-bottom-color: var(--altida-yellow); }

.v3-cta-modal__form {
  display: flex; flex-direction: column;
  gap: clamp(22px, 2.2vw, 30px);
  margin-top: clamp(8px, 1vw, 16px);
}
.v3-cta-modal__field { display: flex; flex-direction: column; gap: 10px; }
.v3-cta-modal__field label {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.v3-cta-modal__field input,
.v3-cta-modal__field textarea,
.v3-cta-modal__field select {
  background: transparent; border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding: 6px 0 12px;
  font-family: var(--font-body); font-size: clamp(15px, 1.1vw, 17px);
  color: var(--altida-white);
  width: 100%; outline: none;
  border-radius: 0;
  transition: border-color 220ms var(--ease-mech);
}
.v3-cta-modal__field textarea { resize: vertical; min-height: 110px; line-height: 1.55; }
/* Strip native select chrome; add a yellow chevron via background gradients
   so the field reads as a peer of the input/textarea rules above with a
   dropdown affordance on the right edge. */
.v3-cta-modal__field select {
  appearance: none; -webkit-appearance: none;
  padding-right: 28px;
  cursor: pointer;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--altida-yellow) 50%),
    linear-gradient(-45deg, transparent 50%, var(--altida-yellow) 50%);
  background-position:
    calc(100% - 12px) calc(50% - 2px),
    calc(100% - 6px)  calc(50% - 2px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.v3-cta-modal__field select option {
  background: var(--altida-pure-black);
  color: var(--altida-white);
}
.v3-cta-modal__field input:focus,
.v3-cta-modal__field textarea:focus,
.v3-cta-modal__field select:focus {
  border-bottom-color: var(--altida-yellow);
}
.v3-cta-modal__send {
  appearance: none; background: transparent; border: 0; padding: 0;
  cursor: pointer;
  display: inline-flex; align-items: baseline; gap: 12px;
  align-self: flex-start;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(15px, 1.2vw, 17px); letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--altida-white);
  margin-top: 8px;
  transition: color 220ms var(--ease-mech);
}
.v3-cta-modal__send-arrow {
  display: inline-block;
  font-family: var(--font-body); font-size: 1.2em;
  transition: transform 280ms var(--ease-mech);
}
.v3-cta-modal__send:hover { color: var(--altida-yellow); }
.v3-cta-modal__send:hover .v3-cta-modal__send-arrow { transform: translateX(8px); }
.v3-cta-modal__send:focus-visible {
  outline: 2px solid var(--altida-yellow);
  outline-offset: 6px;
}
.v3-cta-modal__status {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.7); margin: 0;
}
.v3-cta-modal__status[data-state="success"] { color: var(--altida-yellow); font-weight: 700; }
.v3-cta-modal__status[data-state="error"]   { color: #FF6B6B; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .v3-cta-modal__panel { transition: none; }
  .v3-cta-modal__backdrop { transition: none; }
}

/* ============================================================
   9c. CONTACT — SLIM editorial bar on black.
   Compact section: half the vertical weight of the previous
   close-out. Two-column. Left: eyebrow + medium display title +
   sub + inline yellow CTA. Right: 3 horizontal contact rows
   (key | value), one per line, divided by hairlines.
   ============================================================ */
.v3-contact {
  /* Subtle vertical depth: deep top → true black bottom. */
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%, rgba(255, 236, 0, 0.06) 0%, rgba(255, 236, 0, 0) 60%),
    linear-gradient(180deg, #0a0a0a 0%, var(--altida-pure-black) 60%);
  /* Solid backstop: the gradient background-image can round ~1px short of the
     box at certain widths and expose the white page background as a hairline
     seam (Chrome). A matching solid background-color fills that edge. */
  background-color: var(--altida-pure-black);
  color: var(--altida-white);
  position: relative;
  overflow: hidden;
  padding-block: clamp(64px, 6.5vw, 104px);
}
.v3-contact__corner {
  position: absolute; top: 0; left: 0;
  width: clamp(96px, 10vw, 152px);
  aspect-ratio: 1;
  background: var(--altida-yellow);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  pointer-events: none;
  z-index: 1;
}
/* Faint film-grain overlay — adds premium-paper depth without
   visible decoration. */
.v3-contact__grain {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.4;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* Massive Lovelo "Altida" watermark bleeding off the right edge.
   Sub-2% white so it's a presence, not a label. */
.v3-contact__watermark {
  position: absolute;
  right: -0.06em; bottom: -0.32em;
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(180px, 22vw, 360px);
  line-height: 0.85; letter-spacing: -0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.018);
  pointer-events: none;
  white-space: nowrap;
  z-index: 1;
  user-select: none;
}
.v3-contact__container {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
}

/* ── LEFT: lede ── */
.v3-contact__lede { display: flex; flex-direction: column; }
.v3-contact__lede .v3-eyebrow { color: rgba(255,255,255,0.85); margin: 0 0 22px; }
.v3-contact__lede .v3-eyebrow__rule { background: var(--altida-yellow); }

.v3-contact__title {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(44px, 5vw, 80px);
  line-height: 0.95; letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--altida-white);
  margin: 0 0 22px;
  text-wrap: balance;
}
/* Yellow square punctuation — replaces the period, doubles as a
   tiny brand mark next to the headline. */
.v3-contact__title-mark {
  display: inline-block;
  width: 0.18em; height: 0.18em;
  margin-left: 0.16em;
  background: var(--altida-yellow);
  vertical-align: 0.05em;
  transform: translateY(-0.02em);
}
.v3-contact__sub {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px); line-height: 1.55;
  color: rgba(255,255,255,0.72);
  max-width: 46ch; margin: 0 0 32px;
  text-wrap: pretty;
}
.v3-contact__sub em {
  font-style: italic;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
}

/* CTA: outlined yellow pill with a black square chip on the right
   that holds the arrow. Hover slides the chip to the right and
   fills the rest of the button yellow → inverts to black-on-white. */
.v3-contact__cta {
  appearance: none; cursor: pointer;
  position: relative;
  display: inline-flex; align-items: stretch; gap: 0;
  align-self: flex-start;
  padding: 0;
  background: var(--altida-yellow); color: var(--altida-pure-black);
  border: 0;
  font-family: var(--font-sans); font-weight: 800;
  font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase;
}
.v3-contact__cta-label {
  display: inline-flex; align-items: center;
  /* Vertical padding bumped to 22 px each side so the desktop button
     matches the hero CTAs' ~60 px height. */
  padding: 22px 22px 22px 26px;
}
.v3-contact__cta-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px;
  background: var(--altida-pure-black);
  color: var(--altida-yellow);
  position: relative;
  overflow: hidden;
}
.v3-contact__cta-arrow {
  display: inline-block;
  font-family: var(--font-body); font-size: 16px; line-height: 1;
  transition: transform 320ms var(--ease-mech);
}
.v3-contact__cta:hover .v3-contact__cta-arrow { transform: translateX(5px); }
/* No explicit focus styling — iOS Safari's persistent focus-after-tap
   state was rendering ANY explicit outline as a stuck border on the
   button. Matching .v3-btn (the hero CTAs) which also have no focus
   rule, leaving the browser default to handle keyboard nav cleanly. */
.v3-contact__cta:focus { outline: none; }
.v3-contact__cta:focus-visible { outline: none; }

/* ── RIGHT: slim contact rows ── */
.v3-contact__methods {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column;
  /* Yellow rule that fades to transparent toward the right. */
  border-top: 0;
  background-image: linear-gradient(
    to right,
    rgba(255, 236, 0, 0.85) 0%,
    rgba(255, 236, 0, 0.4) 40%,
    rgba(255, 236, 0, 0) 100%
  );
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 0;
  position: relative;
}
.v3-contact__method {
  position: relative;
  display: grid;
  grid-template-columns: 92px 1fr;
  align-items: baseline;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
/* Each row's key — tight uppercase, yellow. */
.v3-contact__method-key {
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--altida-yellow);
}
.v3-contact__method-stack { display: flex; flex-direction: column; gap: 4px; }

/* Values use an inner <span> wrapper so the underline animates
   only beneath the text, not the full grid cell. */
.v3-contact__method-val {
  display: inline-block;
  font-family: var(--font-body); font-weight: 500;
  font-size: clamp(15px, 1.1vw, 18px);
  line-height: 1.45; letter-spacing: 0;
  color: var(--altida-white);
  text-decoration: none;
  transition: color 200ms var(--ease-mech);
}
.v3-contact__method-val > span {
  display: inline;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size 360ms var(--ease-mech);
  padding-bottom: 2px;
}
a.v3-contact__method-val:hover { color: var(--altida-yellow); }
a.v3-contact__method-val:hover > span { background-size: 100% 1px; }
.v3-contact__method-val--addr { color: var(--altida-white); }

/* ── Responsive ── */
@media (max-width: 880px) {
  .v3-contact__container { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 480px) {
  .v3-contact__method { grid-template-columns: 64px 1fr; gap: 16px; }
}

/* ============================================================
   10. FOOTER
   ============================================================ */
.v3-footer {
  background: var(--altida-pure-black);
  color: var(--grey-300);
  padding: clamp(36px, 4.5vw, 60px) 0 32px;
  /* Overlap the section above by 1px so the dark footer paints over the
     hairline where the white page background would otherwise show through
     at the flush dark-section seam (Chrome sub-pixel rounding, narrow widths). */
  margin-top: -1px;
}
.v3-footer__grid {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(40px, 5vw, 80px);
  margin-bottom: clamp(40px, 5vw, 72px);
}
.v3-footer__brand img { height: 38px; width: auto; margin: 0 0 22px; display: block; }
.v3-footer__brand p {
  font-family: var(--font-body); font-size: 14px; line-height: 1.65;
  color: var(--grey-300); max-width: 38ch; margin: 0 0 24px;
}
.v3-footer__social {
  display: flex; gap: 18px; list-style: none; margin: 0; padding: 0;
}
.v3-footer__social a {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--grey-300);
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease-mech),
              transform var(--dur-fast) var(--ease-mech);
}
.v3-footer__social a svg {
  width: 22px; height: 22px; display: block;
}
.v3-footer__social a:hover {
  color: var(--altida-yellow);
  transform: translateY(-1px);
}

.v3-footer__col h3 {
  font-family: var(--font-sans); font-weight: 800;
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--altida-yellow); margin: 0 0 18px;
}
.v3-footer__col ul {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 10px;
}
.v3-footer__col a {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--grey-300); text-decoration: none;
  transition: color var(--dur-fast);
}
.v3-footer__col a:hover { color: var(--altida-yellow); }
.v3-footer__addr {
  font-family: var(--font-body); font-size: 14px; line-height: 1.5;
  color: var(--grey-300);
}

.v3-footer__bottom {
  border-top: 1px solid var(--grey-800);
  padding-top: 22px;
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  font-family: var(--font-mono); font-size: 12px;
  color: var(--grey-400);
  letter-spacing: 0.02em;
}
.v3-footer__credit { margin-left: auto; }
.v3-footer__credit a {
  color: var(--altida-white); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color var(--dur-fast) var(--ease-mech);
}
.v3-footer__credit a:hover { color: var(--altida-yellow); }

/* ============================================================
   WHATSAPP FLOAT (circle + pulse + badge)
   ============================================================ */
.v3-wa {
  position: fixed; right: 24px; bottom: 24px; z-index: 40;
  width: 56px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #25D366; color: #FFFFFF;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
  transition: transform var(--dur-fast) var(--ease-mech), box-shadow var(--dur-fast) var(--ease-mech);
}
.v3-wa:hover {
  transform: scale(1.06);
  box-shadow: 0 10px 24px rgba(0,0,0,0.22);
}
.v3-wa__icon { display: block; }

/* Pulse ring — concentric expanding circle behind the button */
.v3-wa::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: 50%;
  background: #25D366;
  z-index: -1;
  animation: v3-wa-pulse 1.8s cubic-bezier(0.35, 0, 0.25, 1) infinite;
}
@keyframes v3-wa-pulse {
  0%   { transform: scale(1);   opacity: 0.55; }
  80%  { transform: scale(1.7); opacity: 0;    }
  100% { transform: scale(1.7); opacity: 0;    }
}

/* Notification badge — top-right */
.v3-wa[data-badge]::after {
  content: attr(data-badge);
  position: absolute;
  top: -2px; right: -2px;
  min-width: 20px; height: 20px;
  padding: 0 5px;
  border-radius: 10px;
  background: #E5343F;
  color: #FFFFFF;
  font-family: var(--font-sans); font-weight: 700;
  font-size: 11px; line-height: 20px;
  text-align: center;
  box-shadow: 0 0 0 2px #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .v3-wa::before { animation: none; opacity: 0; }
}

/* ============================================================
   SECTION REVEAL ON SCROLL
   ============================================================ */
[data-section-reveal] {
  opacity: 0; transform: translate3d(0, 24px, 0);
  transition: opacity 800ms var(--ease-mech), transform 800ms var(--ease-mech);
  will-change: opacity, transform;
}
[data-section-reveal].is-revealed { opacity: 1; transform: none; }

/* ============================================================
   RESPONSIVE
   Breakpoint strategy:
     • 1280  – narrow desktop / 13" laptop
     • 1100  – iPad landscape upper / wide tablet
     • 1024  – iPad landscape (1024×768/1366)
     • 860   – iPad portrait + small tablet — major stack point
     • 768   – mid-tablet / large phone landscape
     • 640   – phones
     • 520   – small phones
     • 380   – very small phones
   ============================================================ */

/* — Narrow desktop / small laptop — keep desktop layouts but tighten
     the hero display title so it never punches the right edge. */
@media (max-width: 1280px) {
  .v3-hero__title { font-size: clamp(40px, 6.6vw, 80px); }
  .v3-projects__title { font-size: clamp(48px, 7vw, 88px); }
}

@media (max-width: 1100px) {
  .v3-fleet__grid { grid-template-columns: repeat(2, 1fr); }
  .v3-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .v3-cta__grid { grid-template-columns: 1fr; gap: 32px; }
  .v3-cta__cards { grid-template-columns: 1fr 1fr; }
}

/* — iPad landscape — desktop layouts hold but the hero feels heavy
     and the inline nav can no longer fit links + CTA flag without
     collision. Burger threshold raised twice — first to 1024 (matches what
     the verifier flagged at 924), then to 1200 on 2026-06-15 when HGV
     Maintenance was added as a 6th nav item and the 1025–1200 px range
     became overflow-prone with six items at the current label widths. */
@media (max-width: 1200px) {
  /* NAV — switch to burger from 1200 down so links don't crash the CTA */
  .v3-nav__inner {
    grid-template-columns: auto 1fr auto;
    padding-block: 16px;
    padding-right: var(--gutter);
  }
  .v3-nav__links { display: none; }
  .v3-nav__phone span { display: none; }
  .v3-nav__actions { display: none; }
  .v3-nav__burger { display: inline-flex; }

  .v3-hero { margin-top: -76px; min-height: max(640px, calc(100dvh + 51px)); }
  /* Bump hero content padding-top so the eyebrow clears the
     absolutely-positioned nav (~76 px tall here). */
  .v3-hero__content { padding-top: clamp(160px, 20vh, 220px); padding-bottom: clamp(24px, 6vh, 64px); }
  .v3-hero__title { font-size: clamp(44px, 8.5vw, 64px); margin-bottom: 24px; }
  .v3-hero__sub { font-size: 18px; max-width: 560px; }
  .v3-hero__ribbon--br { width: clamp(180px, 26vw, 280px); --rib-h: clamp(60px, 6vw, 80px); --nav-slant: 0.875; } /* navH 64 → 56/64 */

  .v3-contact__container { gap: clamp(36px, 5vw, 64px); grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
  .v3-contact__title { font-size: clamp(40px, 5.4vw, 64px); }

  /* Wedge — drop the dual-column intro at landscape iPad so the
     copy gets full width before stacking. */
  .v3-wedge__title { font-size: clamp(48px, 8vw, 76px); }
  .v3-faq__title { font-size: clamp(44px, 7vw, 72px); }
}

@media (max-width: 860px) {
  .v3-util__inner { font-size: 11px; letter-spacing: 0.12em; gap: 12px; }
  .v3-util__phone, .v3-util a { padding-block: 4px; }
  .v3-util__sep { display: none; }

  .v3-nav__inner { grid-template-columns: auto 1fr auto; padding-block: 16px; padding-right: var(--gutter); }
  .v3-nav__links { display: none; }
  .v3-nav__phone span { display: none; }
  .v3-nav__actions { display: none; } /* CTA flag hidden — quote routing via drawer */
  .v3-nav__burger { display: inline-flex; }
  .v3-nav::before { width: clamp(180px, 50vw, 285px); }

  .v3-hero { margin-top: -76px; min-height: max(640px, calc(100dvh + 51px)); }
  .v3-hero__ribbon--br { width: clamp(160px, 40vw, 240px); --rib-h: 56px; } /* --nav-slant inherits 0.875 (navH 64) */
  .v3-hero__cta-text--desktop { display: none; }
  .v3-hero__cta-text--mobile { display: inline; }

  .v3-split { grid-template-columns: 1fr; }
  /* 4/3 is a FLOOR, not a fixed size. The photo cards' caption block flows
     in-document on mobile (same mechanics as the maintenance/paintshop cards,
     which never clipped) so the card GROWS when the text wraps at narrow
     widths or large user font sizes. The old fixed-ratio + absolute-bottom
     content clipped the title upward out of the card on ≤430px phones
     (operator report 2026-07-08: "CRANE HIRE." title cut off on non-Max
     iPhones — content was 357px tall in a 292px card at 390w). */
  .v3-split__card { aspect-ratio: 4/3; }
  .v3-split__card:not(.v3-split__card--maintenance):not(.v3-split__card--paintshop) {
    /* The floor is expressed as min-height, NOT aspect-ratio: overflow:hidden
       disables a box's content-based minimum, so an aspect-ratio card can never
       grow for its own text — min-height has no such trap. 75vw = the 4:3 shape
       at full-bleed single-column width. */
    aspect-ratio: auto; min-height: 75vw;
    display: flex; flex-direction: column; justify-content: flex-end;
  }
  .v3-split__card:not(.v3-split__card--maintenance):not(.v3-split__card--paintshop) .v3-split__content {
    position: static;
  }

  /* Workshop + Paintshop sub-service trim on mobile — drop the inherited
     aspect-ratio: 4/3 so they auto-size to content, give them a smaller
     min-height than the Crane Hire / Transport cards above, and tighten
     the bottom padding. This makes the sub-services read visually
     "lesser" through size proportions rather than explicit labelling.
     Operator pull-up 2026-05-11: 4:3 forced ~110px of empty bottom
     padding on Paintshop especially. */
  .v3-split__card--maintenance,
  .v3-split__card--paintshop {
    aspect-ratio: auto;
    min-height: clamp(160px, 24vw, 220px);
    padding: clamp(20px, 5vw, 32px) clamp(24px, 6vw, 48px) clamp(14px, 3.6vw, 22px);
  }

  /* Single HGV maintenance eyebrow on mobile — only the Workshop card
     (first sub-card) carries the parent-service eyebrow. Paintshop's
     duplicate is hidden so the category reads once for the pair, not
     twice. The "Coming soon" pill on Paintshop is preserved (different
     class: .v3-split__tag--soon). */
  .v3-split__card--paintshop .v3-split__tag:not(.v3-split__tag--soon) {
    display: none;
  }

  .v3-wedge__container { grid-template-columns: 1fr; gap: 48px; }
  .v3-wedge__anchor { position: static; padding-top: 0; }
  .v3-wedge__title { font-size: clamp(36px, 9vw, 64px); }

  /* FAQ — collapse to single column at the same breakpoint as the
     wedge. Anchor stops being sticky and stacks above the list. */
  .v3-faq__container { grid-template-columns: 1fr; gap: 40px; }
  .v3-faq__anchor { position: static; padding-top: 0; }
  .v3-faq__title { font-size: clamp(36px, 9vw, 64px); }
  .v3-faq__q { font-size: clamp(18px, 2.6vw, 22px); }
  /* Diagram becomes a vertical timeline — 3 phase rows separated by 2
     handover dividers — so the THEM bar's three segments stay readable
     at phone widths where horizontal would crush each label. */
  /* Mobile bar gap set to 8px — just enough to clear the red pulse
     halo on handover boxes without feeling too spaced out.
     Desktop bar gap stays at 10px (base rule above). */
  .v3-wedge__bar { flex-direction: column; height: auto; gap: 8px; }
  /* Boxes stack content vertically on mobile — text on top, chevron
     below — so all chevrons land on the same vertical centre-line down
     the bar. Font-size + letter-spacing inherit from the base rules
     (unified at 11px / 0.18em across all five boxes). */
  .v3-wedge__seg,
  .v3-wedge__gap {
    width: 100%;
    flex: none;
    flex-direction: column;
    padding: 10px 12px;
  }
  .v3-wedge__seg { min-height: 48px; height: auto; }
  .v3-wedge__gap { min-height: 36px; height: auto; }
  /* Hide standalone arrow elements on mobile — chevrons render inline
     below each box's text via ::after pseudo (next block). */
  .v3-wedge__arrow { display: none; }
  /* Down-chevron centred below each box's text content (except seg-c —
     last in flow). All chevrons share the same horizontal centre line. */
  .v3-wedge__seg--a::after,
  .v3-wedge__seg--b::after,
  .v3-wedge__gap--1::after,
  .v3-wedge__gap--2::after {
    content: "";
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    margin-top: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(135deg);
    align-self: center;
  }
  /* Single ALTIDA bar stays a single-row "block" — no need for column. */
  .v3-wedge__row--us .v3-wedge__bar { flex-direction: row; }
  .v3-wedge__row--us .v3-wedge__seg--us { height: 56px; }
  .v3-wedge__beats { grid-template-columns: 1fr; }

  .v3-fleet__head { grid-template-columns: 1fr; }
  .v3-fleet__grid { grid-template-columns: 1fr; }

  /* Recent Work — stack each project vertically on mobile. Image always
     comes first so the photography stays the lead element. */
  .v3-project,
  .v3-project--image-left { grid-template-columns: 1fr; gap: 28px; }
  .v3-project--image-right .v3-project__copy,
  .v3-project--image-left  .v3-project__copy  { grid-column: 1; order: 2; }
  .v3-project--image-right .v3-project__media,
  .v3-project--image-left  .v3-project__media { grid-column: 1; order: 1; }
  .v3-projects__title { font-size: clamp(40px, 9vw, 56px); }

  .v3-why__row { grid-template-columns: 56px 1fr; gap: 20px; }

  .v3-cta__cards { grid-template-columns: 1fr; }
  .v3-cta__row { grid-template-columns: 1fr; }

  /* Contact — stack lede above methods, kill the giant watermark */
  .v3-contact__container { grid-template-columns: 1fr; gap: 40px; }
  .v3-contact__title { font-size: clamp(40px, 8vw, 60px); }
  .v3-contact__watermark { font-size: clamp(140px, 32vw, 240px); opacity: 1; }
  .v3-contact__corner { width: clamp(72px, 14vw, 120px); }

  .v3-footer__grid { grid-template-columns: 1fr 1fr; }
  .v3-footer__brand { grid-column: 1 / -1; }
}

/* — Mid-tablet / large phone landscape (768) — refines hero and
     project layout where 860 stack feels premature on landscape phones. */
@media (max-width: 768px) {
  .v3-hero__content { padding-top: clamp(120px, 16vh, 180px); padding-bottom: clamp(24px, 5vh, 56px); }
  .v3-hero__title { font-size: clamp(40px, 9vw, 56px); margin-bottom: 22px; }
  .v3-hero__sub { font-size: 17px; }
  .v3-hero__strip { padding: 14px var(--gutter); gap: clamp(16px, 3vw, 32px); }

  .v3-projects__title { font-size: clamp(36px, 9vw, 56px); }
  .v3-project__title { font-size: clamp(28px, 5vw, 40px); }

  .v3-fleet__title { font-size: clamp(36px, 8vw, 56px); }

  /* Contact — methods get a touch tighter on portrait tablet */
  .v3-contact__methods { background-position: 0 0; }
  .v3-contact__method { padding: 16px 0; gap: 20px; grid-template-columns: 80px 1fr; }
}

/* Mobile portrait — focused fixes for the top three sections + nav.
   At <= 640 px the util bar can no longer carry both emails alongside
   the phone, the nav's CTA flag stops fitting next to brand + burger,
   and the hero's desktop padding/min-height feels heavy on a phone. */
@media (max-width: 640px) {
  /* Footer credit — left-align on mobile (default desktop pushes it right
     via margin-left: auto). */
  .v3-footer__credit { margin-left: 0; }

  /* UTILITY BAR — the ORIGINAL one-line strip, restored verbatim from commit
     bb08ede^ (operator 2026-07-09: "everything was the same text size, evenly
     spaced, separators between each element"). display:contents flattens the
     left/right groups so space-between distributes phone | cranes | transport
     evenly across the width; ::before draws the hairline between phone and the
     first email; type is one uniform clamp for all three. Links carry an
     invisible extended hit area (padding + equal negative margin — the
     .v3-split__link trick) so tap targets stay ~24px without changing the
     bar's visual height. */
  .v3-util__inner { justify-content: space-between; flex-wrap: nowrap; font-size: clamp(8.5px, 2.5vw, 10px); letter-spacing: 0.02em; gap: 0; }
  .v3-util__left, .v3-util__right { display: contents; }
  .v3-util__right::before { content: ''; display: inline-block; width: 1px; height: 10px; background: var(--grey-700); align-self: center; }
  .v3-util__sep { display: inline-block; align-self: center; }
  .v3-util__phone, .v3-util a { font-size: inherit; letter-spacing: inherit; white-space: nowrap; padding-block: 8px; margin-block: -8px; }
  .v3-nav { top: 31px; } /* measured one-line bar (33px) - 2px tuck */
  /* Hero re-paired to the one-line bar (2026-07-09): keeps heroTop-navTop at the
     design's ~-70px, matching the 641-860 range. (Was tuned to the two-row bar.)
     min-height lives in the second ≤640 block below (it wins the cascade) —
     one home per value. */
  .v3-hero { margin-top: -72px; }
}

/* Narrow phones (original ladder restored): below 360px the hairline seps
   hide to keep one line alive; below ~348px the strip wraps to TWO lines —
   flex-wrap + centred rows — and .v3-nav { top } follows the taller bar so
   the yellow flag is never overlapped (operator 2026-07-09). */
@media (max-width: 359px) {
  .v3-util__sep, .v3-util__right::before { display: none; }
}
@media (max-width: 347px) {
  .v3-util__inner { flex-wrap: wrap; justify-content: center; gap: 2px 12px; }
  .v3-nav { top: 41px; } /* measured two-line bar (43px) - 2px tuck */
}

@media (max-width: 640px) {

  /* NAV — yellow flag scaled with viewport so brand + burger have room.
     Floor sized so wordmark + 56 px slash buffer fits down to 320 px viewports. */
  .v3-nav::before { width: clamp(195px, 55vw, 240px); }
  .v3-nav__inner { padding-right: var(--gutter); padding-left: var(--gutter); }
  /* Burger touch target — bump to 44 × 44 px (WCAG 2.2 minimum). */
  .v3-nav__burger { width: 44px; height: 44px; padding: 10px; }

  /* HERO — proportional to a phone viewport. +47px pairs with the one-line util
     bar's margin-top:-72px (2026-07-09; was +51 against the two-row bar) so the
     hero's bottom edge lands where it did before; 640px floor restored (it was
     silently lost when this rule overrode the first ≤640 block's max()). */
  .v3-hero { min-height: max(640px, calc(100dvh + 47px)); }
  .v3-hero__content {
    padding-top: clamp(112px, 16vh, 160px);
    padding-bottom: clamp(20px, 4vh, 40px);
  }
  .v3-hero__sub { font-size: 16px; line-height: 1.55; margin: 0 0 24px; max-width: none; }
  /* Mobile hero H1 — Lovelo display title sized down for phone widths.
     Tighter letter-spacing because uppercase Lovelo at smaller sizes
     reads cleaner with less negative tracking. */
  .v3-hero__title { font-size: clamp(36px, 10vw, 52px); margin: 0 0 22px; letter-spacing: -0.02em; }
  /* Side-by-side equal-width CTAs at phone widths — original height kept,
     horizontal padding tightened so both fit at iPhone widths. Falls back
     to stacked at 380 px and below where buttons get too cramped. */
  .v3-hero__actions { flex-direction: row; align-items: stretch; gap: 10px; flex-wrap: nowrap; }
  .v3-hero__actions .v3-btn { flex: 1 1 0; min-width: 0; justify-content: center; white-space: nowrap; }
  /* Match the contact section's "Send a message" button height (~45 px)
     by dropping padding 20→14 and font 14→12. Drawer CTA was already at
     these proportions. */
  .v3-hero__actions .v3-btn--lg { padding: 14px 14px; font-size: 12px; letter-spacing: 0.16em; gap: 6px; }
  .v3-hero__ribbon--br { width: clamp(140px, 50vw, 200px); --rib-h: 44px; --nav-slant: 0.736842; } /* navH 76 → 56/76 */

  /* WEDGE — already vertical at <= 860 (see breakpoint above).
     Matched font-size + letter-spacing across all five boxes at this
     small breakpoint too — both seg and gap render at 10px / 0.16em. */
  .v3-wedge__seg { min-height: 44px; font-size: 11px; letter-spacing: 0.16em; }
  .v3-wedge__gap { min-height: 32px; font-size: 11px; letter-spacing: 0.16em; padding: 6px 10px; }
  /* "How Altida works" bar — height matches the THEM bars (44 px). ALTIDA
     wordmark at 26 px so it reads as the bar's brand mark. translateY
     bumped to 3 px on mobile to keep the wordmark optically centred in
     the shorter bar (the 2 px desktop nudge was tuned for the 88 px bar). */
  .v3-wedge__row--us .v3-wedge__seg--us { height: 44px; font-size: 24px; }
  .v3-wedge__row--us .v3-wedge__seg--us span { transform: translateY(3px); }

  /* CONTACT — methods stack key/value vertically on phone */
  .v3-contact { padding-top: clamp(72px, 9vw, 128px); padding-bottom: clamp(48px, 12vw, 72px); }
  .v3-contact__title { font-size: clamp(36px, 10vw, 52px); margin-bottom: 18px; }
  .v3-contact__sub { font-size: 15px; margin-bottom: 24px; }
  /* Match the 48 px hero CTA height. The label's natural height comes
     out 5 px shorter due to font-weight 800 vs hero's 700 affecting
     line-height: normal in Inter — min-height enforces parity. */
  .v3-contact__cta { min-height: 48px; }
  .v3-contact__cta-label { padding: 14px 18px 14px 22px; }
  .v3-contact__cta-chip { width: 48px; }

  /* Modal — full-screen takeover on phones. Default 92vh max-height left
     room at the top for the page to peek through (especially with iOS
     Safari URL-bar dynamics or the on-screen keyboard); panel now fills
     the dynamic viewport so nothing of the page is visible while the
     modal is open. */
  .v3-cta-modal__panel {
    top: 0;
    max-height: 100dvh;
  }
  .v3-contact__method {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: 18px 0;
  }
  .v3-contact__method-key { font-size: 10px; letter-spacing: 0.28em; }
  .v3-contact__method-val { font-size: 17px; }
  .v3-contact__method-stack { gap: 2px; }

  /* FOOTER — extra breathing room around stacked column */
  .v3-footer { padding-top: 40px; }
  .v3-footer__grid { gap: 36px; }
}

@media (max-width: 520px) {
  .v3-hero__strip { font-size: 11px; gap: 14px; padding: 12px var(--gutter); }
  .v3-hero__strip li { gap: 8px; }
  .v3-footer__grid { grid-template-columns: 1fr; }
  .v3-wa { right: 16px; bottom: 16px; }

  /* Tighten gutters on small phones so content edge doesn't feel clipped */
  :root { --gutter: 20px; }
}

/* Very small phones (≤ 380, e.g. iPhone SE 1st gen) — final guard against
   overflow + tap-target collisions on the densest screens. */
@media (max-width: 380px) {
  :root { --gutter: 16px; }
  .v3-hero__title { font-size: clamp(30px, 10vw, 40px); }
  .v3-hero__sub { font-size: 15px; }
  .v3-drawer { width: 100vw; }
  .v3-contact__title { font-size: clamp(32px, 11vw, 44px); }
  .v3-projects__title, .v3-wedge__title, .v3-faq__title, .v3-fleet__title {
    font-size: clamp(32px, 10vw, 44px);
  }
  /* Hero CTAs — too cramped side-by-side on iPhone SE 1st gen widths;
     stack them again. */
  .v3-hero__actions { flex-direction: column; }
  .v3-hero__actions .v3-btn { flex: 1 1 auto; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .v3-util__pulse i { animation: none; }
  [data-reveal], [data-section-reveal] { opacity: 1; transform: none; }
  /* FAQ stagger reveal — items + anchor have their own opacity:0 base
     state; reset them so reduced-motion users don't see snap-fades. */
  .v3-faq__anchor, .v3-faq__item { opacity: 1; transform: none; }
}

/* ── 2026-07-01 polish — the Altida Difference diagram floated as a card
   (the operator-approved About offer-card treatment: mid-tone ground,
   14px radius, layered soft shadow) with subtle lift on the bars; FAQ
   rows get a soft hover wash. The wedge rules propagate to the About
   clone through this shared file, keeping clone parity. */
/* (2026-07-02: the diagram card-float was removed — the wedge is an open
   editorial section (unboxed beats, bare canvas) and the boxed visual read
   as a foreign object amongst them. The diagram sits openly on the canvas;
   the subtle dimension on the bars themselves stays.) */
.v3-wedge__seg { box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(10,10,10,0.08); }
.v3-wedge__seg--us { box-shadow: inset 0 0 0 1px rgba(255,200,0,0.20), 0 14px 26px -10px rgba(10,10,10,0.38); }
.v3-faq__btn:hover, .v3-faq__btn:focus-visible { background: rgba(255,255,255,0.85); }

/* ============================================================
   MOBILE POLISH PASS (2026-07-02)
   ============================================================ */

/* Aller renders U+00A0 (the no-break space) at ZERO advance width, so
   phone numbers written as 01246&nbsp;261915 lose their visible group
   gap and read as one unbroken 11-digit string. word-spacing applies to
   no-break spaces too, so this restores the gap while keeping the
   markup's wrap protection. Scoped to tel links — the only visible-text
   nbsp carriers outside the contact page (fixed in contact.css). */
a[href^="tel:"] { word-spacing: 0.24em; }

/* Touch ergonomics — extend hit areas on coarse pointers without moving
   the visual layout (padding compensated by negative margin). Underline
   links across the site sit at 15-23px tall; WCAG 2.5.8 wants 24px and
   comfortable thumbs want ~40px. */
@media (pointer: coarse) {
  .v3-split__link, .v3-risk__cta { padding-block: 10px; margin-block: -10px; }
  .v3-footer__social a { padding: 9px; margin: -9px; }
  .v3-footer__col a { display: inline-block; padding-block: 5px; margin-block: -5px; }
  .v3-footer__credit a { display: inline-block; padding-block: 8px; margin-block: -8px; }
  .v3-drawer__line { padding-block: 6px; }
  /* Unclassed anchors are the prose cross-links ("See Abnormal Loads",
     FAQ answers, modal subs) — all display:inline, so vertical padding
     extends the hit area without moving a single line of text. */
  main a:not([class]) { padding-block: 5px; }
}

/* The floating WhatsApp pill covers the footer's legal line when the
   page is scrolled to the very end — give the footer bottom clearance
   on phones so the last line can always scroll clear of it. */
@media (max-width: 640px) {
  .v3-footer__bottom { padding-bottom: 84px; }
}