@font-face {
  font-family:"Satoshi";
  src:url("/assets/global/fonts/satoshi/Satoshi-Light.woff2") format("woff2");
  font-style:normal;
  font-weight:300;
  font-display:swap;
}

@font-face {
  font-family:"Satoshi";
  src:url("/assets/global/fonts/satoshi/Satoshi-Regular.woff2") format("woff2");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

@font-face {
  font-family:"Satoshi";
  src:url("/assets/global/fonts/satoshi/Satoshi-Medium.woff2") format("woff2");
  font-style:normal;
  font-weight:500 600;
  font-display:swap;
}

@font-face {
  font-family:"Satoshi";
  src:url("/assets/global/fonts/satoshi/Satoshi-Bold.woff2") format("woff2");
  font-style:normal;
  font-weight:700 800;
  font-display:swap;
}

@font-face {
  font-family:"Satoshi";
  src:url("/assets/global/fonts/satoshi/Satoshi-Black.woff2") format("woff2");
  font-style:normal;
  font-weight:801 900;
  font-display:swap;
}

@font-face {
  font-family:"Instrument Sans";
  src:url("/assets/global/fonts/instrument-sans/InstrumentSans[wdth,wght].woff2") format("woff2");
  font-style:normal;
  font-weight:400 700;
  font-stretch:75% 100%;
  font-display:swap;
}

@font-face {
  font-family:"Plus Jakarta Sans";
  src:url("/assets/global/fonts/plus-jakarta-sans/PlusJakartaSans[wght].woff2") format("woff2");
  font-style:normal;
  font-weight:200 800;
  font-display:swap;
}

:root {
  --font-display:"Satoshi",Arial,sans-serif;
  --font-body:"Satoshi",Inter,"Segoe UI",Arial,sans-serif;
  --navy-950:#021126;
  --navy-900:#071f4f;
  --navy-850:#0a2d66;
  --navy-800:#0d3a80;
  --blue-650:#0b63e5;
  --blue-600:#0d72f7;
  --blue-500:#1787ff;
  --cyan-450:#16bdd8;
  --cyan-400:#27d5e7;
  --ink:#10213e;
  --text:#2c405e;
  --muted:#5f7189;
  --muted-dark:#98adc6;
  --line:#dce6f2;
  --line-strong:#c8d7e8;
  --soft:#f6f9fd;
  --page-surface:#f7faff;
  --soft-blue:#edf6ff;
  --white:#fff;
  --green:#12a77a;
  --amber:#d88b15;
  --shadow-sm:0 12px 34px rgba(7,31,79,.08);
  --shadow-md:0 22px 62px rgba(7,31,79,.13);
  --shadow-lg:0 34px 110px rgba(2,17,38,.26);
  --r-sm:14px;
  --r-md:20px;
  --r-lg:30px;
  --container:1220px;
  --ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;color:var(--ink);background:var(--white);font-family:var(--font-body);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
body.menu-open{overflow:hidden}
h1,h2,h3,h4,h5,h6{font-family:var(--font-display);font-weight:800}
h1{font-stretch:92%}
h2{font-stretch:95%}
h3{font-stretch:100%}
.heading-accent{color:var(--blue-650)}
.home-page .hero .heading-accent,
html body .site-page-hero .heading-accent,
main :is(.growth-system,.systems-section,.process-section,.contact-section) .heading-accent{color:#55aaff}
:is(.services-page,.hybrid-seo-page,.web-development-page,.ecommerce-page,.digital-marketing-page,.creative-branding-page,.crm-automation-page) h1{font-stretch:90%}
:is(.services-page,.hybrid-seo-page,.web-development-page,.ecommerce-page,.digital-marketing-page,.creative-branding-page,.crm-automation-page) h2{font-stretch:93%}
:is(.services-page,.hybrid-seo-page,.web-development-page,.ecommerce-page,.digital-marketing-page,.creative-branding-page,.crm-automation-page) h3{font-stretch:97%}
:is(.about-page,.case-studies-page,.insights-page,.legal-page) h1{font-stretch:96%}
:is(.about-page,.case-studies-page,.insights-page,.legal-page) h2{font-stretch:98%}
a{color:inherit;text-decoration:none}

/* Site-wide link treatment: actions are distinguished by color, weight, and directional cues—not underlines. */
:is(a,a:visited,a:hover,a:focus-visible,.text-button,.text-link,.service-link,.home-service-link,.textlink,.growth-process-link){text-decoration:none!important}
button,input,select,textarea{font:inherit}
button{color:inherit}
img,svg{display:block;max-width:100%}
img[src$=".png" i],img[src*=".png?" i],img[src*=".png#" i]{-webkit-user-drag:none;user-select:none;-webkit-user-select:none}
button,a{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:3px solid var(--cyan-400);outline-offset:4px}
::selection{background:#cdeeff;color:#071f4f}
.container{width:min(calc(100% - 48px),var(--container));margin-inline:auto}

/* Site-wide readability scale. Keep micro labels and illustrative UI compact,
   while ensuring navigation and genuine reading copy remain clear at 100% zoom. */
:root{
  --text-compact:.875rem;
  --text-supporting:.9375rem;
  --text-reading:1rem;
  --leading-supporting:1.62;
  --leading-reading:1.65;
}

html body :is(.desktop-nav>a,.nav-trigger,.header-cta){font-size:var(--text-compact)}
html body :is(.mega-intro p,.mega-intro .text-link,.mega-column a){font-size:var(--text-compact);line-height:1.5}
html body :is(.footer-brand p,.footer-col a,.footer-col a.footer-cta){font-size:var(--text-compact);line-height:1.6}
html body .footer-col h3{font-size:13px}
html body .footer-bottom{font-size:12px}

html body.home-page main :is(.work-body p,.accordion-panel>p){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.home-page main :is(.process-grid p,.trust-cards p,.contact-card-head p){font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.home-page main :is(.industry-index span,.contact-points>div){font-size:var(--text-compact)}
html body.home-page main .hero-assurances strong{font-size:13px}

html body.services-page main :is(.hero-trust,.service-detail-grid span,.best-fit,.why-line p,.evidence-note){font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.services-page main :is(.recommended span,.growth-step small){font-size:13px;line-height:1.55}
html body.services-page main :is(.form-grid label,.form-status){font-size:13px}

html body.hybrid-seo-page main :is(.accordion-panel>p,.measurement-copy-compact p,.advantage-grid p){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.hybrid-seo-page main :is(.signal-list p,.service-detail-list span,.capability-inline,.surface-list span,.surface-list small,.timeline small,.compact-accordion .accordion-item button,.direct-contact){font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.hybrid-seo-page main :is(.principle-rail span,.review-form label,.quick-audit label){font-size:13px}

html body.digital-marketing-page main :is(.journey-caption p,.principle-list li,.process-step p,.why-line span,.faq-panel,.enquiry>p){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.digital-marketing-page main :is(.detail-list span,.outcome-list div,.trust-rail span,.project-form label){font-size:var(--text-compact);line-height:1.55}

html body.web-development-page main :is(.foundation-list p,.technology-statement p,.accordion-panel>p){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.web-development-page main :is(.service-detail-list span,.process-column li span,.why-lines small,.accordion-item button,.project-form label){font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.web-development-page main .trust-rail span{font-size:13px}

html body.ecommerce-page main :is(.journey-item p,.feature-list span,.system-col li,.process-step span,.why-line span,.faq-panel p){font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.ecommerce-page main :is(.capability-lines span,.assurance-strip span,.platforms span,.specialist-links a,.project-form label){font-size:var(--text-compact);line-height:1.55}
html body.ecommerce-page main .trust-rail span{font-size:13px}

html body.creative-branding-page main :is(.trust span,.system-note li,.touch-list p,.why-lines span,.rail a){font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.creative-branding-page main .formbox label{font-size:13px}

html body.crm-automation-page main :is(.trust span,.principles b,.principles span,.why-lines span,.rail a,.consent-note){font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.crm-automation-page main :is(.rules span,.formbox label){font-size:13px;line-height:1.55}

html body.industries-page main .context-grid p{font-size:var(--text-compact);line-height:var(--leading-supporting)}
html body.industries-page main .industry-entry p{font-size:var(--text-supporting);line-height:var(--leading-reading)}

html body.process-page main :is(.meta-row span,.route small,.stage-nav a){font-size:var(--text-compact);line-height:1.55}
html body.process-page main :is(.gate-copy>span,.role span,.answer-panel p){font-size:var(--text-supporting);line-height:var(--leading-supporting)}

html body.about-page main :is(.expect-row span,.aside-note small){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.about-page main .expect-row b{font-size:var(--text-compact)}

html body.case-studies-page main :is(.proof-note p,.honesty-note,.lane span){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.case-studies-page main .lane b{font-size:var(--text-compact)}

html body.contact-page main :is(.what-next li,.choice span,.shortcut-links a){font-size:var(--text-compact);line-height:1.55}
html body.contact-page main :is(label,.contact-method small,.form-status){font-size:13px}

html body.insights-page main :is(.editor-note p,.archive-note,.archive-row span,.standard p){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.insights-page main .topic-ribbon a{font-size:13px}

html body.legal-page main :is(.prelaunch,.law-note,.plain-note,.terms-row span,.category-row span,.inventory-empty){font-size:var(--text-supporting);line-height:var(--leading-supporting)}
html body.legal-page main :is(.toc a,.data-row span,.inventory-row,.choice-btn){font-size:var(--text-compact);line-height:1.55}

html body main .crumb{color:var(--muted)}
html body.process-page main :is(.meta-row span,.stage-nav-status>span,.stage-nav-status small){color:var(--muted)}

@media (max-width:760px){
  html body :is(.footer-brand p,.footer-col a,.footer-col a.footer-cta){font-size:13px}
}

/* Shared marketing-page hero system. Page-specific artwork remains intact while
   the heading surface, conversion action and corner accents stay consistent. */
html body .site-page-hero{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  color:#fff;
  background:
    radial-gradient(circle at 12% 18%,rgba(23,118,225,.28),transparent 34%),
    radial-gradient(circle at 88% 76%,rgba(39,213,231,.13),transparent 28%),
    linear-gradient(145deg,#03142d,#071f4f 58%,#0a326d)!important;
}
html body .site-page-hero>.container{position:relative;z-index:2}
html body.contact-page .site-page-hero>:not(.hero-glass-shapes){position:relative;z-index:2}
html body .site-page-hero h1{color:#fff!important}
html body .site-page-hero :is(.eyebrow,.mini-label,.hero-kicker,.kicker){color:#72dce9!important}
html body .site-page-hero :is(.hero-copy>p,.web-copy>p,.industries-hero-intro>p,.intro-copy>p,.hero-bottom>p,.lead){color:#c2d4e9!important}
html body .site-page-hero .hero-actions .btn-primary{
  border-color:#fff!important;
  background-color:#fff!important;
  background-image:linear-gradient(180deg,#fff,#f2f6fb)!important;
  color:var(--navy-900)!important;
  text-shadow:none!important;
  box-shadow:inset 0 1px 0 #fff,0 8px 20px rgba(0,18,52,.2),0 18px 38px rgba(0,14,42,.17)!important;
}
html body .site-page-hero .hero-actions .btn-primary:hover{background-image:linear-gradient(180deg,#fff,#fff)!important;color:#041b3d!important}
html body .site-page-hero .hero-actions .btn-secondary{
  border-color:rgba(255,255,255,.3)!important;
  background:rgba(255,255,255,.075)!important;
  color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 10px 24px rgba(0,10,32,.16)!important;
}
html body .site-page-hero .hero-actions .btn-secondary:hover{border-color:rgba(255,255,255,.5)!important;background:rgba(255,255,255,.14)!important}

/* Homepage hero typography is the standard for every page-level heading. */
html body:not(.home-page) main > :is(.hero,.site-page-hero,.industries-hero,.seo-hero,.web-hero) h1{
  font-family:var(--font-display)!important;
  font-size:clamp(52px,4.65vw,66px)!important;
  font-stretch:92%!important;
  font-weight:800!important;
  line-height:1.02!important;
  letter-spacing:-.052em!important;
}
html body:not(.home-page) main > :is(.hero,.site-page-hero,.industries-hero,.seo-hero,.web-hero) :is(.eyebrow,.mini-label,.hero-kicker,.kicker){
  color:#68b8ff!important;
}
html body:not(.home-page) main > :is(.hero,.site-page-hero,.industries-hero,.seo-hero,.web-hero) :is(.hero-copy>p,.web-copy>p,.industries-hero-intro>p,.intro-copy>p,.hero-bottom>p,.lead,.hero-lead){
  color:#c5d7ea!important;
  font-size:16px!important;
  line-height:1.56!important;
}
.hero-glass-shapes{position:absolute!important;z-index:0!important;inset:0;overflow:hidden;pointer-events:none}
.hero-glass-shapes i{position:absolute;display:block;border:1px solid rgba(151,208,255,.2);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.1),rgba(255,255,255,.025));box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 24px 58px rgba(0,9,31,.16);backdrop-filter:blur(8px)}
.site-page-hero[data-hero-variant="1"] .hero-glass-shapes i:nth-child(1){width:94px;height:94px;left:-28px;top:72px;transform:rotate(21deg)}
.site-page-hero[data-hero-variant="1"] .hero-glass-shapes i:nth-child(2){width:62px;height:62px;right:7%;top:-21px;transform:rotate(-17deg)}
.site-page-hero[data-hero-variant="1"] .hero-glass-shapes i:nth-child(3){width:118px;height:118px;right:15%;bottom:-72px;transform:rotate(32deg)}
.site-page-hero[data-hero-variant="2"] .hero-glass-shapes i:nth-child(1){width:112px;height:112px;right:-47px;top:54px;transform:rotate(-24deg)}
.site-page-hero[data-hero-variant="2"] .hero-glass-shapes i:nth-child(2){width:58px;height:58px;left:8%;top:-18px;transform:rotate(15deg)}
.site-page-hero[data-hero-variant="2"] .hero-glass-shapes i:nth-child(3){width:88px;height:88px;left:-34px;bottom:34px;transform:rotate(38deg)}
.site-page-hero[data-hero-variant="3"] .hero-glass-shapes i:nth-child(1){width:78px;height:78px;right:4%;top:28px;transform:rotate(29deg)}
.site-page-hero[data-hero-variant="3"] .hero-glass-shapes i:nth-child(2){width:126px;height:126px;left:-66px;bottom:-30px;transform:rotate(-19deg)}
.site-page-hero[data-hero-variant="3"] .hero-glass-shapes i:nth-child(3){width:52px;height:52px;right:27%;bottom:-19px;transform:rotate(14deg)}
.site-page-hero[data-hero-variant="4"] .hero-glass-shapes i:nth-child(1){width:120px;height:120px;right:-62px;bottom:22px;transform:rotate(18deg)}
.site-page-hero[data-hero-variant="4"] .hero-glass-shapes i:nth-child(2){width:70px;height:70px;left:5%;top:-30px;transform:rotate(-31deg)}
.site-page-hero[data-hero-variant="4"] .hero-glass-shapes i:nth-child(3){width:58px;height:58px;left:22%;bottom:-27px;transform:rotate(24deg)}
.site-page-hero[data-hero-variant="5"] .hero-glass-shapes i:nth-child(1){width:86px;height:86px;left:-36px;top:32px;transform:rotate(-20deg)}
.site-page-hero[data-hero-variant="5"] .hero-glass-shapes i:nth-child(2){width:124px;height:124px;right:-58px;top:-44px;transform:rotate(27deg)}
.site-page-hero[data-hero-variant="5"] .hero-glass-shapes i:nth-child(3){width:54px;height:54px;right:19%;bottom:-22px;transform:rotate(-36deg)}
.site-page-hero[data-hero-variant="6"] .hero-glass-shapes i:nth-child(1){width:104px;height:104px;left:-48px;bottom:22px;transform:rotate(34deg)}
.site-page-hero[data-hero-variant="6"] .hero-glass-shapes i:nth-child(2){width:64px;height:64px;right:8%;top:-25px;transform:rotate(-14deg)}
.site-page-hero[data-hero-variant="6"] .hero-glass-shapes i:nth-child(3){width:76px;height:76px;right:-24px;bottom:-31px;transform:rotate(22deg)}
html body.contact-page .site-page-hero{padding:clamp(30px,5vw,58px)!important;border-radius:24px}
@media(max-width:720px){
  .hero-glass-shapes i{opacity:.7;transform:scale(.78) rotate(var(--mobile-angle,18deg))}
  .hero-glass-shapes i:nth-child(3){display:none}
  html body.contact-page .site-page-hero{border-radius:18px}
}

/* Desktop page heroes occupy the visible screen below the sticky header. */
@media(min-width:901px){
  html body:not(.home-page) main > :is(.hero,.site-page-hero,.industries-hero,.seo-hero,.web-hero){
    height:calc(100svh - 64px)!important;
    min-height:620px!important;
    padding-block:clamp(32px,5vh,64px)!important;
    display:flex!important;
    align-items:center!important;
  }
  html body.contact-page .contact-shell>.intro.site-page-hero{
    height:calc(100svh - 64px)!important;
    min-height:620px!important;
    padding-block:clamp(32px,5vh,64px)!important;
    display:flex!important;
    align-items:center!important;
  }
}

@media(max-width:900px){
  html body:not(.home-page) main > :is(.hero,.site-page-hero,.industries-hero,.seo-hero,.web-hero){
    height:auto!important;
    min-height:0!important;
  }
  html body.contact-page .contact-shell>.intro.site-page-hero{height:auto!important;min-height:0!important}
}

@media(max-width:1024px){
  html body:not(.home-page) main > :is(.hero,.site-page-hero,.industries-hero,.seo-hero,.web-hero) h1{font-size:clamp(48px,4.4vw,62px)!important}
}
@media(max-width:520px){
  html body:not(.home-page) main > :is(.hero,.site-page-hero,.industries-hero,.seo-hero,.web-hero) h1{font-size:42px!important}
}

/* One shared light canvas: the same cool white used by the homepage. */
html body{background:var(--page-surface)}
html body main > section:not(.hero):not(.site-page-hero):not(.seo-hero):not(.web-hero):not(.industries-hero):not(.proof-strip):not(.growth-system):not(.systems-section):not(.process-section):not(.execution-section):not(.contact-section):not(.crm-system-section):not(.build-system-section):not(.journey-section):not(.creative-system-section):not(.gates):not(.case-studies-cta):not(.insights-cta){background:var(--page-surface)!important}
