/* ===================================================================
   ZONE GROUP FIRE & SAFETY — monitored-system build
   -------------------------------------------------------------------
   Sibling to Zone Real Estate. Same bones: same three typefaces, same
   surfacing reveal, same sticky bar, same card and modal proportions,
   same right-edge signature column, same flow-right rule on dividers.

   What changed is the vocabulary. Real Estate moves like liquid —
   blobs, wobble, overshoot. This one moves like a system under
   supervision: signals travel a loop, nodes acknowledge, status LEDs
   settle. Nothing flashes, nothing sirens, nothing shakes. The
   overshoot curve is deliberately flatter here (1.12 vs 1.28) so the
   whole page reads as controlled rather than rubbery.
   =================================================================== */

/* ===================================================================
   DESIGN TOKENS — the single source of truth.
   Change a colour here and it changes everywhere. Nothing below this
   block hardcodes a brand hex except where a colour must be inlined
   into an SVG data-URI, which CSS variables cannot reach.
   =================================================================== */
:root {
  /* --- Mandated palette ------------------------------------------ */
  --background: #160D0D;
  --surface:    #251212;
  --primary:    #E55353;
  --secondary:  #FF8A4C;
  --text:       #FFF0EB;

  /* --- Derived steps, all mixed from the five above --------------- */
  --background-2: #1B1010;   /* between background and surface       */
  --surface-2:    #2F1818;   /* raised surface: inputs, chips, specs */
  --surface-3:    #3A1D1D;   /* hover state on raised surfaces       */

  --foreground:      var(--text);
  --foreground-mid:  rgba(255, 240, 235, 0.68);
  --foreground-dim:  rgba(255, 240, 235, 0.44);
  --foreground-faint:rgba(255, 240, 235, 0.22);

  --line:        rgba(255, 240, 235, 0.10);
  --line-warm:   rgba(229, 83, 83, 0.34);
  --line-active: rgba(255, 138, 76, 0.60);
  --glass:       rgba(255, 240, 235, 0.035);

  --ember:       linear-gradient(100deg, var(--primary), var(--secondary));
  --ember-soft:  linear-gradient(100deg,
                   rgba(229, 83, 83, 0.16), rgba(255, 138, 76, 0.16));

  --shadow-card: 0 24px 56px rgba(8, 3, 3, 0.62);
  --shadow-lift: 0 30px 68px rgba(8, 3, 3, 0.74);
  --glow-primary:   0 0 0 1px rgba(229, 83, 83, 0.34), 0 8px 30px rgba(229, 83, 83, 0.22);
  --glow-secondary: 0 0 18px rgba(255, 138, 76, 0.55);

  /* --- Type (inherited from Zone Real Estate — the family tie) ---- */
  --font-display: "Fraunces", Georgia, serif;
  --font-body:    "Outfit", system-ui, sans-serif;
  --font-mono:    "DM Mono", ui-monospace, monospace;

  --shell: 1180px;

  /* Scroll velocity, written by safety.js. 0 = still, 1 = moving fast.
     Feeds the divider signal lines only — a monitoring readout, not an
     alarm. */
  --signal: 0;

  /* Settle: come to rest with a hint of acknowledgement, no wobble. */
  --settle: cubic-bezier(0.22, 1.12, 0.36, 1);
  --pour:   cubic-bezier(0.65, 0, 0.20, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--background);
  color: var(--foreground);
  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(--secondary);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--primary); color: var(--background); }

/* ===================================================================
   AMBIENT FIELD
   Four warm masses on unequal cycles, plus a faint floor-plan grid.
   The grid is the fire-safety analogue of Real Estate's liquid grain:
   it gives the dark ground a sense of surveyed space.
   =================================================================== */
.field {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.field__mass {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  will-change: transform;
}

.field__mass--a {
  width: 44vw; height: 44vw;
  left: -10vw; top: 6vh;
  background: radial-gradient(circle at 42% 42%, var(--primary), transparent 68%);
  opacity: 0.20;
  animation: drift-a 59s ease-in-out infinite;
}

.field__mass--b {
  width: 36vw; height: 36vw;
  left: 48vw; top: 22vh;
  background: radial-gradient(circle at 50% 50%, var(--secondary), transparent 66%);
  opacity: 0.13;
  animation: drift-b 71s ease-in-out infinite;
}

.field__mass--c {
  width: 30vw; height: 30vw;
  left: 12vw; top: 62vh;
  background: radial-gradient(circle at 50% 50%, var(--primary), transparent 66%);
  opacity: 0.14;
  animation: drift-c 63s ease-in-out infinite;
}

.field__mass--d {
  width: 24vw; height: 24vw;
  left: 72vw; top: 68vh;
  background: radial-gradient(circle at 50% 50%, var(--secondary), transparent 64%);
  opacity: 0.10;
  animation: drift-d 47s ease-in-out infinite;
}

/* Same rule the sibling site follows: everything drifts right. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  35%      { transform: translate3d(6vw, -7vh, 0) scale(1.12); }
  68%      { transform: translate3d(11vw, 4vh, 0) scale(0.94); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  42%      { transform: translate3d(7vw, -10vh, 0) scale(0.9); }
  72%      { transform: translate3d(-2vw, 6vh, 0) scale(1.14); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, -9vh, 0) scale(1.18); }
}
@keyframes drift-d {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-6vw, -11vh, 0) scale(1.16); }
}

/* Floor-plan grid: 88px survey squares, barely there. */
.field__plan {
  position: absolute;
  inset: -2px;
  opacity: 0.5;
  background-image:
    linear-gradient(to right,  rgba(255, 240, 235, 0.028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 240, 235, 0.028) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}

.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");
}

/* Pointer sweep — desktop only. The sibling site's cursor wake, made
   cooler and slower: a detector's coverage area rather than a smear. */
.sweep {
  position: fixed;
  top: 0; left: 0;
  width: 520px; height: 520px;
  margin: -260px 0 0 -260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 138, 76, 0.10), transparent 62%);
  filter: blur(48px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: transform;
}

.sweep.is-live { opacity: 1; }

/* ===================================================================
   SIGNATURE — the zone status column
   Where Real Estate had a liquid gauge, this has a fire panel's zone
   board. Each section of the page is a zone; its LED acknowledges as
   you arrive. The readout is scroll progress, same as the sibling.
   =================================================================== */
.zonepanel {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(37, 18, 18, 0.62);
  border: 1px solid var(--line);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.zonepanel__head {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 8.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foreground-dim);
}

/* The one perpetual animation on the page: a slow "system healthy"
   breath. 4.4s, no colour change, no scale jump. */
.zonepanel__live {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: var(--glow-secondary);
  animation: breathe 4.4s ease-in-out infinite;
}

@keyframes breathe {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.zonepanel__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.zonepanel__zone {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  color: var(--foreground-faint);
  transition: color 0.5s ease;
  cursor: pointer;
}

.zonepanel__zone:hover { color: var(--foreground-mid); }

.zonepanel__led {
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: rgba(255, 240, 235, 0.14);
  box-shadow: none;
  transition: background 0.55s ease, box-shadow 0.55s ease;
}

.zonepanel__zone.is-armed { color: var(--foreground-mid); }
.zonepanel__zone.is-armed .zonepanel__led {
  background: var(--primary);
  box-shadow: 0 0 10px rgba(229, 83, 83, 0.65);
}

.zonepanel__zone.is-current { color: var(--text); }
.zonepanel__zone.is-current .zonepanel__led {
  background: var(--secondary);
  box-shadow: var(--glow-secondary);
}

.zonepanel__foot {
  display: flex;
  align-items: baseline;
  gap: 4px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--foreground-dim);
}

.zonepanel__readout { color: var(--secondary); font-size: 11px; }

/* The column has to clear the 1180px shell plus its own width, or it
   sits on top of the hero diagram on mid-size laptops. */
@media (max-width: 1400px) { .zonepanel { display: none; } }

/* ===================================================================
   SURFACING — identical mechanic to the sibling site, calmer numbers.
   Content rises from below and sharpens as it enters the viewport.
   =================================================================== */
.js .surface {
  opacity: 0;
  transform: translate3d(-10px, 28px, 0);
  filter: blur(7px);
}

.js .surface.is-surfaced {
  opacity: 1;
  transform: none;
  filter: blur(0);
  transition:
    opacity 0.8s var(--pour),
    transform 1s var(--settle),
    filter 0.8s var(--pour);
}

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

/* ===================================================================
   Wordmark
   The sibling's falling droplet becomes a status LED that holds
   steady and breathes. Same slot, same size, opposite message:
   that one is playful, this one is on duty.
   =================================================================== */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.wordmark__zone { color: var(--text); }
.wordmark__rest { color: var(--foreground-mid); font-weight: 600; }
.wordmark--small { font-size: 14.5px; }

.wordmark__led {
  width: 7px; height: 7px;
  margin: 0 8px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 10px rgba(229, 83, 83, 0.7);
  animation: breathe 4.4s ease-in-out infinite;
}

/* ===================================================================
   Top bar
   =================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(22, 13, 13, 0.72);
  backdrop-filter: blur(18px) saturate(1.25);
  -webkit-backdrop-filter: blur(18px) saturate(1.25);
  border-bottom: 1px solid var(--line);
}

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

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

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--foreground-mid);
  padding: 7px 11px;
  border-radius: 8px;
  transition: color 0.4s ease, background 0.4s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 11px; right: 11px;
  bottom: 3px;
  height: 1px;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;   /* grows rightward — the flow rule */
  transition: transform 0.5s var(--pour);
}

.nav__link:hover { color: var(--text); }
.nav__link:hover::after { transform: scaleX(1); }

.nav__link.is-current { color: var(--text); }
.nav__link.is-current::after { transform: scaleX(1); }

/* Call button — the sibling's gradient bead, squared off slightly and
   with the ripple replaced by a single quiet acknowledgement pulse. */
.callbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 19px;
  border-radius: 40px;
  flex: none;
  color: var(--background);
  background: linear-gradient(120deg, var(--secondary), var(--primary) 72%);
  background-size: 190% 190%;
  overflow: hidden;
  transition: transform 0.5s var(--settle), box-shadow 0.5s ease, background-position 0.9s var(--pour);
  box-shadow: 0 6px 20px rgba(229, 83, 83, 0.26);
}

.callbtn:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 12px 30px rgba(229, 83, 83, 0.42);
}

.callbtn__ring {
  position: absolute;
  left: 50%; top: 50%;
  width: 10px; height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  border: 1.5px solid rgba(22, 13, 13, 0.4);
  animation: acknowledge 5.2s ease-out infinite;
}

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

.callbtn__icon { position: relative; font-size: 16px; 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: 8.5px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  opacity: 0.75;
}

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

/* Menu toggle — mobile only */
.menutoggle {
  display: none;
  width: 40px; height: 40px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--glass);
  color: var(--text);
  padding: 0;
  place-items: center;
}

.menutoggle__bars { display: block; width: 17px; height: 11px; position: relative; }
.menutoggle__bars::before,
.menutoggle__bars::after,
.menutoggle__bars span {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
  transition: transform 0.4s var(--settle), opacity 0.3s ease;
}
.menutoggle__bars::before { top: 0; }
.menutoggle__bars span    { top: 5px; }
.menutoggle__bars::after  { top: 10px; }

.menutoggle[aria-expanded="true"] .menutoggle__bars::before { transform: translateY(5px) rotate(45deg); }
.menutoggle[aria-expanded="true"] .menutoggle__bars span    { opacity: 0; }
.menutoggle[aria-expanded="true"] .menutoggle__bars::after  { transform: translateY(-5px) rotate(-45deg); }

/* Mobile drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 39;
  background: rgba(22, 13, 13, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  padding: 92px 22px 40px;
  overflow-y: auto;
  animation: drawer-in 0.45s var(--pour) both;
}

.drawer[hidden] { display: none; }

@keyframes drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}

.drawer__list { display: grid; gap: 2px; }

.drawer__link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-family: var(--font-body);
  font-size: 17px;
  color: var(--foreground-mid);
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.drawer__link:hover,
.drawer__link:focus-visible { background: var(--surface); color: var(--text); border-color: var(--line); }

.drawer__num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--primary);
  letter-spacing: 0.08em;
}

.drawer__cta { margin-top: 22px; }

@media (max-width: 1024px) {
  .nav { display: none; }
  .menutoggle { display: grid; margin-left: auto; }
  .callbtn { order: 3; }
}

@media (max-width: 560px) {
  .callbtn__label { display: none; }
  .callbtn { padding: 8px 14px; gap: 8px; }
  .callbtn__number { font-size: 12.5px; }
  .callbtn__icon { font-size: 15px; }
  .wordmark { font-size: 12px; letter-spacing: 0.03em; }
  .wordmark__led { width: 6px; height: 6px; margin: 0 6px; }
  .topbar__inner { padding: 11px 16px; gap: 12px; }
}

@media (max-width: 400px) {
  .wordmark__rest { display: none; }
}

/* ===================================================================
   Shared section furniture
   =================================================================== */
.section {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 96px 24px;
}

.section--tight { padding-top: 72px; padding-bottom: 72px; }

.section__head { max-width: 680px; margin: 0 0 52px; }
.section__head--wide { max-width: 780px; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--secondary);
  margin: 0 0 18px;
}

/* The eyebrow's leading rule reads as a signal line entering. */
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: var(--ember);
}

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

.section__lead {
  color: var(--foreground-mid);
  font-size: 16.5px;
  margin: 0;
  max-width: 620px;
}

.accent {
  background: var(--ember);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ===================================================================
   DIVIDERS — signal lines
   The sibling has two wave paths travelling right at different speeds.
   Same structure and same direction here, but flattened into a
   detection loop: a hairline carrying dashed traffic, with a slow
   under-swell behind it. --signal (scroll velocity) lifts the swell a
   little, the way a monitored line shows more traffic under load.
   =================================================================== */
.divider {
  position: relative;
  z-index: 2;
  height: 92px;
  overflow: hidden;
  pointer-events: none;
}

.divider__svg {
  display: block;
  width: 200%;
  height: 100%;
  transform-origin: 50% 50%;
  transform: scaleY(calc(1 + var(--signal) * 0.22));
  transition: transform 0.6s var(--settle);
}

.divider__swell {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.4;
  opacity: 0.18;
  animation: travel 34s linear infinite;
}

.divider__line {
  fill: none;
  stroke: var(--secondary);
  stroke-width: 1.2;
  opacity: 0.30;
  stroke-dasharray: 3 13;
  stroke-linecap: round;
  animation: travel 21s linear infinite;
}

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

/* Nodes sitting on the divider line — quiet loop devices. */
.divider__node {
  fill: var(--background);
  stroke: var(--primary);
  stroke-width: 1.4;
  opacity: 0.55;
}

/* ===================================================================
   HERO
   =================================================================== */
.hero {
  position: relative;
  z-index: 2;
  padding: 78px 0 40px;
}

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

@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding-top: 54px; }
}

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--secondary);
  margin: 0 0 22px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.hero__eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: var(--glow-secondary);
  animation: breathe 4.4s ease-in-out infinite;
}

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

.hero__line { display: block; }

/* Second line carries the ember gradient, drifting right. Same trick
   as the sibling's flowing line — 13s there, 18s here so it reads as
   a slow sweep rather than a current. */
.hero__line--ember {
  background: linear-gradient(100deg,
    var(--text) 0%, var(--primary) 30%, var(--secondary) 50%,
    var(--primary) 68%, var(--text) 92%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: ember-sweep 18s linear infinite;
}

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

.hero__tagline {
  max-width: 500px;
  color: var(--foreground-mid);
  font-size: 16.5px;
  margin: 0 0 32px;
}

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

/* --- Buttons: same proportions as the sibling site ---------------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 14px 26px;
  border-radius: 40px;
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 0.5s var(--settle), box-shadow 0.5s ease,
              border-color 0.5s ease, color 0.4s ease, background-position 0.9s var(--pour);
}

.btn__sheen {
  position: absolute;
  left: -34%;
  top: 0; bottom: 0;
  width: 34%;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 235, 0.20), transparent);
  transition: left 0.9s var(--pour);
  pointer-events: none;
}

.btn:hover .btn__sheen { left: 112%; }

/* Primary: solid #E55353, used only on real commitments. */
.btn--primary {
  color: var(--background);
  font-weight: 500;
  background: linear-gradient(120deg, var(--primary), var(--secondary) 130%);
  background-size: 180% 180%;
  box-shadow: 0 8px 26px rgba(229, 83, 83, 0.28);
}

.btn--primary:hover {
  transform: translateY(-2px);
  background-position: 100% 50%;
  box-shadow: 0 14px 36px rgba(229, 83, 83, 0.42);
}

/* Secondary: #FF8A4C as an outline, never as a fill — keeps the
   orange as an accent rather than a second loud surface. */
.btn--secondary {
  color: var(--secondary);
  border-color: var(--line-active);
  background: rgba(255, 138, 76, 0.06);
}

.btn--secondary:hover {
  transform: translateY(-2px);
  color: var(--text);
  border-color: var(--secondary);
  background: rgba(255, 138, 76, 0.12);
}

.btn--ghost {
  color: var(--foreground-mid);
  border-color: var(--line);
  background: var(--glass);
}

.btn--ghost:hover { color: var(--text); border-color: var(--line-warm); }

.btn--wide { width: 100%; }
.btn--lg { padding: 17px 30px; font-size: 14.5px; }

/* --- Hero trust strip --------------------------------------------- */
.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin: 46px 0 0;
  padding: 0;
}

.fact { margin: 0; }

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

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

/* ===================================================================
   HERO SIGNATURE — the live system diagram
   Detectors → panel → outputs → evacuation. A signal runs the chain on
   an 8.4s loop, every element phased off that one cycle so the whole
   diagram stays in step. This is the page's one bold element; the rest
   of the site stays quiet around it.
   =================================================================== */
.schematic {
  position: relative;
  width: 100%;
  max-width: 480px;
  justify-self: end;
  padding: 22px;
  border-radius: 22px;
  background: linear-gradient(150deg, var(--surface), var(--background-2));
  border: 1px solid var(--line);
  box-shadow: var(--shadow-card);
}

@media (max-width: 980px) { .schematic { justify-self: start; max-width: 520px; } }

.schematic::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(150deg, var(--line-warm), transparent 45%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}

.schematic__bar {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--foreground-dim);
}

.schematic__bar-led {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: var(--glow-secondary);
  animation: breathe 4.4s ease-in-out infinite;
}

.schematic__bar-right { margin-left: auto; color: var(--foreground-faint); }

.schematic__svg { display: block; width: 100%; height: auto; }

/* --- diagram parts ------------------------------------------------ */
.dg-plan     { stroke: rgba(255, 240, 235, 0.07); stroke-width: 1; fill: none; }
.dg-box      { fill: var(--surface-2); stroke: var(--line); stroke-width: 1.2; }
.dg-box-lit  { fill: var(--surface-2); stroke: var(--line-warm); stroke-width: 1.2; }
.dg-label    { font-family: var(--font-mono); font-size: 8.4px; letter-spacing: 0.08em;
               fill: var(--foreground-mid); text-transform: uppercase; }
.dg-label-sm { font-family: var(--font-mono); font-size: 7.2px; letter-spacing: 0.1em;
               fill: var(--foreground-dim); }
.dg-wire     { stroke: rgba(255, 240, 235, 0.14); stroke-width: 1.2; fill: none; }

/* The travelling signal: a short dash chasing the wire path. Each
   segment starts later along the same 8.4s cycle, so the pulse reads
   as one signal moving through the system rather than four blinks. */
.dg-pulse {
  stroke: var(--secondary);
  stroke-width: 1.8;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 16 300;
  stroke-dashoffset: 316;
  animation: pulse-run 8.4s linear infinite;
  filter: drop-shadow(0 0 3px rgba(255, 138, 76, 0.7));
}

@keyframes pulse-run {
  0%      { stroke-dashoffset: 316; }
  22%     { stroke-dashoffset: 0; }
  100%    { stroke-dashoffset: 0; }
}

.dg-pulse--s1 { animation-delay: 0.3s; }
.dg-pulse--s2 { animation-delay: 1.4s; }
.dg-pulse--s3 { animation-delay: 2.5s; }
.dg-pulse--s4 { animation-delay: 3.6s; }

/* Nodes acknowledge as the signal reaches them, then stand down. */
.dg-node {
  fill: var(--background);
  stroke: var(--primary);
  stroke-width: 1.5;
  opacity: 0.6;
  animation: node-ack 8.4s ease-in-out infinite;
}

@keyframes node-ack {
  0%, 6%    { opacity: 0.45; }
  12%       { opacity: 1; }
  40%       { opacity: 1; }
  70%, 100% { opacity: 0.45; }
}

.dg-node--d1 { animation-delay: 0s; }
.dg-node--d2 { animation-delay: 0.18s; }
.dg-node--d3 { animation-delay: 0.36s; }

.dg-core {
  fill: var(--primary);
  animation: core-ack 8.4s ease-in-out infinite;
  animation-delay: 1.2s;
}

@keyframes core-ack {
  0%, 8%    { opacity: 0.3; r: 2.4; }
  16%       { opacity: 1; r: 3.4; }
  52%       { opacity: 1; r: 3.4; }
  76%, 100% { opacity: 0.3; r: 2.4; }
}

.dg-out {
  fill: var(--secondary);
  opacity: 0.28;
  animation: out-ack 8.4s ease-in-out infinite;
}

@keyframes out-ack {
  0%, 26%   { opacity: 0.22; }
  34%       { opacity: 1; }
  62%       { opacity: 1; }
  80%, 100% { opacity: 0.22; }
}

.dg-out--o1 { animation-delay: 0.1s; }
.dg-out--o2 { animation-delay: 0.34s; }
.dg-out--o3 { animation-delay: 0.58s; }

/* The evacuation route draws itself, then holds. */
.dg-route {
  stroke: var(--secondary);
  stroke-width: 1.6;
  fill: none;
  stroke-linecap: round;
  stroke-dasharray: 5 6;
  opacity: 0;
  animation: route-draw 8.4s ease-in-out infinite;
  animation-delay: 4s;
}

@keyframes route-draw {
  0%, 4%    { opacity: 0; }
  16%       { opacity: 0.9; }
  46%       { opacity: 0.9; }
  62%, 100% { opacity: 0; }
}

.schematic__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 16px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--foreground-dim);
}

.schematic__legend span { display: inline-flex; align-items: center; gap: 6px; }

.schematic__legend i {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--primary);
  font-style: normal;
}

.schematic__legend span:nth-child(even) i { background: var(--secondary); }

/* ===================================================================
   SERVICE CARDS
   Same grid, same proportions and same modal behaviour as the sibling
   site's listing cards. The hover deform is different: no asymmetric
   corners, instead the border warms to a gradient, a scan line crosses
   the artwork, and the corner LED comes up. Precise, not rubbery.
   =================================================================== */
.grid-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 26px;
  align-items: start;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-align: left;
  padding: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.7s var(--settle), border-color 0.5s ease, box-shadow 0.6s ease;
}

.card:hover,
.card:focus-visible {
  transform: translateY(-7px);
  border-color: var(--line-warm);
  box-shadow: var(--shadow-lift);
}

/* Corner LED: dark until the card is engaged, then armed. */
.card__led {
  position: absolute;
  top: 15px; right: 15px;
  z-index: 3;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255, 240, 235, 0.16);
  transition: background 0.5s ease, box-shadow 0.5s ease;
}

.card:hover .card__led,
.card:focus-visible .card__led {
  background: var(--secondary);
  box-shadow: var(--glow-secondary);
}

.card__figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--background-2);
}

/* height:auto is load-bearing. The markup carries width/height
   attributes so the browser can reserve space before the image
   arrives, but that height also acts as a CSS height and would
   beat aspect-ratio, leaving 600px-tall artwork in every card. */
.card__photo {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.4s var(--pour);
}

.card:hover .card__photo { transform: scale(1.05); }

/* Scan line sweeping the artwork left to right — the sibling's
   caustic refraction, re-read as a detector sweep. */
.card__scan {
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 38%, rgba(255, 138, 76, 0.16) 50%, transparent 62%);
  background-size: 260% 100%;
  background-position: 190% 0;
  transition: background-position 1.2s var(--pour);
  pointer-events: none;
}

.card:hover .card__scan { background-position: -60% 0; }

.card__tag {
  position: absolute;
  left: 14px; bottom: 14px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  background: rgba(22, 13, 13, 0.78);
  border: 1px solid var(--line-warm);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: 30px;
}

.card__body {
  padding: 22px 22px 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 9px;
}

.card__summary {
  font-size: 14.5px;
  color: var(--foreground-mid);
  margin: 0 0 18px;
}

.card__points {
  list-style: none;
  margin: 0 0 20px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 7px;
}

.card__points li {
  position: relative;
  padding-left: 17px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--foreground-dim);
}

.card__points li::before {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 6px; height: 6px;
  border-radius: 50%;
  border: 1px solid var(--primary);
}

.card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--secondary);
  transition: gap 0.5s var(--settle);
}

.card:hover .card__more { gap: 13px; }

.card__more span:last-child { transition: transform 0.5s var(--settle); }

/* ===================================================================
   PROCESS CHAIN — "Nga detektimi te reagimi"
   A real sequence, so it gets real numbering and a real connecting
   line. Stages arm one after another when the section is reached.
   =================================================================== */
.chain {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 18px;
}

.chain__rail {
  position: absolute;
  left: 6%;
  right: 6%;
  top: 27px;
  height: 1px;
  background: var(--line);
  overflow: hidden;
}

/* The rail fills left to right once, when the section arms. */
.chain__rail::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ember);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.2s var(--pour);
}

.chain.is-armed .chain__rail::after { transform: scaleX(1); }

.chain__stage {
  position: relative;
  text-align: center;
  padding-top: 0;
}

.chain__dot {
  position: relative;
  width: 54px; height: 54px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--foreground-dim);
  transition: border-color 0.6s ease, color 0.6s ease,
              background 0.6s ease, box-shadow 0.6s ease;
}

.chain__stage.is-armed .chain__dot {
  border-color: var(--primary);
  color: var(--text);
  background: var(--surface-2);
  box-shadow: 0 0 0 4px rgba(229, 83, 83, 0.09), 0 0 22px rgba(229, 83, 83, 0.24);
}

.chain__name {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 15px;
  margin: 0 0 6px;
  color: var(--text);
}

.chain__note {
  font-size: 13px;
  color: var(--foreground-dim);
  margin: 0;
  line-height: 1.5;
}

@media (max-width: 860px) {
  .chain { grid-template-columns: 1fr; gap: 0; }
  .chain__rail {
    left: 26px; right: auto;
    top: 10px; bottom: 40px;
    width: 1px; height: auto;
  }
  .chain__rail::after { transform: scaleY(0); transform-origin: top; }
  .chain.is-armed .chain__rail::after { transform: scaleY(1); }
  .chain__stage {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 18px;
    text-align: left;
    padding-bottom: 26px;
  }
  .chain__dot { margin: 0; }
}

/* ===================================================================
   SPLIT SECTIONS — "Detektim & Alarm", "Ndriçim & Evakuim"
   =================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.split--reverse .split__media { order: -1; }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 36px; }
  .split--reverse .split__media { order: 0; }
}

.split__media {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

.split__media img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* A single sweep travelling across the media once every 11s: the
   coverage check that fire systems run on themselves. */
.split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 42%, rgba(255, 138, 76, 0.13) 50%, transparent 58%);
  background-size: 300% 100%;
  animation: media-sweep 11s ease-in-out infinite;
  pointer-events: none;
}

@keyframes media-sweep {
  0%, 100% { background-position: 200% 0; }
  55%      { background-position: -80% 0; }
}

.split__caption {
  position: absolute;
  left: 14px; bottom: 14px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--foreground-mid);
  background: rgba(22, 13, 13, 0.8);
  border: 1px solid var(--line);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 6px 12px;
  border-radius: 30px;
  z-index: 2;
}

.split__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(25px, 3.4vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.split__text {
  color: var(--foreground-mid);
  margin: 0 0 24px;
  font-size: 15.5px;
}

.speclist {
  list-style: none;
  margin: 0 0 28px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 18px;
}

.speclist li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  color: var(--foreground-mid);
}

/* Bullet as a small detector node, not a droplet. */
.speclist li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background: rgba(229, 83, 83, 0.14);
}

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

/* ===================================================================
   SECTOR TILES — "Siguri për çdo objekt"
   =================================================================== */
.sectors {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(178px, 1fr));
  gap: 12px;
}

.sector {
  position: relative;
  padding: 20px 18px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  overflow: hidden;
  transition: transform 0.6s var(--settle), border-color 0.5s ease, background 0.5s ease;
}

.sector:hover {
  transform: translateY(-4px);
  border-color: var(--line-warm);
  background: var(--surface-2);
}

/* Left edge lights up on hover — a zone coming online. */
.sector::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--ember);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.55s var(--pour);
}

.sector:hover::before { transform: scaleY(1); }

.sector__icon {
  display: block;
  width: 26px; height: 26px;
  margin-bottom: 13px;
  color: var(--primary);
  transition: color 0.5s ease;
}

.sector:hover .sector__icon { color: var(--secondary); }

.sector__name {
  font-size: 15px;
  margin: 0 0 4px;
  color: var(--text);
}

.sector__note {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.05em;
  color: var(--foreground-dim);
  margin: 0;
}

/* ===================================================================
   REASONS — "Pse Zone Fire & Safety"
   =================================================================== */
.reasons {
  display: grid;
  /* 6 items. minmax(300px) can only resolve to 3, 2 or 1 columns at
     any width this container reaches, so the last row is always full —
     a 4-column layout would leave two empty cells showing as a pale
     gap in the middle of the section. */
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: hidden;
}

.reason {
  padding: 28px 26px 30px;
  background: var(--surface);
  transition: background 0.5s ease;
}

.reason:hover { background: var(--surface-2); }

.reason__num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--primary);
  display: block;
  margin-bottom: 14px;
}

.reason__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 18px;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.reason__text {
  font-size: 14px;
  color: var(--foreground-mid);
  margin: 0;
}

/* ===================================================================
   STEPS — "Si funksionon"
   =================================================================== */
.steps {
  counter-reset: step;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(252px, 1fr));
  gap: 14px;
}

.step {
  position: relative;
  padding: 22px 20px 24px;
  border-radius: 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.5s ease, transform 0.6s var(--settle);
}

.step:hover { border-color: var(--line-warm); transform: translateY(-3px); }

.step__num {
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  margin-bottom: 14px;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line-warm);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--secondary);
}

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

.step__text {
  font-size: 13.5px;
  color: var(--foreground-dim);
  margin: 0;
  line-height: 1.55;
}

/* ===================================================================
   QUOTE FORM — "Kërko ofertë"
   =================================================================== */
.quote {
  position: relative;
  z-index: 2;
  max-width: var(--shell);
  margin: 0 auto;
  padding: 20px 24px 100px;
}

.quote__panel {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 0;
  border-radius: 26px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}

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

.quote__aside {
  padding: 40px 34px;
  background: linear-gradient(165deg, var(--surface-2), var(--background-2));
  border-right: 1px solid var(--line);
}

@media (max-width: 940px) {
  .quote__aside { border-right: none; border-bottom: 1px solid var(--line); padding: 32px 24px; }
}

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

.quote__text {
  color: var(--foreground-mid);
  font-size: 15px;
  margin: 0 0 28px;
}

.quote__direct {
  display: grid;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.quote__directrow {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--foreground-mid);
  transition: color 0.4s ease;
}

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

.quote__directrow span:first-child {
  width: 30px; height: 30px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--primary);
  font-size: 14px;
}

.quote__form { padding: 40px 34px; }

@media (max-width: 940px) { .quote__form { padding: 32px 24px; } }

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

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

.field-group { margin-bottom: 16px; }

.field-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--foreground-dim);
  margin-bottom: 8px;
}

.field-label span { color: var(--primary); }

.field-input,
.field-select,
.field-textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 300;
  color: var(--text);
  background: var(--background-2);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.field-textarea { resize: vertical; min-height: 108px; line-height: 1.6; }

.field-input::placeholder,
.field-textarea::placeholder { color: var(--foreground-faint); }

.field-input:focus,
.field-select:focus,
.field-textarea:focus {
  outline: none;
  border-color: var(--line-active);
  background: var(--surface-2);
  box-shadow: 0 0 0 3px rgba(255, 138, 76, 0.10);
}

.field-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%23FF8A4C' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  padding-right: 40px;
  cursor: pointer;
}

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

.field-input.is-invalid,
.field-select.is-invalid { border-color: var(--primary); background: rgba(229, 83, 83, 0.07); }

.field-error {
  display: none;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--primary);
  margin: 7px 0 0;
}

.field-error.is-shown { display: block; }

/* Service chips — multi-select without a select element */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--foreground-mid);
  background: var(--background-2);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 9px 16px 9px 30px;
  transition: color 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

/* The chip's own status LED, mirroring the zone panel. */
.chip::before {
  content: "";
  position: absolute;
  left: 13px; top: 50%;
  margin-top: -3px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: rgba(255, 240, 235, 0.18);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}

.chip:hover { color: var(--text); border-color: var(--line-warm); }

.chip.is-on {
  color: var(--text);
  border-color: var(--line-active);
  background: rgba(255, 138, 76, 0.09);
}

.chip.is-on::before { background: var(--secondary); box-shadow: var(--glow-secondary); }

.quote__submitrow { margin-top: 24px; }

.quote__note {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-dim);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.6;
}

/* Sent state */
.quote__sent {
  padding: 22px;
  border-radius: 16px;
  background: var(--surface-2);
  border: 1px solid var(--line-active);
  margin-top: 20px;
  animation: sent-in 0.55s var(--settle) both;
}

.quote__sent[hidden] { display: none; }

@keyframes sent-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

.quote__sent-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  margin-bottom: 12px;
}

.quote__sent-head::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--secondary);
  box-shadow: var(--glow-secondary);
}

.quote__sent-text { font-size: 14px; color: var(--foreground-mid); margin: 0 0 16px; }

.quote__sent-actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ===================================================================
   DETAIL PANEL — same behaviour as the sibling site's property modal
   =================================================================== */
.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(11, 5, 5, 0.78);
  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: var(--surface);
  border: 1px solid var(--line-warm);
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(6, 2, 2, 0.78);
  animation: panel-in 0.6s var(--settle) both;
}

/* Opens like a panel powering up, not a blob forming. */
@keyframes panel-in {
  0%   { opacity: 0; transform: translateY(24px) scale(0.97); }
  100% { opacity: 1; transform: none; }
}

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

.detail__close {
  position: absolute;
  top: 15px; right: 15px;
  z-index: 3;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(22, 13, 13, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--text);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: background 0.4s ease, border-color 0.4s ease, transform 0.5s var(--settle);
}

.detail__close:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--background);
  transform: rotate(90deg);
}

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

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

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

.detail__tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--secondary);
  border: 1px solid var(--line-active);
  background: rgba(255, 138, 76, 0.08);
  padding: 5px 13px;
  border-radius: 30px;
  margin-bottom: 15px;
}

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

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

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

.detail__list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px 20px;
}

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

.detail__list li {
  position: relative;
  padding-left: 21px;
  font-size: 14.5px;
  color: var(--foreground-mid);
}

.detail__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background: rgba(229, 83, 83, 0.16);
}

.detail__where {
  padding: 18px 20px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  margin: 0 0 26px;
}

.detail__where p {
  margin: 0;
  font-size: 14px;
  color: var(--foreground-mid);
}

.detail__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.detail__actions .btn { flex: 1; min-width: 190px; }

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

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--line);
  background: var(--background-2);
  padding: 58px 24px 40px;
}

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
}

@media (max-width: 780px) { .footer__inner { grid-template-columns: 1fr; gap: 30px; } }

.footer__note {
  color: var(--foreground-mid);
  font-size: 14.5px;
  margin: 16px 0 20px;
  max-width: 330px;
}

.footer__phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text);
  border: 1px solid var(--line);
  background: var(--glass);
  padding: 13px 24px;
  border-radius: 40px;
  transition: border-color 0.5s ease, transform 0.5s var(--settle), color 0.4s ease;
}

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

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

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

.footer__links a {
  font-size: 14px;
  color: var(--foreground-mid);
  transition: color 0.4s ease, padding-left 0.4s var(--settle);
}

.footer__links a:hover { color: var(--secondary); padding-left: 5px; }

.footer__bottom {
  max-width: var(--shell);
  margin: 44px auto 0;
  padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--foreground-faint);
}

.footer__sister { color: var(--foreground-dim); transition: color 0.4s ease; }
.footer__sister:hover { color: var(--secondary); }

/* ===================================================================
   REDUCED MOTION
   Everything ambient stops. Content stays visible and in place —
   nothing is left stuck invisible or half-armed.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .js .surface { opacity: 1; transform: none; filter: none; }
  .field__mass { opacity: 0.12; }
  .sweep { display: none; }
  .card:hover { transform: none; }

  /* States that are normally reached by animation are given directly. */
  .chain__rail::after { transform: scaleX(1); }
  .chain__dot { border-color: var(--line-warm); }
  .dg-pulse { stroke-dashoffset: 0; opacity: 0.6; }
  .dg-node, .dg-out, .dg-route { opacity: 0.75; }
  .dg-core { opacity: 1; }
}