/* ============================================================================
   Move your website — THE WEIGHT COMES OFF.  move-your-website.html only.

   Signature (MOTION-CHARTER §3): two bars, one per kind of code, start at the
   size a real builder site arrived at and shrink to the size it left at, as a
   pure function of scroll through the proof section. The before size stays
   behind as a ghost outline so the difference is always visible. The numbers
   are printed and never animate. Without JS, or under reduced motion, the bars
   simply show the finished, tidied size next to the ghost.
   js/fx-move.js writes one custom property (--p, 0 → 1) on the section.
   ========================================================================== */

/* ---------------------------------------------------------------- hero ---- */
.mv-hero{ display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:48px; align-items:center; }
.mv-hero .t-display{ font-size:clamp(2.4rem,4.6vw,4.2rem); max-width:15ch; }
.mv-hero-fig{ margin:0; }
.mv-hero-fig .tilt-plate{ border-radius:16px; overflow:hidden; }
.mv-hero-fig .tilt-plate > img{ aspect-ratio:4/5; object-fit:cover; width:100%; }
.mv-fine{ margin-top:22px; font-size:14px; max-width:52ch; color:#a8c4d5; }

/* --------------------------------------------------------------- steps ---- */
.mv-steps{ list-style:none; margin:44px 0 0; padding:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:28px; counter-reset:mv; }
.mv-steps li{ position:relative; padding-top:62px; border-top:1px solid var(--border); }
.mv-steps li::before{
  counter-increment:mv; content:counter(mv);
  position:absolute; top:16px; left:0; display:grid; place-items:center; width:34px; height:34px; border-radius:50%;
  font:800 14px/1 var(--font-display); color:var(--primary);
  background:rgba(var(--primary-rgb),.08); border:1px solid rgba(var(--primary-rgb),.28);
}
.mv-steps h3{ font-family:var(--font-display); font-size:1.12rem; line-height:1.25; margin:0 0 8px; }
.mv-steps p{ margin:0; font-size:15px; line-height:1.55; color:var(--text-muted); }

/* ------------------------------------------------------- proof / weight --- */
.mv-proof{ --p:1; }
.mv-weigh{ margin-top:44px; display:grid; gap:34px; max-width:980px; }
.mv-row-h{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:12px; }
.mv-row-h h3{ margin:0; font-family:var(--font-display); font-size:1.2rem; color:#fff; }
.mv-row-h p{ margin:0; font-size:15px; color:#a8c4d5; font-variant-numeric:tabular-nums; }
.mv-row-h p b{ color:var(--accent); font-weight:800; }
.mv-track{ position:relative; height:46px; border-radius:10px; background:rgba(255,255,255,.04); }
.mv-ghost, .mv-bar{ position:absolute; left:0; top:0; bottom:0; border-radius:10px; }
.mv-ghost{ width:var(--before); border:1.5px dashed rgba(var(--accent-rgb),.38); }
.mv-bar{
  width:calc(var(--after) + (var(--before) - var(--after)) * (1 - var(--p)));
  background:linear-gradient(90deg, var(--primary), var(--grad-end));
  box-shadow:0 0 0 1px rgba(var(--accent-rgb),.25) inset;
}
.mv-bar span{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font:800 14px/1 var(--font-display); color:#fff; white-space:nowrap; font-variant-numeric:tabular-nums;
}
.mv-ghost span{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font:600 13px/1 var(--font-body); color:#a8c4d5; white-space:nowrap;
}
.mv-same{ margin-top:40px; display:grid; grid-template-columns:auto 1fr; gap:18px; align-items:center; max-width:760px;
  padding:20px 22px; border:1px solid rgba(var(--accent-rgb),.22); border-radius:14px; background:rgba(var(--accent-rgb),.05); }
.mv-same-mark{ display:grid; place-items:center; width:46px; height:46px; border-radius:50%; background:rgba(var(--accent-rgb),.14); color:var(--accent); }
.mv-same-mark svg{ width:22px; height:22px; }
.mv-same p{ margin:0; color:#d6e8f2; font-size:15.5px; line-height:1.55; }
.mv-same b{ color:#fff; }
.mv-note{ margin-top:22px; font-size:14px; color:#a8c4d5; max-width:70ch; }

/* ----------------------------------------------------------- what we tidy - */
.mv-two{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:56px; align-items:start; }
.mv-two .tilt-plate{ border-radius:16px; overflow:hidden; }
.mv-two .tilt-plate > img{ aspect-ratio:4/3; object-fit:cover; width:100%; }
.mv-list{ list-style:none; margin:26px 0 0; padding:0; }
.mv-list li{ padding:16px 0 16px 30px; border-top:1px solid var(--border); position:relative; font-size:16px; line-height:1.55; }
.mv-list li:last-child{ border-bottom:1px solid var(--border); }
.mv-list li::before{ content:""; position:absolute; left:2px; top:24px; width:12px; height:2px; background:var(--primary); }
.mv-list b{ color:var(--text); }
.sec--dark .mv-list li{ border-color:rgba(var(--accent-rgb),.14); color:#d6e8f2; }
.sec--dark .mv-list li::before{ background:var(--accent); }
.sec--dark .mv-list b{ color:#fff; }

/* ------------------------------------------------------------ stays put --- */
.mv-stays{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:28px; margin-top:40px; }
.mv-stays > div{ padding:24px 22px; background:#fff; border:1px solid var(--border); border-radius:14px; }
.mv-stays h3{ font-family:var(--font-display); font-size:1.15rem; margin:0 0 8px; }
.mv-stays p{ margin:0; font-size:15px; line-height:1.55; color:var(--text-muted); }
.sec--tintlight a, .sec--light a:not(.btn){ color:var(--primary); }

/* ------------------------------------------------------------- agencies --- */
.mv-agency{ display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:48px; align-items:center; }
.mv-price{ display:flex; align-items:baseline; gap:10px; margin-top:22px; font-family:var(--font-display); }
.mv-price .amt{ font-size:clamp(2.6rem,5vw,3.6rem); font-weight:800; letter-spacing:-.02em; color:var(--primary); }
.mv-price .per{ font-size:16px; color:var(--text-muted); font-family:var(--font-body); }

/* ------------------------------------------------------------------ FAQ --- */
.mv-faq{ margin-top:34px; max-width:860px; }
.mv-faq details{ border-top:1px solid var(--border); }
.mv-faq details:last-child{ border-bottom:1px solid var(--border); }
.mv-faq summary{ cursor:pointer; list-style:none; padding:20px 40px 20px 0; position:relative;
  font:700 1.08rem/1.35 var(--font-display); color:var(--text); }
.mv-faq summary::-webkit-details-marker{ display:none; }
.mv-faq summary::after{ content:"+"; position:absolute; right:6px; top:16px; font:400 26px/1 var(--font-body); color:var(--primary); }
.mv-faq details[open] summary::after{ content:"\2013"; }
.mv-faq summary:focus-visible{ outline:2px solid var(--primary); outline-offset:3px; }
.mv-faq details p{ margin:0 0 20px; font-size:16px; line-height:1.6; color:var(--text-muted); max-width:70ch; }

/* --------------------------------------------------------------- responsive */
@media (max-width:1100px){ .mv-steps{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:900px){
  .mv-hero, .mv-two, .mv-agency{ grid-template-columns:1fr; gap:36px; }
  .mv-hero-fig .tilt-plate > img{ aspect-ratio:4/3; }
  .mv-stays{ grid-template-columns:1fr; }
}
@media (max-width:620px){
  .mv-steps{ grid-template-columns:1fr; gap:0; }
  .mv-steps li{ padding:20px 0 20px 52px; }
  .mv-steps li::before{ top:18px; }
  .mv-bar span{ font-size:12.5px; right:8px; }
  .mv-ghost span{ display:none; }
}