/* ==========================================================================
   MH LIFT SERVICES
   Palette taken from the client's own logo: coral through warm orange on the
   stacked platform mark, slate for the wordmark. Light and architectural on
   purpose. Every other site in the portfolio opens on a dark hero, and a lift
   company selling access and safety reads better bright than moody.
   ========================================================================== */

:root {
  --coral:  #e9564c;
  --orange: #f0904f;
  --slate:  #4a4e54;
  --ink:    #22262b;
  --body:   #565c64;
  --line:   #e4e2de;
  --paper:  #ffffff;
  --tint:   #faf8f6;
  --dark:   #23272c;

  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --wrap: 74rem;
  --pad: clamp(1.25rem, 4vw, 3rem);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 { color: var(--ink); line-height: 1.08; letter-spacing: -0.02em; font-weight: 700; }

a { color: inherit; }

:focus-visible { outline: 2px solid var(--coral); outline-offset: 3px; }

.skip {
  position: absolute; top: 0; left: 0; z-index: 200;
  transform: translateY(-120%);
  background: var(--coral); color: #fff; text-decoration: none;
  padding: 0.85rem 1.3rem; font-size: 0.9rem;
}
.skip:focus { transform: translateY(0); }

/* ---------- eyebrow ----------
   No rule, dash or bar before this. A letterspaced label is an old editorial
   device and earns its place; the little accent dash beside it has become a
   tell, so it is deliberately absent. */
.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--coral); font-weight: 700; margin-bottom: 1.1rem;
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  padding: 0.85rem 1.5rem; border: 2px solid transparent;
  transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-lg { padding: 1.05rem 1.9rem; font-size: 1rem; }
.btn-solid { background: var(--coral); color: #fff; }
.btn-solid:hover { background: #d84a41; transform: translateY(-2px); }
.btn-line { border-color: var(--line); color: var(--ink); background: transparent; }
.btn-line:hover { border-color: var(--coral); color: var(--coral); transform: translateY(-2px); }

/* ---------- floor indicator ----------
   The one ornament on the page, and it is the client's own trade. Pointer-only
   and desktop-only: it needs a cursor and a spare 90px of gutter to make sense. */
.floors { display: none; }
@media (min-width: 1100px) {
  .floors {
    display: block; position: fixed; z-index: 40;
    left: 1.9rem; top: 50%; transform: translateY(-50%);
  }
  /* One axis, derived once. The rail and every dot are positioned from --rail and
     their own size, so they cannot drift apart: previously the line sat at 0.72rem
     and the dots at 0.42rem + half their width, two unrelated numbers that put the
     dots just under 2px left of the line. */
  .floors {
    --rail: 12px;
    --dot: 7px;
  }
  .floors-line {
    position: absolute; top: 0.4rem; bottom: 0.4rem;
    left: calc(var(--rail) - 0.5px);
    width: 1px; background: var(--line);
  }
  .floor {
    position: relative; display: flex; align-items: center; gap: 0.85rem;
    padding: 0.5rem 0; text-decoration: none;
  }
  .floor i {
    width: var(--dot); height: var(--dot); flex: none;
    margin-left: calc(var(--rail) - var(--dot) / 2);
    background: var(--line); border-radius: 50%;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .floor b {
    font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em;
    color: #b6b2ad; opacity: 0; transform: translateX(-4px);
    transition: opacity .25s ease, transform .25s ease, color .25s ease;
  }
  .floor:hover b, .floor.is-on b { opacity: 1; transform: none; }
  .floor.is-on i {
    background: var(--coral); transform: scale(1.5);
    box-shadow: 0 0 0 4px rgba(233, 86, 76, 0.14);
  }
  .floor.is-on b { color: var(--coral); }
}

/* ---------- nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: 1.5rem;
  padding: 0.9rem var(--pad);
  background: rgba(255, 255, 255, 0.94);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 0.85rem; text-decoration: none; }
.brand-mark { display: block; }
/* The vertical rule between mark and wordmark is straight off the client's logo. */
.brand-rule { width: 2px; height: 30px; background: var(--slate); flex: none; }
.brand-name {
  font-size: 1.18rem; font-weight: 700; color: var(--slate);
  letter-spacing: -0.015em; white-space: nowrap;
}
.nav-links { display: flex; gap: 1.6rem; margin-left: auto; }
.nav-links a {
  text-decoration: none; font-size: 0.95rem; font-weight: 600; color: var(--ink);
  padding: 0.3rem 0; border-bottom: 2px solid transparent; transition: border-color .18s;
}
.nav-links a:hover { border-bottom-color: var(--coral); }
.nav-call { flex: none; }

.burger {
  display: none; width: 44px; height: 44px; margin-left: auto;
  background: none; border: 1px solid var(--line); cursor: pointer;
  flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.burger span {
  display: block; width: 20px; height: 2px; background: var(--ink);
  transition: transform .25s ease, opacity .2s ease;
}
/* Hamburger becomes a cross while the menu is open. */
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-links, .nav-call { display: none; }
  .burger { display: flex; }
}

.mobile-menu {
  position: fixed; inset: 61px 0 auto 0; z-index: 55;
  background: var(--paper); border-bottom: 1px solid var(--line);
  padding: 0.6rem var(--pad) 1.4rem;
  display: flex; flex-direction: column; text-align: center;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu a {
  padding: 1rem 0; text-decoration: none; font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-call { color: #fff !important; background: var(--coral); margin-top: 1rem; }

/* Anchor targets must clear the sticky header, or a jumped-to section arrives with
   its heading tucked underneath the nav. The hero carries id="top": its own top sits
   just below the nav, so the negative result clamps to zero and it lands at the very
   top of the page, which is what the brand and the top floor marker want.

   id="top" is deliberately NOT on <header>. A sticky header is pinned to the viewport
   top at all times, so the browser considers it already in view and scrolls nowhere:
   the rail could go down but never back up to level 4. */
main section { scroll-margin-top: 72px; }

/* ---------- hero ---------- */
.hero {
  max-width: var(--wrap); margin: 0 auto;
  padding: clamp(3.5rem, 9vw, 7rem) var(--pad) clamp(3rem, 7vw, 5.5rem);
  /* minmax(0, ...) on the text column and a hard floor on the shaft: an fr track
     defaults to min-width:auto, so the headline's longest line was widening column
     one and squeezing the shaft down to a few pixels. */
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(210px, 0.65fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 6.4vw, 4.9rem);
  margin-bottom: 1.6rem;
}
.hero h1 em { font-style: normal; color: var(--coral); }
.lede { font-size: clamp(1.02rem, 1.35vw, 1.18rem); max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.8rem; margin: 2rem 0 2.2rem; }
.hero-points { list-style: none; display: grid; gap: 0.6rem; }
.hero-points li { position: relative; padding-left: 1.6rem; font-size: 0.97rem; }
.hero-points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 9px; height: 2px; background: var(--coral);
}

/* ---------- shaft ---------- */
/* ---------- hero lift ----------
   Motion is driven by script.js, not a fixed keyframe loop: the next floor is
   chosen at random each cycle, so the sequence never settles into an obvious
   repeat. CSS owns only the transitions, which keeps the easing in one place. */
.scene {
  width: 100%; max-width: 260px; justify-self: end;
  height: auto; display: block;
}

/* Duration is set per trip from JS, because a one-floor hop and a four-floor
   run should not take the same time. */
.car { transition: transform var(--trip, 900ms) cubic-bezier(.45,.02,.28,1); }
.car-shadow { transition: opacity 300ms ease; }

.door { transition: transform 620ms cubic-bezier(.4,0,.2,1); }
.is-open .door-l { transform: translateX(-44px); }
.is-open .door-r { transform: translateX(44px); }
.car-seam { transition: opacity 260ms ease; }
.is-open .car-seam { opacity: 0; }

/* Both arrows sit dim; only the direction of travel lights. Nothing rotates, so
   there is never a frame where the viewer has to work out which way it points. */
.ind-up, .ind-down { opacity: 0.2; transition: opacity 220ms ease; }
.is-up .ind-up { opacity: 1; }
.is-down .ind-down { opacity: 1; }

@media (max-width: 860px) { .scene { display: none; } }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; text-align: center; }
  .hero .lede { margin-inline: auto; }
  .hero-ctas { justify-content: center; }
  .hero-points { justify-items: center; }
  .hero-points li { padding-left: 0; padding-top: 0.9rem; }
  .hero-points li::before { left: 50%; top: 0; transform: translateX(-50%); }
  .scene { display: none; }
}

/* ---------- bands ---------- */
.band { padding: clamp(3.5rem, 8vw, 6.5rem) var(--pad); }
.band-tint { background: var(--tint); border-block: 1px solid var(--line); }
.band-head { max-width: var(--wrap); margin: 0 auto clamp(2.2rem, 5vw, 3.4rem); }
.band-head h2 { font-size: clamp(1.85rem, 3.9vw, 3rem); max-width: 24ch; }

/* ---------- services ---------- */
.svc {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.svc-item { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.4rem); }
.svc-num {
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em;
  color: var(--coral); margin-bottom: 1.5rem;
}
.svc-item h3 { font-size: 1.4rem; margin-bottom: 0.8rem; }
.svc-item ul { list-style: none; margin-top: 1.2rem; display: grid; gap: 0.45rem; }
.svc-item li {
  font-size: 0.92rem; padding-left: 1.1rem; position: relative; color: var(--slate);
}
.svc-item li::before {
  content: ""; position: absolute; left: 0; top: 0.66em;
  width: 5px; height: 5px; background: var(--orange);
}
@media (max-width: 900px) { .svc { grid-template-columns: 1fr; } }

/* ---------- steps ---------- */
.steps {
  max-width: var(--wrap); margin: 0 auto; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.4rem, 3vw, 2.2rem);
}
.steps li { border-top: 2px solid var(--coral); padding-top: 1.2rem; }
.step-n {
  display: block; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.16em; color: var(--coral); margin-bottom: 0.7rem;
}
.steps h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.steps p { font-size: 0.94rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }

/* ---------- coverage ---------- */
.cover {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.cover h2 { font-size: clamp(1.85rem, 3.9vw, 3rem); margin-bottom: 1.2rem; }
.cover-copy p + p { margin-top: 1rem; }
.cover-cta { margin-top: 1.8rem; }
.cover-list { list-style: none; display: grid; }
.cover-list li {
  display: grid; gap: 0.15rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line);
}
.cover-list li:first-child { border-top: 1px solid var(--line); }
.cover-list b { color: var(--ink); font-size: 1.02rem; }
.cover-list span { font-size: 0.92rem; }
@media (max-width: 860px) { .cover { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.band-dark { background: var(--dark); }
.band-dark h2, .band-dark .contact-copy p { color: #fff; }
.band-dark .contact-copy p { color: rgba(255,255,255,0.76); }
.contact {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}
.contact h2 { font-size: clamp(1.85rem, 3.9vw, 3rem); margin-bottom: 1.1rem; }
.contact-phone {
  display: inline-flex; flex-direction: column; margin-top: 2rem;
  text-decoration: none; padding: 1.2rem 1.6rem;
  border: 1px solid rgba(255,255,255,0.18);
  transition: border-color .2s ease, background .2s ease;
}
.contact-phone:hover { border-color: var(--coral); background: rgba(233,86,76,0.1); }
.contact-phone span {
  font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--orange); font-weight: 700;
}
.contact-phone b { font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; }

/* Facts panel replaces the old form. Same visual weight, nothing to maintain. */
.contact-facts { list-style: none; display: grid; }
.contact-facts li {
  display: grid; gap: 0.2rem; padding: 1.15rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.14);
}
.contact-facts li:first-child { border-top: 1px solid rgba(255,255,255,0.14); }
.contact-facts b { color: #fff; font-size: 1.05rem; }
.contact-facts span { color: rgba(255,255,255,0.62); font-size: 0.93rem; }

@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.foot { padding: clamp(2.5rem, 6vw, 4rem) var(--pad) 0; }
.foot-in {
  max-width: var(--wrap); margin: 0 auto;
  display: grid; grid-template-columns: auto auto 1fr; gap: 1.5rem;
  align-items: center;
}
.foot-tel a { font-size: 1.3rem; font-weight: 700; color: var(--ink); text-decoration: none; }
.foot-tel a:hover { color: var(--coral); }
.foot-meta { display: grid; gap: 0.2rem; justify-items: end; font-size: 0.88rem; }
.foot-base {
  max-width: var(--wrap); margin: 2rem auto 0;
  border-top: 1px solid var(--line); padding: 1.2rem 0 1.6rem;
  display: flex; justify-content: space-between; gap: 1rem; font-size: 0.85rem;
}
/* Credit stays quiet until hovered. It is the client's site, not ours. */
.credit a { color: inherit; text-decoration: none; font-weight: 700; transition: color .2s; }
.credit a:hover { color: var(--coral); }
@media (max-width: 860px) {
  .foot-in { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .foot-meta { justify-items: center; }
  .foot-base { flex-direction: column; align-items: center; text-align: center; }
}

/* ---------- sticky call bar ---------- */
.callbar { display: none; }
@media (max-width: 760px) {
  /* Three things were making this judder on a phone rather than sit still:
     1. It was not on its own compositor layer, so every scroll frame repainted it
        along with the page. translateZ(0) plus backface-visibility promotes it.
     2. A pulsing dot animated inside a fixed bar, which forces that repaint to
        happen continuously whether you are scrolling or not. The dot is gone: it
        was decoration on the one element that must not cost frames.
     3. bottom:0 sits under the iPhone home indicator and moves with Safari's
        collapsing toolbar. env(safe-area-inset-bottom) pads it clear. */
  .callbar {
    display: flex; align-items: center; justify-content: center;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: var(--coral); color: #fff; font-weight: 700;
    text-decoration: none;
    padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -6px 24px rgba(0,0,0,0.14);
    transform: translateZ(0);
    backface-visibility: hidden;
    will-change: transform;
  }
  body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}