/* ============================================================================
   Your customers — ONE CARD, FOUR STOPS.  Loaded by customers.html only.

   An outcome page, so it stays quieter than the module pages (MOTION-CHARTER
   §3). Its one idea: a single card — one invented customer's quote request —
   is the only thing that moves. It holds mid-screen and crosses the page from
   side to side as the reader passes four stops: sent from the site, in your
   inbox, priced by you, and the review afterwards. At each stop its face
   changes. The copy for each stop sits on the opposite side, so the reader
   follows one object down the page instead of reading four cards.
   js/fx-customers.js writes its position and face as a pure function of
   scroll. Nothing slides in from off-screen, nothing flips, nothing fills.

   Without JS (or under reduced motion) the four faces read as a plain stack
   above the copy, in order.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.cu-hero{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
.cu-hero .t-display{ font-size:clamp(2.6rem,5.4vw,5rem); }
.cu-hero-fig{ margin:0; }
.cu-hero-fig .tilt-plate{ border-radius:16px; overflow:hidden; }
.cu-hero-fig .tilt-plate > img{ aspect-ratio:4/5; object-fit:cover; }

/* --------------------------------------------------------- two columns --- */
.cu-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:48px; align-items:center; }
.cu-two--wide{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
.cu-two .tilt-plate{ border-radius:16px; overflow:hidden; }
.cu-two > figure .tilt-plate > img{ aspect-ratio:4/3; object-fit:cover; }
.cu-two--wide > figure .tilt-plate > img{ aspect-ratio:auto; }

/* ============================================================ THE JOURNEY == */
.cj{ position:relative; margin-top:44px; }
.cj a{ color:var(--primary); }

/* --- the card --- */
.cj-card{
  position:relative; width:min(400px, 100%);
  padding:18px 20px 16px; border-radius:16px; background:#fff;
  border:1px solid rgba(var(--primary-rgb),.16);
  box-shadow:0 30px 60px -28px rgba(15,77,114,.45), 0 1px 0 rgba(15,77,114,.06);
  will-change:transform;
}
.cj-tag{
  margin:0 0 10px; text-align:right;
  font:600 9.5px/1 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); opacity:.75;
}
.cj-faces{ display:grid; }
.cj-face{ grid-area:1/1; will-change:opacity, transform; }
.cj-from{ display:flex; flex-wrap:wrap; gap:6px 12px; align-items:baseline; margin:0 0 12px; }
.cj-from span{ font:600 11px/1.3 var(--mono); letter-spacing:.12em; text-transform:uppercase; color:var(--primary); }
.cj-from i{ font-style:normal; font:600 10.5px/1.3 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.cj-who{ margin:0; font:700 1.05rem/1.3 var(--font-display); color:var(--text); letter-spacing:-.01em; }
.cj-msg{ margin:8px 0 0; font-size:15.5px; line-height:1.5; color:var(--text); }
.cj-note{ margin:10px 0 0; font-size:13.5px; line-height:1.5; color:var(--text-muted); }
.cj-thumbs{ display:flex; gap:8px; margin:12px 0 0; }
.cj-thumbs span{
  width:56px; height:44px; border-radius:6px;
  background:linear-gradient(160deg, var(--bg-tint), var(--border)); border:1px solid var(--border);
}
.cj-list{ list-style:none; margin:0; padding:0; }
.cj-list li{
  display:grid; gap:2px; padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--text-muted);
  border:1px solid transparent;
}
.cj-list li b{ color:var(--text); font-weight:600; }
.cj-list li.is-this{ background:var(--bg-tint); border-color:rgba(var(--primary-rgb),.22); }
.cj-price{ margin:8px 0 0; font:800 2.2rem/1 var(--font-display); letter-spacing:-.03em; color:var(--primary); font-variant-numeric:tabular-nums; }
.cj-stars{ font-weight:400; color:#d9a520; letter-spacing:.06em; font-size:.95rem; margin-left:6px; }
.cj-read{
  display:flex; flex-wrap:wrap; gap:8px 22px; margin:16px 0 0; padding:9px 12px;
  width:max-content; max-width:100%;
  border:1px solid rgba(var(--primary-rgb),.22); border-radius:8px; background:rgba(var(--primary-rgb),.04);
  font:600 10.5px/1.6 var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted);
}
.cj-read b{ color:var(--primary); font-weight:700; font-variant-numeric:tabular-nums; }
.cj-read i{ font-style:normal; opacity:.55; }

/* --- no JS, or reduced motion: a plain stack, every face shown in order --- */
.cj-rail{ margin:0 0 40px; }
.cj-faces{ gap:18px; }
.cj-face{ grid-area:auto; padding-top:14px; border-top:1px solid var(--border); }
.cj-face:first-child{ border-top:0; padding-top:0; }
.cj-stop{ padding:0 0 40px; }
.cj-copy{ max-width:440px; }
.cj-copy .copy{ margin-top:12px; }

/* --- with JS: the card holds mid-screen and crosses between stops --- */
.js .cj{ display:grid; grid-template-columns:1fr; }
.js .cj-rail{ grid-column:1; grid-row:1 / span 4; margin:0; pointer-events:none; z-index:2; }
.js .cj-stop{
  grid-column:1; min-height:68vh; padding:0;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:40px; align-items:center;
}
.js .cj-stop--flip .cj-copy{ grid-column:2; }
.js .cj-stop:nth-child(2){ grid-row:1; }
.js .cj-stop:nth-child(3){ grid-row:2; }
.js .cj-stop:nth-child(4){ grid-row:3; }
.js .cj-stop:nth-child(5){ grid-row:4; }
.js .cj-card{ position:sticky; top:calc(50vh - 150px); pointer-events:auto; }
.js .cj-faces{ gap:0; }
.js .cj-face{ grid-area:1/1; padding-top:0; border-top:0; }
.js .cj-face:not(.is-on){ pointer-events:none; }
/* faces cross as the card arrives: the one leaving goes soft */
.js .cj-face{ transition:none; }

/* ------------------------------------------------------------ responsive -- */
@media (max-width:900px){
  .cu-hero{ grid-template-columns:1fr; gap:36px; }
  .cu-hero-fig{ max-width:420px; }
  .cu-hero-fig .tilt-plate > img{ aspect-ratio:4/3; }
  .cu-two, .cu-two--wide{ grid-template-columns:1fr; gap:32px; }
  .cu-two > figure{ order:2; }
  .js .cj-stop{ grid-template-columns:1fr; gap:0; }
  .js .cj-stop--flip .cj-copy{ grid-column:1; }

  /* the card rides the bottom of the screen, above the telemetry strip,
     like a notification arriving; the copy passes above it */
  .js .cj-rail{ display:flex; flex-direction:column; justify-content:flex-end; }
  .js .cj-card{ top:auto; bottom:58px; width:100%; }
  /* each stop fills the reading window above the card, copy centred in it;
     js/fx-customers.js reads the window's centre as the line on a small screen */
  .js .cj-stop{ min-height:calc(100svh - 70px - 340px); align-items:center; padding:12px 0; }
  .js .cj-stop:last-child{ padding-bottom:120px; }
  .cj-msg{ font-size:14.5px; }
  .cj-price{ font-size:1.9rem; }
  .cj-read{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .cj-card{ transform:none !important; }
  .cj-face{ opacity:1 !important; transform:none !important; }
}