/* =============================================================
   HOUSE TYPE
   PP Valve (display), self-hosted as woff2. The family ships only
   three weights — Extralight 200, Medium 500, Extrabold 800 — so
   there is no 400 or 700 cut. A heading asking for 700 resolves to
   800, which is the intended display bold.

   PP Object Sans (body) is NOT bundled. Until those files exist the
   body stack falls through to Space Grotesk, which is why --body
   still lists it. Drop PPObjectSans-*.woff2 in /fonts and uncomment
   the block below to switch body copy over.
   ============================================================= */
@font-face{font-family:'PP Valve';src:url('fonts/PPValve-Plain-Extralight.woff2') format('woff2');
  font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'PP Valve';src:url('fonts/PPValve-Plain-ExtralightItalic.woff2') format('woff2');
  font-weight:200;font-style:italic;font-display:swap}
@font-face{font-family:'PP Valve';src:url('fonts/PPValve-Plain-Medium.woff2') format('woff2');
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'PP Valve';src:url('fonts/PPValve-Plain-MediumItalic.woff2') format('woff2');
  font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'PP Valve';src:url('fonts/PPValve-Plain-Extrabold.woff2') format('woff2');
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'PP Valve';src:url('fonts/PPValve-Plain-ExtraboldItalic.woff2') format('woff2');
  font-weight:800;font-style:italic;font-display:swap}

/*
@font-face{font-family:'PP Object Sans';src:url('fonts/PPObjectSans-Regular.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'PP Object Sans';src:url('fonts/PPObjectSans-Bold.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap}
*/

:root{
  --blue:#1E22AA;
  --blue-deep:#171A85;
  --blue-tint:#F2F2FB;
  --lime:#44D62C;
  --lime-deep:#37B822;
  /* purple is the third-option accent. Reserved for: the Saudi pill, and the
     asterisk / required-field marks. Deliberately not used for structure. */
  --purple:#963CBD;
  --charcoal:#2D2926;
  --charcoal-soft:#4A4440;
  --pearl:#E6E7E8;
  --lavender:#EDE6F7;
  --white:#FFFFFF;
  --rule:#D6D7DB;
  --muted:#6A6A6A;
  --err:#C0271B;

  --display:'PP Valve','Space Grotesk',system-ui,sans-serif;
  --body:'PP Object Sans','Space Grotesk',system-ui,sans-serif;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1240px;

  /* one motion vocabulary. container hovers use the slow --t-card on purpose:
     big surfaces moving fast read as twitchy. */
  --ease:cubic-bezier(.22,.7,.25,1);
  --ease-soft:cubic-bezier(.16,.84,.28,1);
  --t-fast:.2s;
  --t-mid:.45s;
  --t-card:.65s;
  --t-slow:.85s;
}

/* Cross-document view transition, so Get started dissolves into the form
   instead of hard-cutting. Browsers without support fall back to the
   .no-vt fade below, applied by script. */
@view-transition{navigation:auto}
::view-transition-old(root),::view-transition-new(root){animation-duration:.42s}
::view-transition-old(root){animation-timing-function:cubic-bezier(.4,0,1,1)}
::view-transition-new(root){animation-timing-function:cubic-bezier(0,0,.2,1)}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}

/* fallback path: fade the outgoing page, fade in the incoming one */
@media (prefers-reduced-motion:no-preference){
  html.no-vt body{animation:pagein .42s var(--ease) both}
  html.no-vt.leaving body{animation:pageout .26s var(--ease) both}
}
@keyframes pagein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes pageout{from{opacity:1;transform:none}to{opacity:0;transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}

body{
  font-family:var(--body);
  color:var(--charcoal);
  background:var(--white);
  font-size:17px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}

h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.02}
h2{font-size:clamp(30px,4.4vw,52px);text-transform:uppercase;letter-spacing:-.015em;text-wrap:balance}
h3{font-size:19px;letter-spacing:-.01em;line-height:1.2}
p{max-width:62ch}
a{color:inherit}

/* ---------- one micro-label recipe, shared by every small caps label ---------- */
.eyebrow,.step .n,.opt .n,.svc-col h3,.backlink,.pill,.rs-n,.field > label,.kicker{
  font-family:var(--body);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
}

/* ---------- scroll progress ---------- */
.sprog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:90;
  background:transparent;pointer-events:none}
.sprog i{display:block;height:100%;width:0;background:var(--lime);
  transform-origin:left center;transition:width .1s linear}

/* ---------- signature mark: lime arrow disc, lifted from the KVs ---------- */
.arrow{
  display:inline-flex;align-items:center;justify-content:center;
  width:1.05em;height:1.05em;border-radius:50%;
  background:var(--lime);color:var(--blue);
  font-size:.62em;flex:none;vertical-align:.12em;
  margin-right:.28em;
}
.arrow svg{width:58%;height:58%;display:block}

/* ---------- eyebrow ---------- */
.eyebrow{
  font-size:12px;
  color:var(--blue);display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
.eyebrow::after{content:"";height:2px;background:var(--lime);flex:1;max-width:56px}
.on-dark .eyebrow{color:var(--lime)}
.on-dark .eyebrow::after{background:rgba(255,255,255,.35)}

/* ---------- nav ----------
   Static, in the normal flow. The header must never sit over the hero key
   visual, so the persistent CTA lives in .dock instead, which only appears
   once the hero has scrolled past. */
.nav{position:relative;z-index:20;background:var(--white);border-bottom:1px solid var(--rule)}
.nav-in{max-width:var(--maxw);margin:0 auto;padding:16px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.brand{font-family:var(--display);font-weight:700;font-size:20px;color:var(--blue);
  letter-spacing:-.02em;line-height:1.05}
.brand span{display:block;font-family:var(--body);font-weight:400;font-size:12.5px;
  color:var(--charcoal);letter-spacing:.01em;margin-top:2px}

/* ---------- sticky dock: appears after the hero ---------- */
.dock{
  position:fixed;top:0;left:0;right:0;z-index:80;
  background:var(--white);border-bottom:1px solid var(--rule);
  box-shadow:0 10px 30px -18px rgba(45,41,38,.4);
  transform:translateY(-101%);transition:transform var(--t-mid) var(--ease-soft);
}
.dock.show{transform:translateY(0)}
.dock-in{max-width:var(--maxw);margin:0 auto;padding:10px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:18px}
.dock-brand{font-family:var(--display);font-weight:700;font-size:17px;color:var(--blue);letter-spacing:-.02em}
.dock-links{display:flex;align-items:center;gap:26px;margin-left:auto;margin-right:26px}
.dock-links a{font-size:14px;font-weight:700;text-decoration:none;color:var(--charcoal);
  transition:color var(--t-fast)}
.dock-links a:hover{color:var(--blue)}
@media (max-width:820px){.dock-links{display:none}}

.btn{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--body);font-weight:700;font-size:15px;
  padding:13px 24px;border-radius:999px;border:2px solid var(--blue);
  background:var(--blue);color:var(--white);text-decoration:none;cursor:pointer;
  transition:background var(--t-fast),color var(--t-fast),border-color var(--t-fast),
             transform var(--t-fast) var(--ease),box-shadow var(--t-mid) var(--ease);
}
.btn:hover{background:var(--blue-deep);border-color:var(--blue-deep);
  transform:translateY(-2px);box-shadow:0 12px 24px -12px rgba(30,34,170,.65)}
.btn:active{transform:translateY(0);box-shadow:none}
/* the chevron slides on hover, so every button points somewhere */
.btn svg{width:15px;height:15px;flex:none;transition:transform var(--t-mid) var(--ease)}
.btn:hover svg{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--blue)}
.btn-ghost:hover{background:var(--blue);color:var(--white)}
.btn-sm{padding:10px 18px;font-size:14px}
.btn[disabled]{opacity:.32;cursor:not-allowed;transform:none;box-shadow:none;filter:grayscale(.6)}
.btn[disabled]:hover svg{transform:none}

.on-dark .btn{background:var(--lime);border-color:var(--lime);color:var(--blue)}
.on-dark .btn:hover{background:var(--lime-deep);border-color:var(--lime-deep);color:var(--blue);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5)}
.on-dark .btn-ghost{background:transparent;border-color:rgba(255,255,255,.55);color:var(--white)}
.on-dark .btn-ghost:hover{background:var(--white);border-color:var(--white);color:var(--blue)}

.btn.is-disabled{opacity:.45;cursor:not-allowed;filter:grayscale(1)}
/* keep the inherited colour: forcing blue would be unreadable on dark panels */
.btn.is-disabled:hover{transform:none;box-shadow:none;background:transparent}
.btn.is-disabled:hover svg{transform:none}

:focus-visible{outline:3px solid var(--lime);outline-offset:3px}

/* ---------- hero ---------- */
.hero{background:linear-gradient(180deg,var(--white) 0%,#F4F5F9 58%,#ECEEF4 100%);
  overflow:hidden;position:relative}
/* faint grid, so the large flat panel has some texture behind the type */
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(to right,rgba(30,34,170,.05) 1px,transparent 1px),
                   linear-gradient(to bottom,rgba(30,34,170,.05) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(120% 90% at 22% 12%,#000 0%,transparent 78%);
          mask-image:radial-gradient(120% 90% at 22% 12%,#000 0%,transparent 78%);
}
.hero-in{
  position:relative;z-index:1;
  max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5.2vw,68px) var(--gutter) 0;
  display:grid;grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr);
  gap:clamp(22px,3vw,40px) clamp(24px,3.4vw,48px);
  align-items:stretch;
}
.hero h1{
  /* Sized to fit the left column without wrapping. PP Valve is a good deal
     wider than the Space Grotesk fallback, so the ceiling came down from 66px
     when the real face landed: measured at 1440, "Local presence." plus its
     arrow is 615px against a 639px column at 56px, and 637px at 58px — too
     close to survive fallback-metric differences. The vw step is matched to
     the column's own growth so it keeps fitting between the two clamps. */
  font-size:clamp(30px,3.9vw,56px);text-transform:uppercase;
  color:var(--charcoal);margin-bottom:0;letter-spacing:-.022em;
}
.hero h1 .line{display:block}
@media (min-width:641px){.hero h1 .line{white-space:nowrap}}
.hero h1 em{font-style:normal;color:var(--blue)}
/* copy sits directly under the headline instead of bottoming out against a tall image */
.hero-copy{align-self:start;padding-bottom:clamp(30px,4vw,60px)}
.hero-copy h1{margin-bottom:26px}
/* A copy-directed line break. Honoured where there is room for it, ignored
   below the breakpoint so a forced break cannot strand a two-word line. */
.brk{display:none}
@media (min-width:721px){.brk{display:inline}}

.hero .lead{font-size:clamp(17px,1.7vw,21px);max-width:32ch;margin-bottom:26px;color:var(--charcoal-soft)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:30px}
/* small trust line under the CTAs, filling what was dead space */
.hero-meta{display:grid;gap:10px;border-top:1px solid rgba(30,34,170,.16);padding-top:18px;max-width:34ch}
.hero-meta li{list-style:none;position:relative;padding-left:24px;font-size:14.5px;color:var(--charcoal-soft)}
.hero-meta li::before{content:"";position:absolute;left:0;top:.52em;width:8px;height:8px;
  border-radius:50%;background:var(--lime)}

.pills{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:26px}
.pill{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;
  letter-spacing:.09em;padding:7px 15px;border-radius:999px;
  transition:transform var(--t-mid) var(--ease-soft)}
.pill:hover{transform:translateY(-2px)}
.pill-live{background:var(--lime);color:var(--blue)}
.pill-soon{background:transparent;color:var(--purple);border:1.5px solid var(--purple)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--blue)}
.pill-soon .dot{background:var(--purple)}
.pill-live .dot{animation:pulse 2.4s var(--ease) infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.45);opacity:.5}}

/* key visual. Capped so a large asset cannot blow the hero out, and contained
   rather than cropped so a designed KV keeps its full composition. */
/* Runs deliberately past the right edge of the viewport, which .hero clips.
   The extra term beyond the gutter is how much falls off the page. */
.hero-img{align-self:end;position:relative;
  margin-right:calc(-1 * (max((100vw - var(--maxw)) / 2, 0px) + var(--gutter) + clamp(20px,6vw,120px)))}
/* float and cursor-parallax live on separate elements so the two
   transforms never fight each other */
.kv-float{animation:kvfloat 9s var(--ease) infinite}
@keyframes kvfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
/* cover, anchored to the bottom: the top of the frame is sky and building,
   so that is the safe edge to lose. The nxn box stays in shot. */
.hero-img img{display:block;width:100%;height:auto;
  max-height:min(74vh,680px);object-fit:cover;object-position:center bottom;
  transform:translate3d(calc(var(--px,0) * -10px),calc(var(--py,0) * -10px),0);
  transition:transform .5s var(--ease-soft);will-change:transform}
@media (prefers-reduced-motion:reduce){
  .kv-float{animation:none}
  .hero-img img{transform:none}
}
.hero-img-ph{display:none}
.hero-img.is-empty img{display:none}
.hero-img.is-empty .hero-img-ph{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  aspect-ratio:16/11;max-height:420px;background:
    repeating-linear-gradient(135deg,rgba(30,34,170,.05) 0 12px,transparent 12px 24px),
    rgba(255,255,255,.42);
  border:1.5px dashed rgba(30,34,170,.28);
  color:var(--blue);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
}
.hero-img.is-empty .hero-img-ph .arrow{font-size:26px;margin-right:0}

/* ---------- generic section ---------- */
.sec{padding:clamp(64px,8vw,112px) 0}
.sec-pearl{background:var(--pearl)}
.sec-tint{background:var(--blue-tint)}
.sec-blue{background:var(--blue);color:var(--white)}
.sec-blue p{color:rgba(255,255,255,.86)}
.sec-head{max-width:60ch;margin-bottom:clamp(34px,4vw,54px)}
.sec-head h2{margin-bottom:18px}
.sec-blue h2{color:var(--white)}

/* two-column section head: headline left, supporting line right.
   Used where a single column left a large dead field to its right. */
.sec-head-2{
  max-width:none;display:grid;grid-template-columns:1.25fr .75fr;
  gap:clamp(20px,4vw,64px);align-items:end;
  padding-bottom:clamp(26px,3vw,38px);border-bottom:1px solid var(--rule);
}
.sec-head-2 h2{margin-bottom:0;max-width:none;text-wrap:balance}
.sec-head-2 .sh-side{font-size:clamp(15px,1.4vw,17px);color:var(--muted);
  max-width:30ch;padding-bottom:.25em}
.on-dark .sec-head-2{border-bottom-color:rgba(255,255,255,.22)}
.on-dark .sec-head-2 .sh-side{color:rgba(255,255,255,.72)}
@media (max-width:900px){
  .sec-head-2{grid-template-columns:1fr;align-items:start;gap:18px}
}

.sec-cta{margin-top:clamp(32px,4.4vw,52px)}

/* ---------- comparison ---------- */
.cmp{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,30px);align-items:stretch}
.cmp-col{padding:clamp(28px,3.4vw,44px);position:relative;
  transition:box-shadow var(--t-card) var(--ease-soft),opacity var(--t-card) var(--ease-soft),
             filter var(--t-card) var(--ease-soft)}
.cmp-dark{background:var(--charcoal);color:rgba(255,255,255,.82);
  border-top:5px solid rgba(255,255,255,.24)}
.cmp-light{background:var(--pearl);border-top:5px solid var(--blue)}
/* Hovering one column recedes the other. This is a comparison, so directing
   attention beats moving the card around: no jumping, no bullets shuffling. */
/* -5px, not 0: an absolutely positioned child resolves against the padding
   box, so top:0 would stack under the existing 5px border instead of over it.
   No overflow:hidden here for the same reason - it would clip this. */
.cmp-col::after{
  content:"";position:absolute;top:-5px;left:0;width:100%;height:5px;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-mid) var(--ease);
}
.cmp-col:hover::after{transform:scaleX(1)}
.cmp-col:hover{z-index:1}
.cmp-dark:hover{box-shadow:0 26px 54px -30px rgba(45,41,38,.55)}
.cmp-light:hover{box-shadow:0 26px 54px -30px rgba(30,34,170,.3)}
.cmp:has(.cmp-col:hover) .cmp-col:not(:hover){opacity:.5;filter:saturate(.55)}
.cmp-col h3{font-size:clamp(22px,2.6vw,30px);margin-bottom:8px}
.cmp-dark h3{color:var(--white)}
.cmp-light h3{color:var(--blue)}
.cmp-sub{font-size:15px;color:var(--muted);margin-bottom:26px}
.cmp-dark .cmp-sub{color:rgba(255,255,255,.55)}
.cmp-col ul{list-style:none;display:grid;gap:15px}
.cmp-col li{position:relative;padding-left:24px;font-size:16px;max-width:44ch}
.cmp-col li::before{content:"";position:absolute;left:0;top:.62em;
  width:8px;height:8px;border-radius:50%;background:var(--muted)}
.cmp-light li::before{background:var(--lime)}


.ast{color:var(--purple);font-weight:700}
.footnote{
  margin-top:26px;border-left:3px solid var(--rule);padding-left:18px;
  font-size:15px;color:var(--muted);max-width:none;
}

/* ---------- options ----------
   Two standalone panels rather than a hairline-split slab: each gets a lime
   rule that wipes in, a ghost numeral, and roles as individually hoverable
   cards, so there is something to actually interact with. */
.opts{display:grid;grid-template-columns:1.18fr 1fr;gap:clamp(16px,2vw,26px);align-items:stretch}
.opt{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.2);
  padding:34px 32px 38px;
  transition:transform var(--t-card) var(--ease-soft),background var(--t-card) var(--ease-soft),
             border-color var(--t-card),box-shadow var(--t-card) var(--ease-soft);
}
.opt::before{
  content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:var(--lime);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-slow) var(--ease);
}
.opt.in::before{transform:scaleX(1)}
.opt:hover{
  transform:translateY(-8px);background:rgba(255,255,255,.1);
  border-color:rgba(68,214,44,.45);box-shadow:0 34px 62px -32px rgba(0,0,0,.6);
}
/* oversized numeral as a watermark. Bottom-right, not top: at the top it
   sat directly behind the heading and read as a rendering artefact. */
.opt-num{
  position:absolute;bottom:-26px;right:14px;pointer-events:none;
  font-family:var(--display);font-weight:700;font-size:150px;line-height:1;
  letter-spacing:-.05em;color:rgba(255,255,255,.07);
  transition:color var(--t-card),transform var(--t-card) var(--ease-soft);
}
.opt:hover .opt-num{color:rgba(68,214,44,.16);transform:translateY(-8px)}
.opt .n{font-size:12px;color:var(--lime);margin-bottom:14px;position:relative}
.opt h3{color:var(--white);margin-bottom:12px;font-size:23px;position:relative}
.opt p{font-size:15.5px;max-width:none;font-weight:400}
.opt-sub{color:rgba(255,255,255,.72);margin-bottom:24px;padding-bottom:22px;
  border-bottom:1px solid rgba(255,255,255,.2)}
.opt-lead{font-weight:600;color:var(--white)!important;margin-bottom:14px;font-size:14px!important;
  letter-spacing:.1em;text-transform:uppercase}
.opt-roles{list-style:none;display:grid;gap:10px;margin-bottom:22px}
.opt-roles li{
  font-size:15px;font-weight:400;color:rgba(255,255,255,.84);
  background:rgba(0,0,0,.16);border:1px solid rgba(255,255,255,.14);
  border-radius:10px;padding:14px 16px 14px 38px;position:relative;
  transition:background var(--t-mid) var(--ease-soft),border-color var(--t-mid),
             transform var(--t-mid) var(--ease-soft);
}
.opt-roles li::before{content:"";position:absolute;left:16px;top:1.28em;width:8px;height:8px;
  border-radius:50%;background:var(--lime);
  transition:transform var(--t-mid) var(--ease-soft),box-shadow var(--t-mid)}
.opt-roles li:hover{background:rgba(0,0,0,.28);border-color:rgba(68,214,44,.55);transform:translateX(5px)}
.opt-roles li:hover::before{transform:scale(1.35);box-shadow:0 0 0 5px rgba(68,214,44,.16)}
.opt-roles strong{color:var(--white);font-weight:700}
.opt-close{color:rgba(255,255,255,.66)!important;font-style:italic;font-size:14.5px!important;
  padding-top:18px;border-top:1px solid rgba(255,255,255,.2)}
@media (max-width:1040px){.opt-num{font-size:104px}}

/* ---------- services ---------- */
/* headline left, key visual right; the 3 columns run full width beneath */
.svc-top{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,60px);
  align-items:center;margin-bottom:clamp(34px,4vw,54px);
  padding-bottom:clamp(30px,3.4vw,44px);border-bottom:1px solid var(--rule)}
.svc-top .eyebrow{margin-bottom:18px}
/* a notch smaller here: paired with the key visual, the full-size headline
   made this section read as crowded */
.svc-top h2{max-width:24ch;font-size:clamp(28px,3.7vw,45px)}
.svc-kv{position:relative;overflow:hidden;border-radius:14px;background:var(--pearl)}
/* source is portrait (1400x1562), so a near-square frame crops least and
   keeps both the conveyors and the nxn box in shot */
.svc-kv img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;object-position:center 55%;
  transition:transform 1.1s var(--ease-soft)}
.svc-kv:hover img{transform:scale(1.05)}
@media (max-width:900px){
  .svc-top{grid-template-columns:1fr;gap:26px}
  .svc-kv img{aspect-ratio:4/3}
}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px)}
.svc-col{padding-top:clamp(30px,3.4vw,44px)}
.svc-col h3{font-size:14px;letter-spacing:.12em;
  padding-bottom:12px;margin-bottom:18px;color:var(--charcoal);
  position:relative;border-bottom:2px solid var(--rule)}
.svc-col h3::before,.svc-col h3::after{
  content:"";position:absolute;left:0;bottom:-2px;width:100%;height:2px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-slow) var(--ease)}
.svc-col h3::before{background:var(--blue)}
.svc-col h3::after{background:var(--lime);transition-duration:var(--t-mid)}
.svc-col.in h3::before{transform:scaleX(1)}
.svc-col:hover h3::after{transform:scaleX(1)}
.svc-col ul{list-style:none;display:grid;gap:11px}
.svc-col li{font-size:16px;padding-left:20px;position:relative;color:var(--charcoal);
  transition:transform var(--t-mid) var(--ease-soft)}
.svc-col li:hover{transform:translateX(5px)}
.sec-blue .svc-col h3{color:var(--white);border-bottom-color:rgba(255,255,255,.3)}
.sec-blue .svc-col h3::before{background:var(--lime)}
.sec-blue .svc-col li{color:rgba(255,255,255,.9)}
.svc-col li::before{content:"";position:absolute;left:0;top:.62em;width:9px;height:9px;
  border-radius:50%;background:var(--lime)}

/* ---------- how it works ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,32px)}
.step{position:relative;border-top:3px solid var(--rule);padding:22px 20px 26px 0;
  transition:transform var(--t-card) var(--ease-soft)}
.step::before,.step::after{
  content:"";position:absolute;top:-3px;left:0;width:100%;height:3px;
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--t-slow) var(--ease)}
.step::before{background:var(--blue)}
.step::after{background:var(--lime);transition-duration:var(--t-mid)}
.step.in::before{transform:scaleX(1)}
.step:hover::after{transform:scaleX(1)}
.step:hover{transform:translateY(-6px)}
.step .n{font-size:12px;letter-spacing:.14em;
  color:var(--muted);margin-bottom:10px;transition:color var(--t-mid)}
.step:hover .n{color:var(--blue)}
.step h3{margin-bottom:8px}
/* reserve three lines so all four paragraphs bottom out together */
.step p{font-size:15px;max-width:none;color:var(--charcoal-soft);min-height:4.65em}
@media (max-width:1040px){.step p{min-height:0}}

/* ---------- saudi marquee ---------- */
.saudi-sec{padding-block:clamp(48px,6vw,84px);overflow:hidden}
.marquee{
  display:flex;overflow:hidden;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-track{
  display:flex;align-items:center;gap:34px;flex:none;padding-right:34px;
  animation:marq 40s linear infinite;
}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{
  font-family:var(--display);font-weight:700;
  font-size:clamp(30px,5.6vw,70px);line-height:1;text-transform:uppercase;
  letter-spacing:-.015em;color:var(--lime);white-space:nowrap;
}
.marquee-track span[aria-hidden]{font-size:clamp(12px,1.4vw,18px);color:rgba(255,255,255,.4)}
@keyframes marq{to{transform:translateX(-100%)}}

/* ---------- closing cta panel ---------- */
.close-sec{padding:clamp(56px,7vw,96px) 0}
.close-panel{
  background:var(--charcoal);color:var(--white);
  padding:clamp(40px,5.4vw,72px) clamp(28px,4.4vw,64px);
  display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,4vw,56px);align-items:center;
  position:relative;overflow:hidden;
}
.close-panel::after{
  content:"";position:absolute;right:-80px;bottom:-120px;width:340px;height:340px;
  border-radius:50%;background:radial-gradient(circle,rgba(68,214,44,.22),transparent 68%);
  pointer-events:none;
}
.close-panel h2{color:var(--white);margin-bottom:14px}
.close-panel p{color:rgba(255,255,255,.74);max-width:42ch}
.close-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end}
@media (max-width:900px){
  .close-panel{grid-template-columns:1fr}
  .close-actions{justify-content:flex-start}
}

/* ---------- speed strip ---------- */
.strip{background:var(--blue);color:var(--white)}
.strip-in{display:flex;align-items:center;gap:14px;padding-block:22px}
.strip .arrow{font-size:26px;margin-right:0}
.strip .arrow svg{animation:nudge 2.6s var(--ease) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(2.5px)}}
.strip p{margin:0;max-width:none;font-size:clamp(16px,1.7vw,19px);font-weight:400;color:rgba(255,255,255,.88)}
.strip strong{font-weight:700;color:var(--white)}

/* ---------- footer ---------- */
.foot{background:var(--charcoal);color:rgba(255,255,255,.72);padding:64px 0 40px;font-size:14.5px}
.foot-in{display:grid;grid-template-columns:1.4fr .8fr .8fr;gap:clamp(24px,4vw,56px)}
.foot .brand{color:var(--lime)}
.foot .brand span{color:rgba(255,255,255,.72)}
.foot p{max-width:44ch}
.foot a{transition:color var(--t-fast)}
.foot a:hover{color:var(--lime)}
.foot-h{font-family:var(--body);font-weight:700;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--white);margin-bottom:14px}
.foot-list{list-style:none;display:grid;gap:9px}
.foot-bot{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:13px;
  color:rgba(255,255,255,.5)}
@media (max-width:820px){.foot-in{grid-template-columns:1fr;gap:32px}}

/* ---------- scroll reveal ----------
   Scoped to .js-rv, which the script only adds once the observer is
   guaranteed to run, so a JS failure leaves the page fully visible. */
@media (prefers-reduced-motion:no-preference){
  .js-rv [data-rv]{opacity:0;transform:translateY(22px);
    transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);
    transition-delay:var(--d,0s)}
  .js-rv [data-rv].in{opacity:1;transform:none}
  /* list items fade in one after another inside a revealed block */
  .js-rv [data-rvi]{opacity:0;transform:translateY(12px);
    transition:opacity var(--t-mid) var(--ease),transform var(--t-mid) var(--ease);
    transition-delay:var(--di,0s)}
  .js-rv [data-rvi].in{opacity:1;transform:none}
}

/* ---------- responsive ---------- */
@media (max-width:1040px){
  .steps{grid-template-columns:1fr 1fr}
  .opts{grid-template-columns:1fr}
}
@media (max-width:900px){
  .hero-in{grid-template-columns:1fr;padding-bottom:0}
  .hero-copy{padding-bottom:clamp(20px,4vw,32px)}
  .hero-img{margin:0;width:100%}
  .cmp{grid-template-columns:1fr}
  .svc{grid-template-columns:1fr}
  .nav .btn{display:none}
}
@media (max-width:560px){
  .steps{grid-template-columns:1fr}
  .strip-in{align-items:flex-start}
  .strip p{font-size:16px}
}

/* =================================================================
   GET STARTED PAGE
   ================================================================= */
.gs-head{background:linear-gradient(180deg,#F8F9FC 0%,#ECEEF4 100%);
  padding:clamp(40px,5.4vw,68px) 0 clamp(38px,5vw,60px);position:relative;overflow:hidden}
.gs-head h1{font-size:clamp(32px,5vw,58px);text-transform:uppercase;color:var(--charcoal);margin-bottom:16px}
.gs-head p{font-size:clamp(16px,1.6vw,19px);max-width:52ch;color:var(--charcoal-soft)}
.backlink{display:inline-flex;align-items:center;gap:8px;font-size:13px;
  letter-spacing:.1em;color:var(--blue);text-decoration:none;margin-bottom:22px}
.backlink:hover{text-decoration:underline}
.backlink:hover svg{transform:translateX(-3px)}
.backlink svg{width:15px;height:15px;transition:transform var(--t-fast) var(--ease)}

/* ---------- form stage: rail + panel ---------- */
.fs{display:grid;grid-template-columns:290px 1fr;gap:clamp(24px,3.4vw,52px);align-items:start}
@media (max-width:940px){.fs{grid-template-columns:1fr;gap:26px}}

.fs-rail{position:sticky;top:28px}
@media (max-width:940px){.fs-rail{position:static;top:auto}}
.rail-steps{list-style:none;display:grid;gap:2px;margin-bottom:26px}
.rs{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start;
  padding:14px 14px 14px 0;position:relative}
/* connector between the numbered markers */
.rs::before{content:"";position:absolute;left:16.5px;top:44px;bottom:-2px;width:1.5px;
  background:var(--rule)}
.rs:last-child::before{display:none}
.rs.done::before{background:var(--lime)}
.rs-n{
  width:34px;height:34px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:13px;letter-spacing:0;border:1.5px solid var(--rule);background:var(--white);
  color:var(--muted);flex:none;position:relative;z-index:1;
  transition:background var(--t-mid) var(--ease-soft),border-color var(--t-mid),
             color var(--t-mid),transform var(--t-mid) var(--ease-soft);
}
.rs.now .rs-n{background:var(--blue);border-color:var(--blue);color:var(--white);transform:scale(1.06)}
.rs.done .rs-n{background:var(--lime);border-color:var(--lime);color:var(--blue)}
.rs-n i{font-style:normal}
.rs-n svg{width:15px;height:15px;display:none}
.rs.done .rs-n svg{display:block}
.rs.done .rs-n i{display:none}
.rs-t{font-size:15px;font-weight:700;color:var(--muted);line-height:1.3;
  transition:color var(--t-mid)}
.rs-t em{display:block;font-style:normal;font-weight:400;font-size:13.5px;
  color:var(--muted);opacity:.85;margin-top:3px}
.rs.now .rs-t,.rs.done .rs-t{color:var(--charcoal)}
.rs.now .rs-t em{color:var(--charcoal-soft)}

.rail-note{border-top:1px solid var(--rule);padding-top:20px;font-size:13.5px;color:var(--muted)}
.rail-note strong{display:block;color:var(--charcoal);margin-bottom:6px;
  font-size:12px;letter-spacing:.12em;text-transform:uppercase}
/* compact bar shown instead of the rail on narrow screens */
.mini-prog{display:none;height:4px;background:var(--rule);border-radius:999px;overflow:hidden;margin-bottom:6px}
.mini-prog i{display:block;height:100%;width:33%;background:var(--blue);
  transition:width var(--t-slow) var(--ease-soft)}
.mini-lab{display:none;font-size:12px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-bottom:18px}
@media (max-width:940px){
  .rail-steps,.rail-note{display:none}
  .mini-prog,.mini-lab{display:block}
}

.form-shell{background:var(--white);border:1px solid var(--rule);border-radius:4px;
  padding:clamp(24px,3.2vw,44px);box-shadow:0 22px 50px -34px rgba(45,41,38,.3)}

.page{display:none}
.page.now{display:block}
/* forward and back get opposite entrances, so direction is legible */
.page.now.fwd{animation:slidefwd .5s var(--ease-soft) both}
.page.now.bwd{animation:slidebwd .5s var(--ease-soft) both}
@keyframes slidefwd{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}}
@keyframes slidebwd{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}}
.page h3{font-size:clamp(21px,2.4vw,28px);margin-bottom:6px;color:var(--blue);text-transform:uppercase}
.page .page-sub{font-size:15px;color:var(--muted);margin-bottom:30px;
  padding-bottom:22px;border-bottom:1px solid var(--rule)}

.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px 26px}
.form-grid .full{grid-column:1/-1}
.field{position:relative}
.field > label{display:block;font-size:12px;margin-bottom:9px;color:var(--charcoal-soft)}
.field input[type=text],.field input[type=email],.field input[type=url],.field select,.field textarea{
  width:100%;font-family:var(--body);font-size:16px;color:var(--charcoal);
  padding:13px 15px;border:1.5px solid var(--rule);border-radius:8px;background:var(--white);
  transition:border-color var(--t-fast),box-shadow var(--t-fast),background var(--t-fast);
}
.field textarea{resize:vertical;min-height:104px}
/* matching custom chevron, so the arrow has consistent padding here too */
.field select{appearance:none;-webkit-appearance:none;padding-right:44px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236A6A6A' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;
  background-position:right 15px center;background-size:17px 17px}
.field input:hover,.field select:hover,.field textarea:hover{border-color:#B9BAC2}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(30,34,170,.13)}
/* filled fields get a quiet lime tick so progress is visible at a glance */
.field.ok::after{
  content:"";position:absolute;right:14px;top:calc(50% + 8px);width:16px;height:16px;
  transform:translateY(-50%);pointer-events:none;
  background:var(--lime);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
  animation:pop .3s var(--ease-soft) both;
}
@keyframes pop{from{transform:translateY(-50%) scale(.3);opacity:0}to{transform:translateY(-50%) scale(1);opacity:1}}
.field.bad input,.field.bad select,.field.bad textarea{border-color:var(--err);background:#FEF6F5}
.field.bad input:focus,.field.bad select:focus{box-shadow:0 0 0 4px rgba(192,39,27,.12)}
/* per-field message, so the fix is next to the problem */
.fe{font-size:13.5px;color:var(--err);margin-top:7px;display:none;align-items:center;gap:6px}
.field.bad .fe{display:flex;animation:fein .3s var(--ease-soft) both}
@keyframes fein{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

.req{color:var(--purple)}
.checks{display:flex;flex-wrap:wrap;gap:9px}
.check{display:inline-block;position:relative}
.check input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.check span{
  display:inline-flex;align-items:center;gap:8px;font-size:14.5px;padding:9px 16px;border-radius:999px;
  border:1.5px solid var(--rule);background:var(--white);cursor:pointer;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),
             transform var(--t-fast) var(--ease-soft);
}
.check span::before{
  content:"";width:0;height:11px;flex:none;background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;
  transition:width var(--t-fast) var(--ease-soft);
}
.check span:hover{border-color:var(--blue);transform:translateY(-2px)}
.check input:checked+span{background:var(--blue);border-color:var(--blue);color:var(--white);font-weight:600}
.check input:checked+span::before{width:11px}
.check input:focus-visible+span{outline:3px solid var(--lime);outline-offset:2px}
.field.bad .checks .check span{border-color:rgba(192,39,27,.5)}

.nav-row{display:flex;justify-content:space-between;align-items:center;gap:14px;
  margin-top:32px;padding-top:26px;border-top:1px solid var(--rule)}
.nav-hint{font-size:13px;color:var(--muted);margin-right:auto;margin-left:16px}
.err{color:var(--err);font-size:14px;margin-top:16px;display:none}
.err.show{display:block;animation:shake .4s var(--ease)}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}

/* the form fades and settles out, then the panel rises in behind it */
.fs{transition:opacity .34s var(--ease),transform .34s var(--ease)}
.fs.leaving{opacity:0;transform:translateY(-14px) scale(.985);pointer-events:none}

.thanks{display:none;background:var(--blue);color:var(--white);position:relative;overflow:hidden;
  padding:clamp(38px,5vw,64px);max-width:920px;border-radius:14px;text-align:center}
.thanks.show{display:block;animation:thanksin .7s var(--ease-soft) both}
@keyframes thanksin{
  from{opacity:0;transform:translateY(26px) scale(.97)}
  to{opacity:1;transform:none}
}
/* lime wash sweeps across once as it lands */
.thanks::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 0%,rgba(68,214,44,.3),transparent 62%);
  opacity:0;animation:washin 1.5s var(--ease) .25s both;
}
@keyframes washin{0%{opacity:0}40%{opacity:1}100%{opacity:.45}}
.thanks > *{position:relative;z-index:1}
.thanks h3,.thanks p,.thanks .tick{animation:risein .6s var(--ease-soft) both}
.thanks .tick{animation-delay:.16s}
.thanks h3{animation-delay:.26s}
.thanks p{animation-delay:.34s}
@keyframes risein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.thanks h3{font-size:clamp(24px,3vw,36px);text-transform:uppercase;color:var(--white);margin-bottom:12px}
.thanks p{color:rgba(255,255,255,.88);margin-inline:auto}
.tick{
  width:72px;height:72px;border-radius:50%;background:var(--lime);color:var(--blue);
  display:flex;align-items:center;justify-content:center;margin:0 auto 26px;
  box-shadow:0 0 0 0 rgba(68,214,44,.5);
}
.thanks.show .tick{animation:tickin .6s var(--ease-soft) .18s both,
                             tickring 1.5s var(--ease) .7s 1 both}
@keyframes tickring{from{box-shadow:0 0 0 0 rgba(68,214,44,.5)}
                    to{box-shadow:0 0 0 26px rgba(68,214,44,0)}}
.tick svg{width:30px;height:30px}
@keyframes tickin{from{transform:scale(.2);opacity:0}60%{transform:scale(1.12)}to{transform:scale(1);opacity:1}}