/* EveryLift: mobile-first stylesheet, no framework */

/* Self-hosted so no visitor data is sent to Google's CDN (GDPR-safe).
   Variable font: one file carries every weight from 100 to 900. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
    U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* Near-black rather than #000: pure black on pure white vibrates on
     screens and reads harsher than it needs to. */
  --ink: #0d0d0d;
  --ink-soft: #4a4a4a;   /* body text, 9.0:1 on white */
  --ink-mute: #6b6b6b;   /* small print and labels, 5.3:1 on white */

  /* Dark panels. Kept separate from --ink so easing the panels never
     washes out the type. */
  --surface-dark: #111111;

  /* The one non-monochrome colour in the whole site. It is reserved for the
     24/7 breakdown line and nothing else. The moment it appears elsewhere
     it stops meaning "emergency". Only ever used ON dark (9.2:1 on #111);
     on white it would fail contrast badly. */
  --signal: #e8b83b;

  /* Red, for the emergency callout on white. Amber is caution; red is
     emergency, and it does not need darkening into ochre to be legible
     (5.88:1 on white). On dark it would need a lighter tone, around #ff5a5f. */
  --alert: #c8102e;

  --white: #ffffff;
  --bg: #ffffff;
  --bg-soft: #f4f4f3;
  --line: #e3e3e1;

  --space-1: 0.5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4rem;
  --space-6: 6rem;

  --max-width: 74rem;
  --measure: 38rem;

  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step-0: clamp(1rem, 0.97rem + 0.15vw, 1.0625rem);
  --step-1: clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --step-2: clamp(1.5rem, 1.32rem + 0.9vw, 2rem);
  --step-3: clamp(1.875rem, 1.55rem + 1.6vw, 2.75rem);
  --step-4: clamp(2.5rem, 1.95rem + 2.75vw, 4rem);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: var(--step-0);
  line-height: 1.7;
  color: var(--ink-soft);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

/* Headings carry the weight and the tight tracking. With one typeface doing
   the whole site, that contrast is what separates them from body copy. */
h1, h2, h3, h4 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0 0 var(--space-2);
  color: var(--ink);
  letter-spacing: -0.025em;
}

h1 { font-size: var(--step-4); line-height: 1.04; }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p { margin: 0 0 var(--space-2); }

a { color: var(--ink); text-decoration: none; }
a:hover, a:focus-visible { text-decoration: underline; }

img, svg { max-width: 100%; display: block; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: var(--space-3);
}

section { padding-block: var(--space-5); }

/* Keep anchor targets clear of the sticky header when jumping to them */
[id] { scroll-margin-top: 6rem; }

.section-alt { background: var(--bg-soft); }

/* Small uppercase label above headings */
.eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: var(--space-2);
}

.lede {
  font-size: var(--step-1);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.measure { max-width: var(--measure); }

/* Manual line breaks in headings, only honoured once there's room for them */
.br-desk { display: none; }

/* Thin rule used as a quiet divider */
.rule {
  width: 3rem;
  height: 2px;
  background: var(--ink);
  border: 0;
  margin: 0 0 var(--space-3);
}

/* Buttons: square corners and letterspaced caps, to read engineered
   rather than consumer-app. */
.btn {
  display: inline-block;
  padding: 1.05rem 2.25rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-align: center;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover, .btn:focus-visible { text-decoration: none; }

.btn-primary {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--white);
}
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--white);
  color: var(--ink);
}

.btn-outline {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline:hover, .btn-outline:focus-visible {
  background: var(--ink);
  color: var(--white);
}

.btn-white {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}
.btn-white:hover, .btn-white:focus-visible {
  background: transparent;
  color: var(--white);
}

.btn-light {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--white);
}
.btn-light:hover, .btn-light:focus-visible {
  background: var(--white);
  border-color: var(--white);
  color: var(--ink);
}

.btn-block { display: block; width: 100%; }

/* Text link with an underline that reads as a rule, not a hyperlink */
.link-more {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 0.25rem;
  align-self: flex-start;
}
.link-more:hover, .link-more:focus-visible {
  color: var(--ink-mute);
  border-color: var(--ink-mute);
  text-decoration: none;
}

/* Header / nav */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--space-2);
}

/* Shrink-to-fit so the sub-label can inherit the wordmark's exact width */
.logo {
  display: inline-block;
  color: var(--ink);
}
.logo:hover { text-decoration: none; }

.logo-name {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
/* "Every" light, "Lift" solid. The split does the work a second colour
   would normally do. */
.logo-name b { font-weight: 400; }

/* Letters are spread edge to edge rather than letter-spaced by guesswork,
   so the sub-label always lines up with the wordmark at any font size. */
.logo-sub {
  display: flex;
  justify-content: space-between;
  font-size: 0.5rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-top: 0.35rem;
}
.logo-sub i { font-style: normal; }

.nav-toggle {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--ink);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle span { margin: 6px 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-8px) rotate(-45deg); }

.main-nav {
  position: fixed;
  inset: 0 0 0 25%;
  background: var(--white);
  display: flex;
  flex-direction: column;
  padding: 6rem var(--space-4) var(--space-3);
  transform: translateX(100%);
  transition: transform 0.28s ease;
  box-shadow: -10px 0 40px rgba(0, 0, 0, 0.12);
}
.main-nav.is-open { transform: translateX(0); }

.main-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Scoped to the list so it can't out-specify .btn-primary on the CTA */
.main-nav ul a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.main-nav ul a:hover { color: var(--ink-mute); text-decoration: none; }

.main-nav .btn { margin-top: var(--space-4); }

.nav-current { color: var(--ink-mute) !important; }

/* Hero */
.hero { padding-block: var(--space-5); }

.hero-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.hero-figure {
  aspect-ratio: 4 / 5;
  background: var(--bg-soft);
  overflow: hidden;
  border: 1px solid var(--line);
}
.hero-figure img { width: 100%; height: 100%; object-fit: cover; }

/* Page header for interior pages */
.page-head {
  padding-block: var(--space-5) var(--space-4);
  border-bottom: 1px solid var(--line);
}

/* 24/7 breakdown bar: the only place --signal appears. Sits directly under
   the header on every page, because a trapped passenger should never have to
   navigate to find the number. */
.alert-bar {
  background: var(--surface-dark);
  color: rgba(255, 255, 255, 0.85);
}
.alert-bar .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem var(--space-2);
  padding-block: 0.7rem;
  text-align: center;
  font-size: 0.82rem;
}
.alert-bar .tag {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}
/* Small filled dot: a status light, not decoration */
.alert-bar .tag::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--signal);
  border-radius: 50%;
}
.alert-bar a {
  color: var(--white);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Feature band: dark, used for the emergency and credentials messages */
.band {
  background: var(--surface-dark);
  color: rgba(255, 255, 255, 0.82);
}
.band h2, .band h3 { color: var(--white); }
.band .eyebrow { color: rgba(255, 255, 255, 0.6); }
.band .lede { color: rgba(255, 255, 255, 0.82); }
.band .rule { background: var(--white); }
.band a { color: var(--white); }

/* The emergency variant of the band, on the home page */
.band-signal .eyebrow { color: var(--signal); }
.band-signal .rule { background: var(--signal); }

/* The emergency callout, inverted: dark type on white. Hairlines top and
   bottom do the separating that the black fill used to do, since the section
   below it is white too. --signal is not used here at all — the amber only
   has enough contrast on dark, and it keeps it unique to the top bar. */
.emergency {
  background: var(--bg);
  border-block: 1px solid var(--line);
}
.emergency .eyebrow {
  color: var(--alert);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
/* Status light, matching the one on the bar at the top of the page */
.emergency .eyebrow::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--alert);
  border-radius: 50%;
}
.emergency .phone-large { color: var(--ink); }
.emergency .phone-large:hover,
.emergency .phone-large:focus-visible { color: var(--ink-mute); }
.emergency .band-list li { border-color: var(--line); }

/* Phone number set large enough to be the obvious action on the page */
.phone-large {
  display: inline-block;
  font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--white);
  margin-bottom: var(--space-2);
}
.phone-large:hover { text-decoration: none; color: var(--signal); }

.band-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-4);
  display: grid;
  gap: 0;
  max-width: var(--measure);
}
.band-list li {
  padding: var(--space-2) 0;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  font-size: 0.95rem;
}
.band-list li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }

/* Services / sectors grid: hairline gaps rather than cards with shadows */
.services-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-4);
  background: var(--line);
  border: 1px solid var(--line);
}

.service-card {
  background: var(--white);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.section-alt .service-card { background: var(--white); }
.service-card h3 {
  font-size: var(--step-1);
  margin-bottom: 0;
}
.service-card p {
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-bottom: 0;
  flex-grow: 1;
}
/* Numbered index: quiet structure, and it makes a four-item grid read as
   a set rather than four loose boxes */
.card-index {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

/* Photographic hero. The copy sits on the image, so everything here exists to
   keep that text readable over a photograph that is light in the middle. */
.hero-photo {
  position: relative;
  padding-block: 0;
  background: var(--surface-dark);
  display: flex;
  align-items: center;
  /* Fills the screen below the breakdown bar and the sticky header, which come
     to 8.75rem together at desktop sizes, so the photograph shows as much of
     its height as it can without pushing the buttons past the fold. svh rather
     than vh: vh on mobile is the tallest the viewport ever gets, which would
     hide the copy behind the address bar. */
  min-height: clamp(30rem, calc(100svh - 8.75rem), 60rem);
  overflow: hidden;
}
.hero-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
}
/* A scrim, not a flat tint: heaviest at bottom left where the type sits, and
   clearing towards the top right so the lobby is still legible as a lobby. */
.hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(13, 13, 13, 0.74) 0%, rgba(13, 13, 13, 0.45) 38%, rgba(13, 13, 13, 0) 72%),
    linear-gradient(to top, rgba(13, 13, 13, 0.34) 0%, rgba(13, 13, 13, 0.16) 50%, rgba(13, 13, 13, 0.22) 100%);
}
.hero-photo-copy {
  position: relative;
  z-index: 1;
  padding-block: var(--space-5);
  max-width: var(--max-width);
}
.hero-photo-copy h1 { color: var(--white); }
.hero-photo-copy .eyebrow { color: rgba(255, 255, 255, 0.72); }
.hero-photo-copy .rule { background: var(--white); }
.hero-photo-copy .lede { color: rgba(255, 255, 255, 0.88); }

/* Detailed service blocks on services.html */
.service-detail {
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  margin-top: var(--space-5);
}
.service-detail:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.check-list {
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
  display: grid;
  gap: 0.75rem;
  max-width: var(--measure);
}
.check-list li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.75em;
  width: 0.75rem;
  height: 2px;
  background: var(--ink);
}

/* Numbered process steps */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: var(--space-4) 0 0;
  display: grid;
  gap: 1px;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.steps li {
  counter-increment: step;
  background: var(--white);
  padding: var(--space-3) var(--space-3) var(--space-3) 4.5rem;
  position: relative;
}
.steps li::before {
  content: "0" counter(step);
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.steps h3 { font-size: var(--step-1); margin-bottom: 0.25rem; }
.steps p { margin-bottom: 0; font-size: 0.95rem; }

/* Stat row */
.stat-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  margin-top: var(--space-4);
  background: rgba(255, 255, 255, 0.22);
  border-block: 1px solid rgba(255, 255, 255, 0.22);
}
.stat {
  background: var(--surface-dark);
  padding: var(--space-3) 0;
}
.stat .num {
  display: block;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: var(--white);
}
.stat .label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}

/* Forms */
.contact-form {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
}
.contact-form label {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.85rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  font: inherit;
  color: var(--ink);
  background: transparent;
}
.contact-form select { padding-inline: 0; }
.contact-form textarea {
  border: 1px solid var(--line);
  padding: 0.85rem;
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--ink);
}

.form-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0;
}

/* Definition rows (contact details) */
.detail-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: var(--measure);
}
.detail-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line);
}
.detail-list .label {
  flex: 0 0 7rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-top: 0.15rem;
}

/* Placeholder markers: visible on purpose so nothing ships unfilled */
.todo {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #7a5c00;
  background: #fdf4dc;
  border: 1px solid #e6d09a;
  padding: 0.1rem 0.4rem;
  white-space: nowrap;
}

/* Footer */
.site-footer {
  background: var(--surface-dark);
  color: rgba(255, 255, 255, 0.72);
  padding-block: var(--space-5) var(--space-3);
  font-size: 0.9rem;
}
.site-footer a { color: rgba(255, 255, 255, 0.85); }
.site-footer a:hover { color: var(--white); }

.footer-grid { display: grid; gap: var(--space-4); }

.footer-grid h4 {
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-2);
}

.footer-nav {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.6rem;
}

.footer-bottom {
  margin-top: var(--space-5);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.62);
}

/* Desktop */
@media (min-width: 60rem) {
  section { padding-block: var(--space-6); }

  .br-desk { display: inline; }

  .nav-toggle { display: none; }

  .main-nav {
    position: static;
    inset: auto;
    transform: none;
    flex-direction: row;
    align-items: center;
    gap: var(--space-4);
    box-shadow: none;
    padding: 0;
    background: transparent;
  }
  .main-nav ul {
    flex-direction: row;
    align-items: center;
    gap: var(--space-3);
  }
  .main-nav .btn { margin-top: 0; }

  .hero { padding-block: var(--space-6); }
  .hero-inner {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }
  .hero-copy { flex: 1 1 55%; }
  .hero-figure { flex: 1 1 45%; }

  .hero-photo-copy { padding-block: var(--space-6); }
  .hero-photo-copy .lede { max-width: 34rem; }

  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { padding: var(--space-4); }

  .grid-3 { grid-template-columns: repeat(3, 1fr); }


  .steps { grid-template-columns: repeat(4, 1fr); }

  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat { padding: var(--space-3) var(--space-3) var(--space-3) 0; }

  .footer-grid { grid-template-columns: 2fr 1fr 1.4fr; gap: var(--space-5); }
}