/* ===================== FONTS: Mont ===================== */
/* Drop your licensed Mont files into assets/fonts/ (see filenames below).
   Both woff2 and otf are listed as sources — the browser uses whichever
   is present, so you can supply either or both. */
@font-face{
  font-family:"Mont";
  src:url("assets/fonts/Mont-Light.woff2") format("woff2"),
      url("assets/fonts/Mont-Light.otf") format("opentype");
  font-weight:300;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Mont";
  src:url("assets/fonts/Mont-Regular.woff2") format("woff2"),
      url("assets/fonts/Mont-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Mont";
  src:url("assets/fonts/Mont-Book.woff2") format("woff2"),
      url("assets/fonts/Mont-Book.otf") format("opentype");
  font-weight:450;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Mont";
  src:url("assets/fonts/Mont-SemiBold.woff2") format("woff2"),
      url("assets/fonts/Mont-SemiBold.otf") format("opentype");
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Mont";
  src:url("assets/fonts/Mont-Bold.woff2") format("woff2"),
      url("assets/fonts/Mont-Bold.otf") format("opentype");
  font-weight:700;font-style:normal;font-display:swap;
}

/* ===================== TOKENS ===================== */
:root{
  --ink:#111;
  --ink2:#121212;
  --muted:#6b6a64;
  --light:#97968f;
  --green:#0d945b;
  --green2:#1a8055;
  --green-dark:#286c4f;
  --surface:#f7f7f7;
  --surface2:#f8f8f8;
  --border:#e6e4dd;
  --dark:#0f0e0e;
  --maxw:1440px;
  --pad:56px;
  --nav-height:96px;
  --font:"Mont", "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font);
  color:var(--ink);
  background:#fff;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  padding-bottom:50px; /* sticky bar */
}
img{display:block;max-width:100%}
a{text-decoration:none;color:inherit}

.container{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}

/* ===================== TYPE HELPERS ===================== */
.h-30{font-weight:600;font-size:30px;line-height:1.257;letter-spacing:-.3px}
.h-38{font-weight:600;font-size:38px;line-height:1.15}
.h-40{font-weight:600;font-size:40px;line-height:1.2}
.body-16{font-size:16px;line-height:1.55}
.muted{color:var(--muted)}
.muted-accent{color:var(--light)}
.muted-accent.reg{font-weight:400}
.center{text-align:center}
.white{color:#fff}
.thin{font-weight:300}
.dim{color:#7c7c7c}

/* ===================== BUTTONS ===================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-weight:600;font-size:13px;line-height:1;cursor:pointer;border:0;
  padding:10px 18px;border-radius:100px;white-space:nowrap;transition:.18s ease;
  font-family:var(--font);
}
.btn-pill{border-radius:50px;padding:14px 24px}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-white{background:#fff;color:rgba(0,0,0,.75)}
.btn-white:hover{background:#f1f1f1}
.btn-outline-dark{background:rgba(248,248,248,.2);color:var(--ink);border:1px solid #000}
.btn-outline-dark:hover{background:#111;color:#fff}
.btn.sm{padding:10px 18px;border-radius:100px}

/* Product Tour: pill with white circular arrow badge that turns on hover */
.btn-tour{padding:5px 5px 5px 18px;gap:10px;border-radius:100px}
.tour-badge{
  display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;
  width:26px;height:26px;border-radius:50%;background:#fff;color:#111;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.tour-badge svg{display:block}
.btn-tour:hover .tour-badge{transform:rotate(45deg)}

/* diagonal arrow glyph */
.arrow-diag{width:12px;height:12px;position:relative;display:inline-block}
.arrow-diag::before{content:"";position:absolute;inset:0;border-top:1.4px solid currentColor;border-right:1.4px solid currentColor;transform:rotate(45deg);border-radius:1px}
.arrow-diag.light{color:#fff}
.btn-arrow{flex-shrink:0;display:block;transition:transform .3s cubic-bezier(.22,.61,.36,1)}

/* Explore All Modules: arrow turns straight on hover (like Read More) */
.modules-head .btn:hover .btn-arrow{transform:rotate(45deg)}

/* ===================== NAV ===================== */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:100;height:96px;
  display:flex;align-items:center;
  background:rgba(255,255,255,.72);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(0,0,0,.04);
  transition:transform .35s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;
}
.nav.nav-hidden{transform:translateY(-100%)}
.nav-inner{max-width:var(--maxw);margin:0 auto;width:100%;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:20px}
.logo{font-weight:300;font-size:22px;letter-spacing:5px;color:var(--ink2)}
.nav-pill{
  display:flex;align-items:center;gap:4px;
  background:rgba(217,217,217,.28);border-radius:100px;padding:6px;
}
.nav-pill a{font-size:13px;color:#000;padding:8px 16px;border-radius:100px;font-weight:400;transition:.15s}
.nav-pill a.active{background:#fff;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.nav-pill a:not(.active):hover{background:rgba(255,255,255,.5)}
.nav-right{display:flex;align-items:center;gap:20px}
.nav-signin{font-weight:600;font-size:13px;color:#111}
.nav-signin .rm-text{transition:background-size .6s cubic-bezier(.22,.61,.36,1)}
.nav-signin:hover .rm-text{background-size:100% 1.5px}
.nav-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.nav-burger span{width:22px;height:2px;background:#111;border-radius:2px;transition:.2s}

/* ===================== HERO ===================== */
.hero{
  position:relative;padding-top:96px;
  background:#f2f2f2;
  min-height:760px;display:flex;align-items:center;
}
.hero-inner{width:100%;padding-top:60px;padding-bottom:80px;
  display:grid;grid-template-columns:1fr 1.25fr;align-items:center;gap:40px}
.hero-copy{max-width:640px}
.hero-media{position:relative;width:100%;background:transparent;margin-right:calc(var(--pad) * -1)}
.hero-video{width:100%;height:auto;display:block}
/* foreground gradient overlay in the hero bg color so the video edges blend seamlessly */
.hero-media::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(to right,#f2f2f2 0%,rgba(242,242,242,0) 22%),
    linear-gradient(to left,#f2f2f2 0%,rgba(242,242,242,0) 10%),
    linear-gradient(to top,#f2f2f2 0%,rgba(242,242,242,0) 14%),
    linear-gradient(to bottom,#f2f2f2 0%,rgba(242,242,242,0) 14%);
}
.hero-title{font-weight:600;font-size:60px;line-height:70px;color:var(--ink);letter-spacing:-1px}
.hero-sub{margin-top:34px;max-width:560px;font-size:16px;line-height:25px;color:var(--muted)}
.email-field{
  margin-top:44px;max-width:559px;height:56px;display:flex;align-items:center;
  background:#fff;border:1px solid var(--border);border-radius:200px;
  padding-left:29px;padding-right:5px;overflow:hidden;
}
.email-field input{
  flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;
  font-family:var(--font);font-size:14px;color:var(--muted);
}
.email-field input::placeholder{color:var(--muted)}
.email-field .btn{height:48px;flex-shrink:0}
/* hero: interactive product tour entry point (Figma 30189:210326) */
.hero-tour{display:inline-flex;align-items:center;gap:10px;margin-top:24px;text-decoration:none;flex-wrap:wrap}
.hero-tour-ic{width:28px;height:28px;flex-shrink:0;border:1.3px solid var(--ink);border-radius:7px;color:var(--ink);
  display:inline-flex;align-items:center;justify-content:center;
  transition:background .28s ease, color .28s ease}
.hero-tour:hover .hero-tour-ic{background:var(--ink);color:#fff}
.hero-tour-text{font-size:16px;color:var(--ink);
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
.hero-tour-note{font-size:15px;color:var(--muted)}

/* ===================== CASE STUDY ===================== */
.case{
  max-width:var(--maxw);margin:100px auto 0;
  background:var(--surface);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;
}
.case-media{position:relative;align-self:stretch;min-height:600px;overflow:hidden}
.case-media .case-bg{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.case-fade{position:absolute;left:0;right:0;bottom:0;height:142px;background:linear-gradient(to top,#000,rgba(102,102,102,0));z-index:1}
.watch-pill{
  position:absolute;right:30px;bottom:30px;z-index:2;
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.25);border-radius:500px;
  padding:12px 22px;color:#fff;font-family:var(--font);font-size:16px;cursor:pointer;
  backdrop-filter:blur(10px) saturate(160%);-webkit-backdrop-filter:blur(10px) saturate(160%);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.15), 0 4px 16px rgba(0,0,0,.18);
  transition:background .25s ease, border-color .25s ease;
}
.watch-pill:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4)}
.play-icon{width:12px;height:13px;flex-shrink:0;display:block;position:static}
.case-copy{padding:80px 56px 80px 60px;max-width:640px}
.case-copy .h-38{max-width:560px}
.case-copy .body-16{margin-top:25px;max-width:520px}
.read-more{display:inline-flex;align-items:center;gap:8px;margin-top:25px;font-weight:600;font-size:13px;text-decoration:none}
.rm-text{
  background-image:linear-gradient(currentColor,currentColor);
  background-repeat:no-repeat;
  background-position:0 100%;
  background-size:0% 1.5px;
  padding-bottom:2px;
  transition:background-size .35s cubic-bezier(.22,.61,.36,1);
}
.read-more:hover .rm-text{background-size:100% 1.5px}
.rm-arrow{width:12px;height:12px;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.read-more:hover .rm-arrow{transform:rotate(45deg)}

/* ===================== MODULES / BENTO ===================== */
.modules{padding:150px 0 100px}
.modules-head{display:flex;flex-direction:column;align-items:flex-start;gap:28px;margin-bottom:70px}
.modules-title{font-weight:600;font-size:38px;line-height:1.15}
.bento{
  display:grid;grid-template-columns:repeat(4,1fr);
  grid-auto-rows:278px;gap:20px;
}
.tile{position:relative;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;
  transition:transform .38s cubic-bezier(.22,.61,.36,1), box-shadow .38s ease}
.tile:hover{transform:scale(1.02);z-index:2;box-shadow:0 14px 34px rgba(0,0,0,.09)}
.tile-label{position:absolute;top:20px;left:20px;z-index:2;font-size:18px;color:var(--muted);
  transition:transform .38s cubic-bezier(.22,.61,.36,1), color .3s ease}
.tile-label.dark{color:#000}
.tile:hover .tile-label{transform:translateX(5px);color:#111}
.tile-arrow{
  position:absolute;top:18px;right:18px;z-index:3;
  width:32px;height:32px;border-radius:50%;
  border:1.3px solid #111;color:#111;background:transparent;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s,color .2s,border-color .2s;
}
/* full-screen / expand icon: corners spread apart on hover */
.fs-ic{display:block;overflow:visible}
.fs-ic path{transition:transform .28s cubic-bezier(.22,.61,.36,1)}
.tile:hover .tile-arrow{background:#111;color:#fff;border-color:#111}
.tile:hover .fs-tl{transform:translate(-2px,-2px)}
.tile:hover .fs-br{transform:translate(2px,2px)}
.tile-img{flex:1;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;padding-top:68px}
.tile-img img{width:100%;height:100%;object-fit:cover;object-position:top center}
.tile-boq{grid-column:1;grid-row:1 / span 2;background:#f4f8ff}
.tile-mr{grid-column:2;grid-row:1;background:#e8fbf3}
.tile-price{grid-column:3 / span 2;grid-row:1;background:#edfcfc}
.tile-inv{grid-column:2;grid-row:2;background:#e8fbf3}
.tile-cost{grid-column:3 / span 2;grid-row:2 / span 2;background:#e9f8f0}
.tile-pm{grid-column:1 / span 2;grid-row:3;background:#fff3e6}
.tile-boq .tile-img img{object-fit:cover;object-position:top left}
.tile-price .tile-img{align-items:center;padding:64px 30px 28px}
.tile-price .tile-img img{object-fit:contain;object-position:center}
.tile-inv .tile-img{align-items:center;padding:58px 26px 26px}
.tile-inv .tile-img img{object-fit:contain;object-position:center}
/* cost analysis: grey card (like others) + CSS concentric circles + floating white cards */
.tile-cost .tile-img.cost-stage{padding:0;display:block;position:relative;overflow:hidden}
/* concentric discs — 1:1 from Figma node 29844:80797 (Group 427322908).
   Stage renders at exactly 654×576, same as the Figma frame, so the ratios map directly:
   4 concentric ellipses centred at (326.5, 287.5) ≈ 50%/50%, diameters 683 / 522.12 / 372.94 / 235.47.
   Flat fills, no strokes — the colour steps are what make the rings read. */
.tile-cost .cost-ring{position:absolute;left:50%;top:50%;aspect-ratio:1;border-radius:50%;
  pointer-events:none;transform:translate(-50%,-50%);will-change:transform;
  transition:transform .5s ease}
.tile-cost .cost-ring-4{width:104.43%;background:#e2faf0}
.tile-cost .cost-ring-3{width:79.83%;background:#cbf6e4}
.tile-cost .cost-ring-2{width:57.03%;background:#b8f3da}
.tile-cost .cost-ring-1{width:36%;background:#a9f0d2}
/* both cards boxed 1:1 from Figma, as % of the 654×576 stage:
   spending  x136   y89    w255.36  |  donut  x272.72 y234.40 w253.19 */
.tile-cost .cost-spending{position:absolute;left:20.795%;top:9.097%;width:44.711%;height:auto;object-fit:contain;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.10))}
.tile-cost .cost-donut{position:absolute;left:41.70%;top:40.69%;width:38.71%;height:auto;object-fit:contain;z-index:2;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.14))}

/* ===== ambient life on all cards ===== */
@media (prefers-reduced-motion: no-preference){
  /* cost analysis: floating cards + breathing circles */
  .tile-cost .cost-spending{animation:costFloatA 6s ease-in-out infinite}
  .tile-cost .cost-donut{animation:costFloatB 7s ease-in-out infinite .6s}
  /* rings ripple outward only while the card is hovered */
  .tile-cost:hover .cost-ring{animation:ringRipple 2.2s ease-in-out infinite}
  .tile-cost:hover .cost-ring-1{animation-delay:0s}
  .tile-cost:hover .cost-ring-2{animation-delay:.11s}
  .tile-cost:hover .cost-ring-3{animation-delay:.22s}
  .tile-cost:hover .cost-ring-4{animation-delay:.33s}
  .tile-cost:hover .cost-donut{animation-duration:4.5s}
  .tile-cost:hover .cost-spending{animation-duration:4s}

  /* floating-style screenshots (sit on grey with padding) gently drift */
  .tile-price .tile-img img{animation:tileFloat 7s ease-in-out infinite}
  .tile-inv .tile-img img{animation:tileFloat 6.4s ease-in-out infinite .5s}
  .tile-pm .tile-img img{animation:tileFloat 7.6s ease-in-out infinite 1s}

  /* full-bleed screenshots breathe subtly (no edge gap) */
  .tile-boq .tile-img img{animation:tileBreathe 10s ease-in-out infinite}
  .tile-mr .tile-img img{animation:tileBreathe 11s ease-in-out infinite 1.2s}
}
@keyframes costFloatA{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-7px)}
}
@keyframes costFloatB{
  0%,100%{transform:translateY(0) translateX(0)}
  50%{transform:translateY(6px) translateX(3px)}
}
@keyframes ringRipple{
  0%,100%{transform:translate(-50%,-50%) scale(1)}
  45%{transform:translate(-50%,-50%) scale(1.045)}
}
@keyframes tileFloat{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-6px)}
}
@keyframes tileBreathe{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.015)}
}
.tile-pm .tile-img{align-items:center;padding:60px 34px 30px}
.tile-pm .tile-img img{object-fit:contain;object-position:center}

/* ===================== STATS ===================== */
.stats{padding:100px 0 0}
.stats-head{max-width:820px;margin:0 auto}
.stats-sub{margin-top:22px}
.stats-band{position:relative;overflow:hidden;margin-top:44px}
/* KPI grid: top + bottom rules fade toward the edges */
.stats-row{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:stretch;gap:0;padding-top:56px;padding-bottom:56px}
.stats-row::before,.stats-row::after{content:"";position:absolute;left:var(--pad);right:var(--pad);height:1px;background:linear-gradient(90deg,transparent 0%,var(--border) 22%,var(--border) 78%,transparent 100%)}
.stats-row::before{top:0}
.stats-row::after{bottom:0}
/* vertical dividers around the middle KPI, fading top/bottom */
.stat-mid{position:relative}
.stat-mid::before,.stat-mid::after{content:"";position:absolute;top:8px;bottom:8px;width:1px;background:linear-gradient(180deg,transparent 0%,var(--border) 30%,var(--border) 70%,transparent 100%)}
.stat-mid::before{left:0}
.stat-mid::after{right:0}
.stats-dots{position:relative;display:block;width:100%;height:300px;margin-top:0;cursor:crosshair;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 86%,transparent 100%)}
.stats-dots canvas{display:block;width:100%;height:100%}
.stat{flex:1;text-align:center;display:flex;flex-direction:column;justify-content:center;padding:0 24px}
.stat-num{font-weight:600;font-size:44px;color:var(--green2);line-height:1;white-space:nowrap}
/* equal-width digits so the live counter doesn't shift/shake as values change */
#costCounter{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}
.stat-label{margin-top:20px;font-size:16px;color:var(--muted)}

/* live "Procurement Cost Saved" row: pulsing dot beside the number, stays centered as it grows */
.stat-num-live{display:flex;align-items:center;justify-content:center;gap:14px}
.live-dot{flex-shrink:0;display:inline-flex;width:22px;height:22px}
.live-dot svg{width:100%;height:100%;display:block;overflow:visible}
.live-halo{transform-box:fill-box;transform-origin:center;animation:livePulse 1.8s ease-out infinite}
@keyframes livePulse{
  0%{transform:scale(.55);opacity:.75}
  70%{transform:scale(1.7);opacity:0}
  100%{transform:scale(1.7);opacity:0}
}
@media (prefers-reduced-motion: reduce){.live-halo{animation:none}}

/* ===================== DARK COMPARISON / CYCLE ===================== */
.cycle{position:relative;background:linear-gradient(180deg,#f8fafd 0%,#ffffff 100%);padding:82px 0 90px;overflow:hidden}
/* green concentric glow behind the timeline */
.cycle-dots{position:absolute;left:50%;top:66%;transform:translate(-50%,-50%);width:683px;height:683px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(77,172,133,.30) 0%,rgba(77,172,133,.22) 26%,rgba(77,172,133,.14) 46%,rgba(77,172,133,.07) 64%,rgba(77,172,133,0) 78%)}
.cycle-inner{position:relative}
.cycle .h-38{margin-bottom:0}
.cycle-sub{max-width:752px;margin:22px auto 0;color:#6b6a64}
.cycle-compare{display:flex;align-items:center;justify-content:center;gap:40px;margin-top:60px}
.cc-col{display:flex;flex-direction:column;gap:8px}
.cc-col.right{text-align:right}
.cc-cap{font-size:16px;color:#0f0e0e}
.cc-days{font-weight:600;font-size:30px;color:#8a8880}
.cc-days.strike{text-decoration:line-through}
.cc-days.green{color:var(--green)}
.cc-arrow{width:120px;height:2px;background:#c9c6be;position:relative;align-self:flex-end;margin-bottom:14px}
.cc-arrow::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;border-top:2px solid #c9c6be;border-right:2px solid #c9c6be;transform:translateY(-50%) rotate(45deg)}

/* flow card */
.flow{max-width:496px;margin:56px auto 0}
.flow-toggle{
  position:relative;display:flex;background:#fff;border:1px solid #e6e4dd;
  border-radius:200px;padding:3px;box-shadow:0 1px 3px rgba(15,14,14,.05);
}
.ft-btn{
  flex:1;border:0;background:transparent;color:#6b6a64;font-family:var(--font);
  font-weight:600;font-size:16px;padding:9px 0;border-radius:200px;cursor:pointer;transition:.2s;
}
.ft-btn.active{background:var(--green2);color:#fff}
.flow-body{position:relative;margin-top:26px;padding-left:56px}
.flow-track{position:absolute;left:22px;top:12px;bottom:20px;width:1px;background:#cfe3d8}
.flow-steps{display:flex;flex-direction:column;gap:16px;position:relative}
.fstep{position:relative}
.fstep::before{content:"";position:absolute;left:-41px;top:14px;width:15px;height:15px;border-radius:50%;background:#fff;border:1px solid #c9c6be;box-shadow:0 0 0 4px rgba(255,255,255,.6)}
.fstep-lg{
  background:linear-gradient(180deg,var(--green) 0%,var(--green-dark) 100%);
  border:1px solid var(--green);border-radius:20px;padding:16px 20px;color:#fff;
}
.fstep-lg::before{background:var(--green2);border-color:#effff8}
.fstep-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.fstep-head span{font-weight:600;font-size:14px;color:#effff8}
.ai-ic{width:21px;height:22px}
.fstep-lg p{font-weight:600;font-size:9px;line-height:1.35;color:#fff;margin-bottom:6px}
.fstep-lg p:last-child{margin-bottom:0}
.fstep-pill{
  background:linear-gradient(180deg,#effff8 0%,#fff 100%);border:1px solid var(--green);
  border-radius:200px;padding:12px 20px;font-weight:600;font-size:14px;color:var(--green);text-align:center;
}
.fstep-pill::before{background:#000;border:1px solid #9a9a9a}

/* toggle panels */
.flow-panel{display:none}
.flow-panel.active{display:block}

/* conventional flow: light grey pills */
.fstep-conv{
  align-self:flex-start;max-width:100%;
  background:#fff;border:1px solid #e6e4dd;border-radius:200px;
  padding:12px 22px;font-weight:600;font-size:14px;color:#6b6a64;
}
.fstep-conv::before{background:#fff;border:1px solid #c9c6be}

/* maestro flow: light-green pills with green text + green sparkle */
.fstep-mpill{
  align-self:flex-start;max-width:100%;
  display:inline-flex;align-items:center;gap:9px;
  background:linear-gradient(180deg,rgba(239,255,248,.9) 0%,rgba(255,255,255,.9) 100%);
  border:1px solid rgba(13,148,91,.5);border-radius:200px;
  padding:12px 20px;font-weight:600;font-size:14px;color:#049256;
}
.fstep-mpill .spark{width:16px;height:16px;flex-shrink:0;display:block;color:#049256}
.fstep-mpill::before{background:var(--green2);border-color:#fff}

/* ===================== AUDIT TRAILS ===================== */
.audit{padding:120px 0}
.audit-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.audit-copy{max-width:601px}
.audit-copy .body-16{margin-top:26px}
.audit-media{position:relative}
.audit-docs{width:150%;height:auto;display:block;margin-left:-16%;margin-right:calc(var(--pad) * -1)}

/* Disconnected Workflows → One System — heading + 16:9 media pinned together;
   scroll fades the collage poster to reveal the video (which then plays). */
.wf{position:relative;background:#fff}
/* runway = scroll distance that keeps heading+media pinned through the fade */
.wf-runway{height:170vh}
.wf-stage{
  position:sticky;top:var(--nav-height);
  height:calc(100dvh - var(--nav-height));
  display:flex;flex-direction:column;justify-content:center;overflow:hidden;
}
.wf-stage > .container{width:100%}
/* heading kept close to the media so both stay in frame while pinned — centered */
.wf-head{max-width:1180px;margin:0 auto 24px;text-align:center}
.wf-head .h-38{line-height:1.15}
/* heading text swap: "Disconnected Workflows" → "One System" on scroll */
.wf-heading{position:relative}
.wf-h{display:block}
.wf-h-after{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;opacity:0}
.wf-sub{position:relative;margin:16px auto 0;max-width:1000px}
.wf-s{display:block}
.wf-s-after{position:absolute;left:0;right:0;top:0;opacity:0}
/* 16:9 box sized to fit the pinned stage after the heading; height-driven so
   width follows the 16:9 ratio and the FULL frame shows, never cropped */
.wf-box{
  position:relative;margin:0 auto;
  aspect-ratio:16/9;width:auto;max-width:100%;
  height:min(calc(100dvh - var(--nav-height) - 250px), calc((min(100vw, var(--maxw)) - 2 * var(--pad)) * 9 / 16));
  border-radius:18px;overflow:hidden;
  border:1px solid var(--border);box-shadow:0 24px 60px rgba(15,14,14,.06);background:#fff;
}
.wf-video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:1}
.wf-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;z-index:2;will-change:opacity}
@media(min-width:768px){ .wf-runway{height:190vh} }

/* ===================== OPERATIONAL ===================== */
.operational{padding:100px 0}
.op-head{max-width:820px;margin-bottom:60px}
.op-head .h-38{margin-bottom:16px}
.op-divider{height:1px;background:#e9e9e9;max-width:var(--maxw);margin:0 auto}
.op-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;padding-top:48px;padding-bottom:48px}
.op-num{font-size:50px;color:#a9a9a9;line-height:1;margin-bottom:60px}
.op-step h3{font-weight:600;font-size:19px;margin-bottom:12px}
.op-step p{font-size:14px;line-height:1.5}

/* ===================== DARK LEAKS CTA ===================== */
.leaks{position:relative;background:var(--ink);color:#fff;overflow:hidden}
.leaks-inner{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:1fr 1fr;align-items:center;min-height:511px;overflow:hidden}
.leaks-copy{padding:100px 0;max-width:640px}
.leaks-copy .email-field{margin-top:39px;height:56px}
.leaks-fine{margin-top:12px;font-size:12px;color:var(--muted)}
.leaks-media{position:relative;align-self:stretch;min-height:433px}
.leaks-img{position:absolute}
.leaks-back{right:-4%;top:12%;width:64%}
.leaks-front{left:6%;top:34%;width:62%}

/* ===================== FAQ ===================== */
.faq{padding:60px 0 120px}
.faq-inner{display:grid;grid-template-columns:360px 1fr;gap:60px;align-items:start}
.faq-list{display:flex;flex-direction:column;gap:12px;max-width:850px}
.faq-card{background:var(--surface2)}
.faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;cursor:pointer;font-family:var(--font);
  font-weight:600;font-size:15px;text-align:left;color:var(--ink);padding:20px 24px;
}
.faq-plus{font-weight:450;font-size:20px;flex-shrink:0;transition:transform .2s}
.faq-card.open .faq-plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a p{padding:0 24px 20px;font-size:14px;line-height:1.6;color:var(--muted)}
/* FAQ — wide variant (service pages): header row + full-width rows,
   answer sits beside its question (Figma 30189:247876) */
.faq-wide .faq-top{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-bottom:34px}
.faq-wide .faq-top h2{display:inline-flex;align-items:center;gap:12px}
.faq-arrow{flex-shrink:0;transition:transform .3s cubic-bezier(.22,.61,.36,1)}
.faq-wide .faq-top h2:hover .faq-arrow{transform:rotate(45deg)}
.faq-note{text-align:right;font-size:13.5px;line-height:1.6;flex-shrink:0}
.faq-note span{display:block;color:var(--muted)}
.faq-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.faq-wide .faq-list{max-width:none;gap:0}
.faq-wide .faq-card{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  column-gap:48px;padding-right:44px;background:transparent;border-top:1px solid var(--border)}
.faq-wide .faq-card:last-child{border-bottom:1px solid var(--border)}
.faq-wide .faq-q{grid-column:1;grid-row:1;padding:24px 0;font-size:13px;font-weight:600;
  letter-spacing:.4px;text-transform:uppercase;align-items:flex-start}
.faq-wide .faq-plus{position:absolute;right:0;top:20px;color:var(--muted)}
.faq-wide .faq-a{grid-column:2;grid-row:1;align-self:start}
.faq-wide .faq-a p{padding:24px 0;font-size:14px;line-height:1.65}

/* ===================== FOOTER ===================== */
.footer{background:#fff;padding:96px 0 48px}
.footer-top{display:flex;justify-content:space-between;gap:64px;flex-wrap:wrap}
.footer-brand{max-width:320px;display:flex;flex-direction:column;gap:16px}
.footer-brand p{font-size:14px;line-height:1.6}
.footer-cols{display:flex;gap:64px;flex-wrap:wrap}
.footer-col{display:flex;flex-direction:column;gap:16px;min-width:140px}
.footer-col h4{font-weight:600;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink2)}
.footer-col a{font-size:14px;font-weight:450;color:var(--muted);transition:.15s}
.footer-col a:hover{color:var(--ink)}
.footer-divider{height:1px;background:var(--border);margin:64px 0}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;color:var(--muted);flex-wrap:wrap;gap:12px}
.footer-bottom span{font-size:13px}
.footer-tag{font-size:11px;font-weight:450;letter-spacing:1px;text-transform:uppercase;opacity:.7}

/* ===================== STICKY BOTTOM BAR ===================== */
.sticky-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;height:50px;
  background:rgba(0,0,0,.78);backdrop-filter:blur(8px);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 40px;transition:transform .3s;
}
.sticky-bar.hide{transform:translateY(110%)}
.sb-text{color:#fff;font-weight:600;font-size:13px}
.sticky-bar .btn{padding:10px 18px}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1100px){
  :root{--pad:32px}
  .hero-title{font-size:48px;line-height:56px}
  .h-38{font-size:30px}
  .h-40{font-size:32px}
  .modules-title{font-size:30px}
  .nav-pill{display:none}
  .bento{grid-auto-rows:200px}
}
@media (max-width:860px){
  .nav{height:72px}
  .hero{padding-top:72px;min-height:auto}
  .hero-inner{grid-template-columns:1fr;gap:40px}
  .hero-media{max-width:560px}
  .nav-right{display:none}
  .nav-burger{display:flex}
  .case{grid-template-columns:1fr;margin-top:56px}
  .case-media{min-height:360px}
  .case-copy{padding:48px 32px}
  .audit-inner{grid-template-columns:1fr;gap:40px}
  .audit-docs{width:100%;margin-left:0;margin-right:0}
  .leaks-inner{grid-template-columns:1fr}
  .leaks-copy{padding:64px 0}
  .leaks-media{min-height:360px}
  .faq-inner{grid-template-columns:1fr;gap:32px}
  .op-steps{grid-template-columns:1fr;gap:36px}
  .op-num{margin-bottom:16px}
  .bento{grid-template-columns:repeat(2,1fr);grid-auto-rows:200px}
  .tile-boq{grid-column:1;grid-row:1 / span 2}
  .tile-mr{grid-column:2;grid-row:1}
  .tile-inv{grid-column:2;grid-row:2}
  .tile-price{grid-column:1 / span 2;grid-row:3}
  .tile-cost{grid-column:1 / span 2;grid-row:4}
  .tile-pm{grid-column:1 / span 2;grid-row:5}
  .cycle-compare{gap:20px}
  .cc-arrow{width:60px}
  .stat-num{font-size:30px}
  .stats-row{flex-direction:column;gap:20px}
}
@media (max-width:560px){
  :root{--pad:20px}
  .hero-title{font-size:38px;line-height:44px}
  .email-field{flex-wrap:nowrap;height:52px;padding-left:20px}
  .email-field .btn{padding:12px 16px}
  .sb-text{font-size:11px}
  .sticky-bar{padding:0 16px}
  .footer-cols{gap:32px}
  .stat-num{font-size:24px}
}

/* ===================== SCROLL REVEAL ANIMATIONS ===================== */
@media (prefers-reduced-motion: no-preference){
  .reveal{
    opacity:0;transform:translateY(26px);filter:blur(8px);
    transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), filter .7s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform,filter;
  }
  .reveal.in{opacity:1;transform:none;filter:blur(0)}

  /* banner rises up further + gentle settle */
  .reveal-rise{
    opacity:0;transform:translateY(72px) scale(.985);filter:blur(10px);
    transition:opacity 1.3s cubic-bezier(.22,.61,.36,1), transform 1.3s cubic-bezier(.22,.61,.36,1), filter 1.3s cubic-bezier(.22,.61,.36,1);
    will-change:opacity,transform,filter;
  }
  .reveal-rise.in{opacity:1;transform:none;filter:blur(0)}

  /* stagger */
  .reveal[data-delay="1"]{transition-delay:.08s}
  .reveal[data-delay="2"]{transition-delay:.16s}
  .reveal[data-delay="3"]{transition-delay:.24s}
  .reveal[data-delay="4"]{transition-delay:.32s}
}

/* ===================== BOQ / MODULE POPUP ===================== */
.mpop{
  position:fixed;inset:0;z-index:300;
  display:flex;align-items:flex-start;justify-content:center;
  padding:4vh 20px;
  opacity:0;visibility:hidden;transition:opacity .42s cubic-bezier(.22,1,.36,1), visibility .42s;
}
.mpop.open{opacity:1;visibility:visible}
.mpop-backdrop{position:absolute;inset:0;background:rgba(10,10,10,.8);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;transition:opacity .42s cubic-bezier(.22,1,.36,1)}
.mpop.open .mpop-backdrop{opacity:1}
.mpop-panel{
  position:relative;z-index:1;display:flex;flex-direction:column;
  width:min(1107px,92vw);max-height:92vh;overflow:hidden;
  background:#fff;border-radius:26px;
  box-shadow:0 40px 90px rgba(0,0,0,.45);
  transform:translateY(14px) scale(.992);opacity:0;will-change:transform,opacity;
  transition:transform .54s cubic-bezier(.22,1,.36,1), opacity .4s cubic-bezier(.22,1,.36,1);
}
.mpop.open .mpop-panel{transform:none;opacity:1}
.mpop-close{
  position:absolute;top:22px;right:22px;z-index:5;
  width:34px;height:34px;border-radius:50%;border:1px solid var(--border);
  background:#fff;color:#111;display:inline-flex;align-items:center;justify-content:center;
  cursor:pointer;transition:background .2s ease,color .2s ease;
}
.mpop-close:hover{background:#111;color:#fff;border-color:#111}
.mpop-body{overflow:auto;padding:52px 60px 56px}

/* --- BOQ page content --- */
.boq-top{display:flex;gap:40px;align-items:flex-start}
.boq-intro{flex:1;min-width:0;max-width:660px}
.boq-title{font-weight:600;font-size:30px;color:#000;margin-bottom:20px}
.boq-intro p{font-size:16px;line-height:1.55;color:#4a4944;margin-bottom:16px}
.boq-try{margin-top:8px}
.boq-checks{list-style:none;display:flex;flex-direction:column;gap:9px;padding-top:4px;flex-shrink:0}
.boq-checks li{display:flex;align-items:center;gap:9px;font-size:14.5px;color:#000}
.boq-checks li img{width:18px;height:18px;flex-shrink:0}
.boq-shot{background:#f7f7f7;border-radius:16px;padding:26px;margin-top:64px;overflow:hidden}
.boq-shot img{display:block;width:100%;height:auto;border-radius:6px}
/* crop the thin black line at the very top of the BOQ table screenshot */
.boq-shot-table img{clip-path:inset(4px 0 0 0);margin-top:-4px}
.boq-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;align-items:start}
.boq-two .boq-shot{margin-top:0;height:340px;display:flex;align-items:center;justify-content:center}
.boq-two .boq-shot img{width:100%;height:100%;object-fit:contain}
.boq-cap{font-size:14px;line-height:1.5;color:#4a4944;margin-top:14px}
.boq-pdf{margin-top:64px}
.boq-shot-grad{background:linear-gradient(180deg,#f7f7f7 0%,#ededed 100%);padding:34px;display:flex;align-items:center;justify-content:center}
.boq-pdf-pages{display:flex;gap:9px;width:59%;max-width:600px}
.boq-pdf-pages img{width:50%;height:auto;border-radius:4px}
.boq-pdf-foot{display:flex;align-items:center;justify-content:space-between;gap:32px;margin-top:16px}
.boq-pdf-foot .boq-cap{margin-top:0;max-width:700px}
.boq-dl{flex-shrink:0}
.boq-dl-ic{width:18px;height:18px}
/* three-up feature row — Figma 30026:237902 (icon / heading / body, 3 equal columns) */
.boq-feats{list-style:none;display:grid;grid-template-columns:repeat(3,1fr);gap:56px;margin-top:64px}
.boq-feats li{min-width:0}
.boq-feat-ic{display:block;color:#111}
.boq-feats h3{font-size:17px;font-weight:600;color:#000;margin:20px 0 10px}
.boq-feats p{font-size:14.5px;line-height:1.6;color:#4a4944}
/* closing CTA */
.boq-cta{margin-top:64px;padding-top:56px;border-top:1px solid #e9e9e9;text-align:center}
.boq-cta h3{font-size:32px;font-weight:600;color:#000;margin-bottom:24px}
.boq-cta-btns{display:flex;justify-content:center;gap:12px;flex-wrap:wrap}

/* --- Cost Analysis popup: card crops already include their grey card bg --- */
.ca-shot{border-radius:16px;overflow:hidden;margin-top:64px;display:block}
.ca-shot img{display:block;width:100%;height:auto}
.ca-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:64px;align-items:start}
.ca-two .ca-shot{margin-top:0}

/* ===================== SERVICES PAGE ===================== */
.svc-hero{padding:150px 0 70px;background:linear-gradient(180deg,#eefff7 0%,#fff 100%);text-align:center;overflow:hidden}
.svc-hero .container{max-width:1000px}
.svc-hero-title{font-weight:600;font-size:52px;line-height:1.1;letter-spacing:-1px;color:var(--ink)}
.svc-hero-sub{margin:22px auto 0;max-width:620px;font-size:17px;line-height:1.6;color:var(--muted)}
.svc-hero .btn{margin-top:32px}
.svc-hero-form{margin:34px auto 0}
.svc-hero.grey{background:linear-gradient(180deg,#fff 0%,#f6f6f6 100%)}
.svc-hero-cards.three{grid-template-columns:repeat(3,1fr);gap:20px;max-width:none}
.svc-hero-media{max-width:var(--maxw);margin:56px auto 0;padding:0 var(--pad)}
.svc-hero-cards{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start;max-width:843px;margin:0 auto}
.svc-hero-cards img{width:100%;height:auto;display:block}
.svc-hero-feats{display:grid;grid-template-columns:repeat(4,1fr);gap:80px;text-align:left;padding-top:80px;padding-bottom:100px}
.svc-hf-ic{display:inline-flex;color:#8a8a86;margin-bottom:18px}
.svc-hf p{font-size:15px;line-height:1.55;color:var(--ink);max-width:250px}

/* section headers */
.svc-head{max-width:820px;margin:0 auto 60px;text-align:center}
.svc-head.left{text-align:left;margin-left:0}
.svc-head .body-16{margin-top:18px}

/* complete control — 3 columns with stats */
.svc-control{padding:110px 0}
.svc-control-head{margin-bottom:56px;max-width:760px}
.svc-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:48px;border-top:1px solid var(--border);padding-top:48px}
.svc-cols.cards{gap:24px;border-top:0;padding-top:0}
.svc-cols.cards .svc-col{background:#f8f9fb;border-radius:14px;padding:30px 28px 34px}
.svc-col h3{font-weight:600;font-size:20px;margin-bottom:14px}
.svc-col p{font-size:15px;line-height:1.55;color:var(--muted)}
.svc-col .svc-stat{margin-top:26px;font-weight:600;font-size:34px;color:var(--green)}
.svc-col .svc-stat-lbl{margin-top:4px;font-size:12px;letter-spacing:.5px;color:var(--light);text-transform:uppercase}

/* collaboration — 2 cards */
.svc-collab{padding:110px 0}
.svc-collab-grid{display:grid;grid-template-columns:1fr 1fr;gap:74px;align-items:center}
.svc-collab-copy h2{margin-bottom:22px}
.svc-collab-copy p{font-size:15px;line-height:1.7;color:var(--muted)}
.svc-collab-media{border-radius:16px;overflow:hidden}
.svc-collab-media img{width:100%;height:auto;display:block}
.svc-collab-title{text-align:center;font-weight:600;font-size:38px;line-height:1.15;margin-bottom:50px}
.svc-two{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.svc-card{background:var(--surface);border-radius:20px;padding:44px 44px 0;overflow:hidden;display:flex;flex-direction:column}
.svc-card h3{font-weight:600;font-size:24px;margin-bottom:14px}
.svc-card p{font-size:15px;line-height:1.55;color:var(--muted);max-width:460px}
.svc-card-media{margin-top:32px}
.svc-card-media img{width:100%;height:auto;display:block;border-radius:10px 10px 0 0}

/* powerful tools — dark */
.svc-tools{background:var(--dark);color:#fff;padding:110px 0}
.svc-tools.light{background:#ebf3fc;color:var(--ink)}
.svc-tools.light .svc-head h2{color:var(--ink)}
.svc-tools.light .svc-head .body-16{color:var(--muted)}
.svc-tools.light .svc-tool-card{background:#fff;border-color:#dce7f6}
.svc-tools.light .svc-tool-card .shot{background:#f4f8fd}
.svc-tools.light .svc-tool-card p{color:var(--muted)}
.svc-tools.light .svc-head{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.svc-tools.light .svc-head .body-16{margin-top:0;padding-top:8px}
.svc-tools.grey{background:#f8f9fb;color:var(--ink)}
.svc-tools.grey .svc-head h2{color:var(--ink)}
.svc-tools.grey .svc-head .body-16{color:var(--muted)}
.svc-tools.grey .svc-tool-card{background:#fff;border-color:#e9eaee}
.svc-tools.grey .svc-tool-card .shot{background:#f4f5f7}
.svc-tools.grey .svc-tool-card p{color:var(--muted)}
/* cost analysis page (Figma 30189:251057) */
.svc-hero.flat{background:#f8f9fb}
.svc-hero.flat .container{max-width:1140px}
.ca-hero-shot{margin-top:52px;text-align:center}
.ca-hero-shot img{max-width:min(645px,100%);height:auto;display:block;margin:0 auto;border-radius:12px}
/* split variant: the shot is the white card, text sits on the band below it */
.svc-tools.split .svc-tool-card{background:transparent;border:0;padding:0;overflow:visible}
.svc-tools.split .svc-tool-card .shot{background:#fff;border-radius:16px;padding:0;overflow:hidden;margin-top:0}
.svc-tools.split .svc-tool-card .shot img{border-radius:16px}
.svc-tools.split .svc-tool-card h3{margin:26px 0 12px;font-size:24px}
.svc-tools.split .svc-tool-card p{padding-bottom:0;font-size:15px}
.svc-tools.grey.split .svc-head{max-width:none;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start}
.svc-tools.grey.split .svc-head .body-16{margin-top:0;padding-top:8px}
/* feature grid with a screenshot above the icon */
.svc-grid.shots .svc-feature{display:flex;flex-direction:column;padding:28px 28px 32px}
.svc-feature-shot.top{margin:0 0 26px}
.svc-feature-shot.top img{width:100%;height:auto;display:block;border-radius:12px}
/* more visibility */
.ca-visibility{padding:30px 0 110px}
.ca-vis-title{text-align:center;margin-bottom:52px}
.ca-vis-two{display:grid;grid-template-columns:1fr 1fr;gap:25px}
.ca-vis-card{background:#f8f9fb;border-radius:16px;padding:40px 40px 0;overflow:hidden;display:flex;flex-direction:column}
.ca-vis-card h3{font-weight:600;font-size:24px;line-height:1.25;margin-bottom:16px}
.ca-vis-card p{font-size:15px;line-height:1.6;color:var(--muted)}
.ca-vis-card figure{margin-top:30px}
.ca-vis-card figure img{width:100%;height:auto;display:block;border-radius:12px 12px 0 0}
/* bill of quantities page (Figma 30189:251908) */
.boq-featband{background:#f1f1f1}
.boq-featband .svc-hero-feats{padding-top:62px;padding-bottom:62px}
.boq-move{padding:90px 0}
.boq-move-panel{background:linear-gradient(180deg,#eff6fe 0%,#d9e7f9 100%);border-radius:20px;
  display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:60px 56px}
.boq-move-shot img{width:100%;height:auto;display:block;border-radius:12px;
  box-shadow:0 18px 40px rgba(20,40,80,.12)}
.boq-move-copy h2{margin-bottom:18px}
.boq-move-copy p{font-size:15px;line-height:1.7;color:var(--muted)}
.svc-grid.pair{grid-template-columns:1fr 1fr;margin-top:24px}
.svc-tools .svc-head h2{color:#fff}
.svc-tools .svc-head .body-16{color:#9a9a9a}
.svc-tools-two{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:56px}
.svc-tool-card{background:#161515;border:1px solid #262525;border-radius:20px;padding:34px 34px 0;overflow:hidden}
.svc-tool-card .shot{background:#0b0b0b;border-radius:12px;margin-top:26px;overflow:hidden}
.svc-tool-card .shot img{width:100%;height:auto;display:block}
.svc-tool-card h3{font-weight:600;font-size:22px;margin:26px 0 12px}
.svc-tool-card p{font-size:14px;line-height:1.55;color:#9a9a9a;padding-bottom:34px}

/* feature grid */
.svc-features{padding:110px 0}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:56px}
.svc-grid.two{grid-template-columns:1fr 1fr;gap:27px}
.svc-grid.two .svc-feature{background:#f8f9fb;padding:32px 32px 0;display:flex;flex-direction:column}
.svc-feature-shot{margin:28px -0 0;padding-bottom:32px}
.svc-feature-shot img{width:100%;height:auto;display:block;border-radius:12px}
.svc-feature{background:var(--surface);border-radius:16px;padding:34px 30px;transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease}
.svc-feature:hover{transform:translateY(-4px);box-shadow:0 16px 34px rgba(0,0,0,.08)}
.svc-feature-ic{width:44px;height:44px;border-radius:11px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;margin-bottom:22px;color:#111}
.svc-feature h3{font-weight:600;font-size:18px;margin-bottom:12px}
.svc-feature p{font-size:14px;line-height:1.55;color:var(--muted)}

@media (max-width:1100px){
  .svc-hero-title{font-size:40px}
}
@media (max-width:860px){
  .svc-cols{grid-template-columns:1fr;gap:36px}
  .svc-two{grid-template-columns:1fr}
  .svc-tools-two{grid-template-columns:1fr}
  .svc-grid{grid-template-columns:1fr 1fr}
  .svc-hero-feats{grid-template-columns:1fr 1fr;gap:32px}
  .svc-hero-title{font-size:34px}
}
@media (max-width:560px){
  .svc-grid{grid-template-columns:1fr}
  .svc-hero-feats{grid-template-columns:1fr}
}

/* ===================== NAV SERVICES MEGA-MENU ===================== */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-link{display:inline-flex;align-items:center;gap:5px;font-size:13px;color:#000;
  padding:8px 16px;border-radius:100px;font-weight:400;transition:.15s;cursor:pointer}
.nav-drop-link.active{background:#fff;font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.nav-drop:hover .nav-drop-link:not(.active){background:rgba(255,255,255,.5)}
.nav-chev{width:9px;height:9px;flex-shrink:0;transition:transform .25s ease}
.nav-drop:hover .nav-chev{transform:rotate(180deg)}
/* invisible hover bridge under the trigger so the cursor can cross into the menu */
.nav-drop::after{content:"";position:absolute;left:-12px;right:-12px;top:100%;height:34px}
.nav-mega{
  position:fixed;left:50%;top:92px;transform:translateX(-50%) translateY(8px);
  width:min(960px,94vw);z-index:120;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,.61,.36,1), visibility .25s;
}
.nav-drop:hover .nav-mega{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.nav-mega-inner{
  background:#fff;border-radius:22px;border:1px solid rgba(0,0,0,.05);
  box-shadow:0 26px 60px rgba(0,0,0,.16);
  padding:34px 40px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px 44px;
}
.mega-cat{font-size:11px;letter-spacing:1px;font-weight:600;color:#8a8f98;text-transform:uppercase;margin-bottom:16px;padding-left:10px}
.mega-item{display:flex;gap:14px;align-items:flex-start;padding:10px;border-radius:12px;cursor:pointer;
  transition:background .2s ease, box-shadow .2s ease, transform .2s cubic-bezier(.22,.61,.36,1)}
.mega-item + .mega-item{margin-top:2px}
.mega-item:hover{background:#f1f7f4;box-shadow:0 6px 18px rgba(13,148,91,.08);transform:translateX(2px)}
.mega-ic{flex-shrink:0;width:38px;height:38px;border-radius:10px;background:#eef6f2;
  display:flex;align-items:center;justify-content:center;color:var(--green2);
  transition:background .2s ease, color .2s ease}
.mega-item:hover .mega-ic{background:var(--green2);color:#fff}
.mega-t{display:block;font-weight:600;font-size:14px;color:#111;transition:color .2s ease}
.mega-item:hover .mega-t{color:var(--green2)}
.mega-d{display:block;font-size:12.5px;line-height:1.4;color:var(--muted);margin-top:3px}
@media (max-width:1100px){ .nav-drop{display:none} }

/* ===================== PROCUREMENT PAGE (split hero) ===================== */
.phero{padding:150px 0 0;background:linear-gradient(180deg,#fff 0%,#f7f7f7 100%);overflow:hidden}
.phero-inner{display:grid;grid-template-columns:1.02fr 1fr;gap:56px;align-items:center;padding-top:40px}
.phero-cards img{width:100%;height:auto;display:block}
.phero-copy h1{font-weight:600;font-size:48px;line-height:1.12;letter-spacing:-1px;color:var(--ink)}
.phero-copy>p{margin-top:22px;font-size:17px;line-height:1.6;color:var(--muted);max-width:520px}
.phero-copy .email-field{margin-top:36px;max-width:520px}
@media (max-width:960px){
  .phero-inner{grid-template-columns:1fr;gap:36px}
  .phero-copy h1{font-size:36px}
}

/* inventory section-2 left card: two overlapping panels */
.inv-stage{position:relative;aspect-ratio:516/300}
.inv-stage img{position:absolute;height:auto;border-radius:8px;box-shadow:0 10px 26px rgba(0,0,0,.10)}
.inv-chart{left:20%;top:0;width:80%;z-index:1}
.inv-snap{left:0;top:32%;width:63%;z-index:2}

/* ===== Our Smart System — expanding carousel (Figma 29578:74516) =====
   One active panel plus collapsed slivers; gradients, 21px gaps, 412px height and the
   70.7%-of-card screenshot width are taken from the frame. */
.smart{padding:100px 0}
.smart-head{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:30px}
.smart-nav{display:flex;gap:19px;flex-shrink:0}
.smart-arrow{width:57px;height:58px;border:1px solid var(--border);border-radius:6px;background:#fff;color:#111;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  transition:background .25s ease,color .25s ease,border-color .25s ease,opacity .25s ease}
.smart-arrow:hover:not(:disabled){background:#111;color:#fff;border-color:#111}
.smart-arrow:disabled{opacity:.3;cursor:default}
.smart-track{display:flex;gap:21px;height:412px}
.smart-slide{flex:8.6 1 0;min-width:0;padding:0;border:0;overflow:hidden;cursor:pointer;
  border-radius:18px;display:flex;align-items:var(--shot-align,center);justify-content:center;
  background:linear-gradient(180deg,#42e6e6 0%,#caeaea 100%);
  transition:flex-grow .62s cubic-bezier(.22,1,.36,1)}
.smart-slide:nth-child(odd){background:linear-gradient(180deg,#d4fceb 0%,#55dea3 100%)}
.smart-slide.is-active{flex-grow:74.2;cursor:default}
.smart-slide img{width:clamp(200px,calc(var(--shot-vw,45.5) * 1vw),var(--shot-max,655px));max-width:none;height:auto;display:block;border-radius:10px;
  opacity:0;transform:scale(.985);
  transition:opacity .4s ease .14s, transform .55s cubic-bezier(.22,1,.36,1) .14s}
.smart-slide.is-active img{opacity:1;transform:none}
.smart-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;margin-top:30px}
.smart-copy{max-width:1077px;min-width:0}
.smart-title{font-size:20px;font-weight:600;color:#000;margin-bottom:6px}
.smart-desc{font-size:16px;line-height:1.5;color:var(--muted)}
.smart-cta{flex-shrink:0}
@media (max-width:900px){
  .smart{padding:72px 0}
  .smart-track{height:300px;gap:14px}
  .smart-slide{flex-grow:12}
  .smart-slide.is-active{flex-grow:58}
  .smart-slide img{width:clamp(180px,calc(var(--shot-vw,45.5) * 1.28vw),var(--shot-max,655px))}
  .smart-foot{flex-direction:column;align-items:flex-start;gap:20px}
  .smart-arrow{width:48px;height:48px}
}
/* ===== Popup motion — Figma 30026:237902 (BOQ), 30189:213029 (Price Intelligence),
   30189:213639 (Project Management), 30189:214055 (Inventory), 30189:214964 (Requisitions)
   ====================================================================================
   Scroll-triggered: each [data-reveal] group reveals once as it enters the popup body.
   Offsets, easings and stagger order come from the Figma motion data; all popups share
   one vocabulary so they feel identical. Hidden state needs .reveal-ready, added by JS,
   so content stays visible if scripting is unavailable. */
@media (prefers-reduced-motion: no-preference){
  #boqModal.reveal-ready .boq-top .boq-intro, #mpiModal.reveal-ready .boq-top .boq-intro, #pmModal.reveal-ready .boq-top .boq-intro, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-intro, #mreqModal.reveal-ready .boq-top .boq-intro{opacity:0;translate:-40px 0px;transition:opacity 350ms cubic-bezier(.16,1,.3,1) 0ms, translate 350ms cubic-bezier(.16,1,.3,1) 0ms} /* 237942 / 213038 */
  #boqModal.reveal-ready .boq-top.is-in .boq-intro, #mpiModal.reveal-ready .boq-top.is-in .boq-intro, #pmModal.reveal-ready .boq-top.is-in .boq-intro, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-intro, #mreqModal.reveal-ready .boq-top.is-in .boq-intro{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks, #mpiModal.reveal-ready .boq-top .boq-checks, #pmModal.reveal-ready .boq-top .boq-checks, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks, #mreqModal.reveal-ready .boq-top .boq-checks{opacity:0;translate:30px 0px;transition:opacity 420ms cubic-bezier(.16,1,.3,1) 70ms, translate 420ms cubic-bezier(.16,1,.3,1) 70ms} /* 237948 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks, #mpiModal.reveal-ready .boq-top.is-in .boq-checks, #pmModal.reveal-ready .boq-top.is-in .boq-checks, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks, #mreqModal.reveal-ready .boq-top.is-in .boq-checks{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(1) img, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(1) img, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(1) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(1) img, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(1) img{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 105ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 105ms} /* check icon 1 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) img, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) img, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) img, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) img{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(2) img, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(2) img, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(2) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(2) img, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(2) img{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 175ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 175ms} /* check icon 2 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) img, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) img, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) img, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) img{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(3) img, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(3) img, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(3) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(3) img, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(3) img{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 245ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 245ms} /* check icon 3 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) img, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) img, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) img, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) img{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(4) img, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(4) img, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(4) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(4) img, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(4) img{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 315ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 315ms} /* check icon 4 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) img, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) img, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) img, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) img{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(5) img, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(5) img, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(5) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(5) img, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(5) img{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 385ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 385ms} /* check icon 5 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) img, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) img, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) img, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) img{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(6) img, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(6) img, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(6) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(6) img, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(6) img{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 455ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 455ms} /* check icon 6 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) img, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) img, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) img, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) img{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(7) img, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(7) img, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(7) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(7) img, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(7) img{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 525ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 525ms} /* check icon 7 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) img, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) img, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) img, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) img, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) img{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(1) span, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(1) span, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(1) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(1) span, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(1) span{opacity:0;translate:-15px 0px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 175ms, translate 175ms cubic-bezier(.16,1,.3,1) 175ms} /* check label 1 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) span, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) span, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) span, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(1) span{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(2) span, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(2) span, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(2) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(2) span, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(2) span{opacity:0;translate:-15px 0px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 245ms, translate 175ms cubic-bezier(.16,1,.3,1) 245ms} /* check label 2 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) span, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) span, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) span, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(2) span{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(3) span, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(3) span, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(3) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(3) span, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(3) span{opacity:0;translate:-15px 0px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 315ms, translate 175ms cubic-bezier(.16,1,.3,1) 315ms} /* check label 3 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) span, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) span, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) span, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(3) span{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(4) span, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(4) span, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(4) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(4) span, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(4) span{opacity:0;translate:-15px 0px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 385ms, translate 175ms cubic-bezier(.16,1,.3,1) 385ms} /* check label 4 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) span, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) span, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) span, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(4) span{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(5) span, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(5) span, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(5) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(5) span, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(5) span{opacity:0;translate:-15px 0px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 455ms, translate 175ms cubic-bezier(.16,1,.3,1) 455ms} /* check label 5 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) span, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) span, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) span, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(5) span{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(6) span, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(6) span, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(6) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(6) span, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(6) span{opacity:0;translate:-15px 0px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 525ms, translate 175ms cubic-bezier(.16,1,.3,1) 525ms} /* check label 6 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) span, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) span, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) span, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(6) span{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-top .boq-checks li:nth-child(7) span, #mpiModal.reveal-ready .boq-top .boq-checks li:nth-child(7) span, #pmModal.reveal-ready .boq-top .boq-checks li:nth-child(7) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top .boq-checks li:nth-child(7) span, #mreqModal.reveal-ready .boq-top .boq-checks li:nth-child(7) span{opacity:0;translate:-15px 0px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 595ms, translate 175ms cubic-bezier(.16,1,.3,1) 595ms} /* check label 7 */
  #boqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) span, #mpiModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) span, #pmModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) span, #invModal.reveal-ready .boq-top, #caModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) span, #mreqModal.reveal-ready .boq-top.is-in .boq-checks li:nth-child(7) span{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-cta, #mpiModal.reveal-ready .boq-cta, #pmModal.reveal-ready .boq-cta, #invModal.reveal-ready .boq-cta, #caModal.reveal-ready .boq-cta, #mreqModal.reveal-ready .boq-cta{opacity:0;scale:0.85 0.85;transition:opacity 245ms cubic-bezier(.45,1.45,.8,1) 0ms, scale 245ms cubic-bezier(.45,1.45,.8,1) 0ms} /* 237913 / 213615 */
  #boqModal.reveal-ready .boq-cta.is-in, #mpiModal.reveal-ready .boq-cta.is-in, #pmModal.reveal-ready .boq-cta.is-in, #invModal.reveal-ready .boq-cta, #caModal.reveal-ready .boq-cta.is-in, #mreqModal.reveal-ready .boq-cta.is-in{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-two .boq-cell:nth-child(1) .boq-shot, #mpiModal.reveal-ready .boq-two .boq-cell:nth-child(1) .boq-shot, #mreqModal.reveal-ready .boq-two .boq-cell:nth-child(1) .boq-shot{opacity:0;translate:-30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* 238348 / 213550 */
  #boqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(1) .boq-shot, #mpiModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(1) .boq-shot, #mreqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(1) .boq-shot{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-two .boq-cell:nth-child(2) .boq-shot, #mpiModal.reveal-ready .boq-two .boq-cell:nth-child(2) .boq-shot, #mreqModal.reveal-ready .boq-two .boq-cell:nth-child(2) .boq-shot{opacity:0;translate:30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 35ms, translate 280ms cubic-bezier(.16,1,.3,1) 35ms} /* 238376 / 213068 */
  #boqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(2) .boq-shot, #mpiModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(2) .boq-shot, #mreqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(2) .boq-shot{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-two .boq-cell:nth-child(1) .boq-cap, #mpiModal.reveal-ready .boq-two .boq-cell:nth-child(1) .boq-cap, #mreqModal.reveal-ready .boq-two .boq-cell:nth-child(1) .boq-cap{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 140ms, translate 280ms cubic-bezier(.16,1,.3,1) 140ms} /* 213033 */
  #boqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(1) .boq-cap, #mpiModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(1) .boq-cap, #mreqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(1) .boq-cap{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-two .boq-cell:nth-child(2) .boq-cap, #mpiModal.reveal-ready .boq-two .boq-cell:nth-child(2) .boq-cap, #mreqModal.reveal-ready .boq-two .boq-cell:nth-child(2) .boq-cap{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 175ms, translate 280ms cubic-bezier(.16,1,.3,1) 175ms} /* 213034 */
  #boqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(2) .boq-cap, #mpiModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(2) .boq-cap, #mreqModal.reveal-ready .boq-two.is-in .boq-cell:nth-child(2) .boq-cap{opacity:1;translate:0px 0px}
  #pmModal.reveal-ready .ca-two .ca-shot:nth-child(1){opacity:0;translate:-30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* pm pair left */
  #pmModal.reveal-ready .ca-two.is-in .ca-shot:nth-child(1){opacity:1;translate:0px 0px}
  #pmModal.reveal-ready .ca-two .ca-shot:nth-child(2){opacity:0;translate:30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 35ms, translate 280ms cubic-bezier(.16,1,.3,1) 35ms} /* pm pair right */
  #pmModal.reveal-ready .ca-two.is-in .ca-shot:nth-child(2){opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-shot-table{opacity:0;transition:opacity 210ms cubic-bezier(.16,1,.3,1) 0ms} /* 238519 */
  #boqModal.reveal-ready .boq-shot-table.is-in{opacity:1}
  #boqModal.reveal-ready .boq-feats li:nth-child(1) .boq-feat-ic{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 0ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 0ms} /* feat icon 1 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(1) .boq-feat-ic{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-feats li:nth-child(2) .boq-feat-ic{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 70ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 70ms} /* feat icon 2 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(2) .boq-feat-ic{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-feats li:nth-child(3) .boq-feat-ic{opacity:0;scale:0 0;transition:opacity 175ms cubic-bezier(.45,1.45,.8,1) 175ms, scale 175ms cubic-bezier(.45,1.45,.8,1) 175ms} /* feat icon 3 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(3) .boq-feat-ic{opacity:1;scale:1 1}
  #boqModal.reveal-ready .boq-feats li:nth-child(1) h3{opacity:0;translate:0px 10px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 70ms, translate 175ms cubic-bezier(.16,1,.3,1) 70ms} /* feat heading 1 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(1) h3{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-feats li:nth-child(2) h3{opacity:0;translate:0px 10px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 140ms, translate 175ms cubic-bezier(.16,1,.3,1) 140ms} /* feat heading 2 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(2) h3{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-feats li:nth-child(3) h3{opacity:0;translate:0px 10px;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 210ms, translate 175ms cubic-bezier(.16,1,.3,1) 210ms} /* feat heading 3 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(3) h3{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-feats li:nth-child(1) p{opacity:0;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 140ms} /* feat body 1 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(1) p{opacity:1}
  #boqModal.reveal-ready .boq-feats li:nth-child(2) p{opacity:0;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 210ms} /* feat body 2 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(2) p{opacity:1}
  #boqModal.reveal-ready .boq-feats li:nth-child(3) p{opacity:0;transition:opacity 175ms cubic-bezier(.16,1,.3,1) 280ms} /* feat body 3 */
  #boqModal.reveal-ready .boq-feats.is-in li:nth-child(3) p{opacity:1}
  #boqModal.reveal-ready .boq-shot-purchase{opacity:0;translate:0px 30px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* 237985 */
  #boqModal.reveal-ready .boq-shot-purchase.is-in{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-cap-purchase{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* 237906 */
  #boqModal.reveal-ready .boq-cap-purchase.is-in{opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-pdf .boq-pdf-pages img:nth-child(1){opacity:0;translate:-30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* 238241 */
  #boqModal.reveal-ready .boq-pdf.is-in .boq-pdf-pages img:nth-child(1){opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-pdf .boq-pdf-pages img:nth-child(2){opacity:0;translate:30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 70ms, translate 280ms cubic-bezier(.16,1,.3,1) 70ms} /* 238314 */
  #boqModal.reveal-ready .boq-pdf.is-in .boq-pdf-pages img:nth-child(2){opacity:1;translate:0px 0px}
  #boqModal.reveal-ready .boq-pdf .boq-pdf-foot{opacity:0;translate:0px 15px;transition:opacity 210ms cubic-bezier(.16,1,.3,1) 420ms, translate 210ms cubic-bezier(.16,1,.3,1) 420ms} /* 237907 */
  #boqModal.reveal-ready .boq-pdf.is-in .boq-pdf-foot{opacity:1;translate:0px 0px}
  #mpiModal.reveal-ready .mpi-shot-vendor{opacity:0;transition:opacity 210ms cubic-bezier(.16,1,.3,1) 0ms} /* 213257 */
  #mpiModal.reveal-ready .mpi-shot-vendor.is-in{opacity:1}
  #mpiModal.reveal-ready .mpi-cap-vendor{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* 213032 */
  #mpiModal.reveal-ready .mpi-cap-vendor.is-in{opacity:1;translate:0px 0px}
  #pmModal.reveal-ready .pm-shot-pnl{opacity:0;translate:0px 30px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* pm dashboard */
  #pmModal.reveal-ready .pm-shot-pnl.is-in{opacity:1;translate:0px 0px}
  #pmModal.reveal-ready .pm-cap-pnl{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* pm caption */
  #pmModal.reveal-ready .pm-cap-pnl.is-in{opacity:1;translate:0px 0px}
  #invModal.reveal-ready .inv-shot-a{opacity:0;translate:0px 30px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* inv a screenshot */
  #invModal.reveal-ready .inv-shot-a.is-in{opacity:1;translate:0px 0px}
  #invModal.reveal-ready .inv-shot-b{opacity:0;translate:0px 30px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* inv b screenshot */
  #invModal.reveal-ready .inv-shot-b.is-in{opacity:1;translate:0px 0px}
  #invModal.reveal-ready .inv-cap-a{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* inv a caption */
  #invModal.reveal-ready .inv-cap-a.is-in{opacity:1;translate:0px 0px}
  #invModal.reveal-ready .inv-cap-b{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* inv b caption */
  #invModal.reveal-ready .inv-cap-b.is-in{opacity:1;translate:0px 0px}
  #mreqModal.reveal-ready .mreq-shot-a{opacity:0;translate:0px 30px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* mreq material library */
  #mreqModal.reveal-ready .mreq-shot-a.is-in{opacity:1;translate:0px 0px}
  #mreqModal.reveal-ready .mreq-cap-a{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* mreq caption */
  #mreqModal.reveal-ready .mreq-cap-a.is-in{opacity:1;translate:0px 0px}
  #caModal.reveal-ready .ca-shot-big{opacity:0;translate:0px 30px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* ca project card */
  #caModal.reveal-ready .ca-shot-big.is-in{opacity:1;translate:0px 0px}
  #caModal.reveal-ready .ca-two .boq-cell:nth-child(1) .ca-shot{opacity:0;translate:-30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 0ms, translate 280ms cubic-bezier(.16,1,.3,1) 0ms} /* ca pair left */
  #caModal.reveal-ready .ca-two.is-in .boq-cell:nth-child(1) .ca-shot{opacity:1;translate:0px 0px}
  #caModal.reveal-ready .ca-two .boq-cell:nth-child(2) .ca-shot{opacity:0;translate:30px 0px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 35ms, translate 280ms cubic-bezier(.16,1,.3,1) 35ms} /* ca pair right */
  #caModal.reveal-ready .ca-two.is-in .boq-cell:nth-child(2) .ca-shot{opacity:1;translate:0px 0px}
  #caModal.reveal-ready .ca-two .boq-cell:nth-child(1) .boq-cap{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 140ms, translate 280ms cubic-bezier(.16,1,.3,1) 140ms} /* ca caption left */
  #caModal.reveal-ready .ca-two.is-in .boq-cell:nth-child(1) .boq-cap{opacity:1;translate:0px 0px}
  #caModal.reveal-ready .ca-two .boq-cell:nth-child(2) .boq-cap{opacity:0;translate:0px 20px;transition:opacity 280ms cubic-bezier(.16,1,.3,1) 175ms, translate 280ms cubic-bezier(.16,1,.3,1) 175ms} /* ca caption right */
  #caModal.reveal-ready .ca-two.is-in .boq-cell:nth-child(2) .boq-cap{opacity:1;translate:0px 0px}
}