/* ===========================================================================
   LiftX — stylesheet
   Hand-written. No framework, no build step.

   Contents
     1.  Tokens
     2.  Reset & base
     3.  Typography
     4.  Layout primitives
     5.  Signature: diagonals & hazard rule
     6.  Buttons
     7.  Header & navigation
     8.  Footer
     9.  Home: hero
     10. Home: capability strip
     11. Home: services
     12. Home: approach band
     13. Home: CTA band
     14. Motion
     15. Responsive
   =========================================================================== */


/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Palette — the only hex in the file. */
  --ink:          #0B0B0C;
  --steel:        #16171A;
  --steel-line:   #26282C;
  --brass:        #C8952E;
  --brass-light:  #E9C877;
  --brass-deep:   #8A6420;
  --chrome:       #C6CBD1;
  --bone:         #F4F5F6;
  --slate:        #9AA0A6;

  /* Chrome gradient stops. */
  --chrome-dark:  #8E959B;
  --chrome-hi:    #F2F4F6;
  --chrome-mid:   #A9B0B6;

  /* Metal is a gradient, never a flat fill. Hero rule and primary button. */
  --metal-brass:  linear-gradient(135deg, var(--brass-deep) 0%, var(--brass-light) 48%, var(--brass) 100%);
  --metal-chrome: linear-gradient(135deg, var(--chrome-dark) 0%, var(--chrome-hi) 50%, var(--chrome-mid) 100%);

  /* There were two more ramps here, --metal-brass-text and
     --metal-chrome-text, cut near-vertically so the full dark-to-highlight
     traverse landed inside a 28px glyph. Their only consumer was the type
     lockup, which is now the supplied raster. Removed with it. */

  /* Type */
  --display: 'Saira Condensed', 'Arial Narrow', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* The diagonal. 96px over a 1440px viewport is ~3.8° — enough that two
     opposed slabs read as a deliberate crossing rather than a wonky seam.
     Capped at 7vw so it doesn't eat half the band on a phone. */
  --cut:      min(96px, 7vw);
  --cut-hero: clamp(34px, 5.5vw, 104px);
  --edge:     2px;

  /* Rhythm */
  --gutter:   clamp(1.25rem, 4vw, 2.5rem);
  --measure:  68ch;
  --section:  clamp(4.5rem, 9vw, 8rem);
  --radius:   2px;

  /* Tall enough for the three-line Group lockup. */
  --header-h: 88px;
}


/* --- 2. Reset & base ----------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--brass); text-decoration: none; }
a:hover { color: var(--brass-light); }

button { font: inherit; color: inherit; }

hr {
  border: 0;
  border-top: 1px solid var(--steel-line);
  margin: 0;
}

::selection { background: var(--brass); color: var(--ink); }

/* Visible keyboard focus, brass, everywhere. */
:focus-visible {
  outline: 2px solid var(--brass);
  outline-offset: 3px;
  border-radius: var(--radius);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  padding: 0.75rem 1.25rem;
  background: var(--brass);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-radius: var(--radius);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 1rem;
  color: var(--ink);
}


/* --- 3. Typography ------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 600; }
h4 { font-size: 1.1rem; font-weight: 600; }

p {
  margin: 0 0 1.25rem;
  max-width: var(--measure);
}
p:last-child { margin-bottom: 0; }

.lede {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--slate);
}

/* Eyebrows / labels — the only other use of the condensed face. */
.eyebrow {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  line-height: 1.4;
  color: var(--brass);
  margin: 0 0 0.9rem;
}

.text-brass { color: var(--brass); }
.text-slate { color: var(--slate); }



/* --- 4. Layout primitives ------------------------------------------------ */

.container {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section--tight { padding-top: 0; }

.section__head { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.section__head p { color: var(--slate); }

.grid { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }


/* --- 5. Signature: diagonals & hazard rule ------------------------------- */

/*  Sections don't meet in straight lines. A shallow diagonal cut with a 2px
    brass edge, alternating direction down the page so the whole scroll reads
    as a repeated X.

    Technique: the element itself is brass and clipped to the cut; a ::before
    carries the real background, clipped 2px further in. The gap is the edge. */

.cut { position: relative; }
.cut > * { position: relative; z-index: 1; }
.cut::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--steel);
}

/* Tilt A — both edges rise to the right. */
.cut--a {
  background: var(--brass);
  clip-path: polygon(
    0 var(--cut), 100% 0,
    100% calc(100% - var(--cut)), 0 100%
  );
}
.cut--a::before {
  clip-path: polygon(
    0 calc(var(--cut) + var(--edge)), 100% var(--edge),
    100% calc(100% - var(--cut) - var(--edge)), 0 calc(100% - var(--edge))
  );
}

/* Tilt B — both edges rise to the left. Mirrors A; together they make the X. */
.cut--b {
  background: var(--brass);
  clip-path: polygon(
    0 0, 100% var(--cut),
    100% 100%, 0 calc(100% - var(--cut))
  );
}
.cut--b::before {
  clip-path: polygon(
    0 var(--edge), 100% calc(var(--cut) + var(--edge)),
    100% calc(100% - var(--edge)), 0 calc(100% - var(--cut) - var(--edge))
  );
}

.cut--a, .cut--b {
  padding-block: calc(var(--section) + var(--cut));
}

/* Photo-backed band. The image goes on the ::before — the layer the cut bites
   through — so the diagonal slices the photograph and the parent's brass still
   shows through the 2px gap as the edge.
   No filters, no blend modes: these JPEGs are graded to the palette already and
   anything on top fights the grade and flattens the grain. */
.cut--photo::before {
  background-color: var(--ink);
  background-image:
    linear-gradient(
      to bottom,
      color-mix(in srgb, var(--ink) 52%, transparent) 0%,
      color-mix(in srgb, var(--ink) 46%, transparent) 100%
    ),
    var(--band-img);
  background-size: auto, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

.band-img-cta   { --band-img: url('../img/band-cta.jpg'); }
.band-img-about { --band-img: url('../img/band-about.jpg'); }

@supports (background-image: image-set(url('x.webp') type('image/webp'))) {
  .band-img-cta {
    --band-img: image-set(
      url('../img/band-cta.webp') type('image/webp'),
      url('../img/band-cta.jpg')  type('image/jpeg')
    );
  }
  .band-img-about {
    --band-img: image-set(
      url('../img/band-about.webp') type('image/webp'),
      url('../img/band-about.jpg')  type('image/jpeg')
    );
  }
}

/* Hazard stripe. A section marker, not a decoration — three or four uses on
   the whole site. */
.hazard {
  width: 120px;
  height: 6px;
  margin: 0 0 1.5rem;
  background: repeating-linear-gradient(
    45deg,
    var(--brass) 0 8px,
    var(--ink) 8px 16px
  );
}
.cut--a .hazard {
  background: repeating-linear-gradient(
    45deg,
    var(--brass) 0 8px,
    var(--ink) 8px 16px
  );
}


/* --- 6. Buttons ---------------------------------------------------------- */

/* Outline-first, no fills at rest, no icons. The weight lives in the hairline
   and the tracking, not in a slab of colour. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  background: transparent;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Primary — brass hairline and brass label, filling to solid brass on hover.
   The translucent ink bed is not a fill: over flat sections it is invisible
   (ink on ink), but over the hero photograph it stops the brass label landing
   on bright sky. Without it the label measured 3.55:1 at 360px. */
.btn--primary {
  border-color: var(--brass);
  color: var(--brass);
  background-color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background-color: var(--brass);
  color: var(--ink);
}
.btn--primary:active { background-color: var(--brass-deep); border-color: var(--brass-deep); color: var(--ink); }

/* Secondary — quieter still: chrome hairline, bone label. The hairline is a UI
   boundary and needs 3:1 in its own right, so it can't be a whisper. */
.btn--ghost {
  border-color: color-mix(in srgb, var(--chrome) 70%, transparent);
  color: var(--bone);
  background-color: color-mix(in srgb, var(--ink) 55%, transparent);
}
.btn--ghost:hover,
.btn--ghost:focus-visible {
  border-color: var(--chrome);
  background-color: color-mix(in srgb, var(--ink) 35%, transparent);
  color: var(--bone);
}

/* On the brass CTA band — inverted: ink fill, brass label. */
.btn--ink {
  background-color: var(--ink);
  border-color: var(--ink);
  color: var(--brass);
}
.btn--ink:hover,
.btn--ink:focus-visible {
  background-color: transparent;
  border-color: var(--ink);
  color: var(--ink);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.25rem;
}


/* --- 7. Header & navigation ---------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}
.header.is-stuck {
  background: color-mix(in srgb, var(--ink) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--steel-line);
}

/* Scrim. Over the hero the header is otherwise fully transparent, and the nav
   links measured 3.60-4.27:1 against the bright sky — below the 4.5 they need.
   This darkens the band the nav sits in while fading out, so the header still
   reads as floating rather than as a solid bar. */
.header::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 190%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 80%, transparent) 0%,
    color-mix(in srgb, var(--ink) 66%, transparent) 52%,
    transparent 100%
  );
  transition: opacity 0.3s ease;
}
/* Redundant once the solid stuck background is in. */
.header.is-stuck::before { opacity: 0; }

.header__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
}

/* --- Group lockup -------------------------------------------------------
   The supplied two-line lockup: LIFT X over the GROUP row with its brass
   rules. `liftx-lockup.png` 400x126, `liftx-lockup@2x.png` 800x252 — exact
   2x multiples, both 3.1746:1, so the width/height attributes on the <img>
   supply a ratio that is correct whichever source the browser picks. Nothing
   to override here: no aspect-ratio, no object-fit.

   The strapline the earlier three-line lockup carried is gone by design. In
   a header this size it rendered under 4.5px tall — texture rather than
   words. It survives in the img's alt, and the page's H1 does the work
   visually.                                                                */

.lockup {
  display: inline-flex;
  align-items: center;
}
.lockup:hover { color: inherit; }

.lockup__img {
  display: block;
  height: 61px;      /* 193.6px wide; the header is a fixed 88px */
  width: auto;
  max-width: none;   /* the global img reset would otherwise clamp this */
}

@media (max-width: 640px) {
  .lockup__img { height: 44px; }
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); }

.nav__list {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  display: inline-block;
  padding: 0.4rem 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bone);
  transition: color 0.2s ease;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--brass);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.28s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.nav__link:hover { color: var(--brass-light); }
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { color: var(--brass); }

.nav__cta { padding: 0.7rem 1.25rem; font-size: 0.9rem; }

.nav__toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  cursor: pointer;
}
.nav__toggle span {
  position: relative;
  display: block;
  width: 20px; height: 2px;
  background: var(--bone);
  transition: background-color 0.2s ease;
}
.nav__toggle span::before,
.nav__toggle span::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px; height: 2px;
  background: var(--bone);
  transition: transform 0.25s ease;
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded='true'] span { background: transparent; }
.nav__toggle[aria-expanded='true'] span::before { transform: translateY(6px) rotate(45deg); }
.nav__toggle[aria-expanded='true'] span::after  { transform: translateY(-6px) rotate(-45deg); }


/* --- 8. Footer ----------------------------------------------------------- */

.footer {
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  border-top: 1px solid var(--steel-line);
  background: var(--ink);
}

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: clamp(2rem, 4vw, 3.5rem);
}

.footer__blurb {
  color: var(--slate);
  font-size: 0.95rem;
  margin-top: 1.25rem;
  max-width: 34ch;
}

.footer h4 {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--brass);
  margin-bottom: 1.1rem;
}

.footer__list {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  gap: 0.6rem;
  font-size: 0.95rem;
}
.footer__list a { color: var(--slate); }
.footer__list a:hover { color: var(--bone); }

/* Trading address on the contact page. <address> italicises by default in
   every browser — reset it, same as the footer copy. */
.addr {
  font-style: normal;
  color: var(--slate);
  margin-bottom: 1rem;
}

/* The only outbound link on the site. Underlined, because it leaves — brass
   alone is the convention for internal links here. */
.maplink {
  text-decoration: underline;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

/* Registered trading address. <address> italicises by default in every
   browser; body copy here is Inter regular like the rest of the footer. */
.footer__address {
  margin-top: 0.6rem;
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--slate);
}
.footer__coverage {
  margin: 0.6rem 0 0;
  font-size: 0.95rem;
  color: var(--slate);
}

.footer__mark {
  width: 34px; height: 34px;
  flex: none;
  opacity: 0.9;
}

.footer__bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: 1.75rem;
  border-top: 1px solid var(--steel-line);
  color: var(--slate);
  font-size: 0.85rem;
}


/* --- 9. Home: hero ------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(92vh, 900px);
  padding-top: calc(var(--header-h) + 4rem);
  padding-bottom: calc(var(--cut-hero) + clamp(3.5rem, 7vw, 6rem));
  overflow: hidden;
  /* Steepest wedge on the site. Rises to the right. */
  background: var(--brass);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-hero)), 0 100%);
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--ink);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut-hero) - var(--edge)),
    0 calc(100% - var(--edge))
  );
}
/* <picture> is an inline box by default, which stops the percentage heights
   below from resolving. Make it a transparent full-size block instead. */
.hero__bg picture,
.pagehero__bg picture {
  display: block;
  width: 100%;
  height: 100%;
}

/* Rendered wider than the box and anchored left, so the crane — which sits
   centre-frame — is pushed right and out of the headline. The image only had
   46px of horizontal slack at width:100%, so object-position could not do this;
   it needed the extra width. max-width:none releases the global image reset,
   which was silently clamping any width above 100%.
   Measured behind the actual glyphs: edge energy 3.047 -> 2.582. */
.hero__bg img {
  position: absolute;
  top: -8%; left: 0;
  width: 120%;
  max-width: none;
  height: 116%;
  object-fit: cover;
  will-change: transform;
}
/* Overlay. The graded JPEGs already sit at ~51 mean luminance with nothing
   above 106, so the 60% originally specced for an untreated photo would bury
   the crane completely. One gradient, not two — layered alphas compound
   (two 40% layers make 64%, not 40%) and that was the trap.
   Measured against the brightest patch behind the H1, not the average. */
.hero__bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--ink) 42%, transparent) 0%,
    color-mix(in srgb, var(--ink) 36%, transparent) 55%,
    color-mix(in srgb, var(--ink) 40%, transparent) 100%
  );
}

.hero__inner { position: relative; z-index: 1; width: 100%; }

/* The hero previously repeated a small LIFT X mark above the H1. It sat
   directly under the header lockup and just read as the logo twice — removed. */

.hero h1 { margin-bottom: 1.5rem; }
.hero h1 span { display: block; }

/* Brass gradient rule under the H1 — the third and last gradient surface. */
.hero__rule {
  width: clamp(120px, 22vw, 260px);
  height: 4px;
  background-image: var(--metal-brass);
  margin-bottom: 1.75rem;
}

.hero__copy {
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  color: var(--bone);
  max-width: 54ch;
}

.hero__scroll {
  position: absolute;
  right: var(--gutter);
  bottom: calc(var(--cut-hero) + 2rem);
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
  writing-mode: vertical-rl;
}
.hero__scroll::after {
  content: '';
  width: 1px; height: 56px;
  background: linear-gradient(to bottom, var(--brass), transparent);
}


/* --- 10. Home: capability strip ------------------------------------------ */

.capstrip {
  padding-block: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid var(--steel-line);
}

.capstrip__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
}

.cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.1rem;
  align-items: start;
}
.cap__icon {
  width: 34px; height: 34px;
  color: var(--brass);
  flex: none;
}
.cap__icon svg { width: 100%; height: 100%; }
.cap h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  letter-spacing: 0.04em;
}
.cap p {
  font-size: 0.9rem;
  color: var(--slate);
  line-height: 1.55;
  margin: 0;
}


/* --- 11. Home: services -------------------------------------------------- */

.services__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.services__head p { color: var(--slate); max-width: 46ch; margin: 0; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--steel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  overflow: hidden;
  transition: transform 0.25s ease, border-color 0.25s ease;
}
/* The card carried a 2px brass rule along its top edge. The service
   illustrations now bake their own brass diagonal into the bottom of the
   drawing, and two brass rules in one card is one too many — the card's own
   rule is gone and hover is carried by the border alone. */
.card:hover,
.card:focus-within {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--brass) 40%, var(--steel-line));
}

/* No background here: the illustration is a 4:3 vector that paints its own
   --ink ground edge to edge, so anything behind it is a second background that
   never shows. The ratio is fixed on the box and repeated in the img's
   width/height attributes, so nothing shifts on load. */
.card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card__media img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
}

.card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.6rem 1.5rem 1.5rem;
}
/* A 28px brass line-icon sat above each card title — a crane glyph over a
   crane drawing, a shackle glyph over a shackle drawing. Removed: the
   illustration directly above says the same thing at full size. */
.card__body h3 { margin-bottom: 0.6rem; }
.card__body p {
  font-size: 0.93rem;
  color: var(--slate);
  line-height: 1.6;
  margin-bottom: 1.4rem;
}
.card__link {
  margin-top: auto;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brass);
}
.card__link::after {
  content: ' \2192';
  display: inline-block;
  transition: transform 0.2s ease;
}
.card:hover .card__link::after { transform: translateX(4px); }
/* Whole card clickable, link still the accessible target. */
.card__link::before { content: ''; position: absolute; inset: 0; z-index: 3; }


/* --- 12. Home: approach band --------------------------------------------- */

.approach__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.pillar {
  padding-top: 1.75rem;
  border-top: 1px solid var(--steel-line);
}
.pillar__num {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--brass);
  margin-bottom: 1rem;
}
.pillar h3 { margin-bottom: 0.75rem; }
.pillar p { color: var(--slate); font-size: 0.95rem; margin: 0; }


/* --- 13. Home: CTA band -------------------------------------------------- */

.ctaband {
  position: relative;
  background-image: var(--metal-brass);
  color: var(--ink);
  padding-block: calc(var(--section) + var(--cut));
  /* Tilt B — mirrors the approach band above it. */
  clip-path: polygon(
    0 0, 100% var(--cut),
    100% 100%, 0 calc(100% - var(--cut))
  );
  text-align: center;
}
.ctaband h2 {
  color: var(--ink);
  margin-bottom: 1rem;
}
.ctaband p {
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  margin-inline: auto;
  max-width: 46ch;
  font-weight: 500;
}
.ctaband .btn-row { justify-content: center; }
.ctaband .eyebrow { color: color-mix(in srgb, var(--ink) 70%, transparent); }


/* --- 14. Inner page hero ------------------------------------------------- */

.pagehero {
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--header-h) + clamp(3.5rem, 7vw, 6rem));
  padding-bottom: calc(var(--cut) + clamp(3rem, 6vw, 5rem));
  background: var(--brass);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut)), 0 100%);
}
.pagehero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: var(--steel);
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--cut) - var(--edge)),
    0 calc(100% - var(--edge))
  );
}
.pagehero__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Only heroes that carry a photograph need darkening — on the text-only pages
   the plain steel band is the point. */
.pagehero__bg:has(img)::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Light, near-even, with a slight lean to the left where the type sits.
     hero-services.jpg peaks at 84.6 — below the 86 threshold where --chrome
     would start failing at 4.5:1 even with no overlay at all — so this exists
     for depth and copy bedding, not for rescue. The crane is on the left in
     this frame, so heavy left-weighting would bury the subject. */
  background: linear-gradient(
    to right,
    color-mix(in srgb, var(--ink) 42%, transparent) 0%,
    color-mix(in srgb, var(--ink) 38%, transparent) 45%,
    color-mix(in srgb, var(--ink) 30%, transparent) 100%
  );
}

/* Secondary text needs more help over a photograph than over flat steel.
   Scoped to photo heroes only — on the plain bands slate is correct. */
.pagehero:has(.pagehero__bg img) p { color: var(--bone); }
.pagehero:has(.pagehero__bg img) .breadcrumb,
.pagehero:has(.pagehero__bg img) .breadcrumb a { color: var(--chrome); }
.pagehero:has(.pagehero__bg img) .breadcrumb a:hover { color: var(--brass-light); }
.pagehero:has(.pagehero__bg img) .eyebrow { color: var(--brass-light); }
.pagehero__inner { position: relative; z-index: 1; }
.pagehero h1 { font-size: clamp(2.25rem, 5.5vw, 4rem); margin-bottom: 1.25rem; }
.pagehero p { color: var(--slate); font-size: clamp(1rem, 1.5vw, 1.15rem); }

/* Mirrors the cut so direction alternates page to page. */
.pagehero--flip {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--cut)));
}
.pagehero--flip .pagehero__bg {
  clip-path: polygon(
    0 0, 100% 0,
    100% calc(100% - var(--edge)),
    0 calc(100% - var(--cut) - var(--edge))
  );
}

.breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.5rem;
  padding: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--slate);
}
.breadcrumb li + li::before { content: '/'; margin-right: 0.5rem; color: var(--brass); }
.breadcrumb a { color: var(--slate); }
.breadcrumb a:hover { color: var(--brass); }


/* --- 15. Services page --------------------------------------------------- */

.srow {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  scroll-margin-top: calc(var(--header-h) + 2rem);
}
.srow + .srow { margin-top: clamp(4rem, 8vw, 7rem); }

/* Alternate which side the image sits on. */
.srow--flip .srow__media { order: 2; }

.srow__media {
  position: relative;
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.srow__media img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
/* There was an 84px brass tick at the bottom-left here, an echo of the
   diagonal. The illustrations now carry a full-width brass diagonal along
   their own bottom edge, which the tick sat directly on top of. Removed. */

.srow h2 { margin-bottom: 1rem; }
.srow__body > p { color: var(--slate); }

.caplist {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.caplist li {
  position: relative;
  padding-left: 1.75rem;
  font-size: 0.95rem;
  color: var(--bone);
}
.caplist li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.62em;
  width: 10px; height: 2px;
  background: var(--brass);
}


/* --- Accordion ----------------------------------------------------------- */

.acc { margin-top: 2rem; }

.acc__item { border-top: 1px solid var(--steel-line); }
.acc__item:last-child { border-bottom: 1px solid var(--steel-line); }

.acc__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  width: 100%;
  padding: 1.15rem 0;
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bone);
  transition: color 0.2s ease;
}
.acc__btn:hover { color: var(--brass); }

/* Plus that becomes a minus. */
.acc__icon {
  position: relative;
  flex: none;
  width: 14px; height: 14px;
}
.acc__icon::before,
.acc__icon::after {
  content: '';
  position: absolute;
  left: 0; top: 6px;
  width: 14px; height: 2px;
  background: var(--brass);
  transition: transform 0.3s ease;
}
.acc__icon::after { transform: rotate(90deg); }
.acc__btn[aria-expanded='true'] .acc__icon::after { transform: rotate(0deg); }

.acc__panel {
  height: 0;
  overflow: hidden;
  transition: height 0.35s cubic-bezier(0.22, 0.7, 0.3, 1);
}
.acc__inner {
  padding: 0 0 1.5rem;
  color: var(--slate);
  font-size: 0.93rem;
}
.acc__inner p { margin-bottom: 0.9rem; }
.acc__inner ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.acc__inner li {
  position: relative;
  padding-left: 1.4rem;
}
.acc__inner li::before {
  content: '';
  position: absolute;
  left: 0; top: 0.6em;
  width: 6px; height: 6px;
  background: var(--brass);
  opacity: 0.7;
}


/* --- 16. Gallery & lightbox ----------------------------------------------

   DORMANT. gallery.html is out of the live site until LiftX's own job
   photography exists, and the twelve placeholder SVGs are deleted. These rules
   and the lightbox JS are kept intact so restoring the page is a markup job
   rather than a rebuild — initLightbox() returns early when there is no
   [data-lightbox] in the document, which is every remaining page.
   See README > Pre-launch checklist.                                       */

.gallery {
  columns: 3;
  column-gap: clamp(0.85rem, 1.6vw, 1.25rem);
}
.gallery__item {
  display: block;
  width: 100%;
  margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem);
  padding: 0;
  background: var(--steel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  break-inside: avoid;
  position: relative;
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.gallery__item img {
  width: 100%;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.gallery__item::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--brass);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.gallery__item:hover,
.gallery__item:focus-visible {
  border-color: color-mix(in srgb, var(--brass) 45%, var(--steel-line));
  transform: translateY(-3px);
}
.gallery__item:hover::after,
.gallery__item:focus-visible::after { opacity: 1; }
.gallery__item:hover img { transform: scale(1.03); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  grid-template-rows: auto 1fr auto;
  padding: clamp(0.75rem, 3vw, 2rem);
  background: color-mix(in srgb, var(--ink) 97%, transparent);
}
.lightbox.is-open { display: grid; }

.lightbox__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--slate);
}

/* Three columns — prev, image, next — so the controls stay beside the image
   at every width instead of needing to be repositioned on mobile. */
.lightbox__stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.5rem, 2vw, 1.5rem);
  min-height: 0;
  padding: clamp(0.5rem, 2vw, 1.5rem) 0;
}
.lightbox__img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border: 1px solid var(--steel-line);
}

.lightbox__cap {
  text-align: center;
  color: var(--slate);
  font-size: 0.9rem;
  min-height: 1.5em;
}

.lb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  flex: none;
  background: var(--steel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  color: var(--bone);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.lb-btn:hover { border-color: var(--brass); color: var(--brass); }
.lb-btn svg { width: 20px; height: 20px; }

.lightbox__img { justify-self: center; }


/* --- 17. About page ------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split__media {
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  overflow: hidden;
}
.split__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Anything Kristian needs to swap for the client's own words. */
.placeholder-copy {
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  background: var(--steel);
  border: 1px dashed color-mix(in srgb, var(--brass) 45%, transparent);
  border-radius: var(--radius);
  max-width: var(--measure);
}
.placeholder-copy::before {
  content: 'Placeholder copy';
  display: block;
  margin-bottom: 0.6rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
}
.placeholder-copy p { color: var(--slate); }
.placeholder-copy p:last-child { margin-bottom: 0; }

.factgrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.factgrid--2 { grid-template-columns: repeat(2, 1fr); }
.fact {
  padding: 1.6rem 1.4rem;
  background: var(--steel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
}
.fact h3 { font-size: 1.05rem; margin-bottom: 0.6rem; }
.fact p { color: var(--slate); font-size: 0.92rem; margin: 0; }


/* --- 18. Contact page ---------------------------------------------------- */

.routes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.routes--2 { grid-template-columns: repeat(2, 1fr); }
.route {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.9rem 1.6rem;
  background: var(--steel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  transition: transform 0.25s ease, border-color 0.25s ease;
}
.route::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--brass);
  opacity: 0.35;
  transition: opacity 0.25s ease;
}
.route:hover,
.route:focus-within { transform: translateY(-4px); border-color: color-mix(in srgb, var(--brass) 40%, var(--steel-line)); }
.route:hover::before,
.route:focus-within::before { opacity: 1; }

.route__icon { width: 30px; height: 30px; color: var(--brass); margin-bottom: 1.1rem; }
.route h3 { margin-bottom: 0.5rem; }
.route p { color: var(--slate); font-size: 0.92rem; margin-bottom: 1.3rem; }
.route__value {
  margin-top: auto;
  font-family: var(--display);
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  color: var(--brass);
  word-break: break-word;
}
.route__value::before { content: ''; position: absolute; inset: 0; }

.enq-list {
  display: grid;
  gap: 0.75rem;
  margin-top: 2rem;
  max-width: 640px;
}
.enq-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--steel);
  border: 1px solid var(--steel-line);
  border-radius: var(--radius);
  color: var(--bone);
  font-size: 0.95rem;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.enq-link:hover { border-color: var(--brass); color: var(--bone); transform: translateX(4px); }
.enq-link span:last-child { color: var(--brass); font-family: var(--display); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.8rem; white-space: nowrap; }

.coverage {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem 2rem;
  margin-top: 2rem;
  list-style: none;
  padding: 0;
}
.coverage li {
  padding-top: 0.85rem;
  border-top: 1px solid var(--steel-line);
  font-size: 0.95rem;
  color: var(--slate);
}


/* --- 19. Motion ---------------------------------------------------------- */

/* Reveals only apply once JS has confirmed it's running — no-JS sees content. */
.js .reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   0.6s cubic-bezier(0.22, 0.7, 0.3, 1),
    transform 0.6s cubic-bezier(0.22, 0.7, 0.3, 1);
  transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__bg img { transform: none !important; }
  .card:hover,
  .btn:hover,
  .route:hover,
  .enq-link:hover,
  .gallery__item:hover { transform: none; }
  .gallery__item:hover img { transform: none; }
}


/* --- 20. Responsive ------------------------------------------------------ */

@media (max-width: 1024px) {
  .capstrip__grid { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: repeat(2, 1fr); }
  .routes { grid-template-columns: repeat(2, 1fr); }
  .coverage { grid-template-columns: repeat(2, 1fr); }
  .gallery { columns: 2; }
}

@media (max-width: 860px) {
  .nav__toggle { display: inline-flex; }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.25rem var(--gutter) 2rem;
    background: var(--steel);
    border-bottom: 1px solid var(--steel-line);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav__list li { border-bottom: 1px solid var(--steel-line); }
  .nav__link {
    display: block;
    padding: 1rem 0;
    font-size: 1.1rem;
  }
  .nav__link::after { display: none; }
  .nav__cta {
    margin-top: 1.5rem;
    justify-content: center;
  }

  .approach__grid { grid-template-columns: 1fr; }
  .hero__scroll { display: none; }
  .services__head { align-items: flex-start; }

  /* Image always leads on narrow screens — the flip only makes sense in two
     columns. */
  .srow,
  .split { grid-template-columns: 1fr; }
  .srow--flip .srow__media { order: 0; }
  .factgrid { grid-template-columns: 1fr; }
}

/* Strapline drops here, so the header can come down with it. */
@media (max-width: 640px) {
  :root { --header-h: 66px; }
}

@media (max-width: 620px) {
  .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; }
  .capstrip__grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .routes { grid-template-columns: 1fr; }
  .coverage { grid-template-columns: 1fr; }
  .gallery { columns: 1; }
  .lb-btn { width: 40px; height: 40px; }

  .hero { min-height: auto; padding-top: calc(var(--header-h) + 3rem); }
  .btn-row .btn { flex: 1 1 100%; justify-content: center; }
}

@media (max-width: 380px) {
  :root { --gutter: 1.1rem; }
  .lockup__img { height: 44px; }
}