/* ============================================================
   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.
   ============================================================ */

/* ---- Page geometry ----------------------------------------
   Two widths, and only two, on every page:

     COLUMN   the full content column (--wide minus its padding).
              Structural blocks live here: stat rows, step grids,
              definition lists, the hero headline.
     MEASURE  one reading width for every run of prose, so the
              right edge of the text is in the same place all the
              way down the page.

   Prose used to carry six different maxima (640px, 58ch, 48ch,
   40ch, 16ch, unbounded), which is what made the sections look
   like they were set to different widths. Everything below picks
   one of the two. */
:root{ --measure:640px; }

/* The shared shell lets the header and footer span the viewport
   while .site-main is capped at --wide, so the brand sat ~120px
   outside the text column on a wide screen. Re-align the chrome
   to the column; the sticky bar and its rules still span the
   full width, only their CONTENTS line up with the text. */
.site-header .wrap-wide,
.site-footer .wrap-wide{ max-width:var(--wide); }

/* The header hairline starts and stops exactly where the text does.
   It cannot be a border on the header row: .wrap-wide and
   .header-inner are the same element, so a border there draws across
   its padding box and overshoots the text by one gutter on each
   side. Draw it as a pseudo-element inset by that gutter instead.
   The bar itself (and its blur) still spans the viewport, which is
   what keeps content legible as it scrolls underneath. */
:root{ --gutter:clamp(28px,5vw,44px); }   /* mirrors .wrap-wide padding-inline in shell.css */
.site-header{ border-bottom:0; }
.site-header .header-inner{ position:relative; }
.site-header .header-inner::after{
  content:""; position:absolute; bottom:0;
  left:var(--gutter); right:var(--gutter);
  height:1px; background:var(--line);
}

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

/* 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:var(--measure);
}
.statement .muted{ color:var(--muted); font-weight:400; display:block; }

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

/* ---- Opening block (home hero + every page header) ---------
   One rule for the first block on every page, so a page header
   and the home hero open with identical air. The hero used to
   carry a button row and a scroll cue below the lede; with those
   gone its padding left the largest type on the site sitting
   tight under the sticky header, with the eyebrow almost touching
   the headline. Both gaps are set here rather than per page. */
.view > .section:first-child{
  padding-top:clamp(44px,7vw,88px);
  padding-bottom:clamp(28px,5vw,56px);
}
/* Balance the rag on the big display headings. Letting them span the
   column (see .hero__title) means that at full width a headline breaks
   long-first-line / stub-second-line; narrower viewports rewrap evenly
   on their own, which is why it only shows on a wide screen.
   text-wrap:balance evens the lines at any width. */
.view > .section:first-child .page-title{ margin-top:30px; text-wrap:balance; }
/* A role page opens with "← All roles" above the eyebrow; it needs to clear it
   rather than sit on top of it. */
.view > .section:first-child > .read-link{ display:block; margin:0 0 32px; }
.view > .section:first-child > .body,
.view > .section:first-child > .lead-para{ margin-top:28px; }

/* ---- Hero ------------------------------------------------- */
.hero__title{
  font-family:var(--serif); font-weight:600;
  font-size:clamp(40px,7.6vw,68px); line-height:1.03; letter-spacing:-.025em;
  margin:30px 0 0;   /* spans the column — the one block that does, being the largest type */
  text-wrap:balance;
}
.hero__lede{
  font-family:var(--serif); font-size:clamp(19px,2.4vw,23px); line-height:1.5;
  color:var(--text-soft-2); margin:28px 0 0; max-width:var(--measure);
}

/* ---- 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); }

/* ---- 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; max-width:var(--measure); }
.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; }

/* ---- Numbered steps (Perceive / Decide / Act) ------------- */
.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); margin:36px 0 0; }
.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; }
/* A role title on the careers index is a link to its own page. It stays ink
   rather than accent — the whole column is links, and a wall of green would
   read as decoration rather than navigation. The rule appears on hover. */
.defrow__term a{
  color:inherit; text-decoration:none; padding-bottom:2px;
  background-image:linear-gradient(var(--accent),var(--accent));
  background-repeat:no-repeat; background-position:0 100%; background-size:0% 1px;
  transition:background-size .3s ease, color .2s;
}
.defrow__term a:hover{ color:var(--accent); background-size:100% 1px; }

/* ---- Job description list -------------------------------- */
/* Responsibilities and requirements on a role page. A short accent rule as the
   marker rather than a bullet glyph, matching the hairlines used everywhere
   else on the site. */
.joblist{ list-style:none; margin:18px 0 0; padding:0; max-width:var(--measure); }
.joblist li{
  position:relative; margin:11px 0 0; padding-left:24px;
  font-family:var(--serif); font-size:17px; line-height:1.6; color:var(--text-soft);
}
.joblist li::before{
  content:""; position:absolute; left:0; top:.75em;
  width:10px; height:1px; background:var(--accent);
}

/* ---- Capability row (connectors / automotive / plain) ----- */
.caps{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,36px); margin:30px 0 0; }
.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; max-width:var(--measure); }
.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:var(--measure);
}
.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:var(--measure); }
.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; }

/* ---- 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-brand-block .footer-tagline a{ color:inherit; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; transition:color .18s ease; }
.footer-brand-block .footer-tagline a:hover{ color:var(--ink); }
/* The footer has room for the wordmark; only the header brand collapses on mobile.
   Site-local: shared/shell.css hides .brand__word below 600px for both brands. */
.brand--footer .brand__word{ display:inline; }
.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){
  .steps, .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; }
}