/* Styles used by the inner pages (office, pricing, company, contact) and the
   shared chrome that every page carries. Loaded after sections.css. */

/* ---- current page in the nav ------------------------------------------- */
/* the nav markup is identical on every page, so the body class marks the spot */
.nav nav a{color:var(--ink)}   /* the links read as firmly as the rest of the page; grey is for hover */
.nav nav a:hover{color:var(--navy);text-decoration:none}
.p-office .nv-office,.p-pricing .nv-pricing,.p-company .nv-company,.p-research .nv-res,.p-roi .nv-res,.p-services .nv-res,.p-wiki .nv-res{color:var(--navy);
  background-image:none}   /* the current page is marked by its darker colour only: no underline */

/* ---- menu for narrow screens ------------------------------------------- */
/* a native <details>, so it opens with JavaScript off. Webflow's own Navbar
   component replaces this on transfer. */
/* Nav dropdown (Resources), after Stripe's nav menus: a panel under
   the bar with an icon, a title and one line per link. A mouse opens it on hover
   (only where hover exists, so a tap on a tablet does not stick); a click or tap
   toggles .open from the script in partials/nav.html; Escape and a click elsewhere
   close it. Closing waits a beat so a diagonal move to the panel does not drop it.
   In Webflow this is the native Dropdown. Hidden at 991 with the bar links. */
.nav .wrap{position:relative}
/* top-level items: a soft pill on hover, a blue underline on the current section */
.nav nav{gap:16px}   /* each link carries 12px of its own padding, so this reads as 40px between the words */
.nav nav>a,.nav nav .nd-t{padding:8px 12px;border-radius:6px;transition:background-color .15s ease,color .15s ease}
.nav nav>a:hover,.nav nav .nd-t:hover,.nav nav .nd.open .nd-t{background-color:var(--hover);color:var(--navy)}
/* scrolled: shorter, with a shadow (class set by the script in partials/nav.html) */
.nav,.nav .wrap{transition:height .2s ease,box-shadow .2s ease}
.nav.scrolled{height:60px;box-shadow:0 6px 20px -8px rgba(2,37,79,.18)}
.nav.scrolled .wrap{height:60px}
.nav nav{align-self:stretch;align-items:center}
.nd{position:relative;display:flex;align-items:center;height:100%}
.nav nav .nd-t{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.nd-t:after{content:"";width:6px;height:6px;margin-top:-3px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .15s ease}
.nd-panel{position:absolute;top:100%;display:grid;background:#fff;border:1px solid var(--line);border-top:0;border-radius:0 0 var(--r) var(--r);
  box-shadow:0 30px 60px -20px rgba(2,37,79,.25);overflow:hidden;
  visibility:hidden;opacity:0;transform:translateY(-6px);transition:opacity .15s ease .12s,transform .15s ease .12s,visibility 0s linear .27s}
/* Product: after Notion's product menu. A heading row, three cards, each with a small
   live piece of the Office, and a footer strip. Wider than Resources, so it
   centres on the bar instead of under its trigger. */
.nav .nd-prod{position:static}
.nd-p0{left:50%;width:880px;margin-left:-440px;display:block}
.nd-ph{display:flex;justify-content:space-between;align-items:center;padding:20px 24px 12px}
.nd-ph>span{font:500 14px var(--web);color:var(--t4)}
.nav nav .nd-arrow{display:inline-flex;align-items:center;gap:6px;font:600 14px var(--web);color:var(--btn)}
.nav nav .nd-arrow:after{content:"→"}
.nav nav .nd-arrow:hover{color:var(--blue-d);text-decoration:none}
.nd-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 20px 20px}
.nav nav .nd-card{display:flex;flex-direction:column;padding:14px 14px 18px;border:1px solid var(--line);border-radius:var(--r);background:var(--cloud);color:var(--ink);transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.nav nav .nd-card:hover{text-decoration:none;background:#fff;border-color:var(--rail);box-shadow:0 10px 24px rgba(2,37,79,.08)}
.nd-card b{padding:0 4px;font:700 17px/1.3 var(--display);letter-spacing:-.01em;color:var(--navy)}
.nd-card>span:last-child{margin-top:4px;padding:0 4px;font:400 14px/1.45 var(--web);color:var(--mute)}

/* the card visuals: small live pieces of the Office, drawn like its product views */
.nd-vis{display:grid;place-items:center;height:132px;margin-bottom:14px;border-radius:6px;background:#fff;border:1px solid var(--line);
  background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:14px 14px}
.nd-mini{display:flex;flex-direction:column;gap:6px;width:82%;padding:12px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 20px rgba(2,37,79,.1);text-align:left}
.nd-mini small{font:600 10px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.nd-card .nd-mini b{padding:0;font:600 12.5px/1.35 var(--web);color:var(--navy)}
.nd-acts{display:flex;gap:6px;margin-top:2px}
.nd-acts em{padding:4px 10px;border-radius:5px;border:1px solid var(--line);font:600 11px var(--web);font-style:normal;color:var(--navy);background:#fff}
.nd-acts .nd-yes{background:var(--blue);border-color:var(--blue);color:#fff}
.nd-org{display:flex;flex-direction:column;align-items:center}
.nd-you{padding:3px 10px;border-radius:5px;background:var(--navy);color:#fff;font:600 11px var(--web);font-style:normal}
.nd-stem{width:1px;height:12px;background:var(--rail)}
.nd-seats{position:relative;display:flex;gap:8px;padding-top:12px}
.nd-seats:before{content:"";position:absolute;top:0;left:32px;right:32px;height:1px;background:var(--rail)}
.nd-seats>span{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:64px;padding:8px 4px;border-radius:6px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 12px rgba(2,37,79,.08);font:600 10.5px var(--web);color:var(--navy)}
.nd-seats>span:before{content:"";position:absolute;top:-13px;left:50%;width:1px;height:12px;background:var(--rail)}
.nd-seats i{width:26px;height:26px;border-radius:50%;background-size:cover;background-position:center}
.nd-seats .nd-add{border-style:dashed;box-shadow:none;color:var(--blue)}
.nd-add i{display:grid;place-items:center;background:var(--sky)}
.nd-add i:before{content:"+";font:600 16px/1 var(--web);color:var(--blue)}
.nd-gates{gap:8px}
.nd-gates>span{display:grid;grid-template-columns:58px 1fr 56px;align-items:center;gap:8px}
.nd-gates em{font:500 11px var(--web);font-style:normal;color:var(--mute)}
.nd-gates strong{font:600 11px var(--web);color:var(--navy);text-align:right}
.nd-bar{position:relative;height:6px;border-radius:3px;background:var(--hover);overflow:hidden}
.nd-bar:after{content:"";position:absolute;left:0;top:0;bottom:0;border-radius:3px;background:var(--blue)}
.nd-b1:after{width:95%}
.nd-b2:after{width:70%}
.nd-b3:after{width:50%;background:var(--green)}
/* Improve: cost per finished item falling under the median as a seat learns
   (art/nd-cost.svg: a smooth curve, soft fill, dashed median at 50% height). No
   axis numbers, so nothing is invented; the bonus is the product's own rule. */
.nd-cost{gap:8px}
.nd-chart{position:relative;display:block;height:58px}
.nd-chart img{display:block;width:100%;height:100%}
.nd-med{position:absolute;right:0;top:calc(50% - 16px);font:500 10px var(--web);font-style:normal;color:var(--t4)}
.nd-bonus{position:absolute;right:0;bottom:-2px;padding:2px 7px;border-radius:5px;background:#e7f6ee;font:600 10.5px var(--web);font-style:normal;color:var(--green);
  box-shadow:0 2px 6px rgba(2,37,79,.08)}
.nd-pf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:14px 24px;border-top:1px solid var(--line);background:var(--cloud);font:500 14px var(--web);color:var(--ink)}
.nd-pf span{display:inline-flex;align-items:center;gap:8px}
.nd-pf img{width:18px;height:18px}
.nd-p2{left:50%;width:720px;margin-left:-360px;grid-template-columns:1fr 1fr 1fr}
.nd.open .nd-panel{visibility:visible;opacity:1;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}
.nd.open .nd-t:after{transform:rotate(225deg);margin-top:3px}
.nav nav .nd.open .nd-t{color:var(--navy)}
@media (hover:hover){
  .nd:hover .nd-panel{visibility:visible;opacity:1;transform:none;transition:opacity .15s ease,transform .15s ease,visibility 0s}
  .nd:hover .nd-t:after{transform:rotate(225deg);margin-top:3px}
  .nav nav .nd:hover .nd-t{color:var(--navy);background-color:var(--hover)}
}
.nd-grid{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;padding:20px}
.nd-col{display:flex;flex-direction:column;gap:4px;padding:24px 16px 28px;border-left:1px solid var(--line)}
.nd-col:first-child{border-left:0}
.nd-col.nd-tint{background:var(--cloud)}
.nd-col h4{margin:0 0 8px;padding:0 10px;font:600 12px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--t4)}
.nav nav .nd-item{display:flex;align-items:flex-start;padding:10px;border-radius:6px;color:var(--ink)}
.nav nav .nd-item:hover{background:var(--hover);text-decoration:none}
.nav nav .nd-item:focus-visible{outline:2px solid var(--blue);outline-offset:-2px}
.nd-item span{display:flex;flex-direction:column;gap:2px}
.nd-item b{font:600 14.5px/1.3 var(--web);color:var(--btn)}
.nd-item small{font:400 13px/1.4 var(--web);color:var(--mute)}
.nav nav .nd-item:hover b{color:var(--blue-d)}
.nd-item[aria-current="page"]{background:var(--cloud)}
.nd-item[aria-current="page"] b{color:var(--navy)}
/* the two bar buttons, after Stripe's: Sign in outlined, Contact sales filled with a
   chevron. Same height, same 6px corners, 12px apart. */
/* Sign in is a plain link, so "Talk to us" is the only button in the bar */
.nav .nv-login{display:inline-flex;align-items:center;height:36px;padding:0 4px;font:600 15px var(--web);color:var(--ink)}
.nav .nv-login:hover{color:var(--btn);text-decoration:none}
.nav .nv-cta{padding:0 18px;font-size:15px;background:var(--btn);color:#fff}   /* the nav's Talk to us: royal blue */
.nav .nv-cta:hover{background:var(--btn-h)}
.menu{display:none;position:relative}
.menu>summary{list-style:none;width:40px;height:40px;border:1px solid var(--line);border-radius:var(--rb);background:#fff;display:grid;place-items:center;cursor:pointer}
.menu>summary::-webkit-details-marker{display:none}
.menu>summary::after{content:"";width:16px;height:2px;background:var(--navy);box-shadow:0 -5px 0 var(--navy),0 5px 0 var(--navy)}
.menu>summary:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.menu-panel{position:absolute;right:0;top:48px;min-width:230px;max-height:calc(100vh - 96px);overflow-y:auto;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:8px;display:flex;flex-direction:column}
.menu-panel a{padding:10px 12px;border-radius:6px;color:var(--navy);font:600 15px var(--web)}
.menu-panel a:hover{background:var(--cloud);text-decoration:none}
.menu-panel h4{margin:10px 12px 2px;font:600 11px var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.menu-panel h4:first-child{margin-top:4px}
.menu-panel a[aria-current="page"]{background:var(--cloud);color:var(--btn)}

/* ---- page hero --------------------------------------------------------- */
/* quieter than the home hero: no product shot, tighter vertical rhythm */
.phero{background:var(--white);border-bottom:1px solid var(--line);padding:64px 0 56px}
.phero .wrap{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.phero h1{font:500 clamp(34px,4.2vw,52px)/1.06 var(--display);letter-spacing:-.02em}
.phero .lead{max-width:62ch}
.phero .ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
/* a page hero followed by its product shot: no rule between them (the shot reads as part of the hero) */
.phero.phero-shot{border-bottom:0;padding-bottom:0}
section.shot-sec{padding-top:40px}
.phero.phero-shot+.tour{padding-top:40px}   /* pricing: the plan tour is the hero picture */

/* ---- group heading inside a section ------------------------------------ */
.grp{display:flex;align-items:baseline;gap:12px;margin:0 0 16px}
.grp h3{font:600 20px/1.25 var(--display)}
.grp span{font-size:14px;color:var(--mute)}
.grp+.pages{margin-bottom:32px}

/* ---- "in every plan" list ---------------------------------------------- */
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.incl div{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;background:#fff;padding:16px 18px;font-size:15px;color:var(--ink)}
.incl .ico{width:18px;height:18px;flex:0 0 auto;margin-top:2px}

/* ---- principle cards (company) ----------------------------------------- */
.vals{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.val{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px;display:flex;flex-direction:column;gap:10px}
.val h3{font:600 19px/1.3 var(--display)}
.val p{color:var(--mute)}
.vals.vals-2{grid-template-columns:repeat(2,minmax(0,1fr))}

/* ---- workspace kinds (pricing: the unit you are billed per) ------------- */
.kinds{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}

.kind{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px;display:flex;flex-direction:column;gap:8px}
.kind .tag{font:700 12px var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--btn)}
.kind h3{font:600 19px/1.3 var(--display)}
.kind p{color:var(--mute)}

/* ---- questions --------------------------------------------------------- */
.faq{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.fq{border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px 22px}
.fq h3{font:600 16px/1.35 var(--display);margin:0 0 6px}
.fq p{font-size:15px;line-height:1.55;color:var(--mute)}

/* ---- two columns ------------------------------------------------------- */
.cols{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}

/* ---- contact form ------------------------------------------------------ */
/* markup mirrors a Webflow form, so the transfer is a like for like swap */
.form{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:26px}
.form label{display:block;font:700 13px var(--web);color:var(--navy);margin:0 0 6px}
.form .fld{margin:0 0 16px}
.form input,.form select,.form textarea{width:100%;height:46px;padding:0 14px;border:1px solid var(--line);border-radius:var(--rb);background:#fff;font:400 15px var(--web);color:var(--ink)}
.form textarea{height:110px;padding:12px 14px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid var(--blue);outline-offset:1px;border-color:var(--blue)}
.form .btn{width:100%}
.form .note{margin-top:12px;font-size:13px;color:var(--mute)}

/* ---- contact routes ---------------------------------------------------- */
.routes{display:flex;flex-direction:column;gap:12px}
.route{border:1px solid var(--line);border-radius:6px;background:#fff;padding:20px 22px;display:flex;flex-direction:column;gap:4px}
.route b{font:600 16px var(--display);color:var(--navy)}
.route span{font-size:14px;color:var(--mute)}
.route a{font:700 14px var(--web);margin-top:4px}

/* a control that is deliberately not live yet, rather than silently broken */
.btn.off{background:var(--cloud);color:var(--mute);border-color:var(--line);cursor:not-allowed}
.btn.off:hover{transform:none;background:var(--cloud)}

/* ---- running text ------------------------------------------------------ */
.prose{max-width:64ch;display:flex;flex-direction:column;gap:18px}
.prose p{font-size:18px;line-height:1.62;color:var(--mute)}
.prose p.pull{font:600 20px/1.5 var(--display);color:var(--navy)}

/* ---- unwritten copy ---------------------------------------------------- */
/* deliberately loud. Every one of these must be gone before the site is public. */
.todo{border:1px dashed var(--amber);border-radius:6px;background:#fffbf2;padding:16px 18px;color:#7a4a00;font-size:14px}
.todo b{display:block;font:600 12px var(--web);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}

/* ---- written but not approved ------------------------------------------ */
/* quieter than .todo because there IS copy here, but it is a draft and has not
   been through Wafi. Same rule: none of these markers ship. */
.draft{border-left:3px solid var(--blue);background:var(--sky);padding:14px 18px;border-radius:0 8px 8px 0;font-size:13.5px;line-height:1.5;color:var(--navy);max-width:64ch}
.draft b{display:block;font:600 12px var(--web);letter-spacing:.08em;text-transform:uppercase;margin-bottom:4px}

/* ---- breakpoints (Webflow's only: 991 / 767 / 479) --------------------- */
@media (max-width:991px){
  .menu{display:block}
  .incl,.vals{grid-template-columns:1fr 1fr}
  .cols{grid-template-columns:1fr;gap:28px}
}
@media (max-width:767px){
  .incl,.vals,.kinds,.faq,.vals.vals-2{grid-template-columns:1fr}
  .nav .nv-login{display:none}   /* it is in the menu panel */
  .phero{padding:44px 0 40px}
  .grp+.pages{margin-bottom:24px}
}
@media (max-width:479px){
  /* logo plus a button plus the burger will not fit 320px, and the burger is the
     only route to the other pages, so the header buttons give way. Both live in
     the menu panel, and every page still ends on a full-width call to action. */
  .nav .btn,.nav .nv-login{display:none}
}

/* a plain dark navy section, the footer's colour, for a section that should stand
   apart (company: "Who is behind it") */
.s-navy{background:#011a3b;color:#fff}
.s-navy h2{color:#fff}
.s-navy .prose p{color:#cfe0f5}
.s-navy .prose a{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* company, "Why we built it": the story on the left, the business journey on the
   right as a vertical roadmap (one dot and a rule per stage; stage 1 is where every
   workspace starts). Stacks under the story below 991. */
.co-why{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:72px;align-items:start}
.co-road{border:1px solid var(--line);border-radius:8px;background:#fff;padding:28px 28px 24px;box-shadow:0 18px 40px -28px rgba(2,37,79,.22)}
.co-road-h{margin:0 0 22px;display:flex;flex-direction:column;gap:4px}
.co-road-h b{font:600 17px var(--display);color:var(--navy)}
.co-road-h span{font-size:13.5px;color:var(--mute)}
.co-stages{list-style:none;margin:0;padding:0}
.co-st{position:relative;display:flex;flex-direction:column;gap:2px;padding:0 0 18px 32px}
/* the rule carries a blue fill (height 0 at rest) that the ROADMAP block in motion.css grows */
.co-st:before{content:"";position:absolute;left:6px;top:18px;bottom:-2px;width:2px;background:linear-gradient(var(--blue),var(--blue)) no-repeat center top/2px 0,var(--line)}
.co-st:last-child{padding-bottom:0}
.co-st:last-child:before{display:none}
.co-st:after{content:"";position:absolute;z-index:1;left:0;top:3px;width:14px;height:14px;box-sizing:border-box;border-radius:50%;border:2px solid #cdd7e3;background:#fff}
.co-st small{font:600 11px var(--web);letter-spacing:.08em;text-transform:uppercase;color:var(--t4)}
.co-st b{font:600 15px/1.3 var(--display);color:var(--navy)}
.co-st span{font-size:13px;line-height:1.45;color:var(--mute)}
.co-on:after{border-color:#4cc38a;background:#4cc38a;box-shadow:0 0 0 4px rgba(76,195,138,.2)}   /* the current stage is green, as the home journey card */
.co-on small{color:var(--btn)}
.co-road-f{margin:20px 0 0;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px;line-height:1.5;color:var(--t4)}
@media (max-width:991px){ .co-why{grid-template-columns:minmax(0,1fr);gap:48px} .co-road{max-width:520px} }
@media (max-width:479px){ .co-road{padding:22px 20px 20px} }

/* company in the services page's style (css/services.css): the pieces that page
   does not already carry */
.co-h1{margin:0;font:500 40px/1.18 var(--display);letter-spacing:-.02em;color:var(--navy);max-width:640px}
@media (max-width:991px){ .co-h1{font-size:34px} }
@media (max-width:479px){ .co-h1{font-size:28px} }
.phero.cg-hero{border-bottom:0}
.co-ctas{align-items:center;gap:24px;margin-top:8px}
.co-why .prose,.sv-light .prose{margin-top:32px}
.co-holds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:56px}
.gl-sec.sv .sv-in{margin-bottom:48px}
.sv .gl,.sv .gl-foot{position:relative;z-index:1}
/* the roadmap card as a services card */
.sv .co-road{border:0;box-shadow:0 30px 60px -12px rgba(2,37,79,.25),0 18px 36px -18px rgba(0,0,0,.3)}
/* the navy section keeps light type over the services type */
.sv.s-navy{background:#011a3b}
.sv.s-navy h2{color:#fff}
.sv.s-navy .sv-eye{color:#acb6dd}
@media (max-width:991px){ .co-holds{grid-template-columns:minmax(0,1fr);gap:32px} }

/* ==========================================================================
   BLUE TOP (body.bluetop: index, pricing), after Zip's hero. The nav sits on the royal
   blue (transparent, white links and logo) until the page scrolls, then returns to the
   usual white bar. JS only (.js): with it off the bar never learns it scrolled, so it
   stays white. Each page paints its own blue fade under it.
   ========================================================================== */
.bluetop .nav{margin-bottom:-72px}   /* the hero runs up under the sticky bar */
.bluetop .nav.scrolled{margin-bottom:-60px}   /* the bar takes no room in either state, so nothing jumps */
.js .bluetop .nav:not(.scrolled){background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.js .bluetop .nav:not(.scrolled) .logo{background-image:url(../assets/img/manelink-wordmark-white.svg)}   /* one lockup everywhere, the name only: white over the blue, dark navy on the white bar; only the colour changes on scroll */
.js .bluetop .nav:not(.scrolled) nav>a,.js .bluetop .nav:not(.scrolled) nav .nd-t{color:#fff}
.js .bluetop .nav:not(.scrolled) nav>a:hover,.js .bluetop .nav:not(.scrolled) nav .nd-t:hover,.js .bluetop .nav:not(.scrolled) nav .nd.open .nd-t,.js .bluetop .nav:not(.scrolled) nav .nd:hover .nd-t{background-color:rgba(255,255,255,.12);color:#fff}
.js .bluetop .nav:not(.scrolled) .nv-login{color:#fff}
.js .bluetop .nav:not(.scrolled) .nv-login:hover{color:#dbe3fb}
.js .bluetop .nav:not(.scrolled) .nv-cta{background:#fff;color:var(--btn)}
.js .bluetop .nav:not(.scrolled) .nv-cta:hover{background:#eef2fd}
.js .bluetop .nav:not(.scrolled) .menu>summary{background:transparent;border-color:rgba(255,255,255,.55)}
.js .bluetop .nav:not(.scrolled) .menu>summary::after{background:#fff;box-shadow:0 -5px 0 #fff,0 5px 0 #fff}

.js .p-pricing.bluetop .nav:not(.scrolled) .nv-pricing,.js .p-office.bluetop .nav:not(.scrolled) .nv-office{background-image:none}   /* no current-page underline on the blue either (was white on the blue */

/* pricing: one fade behind the headline and the request dashboard (.bt-fade wraps both) */
.bt-fade{background:radial-gradient(90% 40% at 0 0,rgba(8,18,70,.55),transparent 70%),
    radial-gradient(70% 35% at 100% 20%,rgba(96,131,226,.35),transparent 70%),
    linear-gradient(180deg,#152a84 0%,#1e39a3 18%,#2946b6 34%,#4a68d2 50%,#89a3ec 66%,#c4d2f7 80%,#eef2fd 91%,#fff 100%)}
.bt-fade .phero{background:transparent;padding-top:136px}
.bt-fade .phero h1{color:#fff}
.bt-fade .phero .lead{color:rgba(255,255,255,.86)}
.bt-fade .phero .eyebrow{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:#fff}
.bt-fade .phero .btn.p{background:#fff;color:var(--btn)}
.bt-fade .phero .btn.p:hover{background:#eef2fd}
.bt-fade .phero .btn.g{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.bt-fade .phero .btn.g:hover{background:rgba(255,255,255,.12)}
.bt-fade .phero .btn:focus-visible{outline-color:#fff}
/* header row as on the home page (hero.css .hh): a one-line headline in a lighter
   weight on the left, the lead and both buttons stacked on the right; stacks below 991 */
.p-pricing .bt-fade .phero .wrap,.p-office .bt-fade .phero .wrap{display:block}   /* these use the .hh header row */
.bt-fade .hh{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:32px 56px;width:100%;text-align:left}
.bt-fade .hh h1{max-width:none;margin:0;white-space:nowrap;font-size:clamp(56px,6vw,88px);font-weight:500;line-height:1.02;letter-spacing:-.03em}
.bt-fade .hh-side{display:flex;flex-direction:column;gap:22px;min-width:0;max-width:520px;justify-self:end}
.bt-fade .hh .lead{max-width:none;margin:0;font-size:19px;line-height:1.45;text-wrap:pretty}
.bt-fade .hh .ctas{justify-content:flex-start;margin:0;gap:14px}
.bt-fade .hh .btn{height:52px;padding:0 26px;font-size:16px}
@media (max-width:991px){
  .bt-fade .hh{grid-template-columns:minmax(0,1fr);gap:20px}
  .bt-fade .hh-side{justify-self:start;max-width:560px}
}
@media (max-width:767px){
  .bt-fade .hh h1{white-space:normal;font-size:44px}
  .bt-fade .hh .lead{font-size:17px}
}
@media (max-width:767px){ .bt-fade .phero{padding-top:112px} }
/* product: the block is taller (dashboard, then the three target cards), so the blue
   gives way to white by the lower half of the dashboard and the cards sit on white */
.p-office .bt-fade{background:radial-gradient(90% 30% at 0 0,rgba(8,18,70,.55),transparent 70%),
    radial-gradient(70% 25% at 100% 15%,rgba(96,131,226,.35),transparent 70%),
    linear-gradient(180deg,#152a84 0%,#1e39a3 13%,#2946b6 24%,#4a68d2 36%,#89a3ec 48%,#c4d2f7 60%,#eef2fd 70%,#fff 78%)}
.bt-fade .mt-band{background:transparent}



/* services: the hero takes the royal blue fade (as Home, Product and Pricing), lifting to
   white at its foot before the grey section below. The nav sits on the blue (.bluetop). */
.sv.sv-hero.sv-blue{padding-top:160px;
  background:radial-gradient(90% 60% at 0 0,rgba(8,18,70,.55),transparent 70%),
             radial-gradient(70% 50% at 100% 20%,rgba(96,131,226,.35),transparent 70%),
             linear-gradient(180deg,#152a84 0%,#1e39a3 24%,#2946b6 46%,#4a68d2 64%,#89a3ec 80%,#dfe6fb 93%,#fff 100%)}
.sv-hero.sv-blue .sv-guides i{background-image:linear-gradient(180deg,rgba(255,255,255,.12) 50%,transparent 50%)}
.sv-hero.sv-blue .sv-eye{color:#c7d2ff}
.sv-hero.sv-blue h1{color:#fff}
.sv-hero.sv-blue .sv-lead{color:rgba(255,255,255,.86)}
.sv-hero.sv-blue .sv-btn{background:#fff;color:var(--btn)}
.sv-hero.sv-blue .sv-btn:hover{background:#eef2fd}
.sv-hero.sv-blue .sv-rail{background:rgba(255,255,255,.28)}
@media (max-width:767px){ .sv.sv-hero.sv-blue{padding-top:128px} }

/* ---- contact: the page hero, then the form beside the three routes ------- */
.ct-hero{border-bottom:0;padding:64px 0 56px;   /* the wash runs into the white section, so no hairline */
  background:linear-gradient(180deg,#e4ecfb 0,#eef2fd 45%,#f7f9fe 78%,#fff 100%)}
.ct-hero h1{max-width:none;white-space:nowrap}   /* one line */
.ct-hero .lead{max-width:62ch;text-wrap:pretty}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:start}
.ct-form{padding:34px}
.ct-two{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.ct-form .btn{width:100%;margin-top:4px}
.ct-form .note{text-align:center}
.ct-side{display:flex;flex-direction:column;gap:16px}
.ct-card{border:1px solid #c9d3ef;border-radius:8px;background:#fff;padding:26px 28px}   /* the site card: white with a royal-grey outline */
.ct-card h3{margin:0 0 10px;font:600 19px/1.3 var(--display);color:var(--navy)}
.ct-card p{margin:0;color:var(--mute)}
@media (max-width:991px){ .ct-grid{grid-template-columns:minmax(0,1fr);gap:28px} }
@media (max-width:991px){ .ct-hero h1{white-space:normal} }
@media (max-width:767px){ .ct-two{grid-template-columns:1fr;gap:0} .ct-form{padding:24px} .ct-hero{padding:44px 0 40px} }
.ct-pick{margin:0 0 2px;font:600 13px var(--web);letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
.ct-form label span{float:right;font:400 12.5px var(--web);color:var(--mute);text-transform:none;letter-spacing:0}
.ct-form .note a{font-weight:600}