/* ===================================================================
   ZONE GROUP INVESTMENTS & CONSULTING
   -------------------------------------------------------------------
   Sibling build to Zone Real Estate. Same architecture, same type
   hierarchy, same layout rhythm and reveal system — different palette
   and a different motion metaphor.

   DIRECTION OF PROGRESSION: left to right, and upward. Every animation
   obeys it — timelines draw rightward, milestones activate in sequence,
   content rises into place, the consulting chain climbs. Real Estate
   flows like water; this one advances like a plan.

   PALETTE: deep forest ground with muted gold. Green carries growth and
   stability, gold carries value — used sparingly so it reads as an
   accent on a serious document, not as decoration.
   =================================================================== */

/* ===================================================================
   DESIGN TOKENS
   Every colour in this file comes from here. Change a value once and
   it changes everywhere. Do not hardcode hex values in components.
   =================================================================== */
:root {
  /* --- Brand colours (the official design system) --- */
  --background:  #09120F;
  --surface:     #101B17;
  --primary:     #43856E;
  --secondary:   #C3A25A;
  --foreground:  #F5F2E9;

  /* --- Derived surfaces --- */
  --surface-raised: #16241E;
  --surface-sunk:   #0C1512;

  /* --- Derived text weights --- */
  --fg-mid:  rgba(245, 242, 233, 0.66);
  --fg-dim:  rgba(245, 242, 233, 0.44);
  --fg-faint:rgba(245, 242, 233, 0.26);

  /* --- Derived lines and washes --- */
  --line:         rgba(245, 242, 233, 0.10);
  --line-strong:  rgba(245, 242, 233, 0.20);
  --primary-wash: rgba(67, 133, 110, 0.14);
  --primary-edge: rgba(67, 133, 110, 0.42);
  --secondary-wash: rgba(195, 162, 90, 0.12);
  --secondary-edge: rgba(195, 162, 90, 0.42);

  /* The one gradient. Growth into value. Used sparingly. */
  --sweep: linear-gradient(100deg, var(--primary), var(--secondary));

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

  /* --- Layout --- */
  --shell: 1200px;
  --gutter: 26px;
  --radius:    18px;
  --radius-lg: 26px;
  --radius-pill: 44px;

  /* --- Motion ---
     Calmer than the Real Estate build: the settle curve overshoots far
     less. Advisory work should not bounce. */
  --settle: cubic-bezier(0.22, 1.06, 0.36, 1);
  --draw:   cubic-bezier(0.62, 0, 0.20, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
  -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, svg { display: block; max-width: 100%; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ===================================================================
   AMBIENT FIELD
   A planning grid rather than drifting masses. It sits far back and
   creeps up and to the right — slow enough that you register it as
   texture, not movement.
   =================================================================== */
.ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient__grid {
  position: absolute;
  inset: -120px;
  opacity: 0.5;
  background-image:
    linear-gradient(to right, rgba(245, 242, 233, 0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(245, 242, 233, 0.035) 1px, transparent 1px);
  background-size: 78px 78px;
  animation: creep 64s linear infinite;
  /* Fades out toward the edges so the grid never looks like a table */
  -webkit-mask-image: radial-gradient(ellipse 78% 62% at 46% 34%, #000 0%, transparent 78%);
          mask-image: radial-gradient(ellipse 78% 62% at 46% 34%, #000 0%, transparent 78%);
}

@keyframes creep {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(78px, -78px, 0); }
}

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

.ambient__glow--primary {
  width: 54vw; height: 54vw;
  left: -12vw; top: 2vh;
  background: radial-gradient(circle at 50% 50%, var(--primary), transparent 68%);
  opacity: 0.22;
  animation: drift-a 58s ease-in-out infinite;
}

.ambient__glow--secondary {
  width: 38vw; height: 38vw;
  right: -8vw; top: 46vh;
  background: radial-gradient(circle at 50% 50%, var(--secondary), transparent 66%);
  opacity: 0.10;
  animation: drift-b 71s ease-in-out infinite;
}

/* Both climb to the right — the progression rule, applied to ambience. */
@keyframes drift-a {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(9vw, -8vh, 0) scale(1.12); }
}
@keyframes drift-b {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50%      { transform: translate3d(5vw, -12vh, 0) scale(0.9); }
}

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

/* ===================================================================
   REVEAL — content rises into place as it enters the viewport
   Shorter travel than the Real Estate build, no blur. Precision
   rather than emergence.
   =================================================================== */
.js .reveal {
  opacity: 0;
  transform: translate3d(-8px, 22px, 0);
}

.js .reveal.is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s var(--draw),
    transform 0.9s var(--settle);
}

.reveal[data-delay="1"].is-revealed { transition-delay: 0.06s; }
.reveal[data-delay="2"].is-revealed { transition-delay: 0.12s; }
.reveal[data-delay="3"].is-revealed { transition-delay: 0.18s; }
.reveal[data-delay="4"].is-revealed { transition-delay: 0.24s; }
.reveal[data-delay="5"].is-revealed { transition-delay: 0.30s; }

/* ===================================================================
   SIGNATURE — the trajectory spine
   Down the right edge on wide screens. It is not decoration: each node
   is a real section of the page, it fills as you descend, and the node
   for the section you are reading lights and names itself. The page's
   own argument runs Ideja → Realizimi, so its progress indicator does
   the same.
   =================================================================== */
.spine {
  position: fixed;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 35;
  pointer-events: none;
}

.spine__rail {
  position: relative;
  width: 1px;
  background: var(--line);
}

.spine__fill {
  position: absolute;
  left: 0; top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg, var(--primary), var(--secondary));
}

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

.spine__node {
  position: absolute;
  left: 0;
  width: 7px; height: 7px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--background);
  transition:
    background 0.5s ease,
    border-color 0.5s ease,
    transform 0.6s var(--settle);
}

.spine__node.is-passed {
  border-color: var(--primary-edge);
  background: var(--primary);
}

.spine__node.is-current {
  border-color: var(--secondary);
  background: var(--secondary);
  transform: scale(1.55);
}

/* Set vertically, reading downward, so it sits in the page margin
   without taking horizontal space from the content. */
.spine__label {
  position: absolute;
  top: 0;
  left: -24px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  white-space: nowrap;
  transform-origin: left top;
  transform: rotate(90deg);
  transition: color 0.5s ease;
}

.spine__label b { font-weight: 400; color: var(--secondary); }

@media (max-width: 1180px) { .spine { display: none; } }

/* ===================================================================
   WORDMARK
   The Real Estate mark has a falling droplet between the words. Here
   it is a node on a short rule — the same idea, translated: a point on
   a path instead of a drop of liquid.
   =================================================================== */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.055em;
  white-space: nowrap;
}

.wordmark__zone { color: var(--foreground); }

.wordmark__node {
  position: relative;
  width: 26px;
  height: 7px;
  flex: none;
}

.wordmark__node::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 1px;
  background: var(--line-strong);
}

.wordmark__node::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--secondary);
  animation: advance 5.5s var(--settle) infinite;
}

/* The node travels the rule, holds at the end, returns. Progress. */
@keyframes advance {
  0%, 8%    { left: 0; transform: scale(1); }
  42%, 62%  { left: 21px; transform: scale(1.15); }
  96%, 100% { left: 0; transform: scale(1); }
}

.wordmark__rest {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--fg-mid);
  text-transform: uppercase;
}

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

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

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

.nav__link {
  position: relative;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--fg-mid);
  padding: 4px 0;
  transition: color 0.4s ease;
}

/* Underline draws in from the left — the progression rule at the
   smallest scale on the page. */
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  height: 1px;
  width: 100%;
  background: var(--sweep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--draw);
}

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

.topbar__cta { flex: none; }

.menubtn {
  display: none;
  margin-left: auto;
  width: 42px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  background: var(--surface);
  padding: 0;
  position: relative;
}

.menubtn span {
  position: absolute;
  left: 11px;
  width: 18px; height: 1px;
  background: var(--foreground);
  transition: transform 0.45s var(--settle), opacity 0.3s ease;
}

.menubtn span:nth-child(1) { top: 14px; }
.menubtn span:nth-child(2) { top: 19px; }
.menubtn span:nth-child(3) { top: 24px; }

.menubtn.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.menubtn.is-open span:nth-child(2) { opacity: 0; }
.menubtn.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

.menu {
  display: none;
  border-top: 1px solid var(--line);
  background: rgba(16, 27, 23, 0.96);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.menu.is-open { display: block; }

.menu__inner {
  padding: 12px var(--gutter) 22px;
  display: grid;
  gap: 2px;
}

.menu__link {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--fg-mid);
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
}

.menu__link:last-of-type { border-bottom: none; }
.menu__cta { margin-top: 14px; }

/* These selectors are doubled up on purpose. The .btn rules are defined
   after this block, and a bare .topbar__cta would lose to .btn on
   source order, leaving the button visible and overflowing the bar. */
@media (max-width: 1020px) {
  .topbar .nav { display: none; }
  .topbar .topbar__cta { display: none; }
  .topbar .menubtn { display: block; }
}

/* ===================================================================
   BUTTONS
   Proportions carried across from the Real Estate build: 40px+ pill,
   mono label, sweep on hover. The fills are the only thing that changed.
   =================================================================== */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.02em;
  overflow: hidden;
  transition: transform 0.55s var(--settle), border-color 0.4s ease, box-shadow 0.5s ease, color 0.4s ease;
}

.btn:hover { transform: translateY(-2px); }

.btn__glide {
  position: absolute;
  top: 0; bottom: 0;
  left: -40%;
  width: 40%;
  background: linear-gradient(100deg, transparent, rgba(245, 242, 233, 0.16), transparent);
  transition: left 0.85s var(--draw);
  pointer-events: none;
}

.btn:hover .btn__glide { left: 115%; }

/* Primary — the only solid green on the page. */
.btn--primary {
  background: var(--primary);
  color: var(--background);
  box-shadow: 0 8px 26px rgba(67, 133, 110, 0.22);
}

.btn--primary:hover {
  box-shadow: 0 14px 34px rgba(67, 133, 110, 0.34);
}

/* Secondary — outlined gold. Never a solid gold fill: too much gold
   is the fastest way to look like a private bank. */
.btn--secondary {
  background: transparent;
  color: var(--secondary);
  border-color: var(--secondary-edge);
}

.btn--secondary:hover {
  border-color: var(--secondary);
  background: var(--secondary-wash);
}

.btn--ghost {
  background: var(--surface);
  color: var(--fg-mid);
  border-color: var(--line-strong);
}

.btn--ghost:hover { color: var(--foreground); border-color: var(--primary-edge); }

.btn--sm { padding: 10px 20px; font-size: 12px; }
.btn--wide { width: 100%; padding: 16px 26px; font-size: 14.5px; }

/* ===================================================================
   SECTION SHELL
   =================================================================== */
.section {
  position: relative;
  z-index: 2;
  padding: 96px 0;
}

.section--tight { padding: 72px 0; }

.section__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section__head { max-width: 720px; margin-bottom: 52px; }
.section__head--wide { max-width: 860px; }

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

.eyebrow::before {
  content: "";
  width: 22px; height: 1px;
  background: var(--sweep);
}

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

.section__lede {
  color: var(--fg-mid);
  font-size: 16.5px;
  margin: 0;
  max-width: 640px;
}

/* Hairline divider with a light that travels along it, left to right.
   The Real Estate build joins sections with waves; this one joins them
   with a ruled line, which is what a plan is drawn on. */
.rule {
  position: relative;
  height: 1px;
  max-width: var(--shell);
  margin: 0 auto;
  background: var(--line);
  overflow: hidden;
}

.rule::after {
  content: "";
  position: absolute;
  top: 0; left: 0;
  height: 1px;
  width: 22%;
  background: linear-gradient(90deg, transparent, var(--primary), var(--secondary), transparent);
  animation: travel 11s var(--draw) infinite;
}

@keyframes travel {
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 1; }
  78%  { opacity: 1; }
  100% { transform: translateX(560%); opacity: 0; }
}

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

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

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

.hero__line { display: block; }

/* Growth into value, running through the letterforms. One slow pass —
   the Real Estate line cycles in 13s; this one takes 22s, because the
   point is patience. */
.hero__line--sweep {
  background: linear-gradient(100deg,
    var(--foreground) 0%, var(--primary) 30%,
    var(--secondary) 52%, var(--foreground) 80%);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: sweep 22s linear infinite;
}

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

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

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

.hero__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  margin: 52px 0 0;
  padding: 30px 0 0;
  border-top: 1px solid var(--line);
}

@media (max-width: 480px) {
  .hero__facts { grid-template-columns: 1fr; gap: 20px; }
}

.fact { margin: 0; }

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

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

/* -------------------------------------------------------------------
   Hero figure — the value chain, drawn.
   The Real Estate hero holds a photograph in a wobbling bead. This one
   holds the company's actual argument: opportunity climbing to growth,
   with the path drawing itself once on load.
   ------------------------------------------------------------------- */
.chart {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 26px 26px 22px;
  box-shadow: 0 30px 70px rgba(4, 9, 7, 0.55);
  overflow: hidden;
}

/* Premium card border: a single gradient hairline along the top edge */
.chart::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sweep);
  opacity: 0.7;
}

.chart__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

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

.chart__value {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--secondary);
}

.chart__svg { width: 100%; height: auto; }

.chart__grid { stroke: var(--line); stroke-width: 1; }

.chart__path {
  fill: none;
  stroke: url(#zoneSweep);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset 2.4s var(--draw);
}

.chart__area {
  fill: url(#zoneFade);
  opacity: 0;
  transition: opacity 1.2s ease 1.1s;
}

.chart__dot {
  fill: var(--background);
  stroke: var(--primary);
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 0.5s ease, transform 0.6s var(--settle);
}

.chart__dot--last { stroke: var(--secondary); }

.chart.is-drawn .chart__path { stroke-dashoffset: 0; }
.chart.is-drawn .chart__area { opacity: 1; }
.chart.is-drawn .chart__dot { opacity: 1; }

/* Nodes light up in sequence as the line reaches them */
.chart.is-drawn .chart__dot:nth-of-type(1) { transition-delay: 0.25s; }
.chart.is-drawn .chart__dot:nth-of-type(2) { transition-delay: 0.62s; }
.chart.is-drawn .chart__dot:nth-of-type(3) { transition-delay: 0.99s; }
.chart.is-drawn .chart__dot:nth-of-type(4) { transition-delay: 1.36s; }
.chart.is-drawn .chart__dot:nth-of-type(5) { transition-delay: 1.73s; }
.chart.is-drawn .chart__dot:nth-of-type(6) { transition-delay: 2.10s; }

.chart__legend {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.chart__legend span {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.chart__legend span:last-child { color: var(--secondary); }

/* Six labels do not fit on a phone. Keeping only the first and last
   preserves the point of the diagram — where it starts and where it
   ends — instead of clipping the middle terms mid-word. */
@media (max-width: 620px) {
  .chart__legend { justify-content: space-between; }
  .chart__legend span:not(:first-child):not(:last-child) { display: none; }
}

.chart__note {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-dim);
}

@media (max-width: 940px) {
  .hero__inner { grid-template-columns: 1fr; gap: 46px; }
  .hero { padding: 56px 0 72px; }
}

/* ===================================================================
   SERVICE CARDS
   Card geometry inherited from the Real Estate build. What changed:
   the hover no longer deforms the corners — instead a gradient hairline
   draws across the top edge, left to right.
   =================================================================== */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 20px;
}

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

.card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sweep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.7s var(--draw);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-5px);
  border-color: var(--primary-edge);
  background: var(--surface-raised);
  box-shadow: 0 22px 50px rgba(4, 9, 7, 0.5);
}

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

.card__index {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--fg-faint);
  margin-bottom: 20px;
}

.card__icon {
  width: 34px; height: 34px;
  margin-bottom: 18px;
  color: var(--primary);
  transition: color 0.45s ease, transform 0.6s var(--settle);
}

.card:hover .card__icon { color: var(--secondary); transform: translateX(3px); }

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

.card__text {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--fg-mid);
  margin: 0 0 20px;
}

.card__more {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  transition: color 0.4s ease;
}

.card__more span { transition: transform 0.5s var(--settle); }
.card:hover .card__more { color: var(--secondary); }
.card:hover .card__more span { transform: translateX(4px); }

/* ===================================================================
   TIMELINE — Nga ideja te realizimi
   Horizontal rail on desktop, vertical on phones. The rail draws left
   to right as the section enters view and each milestone activates in
   turn. This is the page's second signature.
   =================================================================== */
.track { position: relative; padding-top: 8px; }

.track__rail {
  position: absolute;
  left: 0; right: 0;
  top: 21px;
  height: 1px;
  background: var(--line);
}

.track__progress {
  position: absolute;
  left: 0; top: 0;
  height: 1px;
  width: 100%;
  background: var(--sweep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 2.6s var(--draw);
}

.track.is-running .track__progress { transform: scaleX(1); }

.track__list {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 10px;
}

.track__step { position: relative; padding-top: 34px; }

.track__marker {
  position: absolute;
  top: 15px;
  left: 0;
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--background);
  transition:
    border-color 0.5s ease,
    background 0.5s ease,
    box-shadow 0.6s ease,
    transform 0.6s var(--settle);
}

.track__step.is-active .track__marker {
  border-color: var(--primary);
  background: var(--primary);
  transform: scale(1.1);
  box-shadow: 0 0 0 5px var(--primary-wash);
}

/* The last milestone is the outcome, so it takes the gold. */
.track__step:last-child.is-active .track__marker {
  border-color: var(--secondary);
  background: var(--secondary);
  box-shadow: 0 0 0 5px var(--secondary-wash);
}

.track__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  margin-bottom: 6px;
  transition: color 0.5s ease;
}

.track__step.is-active .track__num { color: var(--fg-dim); }

.track__name {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.01em;
  color: var(--fg-dim);
  margin-bottom: 7px;
  transition: color 0.5s ease;
}

.track__step.is-active .track__name { color: var(--foreground); }

.track__note {
  display: block;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--fg-dim);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease, transform 0.6s var(--settle);
}

.track__step.is-active .track__note { opacity: 1; transform: none; }

@media (max-width: 900px) {
  .track__rail { left: 6px; right: auto; top: 6px; bottom: 6px; width: 1px; height: auto; }
  .track__progress {
    width: 1px; height: 100%;
    transform: scaleY(0);
    transform-origin: top;
  }
  .track.is-running .track__progress { transform: scaleY(1); }
  .track__list { grid-template-columns: 1fr; gap: 26px; }
  .track__step { padding: 0 0 0 32px; }
  .track__marker { top: 4px; left: 0; }
}

/* ===================================================================
   SPLIT — text beside a panel or plate
   =================================================================== */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.split--wide-left { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); }
.split--flip .split__figure { order: -1; }

@media (max-width: 940px) {
  .split,
  .split--wide-left { grid-template-columns: 1fr; gap: 40px; }
  .split--flip .split__figure { order: 0; }
}

.plate {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 26px 60px rgba(4, 9, 7, 0.45);
}

.plate img { width: 100%; height: auto; }

.plate__caption {
  position: absolute;
  left: 18px; bottom: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim);
  background: rgba(9, 18, 15, 0.78);
  border: 1px solid var(--line);
  border-radius: 30px;
  padding: 7px 14px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ===================================================================
   PANELS, TILES, LISTS
   =================================================================== */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
}

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

.panel__lede {
  font-size: 14.5px;
  color: var(--fg-mid);
  margin: 0 0 20px;
}

.panels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 22px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.tile {
  background: var(--surface);
  padding: 22px 20px;
  transition: background 0.45s ease;
}

.tile:hover { background: var(--surface-raised); }

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

.tile__text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--fg-mid);
  margin: 0;
}

/* Marker list — a small node before each item, matching the timeline */
.marklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 11px;
}

.marklist li {
  position: relative;
  padding-left: 22px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fg-mid);
}

.marklist li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.marklist--gold li::before { background: var(--secondary); }

.marklist--split {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 11px 26px;
}

/* ===================================================================
   CHAIN — Business consulting, current state to measured result
   Each link sits a step higher than the one before it. The staircase
   is the point: consulting output should be a climb, not a loop.
   =================================================================== */
.chain {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
  align-items: end;
}

.chain__link {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 16px;
  transition: border-color 0.45s ease, transform 0.55s var(--settle), background 0.45s ease;
}

.chain__link:hover {
  border-color: var(--primary-edge);
  background: var(--surface-raised);
  transform: translateY(-4px);
}

.chain__link:nth-child(1) { margin-bottom: 0; }
.chain__link:nth-child(2) { margin-bottom: 16px; }
.chain__link:nth-child(3) { margin-bottom: 32px; }
.chain__link:nth-child(4) { margin-bottom: 48px; }
.chain__link:nth-child(5) { margin-bottom: 64px; }
.chain__link:nth-child(6) { margin-bottom: 80px; border-color: var(--secondary-edge); }

.chain__step {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.14em;
  color: var(--fg-faint);
  margin-bottom: 8px;
}

.chain__name {
  display: block;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--foreground);
}

.chain__link:nth-child(6) .chain__name { color: var(--secondary); }

@media (max-width: 900px) {
  .chain { grid-template-columns: repeat(2, 1fr); align-items: stretch; }
  .chain__link { margin-bottom: 0 !important; }
}

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

/* ===================================================================
   CONTROL BOARD — Project management
   Dashboard-inspired, deliberately without numbers. A project site
   should show what is under control, not invent metrics.
   =================================================================== */
.board {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--surface);
  overflow: hidden;
}

.board__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--surface-sunk);
}

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

.board__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--primary);
}

.board__status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
  animation: pulse 3.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.82); }
}

/* Phase strip — five segments, filling in order */
.phases {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
  padding: 22px 22px 6px;
}

.phase__bar {
  height: 3px;
  border-radius: 3px;
  background: var(--line);
  overflow: hidden;
}

.phase__bar i {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--sweep);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--draw);
}

.board.is-running .phase__bar i { transform: scaleX(1); }
.board.is-running .phase:nth-child(1) .phase__bar i { transition-delay: 0.10s; }
.board.is-running .phase:nth-child(2) .phase__bar i { transition-delay: 0.34s; }
.board.is-running .phase:nth-child(3) .phase__bar i { transition-delay: 0.58s; }
.board.is-running .phase:nth-child(4) .phase__bar i { transition-delay: 0.82s; }
.board.is-running .phase:nth-child(5) .phase__bar i { transition-delay: 1.06s; }

.phase__name {
  display: block;
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-dim);
}

.board__rows {
  list-style: none;
  margin: 0;
  padding: 16px 22px 24px;
  display: grid;
  gap: 1px;
}

.board__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}

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

.board__row-name {
  font-size: 14px;
  color: var(--foreground);
}

.board__row-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--fg-dim);
  text-align: right;
}

@media (max-width: 560px) {
  .phases { grid-template-columns: repeat(2, 1fr); gap: 14px 8px; }
  .board__row { flex-direction: column; gap: 4px; }
  .board__row-note { text-align: left; }
}

/* ===================================================================
   TAGS — sectors
   =================================================================== */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tags li {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mid);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 8px 17px;
  transition: border-color 0.4s ease, color 0.4s ease;
}

.tags li:hover { border-color: var(--secondary-edge); color: var(--foreground); }

/* ===================================================================
   REASONS
   =================================================================== */
/* Nine reasons in a 3x3 grid — the count and the columns are chosen
   together so the block never ends with an orphan cell. */
.reasons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

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

.reason {
  background: var(--surface);
  padding: 26px 24px;
  transition: background 0.45s ease;
}

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

.reason__mark {
  width: 26px; height: 1px;
  background: var(--sweep);
  margin-bottom: 16px;
}

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

.reason__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--fg-mid);
  margin: 0;
}

/* ===================================================================
   STEPS — Si funksionon
   =================================================================== */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2px 34px;
}

.step {
  position: relative;
  padding: 22px 0 22px 54px;
  border-bottom: 1px solid var(--line);
}

.step__num {
  position: absolute;
  left: 0; top: 22px;
  width: 34px; height: 34px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-dim);
  transition: border-color 0.45s ease, color 0.45s ease, background 0.45s ease;
}

.step:hover .step__num {
  border-color: var(--primary);
  color: var(--foreground);
  background: var(--primary-wash);
}

.step__title {
  font-size: 15.5px;
  color: var(--foreground);
  margin: 0 0 5px;
  font-weight: 400;
}

.step__text {
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--fg-mid);
  margin: 0;
}

/* ===================================================================
   CONTACT
   =================================================================== */
.contact {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  gap: 48px;
  align-items: start;
}

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

.contact__direct {
  display: grid;
  gap: 14px;
  margin-top: 28px;
}

.contact__line {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
  transition: border-color 0.45s ease, transform 0.55s var(--settle);
}

a.contact__line:hover { border-color: var(--primary-edge); transform: translateX(3px); }

.contact__icon { width: 18px; height: 18px; color: var(--primary); flex: none; }

.contact__line-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--fg-dim);
  margin-bottom: 3px;
}

.contact__line-value {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--foreground);
}

.form {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}

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

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 26px;
}

.chip { position: relative; }

.chip input {
  position: absolute;
  opacity: 0;
  width: 0; height: 0;
}

.chip span {
  position: relative;
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-mid);
  background: var(--surface-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  padding: 9px 17px;
  cursor: pointer;
  overflow: hidden;
  transition: color 0.4s ease, border-color 0.4s ease;
  z-index: 0;
}

/* Selection floods in from the left, exactly as the Real Estate filter
   buttons do. Same interaction, different fill. */
.chip span::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform: translateX(-101%);
  transition: transform 0.55s var(--draw);
  z-index: -1;
}

.chip:hover span { color: var(--foreground); border-color: var(--primary-edge); }

.chip input:checked + span {
  color: var(--background);
  border-color: transparent;
  font-weight: 500;
}

.chip input:checked + span::before { transform: translateX(0); }

.chip input:focus-visible + span {
  outline: 2px solid var(--secondary);
  outline-offset: 3px;
}

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

.field--full { grid-column: 1 / -1; }

@media (max-width: 560px) {
  .fields { grid-template-columns: 1fr; }
  .form { padding: 24px 20px; }
}

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

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

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

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

.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--background);
}

.form__note {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--fg-dim);
  margin: 14px 0 0;
  text-align: center;
}

.form__status {
  margin: 14px 0 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--secondary);
  text-align: center;
  min-height: 19px;
}

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

.footer__inner {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
  padding-bottom: 38px;
  border-bottom: 1px solid var(--line);
}

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

.footer__blurb {
  margin: 18px 0 0;
  max-width: 380px;
  font-size: 14px;
  color: var(--fg-mid);
}

/* Small uppercase label used above short lists, in the footer and in
   the technical section. */
.microlabel,
.footer__heading {
  font-family: var(--font-mono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--fg-dim);
  margin: 0 0 16px;
}

.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  font-size: 14px;
  color: var(--fg-mid);
}

.footer__list a { transition: color 0.4s ease; }
.footer__list a:hover { color: var(--secondary); }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding-top: 26px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-dim);
}

/* ===================================================================
   DETAIL PANEL — service detail
   Carried over from the Real Estate build. The open animation lost its
   blob stage: it now settles into place rather than pouring.
   =================================================================== */
.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(5, 10, 8, 0.76);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  animation: fade-in 0.4s ease both;
}

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

.detail__panel {
  position: relative;
  width: min(720px, 100%);
  max-height: min(88vh, 920px);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(3, 7, 5, 0.7);
  animation: settle-in 0.6s var(--settle) both;
}

.detail__panel::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--sweep);
  z-index: 4;
}

@keyframes settle-in {
  0%   { opacity: 0; transform: translateY(26px) scale(0.975); }
  100% { opacity: 1; transform: none; }
}

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

.detail__close {
  position: absolute;
  top: 16px; right: 16px;
  z-index: 5;
  width: 38px; height: 38px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface-sunk);
  color: var(--foreground);
  font-size: 20px;
  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);
  border-color: var(--primary);
  color: var(--background);
  transform: rotate(90deg);
}

.detail__body { padding: 34px 34px 30px; }

.detail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--secondary);
  margin-bottom: 14px;
}

.detail__eyebrow::before {
  content: "";
  width: 20px; height: 1px;
  background: var(--sweep);
}

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

.detail__headline {
  font-size: 16px;
  color: var(--secondary);
  margin: 0 0 20px;
}

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

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

.detail__list {
  list-style: none;
  padding: 0;
  margin: 0 0 26px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
}

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

.detail__list li::before {
  content: "";
  position: absolute;
  left: 0; top: 9px;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--primary);
}

.detail__outcome {
  border: 1px solid var(--line);
  border-left: 2px solid var(--secondary);
  border-radius: 0 12px 12px 0;
  background: var(--surface-sunk);
  padding: 18px 20px;
  margin: 0 0 26px;
}

.detail__outcome p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-mid);
}

.detail__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.detail__actions .btn { flex: 1 1 200px; }

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

/* ===================================================================
   RESPONSIVE — shared adjustments
   =================================================================== */
@media (max-width: 720px) {
  .section { padding: 68px 0; }
  .section--tight { padding: 56px 0; }
  .section__head { margin-bottom: 36px; }
  .hero__facts { gap: 26px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }
  .wordmark { font-size: 14px; gap: 7px; }
  .wordmark__node { width: 20px; }
  @keyframes advance {
    0%, 8%    { left: 0; }
    42%, 62%  { left: 15px; }
    96%, 100% { left: 0; }
  }
  .wordmark__rest { font-size: 8.5px; letter-spacing: 0.16em; }
  .hero__actions .btn { flex: 1 1 100%; }
  .grid { grid-template-columns: 1fr; }
}

/* ===================================================================
   REDUCED MOTION
   Everything ambient stops. Content stays visible and in place, and
   anything that would normally draw itself is shown already drawn —
   nothing is left stuck invisible or empty.
   =================================================================== */
@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__glow { opacity: 0.12; }
  .chart__path { stroke-dashoffset: 0; }
  .chart__area, .chart__dot { opacity: 1; }
  .track__progress { transform: scaleX(1); }
  .phase__bar i { transform: scaleX(1); }
  .track__note { opacity: 1; transform: none; }
  .card:hover { transform: none; }
}