/* ============================================================
   EFFERENT MEDIA · v2 ADDITIONS
   Loaded AFTER efferent-base.css.

   Everything here is new to v2. Nothing overrides a v1 colour,
   font, radius, shadow or animation. Every value below is either
   an existing custom property or a literal already present in
   efferent-base.css. The comment on each block names the v1
   pattern it extends.
   ============================================================ */

/* ── CAPABILITY CARD DESCRIPTION ─────────────────────────────
   v1's .cap-card held a title and an arrow only. v2 moves the
   one-line service description inside the card, which is what
   removed the duplicate 01-05 strip that repeated the same five
   titles underneath. Copy is the house wording already used for
   these five in components/site-nav.tsx. Size is .cap-body h4's
   existing step at regular weight; colour is --on-dark, the body
   colour every other ink section uses. */
.cap-body{display:flex;flex-direction:column;flex:1}
.cap-body p{
  margin:8px 0 0;color:var(--on-dark);font-weight:400;
  font-size:clamp(13.5px,1.02vw,15px);line-height:1.45;
}
.cap-body .ar{margin-top:auto;padding-top:10px}

/* ── CASE STUDY CARD ─────────────────────────────────────────
   Sits inside the v1 .pillars grid on a .pillar. Only two things
   are new: the gap between a card's stacked paragraphs (a v1
   .pillar holds exactly one), and the metric label, whose
   declarations are copied from .testi-quote cite, the existing
   small caption face in the same cream section. */
.cs-card p + p{margin-top:12px}
.cs-label{
  margin:0 0 14px;font-family:var(--mono);font-weight:500;font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;color:#6E6B63;
}

/* ── TESTIMONIAL ROW ─────────────────────────────────────────
   The v1 .testi section now follows a cream case-study section
   rather than an ink one, so it takes the same hairline seam
   .logobar uses to separate itself from the hero above it.
   The headshot borrows .testi-nav button's circle geometry so
   the two round elements in this row are the same size. */
.testi{border-top:1px solid var(--line-cream)}
.testi-face{
  width:46px;height:46px;border-radius:50%;object-fit:cover;
  border:1px solid var(--line-cream);margin:0 0 18px;
}

/* ── CONTACT FORM ────────────────────────────────────────────
   The one genuinely new component: v1 had a mailto button and no
   form. Field chrome is the .cap-card recipe (--ink-2 fill,
   --line-dark hairline, square corners, orange-at-55% on state
   change). Labels are .foot-nav's mono face and colour. The
   submit control is an unmodified .btn.btn--solid. */
.cta-grid{align-items:stretch}
.cta-img{height:auto;min-height:clamp(200px,20.6vw,297px)}
.form-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:clamp(12px,1.3vw,18px);margin:4px 0 0;
}
.field{display:flex;flex-direction:column;gap:8px}
.field--wide{grid-column:1 / -1}
.field label{
  font-family:var(--mono);font-weight:500;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;color:#B4B0A8;
}
.field input,.field textarea{
  font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--cream-hi);
  background:var(--ink-2);border:1px solid var(--line-dark);border-radius:0;
  padding:13px 14px;width:100%;transition:border-color .2s;
}
.field input::placeholder,.field textarea::placeholder{color:#8C8880}
.field input:focus,.field textarea:focus{outline:none;border-color:rgba(241,107,43,.55)}
.field textarea{resize:vertical;min-height:104px}
.form-actions{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:22px}
.form-fallback{
  margin:0;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:#8C8880;
}
.form-fallback a{border-bottom:1px solid var(--line-dark);transition:color .18s}
.form-fallback a:hover{color:var(--orange)}

/* ── RESPONSIVE ──────────────────────────────────────────────
   Breakpoints and column counts mirror efferent-base.css exactly:
   1040 / 860 / 560 for the grids, 860 for the stacked form. */
@media (max-width:860px){
  .form-grid{grid-template-columns:1fr}
  .cta-img{min-height:clamp(180px,34vw,260px)}
}

/* ── MARQUEE SPEED ───────────────────────────────────────────
   The @keyframes travels -50% of .marquee, so the scroll speed
   is set by content width, not by the duration. v1 ran 8 items
   (1505px per set) in 42s = 35.8 px/s. v2 runs 13 items
   (2673px per set), which at 42s would be 1.78x faster.
   75s restores v1's speed. Same keyframes, same easing, same
   pause-on-hover. This rule exists to PRESERVE the animation,
   not to change it. */
.marquee{animation-duration:75s}

/* ── HUMANS POWER AI · LEFT ALIGNMENT ────────────────────────
   globals.css pushed the HERO's copy out to
   padding-left:clamp(28px,9vw,220px) ("split lock") but left
   every other section in the centred 1280px .wrap. .humanai is
   the page's other photo-split section, and on a wide display
   the two disagreed: at 1998px the hero headline starts at
   180px and this one started at 359px, so the page's left edge
   jumped right by 179px and opened a flat black slab beside the
   headline with nothing in it.

   Same clamp as the hero, so the two track each other at every
   width (130px at 1440, 180px at 1998, 220px capped above
   ~2450). The text sections keep the centred wrap: they are not
   photo splits. Scoped above 860px because the mobile
   breakpoint re-purposes ::after as a vertical wash and sets
   its own padding. */
@media (min-width:861px){
  .humanai .wrap{
    width:100%;max-width:none;margin-inline:0;
    padding-left:clamp(28px,9vw,220px);
    padding-right:var(--gut);
  }
}