/* Service landing pages (inc/landing/landing-pages.php). Built on the theme's colour
   tokens, so dark/light mode and any palette change apply here too. */
/* remotive.css loads asynchronously, so the tokens used below are defined
   here as well (same values) to avoid a flash of missing borders and corners. */
.rm-lp{
  --rm-line:rgba(255,255,255,.16);
  --rm-ink-70:rgba(255,255,255,.72);
  --rm-ink-55:rgba(255,255,255,.55);
  --rm-r-sm:10px;
  --rm-r:16px;
  --rm-r-lg:24px;
}
html[data-theme="light"] .rm-lp{
  --rm-line:rgba(30,30,30,.14);
  --rm-ink-70:rgba(30,30,30,.7);
  --rm-ink-55:rgba(30,30,30,.64);
}

.rm-lp{
  --lp-gap:clamp(2rem,4.5vw,3.5rem);
  --lp-pad:max(1.25rem,calc((100vw - 70rem) / 2));
  --lp-c:var(--wp--preset--color--cyan);
  --lp-m:var(--wp--preset--color--magenta-dark);
  --lp-y:var(--wp--preset--color--accent-3);
  --lp-navy:#1a1a2e;
  padding:0 0 5rem;
  color:var(--wp--preset--color--ink); line-height:1.6;
}
.rm-lp, .rm-lp *{ box-sizing:border-box; }
.rm-lp[data-lang="zh"]{ font-family:"PingFang SC","Noto Sans SC","Microsoft YaHei",var(--wp--preset--font-family--archivo),sans-serif; }
.rm-lp[data-lang="zht"]{ font-family:"PingFang TC","Noto Sans TC","Microsoft JhengHei",var(--wp--preset--font-family--archivo),sans-serif; }

/* Top bar: brand and language only. No navigation, so nothing leads away. */
.rm-lp__bar{ display:flex; flex-wrap:wrap; gap:.5rem 1rem; align-items:center; justify-content:space-between; padding:1.25rem var(--lp-pad) 1rem; }
.rm-lp__logo{ display:inline-block; padding:.4rem .6rem; background:#fff; line-height:0; } /* the artwork is drawn for white; the plate keeps ":MOTIVE" readable in dark mode */
.rm-lp__logo img{ height:56px; width:auto; }
.rm-lp__langs{ display:flex; gap:.25rem; }
.rm-lp__lang{
  display:inline-flex; align-items:center; text-decoration:none;
  min-height:44px; min-width:44px; padding:.4rem .75rem; font:inherit; font-size:.82rem; letter-spacing:.06em; cursor:pointer;
  color:var(--rm-ink-70); background:transparent; border:1px solid transparent; border-radius:2rem;
}
.rm-lp__lang:hover{ color:var(--wp--preset--color--ink); }
.rm-lp__lang[aria-current="true"]{ color:var(--wp--preset--color--ink); border-color:var(--rm-line); background:var(--wp--preset--color--card); }
.rm-lp :focus-visible{ outline:2px solid var(--wp--preset--color--cyan-dark); outline-offset:2px; }

/* Hero: promise on the left, form on the right (stacked on phones). */
.rm-lp__hero{ display:grid; gap:2rem; padding:var(--lp-gap) var(--lp-pad); align-items:start; }
@media (min-width:56rem){ .rm-lp__hero{ grid-template-columns:1.1fr .9fr; gap:3.5rem; } }
.rm-lp__eyebrow{ margin:0 0 1rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rm-ink-55); }
.rm-lp h1{ margin:0 0 1.25rem; font-size:clamp(2rem,5.5vw,3.75rem); line-height:1.08; text-transform:none; }
.rm-lp__lead{ margin:0 0 1.5rem; font-size:clamp(1.05rem,1.5vw,1.25rem); color:var(--rm-ink-70); }
.rm-lp__points{ margin:0; padding:0; list-style:none; display:grid; gap:.75rem; }
.rm-lp__points li{ padding-left:1.6rem; position:relative; }
.rm-lp__points li::before{ content:""; position:absolute; left:0; top:.7em; width:.8rem; height:2px; background:var(--wp--preset--color--magenta-dark); }

/* Form card */
.rm-lp__card{ padding:1.5rem; background:var(--wp--preset--color--card); border:1px solid var(--rm-line); }
.rm-lp__card h2{ margin:0 0 1rem; font-size:1.35rem; text-transform:none; }
.rm-lp__field{ margin:0 0 1rem; }
.rm-lp__field label{ display:block; margin-bottom:.35rem; font-size:.88rem; font-weight:600; }
.rm-lp__opt{ font-weight:400; color:var(--rm-ink-55); }
.rm-lp__field input,.rm-lp__field select{
  width:100%; min-height:48px; padding:.7rem .85rem; font:inherit; font-size:1rem; /* 16px+ stops iOS zoom on focus */
  color:var(--wp--preset--color--ink); background:var(--wp--preset--color--paper);
  border:1px solid var(--rm-line); border-radius:0;
}
.rm-lp__field input:focus,.rm-lp__field select:focus{ border-color:var(--wp--preset--color--ink); }
.rm-lp__submit{
  width:100%; min-height:52px; padding:1rem 1.6rem; font:inherit; font-weight:700; cursor:pointer;
  color:var(--wp--preset--color--contrast-text); background:var(--wp--preset--color--contrast-bg);
  border:2px solid var(--wp--preset--color--ink);
}
.rm-lp__submit:hover{ border-color:var(--wp--preset--color--magenta-dark); }
.rm-lp__fine{ margin:.9rem 0 0; font-size:.82rem; color:var(--rm-ink-55); }
.rm-lp__fine a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.rm-lp__hp{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.rm-lp__status{ margin-top:1rem; font-size:.9rem; font-weight:600; }
.rm-lp__msg{ display:none; }
.rm-lp__status[data-state="success"] .rm-lp__msg--success,
.rm-lp__status[data-state="error"] .rm-lp__msg--error{ display:block; }

/* Sections below the fold */
.rm-lp__section{ padding:var(--lp-gap) var(--lp-pad) 0; }
.rm-lp__section h2{ margin:0 0 1.5rem; font-size:clamp(1.4rem,3vw,2rem); text-transform:none; }
.rm-lp__steps{ display:grid; gap:1.25rem; margin:0; padding:0; list-style:none; grid-template-columns:1fr; }
@media (min-width:40rem){ .rm-lp__steps{ grid-template-columns:repeat(3,1fr); } }
.rm-lp__step{ padding:1.5rem; border:1px solid var(--rm-line); }
.rm-lp__step h3{ margin:.5rem 0; font-size:1.1rem; text-transform:none; }
.rm-lp__step p{ margin:0; color:var(--rm-ink-70); }
.rm-lp__num{ font-size:.8rem; letter-spacing:.1em; color:var(--rm-ink-55); }
.rm-lp__trust p{ margin:0; color:var(--rm-ink-70); }
.rm-lp__foot{ margin:0 var(--lp-pad); padding-top:1.25rem; border-top:1px solid var(--rm-line); font-size:.85rem; color:var(--rm-ink-55); }

/* Phones: a CTA that stays reachable once the hero form scrolls away. */
.rm-lp__sticky{
  position:fixed; left:1rem; right:1rem; bottom:1rem; z-index:20; display:none; max-width:30rem; margin-inline:auto; align-items:center; justify-content:center;
  min-height:52px; font-weight:700; text-decoration:none;
  color:var(--wp--preset--color--contrast-text); background:var(--wp--preset--color--contrast-bg); border:2px solid var(--wp--preset--color--ink);
}
.rm-lp__sticky.is-on{ display:flex; }
@media (min-width:56rem){ .rm-lp__sticky{ display:none !important; } }

/* ---- Colour: the brand's CMYK plates, via the theme tokens ---- */

/* A tri-colour registration stripe across the very top. */
.rm-lp::before{
  content:""; position:fixed; z-index:30; top:0; left:0; right:0; height:6px;
  background:linear-gradient(90deg,var(--lp-c) 0 33.4%,var(--lp-m) 33.4% 66.7%,var(--lp-y) 66.7%);
}

/* Hero: soft cyan and magenta washes behind the promise and the form. */
.rm-lp__hero{
  background:
    radial-gradient(40rem 22rem at 85% 30%, color-mix(in srgb,var(--lp-c) 26%,transparent), transparent 70%),
    radial-gradient(30rem 18rem at 8% 85%, color-mix(in srgb,var(--lp-m) 18%,transparent), transparent 70%);
}
.rm-lp__eyebrow{
  display:flex; align-items:center; gap:.6rem;
  color:var(--wp--preset--color--cyan-dark); font-weight:700;
}
.rm-lp__eyebrow::before{ content:""; width:.7rem; height:.7rem; background:var(--lp-m); flex:0 0 auto; }
.rm-lp h1{ font-weight:800; }
.rm-lp__points li:nth-child(1)::before{ background:var(--lp-c); }
.rm-lp__points li:nth-child(2)::before{ background:var(--lp-m); }
.rm-lp__points li:nth-child(3)::before{ background:var(--lp-y); }
.rm-lp__points li::before{ height:.7rem; width:.7rem; top:.45em; }

/* Form card: offset colour plates, like misregistered print. */
.rm-lp__card{
  border-color:transparent; border-top:6px solid var(--lp-c);
  box-shadow:7px 7px 0 var(--lp-m), 14px 14px 0 var(--lp-c);
  margin:0 14px 14px 0;
}
.rm-lp__field input:focus,.rm-lp__field select:focus{ border-color:var(--lp-c); outline:2px solid var(--lp-c); outline-offset:0; }
.rm-lp__lang[aria-current="true"]{ border-color:var(--lp-c); }

/* Buttons: magenta fill. White text in light mode (5.1:1), navy in dark (4.6:1). */
.rm-lp__submit,.rm-lp__sticky{
  color:#fff; background:var(--lp-m); border-color:var(--lp-m);
}
html:not([data-theme="light"]) .rm-lp__submit,
html:not([data-theme="light"]) .rm-lp__sticky{ color:var(--lp-navy); }
.rm-lp__submit:hover,.rm-lp__sticky:hover{ color:var(--lp-navy); background:var(--lp-c); border-color:var(--lp-c); }

/* Steps: one plate colour each. */
.rm-lp__step{ border-top-width:6px; border-top-color:var(--lp-c); }
.rm-lp__step:nth-child(2){ border-top-color:var(--lp-m); }
.rm-lp__step:nth-child(3){ border-top-color:var(--lp-y); }
.rm-lp__num{
  display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:50%;
  font-weight:700; letter-spacing:0; color:var(--lp-navy); background:var(--lp-c);
}
.rm-lp__step:nth-child(2) .rm-lp__num{ background:var(--lp-m); color:#fff; }
html:not([data-theme="light"]) .rm-lp__step:nth-child(2) .rm-lp__num{ color:var(--lp-navy); }
.rm-lp__step:nth-child(3) .rm-lp__num{ background:var(--lp-y); }

/* Trust strip: a tinted band. */
.rm-lp__trust{
  margin-top:var(--lp-gap); padding-block:2rem;
  background:color-mix(in srgb,var(--lp-c) 14%,transparent);
}
.rm-lp__trust p{ color:var(--wp--preset--color--ink); }

/* Closing band: navy in both modes, so the second form is the loudest thing on the page. */
.rm-lp__final{
  margin-top:0; padding-bottom:var(--lp-gap);
  color:#fff; background:var(--lp-navy);
  background-image:linear-gradient(90deg,var(--lp-c) 0 33.4%,var(--lp-m) 33.4% 66.7%,var(--lp-y) 66.7%);
  background-size:100% 6px; background-repeat:no-repeat;
}
.rm-lp__trust + .rm-lp__final{ margin-top:var(--lp-gap); }
html:not([data-theme="light"]) .rm-lp__final{ background-color:#0d1117; } /* a step darker than the page, so the band still reads in dark mode */
.rm-lp__final h2{ color:#fff; }
.rm-lp__final .rm-lp__card{ background:#fff; color:#1e1e1e; --wp--preset--color--ink:#1e1e1e; --wp--preset--color--paper:#f7f4ec; --rm-ink-55:rgba(30,30,30,.64); --rm-line:rgba(30,30,30,.2); }
.rm-lp__foot{ margin-top:0; padding-block:1.25rem; }

/* ---- Photography ---- */

/* Hero photo: fills the left column under the bullets, desktop only so the
   form is never pushed down on a phone. Offset plate matches the cards. */
.rm-lp__photo{ display:none; margin-top:2rem; }
.rm-lp__photo img{ display:block; width:100%; height:auto; aspect-ratio:16/10; object-fit:cover; box-shadow:-7px 7px 0 var(--lp-y); }
@media (min-width:56rem){ .rm-lp__photo{ display:block; max-width:34rem; } }

/* Markets: photo tiles with the name over a navy fade. */
.rm-lp__trust > p{ margin:0 0 1.25rem; }
.rm-lp__cities{ display:grid; gap:.75rem; margin:0; padding:0; list-style:none; grid-template-columns:repeat(2,1fr); }
@media (min-width:40rem){ .rm-lp__cities{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:56rem){ .rm-lp__cities{ grid-template-columns:repeat(6,1fr); gap:1rem; } }
.rm-lp__city{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--lp-navy); }
.rm-lp__city img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.rm-lp__city:hover img{ transform:scale(1.05); }
.rm-lp__city span{
  position:absolute; left:0; right:0; bottom:0; padding:1.4rem .75rem .6rem;
  color:#fff; font-weight:700; font-size:.95rem;
  background:linear-gradient(to top,rgba(26,26,46,.9),rgba(26,26,46,0));
}
.rm-lp__city:nth-child(1) span{ border-bottom:4px solid var(--lp-c); }
.rm-lp__city:nth-child(2) span{ border-bottom:4px solid var(--lp-m); }
.rm-lp__city:nth-child(3) span{ border-bottom:4px solid var(--lp-y); }
.rm-lp__city:nth-child(4) span{ border-bottom:4px solid var(--lp-c); }
.rm-lp__city:nth-child(5) span{ border-bottom:4px solid var(--lp-m); }
.rm-lp__city:nth-child(6) span{ border-bottom:4px solid var(--lp-y); }
@media (prefers-reduced-motion:reduce){ .rm-lp__city img{ transition:none; } .rm-lp__city:hover img{ transform:none; } }

/* ---- Closing band: copy beside the form on desktop, so there is no empty half ---- */
@media (min-width:40rem){
  .rm-lp__final{ display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center; }
}
@media (min-width:56rem){ .rm-lp__final{ gap:3.5rem; } }
.rm-lp__final-copy h2{ margin-bottom:1rem; }
.rm-lp__final .rm-lp__lead{ color:rgba(255,255,255,.78); margin:0; }
.rm-lp__final .rm-lp__card{ max-width:34rem; }

/* ---- FAQ ---- */
.rm-lp__faq{ padding-bottom:0; }
.rm-lp__faqs{ display:grid; gap:.75rem; max-width:48rem; }
@media (min-width:40rem){ .rm-lp__faqs{ max-width:none; grid-template-columns:1fr 1fr; align-items:start; } }
.rm-lp__q{ border:1px solid var(--rm-line); background:var(--wp--preset--color--card); }
.rm-lp__q summary{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; cursor:pointer; list-style:none;
  min-height:48px; padding:.9rem 1.1rem; font-weight:700;
}
.rm-lp__q summary::-webkit-details-marker{ display:none; }
.rm-lp__q summary::after{ content:"+"; flex:0 0 auto; font-size:1.3rem; line-height:1; color:var(--lp-m); }
.rm-lp__q[open] summary::after{ content:"\2212"; }
.rm-lp__q[open]{ border-left:4px solid var(--lp-c); }
.rm-lp__q p{ margin:0; padding:0 1.1rem 1.1rem; color:var(--rm-ink-70); }
.rm-lp__foot{ margin-top:var(--lp-gap); }

.rm-lp__intro{ margin:-.5rem 0 1.1rem; font-size:.92rem; color:var(--rm-ink-70); }

/* Confirmation page: one column, no form. */
.rm-lp__thanks{ display:block; }
.rm-lp__thanks .rm-lp__copy{ max-width:44rem; }
.rm-lp__section > .rm-lp__fine{ margin-top:1.25rem; }

/* ---- Rounded corners ---- */
.rm-lp__logo{ border-radius:var(--rm-r-sm,10px); }
.rm-lp__logo img{ border-radius:6px; }
.rm-lp__card{ border-radius:var(--rm-r-lg,24px); border-top-width:0; }
.rm-lp__card::before{ content:""; display:block; height:6px; margin:-1.5rem -1.5rem 1.25rem; border-radius:var(--rm-r-lg,24px) var(--rm-r-lg,24px) 0 0; background:var(--lp-c); }
.rm-lp__field input,.rm-lp__field select{ border-radius:var(--rm-r-sm,10px); }
.rm-lp__submit,.rm-lp__sticky{ border-radius:999px; }
.rm-lp__step,.rm-lp__q{ border-radius:var(--rm-r,16px); overflow:hidden; }
.rm-lp__q[open]{ border-left-width:1px; }
.rm-lp__city{ border-radius:var(--rm-r,16px); }
.rm-lp__photo img{ border-radius:var(--rm-r-lg,24px); }
.rm-lp__num{ border-radius:50%; }

/* Phones and tablets: the form comes straight after the headline, so it is on
   the first screen; the intro and bullets follow it. From 56rem the form sits
   beside the copy, as before. */
@media (max-width:55.99rem){
  .rm-lp__hero:has(> .rm-lp__card){ display:flex; flex-direction:column; align-items:stretch; gap:0; }
  .rm-lp__hero:has(> .rm-lp__card) > .rm-lp__copy{ display:contents; }
  .rm-lp__hero:has(> .rm-lp__card) .rm-lp__eyebrow,
  .rm-lp__hero:has(> .rm-lp__card) h1{ order:-1; }
  .rm-lp__hero:has(> .rm-lp__card) h1{ margin-bottom:1.5rem; }
  .rm-lp__hero > .rm-lp__card{ order:0; width:auto; max-width:none; margin-bottom:2.25rem; }
  .rm-lp__hero:has(> .rm-lp__card) .rm-lp__lead,
  .rm-lp__hero:has(> .rm-lp__card) .rm-lp__points,
  .rm-lp__hero:has(> .rm-lp__card) .rm-lp__photo{ order:1; }
}

/* Results strip: real numbers from the case studies, right after the ask. */
.rm-lp__proof{ padding-top:0; }
.rm-lp__proof-kicker{ margin:0 0 1rem; font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--wp--preset--color--cyan-dark); }
.rm-lp__proofs{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,15.5rem),1fr)); }
.rm-lp__proofitem{ display:flex; flex-direction:column; gap:.5rem; padding:1.25rem 1.25rem 1.1rem; background:var(--wp--preset--color--card); border:1px solid var(--rm-line); border-top:6px solid var(--lp-c); border-radius:var(--rm-r-lg,24px); }
.rm-lp__proofitem:nth-child(3n+2){ border-top-color:var(--lp-m); }
.rm-lp__proofitem:nth-child(3n+3){ border-top-color:var(--lp-y); }
/* Kagnue (display serif, one weight) for the big figures only; licensed, self-hosted. */
@font-face{ font-family:'Kagnue'; src:url('../fonts/kagnue/kagnue-regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; unicode-range:U+0020-002A,U+002C-007E,U+00B7,U+00D7,U+2014,U+2019,U+201C,U+201D,U+2192; }
.rm-lp__metric{ font-family:'Kagnue','Saira',Georgia,serif; text-transform:none; font-size:clamp(2.6rem,6vw,3.6rem); font-weight:400; line-height:1; color:var(--wp--preset--color--ink); }
.rm-lp__proofhead{ font-weight:600; line-height:1.35; }
.rm-lp__proofwho{ margin-top:auto; font-size:.82rem; color:var(--rm-ink-55); }

/* Phones: a shorter page, so the form and the proof stay close together.
   Smaller logo bar, results as a swipeable row, compact steps, six cities in two rows. */
@media (max-width:39.99rem){
  .rm-lp__bar{ padding-top:.8rem; padding-bottom:.5rem; }
  .rm-lp__logo img{ height:38px; }

  .rm-lp__proofs{ display:flex; gap:.75rem; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin-inline:calc(var(--lp-pad) * -1); padding:0 var(--lp-pad) .75rem; scroll-padding-inline:var(--lp-pad); }
  .rm-lp__proofitem{ flex:0 0 min(82%,20rem); scroll-snap-align:start; padding:1rem 1rem .9rem; }
  .rm-lp__metric{ font-size:2.4rem; }

  .rm-lp__steps{ gap:.75rem; }
  .rm-lp__step{ display:grid; grid-template-columns:auto 1fr; column-gap:.9rem; align-items:start; padding:1rem 1.1rem; }
  .rm-lp__step .rm-lp__num{ grid-row:1 / span 2; margin-top:.15rem; }
  .rm-lp__step h3{ margin:0 0 .25rem; }

  .rm-lp__cities{ grid-template-columns:repeat(3,1fr); gap:.5rem; }
  .rm-lp__city span{ font-size:.72rem; padding:.3rem .45rem; }
}
@media (max-width:21rem){ .rm-lp__cities{ grid-template-columns:repeat(2,1fr); } }

.rm-lp__proofs:focus-visible{ outline:2px solid var(--wp--preset--color--cyan-dark); outline-offset:2px; } /* the row scrolls on phones, so keyboard users must be able to focus it */