/* ==========================================================================
   GRV landing page theme  —  scoped to body.lp-v2, loaded only on those pages
   ==========================================================================
   Ad traffic arrives cold. These pages get their own look rather than the
   site's: one continuous dark canvas instead of the site's light one, a single
   teal accent, glass surfaces, and more motion than the site pages carry.

   Scoped under .lp-v2 on purpose. The site's own pages, and the other landing
   pages, keep the light theme in grv.css until we decide to move them too.

   Everything that moves here uses transform / opacity / filter only, so it
   stays on the compositor. The whole file goes still under
   prefers-reduced-motion at the bottom.
   ========================================================================== */

body.lp-v2{
  --ink:#04101B;          /* off-black, tinted navy: never #000 */
  --ink-2:#081A29;
  --ink-3:#0D2738;
  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.20);
  --ac:#22B8CC;           /* the one accent. no second colour anywhere */
  --ac-2:#7FE7F2;
  --ac-wash:rgba(34,184,204,.13);
  --fg:#EAF4F7;
  --fg-2:#B4C9D5;
  --fg-mut:#7B94A3;
  --glass:linear-gradient(160deg,rgba(255,255,255,.078),rgba(255,255,255,.022));
  --edge:inset 0 1px 0 0 rgba(255,255,255,.14);
  --sh-lp:0 2px 8px rgba(2,10,18,.45), 0 28px 64px rgba(2,10,18,.55);
  --sh-ac:0 16px 40px rgba(34,184,204,.30);
  --r:26px;
  --z-grain:60; --z-nav:80; --z-bar:90;

}

/* grv.css sets `html body{background:...!important}` to beat Astra, so the
   landing canvas has to match that weight to win. */
html body.lp-v2{background:var(--ink)!important;color:var(--fg);}

/* A single continuous canvas. The site alternates light sections with navy
   ones; here that would read as a copy-paste seam, so every section is
   transparent and the depth comes from the glows below. */
.lp-v2 .sec,
.lp-v2 .navy-s{background:transparent!important;}
.lp-v2 .navy-s{padding-top:24px;}

/* Film grain over the whole page. Flat dark backgrounds band badly on cheap
   panels and read as sterile; a little noise fixes both. */
.lp-v2::after{
  content:"";position:fixed;inset:0;z-index:var(--z-grain);pointer-events:none;
  opacity:.038;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.lp-v2 .d2{letter-spacing:-.042em;line-height:.98;text-wrap:balance;}
.lp-v2 .h2{color:var(--fg);letter-spacing:-.032em;text-wrap:balance;}
.lp-v2 .h3{color:var(--fg);letter-spacing:-.018em;}
.lp-v2 p,.lp-v2 .sm,.lp-v2 li{color:var(--fg-2);}
.lp-v2 .lead{color:var(--fg-2);}
.lp-v2 .measure,.lp-v2 .prose p{max-width:64ch;text-wrap:pretty;}
.lp-v2 .xs{color:var(--fg-mut);}
.lp-v2 .lab{color:var(--ac);letter-spacing:.14em;}
.lp-v2 a{color:var(--ac-2);}

/* Numbers line up column to column instead of dancing. */
.lp-v2 .lp-stat .n,.lp-v2 .st .n,.lp-v2 .lp-num{font-variant-numeric:tabular-nums;}

/* ---------- hero ---------- */
/* Three drifting blobs instead of one static radial wash, so the first screen
   is never a still image. Blur is doing the work, not extra markup. */
.lp-aurora{position:absolute;inset:-20% -10%;pointer-events:none;overflow:hidden;}
.lp-aurora span{position:absolute;display:block;border-radius:50%;filter:blur(90px);opacity:.55;
  will-change:transform;}
.lp-aurora .a1{width:46vw;height:46vw;left:-6%;top:-8%;background:rgba(34,184,204,.42);
  animation:lpDrift1 22s ease-in-out infinite;}
.lp-aurora .a2{width:38vw;height:38vw;right:-4%;top:6%;background:rgba(18,143,163,.40);
  animation:lpDrift2 27s ease-in-out infinite;}
.lp-aurora .a3{width:34vw;height:34vw;left:34%;bottom:-18%;background:rgba(127,231,242,.20);
  animation:lpDrift3 31s ease-in-out infinite;}
@keyframes lpDrift1{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(6%,8%,0) scale(1.14);}}
@keyframes lpDrift2{0%,100%{transform:translate3d(0,0,0) scale(1.06);}50%{transform:translate3d(-7%,5%,0) scale(.94);}}
@keyframes lpDrift3{0%,100%{transform:translate3d(0,0,0) scale(1);}50%{transform:translate3d(5%,-7%,0) scale(1.12);}}

/* Faint engineering grid, masked so it fades out rather than stopping at an
   edge. */
.lp-grid{position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:68px 68px;
  -webkit-mask-image:radial-gradient(120% 90% at 20% 0%,#000 25%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 20% 0%,#000 25%,transparent 78%);}

/* Headline words rise in sequence. Set by grv-lp.js, which splits the heading
   into spans; without JS the text is simply visible. */
.lp-v2 .lp-word{display:inline-block;}
.grv-js .lp-v2 .lp-split .lp-word{opacity:0;transform:translate3d(0,.5em,0);
  animation:lpWordUp .85s var(--ease) forwards;animation-delay:var(--wd,0ms);}
@keyframes lpWordUp{to{opacity:1;transform:none;}}

/* The serif accent word carries a slow sheen so the eye lands on it. */
.lp-v2 .d-serif{background:linear-gradient(100deg,var(--ac) 0%,var(--ac-2) 38%,var(--ac) 76%);
  background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:lpSheen 7s linear infinite;}
@keyframes lpSheen{to{background-position:220% 0;}}

/* ---------- glass surfaces ---------- */
.lp-v2 .lp-formcard,
.lp-v2 .hubc,
.lp-v2 .st,
.lp-v2 .lp-card{
  background:var(--glass);
  border:1px solid var(--line);
  box-shadow:var(--sh-lp),var(--edge);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-radius:var(--r);
  color:var(--fg);
}
.lp-v2 .lp-formcard{border-radius:32px;}

/* Cursor spotlight on the card edge. --mx/--my are written by grv-lp.js; the
   card is inert until the pointer is actually over it. */
.lp-v2 .lp-spot{position:relative;isolation:isolate;overflow:hidden;}
.lp-v2 .lp-spot::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;
  transition:opacity .45s var(--ease);
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%),rgba(34,184,204,.20),transparent 62%);
}
.lp-v2 .lp-spot:hover::before{opacity:1;}
.lp-v2 .lp-spot:hover{border-color:rgba(34,184,204,.42);}

/* ---------- buttons ---------- */
.lp-v2 .btn{transition:transform .28s var(--ease),box-shadow .28s var(--ease),background .28s var(--ease);}
.lp-v2 .btn-t{background:var(--ac);color:#04212A!important;box-shadow:var(--sh-ac);}
.lp-v2 .btn-t:hover{transform:translateY(-2px);box-shadow:0 22px 52px rgba(34,184,204,.42);}
.lp-v2 .btn-t:active{transform:translateY(0) scale(.985);}
.lp-v2 .btn-g{background:rgba(255,255,255,.06);border:1px solid var(--line-2);color:var(--fg)!important;
  backdrop-filter:blur(6px);}
.lp-v2 .btn-g:hover{background:rgba(255,255,255,.11);transform:translateY(-2px);}
.lp-v2 .btn-g:active{transform:translateY(0) scale(.985);}

/* Keyboard users get a ring everywhere, not just on inputs. */
.lp-v2 a:focus-visible,.lp-v2 button:focus-visible,
.lp-v2 input:focus-visible,.lp-v2 select:focus-visible,.lp-v2 textarea:focus-visible,
.lp-v2 summary:focus-visible{outline:2px solid var(--ac-2);outline-offset:3px;border-radius:8px;}

/* ---------- checks + stats ---------- */
.lp-v2 .checks li{color:var(--fg-2);}
.lp-v2 .checks .ck{background:var(--ac-wash);color:var(--ac-2);border:1px solid rgba(34,184,204,.34);}
.lp-v2 .lp-stats{border-top:1px solid var(--line);padding-top:22px;}
.lp-v2 .lp-stat .n{color:#fff;}
.lp-v2 .lp-stat .t{color:var(--fg-mut);}

/* ---------- scroll progress ---------- */
.lp-prog{position:fixed;left:0;top:0;height:2px;z-index:var(--z-bar);
  width:100%;transform:scaleX(var(--p,0));transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ac),var(--ac-2));
  box-shadow:0 0 14px rgba(34,184,204,.6);pointer-events:none;}

/* ---------- nav, on the dark canvas ---------- */
.lp-v2 .lp-nav.is-stuck{background:rgba(4,16,27,.82);box-shadow:0 10px 34px rgba(2,10,18,.6);}

/* ---------- city marquee ---------- */
/* Replaces a flat sentence listing ten cities. Duplicated track, translated by
   exactly -50%, so the loop has no seam. aria-hidden on the copy. */
.lp-marq{position:relative;overflow:hidden;padding:20px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);}
.lp-marq-track{display:flex;width:max-content;animation:lpMarq 38s linear infinite;}
.lp-marq:hover .lp-marq-track{animation-play-state:paused;}
.lp-marq-track span{display:inline-flex;align-items:center;gap:18px;padding:0 18px;
  font-size:1.05rem;font-weight:600;color:var(--fg-2);white-space:nowrap;letter-spacing:-.01em;}
.lp-marq-track span::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);opacity:.7;}
@keyframes lpMarq{to{transform:translate3d(-50%,0,0);}}

/* ---------- services bento ----------
   A tall lead card beside three compact ones, rather than four equal columns.

   Two real columns, not 12-column spans. The span version put the four cards
   at three different widths and pushed the last one onto an orphan third row,
   because a 4-wide card cannot follow a 6-wide one on the same line. Here the
   right hand cards live in their own flex column, so the two sides always
   finish level and the three small cards always match each other. */
.lp-bento{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:20px;align-items:stretch;}
.lp-bento-col{display:flex;flex-direction:column;gap:20px;}
.lp-bento-col .lp-card{flex:1 1 auto;}

.lp-card{padding:30px;display:flex;flex-direction:column;gap:12px;}
.lp-card p{margin:0;}
.lp-card .lp-ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:var(--ac-wash);border:1px solid rgba(34,184,204,.30);color:var(--ac-2);
  transition:transform .4s var(--ease);}
.lp-card:hover .lp-ico{transform:translateY(-3px) rotate(-6deg);}

/* The lead card is taller than its copy needs, so it carries the detail that
   would otherwise be a wall of text somewhere else. */
.lp-inc{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:11px;}
.lp-inc li{position:relative;padding-left:26px;font-size:.95rem;color:var(--fg-2);}
.lp-inc li::before{content:"";position:absolute;left:1px;top:.5em;width:8px;height:8px;
  border-radius:50%;background:var(--ac);box-shadow:0 0 0 3px var(--ac-wash);}

/* Pinned to the bottom, so it sits on the card edge rather than floating mid-air. */
.lp-card .lp-more{margin-top:auto;padding-top:18px;color:var(--ac-2);font-weight:600;font-size:.93rem;
  display:inline-flex;align-items:center;gap:8px;text-decoration:none;}
.lp-card .lp-more svg{transition:transform .3s var(--ease);}
.lp-card:hover .lp-more svg{transform:translateX(4px);}

/* ---------- timeline ---------- */
/* The three-across step row is replaced by a rail whose line draws itself as
   the section scrolls. --fill is written by grv-lp.js. */
.lp-rail{position:relative;padding-left:60px;}
.lp-rail::before{content:"";position:absolute;left:21px;top:8px;bottom:8px;width:2px;
  background:var(--line);border-radius:2px;}
.lp-rail::after{content:"";position:absolute;left:21px;top:8px;width:2px;border-radius:2px;
  height:calc(var(--fill,0) * (100% - 16px));
  background:linear-gradient(180deg,var(--ac),var(--ac-2));
  box-shadow:0 0 14px rgba(34,184,204,.55);}
.lp-step{position:relative;padding:0 0 46px;}
.lp-step:last-child{padding-bottom:0;}
.lp-step .lp-dot{position:absolute;left:-60px;top:-2px;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-weight:700;font-size:.9rem;
  background:var(--ink-2);border:1px solid var(--line-2);color:var(--fg-mut);
  font-variant-numeric:tabular-nums;
  transition:background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease),box-shadow .45s var(--ease);}
.lp-step.in .lp-dot{background:var(--ac);border-color:var(--ac);color:#04212A;box-shadow:var(--sh-ac);}
.lp-step h3{margin:0 0 8px;font-size:1.32rem;letter-spacing:-.02em;color:var(--fg);}
.lp-step p{margin:0;max-width:56ch;}

/* ---------- coverage ---------- */
.lp-cover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center;}
.lp-cities{display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0;list-style:none;}
.lp-cities li{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--line);font-size:.93rem;color:var(--fg-2);
  transition:transform .3s var(--ease),background .3s var(--ease),border-color .3s var(--ease);}
.lp-cities li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--ac);flex:none;}
.lp-cities li:hover{transform:translateY(-2px);background:rgba(34,184,204,.12);border-color:rgba(34,184,204,.4);}
.lp-shot{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/3;
  box-shadow:var(--sh-lp);border:1px solid var(--line);}
.lp-shot img{width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease);}
.lp-shot:hover img{transform:scale(1.05);}
/* Wipe reveal, matching the site's story frames. */
.grv-js .lp-shot{clip-path:inset(0 0 0 100% round 26px);transition:clip-path 1.2s var(--ease);}
.grv-js .lp-shot.in{clip-path:inset(0 0 0 0 round 26px);}

/* ---------- answers ---------- */
/* Two plain columns rather than an accordion: four short answers are faster to
   read than to click open. */
.lp-qa{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 40px;}
.lp-qa div{padding:22px 0;border-top:1px solid var(--line);}
.lp-qa h3{margin:0 0 7px;font-size:1.04rem;color:var(--fg);letter-spacing:-.015em;}
.lp-qa p{margin:0;font-size:.95rem;}

/* ---------- closing panel ---------- */
.lp-v2 .panel{background:linear-gradient(150deg,var(--ink-3),var(--ink-2));
  border:1px solid var(--line);box-shadow:var(--sh-lp);position:relative;overflow:hidden;}
.lp-v2 .panel::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 120% at 50% 0%,rgba(34,184,204,.22),transparent 62%);}
.lp-v2 .panel > *{position:relative;}

/* ---------- footer ---------- */
.lp-v2 .lp-foot{border-top:1px solid var(--line);padding-top:24px;
  display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;align-items:center;}
.lp-v2 .lp-foot a{color:var(--fg-2);text-decoration:none;}
.lp-v2 .lp-foot a:hover{color:var(--ac-2);}

/* Keyboard users land here first. */
.lp-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 20px;border-radius:0 0 12px 0;
  background:var(--ac);color:#04212A;font-weight:700;text-decoration:none;}
.lp-skip:focus{left:0;}

/* ---------- responsive ---------- */
/* One column early: the lead card needs room for its list, and two narrow
   columns would squeeze both sides. */
@media (max-width:1040px){
  .lp-bento{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .lp-cover{grid-template-columns:1fr;gap:34px;}
  .lp-qa{grid-template-columns:1fr;gap:0;}
  .lp-aurora span{filter:blur(64px);}
}
@media (max-width:620px){
  .lp-bento,.lp-bento-col{gap:14px;}
  .lp-card{padding:24px;}
  .lp-rail{padding-left:50px;}
  .lp-rail::before,.lp-rail::after{left:17px;}
  .lp-step .lp-dot{left:-50px;width:36px;height:36px;font-size:.82rem;}
  .lp-marq-track span{font-size:.95rem;padding:0 13px;}
}




/* ---------- how we work: rail + running fan ----------
   The steps only filled the left half, which left a large hole on the right
   at desktop widths. The fan turns for as long as the section is on screen,
   with loose parts drifting around it. Decorative only, so the whole thing is
   aria-hidden and adds nothing for a screen reader to read out. */
.lp-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);
  gap:64px;align-items:center;}
.lp-art{position:relative;}
.lp-art svg{width:100%;height:auto;display:block;overflow:visible;}

/* transform-box keeps the rotation centred on the blades' own box rather than
   on the whole SVG canvas. */
.lp-fan{transform-origin:210px 180px;animation:lpFanSpin 3.4s linear infinite;}
@keyframes lpFanSpin{to{transform:rotate(360deg);}}

.lp-art-glow{animation:lpArtPulse 6s ease-in-out infinite;transform-origin:210px 180px;}
@keyframes lpArtPulse{
  0%,100%{opacity:.5;transform:scale(1);}
  50%{opacity:.85;transform:scale(1.06);}
}

/* The loose parts drift on their own timings, so they never line up and start
   looking like one block moving. */
.lp-part{transform-box:fill-box;transform-origin:center;}
.lp-part-1{animation:lpPartFloat 6.5s ease-in-out infinite;}
.lp-part-2{animation:lpPartFloat 8s ease-in-out infinite -2.4s;}
.lp-part-3{animation:lpPartFloat 7.2s ease-in-out infinite -4.1s;}
.lp-part-4{animation:lpPartFloat 9s ease-in-out infinite -1.3s;}
@keyframes lpPartFloat{
  0%,100%{transform:translateY(0) rotate(0deg);}
  50%{transform:translateY(-11px) rotate(1.6deg);}
}

@media (max-width:1100px){
  .lp-how{grid-template-columns:minmax(0,1fr) minmax(0,330px);gap:40px;}
}
/* Below this the art would be squeezed next to the text, so it goes under the
   steps at a size where the fan still reads. */
@media (max-width:860px){
  .lp-how{grid-template-columns:1fr;gap:34px;}
  .lp-art{max-width:320px;margin:0 auto;}
}
/* ---------- the background never stops ----------
   Three layers running the whole time someone is on the hero, so the page
   reads as something built rather than as a screenshot:

     1. the node canvas grv-lp.js builds (drifting points joined by lines)
     2. the engineering grid, sliding one cell at a time
     3. a light sweep crossing the hero

   The aurora blobs already drift on their own above. All of this is either
   compositor work or one throttled canvas, and all of it stops under
   prefers-reduced-motion. */
.lp-v2 .lp-net{position:absolute;inset:0;pointer-events:none;opacity:.9;}

.lp-v2 .lp-grid{animation:lpGridDrift 26s linear infinite;}
@keyframes lpGridDrift{to{background-position:68px 68px,68px 68px;}}

.lp-v2 .navy-s{position:relative;}
.lp-v2 .navy-s::after{content:"";position:absolute;top:0;bottom:0;left:0;width:34%;
  pointer-events:none;z-index:1;
  background:linear-gradient(104deg,transparent,rgba(127,231,242,.075),transparent);
  animation:lpSweep 11s ease-in-out infinite;}
@keyframes lpSweep{
  0%{transform:translate3d(-130%,0,0);}
  60%,100%{transform:translate3d(330%,0,0);}
}

/* ---------- nav on small screens ----------
   grv.css hides the link row below its breakpoint, which leaves a phone
   visitor with no way into the rest of the site. Here the links move onto a
   second line that scrolls sideways, so the list stays reachable without
   stealing height from the call button. */
@media (max-width:860px){
  .lp-v2 .lp-nav-in{flex-wrap:wrap;gap:10px 14px;}
  .lp-v2 .lp-nav-call{margin-left:auto;}
  .lp-v2 .lp-nav-links{display:flex;order:3;width:100%;margin-left:0;gap:20px;
    overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    padding-bottom:2px;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);
            mask-image:linear-gradient(90deg,#000 88%,transparent);}
  .lp-v2 .lp-nav-links::-webkit-scrollbar{display:none;}
  .lp-v2 .lp-nav-links a{white-space:nowrap;font-size:.88rem;}
  .lp-v2 .lp-nav.is-stuck{padding:7px 0;}
}
@media (max-width:420px){
  .lp-v2 .lp-nav-call{padding:9px 14px;font-size:.86rem;}
  .lp-v2 .lp-nav-brand img{height:32px;}
}

/* ---------- motion off ---------- */
@media (prefers-reduced-motion:reduce){
  .lp-aurora span,
  .lp-fan,
  .lp-part,
  .lp-art-glow,
  .lp-v2 .lp-grid,
  .lp-marq-track,
  .lp-v2 .d-serif,
  .grv-js .lp-v2 .lp-split .lp-word{animation:none!important;}
  .lp-v2 .d-serif{background:none;-webkit-text-fill-color:var(--ac);color:var(--ac);}
  .grv-js .lp-v2 .lp-split .lp-word{opacity:1;transform:none;}
  .grv-js .lp-shot,.grv-js .lp-shot.in{clip-path:none;transition:none;}
  .lp-prog,.lp-v2 .lp-net,.lp-v2 .navy-s::after{display:none;}
  .lp-v2 *{transition-duration:.01ms!important;}
}