/* ===================================================================
   ZONE GROUP ELEVATORS — vertical motion build
   -------------------------------------------------------------------
   DIRECTION OF TRAVEL: up. Every animation in this file obeys it.
   Ambient light rises through the shaft, content arrives from below,
   sheens run down metal as the car climbs past them, the indicator
   car tracks the page. One machine, not a set of effects.

   Sibling to Zone Real Estate: same layout philosophy, type scale,
   spacing, glass surfaces, pill buttons, scroll reveal and modal.
   What changes is the palette and the metaphor — where that build is
   liquid and molten, this one is machined, cool and precise. Corners
   here stay true; nothing deforms. Precision is the brand.

   The palette is five values (see :root). Steel blue on graphite, with
   the light end of the ramp reserved for whatever the visitor should
   act on. Because the accent is cool rather than warm, contrast has to
   do the work heat used to: CTAs sit at the top of the ramp, structure
   sits at the bottom, and nothing in between competes with either.
   =================================================================== */

:root {
  /* -----------------------------------------------------------------
     THE PALETTE. Five values, everything else derived from them.
     Nothing in this file may introduce a sixth hue.

       Background  #0C1117    Surface  #151D25
       Primary     #6F9FBC    Secondary #BCD4E3
       Text        #F2F5F7

     The derived values are tints and shades of those five, never new
     colours: --surface-2 is one step of elevation above the surface,
     --depth is the primary taken almost to black for the ambient
     field, and --primary-deep / --primary-lift are the two ends of
     the metal ramp used in gradients.
     ----------------------------------------------------------------- */
  --bg:            #0C1117;
  --surface:       #151D25;
  --surface-2:     #1E2833;
  --depth:         #1B3A4E;

  --primary:       #6F9FBC;
  --primary-deep:  #4A7591;
  --primary-lift:  #8FB6CE;
  --secondary:     #BCD4E3;

  --text:          #F2F5F7;
  --text-mid:      rgba(242, 245, 247, 0.66);
  --text-dim:      rgba(242, 245, 247, 0.55);

  --glass:         rgba(188, 212, 227, 0.05);
  --glass-edge:    rgba(188, 212, 227, 0.14);
  --glass-lit:     rgba(111, 159, 188, 0.52);

  --shadow:        rgba(4, 7, 10, 0.62);

  /* The one light surface: the palette inverted, not a new set. */
  --plate-1:       #E9EFF4;
  --plate-2:       #D2DFE9;
  --plate-ink:     #0C1117;
  --plate-mid:     rgba(12, 17, 23, 0.70);
  --plate-dim:     rgba(12, 17, 23, 0.48);
  --plate-edge:    rgba(12, 17, 23, 0.14);
  --plate-primary: #2F5F7C;

  /* The single exception to the palette. An invalid field has to be
     unmistakable, and a blue error state is not. Never used decoratively,
     and never the only signal - the message says what is wrong too. */
  --danger:        #E2705C;

  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  --shell: 1180px;

  /* Corner radii. Machined, not organic: one scale, held everywhere. */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 40px;

  /* Scroll velocity, written by motion.js. 0 = parked, 1 = travelling. */
  --travel: 0;

  /* Lift easings: a car accelerates hard and decelerates long, and it
     never overshoots the floor. No bounce anywhere in this build. */
  --arrive: cubic-bezier(0.16, 0.84, 0.30, 1);
  --depart: cubic-bezier(0.60, 0.00, 0.25, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Sticky header clearance for the shaft indicator's jump links */
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

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

.skiplink {
  position: absolute;
  left: -9999px;
  top: 12px;
  z-index: 90;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  background: var(--primary);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
}
.skiplink:focus { left: 16px; }

.shell {
  max-width: var(--shell);
  margin: 0 auto;
  padding-left: 24px;
  padding-right: 24px;
}

/* ===================================================================
   AMBIENT FIELD
   Four soft columns of light climbing the shaft on unequal cycles
   (39s–67s) so the composite never repeats. They rise; they do not
   drift sideways.
   =================================================================== */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.field__shaft {
  position: absolute;
  bottom: -40vh;
  border-radius: 50%;
  filter: blur(78px);
  will-change: transform;
}

.field__shaft--a {
  left: -6vw;  width: 30vw; height: 66vh;
  background: radial-gradient(ellipse at 50% 50%, var(--depth), transparent 70%);
  opacity: 0.85;
  animation: climb-a 53s ease-in-out infinite;
}
.field__shaft--b {
  left: 34vw;  width: 26vw; height: 58vh;
  background: radial-gradient(ellipse at 50% 50%, var(--primary-deep), transparent 68%);
  opacity: 0.34;
  animation: climb-b 67s ease-in-out infinite;
}
.field__shaft--c {
  left: 62vw;  width: 22vw; height: 52vh;
  background: radial-gradient(ellipse at 50% 50%, var(--primary), transparent 66%);
  opacity: 0.16;
  animation: climb-c 39s ease-in-out infinite;
}
.field__shaft--d {
  left: 80vw;  width: 28vw; height: 62vh;
  background: radial-gradient(ellipse at 50% 50%, var(--depth), transparent 70%);
  opacity: 0.6;
  animation: climb-d 47s ease-in-out infinite;
}

/* Each climbs and sinks back. Horizontal drift is deliberately zero. */
@keyframes climb-a {
  0%, 100% { transform: translate3d(0, 0, 0) scaleY(1); }
  50%      { transform: translate3d(0, -78vh, 0) scaleY(1.18); }
}
@keyframes climb-b {
  0%, 100% { transform: translate3d(0, -12vh, 0) scaleY(1); }
  45%      { transform: translate3d(0, -92vh, 0) scaleY(0.86); }
}
@keyframes climb-c {
  0%, 100% { transform: translate3d(0, -20vh, 0) scaleY(0.9); }
  55%      { transform: translate3d(0, -86vh, 0) scaleY(1.24); }
}
@keyframes climb-d {
  0%, 100% { transform: translate3d(0, -6vh, 0) scaleY(1.1); }
  40%      { transform: translate3d(0, -70vh, 0) scaleY(0.92); }
}

/* Structural grid: the levels the building is divided into. Barely
   visible, but it stops the background reading as empty space. */
.field__grid {
  position: absolute;
  inset: 0;
  opacity: 0.5;
  background-image:
    repeating-linear-gradient(to bottom,
      rgba(188, 212, 227, 0.045) 0 1px, transparent 1px 116px),
    repeating-linear-gradient(to right,
      rgba(188, 212, 227, 0.030) 0 1px, transparent 1px 116px);
}

.field__grain {
  position: absolute;
  inset: -50%;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.wake {
  position: fixed;
  top: 0; left: 0;
  width: 420px; height: 420px;
  margin: -210px 0 0 -210px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(111, 159, 188, 0.10), transparent 62%);
  filter: blur(46px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.7s ease;
  will-change: transform;
}
.wake.is-live { opacity: 1; }

/* ===================================================================
   SIGNATURE — the shaft indicator
   A real floor indicator, not decoration: the car tracks scroll, the
   readout names the section, and every landing is a jump link.
   =================================================================== */
.shaft {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 14px 9px 12px;
  border: 1px solid rgba(188, 212, 227, 0.10);
  border-radius: 26px;
  background: rgba(9, 13, 18, 0.62);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.shaft__dir {
  font-size: 9px;
  line-height: 1;
  color: var(--primary);
  opacity: 0.35;
  transition: opacity 0.4s ease, transform 0.4s var(--arrive);
}
.shaft__dir.is-down { transform: rotate(180deg); }
.shaft__dir.is-moving { opacity: 1; }

.shaft__well {
  position: relative;
  width: 26px;
  height: 232px;
}

/* The guide rail the car runs on */
.shaft__rail {
  position: absolute;
  left: 50%;
  top: 0; bottom: 0;
  width: 1px;
  margin-left: -0.5px;
  background: linear-gradient(180deg,
    transparent, var(--glass-edge) 12%, var(--glass-edge) 88%, transparent);
}

.shaft__landings {
  position: absolute;
  inset: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.shaft__landing {
  position: absolute;
  left: 0;
  width: 26px;
  height: 18px;
  margin-top: -9px;
}

.shaft__tick {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: none;
  position: relative;
}

/* Each landing is a short sill line, brighter for the current floor */
.shaft__tick::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 1px;
  margin: -0.5px 0 0 -4.5px;
  background: var(--primary);
  opacity: 0.45;
  transition: width 0.45s var(--arrive), background 0.45s ease, opacity 0.45s ease;
}

.shaft__tick:hover::before { width: 17px; opacity: 0.9; }

.shaft__landing.is-here .shaft__tick::before {
  width: 17px;
  margin-left: -8.5px;
  background: var(--primary);
  opacity: 1;
}

/* The car itself: a small machined block with two door lines */
.shaft__car {
  position: absolute;
  left: 50%;
  top: 0;
  width: 16px;
  height: 22px;
  margin: -11px 0 0 -8px;
  border: 1px solid var(--glass-lit);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(111, 159, 188, 0.22), rgba(111, 159, 188, 0.06));
  box-shadow: 0 0 14px rgba(111, 159, 188, 0.30);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  will-change: transform;
}

.shaft__car-line {
  width: 1px;
  height: 12px;
  background: var(--secondary);
  opacity: 0.55;
}

.shaft__readout {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: var(--font-mono);
  text-align: center;
}

.shaft__floor {
  font-size: 13px;
  font-weight: 500;
  color: var(--secondary);
  letter-spacing: 0.06em;
}

.shaft__name {
  font-size: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
  max-width: 62px;
}

@media (max-width: 1080px) { .shaft { display: none; } }

/* ===================================================================
   ARRIVAL — content rises into place, then stops dead. No overshoot:
   a lift that bounced at the floor would be a broken lift.
   =================================================================== */
.js .rise {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
}

.js .rise.is-arrived {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--arrive),
    transform 0.95s var(--arrive);
}

.rise[data-delay="1"].is-arrived { transition-delay: 0.07s; }
.rise[data-delay="2"].is-arrived { transition-delay: 0.14s; }
.rise[data-delay="3"].is-arrived { transition-delay: 0.21s; }
.rise[data-delay="4"].is-arrived { transition-delay: 0.28s; }
.rise[data-delay="5"].is-arrived { transition-delay: 0.35s; }

/* ===================================================================
   Wordmark — the dot is a car that rises to the top and holds
   =================================================================== */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.wordmark__text { display: inline-flex; align-items: baseline; gap: 7px; }

.wordmark__sub {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--primary);
}

/* A car in a two-storey shaft, forever making the trip */
.wordmark__car {
  position: relative;
  width: 8px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid var(--glass-edge);
  overflow: hidden;
  flex: none;
}

.wordmark__car::after {
  content: "";
  position: absolute;
  left: 1px; right: 1px;
  height: 6px;
  bottom: 1px;
  border-radius: 1px;
  background: linear-gradient(180deg, var(--secondary), var(--primary));
  animation: lift 4.6s var(--arrive) infinite;
}

@keyframes lift {
  0%, 12%   { transform: translateY(0); }
  40%, 62%  { transform: translateY(-7px); }
  90%, 100% { transform: translateY(0); }
}

.wordmark--small { font-size: 15px; }
.wordmark--small .wordmark__sub { font-size: 9px; }

/* ===================================================================
   Top bar
   =================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(12, 17, 23, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--glass-edge);
}

.topbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.mainnav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

.navlink {
  position: relative;
  padding: 8px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-mid);
  transition: color 0.35s ease;
}

/* Underline grows from the floor up, like everything else here */
.navlink::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px;
  bottom: 2px;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--arrive);
}

.navlink:hover { color: var(--text); }
.navlink:hover::after,
.navlink.is-here::after { transform: scaleX(1); }
.navlink.is-here { color: var(--text); }

.topbar__actions { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.mainnav + .topbar__actions { margin-left: 0; }

/* Call button — warm metal, with a service ping */
.callbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  border-radius: var(--r-pill);
  color: var(--bg);
  background: linear-gradient(135deg, var(--primary-lift), var(--primary) 48%, var(--primary));
  background-size: 200% 200%;
  overflow: hidden;
  transition: transform 0.45s var(--arrive), box-shadow 0.45s ease, background-position 0.9s var(--depart);
  box-shadow: 0 6px 20px rgba(111, 159, 188, 0.26);
}

.callbtn:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 12px 30px rgba(111, 159, 188, 0.40);
}

.callbtn__ping {
  position: absolute;
  left: 50%; top: 50%;
  width: 8px; height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  border: 1.5px solid rgba(12, 17, 23, 0.45);
  animation: ping 4.2s ease-out infinite;
}

@keyframes ping {
  0%   { transform: scale(1); opacity: 0.5; }
  70%  { transform: scale(20); opacity: 0; }
  100% { transform: scale(20); opacity: 0; }
}

.callbtn__icon { position: relative; font-size: 17px; line-height: 1; }
.callbtn__text { position: relative; display: flex; flex-direction: column; line-height: 1.15; }

.callbtn__label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  opacity: 0.75;
}

.callbtn__number {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 13.5px;
  white-space: nowrap;
}

/* Menu button: two door leaves that part when the menu opens */
.menubtn {
  display: none;
  position: relative;
  width: 42px; height: 38px;
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
  background: var(--glass);
  overflow: hidden;
}

.menubtn__bar {
  position: absolute;
  left: 11px;
  height: 1.5px;
  background: var(--secondary);
  opacity: 0.85;
  transition: transform 0.45s var(--arrive), opacity 0.3s ease, width 0.45s var(--arrive);
}

/* Three levels, stacked, of unequal run — the same stepped language as
   the section seams. */
.menubtn__bar--1 { top: 12px; width: 20px; }
.menubtn__bar--2 { top: 18px; width: 14px; }
.menubtn__bar--3 { top: 24px; width: 20px; }

.menubtn[aria-expanded="true"] .menubtn__bar--1 { transform: translateY(6px) rotate(45deg); }
.menubtn[aria-expanded="true"] .menubtn__bar--2 { opacity: 0; width: 6px; }
.menubtn[aria-expanded="true"] .menubtn__bar--3 { transform: translateY(-6px) rotate(-45deg); }

/* Drawer */
.drawer {
  border-top: 1px solid var(--glass-edge);
  background: rgba(12, 17, 23, 0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  overflow: hidden;
}
.drawer[hidden] { display: none; }

.drawer__nav {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 10px 20px 18px;
  display: grid;
  gap: 2px;
}

.drawer__link {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 13px 6px;
  border-bottom: 1px solid var(--glass-edge);
  font-size: 16px;
  color: var(--text-mid);
}

.drawer__link:last-child { border-bottom: none; }
.drawer__link.is-here { color: var(--text); }

.drawer__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
  min-width: 22px;
}

@media (max-width: 1080px) {
  .mainnav { display: none; }
  .menubtn { display: block; }
  .topbar__inner { justify-content: space-between; }
}

/* ===================================================================
   Buttons — shared across hero, cards, form, modal
   =================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.03em;
  overflow: hidden;
  transition: transform 0.45s var(--arrive), background-position 0.9s var(--depart),
              border-color 0.4s ease, box-shadow 0.45s ease, color 0.4s ease;
}

.btn--solid {
  color: var(--bg);
  font-weight: 500;
  background: linear-gradient(135deg, var(--primary-lift), var(--primary) 48%, var(--primary));
  background-size: 200% 200%;
  box-shadow: 0 8px 24px rgba(111, 159, 188, 0.24);
}
.btn--solid:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 14px 34px rgba(111, 159, 188, 0.38);
}

.btn--ghost {
  color: var(--text);
  border-color: var(--glass-edge);
  background: var(--glass);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.btn--ghost:hover { border-color: var(--glass-lit); transform: translateY(-2px); }

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

.btn__label { position: relative; z-index: 2; }

/* Light running DOWN the button face as it rises past you */
.btn__sweep {
  position: absolute;
  left: 0; right: 0;
  top: -100%;
  height: 100%;
  background: linear-gradient(180deg, transparent, rgba(188, 212, 227, 0.18), transparent);
  transition: top 0.85s var(--depart);
}
.btn--ghost:hover .btn__sweep { top: 110%; }

/* ===================================================================
   Section furniture
   =================================================================== */
.band {
  position: relative;
  z-index: 2;
  padding: 96px 0;
}

.band--split { padding: 84px 0; }

/* The services intro hands straight over to the filter bar below it,
   so it keeps its top padding and drops its bottom. */
.band--intro { padding-bottom: 0; }
.band--intro .bandhead { margin-bottom: 38px; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--primary);
  margin: 0 0 20px;
}

.bandhead { max-width: 660px; margin: 0 0 52px; }

.bandhead__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 16px;
}

.bandhead__body {
  color: var(--text-mid);
  font-size: 16.5px;
  margin: 0;
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  gap: 62px;
  align-items: center;
}

.split--wide { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); margin-bottom: 54px; }

.band--reverse .split__col--media { order: -1; }

.split__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1.12;
  letter-spacing: -0.022em;
  margin: 0 0 18px;
}

.split__body {
  color: var(--text-mid);
  font-size: 16.5px;
  margin: 0 0 30px;
  max-width: 52ch;
}

.split__note {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  margin: 26px 0 0;
  padding-left: 16px;
  border-left: 1px solid var(--glass-lit);
}

@media (max-width: 900px) {
  .split, .split--wide { grid-template-columns: 1fr; gap: 44px; }
  .band--reverse .split__col--media { order: 0; }
}

/* Framed artwork. A machined frame with a hairline inner edge. */
.plate {
  position: relative;
  margin: 0;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 26px 60px var(--shadow);
}

.plate::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(188, 212, 227, 0.07);
  border-radius: calc(var(--r-lg) - 7px);
  pointer-events: none;
}

.plate img { width: 100%; height: auto; }
.plate--tall img { aspect-ratio: 4 / 3.4; object-fit: cover; }

/* ===================================================================
   Hero
   =================================================================== */
.hero {
  position: relative;
  z-index: 2;
  padding: 88px 0 146px;
}

.hero__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
  gap: 56px;
  align-items: center;
}

@media (max-width: 900px) {
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--primary);
  margin: 0 0 22px;
}

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(38px, 6.6vw, 70px);
  line-height: 1.04;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
}

.hero__line { display: block; }

/* Polished steel catching light — the second line is the metal one */
.hero__line--polish {
  background: linear-gradient(96deg,
    var(--secondary) 0%, var(--text) 18%, var(--secondary) 38%,
    var(--primary) 50%, var(--text) 68%, var(--secondary) 86%, var(--text) 100%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: polish 15s linear infinite;
}

@keyframes polish {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.hero__tagline {
  max-width: 50ch;
  color: var(--text-mid);
  font-size: 17px;
  margin: 0 0 34px;
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 52px 0 0;
  padding: 0;
}

.fact { margin: 0; }

.fact dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.fact dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--secondary);
}

/* -------------------------------------------------------------------
   The car panel. Landing doors stay shut until the panel reaches the
   viewport, then part once — the page's single scripted moment.
   ------------------------------------------------------------------- */
.carpanel {
  position: relative;
  margin: 0;
  width: 100%;
  max-width: 420px;
  justify-self: end;
}

.carpanel__frame {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1.12;
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: 0 34px 74px var(--shadow);
  transition: transform 0.7s var(--arrive), border-color 0.5s ease;
}

.carpanel:hover .carpanel__frame {
  transform: translateY(-5px);
  border-color: var(--glass-lit);
}

.carpanel__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  transition: transform 1.6s var(--depart);
}

.carpanel:hover .carpanel__photo { transform: scale(1.06); }

/* Two leaves, centre-opening, with a brushed finish */
.carpanel__leaf {
  position: absolute;
  top: 0; bottom: 0;
  width: 50.5%;
  background:
    repeating-linear-gradient(90deg,
      rgba(242, 245, 247,0.028) 0 2px, transparent 2px 5px),
    linear-gradient(180deg, var(--surface-2), var(--surface) 45%, var(--bg));
  transition: transform 1.5s var(--arrive);
}

.carpanel__leaf--l { left: 0;  border-right: 1px solid rgba(188, 212, 227, 0.16); }
.carpanel__leaf--r { right: 0; border-left:  1px solid rgba(188, 212, 227, 0.16); }

/* Default is open, so a visitor without JS sees the cabin, not a
   closed door. The .js rules below shut them until the panel arrives. */
.carpanel__leaf--l { transform: translateX(-101%); }
.carpanel__leaf--r { transform: translateX(101%); }

.js .carpanel__leaf--l,
.js .carpanel__leaf--r { transform: translateX(0); }

.js .carpanel.is-arrived .carpanel__leaf--l { transform: translateX(-101%); }
.js .carpanel.is-arrived .carpanel__leaf--r { transform: translateX(101%); }

/* Light running down the glass */
.carpanel__sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    transparent 30%, rgba(188, 212, 227, 0.14) 50%, transparent 70%);
  background-size: 100% 260%;
  animation: descend 11s ease-in-out infinite;
  pointer-events: none;
}

@keyframes descend {
  0%, 100% { background-position: 0 -80%; }
  50%      { background-position: 0 190%; }
}

/* Landing plate: the sign beside a real lift door */
.carpanel__plate {
  position: absolute;
  left: 22px;
  bottom: 20px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: rgba(12, 17, 23, 0.82);
  border: 1px solid var(--glass-edge);
  border-left: 2px solid var(--primary);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: border-color 0.45s ease;
}

.carpanel__label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: var(--primary);
}

.carpanel__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  color: var(--text);
}

.carpanel__note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
}

@media (max-width: 900px) {
  .carpanel { max-width: 360px; justify-self: start; margin-top: 48px; }
}

/* ===================================================================
   SEAMS — the joins between sections
   A stepped profile: floor levels passing the car window. Vertical
   scale is driven by --travel, so the steps deepen as you scroll.
   =================================================================== */
.seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 92px;
  pointer-events: none;
  overflow: hidden;
}

.seam--footer {
  position: relative;
  height: 86px;
  z-index: 2;
  transform: scaleY(-1);
}

.seam__svg {
  display: block;
  width: 200%;
  height: 100%;
  transform-origin: 50% 100%;
  transform: scaleY(calc(1 + var(--travel) * 0.42));
  transition: transform 0.5s var(--arrive);
}

.seam__back,
.seam__front {
  fill: none;
  stroke-linejoin: miter;
  vector-effect: non-scaling-stroke;
}

.seam__back {
  stroke: rgba(188, 212, 227, 0.16);
  stroke-width: 1;
  animation: pass 34s linear infinite;
}

.seam__front {
  stroke: rgba(111, 159, 188, 0.34);
  stroke-width: 1.5;
  animation: pass 21s linear infinite;
}

@keyframes pass {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===================================================================
   Filter bar
   A sticky element only travels inside its own container, so the bar
   is wrapped with the grid it filters and lets go at the end of it.
   =================================================================== */
.serviceszone { position: relative; z-index: 2; }

.filterbar {
  position: sticky;
  /* Matches the real header height, or the bar sits over the top of it */
  top: 73px;
  z-index: 25;
  background: rgba(12, 17, 23, 0.72);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--glass-edge);
  border-bottom: 1px solid var(--glass-edge);
}

.filterbar__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 13px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.filterbar__buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.filter {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  padding: 8px 18px;
  border-radius: var(--r-pill);
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease;
}

.filter span { position: relative; z-index: 2; }

/* The active state rises into the button from below */
.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(150deg, var(--primary-lift), var(--primary) 48%, var(--primary));
  transform: translateY(101%);
  transition: transform 0.55s var(--arrive);
  z-index: 1;
}

.filter:hover { color: var(--text); border-color: var(--glass-lit); }

.filter.is-active {
  color: var(--bg);
  border-color: transparent;
  font-weight: 500;
}

.filter.is-active::before { transform: translateY(0); }

.filterbar__count {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  white-space: nowrap;
}

@media (max-width: 700px) {
  .filterbar__count { display: none; }
  .filterbar__inner { padding: 11px 16px; overflow-x: auto; }
  .filterbar__buttons { flex-wrap: nowrap; }
  .filter { white-space: nowrap; }
}

/* ===================================================================
   Service cards
   =================================================================== */
.services {
  position: relative;
  z-index: 2;
  padding-top: 56px;
  padding-bottom: 96px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(316px, 100%), 1fr));
  gap: 26px;
  align-items: stretch;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.6s var(--arrive),
    border-color 0.45s ease,
    box-shadow 0.5s ease;
}

/* A guide rail down the left edge, filling upward on hover */
.card::before {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 2px;
  height: 100%;
  background: linear-gradient(0deg, var(--primary-deep), var(--primary) 50%, var(--secondary));
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.6s var(--arrive);
  z-index: 3;
}

.card:hover, .card:focus-visible {
  transform: translateY(-6px);
  border-color: var(--glass-lit);
  box-shadow: 0 24px 54px var(--shadow);
}

.card:hover::before, .card:focus-visible::before { transform: scaleY(1); }

.card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 24px 0;
}

.card__icon {
  flex: none;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  background: linear-gradient(160deg, rgba(188, 212, 227, 0.07), transparent);
  transition: border-color 0.45s ease, transform 0.55s var(--arrive);
}

.card:hover .card__icon { border-color: var(--glass-lit); transform: translateY(-3px); }

.card__icon svg {
  width: 23px; height: 23px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.card__tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--text-dim);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  padding: 5px 11px;
  white-space: nowrap;
}

.card__body { padding: 18px 24px 24px; display: flex; flex-direction: column; flex: 1; }

.card__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.22;
  letter-spacing: -0.015em;
  margin: 0 0 10px;
}

.card__lead {
  font-size: 14.5px;
  color: var(--text-mid);
  margin: 0 0 20px;
  flex: 1;
}

.card__actions {
  display: flex;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--glass-edge);
}

.card__more,
.card__offer {
  padding: 11px 17px;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: 12.5px;
  border: 1px solid var(--glass-edge);
  background: none;
  color: var(--text-mid);
  transition: border-color 0.4s ease, color 0.4s ease;
}

.card__more:hover, .card__offer:hover { border-color: var(--glass-lit); color: var(--text); }

.card__offer { color: var(--primary); border-color: rgba(111, 159, 188, 0.28); }

.services__empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 70px 20px;
  color: var(--text-dim);
  font-family: var(--font-mono);
  font-size: 13.5px;
}

/* ===================================================================
   Spec table — the six things measured before any proposal
   =================================================================== */
.spectable {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  background: var(--glass-edge);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  overflow: hidden;
}

.spectable__cell { padding: 16px 18px; background: rgba(21, 29, 37, 0.72); }

.spectable dt {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--primary);
  margin-bottom: 6px;
}

.spectable dd {
  margin: 0;
  font-size: 13.5px;
  color: var(--text-mid);
  line-height: 1.45;
}

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

/* Chips */
.chips { margin-top: 26px; }

.chips__label {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--text-dim);
  margin: 0 0 12px;
}

.chips__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.chips__list li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-pill);
  padding: 6px 13px;
  transition: border-color 0.4s ease, color 0.4s ease;
}

.chips__list li:hover { border-color: var(--glass-lit); color: var(--text); }

/* ===================================================================
   Phases — an ordered install sequence, so it is numbered
   =================================================================== */
.phases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}

.phase {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--glass-edge);
}

.phase:last-child { border-bottom: none; }

.phase__num {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
  padding-top: 3px;
  letter-spacing: 0.08em;
}

.phase__title { font-size: 16px; color: var(--text); margin: 0 0 3px; font-weight: 400; }
.phase__text { font-size: 14px; color: var(--text-mid); margin: 0; }

/* ===================================================================
   Upgrades — a parts list, not a sequence, so no numbers
   =================================================================== */
.upgrades {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr));
  gap: 1px;
  background: var(--glass-edge);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  overflow: hidden;
}

.upgrade {
  position: relative;
  padding: 22px 22px 24px;
  background: rgba(21, 29, 37, 0.66);
  transition: background 0.45s ease;
}

.upgrade:hover { background: rgba(30, 40, 51, 0.85); }

/* A short sill line that extends on hover */
.upgrade::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  width: 18px;
  height: 2px;
  background: var(--primary);
  opacity: 0.5;
  transition: width 0.5s var(--arrive), opacity 0.4s ease;
}

.upgrade:hover::before { width: 46px; opacity: 1; }

.upgrade__title {
  font-size: 15.5px;
  margin: 0 0 6px;
  font-weight: 400;
  color: var(--text);
}

.upgrade__text { font-size: 13.5px; color: var(--text-mid); margin: 0; }

/* ===================================================================
   Maintenance plans
   =================================================================== */
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

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

.plan {
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  background: var(--glass);
  padding: 22px 22px 24px;
  transition: border-color 0.45s ease, transform 0.55s var(--arrive);
}

.plan:hover { border-color: var(--glass-lit); transform: translateY(-4px); }

.plan__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 6px;
}

.plan__lead {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--primary);
  margin: 0 0 16px;
}

.plan__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }

.plan__points li {
  position: relative;
  padding-left: 20px;
  font-size: 13.5px;
  color: var(--text-mid);
}

/* Bullet: a small landing sill */
.plan__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 10px; height: 2px;
  background: var(--primary);
  opacity: 0.7;
}

/* ===================================================================
   Reasons
   =================================================================== */
.reasons {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(264px, 100%), 1fr));
  gap: 24px;
}

.reason {
  position: relative;
  padding-top: 20px;
  border-top: 1px solid var(--glass-edge);
}

.reason::before {
  content: "";
  position: absolute;
  left: 0; top: -1px;
  width: 34px; height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.55s var(--arrive);
}

.reason.is-arrived::before { transform: scaleX(1); }

.reason__title { font-size: 16px; margin: 0 0 7px; font-weight: 400; color: var(--text); }
.reason__text { font-size: 14px; color: var(--text-mid); margin: 0; }

/* ===================================================================
   PROCESS — the brushed steel plate
   The page's one light surface. Tokens are re-pointed inside it so
   every shared component keeps working without a second set of rules.
   =================================================================== */
.band--plate {
  --text: var(--plate-ink);
  --text-mid: var(--plate-mid);
  --text-dim: var(--plate-dim);
  --glass-edge: var(--plate-edge);
  --glass: rgba(12, 17, 23, 0.03);
  --primary: var(--plate-primary);
  --primary-lift: #4B7C9C;
  --primary-deep: #234B64;
  --secondary: #3E6C8A;
  --glass-lit: rgba(47, 95, 124, 0.45);

  color: var(--plate-ink);
  background:
    repeating-linear-gradient(90deg,
      rgba(12, 17, 23, 0.018) 0 1px, transparent 1px 4px),
    linear-gradient(168deg, var(--plate-1), var(--plate-2));
  border-top: 1px solid rgba(188, 212, 227, 0.18);
  border-bottom: 1px solid rgba(188, 212, 227, 0.18);
}

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  gap: 0;
  border-top: 1px solid var(--plate-edge);
}

.step {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 18px;
  padding: 24px 24px 26px 0;
  border-bottom: 1px solid var(--plate-edge);
}

/* Floor number in a sill, because the process really is a sequence */
.step__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--plate-primary);
  padding-top: 4px;
  letter-spacing: 0.06em;
}

.step__num::after {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  margin-top: 9px;
  background: var(--plate-primary);
  opacity: 0.5;
}

.step__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17.5px;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}

.step__text { font-size: 14.5px; color: var(--plate-mid); margin: 0; }

/* ===================================================================
   Offer form
   =================================================================== */
.offer {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.05fr);
  gap: 62px;
  align-items: start;
}

@media (max-width: 900px) { .offer { grid-template-columns: 1fr; gap: 40px; } }

.offer__list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.offer__list li {
  position: relative;
  padding-left: 22px;
  font-size: 15px;
  color: var(--text-mid);
}

.offer__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 12px; height: 2px;
  background: var(--primary);
  opacity: 0.75;
}

.form {
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-lg);
  background: rgba(21, 29, 37, 0.62);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 28px;
}

@media (max-width: 520px) { .form { padding: 22px 18px; } }

.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.field-wrap { display: flex; flex-direction: column; gap: 7px; }
.field-wrap--full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .form__grid { grid-template-columns: 1fr; }
  .field-wrap { grid-column: 1 / -1; }
}

.field-wrap label {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-dim);
}

.field-wrap input,
.field-wrap select,
.field-wrap textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  background: rgba(12, 17, 23, 0.6);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  transition: border-color 0.35s ease, background 0.35s ease;
}

.field-wrap textarea { resize: vertical; min-height: 116px; line-height: 1.55; }

.field-wrap select {
  appearance: none;
  -webkit-appearance: none;
  /* Chevron pointing up: this is a lift, and it is going up */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 6.5 L6 1.5 L11 6.5' fill='none' stroke='%236F9FBC' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px;
  padding-right: 36px;
}

.field-wrap select option { background: var(--surface); color: var(--text); }

.field-wrap input::placeholder,
.field-wrap textarea::placeholder { color: rgba(242, 245, 247, 0.36); }

.field-wrap input:focus,
.field-wrap select:focus,
.field-wrap textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: rgba(12, 17, 23, 0.85);
}

.field-wrap.is-invalid input,
.field-wrap.is-invalid select,
.field-wrap.is-invalid textarea { border-color: var(--danger); }

.field-msg {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--danger);
  min-height: 0;
}

.form__error {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--danger);
  border: 1px solid rgba(226, 112, 92, 0.4);
  background: rgba(226, 112, 92, 0.08);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  margin: 0 0 18px;
}

.form__note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin: 14px 0 0;
  text-align: center;
}

#formSubmit { margin-top: 20px; }

/* Prepared-request panel */
.sent {
  border: 1px solid var(--glass-lit);
  border-radius: var(--r-lg);
  background: rgba(21, 29, 37, 0.7);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 32px 28px;
  text-align: center;
}

.sent[hidden] { display: none; }

.sent__mark {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin: 0 auto 18px;
  border: 1px solid var(--glass-lit);
  border-radius: 50%;
}

.sent__mark svg {
  width: 26px; height: 26px;
  fill: none;
  stroke: var(--primary);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sent__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  margin: 0 0 8px;
}

.sent__note { color: var(--text-mid); font-size: 14.5px; margin: 0 0 24px; }

.sent__actions { display: grid; gap: 10px; }

.sent__back {
  margin-top: 18px;
  background: none;
  border: none;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sent__back:hover { color: var(--text); }

/* ===================================================================
   Contact
   =================================================================== */
.contacts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(264px, 100%), 1fr));
  gap: 1px;
  background: var(--glass-edge);
  border: 1px solid var(--glass-edge);
  border-radius: var(--r-md);
  overflow: hidden;
}

.contact {
  padding: 26px 24px 28px;
  background: rgba(21, 29, 37, 0.66);
  transition: background 0.45s ease;
}

.contact:hover { background: rgba(30, 40, 51, 0.86); }

.contact__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--primary);
  margin-bottom: 10px;
}

.contact__value {
  display: block;
  font-size: 16.5px;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* An email address is one word and reads badly split across lines, so
   long values step down a size rather than breaking. */
.contact__value--long { font-size: 14.5px; letter-spacing: -0.005em; }

a.contact__value:hover { color: var(--secondary); }

.contact__note {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
  margin-top: 7px;
}

/* ===================================================================
   Detail panel — the doors part, the panel is behind them
   =================================================================== */
.detail {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.detail[hidden] { display: none; }

.detail__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 7, 10, 0.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.45s ease both;
}

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

.detail__panel {
  position: relative;
  width: min(760px, 100%);
  max-height: min(88vh, 940px);
  background: rgba(21, 29, 37, 0.94);
  border: 1px solid var(--glass-edge);
  backdrop-filter: blur(26px) saturate(1.2);
  -webkit-backdrop-filter: blur(26px) saturate(1.2);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: 0 44px 96px var(--shadow);
  animation: arrive-panel 0.6s var(--arrive) both;
}

/* Rises into the frame and stops level. No bounce. */
@keyframes arrive-panel {
  0%   { opacity: 0; transform: translateY(34px) scale(0.985); }
  100% { opacity: 1; transform: none; }
}

.detail__scroll { overflow-y: auto; max-height: min(88vh, 940px); }

.detail__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 3;
  width: 40px; height: 40px;
  border: 1px solid var(--glass-edge);
  border-radius: 50%;
  background: rgba(12, 17, 23, 0.8);
  color: var(--text);
  font-size: 22px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.4s ease, transform 0.5s var(--arrive), border-color 0.4s ease;
}

.detail__close:hover {
  background: linear-gradient(150deg, var(--primary-lift), var(--primary));
  color: var(--bg);
  border-color: transparent;
  transform: rotate(90deg);
}

.detail__photo { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.detail__body { padding: 28px 32px 34px; }

@media (max-width: 560px) { .detail__body { padding: 22px 20px 30px; } }

.detail__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--bg);
  background: linear-gradient(135deg, var(--primary-lift), var(--primary));
  padding: 5px 13px;
  border-radius: var(--r-pill);
  margin-bottom: 14px;
}

.detail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 29px;
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}

.detail__lead { font-size: 16px; color: var(--text); margin: 0 0 18px; }

.detail__text {
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text-mid);
  margin: 0 0 26px;
}

.detail__subhead {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin: 0 0 14px;
}

.detail__points {
  list-style: none;
  padding: 0;
  margin: 0 0 30px;
  display: grid;
  gap: 10px;
}

.detail__points li {
  position: relative;
  padding-left: 24px;
  font-size: 14.5px;
  color: var(--text-mid);
}

/* Bullets are landing sills, stacked up the shaft */
.detail__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 10px;
  width: 13px; height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  opacity: 0.85;
}

.detail__actions { display: grid; gap: 10px; }

.detail__note {
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin: 14px 0 0;
}

@media (max-width: 560px) {
  .detail { padding: 0; }
  .detail__panel { width: 100%; height: 100%; max-height: 100vh; border-radius: 0; }
  .detail__scroll { max-height: 100vh; }
  .detail__title { font-size: 24px; }
}

/* ===================================================================
   Footer
   =================================================================== */
.footer {
  position: relative;
  z-index: 2;
  padding: 24px 0 76px;
}

.footer__inner { text-align: center; }

.footer .wordmark { justify-content: center; }

.footer__note {
  color: var(--text-mid);
  font-size: 14.5px;
  margin: 16px auto 22px;
  max-width: 46ch;
}

.footer__phone {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 16.5px;
  color: var(--text);
  border: 1px solid var(--glass-edge);
  background: var(--glass);
  padding: 14px 30px;
  border-radius: var(--r-pill);
  transition: border-color 0.45s ease, transform 0.5s var(--arrive);
}

.footer__phone:hover { border-color: var(--glass-lit); transform: translateY(-2px); }

.footer__family {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  margin: 26px 0 0;
}

.footer__family a { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.footer__family a:hover { color: var(--secondary); }

/* ===================================================================
   Small screens
   =================================================================== */
@media (max-width: 560px) {
  .band { padding: 68px 0; }
  .band--split { padding: 64px 0; }
  .hero { padding: 64px 0 140px; }
  .shell { padding-left: 18px; padding-right: 18px; }
  .hero__inner { padding-left: 18px; padding-right: 18px; }
  .callbtn__label { display: none; }
  .callbtn { padding: 8px 15px; gap: 8px; }
  .callbtn__number { font-size: 12.5px; }
  .callbtn__icon { font-size: 15px; }
  /* "ZONE GROUP ELEVATORS" on one line pushes the header past the
     viewport, so on phones the division name sits under the group name. */
  .wordmark { font-size: 13px; letter-spacing: 0.03em; gap: 7px; }
  .wordmark__text {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    line-height: 1.1;
  }
  .wordmark__sub { font-size: 8px; letter-spacing: 0.16em; }
  .wordmark__car { width: 6px; height: 15px; }
  .topbar__inner { padding: 11px 16px; gap: 10px; }
  .hero__ctas .btn { flex: 1 1 100%; }
  .step { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-right: 0; }
  .filterbar { top: 61px; }
}

/* On the narrowest phones the wordmark, the number and the menu will
   not all fit. The call control keeps its tap target and drops to an
   icon; the number is still in the menu, the contact grid and the
   footer, and script.js puts it on the link's accessible name. */
@media (max-width: 400px) {
  .callbtn__text { display: none; }
  .callbtn { padding: 10px 14px; }
  .callbtn__icon { font-size: 17px; }
  .topbar__inner { gap: 8px; padding: 11px 14px; }
}

/* ===================================================================
   REDUCED MOTION
   The machine parks. Everything stays legible and in place — nothing
   is left stuck invisible or behind a closed door.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.001ms !important;
  }

  .js .rise { opacity: 1; transform: none; }
  .js .carpanel__leaf--l { transform: translateX(-101%); }
  .js .carpanel__leaf--r { transform: translateX(101%); }
  .reason::before { transform: scaleX(1); }
  .field__shaft { opacity: 0.3; }
  .wake { display: none; }
  .card:hover { transform: none; }
  .plan:hover { transform: none; }
}