/* ==========================================================================
   1Portal — landing page

   Every size below is a "reference pixel" of the original 1536x1024 render,
   expressed through --u. At a 1536px viewport 1u === 1px of the artwork, and
   under that the whole composition scales down proportionally, so the design
   stays pixel-faithful at any desktop width.

   Typography was reverse-engineered from the render: Roboto, with the type
   sizes / tracking / leading solved from the measured ink extents.
   ========================================================================== */

/* ------------------------------- webfont --------------------------------
   Roboto is self-hosted on purpose. Loading it from fonts.googleapis.com is
   fragile inside WordPress — a font plugin (fontiran and friends) or an
   Elementor setting will strip the enqueue, and the page silently falls back
   to whatever the theme forces. Local files can't be removed by a plugin.
   ------------------------------------------------------------------------ */
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/roboto-latin-400.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/roboto-latin-500.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/roboto-latin-700.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;
  src:url('../fonts/roboto-latin-ext-400.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;
  src:url('../fonts/roboto-latin-ext-500.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;
  src:url('../fonts/roboto-latin-ext-700.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* -------------------------------- tokens -------------------------------- */
:root{
  --u: min(1px, 0.0651041667vw);

  --brand:      #2C5CFF;
  --brand-400:  #5B84FF;

  --bg:         #000000;

  --text:       #FFFFFF;
  --text-2:     #C9CCD4;
  --text-3:     #9298A4;

  --font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

  --header-h:  calc(91 * var(--u));
  --wrap:      calc(1383 * var(--u));   /* header + hero content width */
  --wrap-svc:  calc(1290 * var(--u));   /* services content width      */
}

/* --------------------------------- base --------------------------------- */
.onep-landing *,.onep-landing *::before,.onep-landing *::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}

/* The three !important flags are aimed at font plugins: fontiran & co. ship
   `body{font-family:...!important}`, which no amount of specificity beats.
   Children declare their own colours, so forcing them here leaks nothing. */
body.onep-landing{
  margin:0;
  background:var(--bg) !important;
  color:var(--text) !important;
  font-family:var(--font) !important;
  /* the layout uses logical properties, so an RTL host site would mirror it */
  direction:ltr !important;
  text-align:left;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;overflow-x:clip;
}

.onep-landing img,.onep-landing svg{display:block;max-width:100%}
.onep-landing a{color:inherit;text-decoration:none}
.onep-landing button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.onep-landing h1,.onep-landing h2,.onep-landing h3,.onep-landing p,.onep-landing ul,.onep-landing ol{margin:0}
.onep-landing ul,.onep-landing ol{list-style:none;padding:0}
.onep-landing ::selection{background:var(--brand);color:#fff}

.onep-landing .container{width:var(--wrap);max-width:100%;margin-inline:auto}
/* the sections under the hero share one narrower grid, so the cards and the
   partnership steps line up on the same left edge */
.onep-landing .services .container,
.onep-landing .partner .container,
.onep-landing .projects .container,
.onep-landing .site-footer .container{width:var(--wrap-svc)}

.onep-landing .accent{color:#4070FF}

.onep-landing .glow{position:absolute;border-radius:50%;pointer-events:none;display:block}

/* ------------------------------ primitives ------------------------------ */
.onep-landing .pill{
  display:inline-flex;align-items:center;
  gap:calc(10 * var(--u));
  height:calc(44 * var(--u));
  padding-left:calc(18 * var(--u));
  padding-right:calc(20 * var(--u));
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  background:rgba(255,255,255,.015);
  font-size:calc(15 * var(--u));
  font-weight:400;
  color:#E9EBF0;
  white-space:nowrap;
}
/* the halo is a separate layer animated with transform/opacity — animating
   box-shadow would repaint on the main thread every frame, forever */
.onep-landing .pill-dot{
  position:relative;
  width:calc(11 * var(--u));height:calc(11 * var(--u));
  border-radius:50%;background:#3B6AFF;
  box-shadow:0 0 calc(9 * var(--u)) calc(1 * var(--u)) rgba(59,106,255,.75);
}
.onep-landing .pill-dot::after{
  content:"";position:absolute;inset:calc(-5 * var(--u));
  border-radius:50%;
  background:radial-gradient(circle at center,rgba(59,106,255,.55) 0%,transparent 70%);
  animation:pulseDot 2.6s ease-in-out infinite;
}
@keyframes pulseDot{
  0%,100%{transform:scale(1);opacity:.85}
  50%    {transform:scale(1.55);opacity:.35}
}

.onep-landing .pill-label{
  height:calc(32 * var(--u));
  padding-inline:calc(20 * var(--u));
  border-color:rgba(56,96,235,.5);
  background:rgba(28,58,185,.10);
  color:#4E7BFF;
  font-size:calc(12.5 * var(--u));
  font-weight:700;
  letter-spacing:.14em;
}

.onep-landing .btn{
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:999px;white-space:nowrap;font-weight:400;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s,
             background-color .28s, border-color .28s;
}
.onep-landing .btn .ico-arrow{transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.onep-landing .btn:hover .ico-arrow{transform:translateX(calc(4 * var(--u)))}

.onep-landing .btn-outline{
  height:calc(45 * var(--u));
  padding-left:calc(22 * var(--u));
  padding-right:calc(14 * var(--u));
  gap:calc(15 * var(--u));
  border:1px solid rgba(255,255,255,.20);
  font-size:calc(15 * var(--u));
  color:#fff;
}
.onep-landing .btn-outline .ico-arrow{width:calc(17 * var(--u));height:calc(17 * var(--u))}
.onep-landing .btn-outline:hover{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.045)}

.onep-landing .btn-primary{
  height:calc(54 * var(--u));
  padding-left:calc(42 * var(--u));
  padding-right:calc(40 * var(--u));
  gap:calc(19 * var(--u));
  background:var(--brand);
  color:#fff;
  font-size:calc(18 * var(--u));
  box-shadow:0 calc(8 * var(--u)) calc(26 * var(--u)) calc(-6 * var(--u)) rgba(44,92,255,.75),
             0 0 calc(46 * var(--u)) calc(-6 * var(--u)) rgba(44,92,255,.62),
             inset 0 1px 0 rgba(255,255,255,.18);
}
.onep-landing .btn-primary .ico-arrow{width:calc(20 * var(--u));height:calc(20 * var(--u))}
.onep-landing .btn-primary:hover{
  background:#2350F0;
  transform:translateY(calc(-2 * var(--u)));
  box-shadow:0 calc(14 * var(--u)) calc(34 * var(--u)) calc(-8 * var(--u)) rgba(44,92,255,.85),
             0 0 calc(62 * var(--u)) calc(-4 * var(--u)) rgba(44,92,255,.68),
             inset 0 1px 0 rgba(255,255,255,.2);
}

/* -------------------------------- header -------------------------------- */
.onep-landing .site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--header-h);
  display:flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:background-color .3s, border-color .3s;
}
.onep-landing .site-header.is-stuck{
  background:#050508;
  border-bottom-color:rgba(255,255,255,.06);
}
.onep-landing .header-inner{position:relative;display:flex;align-items:center}

.onep-landing .brand{display:flex;align-items:center;gap:calc(10 * var(--u));flex:0 0 auto}
/* the supplied mark, plain white on transparent — it is the whole logo now */
.onep-landing .brand-mark{
  flex:0 0 auto;
  display:grid;place-items:center;
}
.onep-landing .brand-mark img{width:calc(31 * var(--u));height:auto}

/* centred on the container, not on the space left over by brand + cta */
.onep-landing .main-nav{
  position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);
  display:flex;align-items:center;
  gap:calc(49 * var(--u));
}
.onep-landing .main-nav a{
  position:relative;
  font-size:calc(17.5 * var(--u));
  font-weight:400;
  color:rgba(255,255,255,.93);
  transition:color .25s;
}
.onep-landing .main-nav a::after{
  content:"";position:absolute;left:0;right:0;
  bottom:calc(-7 * var(--u));height:calc(1.5 * var(--u));
  background:var(--brand-400);border-radius:2px;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.onep-landing .main-nav a:hover{color:#fff}
.onep-landing .main-nav a:hover::after{transform:scaleX(1)}

.onep-landing .header-cta{flex:0 0 auto;margin-left:auto}

/* Minimal burger: two hairlines and no chrome. The 44px box is kept purely
   as the tap target — anything smaller is awkward on a phone — but nothing of
   it is painted, so only the lines read. */
.onep-landing .nav-toggle{
  display:none;
  width:44px;height:44px;
  padding:0;border:0;background:none;
  margin-left:auto;
  flex-direction:column;align-items:center;justify-content:center;
  gap:6px;
}
.onep-landing .nav-toggle span{
  display:block;
  width:20px;height:1.5px;border-radius:2px;
  background:rgba(255,255,255,.92);
  transition:transform .32s cubic-bezier(.2,.7,.3,1);
}
.onep-landing .nav-toggle span:nth-child(2){display:none}
.onep-landing .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(3.75px) rotate(45deg)}
.onep-landing .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-3.75px) rotate(-45deg)}

/* --------------------------------- hero --------------------------------- */
.onep-landing .hero{
  position:relative;isolation:isolate;overflow:hidden;
  /* the reference render put the badge at y=188 with a 91u header, i.e. a 97u
     gap; tightened to 49u on request so the hero sits closer under the nav */
  padding-top:calc(140 * var(--u));
  padding-bottom:calc(104 * var(--u));
}
/* The glows are plain radial gradients on purpose — a filter:blur() over a
   1000px+ layer forces an offscreen blur pass on every repaint and is what
   makes scrolling feel heavy. Gradient stops do the same job for free. */
.onep-landing .hero-bg{position:absolute;inset:0;z-index:-1;transform:translateZ(0)}
.onep-landing .hero-bg .glow-right{
  width:calc(1240 * var(--u));height:calc(1240 * var(--u));
  top:calc(-360 * var(--u));right:calc(-350 * var(--u));
  background:radial-gradient(circle at center,
    rgba(40,84,230,.20) 0%, rgba(35,74,210,.12) 24%, rgba(28,60,180,.05) 44%, transparent 68%);
}
.onep-landing .hero-bg .glow-left{
  width:calc(820 * var(--u));height:calc(820 * var(--u));
  top:calc(100 * var(--u));left:calc(-420 * var(--u));
  background:radial-gradient(circle at center,
    rgba(34,72,205,.09) 0%, rgba(30,64,190,.04) 34%, transparent 68%);
}
.onep-landing .hero-bg .glow-bottom{
  width:calc(1060 * var(--u));height:calc(680 * var(--u));
  bottom:calc(-450 * var(--u));left:18%;
  background:radial-gradient(circle at center,
    rgba(32,68,195,.10) 0%, rgba(28,60,180,.05) 36%, transparent 70%);
}

.onep-landing .hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(833 * var(--u));
  gap:calc(52 * var(--u));
  align-items:center;
}

.onep-landing .hero-title{
  margin-top:calc(21 * var(--u));
  font-size:calc(62.6 * var(--u));
  line-height:calc(73 * var(--u));
  font-weight:700;
  letter-spacing:-.031em;
}

.onep-landing .hero-lead{
  margin-top:calc(19 * var(--u));
  font-size:calc(17.5 * var(--u));
  line-height:calc(29 * var(--u));
  color:#A3A8B4;
}

.onep-landing .hero-copy .btn-primary{margin-top:calc(34 * var(--u))}

/* terms chip under the CTA */
.onep-landing .hero-terms{
  display:inline-flex;align-items:center;
  gap:calc(13 * var(--u));
  height:calc(46 * var(--u));
  padding-inline:calc(18 * var(--u));
  margin-top:calc(20 * var(--u));
  border:1px solid rgba(255,255,255,.10);
  border-radius:calc(12 * var(--u));
  background:rgba(255,255,255,.02);
  font-size:calc(14.5 * var(--u));
  white-space:nowrap;
}
.onep-landing .hero-terms .term{
  display:inline-flex;align-items:center;
  gap:calc(11 * var(--u));
  color:#E9EBF0;
}
.onep-landing .hero-terms .term--muted{color:#9298A4}
.onep-landing .hero-terms .ico{
  flex:0 0 auto;
  width:calc(17 * var(--u));height:calc(17 * var(--u));
  color:#C9CCD4;
}
.onep-landing .hero-terms .sep{
  flex:0 0 auto;
  width:calc(12 * var(--u));height:calc(12 * var(--u));
  color:#6B7180;
}

.onep-landing .trust{
  display:flex;align-items:center;
  gap:calc(12 * var(--u));
  margin-top:calc(30 * var(--u));
}
.onep-landing .avatars{width:calc(254 * var(--u));height:auto;}
.onep-landing .trust-text{
  font-size:calc(19 * var(--u));
  line-height:calc(27 * var(--u));
  color:#CDD0D8;
}

/* ------------------------- dashboard image slider ------------------------ */
.onep-landing .hero-visual{position:relative;min-width:0}
.onep-landing .hero-visual::before{
  content:"";position:absolute;inset:-18% -10% -24% -10%;
  background:radial-gradient(58% 55% at 52% 48%,
    rgba(40,84,240,.15) 0%, rgba(34,72,215,.08) 30%, rgba(28,60,190,.03) 52%, transparent 74%);
  z-index:0;pointer-events:none;
}

.onep-landing .dash-slider{
  position:relative;z-index:1;
  width:100%;
  aspect-ratio:1536 / 1024;
  border-radius:calc(20 * var(--u));
  border:1px solid rgba(255,255,255,.10);
  background:#050508;
  overflow:hidden;
  box-shadow:
    0 calc(40 * var(--u)) calc(90 * var(--u)) calc(-30 * var(--u)) rgba(0,0,0,.9),
    0 0 calc(90 * var(--u)) calc(-20 * var(--u)) rgba(44,92,255,.35);
}
.onep-landing .dash-slider::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:linear-gradient(180deg,rgba(255,255,255,.035),transparent 20%);
}

/* opacity + transform only. An animated filter:blur() on an 833px-wide image
   costs an offscreen blur pass per frame and produced a 300ms+ rendering
   stall on every flip — which is exactly what read as scroll lag. */
.onep-landing .dash-slide{
  position:absolute;inset:0;margin:0;
  opacity:0;
  transform:translate3d(7%,0,0) scale(1.02);
  transition:opacity .7s cubic-bezier(.16,.84,.28,1),
             transform .7s cubic-bezier(.16,.84,.28,1);
}
.onep-landing .dash-slide img{width:100%;height:100%;object-fit:cover;display:block}
.onep-landing .dash-slide.is-active{opacity:1;transform:translate3d(0,0,0) scale(1);z-index:2}
.onep-landing .dash-slide.is-leaving{opacity:0;transform:translate3d(-7%,0,0) scale(1.02);z-index:1}
.onep-landing .dash-slide.from-left{transform:translate3d(-7%,0,0) scale(1.02)}
.onep-landing .dash-slide.is-leaving.to-right{transform:translate3d(7%,0,0) scale(1.02)}

.onep-landing .dash-sweep{
  position:absolute;top:-20%;bottom:-20%;left:-45%;width:36%;
  z-index:6;pointer-events:none;opacity:0;
  background:linear-gradient(100deg,transparent 0%,rgba(120,160,255,.05) 30%,
             rgba(150,185,255,.13) 42%,rgba(205,225,255,.22) 50%,
             rgba(150,185,255,.13) 58%,rgba(120,160,255,.05) 70%,transparent 100%);
}
.onep-landing .dash-sweep.is-on{animation:sweep .9s cubic-bezier(.3,.1,.2,1) both}
@keyframes sweep{
  0%{opacity:0;transform:translateX(0) skewX(-12deg)}
  14%{opacity:1}
  100%{opacity:0;transform:translateX(420%) skewX(-12deg)}
}

.onep-landing .dash-progress{
  position:absolute;z-index:7;left:0;right:0;bottom:0;
  height:calc(2 * var(--u));
  background:rgba(255,255,255,.06);
  pointer-events:none;
}
.onep-landing .dash-progress i{
  display:block;height:100%;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(44,92,255,.3),var(--brand-400));
}
.onep-landing .dash-progress i.is-running{animation:dashProgress var(--slide-dur,5.4s) linear both}
@keyframes dashProgress{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ------------------------------- services ------------------------------- */
.onep-landing .services{
  position:relative;isolation:isolate;overflow:hidden;
  padding-top:calc(112 * var(--u));
  padding-bottom:calc(120 * var(--u));
}
.onep-landing .services-bg{position:absolute;inset:0;z-index:-1;transform:translateZ(0)}
.onep-landing .services-bg .glow-svc{
  width:calc(1310 * var(--u));height:calc(960 * var(--u));
  top:calc(-300 * var(--u));left:50%;transform:translateX(-50%);
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(30,64,190,.17) 0%, rgba(28,60,180,.08) 34%, transparent 72%);
}

.onep-landing .section-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) calc(482 * var(--u));
  gap:calc(60 * var(--u));
  align-items:start;
  margin-bottom:calc(23 * var(--u));
}
.onep-landing .section-title{
  margin-top:calc(15 * var(--u));
  font-size:calc(51.4 * var(--u));
  line-height:calc(54 * var(--u));
  font-weight:700;
  letter-spacing:-.031em;
}
.onep-landing .section-desc{
  margin-top:calc(55 * var(--u));
  font-size:calc(14.7 * var(--u));
  line-height:calc(20.5 * var(--u));
  color:#9EA3AF;
}

/* cards ------------------------------------------------------------------ */
.onep-landing .cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:calc(20 * var(--u));
}

.onep-landing .card{
  position:relative;overflow:hidden;
  min-height:calc(290 * var(--u));
  padding:calc(25 * var(--u)) calc(25 * var(--u)) calc(23 * var(--u));
  border:1px solid rgba(255,255,255,.075);
  border-radius:calc(18 * var(--u));
  background:linear-gradient(158deg,#0A0C12 0%,#05070C 46%,#04060B 100%);
  display:flex;flex-direction:column;align-items:flex-start;
  contain:layout paint style;
  transition:border-color .4s, transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s;
}
.onep-landing .card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(78% 68% at 76% 60%,rgba(44,92,255,.13),transparent 62%);
  opacity:0;transition:opacity .45s;
}
.onep-landing .card:hover{
  border-color:rgba(255,255,255,.14);
  transform:translateY(calc(-4 * var(--u)));
  box-shadow:0 calc(26 * var(--u)) calc(60 * var(--u)) calc(-30 * var(--u)) rgba(0,0,0,.95),
             0 0 calc(60 * var(--u)) calc(-30 * var(--u)) rgba(44,92,255,.6);
}
.onep-landing .card:hover::after{opacity:1}

/* the crop carries 2px of bleed on every side, hence the negative margin */
.onep-landing .card-ico{
  position:relative;z-index:2;
  width:calc(48 * var(--u));height:calc(48 * var(--u));
  margin:calc(-2 * var(--u));
}

.onep-landing .card h3{
  position:relative;z-index:2;
  margin-top:calc(11 * var(--u));
  font-size:calc(18.4 * var(--u));
  line-height:calc(24 * var(--u));
  font-weight:700;
  letter-spacing:-.005em;
}
.onep-landing .card p{
  position:relative;z-index:2;
  margin-top:calc(13 * var(--u));
  margin-bottom:calc(16 * var(--u));   /* minimum breathing room above the arrow */
  font-size:calc(13.6 * var(--u));
  line-height:calc(19 * var(--u));
  color:#9298A4;
}
.onep-landing .card-arrow{
  position:relative;z-index:2;
  display:grid;place-items:center;
  width:calc(32 * var(--u));height:calc(32 * var(--u));
  border-radius:50%;
  /* pinned to the bottom so every arrow lines up across the row */
  margin-top:auto;
  background:var(--brand);
  box-shadow:0 calc(5 * var(--u)) calc(16 * var(--u)) calc(-6 * var(--u)) rgba(44,92,255,.95),
             inset 0 1px 0 rgba(255,255,255,.18);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), background-color .3s;
}
.onep-landing .card-arrow svg{width:calc(16 * var(--u));height:calc(16 * var(--u));color:#fff}
.onep-landing .card-arrow:hover{background:#2350F0;transform:translateX(calc(3 * var(--u)))}

/* each illustration keeps the exact offset it had inside the reference card */
.onep-landing .card-art{
  position:absolute;z-index:1;
  left:calc(var(--art-x) * var(--u));
  top:calc(3 * var(--u));
  width:calc(var(--art-w) * var(--u));
  height:auto;
  pointer-events:none;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
}
.onep-landing .card:hover .card-art{transform:translateY(calc(-5 * var(--u))) scale(1.03)}

.onep-landing .card--web{--art-x:200;--art-w:213}
.onep-landing .card--mobile{--art-x:220;--art-w:194}
.onep-landing .card--seo{--art-x:205;--art-w:207}
.onep-landing .card--content{--art-x:195;--art-w:218}
.onep-landing .card--ads{--art-x:190;--art-w:224}
.onep-landing .card--strategy{--art-x:210;--art-w:202}

/* clients row ------------------------------------------------------------ */
.onep-landing .clients-row{
  display:flex;align-items:center;
  margin-top:calc(38 * var(--u));
}

/* the logo strip spans the full container width */
.onep-landing .logos{
  flex:1 1 auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(24 * var(--u));
}
.onep-landing .logos img{
  height:calc(42 * var(--u));width:auto;
  opacity:.94;
  transition:opacity .3s, filter .3s;
}
.onep-landing .logos li:hover img{opacity:1;filter:brightness(1.45)}

/* --------------------------- floating whatsapp --------------------------- */
/* chrome, not artwork — sized in real px so it stays tappable at every width */
.onep-landing .wa-fab{
  position:fixed;z-index:80;
  right:26px;bottom:26px;
  width:58px;height:58px;
  display:grid;place-items:center;
  border-radius:50%;
  background:linear-gradient(150deg,#2AC24E 0%,#17A63C 100%);
  box-shadow:0 10px 28px -8px rgba(23,166,60,.75), inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s;
}
.onep-landing .wa-fab svg{width:32px;height:32px;color:#fff}
.onep-landing .wa-fab::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(42,194,78,.55);
  animation:waPulse 2.6s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes waPulse{
  0%{transform:scale(1);opacity:.7}
  70%,100%{transform:scale(1.45);opacity:0}
}
.onep-landing .wa-fab:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px -8px rgba(23,166,60,.85), inset 0 1px 0 rgba(255,255,255,.3);
}
@media (max-width:760px){
  .onep-landing .wa-fab{right:18px;bottom:18px;width:52px;height:52px}
  .onep-landing .wa-fab svg{width:29px;height:29px}
}

/* ----------------------------- cursor glow ------------------------------ */
/* one composited layer, moved with transform only — costs nothing to paint */
.onep-landing .cursor-glow{
  position:fixed;top:0;left:0;z-index:90;
  width:280px;height:280px;margin:-140px 0 0 -140px;
  border-radius:50%;
  pointer-events:none;
  opacity:0;
  background:radial-gradient(circle at center,
    rgba(64,112,255,.30) 0%, rgba(52,94,235,.14) 32%, rgba(40,76,210,.05) 55%, transparent 72%);
  will-change:transform;
  transition:opacity .35s ease;
}
.onep-landing .cursor-glow::after{
  content:"";position:absolute;left:50%;top:50%;
  width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;
  border:1.5px solid rgba(90,132,255,.55);
  box-shadow:0 0 12px rgba(64,112,255,.55);
}
.onep-landing .cursor-glow.is-on{opacity:1}
.onep-landing .cursor-glow.is-hot::after{
  border-color:rgba(140,175,255,.9);
  box-shadow:0 0 18px rgba(64,112,255,.85);
}

/* ------------------------------ partnership ------------------------------ */
.onep-landing .partner{
  position:relative;
  padding-top:calc(96 * var(--u));
  padding-bottom:calc(104 * var(--u));
}
.onep-landing .partner-inner{
  display:grid;
  /* the left column is kept tight so each step column stays wide enough for
     its copy to hold the intended three lines */
  grid-template-columns:calc(330 * var(--u)) minmax(0,1fr);
  gap:calc(60 * var(--u));
  align-items:start;
}

.onep-landing .eyebrow{
  display:block;
  font-size:calc(13 * var(--u));
  font-weight:700;
  letter-spacing:.13em;
  color:#4070FF;
}
.onep-landing .partner-title{
  margin-top:calc(16 * var(--u));
  font-size:calc(40 * var(--u));
  line-height:calc(46 * var(--u));
  font-weight:700;
  letter-spacing:-.015em;
}
.onep-landing .partner-lead{
  margin-top:calc(20 * var(--u));
  font-size:calc(15 * var(--u));
  line-height:calc(24 * var(--u));
  color:#9EA3AF;
}

.onep-landing .steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:calc(20 * var(--u));
  padding-top:calc(4 * var(--u));
}
.onep-landing .step{min-width:0}

.onep-landing .step-head{position:relative;display:flex;align-items:center}
/* flat, not a 3D bubble: one solid fill, no gradient and no inset highlight */
.onep-landing .node{
  flex:0 0 auto;
  width:calc(44 * var(--u));height:calc(44 * var(--u));
  border-radius:50%;
  display:grid;place-items:center;
  background:var(--brand);
  color:#fff;
}
.onep-landing .node svg{width:calc(21 * var(--u));height:calc(21 * var(--u))}

/* connector: hairline track, static midpoint diamond, arrow head, and the
   travelling light. Only transform/opacity animate, so it stays composited. */
/* The wire box is taller than the line it draws, so the travelling light can
   carry a real halo around its core. A 1px-tall box would clip the glow, and
   filter:blur() would cost a repaint per frame. */
/* Positioned absolutely rather than left as flex filler: as a flex child the
   wire could only reach its own column's edge, so the grid's 20u gap was added
   on top of its 12u margin and the connector sat 12u from one circle but 32u
   from the next. Anchoring both edges makes the gaps equal by construction —
   left 44u(node)+12u, right 12u short of the next node, i.e. 20u−12u past the
   column edge. */
.onep-landing .wire{
  position:absolute;
  top:50%;transform:translateY(-50%);
  left:calc(56 * var(--u));
  right:calc(-8 * var(--u));
  height:calc(10 * var(--u));
  overflow:hidden;
  background:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)) center/100% 1px no-repeat;
}
.onep-landing .wire::before{           /* midpoint diamond */
  content:"";position:absolute;left:50%;top:50%;
  width:calc(5 * var(--u));height:calc(5 * var(--u));
  margin:calc(-2.5 * var(--u)) 0 0 calc(-2.5 * var(--u));
  background:#4070FF;transform:rotate(45deg);
  box-shadow:0 0 calc(8 * var(--u)) rgba(64,112,255,.9);
}
/* The light is the same one the slider uses for its progress bar: a 2px line
   with the identical gradient that grows from the left via scaleX. Here the
   four segments draw one after another, hold, then clear together — so each
   keyframe set differs only in when its own fill happens. */
.onep-landing .wire .fill{
  position:absolute;left:0;top:50%;
  width:100%;height:calc(2 * var(--u));
  margin-top:calc(-1 * var(--u));
  transform:scaleX(0);transform-origin:left;
  background:linear-gradient(90deg,rgba(44,92,255,.3),var(--brand-400));
  animation:wireFill1 4.2s linear infinite;
}
.onep-landing .step:nth-child(2) .fill{animation-name:wireFill2}
.onep-landing .step:nth-child(3) .fill{animation-name:wireFill3}
.onep-landing .step:nth-child(4) .fill{animation-name:wireFill4}

@keyframes wireFill1{0%{transform:scaleX(0);opacity:1}17.5%,90%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
@keyframes wireFill2{0%,17.5%{transform:scaleX(0);opacity:1}35%,90%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
@keyframes wireFill3{0%,35%{transform:scaleX(0);opacity:1}52.5%,90%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}
@keyframes wireFill4{0%,52.5%{transform:scaleX(0);opacity:1}70%,90%{transform:scaleX(1);opacity:1}97%,100%{transform:scaleX(1);opacity:0}}

.onep-landing .num{
  display:block;
  margin-top:calc(20 * var(--u));
  font-size:calc(13 * var(--u));
  color:#6B7180;
}
.onep-landing .step h3{
  margin-top:calc(7 * var(--u));
  font-size:calc(18 * var(--u));
  line-height:calc(24 * var(--u));
  font-weight:700;
  letter-spacing:-.01em;
}
.onep-landing .step p{
  margin-top:calc(11 * var(--u));
  font-size:calc(13.5 * var(--u));
  line-height:calc(21 * var(--u));
  color:#8E94A1;
}
.onep-landing .step p b{font-weight:500;color:#E9EBF0}


/* ------------------------- section corner light -------------------------- */
/* Two soft radial corners per section so the page stops reading as flat black
   panels. Plain gradients, no filter: a blur over a box this size is exactly
   what cost us the frame budget in the hero. */
.onep-landing .services,
.onep-landing .partner,
.onep-landing .projects{isolation:isolate}
/* the corner glows overhang on purpose — clip them so they cannot widen the
   document (overflow:clip does not create a scroll container, so the mobile
   project carousel inside still scrolls on its own) */
.onep-landing .partner,
.onep-landing .projects{overflow:hidden;overflow:clip}

.onep-landing .services::before,.onep-landing .services::after,
.onep-landing .partner::before,.onep-landing .partner::after,
.onep-landing .projects::before,.onep-landing .projects::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:calc(820 * var(--u));height:calc(600 * var(--u));
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(44,92,255,.14) 0%, rgba(34,72,205,.06) 38%, transparent 72%);
}
.onep-landing .services::before,
.onep-landing .partner::before,
.onep-landing .projects::before{top:calc(-160 * var(--u));left:calc(-300 * var(--u))}

.onep-landing .services::after,
.onep-landing .partner::after,
.onep-landing .projects::after{bottom:calc(-180 * var(--u));right:calc(-280 * var(--u))}

/* alternate the accent side so consecutive sections don't mirror each other */
.onep-landing .partner::before{left:auto;right:calc(-320 * var(--u))}
.onep-landing .partner::after{right:auto;left:calc(-300 * var(--u))}

/* -------------------------------- projects ------------------------------- */
/* Mapped off a 1024px-wide reference whose content box was 882px, against this
   build's 1290u container — so every value below is (reference px * 1.4626). */
.onep-landing .projects{
  position:relative;
  padding-top:calc(96 * var(--u));
  padding-bottom:calc(112 * var(--u));
}
.onep-landing .projects-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:calc(40 * var(--u));
  margin-bottom:calc(20 * var(--u));
}
.onep-landing .projects-title{
  margin-top:calc(20 * var(--u));
  font-size:calc(35.6 * var(--u));
  line-height:1.16;
  font-weight:700;
  letter-spacing:-.028em;
}
.onep-landing .projects-all{
  display:inline-flex;align-items:center;
  gap:calc(13 * var(--u));
  padding-bottom:calc(5 * var(--u));
  font-size:calc(16 * var(--u));
  color:#E9EBF0;
}
.onep-landing .projects-all svg{
  width:calc(20 * var(--u));height:calc(20 * var(--u));
  transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.onep-landing .projects-all:hover svg{transform:translateX(calc(4 * var(--u)))}

.onep-landing .project-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:calc(15 * var(--u));
}
.onep-landing .project a{
  display:block;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
  border-radius:calc(14 * var(--u));
  background:linear-gradient(165deg,#0D0F17 0%,#090B11 100%);
  transition:transform .4s cubic-bezier(.2,.7,.3,1), border-color .4s, box-shadow .4s;
}
.onep-landing .project a:hover{
  transform:translateY(calc(-4 * var(--u)));
  border-color:rgba(255,255,255,.14);
  box-shadow:0 calc(24 * var(--u)) calc(50 * var(--u)) calc(-26 * var(--u)) rgba(0,0,0,.95);
}
.onep-landing .project-shot{display:block;height:calc(205 * var(--u));overflow:hidden}
.onep-landing .project-shot img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.onep-landing .project a:hover .project-shot img{transform:scale(1.05)}
.onep-landing .project-meta{
  display:block;
  padding:calc(16 * var(--u)) calc(19 * var(--u)) calc(14.5 * var(--u));
}
.onep-landing .project-meta b{
  display:block;
  font-size:calc(15.8 * var(--u));
  line-height:calc(20 * var(--u));
  font-weight:500;
  letter-spacing:-.012em;
}
.onep-landing .project-meta i{
  display:block;
  margin-top:calc(10 * var(--u));
  font-style:normal;
  font-size:calc(12.7 * var(--u));
  line-height:calc(17 * var(--u));
  color:#8E94A1;
}

.onep-landing .stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:calc(25 * var(--u));
  border:1px solid rgba(255,255,255,.07);
  border-radius:calc(18 * var(--u));
  background:linear-gradient(165deg,#0C0E16 0%,#080A10 100%);
}
.onep-landing .stats li{
  display:flex;align-items:center;
  gap:calc(20 * var(--u));
  padding:calc(29 * var(--u)) calc(40 * var(--u));
}
.onep-landing .stats li + li{border-left:1px solid rgba(255,255,255,.07)}
.onep-landing .stat-ico{flex:0 0 auto;width:calc(69 * var(--u));height:calc(69 * var(--u))}
.onep-landing .stats b{
  display:block;
  font-size:calc(29 * var(--u));
  line-height:calc(34 * var(--u));
  font-weight:500;
  letter-spacing:-.03em;
}
.onep-landing .stats i{
  display:block;
  margin-top:calc(5 * var(--u));
  font-style:normal;
  font-size:calc(13.6 * var(--u));
  line-height:calc(18 * var(--u));
  color:#8E94A1;
}

/* -------------------------------- footer --------------------------------- */
.onep-landing .site-footer{
  position:relative;isolation:isolate;overflow:hidden;overflow:clip;
  padding-top:calc(96 * var(--u));
  padding-bottom:calc(34 * var(--u));
}
/* same corner light as the other sections */
.onep-landing .site-footer::before,
.onep-landing .site-footer::after{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  width:calc(820 * var(--u));height:calc(600 * var(--u));
  background:radial-gradient(50% 50% at 50% 50%,
    rgba(44,92,255,.14) 0%, rgba(34,72,205,.06) 38%, transparent 72%);
}
.onep-landing .site-footer::before{top:calc(-240 * var(--u));left:calc(-300 * var(--u))}
.onep-landing .site-footer::after{bottom:calc(-260 * var(--u));right:calc(-260 * var(--u))}

/* closing call to action, built like the stats bar so it reads as a sibling */
.onep-landing .footer-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(48 * var(--u));
  padding:calc(40 * var(--u)) calc(46 * var(--u));
  border:1px solid rgba(255,255,255,.07);
  border-radius:calc(18 * var(--u));
  background:
    radial-gradient(70% 150% at 88% 50%,rgba(44,92,255,.16) 0%,transparent 62%),
    linear-gradient(160deg,#0A0C12 0%,#05070C 55%,#04060B 100%);
}
.onep-landing .footer-cta h2{
  margin-top:calc(14 * var(--u));
  font-size:calc(34 * var(--u));
  line-height:calc(42 * var(--u));
  font-weight:700;
  letter-spacing:-.022em;
}
.onep-landing .footer-cta p{
  margin-top:calc(12 * var(--u));
  font-size:calc(15 * var(--u));
  line-height:calc(23 * var(--u));
  color:#9EA3AF;
}
.onep-landing .footer-cta .btn-primary{flex:0 0 auto}

/* link grid */
.onep-landing .footer-main{
  display:grid;
  grid-template-columns:calc(360 * var(--u)) repeat(3,minmax(0,1fr));
  gap:calc(40 * var(--u));
  margin-top:calc(72 * var(--u));
}
.onep-landing .footer-brand p{
  margin-top:calc(20 * var(--u));
  max-width:calc(300 * var(--u));
  font-size:calc(14.7 * var(--u));
  line-height:calc(23 * var(--u));
  color:#9298A4;
}

.onep-landing .socials{
  display:flex;align-items:center;
  gap:calc(10 * var(--u));
  margin-top:calc(26 * var(--u));
}
.onep-landing .socials a{
  display:grid;place-items:center;
  width:calc(38 * var(--u));height:calc(38 * var(--u));
  border:1px solid rgba(255,255,255,.10);
  border-radius:50%;
  color:#9298A4;
  transition:color .25s, border-color .25s, background-color .25s, transform .25s cubic-bezier(.2,.7,.3,1);
}
.onep-landing .socials svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
.onep-landing .socials a:hover{
  color:#fff;border-color:rgba(91,132,255,.55);
  background:rgba(44,92,255,.12);
  transform:translateY(calc(-2 * var(--u)));
}

.onep-landing .footer-col h3{
  font-size:calc(15.5 * var(--u));
  font-weight:600;
  letter-spacing:-.01em;
}
.onep-landing .footer-col ul{
  display:flex;flex-direction:column;
  gap:calc(13 * var(--u));
  margin-top:calc(22 * var(--u));
}
.onep-landing .footer-col a,
.onep-landing .footer-col span{
  font-size:calc(14.5 * var(--u));
  line-height:calc(21 * var(--u));
  color:#9298A4;
  transition:color .22s;
}
.onep-landing .footer-col a:hover{color:#fff}
.onep-landing .footer-contact a{white-space:nowrap}

/* bottom bar */
.onep-landing .footer-bottom{
  display:flex;align-items:center;justify-content:space-between;
  gap:calc(24 * var(--u));
  margin-top:calc(64 * var(--u));
  padding-top:calc(28 * var(--u));
  border-top:1px solid rgba(255,255,255,.07);
  font-size:calc(13.5 * var(--u));
  color:#6B7180;
}
.onep-landing .footer-legal{display:flex;align-items:center;gap:calc(26 * var(--u))}
.onep-landing .footer-legal a{color:#6B7180;transition:color .22s}
.onep-landing .footer-legal a:hover{color:#C9CCD4}

/* ------------------------------- reveal --------------------------------- */
.onep-landing .reveal{
  opacity:0;transform:translateY(14px);
  transition:opacity .45s cubic-bezier(.2,.7,.3,1) var(--d,0s),
             transform .45s cubic-bezier(.2,.7,.3,1) var(--d,0s);
}
.onep-landing .reveal.is-in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .onep-landing .reveal{opacity:1;transform:none;transition:none}
  .onep-landing .dash-sweep.is-on,.onep-landing .pill-dot::after,.onep-landing .dash-progress i.is-running,.onep-landing .wa-fab::before,.onep-landing .wire .fill{animation:none}
  .onep-landing .wire .fill{transform:scaleX(1);opacity:1}
  .onep-landing .dash-slide{transition-duration:.01ms}
  .onep-landing .cursor-glow{display:none}
}

/* no cursor halo on touch / coarse pointers */
@media (hover:none),(pointer:coarse){
  .onep-landing .cursor-glow{display:none}
}

/* ------------------------------ responsive ------------------------------ */
/* Below 1100px the reference two-column hero stops working, so the page
   switches to a stacked layout with its own scale. `.lb` line breaks that
   reproduce the render's exact wrapping are dropped here. */
@media (max-width:1100px){
  /* footer */
  .onep-landing .site-footer{padding-top:72px;padding-bottom:28px}
  .onep-landing .footer-cta{
    flex-direction:column;align-items:flex-start;
    gap:26px;padding:30px;border-radius:16px;
  }
  .onep-landing .footer-cta h2{margin-top:12px;font-size:clamp(26px,3.4vw,32px);line-height:1.22}
  .onep-landing .footer-cta h2 br{display:none}
  .onep-landing .footer-cta p{margin-top:10px;font-size:14.5px;line-height:1.6}
  .onep-landing .footer-main{
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:36px 28px;margin-top:48px;
  }
  .onep-landing .footer-brand{grid-column:1 / -1}
  .onep-landing .footer-brand p{margin-top:16px;max-width:420px;font-size:14.5px;line-height:1.6}
  .onep-landing .socials{margin-top:20px;gap:9px}
  .onep-landing .socials a{width:38px;height:38px}
  .onep-landing .socials svg{width:18px;height:18px}
  .onep-landing .footer-col h3{font-size:15px}
  .onep-landing .footer-col ul{margin-top:16px;gap:11px}
  .onep-landing .footer-col a,.onep-landing .footer-col span{font-size:14px;line-height:1.45}
  .onep-landing .footer-bottom{margin-top:44px;padding-top:22px;font-size:13px}
  .onep-landing .footer-legal{gap:20px}

  :root{
    --u: min(1px, 0.11vw);
    --wrap: min(100% - 56px, 760px);
    --wrap-svc: min(100% - 56px, 760px);
    --header-h: 78px;
  }

  .onep-landing .lb{display:none}

  .onep-landing .main-nav{
    position:fixed;left:0;top:78px;transform:translateY(-14px);
    inset-inline:0;
    flex-direction:column;justify-content:flex-start;gap:0;
    padding:12px 28px 24px;
    background:#06060A;
    border-bottom:1px solid rgba(255,255,255,.08);
    opacity:0;pointer-events:none;
    transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .3s;
  }
  .onep-landing .main-nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
  .onep-landing .main-nav a{width:100%;padding:15px 0;font-size:17px;border-bottom:1px solid rgba(255,255,255,.06)}
  .onep-landing .main-nav a::after{display:none}
  .onep-landing .nav-toggle{display:flex}
  .onep-landing .header-cta{display:none}
  .onep-landing .brand-mark img{width:30px}

  .onep-landing .hero{padding-top:calc(78px + 28px);padding-bottom:72px}
  .onep-landing .hero-inner{grid-template-columns:minmax(0,1fr);gap:52px}
  /* stacked: the dashboard leads, copy and CTA follow */
  .onep-landing .hero-visual{order:-1}
  .onep-landing .pill{height:38px;padding-inline:16px;font-size:13.5px;gap:9px}
  .onep-landing .pill-dot{width:8px;height:8px}
  .onep-landing .hero-title{margin-top:20px;font-size:clamp(38px,6.2vw,54px);line-height:1.16}
  .onep-landing .hero-lead{margin-top:20px;font-size:16px;line-height:1.7}
  .onep-landing .hero-lead br{display:none}
  .onep-landing .btn-primary{height:56px;padding-inline:30px;font-size:16px;gap:12px}
  .onep-landing .btn-primary .ico-arrow{width:19px;height:19px}
  .onep-landing .hero-copy .btn-primary{margin-top:30px}
  .onep-landing .hero-terms{
    height:auto;padding:12px 16px;margin-top:18px;
    border-radius:12px;font-size:13.5px;gap:10px;
    flex-wrap:wrap;white-space:normal;
  }
  .onep-landing .hero-terms .term{gap:9px}
  .onep-landing .hero-terms .ico{width:16px;height:16px}
  .onep-landing .hero-terms .sep{width:11px;height:11px}

  .onep-landing .trust{margin-top:26px;gap:18px}
  .onep-landing .avatars{width:224px}
  .onep-landing .trust-text{font-size:15.5px;line-height:23px}
  .onep-landing .dash-slider{border-radius:14px}

  .onep-landing .services{padding-top:80px;padding-bottom:84px}
  .onep-landing .section-head{grid-template-columns:minmax(0,1fr);gap:18px;margin-bottom:30px}
  .onep-landing .pill-label{height:32px;padding-inline:14px;font-size:11.5px}
  .onep-landing .section-title{margin-top:18px;font-size:clamp(32px,5.4vw,44px);line-height:1.18}
  .onep-landing .section-desc{margin-top:0;font-size:15px;line-height:1.65;max-width:560px}

  .onep-landing .cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .onep-landing .card{min-height:290px;padding:24px;border-radius:16px}
  .onep-landing .card-ico{width:46px;height:46px;margin:0}
  .onep-landing .card h3{margin-top:18px;font-size:19px;line-height:1.25}
  .onep-landing .card p{margin-top:12px;font-size:13.5px;line-height:1.5;padding-right:96px}
  .onep-landing .card-arrow{width:34px;height:34px;margin-top:18px}
  .onep-landing .card-arrow svg{width:16px;height:16px}
  .onep-landing .card-art{left:auto;right:-6px;top:auto;bottom:14px;width:150px}
  .onep-landing .card--ads .card-art{width:158px}

  /* the five steps become a vertical timeline: node column, then copy, with
     the connector running down the gutter between consecutive nodes */
  .onep-landing .partner{padding-top:72px;padding-bottom:76px}
  .onep-landing .partner-inner{grid-template-columns:minmax(0,1fr);gap:40px}
  .onep-landing .eyebrow{font-size:12.5px}
  .onep-landing .partner-title{margin-top:14px;font-size:clamp(30px,5vw,40px);line-height:1.16}
  .onep-landing .partner-title br{display:none}
  .onep-landing .partner-lead{margin-top:16px;font-size:15px;line-height:1.6;max-width:520px}

  /* Vertical timeline: node column on the left, copy on the right. The number
     and title leadings are set so the pair is exactly as tall as the circle,
     which lines the two columns up without any magic offsets. */
  .onep-landing .steps{grid-template-columns:minmax(0,1fr);gap:0;padding-top:0}
  .onep-landing .step{
    display:grid;
    grid-template-columns:40px minmax(0,1fr);
    column-gap:16px;
    padding-bottom:22px;
  }
  .onep-landing .step:last-child{padding-bottom:0}
  .onep-landing .step-head{flex-direction:column;align-items:center;height:100%}
  .onep-landing .node{width:40px;height:40px}
  .onep-landing .node svg{width:19px;height:19px}

  /* anchored top and bottom for the same reason as on desktop: as flex filler
     it stopped at the step's content box, so the 22px padding-bottom landed
     between the arrow and the next circle. 48px = node 40 + 8 gap;
     -14px = 22px padding − 8px gap, so both ends clear a circle by 8px. */
  .onep-landing .wire{
    position:absolute;transform:none;
    left:50%;margin-left:-5px;right:auto;
    top:48px;bottom:-14px;
    width:10px;height:auto;
    flex:none;
    background:linear-gradient(rgba(255,255,255,.13),rgba(255,255,255,.13)) center/1px 100% no-repeat;
  }
  .onep-landing .step:last-child .wire{display:none}
  .onep-landing .wire::before{
    width:5px;height:5px;margin:-2.5px 0 0 -2.5px;
  }
  /* same growing line, drawn downwards */
  .onep-landing .wire .fill{
    left:50%;top:0;
    width:2px;height:100%;
    margin:0 0 0 -1px;
    transform:scaleY(0);transform-origin:top;
    background:linear-gradient(180deg,rgba(44,92,255,.3),var(--brand-400));
    animation-name:wireFillY1;
  }
  .onep-landing .step:nth-child(2) .fill{animation-name:wireFillY2}
  .onep-landing .step:nth-child(3) .fill{animation-name:wireFillY3}
  .onep-landing .step:nth-child(4) .fill{animation-name:wireFillY4}

  @keyframes wireFillY1{0%{transform:scaleY(0);opacity:1}17.5%,90%{transform:scaleY(1);opacity:1}97%,100%{transform:scaleY(1);opacity:0}}
  @keyframes wireFillY2{0%,17.5%{transform:scaleY(0);opacity:1}35%,90%{transform:scaleY(1);opacity:1}97%,100%{transform:scaleY(1);opacity:0}}
  @keyframes wireFillY3{0%,35%{transform:scaleY(0);opacity:1}52.5%,90%{transform:scaleY(1);opacity:1}97%,100%{transform:scaleY(1);opacity:0}}
  @keyframes wireFillY4{0%,52.5%{transform:scaleY(0);opacity:1}70%,90%{transform:scaleY(1);opacity:1}97%,100%{transform:scaleY(1);opacity:0}}

  /* 18px + 22px == the 40px circle, so the copy block starts flush with it */
  .onep-landing .num{margin-top:0;font-size:12.5px;line-height:18px}
  .onep-landing .step h3{margin-top:0;font-size:16.5px;line-height:22px}
  .onep-landing .step p{margin-top:9px;font-size:13.5px;line-height:1.6}

  .onep-landing .clients-row{margin-top:36px}
  /* wrapped rows read better centred than justified — a trailing row of two
     logos pushed to the edges looks broken */
  .onep-landing .logos{flex-wrap:wrap;justify-content:center;gap:22px 34px}
  .onep-landing .logos img{height:34px}

  /* 5 across only works on a wide screen; 3 then 2 keeps the shots readable */
  .onep-landing .projects{padding-top:76px;padding-bottom:80px}
  .onep-landing .projects-head{gap:24px;margin-bottom:22px}
  .onep-landing .projects-title{margin-top:14px;font-size:clamp(28px,4.4vw,36px);line-height:1.18}
  .onep-landing .projects-all{font-size:15px;gap:10px;padding-bottom:2px}
  .onep-landing .projects-all svg{width:18px;height:18px}
  .onep-landing .project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
  .onep-landing .project a{border-radius:14px}
  .onep-landing .project-shot{height:172px}
  .onep-landing .project-meta{padding:16px 16px 18px}
  .onep-landing .project-meta b{font-size:16px;line-height:1.3}
  .onep-landing .project-meta i{margin-top:6px;font-size:13.5px;line-height:1.35}

  .onep-landing .stats{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px;border-radius:16px}
  .onep-landing .stats li{gap:14px;padding:22px 20px}
  .onep-landing .stats li + li{border-left:0}
  /* 2x2 needs a column rule and a row rule instead of one divider per item */
  .onep-landing .stats li:nth-child(odd){border-right:1px solid rgba(255,255,255,.07)}
  .onep-landing .stats li:nth-child(n+3){border-top:1px solid rgba(255,255,255,.07)}
  .onep-landing .stat-ico{width:52px;height:52px}
  .onep-landing .stats b{font-size:24px}
  .onep-landing .stats i{margin-top:4px;font-size:13px}
}

@media (max-width:760px){
  /* footer */
  .onep-landing .site-footer{padding-top:60px}
  .onep-landing .footer-cta{padding:26px 22px}
  .onep-landing .footer-cta .btn-primary{width:100%}
  .onep-landing .footer-main{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 20px;margin-top:40px}
  .onep-landing .footer-contact{grid-column:1 / -1}
  .onep-landing .footer-contact ul{gap:12px}
  .onep-landing .footer-bottom{
    flex-direction:column;align-items:flex-start;gap:14px;
    margin-top:36px;
  }

  .onep-landing .projects{padding-top:62px;padding-bottom:66px}
  .onep-landing .projects-head{flex-direction:column;align-items:flex-start;gap:14px}
  /* a snap carousel reads better than a cramped 2-up, and it bleeds to the
     screen edges while the first card still lines up with the container */
  .onep-landing .project-grid{
    display:flex;gap:12px;
    grid-template-columns:none;
    overflow-x:auto;overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    margin-inline:-20px;
    padding:0 20px 4px;
  }
  .onep-landing .project-grid::-webkit-scrollbar{display:none}
  .onep-landing .project{flex:0 0 74%;scroll-snap-align:start}
  .onep-landing .project-shot{height:124px}
  .onep-landing .project-meta{padding:13px 13px 15px}
  .onep-landing .project-meta b{font-size:15px;line-height:1.3}
  .onep-landing .project-meta i{margin-top:7px;font-size:13px;line-height:1.35}
  .onep-landing .stats li{flex-direction:column;align-items:flex-start;gap:10px;padding:18px 16px}
  .onep-landing .stat-ico{width:44px;height:44px}
  .onep-landing .stats b{font-size:21px}
  :root{--wrap:calc(100% - 40px);--wrap-svc:calc(100% - 40px)}

  .onep-landing .hero{padding-top:calc(78px + 18px);padding-bottom:54px}
  /* no blue wash behind the hero on phones — it only muddies a small screen */
  .onep-landing .hero-bg{display:none}
  .onep-landing .hero-visual::before{display:none}
  .onep-landing .hero-inner{gap:44px}
  .onep-landing .hero-title{font-size:clamp(32px,8.6vw,42px);line-height:1.14;letter-spacing:-.03em}
  .onep-landing .hero-lead{font-size:15.5px}
  .onep-landing .hero-copy .btn-primary{width:100%}
  .onep-landing .trust{gap:14px}
  .onep-landing .avatars{width:180px}
  .onep-landing .trust-text{font-size:14px;line-height:20px}
  .onep-landing .trust-text br{display:none}

  .onep-landing .services{padding-top:64px;padding-bottom:70px}
  .onep-landing .section-title{font-size:clamp(28px,8vw,36px)}
  .onep-landing .section-title br{display:none}
  .onep-landing .cards{grid-template-columns:minmax(0,1fr);gap:14px}
  .onep-landing .card{min-height:0;padding:22px}
  .onep-landing .card h3{font-size:18px}
  .onep-landing .card h3 br{display:none}
  .onep-landing .card p{padding-right:108px}
  .onep-landing .card-art{width:136px;bottom:12px;right:-8px}
  .onep-landing .card--ads .card-art{width:144px}
  .onep-landing .logos{gap:18px 26px}
  .onep-landing .logos img{height:28px}
}

@media (max-width:400px){
  .onep-landing .card p{padding-right:92px}
  .onep-landing .card-art{width:116px}
  .onep-landing .card--ads .card-art{width:124px}
}