/* Pale Blue design system, shared by every page (2026-10-12).
   Loaded last in <head>, so it overrides each page's inline styles. That's also why some rules use
   !important: older page styles set heading weights and italics with more specific selectors.
   Headings: Figtree Light (closest free match to Biennale; light since 2026-10-15) with the highlighted words in blended blues.
   Buttons: primary = pill in blended blues with a white arrow circle; secondary = outline pill with a blue arrow circle. */

@font-face{font-family:'Figtree';src:url('fonts/figtree.woff2') format('woff2');font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --pb-text-blend:linear-gradient(100deg,#2F6BEA 0%,#2A1FCF 24%,#5C8EF5 50%,#2C1FC2 74%,#4F9BF2 100%);
  /* button stops are darker so white text keeps 4.5:1 or better on every one */
  --pb-blend:linear-gradient(100deg,#2C1FC2 0%,#2F4FE0 42%,#3A6FE8 72%,#2F6BEA 100%);
  --pb-blend-lit:linear-gradient(100deg,#3726DA 0%,#3557EA 40%,#3B66EC 70%,#3A6FE8 100%);
  --pb-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M8 7h9v9'/%3E%3C/svg%3E");
}

/* ── headings ── */
/* default heading spacing; zero specificity, so any page that sets its own still wins */
:where(h1,h2,h3){line-height:1.15}
:is(h1,h2,h3):not(.pb-x):not(footer *):not(nav *){font-family:'Figtree','Manrope',sans-serif!important}
:is(h1,h2):not(.pb-x):not(footer *):not(nav *){font-weight:300!important;letter-spacing:-0.03em!important}
/* light headlines (Danny, 2026-10-15, after stripe.com): h1/h2 and their blue words at 300, h3 at 400 (the big
   agency-comparison column titles at 300). Body text, buttons, the footer tagline and the chart numbers stay as they were. */
.hero h1 *:not(.pb-x){font-weight:300!important;letter-spacing:inherit!important}
.wm-sg-val{font-weight:300!important}
h3:not(.pb-x):not(footer *):not(nav *){font-weight:400!important;letter-spacing:-0.02em}
.vs-col h3{font-weight:300!important}
/* the footer's "How's your website doing?" line matches the headlines: light Figtree, its blue word in the blended blues */
footer .ft-line{font-family:'Figtree','Manrope',sans-serif!important;font-weight:300!important;letter-spacing:-0.03em}
footer .ft-line .hl{font-style:normal!important;font-weight:300!important;background:var(--pb-text-blend);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;padding-bottom:0.06em}
:is(h1,h2):not(.pb-x):not(footer *) :is(.hl,em):not(.pb-x){
  font-style:normal!important;font-weight:300!important;
  background:var(--pb-text-blend);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;padding-bottom:0.06em}

/* ── primary buttons ── */
.btn-main,.pc.feat .pc-btn,.gc-hero-cta,.gc-price-btn,.chk-btn,.submit-btn,.nav-cta{
  background:var(--pb-blend)!important;color:#fff!important;border:0!important;border-radius:999px!important;
  box-shadow:0 12px 26px -12px rgba(44,31,194,0.5)}
/* hover lights the button up instead of darkening it: brighter blues (white text still 4.5:1+), a soft glow, a 1px lift */
.btn-main,.pc.feat .pc-btn,.gc-hero-cta,.gc-price-btn,.chk-btn,.submit-btn,.nav-cta,.cta-split{transition:box-shadow .3s ease,transform .25s ease}
@media(hover:hover){
  :is(.btn-main,.pc.feat .pc-btn,.gc-hero-cta,.gc-price-btn,.chk-btn,.submit-btn,.nav-cta,.cta-split):hover{
    background:var(--pb-blend-lit)!important;color:#fff!important;transform:translateY(-1px);
    box-shadow:0 0 0 4px rgba(92,142,245,.16),0 14px 32px -10px rgba(58,111,232,.6),inset 0 1px 0 rgba(255,255,255,.22)!important}
}
:is(.btn-main,.gc-hero-cta,.gc-price-btn,.chk-btn,.submit-btn,.nav-cta,.cta-split):focus-visible{background:var(--pb-blend-lit)!important}
@media(prefers-reduced-motion:reduce){:is(.btn-main,.pc.feat .pc-btn,.gc-hero-cta,.gc-price-btn,.chk-btn,.submit-btn,.nav-cta,.cta-split):hover{transform:none}}
/* in-page buttons carry the arrow circle; the menu-bar button and full-width form buttons don't */
.btn-main:not(footer *):not(.cta-form *),.pc.feat .pc-btn,.gc-hero-cta,.gc-price-btn,.chk-btn{
  display:inline-flex!important;align-items:center;justify-content:center;gap:0.85rem;
  padding:0.5rem 0.55rem 0.5rem 1.5rem!important;min-height:50px;font-weight:600!important;font-size:0.98rem!important;text-decoration:none}
.btn-main:not(footer *):not(.cta-form *)::after,.pc.feat .pc-btn::after,.gc-hero-cta::after,.gc-price-btn::after,.chk-btn::after{
  content:'';flex:none;width:34px;height:34px;border-radius:50%;background:#fff;
  -webkit-mask:var(--pb-arrow) center/13px 13px no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;
  mask:var(--pb-arrow) center/13px 13px no-repeat exclude,linear-gradient(#000,#000)}
.gc-hero-cta > svg,.gc-price-btn > svg{display:none}
footer .btn-main,.cta-form .btn-main{border-radius:999px!important}
.submit-btn{min-height:50px;font-weight:600!important;font-size:0.98rem!important}

/* ── secondary buttons ── */
.btn-ghost,.btn-outline,.pc:not(.feat) .pc-btn,.chk-ghost,.faq-cta a{
  display:inline-flex!important;align-items:center;justify-content:center;gap:0.75rem;
  background:#fff!important;color:var(--signal,#2F4FE0)!important;border:1px solid rgba(47,79,224,0.35)!important;border-radius:999px!important;
  padding:0.45rem 0.5rem 0.45rem 1.4rem!important;min-height:50px;font-weight:600!important;font-size:0.98rem!important;text-decoration:none;box-shadow:none}
.btn-ghost::after,.btn-outline::after,.pc:not(.feat) .pc-btn::after,.chk-ghost::after,.faq-cta a::after{
  content:'';flex:none;width:32px;height:32px;border-radius:50%;background:var(--signal,#2F4FE0);
  -webkit-mask:var(--pb-arrow) center/12px 12px no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;
  mask:var(--pb-arrow) center/12px 12px no-repeat exclude,linear-gradient(#000,#000)}
.faq-cta a > svg{display:none}
@media(hover:hover){.btn-ghost:hover,.btn-outline:hover,.pc:not(.feat) .pc-btn:hover,.chk-ghost:hover,.faq-cta a:hover{border-color:var(--signal,#2F4FE0)!important;background:#F5F8FE!important}}

/* arrow buttons hug their label (Danny, 2026-10-15: a full-width pill left the arrow floating mid-button and read as too
   long). fit-content also stops flex and grid parents from stretching them, so on phones they sit at the start of their
   column, or centred where the column centres them. Full-width form submit buttons have no arrow and aren't affected. */
:is(.btn-main,.btn-ghost,.btn-outline,.pc-btn,.gc-hero-cta,.gc-price-btn,.chk-btn,.chk-ghost,.faq-cta a):not(footer *):not(.cta-form *){
  width:fit-content!important;max-width:100%;flex-grow:0!important}
.pc .pc-btn{display:inline-flex!important;justify-content:center}

/* the hero's split button (homepage hero, brand case study) */
.cta-split{background:var(--pb-blend)!important;box-shadow:0 14px 30px -12px rgba(44,31,194,0.5)!important}
/* the hero button's inner label and arrow stay white on hover */
.cta-split:hover .cs-label,.cta-split:focus-visible .cs-label{color:#fff!important;background:transparent!important;box-shadow:none!important}
.cta-split:hover .cs-icon,.cta-split:focus-visible .cs-icon{background:rgba(255,255,255,.22)!important;box-shadow:none!important}

/* bigger tap areas on phones for small links, without moving anything */
@media(max-width:768px){
  nav .logo,footer .ft-logo{padding-top:10px;padding-bottom:10px;margin-top:-10px;margin-bottom:-10px}
  a.ht-item,.contact-detail a,.cs-meta a{display:inline-block;padding-top:11px;padding-bottom:11px;margin-top:-11px;margin-bottom:-11px}
}

/* big display numbers (homepage "Why it matters" cards): Figtree in the blended blues, like the headlines */
.wm-sg-val{font-family:'Figtree','Manrope',sans-serif!important;background:var(--pb-text-blend);-webkit-background-clip:text;background-clip:text;color:transparent!important;-webkit-text-fill-color:transparent;padding-bottom:0.04em}
.wm-sg-cell::before{background:var(--pb-blend)!important}

/* ── pale blue dot cursor (pb-cursor.js; mouse and trackpad only) ── */
.pb-cur-dot,.pb-cur-ring{position:fixed;left:0;top:0;pointer-events:none;z-index:2147483646;opacity:0;transition:opacity .2s ease}
.pb-cur-dot{width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#2F4FE0;box-shadow:0 0 0 2px rgba(255,255,255,.85),0 0 10px rgba(47,79,224,.55)}
.pb-cur-ring{width:34px;height:34px;margin:-17px 0 0 -17px}
.pb-cur-ring::before{content:'';position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(47,79,224,.35);background:rgba(120,150,245,.06);transition:transform .25s ease,background-color .25s ease,border-color .25s ease}
html.pb-cur-on .pb-cur-dot,html.pb-cur-on .pb-cur-ring{opacity:1}
html.pb-cursor.pb-cur-on,html.pb-cursor.pb-cur-on *{cursor:none!important}
html.pb-cur-link .pb-cur-ring::before{transform:scale(1.45);background:rgba(120,150,245,.14);border-color:rgba(47,79,224,.5)}
html.pb-cur-down .pb-cur-ring::before{transform:scale(.8)}
html.pb-cur-link.pb-cur-down .pb-cur-ring::before{transform:scale(1.2)}
/* text fields keep the normal text cursor */
html.pb-cur-text .pb-cur-dot,html.pb-cur-text .pb-cur-ring{opacity:0}
html.pb-cursor.pb-cur-on :is(input,textarea,[contenteditable=true]):not([type=range]):not([type=submit]):not([type=checkbox]):not([type=radio]):not([type=button]){cursor:text!important}
@media(prefers-reduced-motion:reduce){.pb-cur-ring::before{transition:none}}

/* ── dark brand band (2026-10-14, from Softriver's kit: their near-black-to-blue gradient and the orbit symbol
   cropped large off the edge). The closing call to action on about, brand, solutions and work. /process keeps its
   own closing video, and the homepage keeps its sky-photo finale. Still: nothing moves. ── */
.cta-strip:not(.pc-close){position:relative;isolation:isolate;overflow:hidden;width:calc(100% - 3rem);max-width:1180px;margin:1.5rem auto 4.5rem;
  padding:5.5rem 2.5rem!important;border-radius:28px;color:#fff;
  background:
    radial-gradient(ellipse 62% 85% at 0% 0%,rgba(226,234,248,.85) 0%,rgba(122,136,162,.5) 30%,rgba(10,14,26,0) 62%),
    linear-gradient(112deg,#151B28 0%,#03061A 36%,#061B52 58%,#1B45A6 82%,#3368CF 100%);
  box-shadow:0 40px 80px -40px rgba(8,16,48,.55)}
.cta-strip:not(.pc-close)::before{content:"";position:absolute;z-index:-1;right:-9%;top:50%;width:min(560px,62%);aspect-ratio:100/104;transform:translateY(-50%);
  background:url('logo-r2-symbol-dark.svg') center/contain no-repeat;opacity:.32;pointer-events:none}
.cta-strip:not(.pc-close) h2{color:#fff!important}
.cta-strip:not(.pc-close) h2 :is(.hl,em){background:linear-gradient(100deg,#9CC0FF 0%,#6E9CF7 45%,#B9D2FF 100%)!important;-webkit-background-clip:text!important;background-clip:text!important;color:transparent!important;-webkit-text-fill-color:transparent}
.cta-strip:not(.pc-close) > p{color:rgba(236,242,255,.78)!important;max-width:560px;margin-left:auto;margin-right:auto}
/* buttons on the dark band: a white primary with a blue arrow circle, a glassy secondary */
.cta-strip:not(.pc-close) .btn-main{background:#fff!important;color:#0B1530!important;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.cta-strip:not(.pc-close) .btn-main::after{background:var(--pb-blend)}
.cta-strip:not(.pc-close) .btn-ghost{background:rgba(255,255,255,.08)!important;color:#fff!important;border-color:rgba(255,255,255,.38)!important}
.cta-strip:not(.pc-close) .btn-ghost::after{background:#fff}
@media(hover:hover){
  .cta-strip:not(.pc-close) .btn-main:hover{background:#EEF3FF!important;color:#0B1530!important;box-shadow:0 0 0 4px rgba(255,255,255,.14),0 14px 32px -12px rgba(0,0,0,.6)!important}
  .cta-strip:not(.pc-close) .btn-ghost:hover{background:rgba(255,255,255,.16)!important;border-color:#fff!important}
}
.cta-strip:not(.pc-close) :is(.btn-main,.btn-ghost):focus-visible{outline:3px solid rgba(255,255,255,.7);outline-offset:3px}
@media(max-width:760px){
  .cta-strip:not(.pc-close){width:calc(100% - 2rem);margin:1rem auto 3rem;padding:3.6rem 1.4rem!important;border-radius:22px}
  .cta-strip:not(.pc-close)::before{right:-28%;top:auto;bottom:-14%;transform:none;width:78%}
}

/* ── one switch style (2026-10-15, Danny: "look at uniformity of the pills/ctas"). Five toggles had two looks and four
   heights: homepage pricing (.path-btn), /process timeline (.tl-seg-pick .path-btn), /five-year-costs cards (.cc-sw) and
   chart (.fy-seg-btn), /contact (.cf-tab). Now: a soft track, and the chosen option in the blended blues. Sizes on
   phones stay as each page set them. ── */
:is(.path-seg,.cc-switch,.fy-seg,.cf-switch){background:#F3F6FC!important;border:1px solid #DFE6F3!important;padding:4px!important;border-radius:999px!important;box-shadow:inset 0 1px 2px rgba(15,23,42,.04)}
:is(.path-btn,.cc-sw,.fy-seg-btn,.cf-tab){font-family:'Manrope',sans-serif!important;font-weight:600!important;color:var(--ink2,#334155)!important;background:transparent!important;box-shadow:none!important;border-radius:999px!important}
:is(.path-btn.on,.cc-sw.on,.fy-seg-btn.on,.cf-tab[aria-selected="true"]){background:var(--pb-blend)!important;color:#fff!important;box-shadow:0 8px 18px -10px rgba(44,31,194,.55)!important}
:is(.path-btn.on,.cc-sw.on) span{color:rgba(255,255,255,.82)!important}
@media(hover:hover){:is(.path-btn,.cc-sw,.fy-seg-btn,.cf-tab):not(.on):not([aria-selected="true"]):hover{color:var(--signal,#2F4FE0)!important}}
@media(min-width:861px){:is(.path-btn,.cc-sw,.fy-seg-btn,.cf-tab):not(.tl-seg-pick *){min-height:44px;font-size:.95rem!important}}

/* ── one secondary size: the homepage's outline links matched the outline buttons everywhere else but were 3px
   shorter and a touch smaller ── */
:is(.compare-more,.svc-process,.tm-more,.hq-more) a{min-height:50px!important;font-size:.98rem!important;padding:.45rem .5rem .45rem 1.4rem!important}

/* ── one text-link style for small "See … →" links (lead capture, about, the /work brand card). The /work one used to
   turn white on hover and vanish on its white card. ── */
:is(.lc-links a,.card-visit,.exp-stack-link){display:inline-flex;align-items:center;gap:.4rem;font-size:.95rem!important;font-weight:600!important;color:var(--signal,#2F4FE0)!important;text-decoration:none;border-bottom:0!important}
@media(hover:hover){:is(.lc-links a,.card-visit,.exp-stack-link):hover{color:var(--signalH,#2238C4)!important;text-decoration:underline;text-underline-offset:4px}}

/* ── "Ready to get started?" nudge (pb-nudge.js): a quiet deep-navy card with Danny's photo, bottom right (a bottom sheet on
   phones). Not an overlay; the page stays usable. Toned down 2026-10-15 (Danny): light headline with the serif accent like the
   hero, smaller type and buttons, less blue, no logo behind it. ── */
@font-face{font-family:'Instrument Serif';src:url('fonts/instrument-serif-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
.pb-nudge{position:fixed;z-index:2147483000;right:24px;bottom:24px;width:min(340px,calc(100vw - 32px));box-sizing:border-box;overflow:hidden;isolation:isolate;
  padding:1.2rem 1.25rem 1.2rem;border-radius:20px;color:#fff;font-family:'Manrope',sans-serif;
  background:linear-gradient(160deg,#151C2C 0%,#0C1222 55%,#111E3D 100%);
  border:1px solid rgba(255,255,255,.09);box-shadow:0 28px 64px -26px rgba(3,6,26,.6),0 4px 14px rgba(3,6,26,.18);
  opacity:0;transform:translateY(18px) scale(.98);transform-origin:bottom right;transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.pb-nudge.in{opacity:1;transform:none}
.pb-nudge.pb-nudge-still{transition:none}
.pb-nudge-who{display:flex;align-items:center;gap:.65rem;margin:0 2.2rem .85rem 0}
.pb-nudge-who img{width:38px;height:38px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px rgba(255,255,255,.55)}
.pb-nudge-who span{display:flex;flex-direction:column;font-size:.75rem;line-height:1.35;color:rgba(226,234,251,.6)}
.pb-nudge-who b{font-size:.86rem;font-weight:600;color:rgba(255,255,255,.92)}
.pb-nudge-t{margin:0 0 .4rem;font-family:'Figtree','Manrope',sans-serif;font-weight:300;font-size:1.3rem;line-height:1.2;letter-spacing:-.02em;color:#fff}
.pb-nudge-t em{font-family:'Instrument Serif',Georgia,serif;font-style:italic;font-weight:400;font-size:1.1em;letter-spacing:-.01em;color:#AFC8F5}
.pb-nudge-p{margin:0 0 1rem;font-size:.86rem;line-height:1.55;color:rgba(226,234,251,.68)}
.pb-nudge-btns{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap}
.pb-nudge-go{display:inline-flex;align-items:center;gap:.7rem;padding:.36rem .38rem .36rem 1rem;min-height:40px;box-sizing:border-box;border-radius:999px;background:#fff;color:#0B1530;font-weight:600;font-size:.85rem;text-decoration:none;box-shadow:0 10px 22px -12px rgba(0,0,0,.55)}
.pb-nudge-go i{width:28px;height:28px;border-radius:50%;background:var(--pb-blend);
  -webkit-mask:var(--pb-arrow) center/12px 12px no-repeat,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask:var(--pb-arrow) center/12px 12px no-repeat exclude,linear-gradient(#000,#000)}
.pb-nudge-call{display:inline-flex;align-items:center;min-height:40px;box-sizing:border-box;padding:0 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.05);color:rgba(255,255,255,.9);font-weight:600;font-size:.85rem;text-decoration:none}
@media(hover:hover){.pb-nudge-go:hover{background:#EEF3FF}.pb-nudge-call:hover{background:rgba(255,255,255,.16);border-color:#fff}}
.pb-nudge-x{position:absolute;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.08);color:rgba(255,255,255,.85);cursor:pointer}
.pb-nudge-x svg{width:17px;height:17px}
@media(hover:hover){.pb-nudge-x:hover{background:rgba(255,255,255,.18);color:#fff}}
.pb-nudge :is(.pb-nudge-x,.pb-nudge-go,.pb-nudge-call):focus-visible{outline:3px solid rgba(255,255,255,.75);outline-offset:2px}
@media(max-width:560px){
  .pb-nudge{right:12px;left:12px;bottom:12px;width:auto;border-radius:20px;padding:1.1rem 1.1rem 1.1rem;transform-origin:bottom center}
  .pb-nudge-t{font-size:1.2rem}
  .pb-nudge-go,.pb-nudge-call{white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.pb-nudge{transition:none}}