/* Sysprola v3: shared layer for the pages rebuilt from the v3 prototype.

   The page markup is extracted from the prototype and carries its own inline
   styles, so this file only holds what inline styles cannot express: hover
   states, the header's two states, and the values the prototype switches in
   JavaScript at its 390px mobile frame. Rules that must beat an inline style
   use !important. */

/* base: the prototype's own global stylesheet, verbatim */
html,body{margin:0;padding:0;background:#EDEAE3;font-family:Manrope,system-ui,sans-serif;color:#2A2A30;-webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:#F94E00;text-decoration:none}
a:hover{color:#16161A;text-decoration:underline}
button{font-family:inherit;cursor:pointer}
input,select,textarea{font-family:inherit}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}

/* Prototype controls that navigate were <button>s; here they are links, so
   they take the browser's button defaults back. Their inline styles still
   override any of this, exactly as they did on the button. */
a.v3-btn{display:inline-flex;align-items:center;justify-content:center;font-size:13.3333px;font-weight:400;line-height:normal;color:#000;letter-spacing:normal;word-spacing:normal;text-transform:none;text-indent:0;text-shadow:none;text-align:center;margin:0;padding:1px 6px;border:2px outset #767676;background-color:#EFEFEF;cursor:pointer}
a.v3-btn:hover{color:#000;text-decoration:none}
/* a button that sets its own display lays its children out with flex/grid
   defaults; only a plain button centres its label */
a.v3-btn[style*="display:"]{align-items:normal;justify-content:normal}
/* the shared header, drawer and mega-menu links were never underlined */
.v3-hdr-link:hover,.sysmega-col a:hover,[data-drawer] a:hover,[data-nav] a:hover{text-decoration:none}

/* hover states, copied from the prototype's generated stylesheet */
.scp0:hover{background:#F4F2ED!important}
.scp1:hover{background:#F4F2ED!important;text-decoration:none!important;color:#16161A!important}
.scp2:hover{background:#F94E00!important}
.scp3:hover{background:#FFF4EC!important}
.scp5:hover{color:#16161A!important}
.scp6:hover{background:rgba(255,255,255,.16)!important}
.scp7:hover{transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important}
.scp8:hover{background:#FAF9F6!important;border-color:#D3CEC4!important;transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important}
.scp9:hover{background:#16161A!important;color:#fff!important;border-color:#16161A!important}
.scpa:hover{transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important;border-color:#D3CEC4!important}
.scpb:hover{background:#FAF9F6!important}
.scpc:hover{text-decoration-color:#FF6A00!important}
.scpd:hover{transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.18) 0 18px 40px!important}
.scpe:hover{border-color:#D3CEC4!important;transform:translateY(-4px)!important;box-shadow:rgba(22,22,26,.08) 0 14px 30px!important}
.scpf:hover{transform:translateY(-3px)!important;box-shadow:rgba(22,22,26,.07) 0 10px 24px!important}
.scpg:hover{opacity:.75!important}
.scph:hover{background:rgba(255,255,255,.1)!important}
.scpi:hover{background:#10693A!important;color:#fff!important;text-decoration:none!important}
.scpj:hover{background:rgba(255,255,255,.08)!important;color:#fff!important;text-decoration:none!important}
.scpk:hover{color:#FF8A3D!important}
.scpl:hover{border-color:#FF6A00!important;color:#fff!important;background:rgba(255,106,0,.15)!important;text-decoration:none!important}
.scpm:hover{color:#fff!important}
.scp7,.scp8,.scpa,.scpd,.scpe,.scpf{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,border-color .3s}

/* header: MOTION-SPEC 5-7 */
[data-nav]{transition:background .2s,color .2s,border-color .2s}
/* the prototype's header items are buttons, which centre their label in the
   34/36px box; as links they need the same centring or the text rides high */
[data-nav] nav[data-desk] > a,[data-nav] a[data-desk]{display:inline-flex;align-items:center;line-height:normal}
.v3-logo-w{display:none!important}
[data-nav].is-over{background:rgba(22,22,26,.35)!important;border-bottom-color:rgba(255,255,255,.18)!important}
[data-nav].is-over .v3-logo-d{display:none!important}
[data-nav].is-over .v3-logo-w{display:block!important}
[data-nav].is-over .v3-hdr-link{color:#fff!important}
[data-nav].is-over .v3-hdr-link.scp4:hover,[data-nav].is-over .v3-hdr-link[aria-expanded="true"]{background:rgba(255,255,255,.16)!important}
[data-nav].is-over .sysburger{background:transparent!important;border-color:rgba(255,255,255,.18)!important}
[data-nav].is-over .sysburger rect{fill:#fff}
.v3-hdr-link:hover{background:#F4F2ED}
/* the prototype drops the phone number on narrower stages and goes to the
   burger when the row no longer fits; with Pay in the nav that is below 900px */
@media (max-width:1100px){
  [data-nav] a[data-desk][href^="tel:"]{display:none!important}
}
@media (max-width:900px){
  .sysburger{display:flex!important}
  [data-desk]{display:none!important}
  .sysmega{display:none!important}
}
@media (min-width:901px){
  .sysburger{display:none!important}
  [data-drawer],[data-drawer-overlay]{display:none!important}
}
.sysmega-col a:hover{color:#FF6A00}
html.sys-locked,html.sys-locked body{overflow:hidden}


/* values the prototype swaps in JS for its 390px frame */
@media (max-width:760px){
  .v3-cols{grid-template-columns:minmax(0,1fr)!important}
  .v3-heropad{padding:32px 20px 32px!important}
  .v3-heropad2{padding:56px 20px 48px!important}
  .v3-heromin{min-height:0!important}
  .v3-span2{grid-column:1/-1!important}
  .v3-footpad{padding-bottom:18px!important}
}

/* mobile: the prototype swaps the floating WhatsApp pill for a sticky CTA bar */
.v3-sticky{display:none!important}
@media (max-width:760px){
  .v3-sticky{display:flex!important;position:fixed;left:0;right:0;bottom:0}
  body.has-v3-sticky{padding-bottom:65px}
  [data-v3-pill]{display:none!important}
  .v3-sticky a{white-space:nowrap}
}
/* phones: small text links get a 44px-tall hit area. Padding is cancelled by an
   equal negative margin, so nothing moves; only the tappable box grows. */
@media (max-width:760px){
  footer a.v3-btn[style*="padding: 0px"],
  footer a[href^="mailto:"],
  a.scp5,
  a[href="/careers"][style*="color: rgb(107, 107, 115)"],
  a[href^="mailto:"]:not([style*="height"]),a[href^="tel:"]:not([style*="height"]){padding-top:12px!important;padding-bottom:12px!important;margin-top:-12px!important;margin-bottom:-12px!important}
  #payForm a,.v3-legal a,.article-prose a,#pErr a{padding:10px 0}
  /* placeholder labels ("Demo · replace") are 10px in the prototype; 11px is the floor on a phone */
  [style*="font-size: 10px"],[style*="font-size: 10.5px"]{font-size:11px!important}
}
/* sticky side panels (home "Our journey" intro, services and case-study rails, legal
   TOC) stack above their content below ~960px; left sticky they stay pinned while
   the next rows scroll over them. The header (top: 0) and WhatsApp pill keep theirs. */
@media (max-width:960px){
  [style*="position: sticky; top: 72px"],[style*="position: sticky; top: 84px"],[style*="position: sticky; top: 96px"]{position:static!important}
}
/* "What we do" service cards (home + the ad landing pages): a compact row on every
   screen - square thumbnail, then tag, title and line, then a chevron. Stacked photo
   cards were ~4,000px of scrolling on phones and very tall on desktop too.
   Desktop: 3 columns, 88px thumbnail; phones (below): 1 column, 72px. */
.v3-svc{gap:12px!important;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr))!important}
.v3-svc>a{display:grid!important;grid-template-columns:88px minmax(0,1fr) 14px;grid-template-rows:auto auto auto;gap:4px 14px!important;align-items:center;align-content:center;padding:12px!important;min-height:0!important;height:auto!important}
.v3-svc>a>span:first-child{grid-column:1;grid-row:1/span 3;width:88px!important;height:88px!important;aspect-ratio:auto!important;border-radius:6px;overflow:hidden;align-self:center}
.v3-svc>a>span:first-child>span{display:none!important}
.v3-svc>a>span:not(:first-child){grid-column:2;margin:0!important}
.v3-svc>a>span:nth-child(2){justify-self:start;font-size:11px!important;padding:1px 7px!important}
.v3-svc>a>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.v3-svc>a::after{content:"\203A";grid-column:3;grid-row:1/span 3;align-self:center;font-size:22px;line-height:1;color:rgb(154,154,162)}
/* the Build / Grow / Convert tabs hide cards with [hidden]; display:grid!important above would win */
.v3-svc>a[hidden]{display:none!important}
@media (max-width:760px){
  .v3-svc{gap:8px!important}
  .v3-svc>a{grid-template-columns:72px minmax(0,1fr) 14px;gap:3px 12px!important;padding:10px!important}
  .v3-svc>a>span:first-child{width:72px!important;height:72px!important}
}
/* blog pager on phones: "‹ Prev 1 … 3 4 5 … 27 Next ›" ran past a 320-360px screen.
   Arrows only, and slightly narrower page buttons. */
@media (max-width:760px){
  .v3-pager{gap:3px!important}
  .v3-pager .v3-pg-w{display:none}
  .v3-pager button{min-width:34px!important;padding:0 6px!important;font-size:14px!important}
}
/* the bar is drawn for a 390px frame; keep the label on one line on smaller phones */
@media (max-width:389px){ .v3-sticky a.v3-btn{font-size:14px!important;padding:0 4px} }
@media (max-width:359px){ .v3-sticky a[aria-label="Call"]{display:none!important} }

/* reduced motion: nothing hidden, nothing moving */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* blog post body: the article HTML comes from the CMS, so it is styled here */
.article-prose{font-size:17px;line-height:1.7;color:#2A2A30}
.article-prose h2{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.2;color:#16161A;font-size:clamp(22px,3cqw,30px);margin:40px 0 12px;scroll-margin-top:96px}
.article-prose h3{font-family:Sora,sans-serif;font-weight:600;color:#16161A;font-size:20px;margin:28px 0 8px;scroll-margin-top:96px}
.article-prose p{margin:0 0 16px}
.article-prose ul,.article-prose ol{margin:0 0 18px;padding-left:22px}
.article-prose li{margin:6px 0}
.article-prose a{color:#F94E00;text-decoration:underline;text-underline-offset:2px}
.article-prose a:hover{color:#16161A}
.article-prose img{border-radius:8px;border:1px solid #E7E3DC;height:auto}
.article-prose blockquote{margin:24px 0;padding:16px 20px;border-left:3px solid #FF6A00;background:#FAF9F6;font-family:Sora,sans-serif;font-size:19px;color:#16161A}
.article-prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:15px}
.article-prose th,.article-prose td{border:1px solid #E7E3DC;padding:8px 10px;text-align:left}
.article-prose th{background:#FAF9F6;color:#16161A}
.article-prose .related-guides,.article-prose .post-cta{margin-top:32px;padding:18px 20px;border:1px solid #E7E3DC;border-radius:8px;background:#FAF9F6}
.article-prose .related-guides h2,.article-prose .post-cta h2{font-size:18px;margin:0 0 8px}
#artTitle{font-family:Sora,sans-serif;font-weight:700;letter-spacing:-.02em;line-height:1.12;color:#fff;font-size:clamp(28px,4.4cqw,48px);margin:0;max-width:22ch;text-wrap:balance}