/* ===================================================================
   ZONE GROUP FACILITY MANAGEMENT
   -------------------------------------------------------------------
   Sibling build to Zone Real Estate. Same type scale, same spacing
   rhythm, same card and button proportions, same reveal-on-scroll
   architecture. Two things change: the palette, and the motion idea
   underneath it.

   Zone Real Estate moved like liquid — everything flowed down and to
   the right, and nothing ever settled. That reads as appetite, which
   is right for property.

   Facility Management moves in CYCLES. Lines draw and complete,
   statuses go from pending to done, a route gets ticked off top to
   bottom, and the maintenance loop in the hero runs forever without
   speeding up. Continuity, not appetite. If you add anything later,
   make it complete a cycle rather than drift.
   =================================================================== */

:root {
  /* ---- Design tokens. Change colours HERE, not in components. ---- */
  --background:  #10140E;
  --surface:     #192017;
  --primary:     #7FA46D;
  --secondary:   #B8C98B;
  --text:        #F3F6EE;

  /* Derived. Everything below is built from the five above. */
  --surface-2:   #212A1E;
  --surface-3:   #2A3427;

  --text-mid:    rgba(243, 246, 238, 0.66);
  --text-dim:    rgba(243, 246, 238, 0.42);
  --text-faint:  rgba(243, 246, 238, 0.26);

  --glass:       rgba(243, 246, 238, 0.035);
  --edge:        rgba(243, 246, 238, 0.11);
  --edge-lit:    rgba(127, 164, 109, 0.45);

  --primary-soft: rgba(127, 164, 109, 0.14);
  --primary-glow: rgba(127, 164, 109, 0.22);

  --gradient:    linear-gradient(104deg, var(--primary), var(--secondary));

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

  --shell: 1180px;
  --radius:      22px;
  --radius-lg:   26px;
  --radius-pill: 40px;

  /* Scroll velocity, written by motion.js. 0 = still, 1 = moving fast.
     Here it brightens the seam lines slightly rather than churning
     anything — this brand does not get agitated. */
  --flow: 0;

  /* Calmer than the Real Estate curve: it settles rather than wobbles. */
  --settle: cubic-bezier(0.22, 1.10, 0.36, 1);
  --pour:   cubic-bezier(0.65, 0, 0.20, 1);
}

* { box-sizing: border-box; }

/* Component rules below set display on elements that are also toggled with
   the hidden attribute (form errors, the detail panel). A class selector
   outranks the browser's [hidden] rule, so state it explicitly here. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background: var(--background);
  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%; }
ul, ol { list-style: none; margin: 0; padding: 0; }

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

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

/* ===================================================================
   AMBIENT FIELD
   A faint floor-plan grid with three very slow, very soft masses over
   it. Deliberately quieter than the Real Estate build — 90s+ cycles
   at low opacity. You should notice it only if you look for it.
   =================================================================== */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient__plan {
  position: absolute;
  inset: -10%;
  background-image:
    linear-gradient(to right, rgba(184, 201, 139, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(184, 201, 139, 0.055) 1px, transparent 1px);
  background-size: 96px 96px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 30%, #000 0%, transparent 78%);
}

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

.ambient__mass--a {
  width: 48vw; height: 48vw;
  left: -10vw; top: 4vh;
  background: radial-gradient(circle at 45% 45%, var(--primary), transparent 68%);
  opacity: 0.20;
  animation: drift-a 97s ease-in-out infinite;
}

.ambient__mass--b {
  width: 38vw; height: 38vw;
  left: 56vw; top: 22vh;
  background: radial-gradient(circle at 50% 50%, var(--secondary), transparent 66%);
  opacity: 0.12;
  animation: drift-b 121s ease-in-out infinite;
}

.ambient__mass--c {
  width: 30vw; height: 30vw;
  left: 22vw; top: 64vh;
  background: radial-gradient(circle at 50% 50%, var(--primary), transparent 64%);
  opacity: 0.13;
  animation: drift-c 83s ease-in-out infinite;
}

/* Each returns to where it started: a cycle, not a drift. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  33%      { transform: translate3d(5vw, -6vh, 0) scale(1.10); }
  66%      { transform: translate3d(-3vw, 5vh, 0) scale(0.94); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(-6vw, 8vh, 0) scale(1.14); }
}
@keyframes drift-c {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  45%      { transform: translate3d(7vw, -7vh, 0) scale(1.09); }
}

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

/* ===================================================================
   SIGNATURE — the inspection route
   Zone Real Estate had a liquid gauge whose meniscus wobbled. The
   equivalent here is a route sheet: one node per zone of the site,
   ticked off as you pass. The page is the round; you are walking it.
   =================================================================== */
.route {
  position: fixed;
  right: 26px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  pointer-events: none;
}

.route__track {
  position: relative;
  width: 16px;
  height: 268px;
}

.route__line,
.route__drawn {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  margin-left: -0.5px;
}

.route__line { bottom: 0; background: var(--edge); }

.route__drawn {
  height: 0;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

.route__nodes { position: absolute; inset: 0; }

.route__node {
  position: absolute;
  left: 50%;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: var(--background);
  transition:
    background 0.55s var(--pour),
    border-color 0.55s var(--pour),
    box-shadow 0.55s var(--pour),
    transform 0.6s var(--settle);
}

/* Passed: the node completes and stays completed. */
.route__node.is-done {
  background: var(--secondary);
  border-color: var(--secondary);
}

/* Where you are now. */
.route__node.is-current {
  background: var(--primary);
  border-color: var(--primary);
  transform: scale(1.35);
  box-shadow: 0 0 0 5px var(--primary-soft);
}

.route__readout {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  color: var(--text-dim);
}

.route__flag {
  position: absolute;
  right: calc(100% + 16px);
  top: 50%;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mid);
  background: var(--surface);
  border: 1px solid var(--edge);
  padding: 6px 13px;
  border-radius: var(--radius-pill);
  opacity: 0;
  transform: translate(8px, -50%);
  transition: opacity 0.5s ease, transform 0.6s var(--settle);
}

.route__flag.is-shown { opacity: 1; transform: translate(0, -50%); }

/* The rail itself is 16px wide and lives happily in the gutter. The name
   chip needs about 175px more, which only exists on genuinely wide
   screens — below that it would sit on top of the content, so it goes.
   The nodes and the readout still carry the orientation. */
@media (max-width: 1500px) { .route__flag { display: none; } }

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

/* ===================================================================
   REVEAL — content settles into place as it enters the viewport
   Same architecture as the Real Estate "surface" reveal, but the
   travel is shorter and the curve barely overshoots. Calm.
   =================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

.js .reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.8s var(--pour),
    transform 1s var(--settle);
}

.reveal[data-delay="1"].is-in { transition-delay: 0.07s; }
.reveal[data-delay="2"].is-in { transition-delay: 0.14s; }
.reveal[data-delay="3"].is-in { transition-delay: 0.21s; }
.reveal[data-delay="4"].is-in { transition-delay: 0.28s; }
.reveal[data-delay="5"].is-in { transition-delay: 0.35s; }
.reveal[data-delay="6"].is-in { transition-delay: 0.42s; }
.reveal[data-delay="7"].is-in { transition-delay: 0.49s; }

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

.band {
  position: relative;
  z-index: 2;
  padding: 104px 0;
}

.band--surface {
  background: linear-gradient(180deg, var(--background), var(--surface) 22%, var(--surface) 78%, var(--background));
}

.band--tight { padding: 72px 0 104px; }

.lede { max-width: 660px; margin: 0 0 56px; }
.lede--center { max-width: 660px; margin-left: auto; margin-right: auto; text-align: center; }

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

.h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(28px, 4.2vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.022em;
  margin: 0 0 20px;
}

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

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

.note {
  color: var(--text-dim);
  font-size: 14.5px;
  border-left: 2px solid var(--primary-soft);
  padding-left: 16px;
  margin: 24px 0 32px;
}

/* A small status dot that completes on a slow cycle — the brand tic. */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 0 var(--primary-glow);
  animation: tick 4.6s ease-out infinite;
}

@keyframes tick {
  0%       { box-shadow: 0 0 0 0 var(--primary-glow); }
  55%      { box-shadow: 0 0 0 7px rgba(127, 164, 109, 0); }
  100%     { box-shadow: 0 0 0 0 rgba(127, 164, 109, 0); }
}

/* ===================================================================
   SEAM — the section join
   Real Estate joined its sections with travelling waves. This joins
   them with a service line: it draws in when you reach it, then a
   slow light runs the length of it. Scroll speed brightens it a
   little; it never changes shape.
   =================================================================== */
.seam {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}

.seam__line {
  position: relative;
  display: block;
  height: 1px;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(90deg, transparent, var(--edge) 14%, var(--edge) 86%, transparent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 1.5s var(--pour);
}

.seam.is-in .seam__line { transform: scaleX(1); }

.seam__line::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 26%;
  background: linear-gradient(90deg, transparent, var(--primary), transparent);
  opacity: calc(0.28 + var(--flow) * 0.45);
  animation: seam-run 13s linear infinite;
}

@keyframes seam-run {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ===================================================================
   WORDMARK
   The Real Estate droplet is replaced by a status square that fills
   and clears on a cycle — the same idea, in this brand's language.
   =================================================================== */
.wordmark {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.wordmark__mark {
  position: relative;
  width: 13px;
  height: 13px;
  border-radius: 4px;
  border: 1.5px solid var(--primary);
  flex: none;
}

.wordmark__mark::after {
  content: "";
  position: absolute;
  inset: 2px;
  border-radius: 2px;
  background: var(--gradient);
  transform: scale(0);
  transform-origin: center;
  animation: mark-fill 5.2s var(--settle) infinite;
}

@keyframes mark-fill {
  0%, 8%   { transform: scale(0); }
  26%, 74% { transform: scale(1); }
  92%,100% { transform: scale(0); }
}

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

.wordmark__thin {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  color: var(--text-dim);
}

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

/* ===================================================================
   TOP BAR
   =================================================================== */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(16, 20, 14, 0.72);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-bottom: 1px solid var(--edge);
}

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

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

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  padding: 8px 13px;
  border-radius: var(--radius-pill);
  transition: color 0.4s ease, background 0.4s ease;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 3px;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left center;
  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); }

.nav__link--cta {
  color: var(--primary);
  border: 1px solid var(--edge-lit);
  margin-left: 8px;
}
.nav__link--cta::after { display: none; }
.nav__link--cta:hover { background: var(--primary-soft); color: var(--secondary); }

.navtoggle {
  display: none;
  width: 40px;
  height: 40px;
  margin-left: auto;
  border: 1px solid var(--edge);
  border-radius: 12px;
  background: var(--glass);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.navtoggle__bar {
  display: block;
  width: 16px;
  height: 1.5px;
  background: var(--text);
  transition: transform 0.45s var(--settle), opacity 0.3s ease;
}

.navtoggle[aria-expanded="true"] .navtoggle__bar:first-child {
  transform: translateY(3.25px) rotate(45deg);
}
.navtoggle[aria-expanded="true"] .navtoggle__bar:last-child {
  transform: translateY(-3.25px) rotate(-45deg);
}

/* Call button — solid primary, no gradient animation. This brand does
   not pulse at you; it just stays where you left it. */
.callbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  color: var(--background);
  background: var(--primary);
  overflow: hidden;
  transition: transform 0.5s var(--settle), box-shadow 0.5s ease, background 0.5s ease;
  box-shadow: 0 6px 20px rgba(127, 164, 109, 0.16);
  flex: none;
}

.callbtn:hover {
  background: var(--secondary);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(127, 164, 109, 0.28);
}

.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: 9px;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  opacity: 0.7;
}

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

@media (max-width: 1080px) {
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 8px 16px 18px;
    background: rgba(16, 20, 14, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid var(--edge);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, transform 0.45s var(--settle), visibility 0.35s;
  }

  .nav.is-open { opacity: 1; visibility: visible; transform: none; }

  .nav__link { padding: 13px 10px; font-size: 14px; border-radius: 10px; }
  .nav__link::after { display: none; }
  .nav__link.is-current { background: var(--primary-soft); color: var(--primary); }
  .nav__link--cta { margin: 10px 0 0; text-align: center; }

  .navtoggle { display: flex; }
}

@media (max-width: 640px) {
  .callbtn__label { display: none; }
  .callbtn { padding: 8px 14px; gap: 8px; }
  .callbtn__number { font-size: 12.5px; }
  .callbtn__icon { font-size: 15px; }
  .wordmark__thin { display: none; }
  .wordmark { font-size: 14px; }
  .topbar__inner { padding: 12px 16px; gap: 12px; }
  .shell { padding: 0 18px; }
  .filterbar__inner { padding: 12px 18px; }
}

/* ===================================================================
   BUTTONS
   Same proportions as Zone Real Estate: 40px pill, mono label, a
   light that sweeps across on hover.
   =================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  overflow: hidden;
  transition: transform 0.55s var(--settle), background 0.5s ease,
              border-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.btn > span:not(.btn__sweep) { position: relative; z-index: 2; }

.btn__sweep {
  position: absolute;
  left: -35%;
  top: 0;
  bottom: 0;
  width: 35%;
  background: linear-gradient(100deg, transparent, rgba(243, 246, 238, 0.16), transparent);
  transition: left 0.85s var(--pour);
  z-index: 1;
}

.btn:hover .btn__sweep { left: 110%; }

.btn--primary {
  background: var(--primary);
  color: var(--background);
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(127, 164, 109, 0.18);
}

.btn--primary:hover {
  background: var(--secondary);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(127, 164, 109, 0.3);
}

.btn--ghost {
  background: var(--glass);
  border-color: var(--edge);
  color: var(--secondary);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

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

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

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

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

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

.hero__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(34px, 4.6vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.028em;
  margin: 0 0 24px;
}

.hero__line { display: block; }

.hero__line--accent {
  background: linear-gradient(100deg, var(--primary) 8%, var(--secondary) 52%, var(--primary) 92%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sheen 22s linear infinite;
}

@keyframes sheen {
  0%   { background-position: 0% 50%; }
  100% { background-position: 220% 50%; }
}

.hero__tagline {
  max-width: 520px;
  color: var(--text-mid);
  margin: 0 0 34px;
}

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

.hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 50px 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 MAINTENANCE CYCLE — the hero's thesis
   The ring draws once on arrival. Then a light runs the loop forever
   at a constant speed, and each stage completes as the light reaches
   it. When the lap closes, the statuses clear and it starts again.
   That is the whole business model in one object.
   ------------------------------------------------------------------- */
.cycle {
  position: relative;
  width: 100%;
  max-width: 430px;
  aspect-ratio: 1;
  justify-self: end;
}

.cycle__svg { width: 100%; height: 100%; overflow: visible; }

.cycle__ring,
.cycle__draw,
.cycle__pulse {
  fill: none;
  stroke-linecap: round;
  transform: rotate(-90deg);
  transform-origin: 200px 200px;
}

.cycle__ring { stroke: var(--edge); stroke-width: 1; }

.cycle__draw {
  stroke: var(--primary);
  stroke-width: 1.5;
  opacity: 0.5;
  stroke-dasharray: 829.4;
  stroke-dashoffset: 829.4;
  transition: stroke-dashoffset 2.4s var(--pour);
}

.cycle.is-in .cycle__draw { stroke-dashoffset: 0; }

.cycle__pulse {
  stroke: var(--secondary);
  stroke-width: 2.5;
  stroke-dasharray: 52 777.4;
  stroke-dashoffset: 0;
  opacity: 0;
}

.cycle.is-running .cycle__pulse {
  opacity: 0.95;
  animation: cycle-run 14.4s linear infinite;
}

@keyframes cycle-run {
  0%   { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -829.4; }
}

/* Pending stages are open rings, not dark holes — an unvisited stop on
   the round still has to be legible as a stop. */
.cycle__node {
  fill: var(--surface);
  stroke: rgba(243, 246, 238, 0.30);
  stroke-width: 1.5;
  transition: fill 0.6s var(--pour), stroke 0.6s var(--pour), r 0.6s var(--settle);
}

.cycle__label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  fill: var(--text-dim);
  transition: fill 0.6s var(--pour);
}

.cycle__stage.is-done .cycle__node { fill: var(--secondary); stroke: var(--secondary); }
.cycle__stage.is-done .cycle__label { fill: var(--text-mid); }

.cycle__stage.is-active .cycle__node { fill: var(--primary); stroke: var(--primary); r: 12; }
.cycle__stage.is-active .cycle__label { fill: var(--text); }

.cycle__core {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-align: center;
  width: 62%;
}

.cycle__core-label {
  font-family: var(--font-mono);
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-faint);
}

.cycle__core-value {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.cycle__core-note {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--primary);
}

@media (max-width: 900px) {
  .hero { padding: 64px 0 96px; }
  .hero__inner { grid-template-columns: 1fr; gap: 0; }
  .cycle { max-width: 340px; justify-self: center; margin-top: 56px; }
}

/* ===================================================================
   FILTER BAR
   =================================================================== */
.filterbar {
  position: sticky;
  top: 61px;
  z-index: 25;
  margin: 0 0 44px;
  background: rgba(16, 20, 14, 0.82);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid var(--edge);
  border-bottom: 1px solid var(--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(--edge);
  padding: 8px 18px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  transition: color 0.45s ease, border-color 0.45s ease;
}

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

/* Active state fills from the left, like a task completing. */
.filter::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-101%);
  transition: transform 0.6s var(--pour);
  z-index: 1;
}

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

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

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

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

/* Four Albanian category names do not fit across a phone, and squeezing
   them clips the labels. Scroll the row instead — the labels stay whole. */
@media (max-width: 640px) {
  .filterbar { top: 57px; }
  .filterbar__count { display: none; }

  .filterbar__inner { padding-right: 0; }

  .filterbar__buttons {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-right: 18px;
    scroll-snap-type: x proximity;
  }

  .filterbar__buttons::-webkit-scrollbar { display: none; }

  .filter {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 9px 16px;
    font-size: 12px;
    scroll-snap-align: start;
  }
}

/* ===================================================================
   GRIDS + SERVICE CARDS
   Card geometry is carried over from Zone Real Estate unchanged:
   same radius, same padding, same hover lift. What changed is that
   the corners no longer deform — they stay square to their grid,
   because this brand's promise is that things stay put.
   =================================================================== */
.grid { display: grid; gap: 26px; align-items: start; }

.grid--services { grid-template-columns: repeat(auto-fill, minmax(304px, 1fr)); }
.grid--reasons  { grid-template-columns: repeat(auto-fill, minmax(258px, 1fr)); }

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition:
    transform 0.7s var(--settle),
    border-color 0.5s ease,
    box-shadow 0.6s ease;
}

.card:hover {
  transform: translateY(-6px);
  border-color: var(--edge-lit);
  box-shadow: 0 24px 54px rgba(6, 9, 5, 0.55);
}

/* A thin primary rule that draws across the top on hover — the card
   "checks in" rather than deforming. */
.card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background: var(--gradient);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.7s var(--pour);
  z-index: 3;
}

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

.card__figure { position: relative; margin: 0; overflow: hidden; }

.card__photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 1.4s var(--pour);
}

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

.card__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 45%, rgba(25, 32, 23, 0.92));
  pointer-events: none;
}

.card__tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--secondary);
  background: rgba(16, 20, 14, 0.78);
  border: 1px solid var(--edge);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: 5px 12px;
  border-radius: var(--radius-pill);
}

.card__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
}

.card__body { padding: 22px 24px 24px; }

.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__summary {
  font-size: 14.5px;
  color: var(--text-mid);
  margin: 0 0 18px;
}

.card__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--edge);
}

.card__cat {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.06em;
}

.card__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--primary);
  background: none;
  border: none;
  padding: 0;
  transition: color 0.4s ease, gap 0.5s var(--settle);
}

.card:hover .card__more { color: var(--secondary); gap: 12px; }

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

/* ===================================================================
   CONVERGE — "Një objekt. Një ekip. Një standard."
   =================================================================== */
.converge { margin-top: 12px; text-align: center; }

.converge__inputs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 4px;
}

.converge__in {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  background: var(--surface-2);
  border: 1px solid var(--edge);
  padding: 10px 18px;
  border-radius: var(--radius-pill);
}

.converge__funnel { height: 90px; margin: 0 auto; max-width: 620px; }
.converge__funnel svg { width: 100%; height: 100%; }

.converge__path {
  fill: none;
  stroke: var(--edge);
  stroke-width: 1;
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
}

.converge__funnel.is-in .converge__path {
  animation: draw-path 1.5s var(--pour) forwards;
}

.converge__funnel.is-in .converge__path:nth-child(1) { animation-delay: 0.05s; }
.converge__funnel.is-in .converge__path:nth-child(2) { animation-delay: 0.15s; }
.converge__funnel.is-in .converge__path:nth-child(3) { animation-delay: 0.25s; }
.converge__funnel.is-in .converge__path:nth-child(4) { animation-delay: 0.35s; }
.converge__funnel.is-in .converge__path:nth-child(5) { animation-delay: 0.45s; }

@keyframes draw-path {
  from { stroke-dashoffset: 200; stroke: var(--edge); }
  to   { stroke-dashoffset: 0; stroke: var(--edge-lit); }
}

.converge__hub {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 18px 32px;
  border-radius: var(--radius);
  background: var(--surface-2);
  border: 1px solid var(--edge-lit);
  box-shadow: 0 0 42px rgba(127, 164, 109, 0.10);
}

.converge__hub-mark {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--gradient);
  flex: none;
}

.converge__hub-name {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--text);
}

.converge__stem { height: 54px; display: flex; justify-content: center; }

.converge__stem span {
  display: block;
  width: 1px;
  height: 100%;
  background: linear-gradient(180deg, var(--edge-lit), transparent);
  transform: scaleY(0);
  transform-origin: top center;
  transition: transform 0.9s var(--pour);
}

.converge__stem.is-in span { transform: scaleY(1); }

.converge__out {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(20px, 3vw, 30px);
  letter-spacing: -0.015em;
  color: var(--text);
  margin: 0;
}

@media (max-width: 640px) {
  .converge__funnel { display: none; }
  .converge__inputs { margin-bottom: 28px; }
  .converge__in { font-size: 11.5px; padding: 8px 14px; }
  .converge__hub { padding: 16px 22px; }
  .converge__hub-name { font-size: 11.5px; letter-spacing: 0.1em; }
  .converge__stem { height: 38px; }
}

/* ===================================================================
   SPLIT + COMPARE (preventive vs reactive)
   =================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

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

.compare { display: grid; gap: 18px; }

.compare__card {
  padding: 26px 26px 28px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--edge);
}

.compare__card--prev {
  border-color: var(--edge-lit);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  box-shadow: 0 18px 48px rgba(6, 9, 5, 0.4);
}

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

.compare__card--prev .compare__tag { color: var(--primary); }

.compare__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 0 0 18px;
}

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

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

/* Reactive items get an unresolved marker; preventive items get a tick. */
.compare__list li::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid var(--text-faint);
}

.compare__list--check li::before {
  content: "";
  left: 4px;
  top: 6px;
  width: 10px;
  height: 6px;
  border: 1.5px solid var(--primary);
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-45deg);
}

/* The ticks land one after another, like a list being worked through. */
.compare__card--prev.is-in .compare__list--check li::before {
  animation: tick-in 0.5s var(--settle) both;
}
.compare__card--prev.is-in .compare__list--check li:nth-child(1)::before { animation-delay: 0.25s; }
.compare__card--prev.is-in .compare__list--check li:nth-child(2)::before { animation-delay: 0.37s; }
.compare__card--prev.is-in .compare__list--check li:nth-child(3)::before { animation-delay: 0.49s; }
.compare__card--prev.is-in .compare__list--check li:nth-child(4)::before { animation-delay: 0.61s; }
.compare__card--prev.is-in .compare__list--check li:nth-child(5)::before { animation-delay: 0.73s; }

@keyframes tick-in {
  from { opacity: 0; transform: rotate(-45deg) scale(0.4); }
  to   { opacity: 1; transform: rotate(-45deg) scale(1); }
}

/* ===================================================================
   SYSTEMS LIST
   =================================================================== */
.systems {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1px;
  background: var(--edge);
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  overflow: hidden;
}

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

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

.system__name {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}

.system__num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--primary);
  letter-spacing: 0.1em;
  flex: none;
}

.system__note {
  font-size: 14px;
  color: var(--text-mid);
  margin: 0;
  padding-left: 32px;
}

@media (max-width: 640px) {
  .system { padding: 20px; }
  .system__note { padding-left: 0; }
}

/* ===================================================================
   FLOW — Kërkesa → Mbyllja
   The connector between stages draws in as the section arrives, and
   each stage's status flips from pending to done in sequence.
   =================================================================== */
.flow {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  counter-reset: flow;
}

.flow__item {
  position: relative;
  padding: 0 14px;
  text-align: center;
}

.flow__item::before {
  content: "";
  position: absolute;
  left: -50%;
  right: 50%;
  top: 13px;
  height: 1px;
  background: var(--edge);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.6s var(--pour);
}

.flow__item:first-child::before { display: none; }
.flow.is-in .flow__item::before { transform: scaleX(1); }

/* The connector lights once the stage behind it has completed, so the
   line reads as progress rather than decoration. */
.flow.is-in .flow__item.is-done::before { background: var(--edge-lit); }
.flow.is-in .flow__item:nth-child(2)::before { transition-delay: 0.20s; }
.flow.is-in .flow__item:nth-child(3)::before { transition-delay: 0.44s; }
.flow.is-in .flow__item:nth-child(4)::before { transition-delay: 0.68s; }
.flow.is-in .flow__item:nth-child(5)::before { transition-delay: 0.92s; }
.flow.is-in .flow__item:nth-child(6)::before { transition-delay: 1.16s; }

.flow__mark {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 27px;
  height: 27px;
  margin: 0 auto 16px;
  border-radius: 50%;
  border: 1px solid var(--edge);
  background: var(--background);
  transition: background 0.5s var(--pour), border-color 0.5s var(--pour),
              box-shadow 0.5s var(--pour);
}

.flow__mark::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border: 1.5px solid var(--background);
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.45s var(--settle);
}

.flow.is-in .flow__item.is-done .flow__mark {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 0 0 4px var(--primary-soft);
}

.flow.is-in .flow__item.is-done .flow__mark::after { transform: rotate(-45deg) scale(1); }

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

.flow__note {
  font-size: 13px;
  color: var(--text-dim);
  margin: 0;
}

@media (max-width: 900px) { .flow { grid-template-columns: repeat(3, 1fr); row-gap: 34px; } }

@media (max-width: 560px) {
  .flow { grid-template-columns: 1fr; row-gap: 0; }
  .flow__item { display: grid; grid-template-columns: 27px 1fr; gap: 16px; text-align: left; padding: 0 0 26px; }
  .flow__mark { margin: 0; grid-row: span 2; }
  .flow__item::before {
    left: 13px; right: auto; top: -26px; bottom: auto;
    width: 1px; height: 26px;
    transform: scaleY(0); transform-origin: top center;
  }
  .flow.is-in .flow__item::before { transform: scaleY(1); }
  .flow__step { grid-column: 2; }
  .flow__note { grid-column: 2; }
}

/* ===================================================================
   BEFORE / AFTER
   =================================================================== */
.ba { margin: 0 auto; max-width: 900px; }

.ba__frame {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--edge);
  background: var(--surface);
  aspect-ratio: 16 / 10;

  /* The whole comparison runs off this one variable, set by the range
     input. clip-path keeps both images at full frame width, so nothing
     squashes as the divider moves. */
  --ba: 50%;
}

.ba__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ba__img--before { clip-path: inset(0 calc(100% - var(--ba)) 0 0); }

.ba__divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--ba);
  width: 1px;
  background: var(--secondary);
  z-index: 3;
}

.ba__tag {
  position: absolute;
  bottom: 16px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-mid);
  background: rgba(16, 20, 14, 0.8);
  border: 1px solid var(--edge);
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.ba__tag--l { left: 16px; }
.ba__tag--r { right: 16px; color: var(--secondary); }

.ba__range {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  -webkit-appearance: none;
  appearance: none;
  background: none;
}

.ba__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 56px;
  height: 100%;
  cursor: ew-resize;
}
.ba__range::-moz-range-thumb { width: 56px; height: 400px; border: none; opacity: 0; cursor: ew-resize; }

.ba__handle {
  position: absolute;
  top: 50%;
  left: var(--ba);
  z-index: 3;
  width: 42px;
  height: 42px;
  margin: -21px 0 0 -21px;
  border-radius: 50%;
  background: var(--surface-2);
  border: 1px solid var(--secondary);
  pointer-events: none;
  box-shadow: 0 6px 20px rgba(6, 9, 5, 0.5);
}

.ba__handle::before,
.ba__handle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-top: 1.5px solid var(--secondary);
  border-right: 1.5px solid var(--secondary);
}

.ba__handle::before { left: 11px; transform: rotate(-135deg); }
.ba__handle::after  { right: 11px; transform: rotate(45deg); }

.ba__caption {
  margin: 16px 0 0;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-dim);
}

/* ===================================================================
   CHIPS
   =================================================================== */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chips--types .chip {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-mid);
  background: var(--surface-2);
  border: 1px solid var(--edge);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  transition: border-color 0.45s ease, color 0.45s ease, transform 0.55s var(--settle);
}

.chips--types .chip:hover {
  border-color: var(--edge-lit);
  color: var(--text);
  transform: translateY(-2px);
}

/* Selectable chips in the quote form */
.chips--pick { gap: 9px; }

.pick {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-mid);
  background: var(--glass);
  border: 1px solid var(--edge);
  padding: 10px 16px 10px 13px;
  border-radius: var(--radius-pill);
  transition: border-color 0.4s ease, color 0.4s ease, background 0.4s ease;
}

.pick__box {
  width: 15px;
  height: 15px;
  flex: none;
  border-radius: 4px;
  border: 1px solid var(--text-faint);
  display: grid;
  place-items: center;
  transition: border-color 0.4s ease, background 0.4s ease;
}

.pick__box::after {
  content: "";
  width: 7px;
  height: 4px;
  margin-top: -1px;
  border: 1.5px solid var(--background);
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-45deg) scale(0);
  transition: transform 0.4s var(--settle);
}

.pick:hover { border-color: var(--edge-lit); color: var(--text); }

.pick.is-picked {
  color: var(--text);
  border-color: var(--edge-lit);
  background: var(--primary-soft);
}

.pick.is-picked .pick__box { background: var(--primary); border-color: var(--primary); }
.pick.is-picked .pick__box::after { transform: rotate(-45deg) scale(1); }

/* ===================================================================
   REASONS
   =================================================================== */
.reason {
  padding: 24px 24px 26px;
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--edge);
  transition: border-color 0.5s ease, transform 0.6s var(--settle), background 0.5s ease;
}

.reason:hover { border-color: var(--edge-lit); background: var(--surface-2); transform: translateY(-4px); }

.reason__mark {
  width: 22px;
  height: 22px;
  margin-bottom: 16px;
  border-radius: 6px;
  border: 1px solid var(--edge-lit);
  display: grid;
  place-items: center;
}

.reason__mark::after {
  content: "";
  width: 9px;
  height: 5px;
  margin-top: -2px;
  border: 1.5px solid var(--primary);
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-45deg);
}

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

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

/* ===================================================================
   STEPS — Si funksionon
   =================================================================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 26px;
}

.step { position: relative; padding-top: 22px; border-top: 1px solid var(--edge); }

.step::after {
  content: "";
  position: absolute;
  left: 0;
  top: -1px;
  width: 0;
  height: 1px;
  background: var(--primary);
  transition: width 1s var(--pour);
}

.step.is-in::after { width: 42px; }

.step__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--primary);
  margin-bottom: 12px;
}

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

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

/* ===================================================================
   QUOTE FORM
   =================================================================== */
.quote {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
}

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

.quote__points { display: grid; gap: 11px; margin: 28px 0 32px; }

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

.quote__points li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 10px;
  height: 6px;
  border: 1.5px solid var(--primary);
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.quote__call {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--edge);
  background: var(--glass);
  transition: border-color 0.5s ease, transform 0.6s var(--settle);
}

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

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

.quote__call-number {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--secondary);
}

.form {
  background: var(--surface);
  border: 1px solid var(--edge);
  border-radius: var(--radius-lg);
  padding: 32px;
}

@media (max-width: 560px) { .form { padding: 24px 20px; } }

.form__set { border: none; margin: 0 0 26px; padding: 0; }

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

.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

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

.field { display: block; margin-bottom: 16px; }

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

.field__opt { text-transform: none; letter-spacing: 0.02em; color: var(--text-faint); }

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

.field__input::placeholder { color: var(--text-faint); }

.field__input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

.field__input--area { resize: vertical; min-height: 96px; line-height: 1.6; }

.field__select { position: relative; display: block; }

.field__select::after {
  content: "";
  position: absolute;
  right: 17px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.5px solid var(--text-dim);
  border-bottom: 1.5px solid var(--text-dim);
  transform: rotate(45deg);
  pointer-events: none;
}

.field__select select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
}

.field__error,
.form__error {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--secondary);
  margin: 8px 0 0;
}

.field__input.is-bad { border-color: var(--secondary); }

.form__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 26px; }

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

.form__note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--text-dim);
  margin: 18px 0 0;
}

.form__note.is-good { color: var(--primary); }

/* ===================================================================
   DETAIL PANEL
   Opens by settling into place rather than pouring. Same size and
   radius as the Real Estate panel.
   =================================================================== */
.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(8, 11, 7, 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(--edge);
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(4, 6, 3, 0.72);
  animation: settle 0.6s var(--settle) both;
}

@keyframes settle {
  0%   { opacity: 0; transform: translateY(26px) 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(--edge);
  border-radius: 50%;
  background: rgba(16, 20, 14, 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(--settle), border-color 0.4s ease;
}

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

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

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

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

.detail__tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  border: 1px solid var(--edge-lit);
  padding: 5px 13px;
  border-radius: var(--radius-pill);
  margin-bottom: 16px;
}

.detail__title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(24px, 4vw, 30px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

.detail__headline {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--secondary);
  margin: 0 0 22px;
}

.detail__text {
  font-size: 15.5px;
  line-height: 1.72;
  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__scope {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 10px;
  margin: 0 0 28px;
}

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

.detail__scope li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 7px;
  width: 10px;
  height: 6px;
  border: 1.5px solid var(--primary);
  border-top: none;
  border-right: none;
  border-radius: 1px;
  transform: rotate(-45deg);
}

.detail__good { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 30px; }

.detail__good li {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-mid);
  background: var(--surface-2);
  border: 1px solid var(--edge);
  padding: 7px 14px;
  border-radius: var(--radius-pill);
}

.detail__actions { display: grid; grid-template-columns: 1fr auto; gap: 10px; }

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

/* ===================================================================
   FOOTER
   =================================================================== */
.footer {
  position: relative;
  z-index: 2;
  border-top: 1px solid var(--edge);
  background: var(--surface);
  padding: 56px 0 40px;
}

.footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  gap: 44px;
  align-items: start;
}

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

.footer__note {
  color: var(--text-mid);
  font-size: 14px;
  max-width: 340px;
  margin: 18px 0 0;
}

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

.footer__nav a {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  transition: color 0.4s ease;
  justify-self: start;
}

.footer__nav a:hover { color: var(--primary); }

.footer__contact { display: grid; gap: 12px; justify-items: start; }

.footer__phone {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text);
  border: 1px solid var(--edge);
  background: var(--glass);
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  transition: border-color 0.5s ease, transform 0.6s var(--settle), color 0.4s ease;
}

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

.footer__mail {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-dim);
  transition: color 0.4s ease;
}

.footer__mail:hover { color: var(--primary); }

.footer__legal {
  margin: 44px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--edge);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-faint);
}

/* ===================================================================
   REDUCED MOTION
   Every ambient loop stops. Nothing is left invisible or mid-draw.
   =================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

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

  .js .reveal { opacity: 1; transform: none; }

  .ambient__mass { opacity: 0.10; }
  .seam__line { transform: scaleX(1); }
  .seam__line::after { display: none; }

  .cycle__draw { stroke-dashoffset: 0; }
  .cycle__pulse { display: none; }

  .converge__path { stroke-dashoffset: 0; stroke: var(--edge-lit); }
  .converge__stem span { transform: scaleY(1); }

  .flow__item::before { transform: scaleX(1) !important; }
  .flow__mark::after { transform: rotate(-45deg) scale(1); }
  .flow__item .flow__mark { background: var(--primary); border-color: var(--primary); }

  .step::after { width: 42px; }

  .card:hover { transform: none; }
  .card::before { transform: scaleX(1); }
}

/* Header gains an edge once you leave the top of the page. */
.topbar.is-stuck { box-shadow: 0 12px 34px rgba(6, 9, 5, 0.44); }