/* ============================================================
   Movendi — marketing site components
   ------------------------------------------------------------
   Page-level building blocks for the marketing site only. Brand
   primitives (colour, type, chrome) come from /shared/theme.css
   + /shared/shell.css — everything here is composed from those
   tokens, never ad-hoc values.
   ============================================================ */

/* ---- Section rhythm --------------------------------------- */
.section{ margin-top:clamp(72px,11vw,132px); }
.section:first-child{ margin-top:0; }
.measure{ max-width:640px; }

/* Big narrative serif statement (the "shift" punch lines). */
.statement{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(30px,5.4vw,46px); line-height:1.14; letter-spacing:-.02em;
  margin:18px 0 0; color:var(--ink); max-width:16ch;
}
.statement .muted{ color:var(--muted); font-weight:400; display:block; }
.statement .lead{ display:block; }

.body{ font-family:var(--serif); font-size:19px; line-height:1.62; color:var(--text-soft); margin:16px 0 0; }
.body--tight{ margin-top:12px; }

/* ---- Hero ------------------------------------------------- */
.hero{ padding:clamp(24px,6vw,56px) 0 clamp(16px,4vw,32px); }
.hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(40px,7.6vw,68px); line-height:1.03; letter-spacing:-.025em;
  margin:20px 0 0; max-width:25ch;   /* breaks at the comma: two lines */
}
.hero__lede{
  font-family:var(--serif); font-size:clamp(19px,2.4vw,23px); line-height:1.5;
  color:var(--text-soft-2); margin:22px 0 0; max-width:58ch;
}

/* ---- Buttons ---------------------------------------------- */
.cta-row{ display:flex; flex-wrap:wrap; gap:14px; margin:34px 0 0; }
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; padding:13px 22px; border-radius:3px;
  border:1px solid transparent; cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), background .2s, border-color .2s, color .2s;
}
.btn:hover{ transform:translateY(-1px); }
.btn--primary{ background:var(--accent); color:#fff; }
/* No hover shade: Verdant is the only green. The lift on .btn:hover is the affordance. */
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--accent); color:var(--accent); }

/* ---- Scroll cue ------------------------------------------- */
.scroll-cue{
  display:inline-flex; align-items:center; gap:10px; margin:clamp(40px,7vw,72px) 0 0;
  font-family:var(--mono); font-size:11px; letter-spacing:.28em; text-transform:uppercase; color:var(--faint-2);
}
.scroll-cue::after{
  content:""; width:1px; height:34px; background:linear-gradient(var(--faint-2),transparent);
}

/* ---- External ↗ link -------------------------------------- */
.ext{
  display:inline-flex; align-items:baseline; gap:7px; margin-top:22px;
  font-family:var(--mono); font-size:13px; letter-spacing:.06em; color:var(--accent);
  text-decoration:none;
}
.ext .arrow{ font-size:12px; transition:transform .2s; }
.ext:hover .arrow{ transform:translate(2px,-2px); }
.ext__label{
  padding-bottom:2px;
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:background-size .35s ease;
}
.ext:hover .ext__label{ background-size:100% 1px; }

/* ---- Accent callout (e.g. "We drive it") ------------------ */
.callout{ border-left:2px solid var(--accent); padding:6px 0 6px 22px; margin:18px 0 0; }
.callout h3{ font-family:var(--serif); font-weight:600; font-size:clamp(22px,3.4vw,28px); line-height:1.2; margin:0; color:var(--ink); }
.callout p{ font-family:var(--serif); font-size:19px; line-height:1.55; color:var(--text-quote); margin:10px 0 0; max-width:40ch; }

/* ---- Two-column contrast (category vs Movendi) ------------ */
.contrast{ display:grid; grid-template-columns:1fr 1fr; gap:0; margin:34px 0 0; }
.contrast__col{ padding:4px clamp(20px,4vw,40px); }
.contrast__col + .contrast__col{ border-left:1px solid var(--line-2); }
.contrast__col:first-child{ padding-left:0; }
.contrast__label{ font-family:var(--mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase; color:var(--muted-2); }
.contrast__col--movendi .contrast__label{ color:var(--accent); }
.contrast__title{ font-family:var(--serif); font-weight:600; font-size:clamp(21px,3vw,26px); line-height:1.18; letter-spacing:-.01em; margin:14px 0 0; color:var(--ink); }
.contrast__body{ font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--text-soft); margin:12px 0 0; }

/* ---- Numbered steps (Perceive / Decide / Act) ------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); margin:36px 0 0; }
/* Five-beat variant (Connect → Understand → Generate → Simulate → Execute):
   wraps to 3-then-2 before it ever gets too narrow to read. */
.steps--5{ grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:clamp(18px,2.4vw,28px); }
.step{ border-top:1px solid var(--line-2); padding-top:18px; }
.step__index{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent); }
.step__index .n{ color:var(--faint-3); }
.step__title{ font-family:var(--serif); font-weight:600; font-size:clamp(20px,2.4vw,23px); line-height:1.2; margin:12px 0 0; color:var(--ink); }
.step__body{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--text-soft); margin:8px 0 0; }

/* ---- Definition rows (products, connectors, contact) ------
   A term + description pair on a hairline rule. One component
   serves the product list, the connector list and the contact
   routes — same rhythm, no bespoke variants. */
.deflist{ margin:30px 0 0; }
.defrow{
  display:grid; grid-template-columns:210px 1fr; gap:10px 30px; align-items:baseline;
  padding:17px 0; border-top:1px solid var(--line-3);
}
.defrow__term{ font-family:var(--serif); font-weight:600; font-size:18px; line-height:1.3; color:var(--ink); margin:0; }
.defrow__desc{ font-family:var(--serif); font-size:16.5px; line-height:1.58; color:var(--text-soft); margin:0; }
.defrow__desc a{ color:var(--accent); text-decoration:none; }
.defrow__desc a:hover{ text-decoration:underline; }

/* ---- Industry blocks (manufacturing / life sci / hospital) -
   Title on the left, honest status on the right: the brand rule
   is that shipping and unshipped are never blurred together. */
.industries{ margin:34px 0 0; }
.industry{ padding:26px 0; border-top:1px solid var(--line-2); }
.industry__head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:6px 22px; }
.industry__title{
  font-family:var(--serif); font-weight:600; font-size:clamp(22px,3vw,27px);
  line-height:1.16; letter-spacing:-.01em; margin:0; color:var(--ink);
}
.industry__status{ font-family:var(--mono); font-size:11.5px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint-3); margin:0; }
.industry--live .industry__status{ color:var(--accent); }
.industry__body{ font-family:var(--serif); font-size:18px; line-height:1.6; color:var(--text-soft); margin:12px 0 0; max-width:64ch; }

/* ---- Mono meta line (locations) --------------------------- */
.meta-line{ font-family:var(--mono); font-size:12.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:28px 0 0; }

/* ---- Capability row (connectors / automotive / plain) ----- */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); margin:30px 0 0; }
.caps--4{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }  /* 4 across wide, 2 across mid */
.cap{ border-top:1px solid var(--line-2); padding-top:18px; }
.cap__key{ font-family:var(--serif); font-weight:600; font-size:clamp(19px,2.3vw,22px); color:var(--ink); }
.cap__key .hl{ color:var(--accent); }
.cap__desc{ font-family:var(--serif); font-size:16px; line-height:1.55; color:var(--muted); margin:8px 0 0; }

/* ---- Frontier timeline (TODAY / TODAY / BUILDING) --------- */
.frontier-list{ margin:34px 0 0; }
.frontier-item{
  display:grid; grid-template-columns:120px 1fr; gap:20px; align-items:baseline;
  padding:22px 0; border-top:1px solid var(--line-3);
}
.frontier-item__tag{ font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint-3); }
.frontier-item--building .frontier-item__tag{ color:var(--accent); }
.frontier-item__body{ font-family:var(--serif); font-size:19px; line-height:1.6; color:var(--text); }
.frontier-item__body strong{ font-weight:600; color:var(--ink); }

/* ---- Mission statement (frontier → Kaliber Labs) ---------- */
.mission{
  border-left:2px solid var(--accent); padding-left:22px; margin:0;
  font-family:var(--serif); font-size:clamp(19px,2.4vw,22px); line-height:1.5;
  color:var(--text-quote); max-width:48ch;
}
.mission strong{ color:var(--ink); font-weight:600; }

/* ---- Contact / About placeholder body --------------------- */
.lead-para{ font-family:var(--serif); font-size:clamp(20px,4vw,23px); line-height:1.55; color:var(--text-strong); margin:22px 0 0; max-width:40ch; }
.contact-line{ font-family:var(--mono); font-size:14px; letter-spacing:.04em; color:var(--muted); margin:30px 0 0; }
.contact-line a{ color:var(--accent); text-decoration:none; }
.contact-line a:hover{ text-decoration:underline; }
.placeholder-note{ font-family:var(--mono); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint-2); margin:24px 0 0; }

/* ---- Marketing footer ------------------------------------- */
.footer-inner{ display:block; padding-block:44px 48px; }
.footer-top{ display:flex; align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:24px; }
/* 𝕄 MOVENDI · tagline on one line — vertically centered (logo middle aligns with tagline middle). */
.footer-brand-block{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 16px; }
.footer-brand-block .footer-tagline{ font-family:var(--mono); font-size:12px; letter-spacing:.1em; color:var(--muted); margin:0; }
.footer-brand-block .footer-tagline::before{ content:"·"; margin-right:16px; color:var(--ghost); }  /* dot separator */
.footer-nav{ display:flex; flex-wrap:wrap; gap:20px 26px; }
.footer-nav a{ font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); text-decoration:none; }
.footer-nav a:hover{ color:var(--ink); }
.footer-bottom{
  display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline;
  margin-top:30px; padding-top:22px; border-top:1px solid var(--line-2);
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--faint);
}
.footer-bottom .sep{ color:var(--ghost); }

/* ---- Responsive ------------------------------------------- */
@media (max-width:760px){
  .contrast{ grid-template-columns:1fr; gap:28px; }
  .contrast__col{ padding:0; }
  .contrast__col + .contrast__col{ border-left:0; border-top:1px solid var(--line-2); padding-top:26px; }
  .steps, .steps--5, .caps{ grid-template-columns:1fr; gap:0; }
  .step, .cap{ margin-top:0; }
  .frontier-item{ grid-template-columns:1fr; gap:8px; }
  .defrow{ grid-template-columns:1fr; gap:5px; }
  .industry__head{ flex-direction:column-reverse; align-items:flex-start; gap:8px; }
}