@font-face{
	font-family: 'HKGrotesk-Light';
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-Light.eot');
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-Light.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Light.woff2') format('woff2'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Light.woff') format('woff'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Light.ttf') format('truetype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Light.svg#webfont') format('svg');
	font-display: swap;
}
@font-face{
	font-family: 'HKGrotesk-Regular';
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-Regular.eot');
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-Regular.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Regular.woff2') format('woff2'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Regular.woff') format('woff'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Regular.ttf') format('truetype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Regular.svg#webfont') format('svg');
	font-display: swap;
}

@font-face{
	font-family: 'HKGrotesk-Semibold';
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-SemiBold.eot');
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-SemiBold.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-SemiBold.woff2') format('woff2'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-SemiBold.woff') format('woff'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-SemiBold.ttf') format('truetype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Semibold.svg#webfont') format('svg');
	font-display: swap;
}

@font-face{
	font-family: 'HKGrotesk-Bold';
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-Bold.eot');
	src: url('../fonts/HKGrotesk/WEB/HKGrotesk-Bold.eot?#iefix') format('embedded-opentype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Bold.woff2') format('woff2'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Bold.woff') format('woff'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Bold.ttf') format('truetype'),
	     url('../fonts/HKGrotesk/WEB/HKGrotesk-Bold.svg#webfont') format('svg');
	font-display: swap;
}


.client-carousel {
  height:1080px;
}

.hk-bold {
	font-family: 'HKGrotesk-Bold',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

.jvectormap-tip {
  border: solid 1px #fff;
  border-radius: 7px;
  background: #fff;
  color: #02101c;
  font-family: 'HKGrotesk-Light';
  font-size: smaller;
  padding: 5px;
}

.btn-book {
border-radius: 0;
background-color: #000;
color:#fff;
font-weight:300;
border: 3px solid #000;
}

.welcome .btn-book, .contact .btn-book, .thoughts .btn-book, .thoughts .browse-more-art .btn-book:hover {
text-transform:uppercase;
color:#000;
background-color:#fff;
border: 3px solid #000;
cursor:pointer;
}

 #growth-studio .btn-book:hover  {
text-transform:uppercase;
text-decoration:none;
color:#000;
background-color:transparent;
border: 3px solid #000;
cursor:pointer;
}

.welcome .btn-book:hover, .contact .btn-book:hover, .browse-more-art .btn-book, .thoughts .btn-book:hover {
text-decoration:none;
text-transform:uppercase;
background-color:#000;
color:#fff;
border: 3px solid #000;
}

.btn-book {
transition: background-color .2s, color .2s, border-color .2s;
}

/* #case-studies sits on a black background, so the CTA needs a visible
   white border (default .btn-book border is #000, invisible on black).
   Hover inverts to all-white with black font. */
#case-studies .btn-book {
background-color: #000;
color: #fff;
border-color: #fff;
}
#case-studies .btn-book:hover {
background-color: #fff;
color: #000;
border-color: #fff;
text-decoration: none;
}

#blog-preview .btn-book:hover {
background-color: #fff;
color: #000;
border-color: #000;
text-decoration: none;
}

#knowledge-hub-preview .btn-book:hover,
#faq .btn-book:hover {
background-color: #fff;
color: #000 !important;
border-color: #fff;
text-decoration: none;
}

.kh-cta .btn-book:hover,
.faq-cta .btn-book:hover,
.cs-cta .btn-book:hover,
.blog-cta .btn-book:hover {
background-color: #fff;
color: #000;
border-color: #fff;
text-decoration: none;
}

/* Marketing-book RSS cards: card-deck stretches every card to the
   tallest sibling's height. Without flex-column + auto-margin on the
   button, short-title cards leave a big gap between title and CTA.
   Tighten the body padding and pin the button right under the title. */
#rss-feeds .card-body {
padding: 20px 24px 24px;
display: flex;
flex-direction: column;
}

#rss-feeds .card-title {
margin-bottom: 14px;
font-weight:100;
font-size:1.2rem;
line-height:1.35;
}

#rss-feeds .card {
border-radius:0;
box-shadow:none;
border: 1px solid #C8C8C8;
}

#rss-feeds .card-img-top {
    border-top-left-radius:0;
    border-top-right-radius:0;
}
#rss-feeds .card .btn {
  border-radius: 0;
  align-self: flex-start;
  margin-top: 4px;
}
.browse-more-art .btn-book {
  border-radius: 0;
}

.cookie-none {display:none !important;}
.cc-window {text-align:center;}
@media screen and (max-width: 414px) and (orientation: portrait), screen and (max-width: 736px) and (orientation: landscape) {
.shards-landing-page--1 .cc-window.cc-floating {font-size:8px; padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0;}
}
.shards-landing-page--1 .cc-window.cc-banner {padding-top:0; padding-bottom:0; margin-top:0; margin-bottom:0;}
.shards-landing-page--1 .cc-compliance {display:none;}

html, body {
  font-family: 'HKGrotesk-Light',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight: 100;
	color:#02111B;
  overflow-x: hidden;
}

/* Hero H1 must stay white on all dark hero sections (blog, knowledge-hub,
   case-studies; EN/IT/ES). Consolidates the per-page !important override
   from commit 770754d1 so newly-generated pages inherit correctness. */
.blog-hero h1,
.blog-index-hero h1,
.kh-hero h1,
.ph-hero h1,
.cs-hero h1,
.cs-index-hero h1,
.faq-hero h1,
.hero h1,
.page-header h1 {
  color: #fff !important;
}

#how {
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.08' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}
#portfolio {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.11' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
}
#process {
	background-color:#a8a8a81f;
}

/* Full-height homepage section bands. Scoped to the homepage body class
   (.shards-landing-page--1) so these id rules never leak onto other pages
   that reuse an id like #faq / #case-studies / #insights on a non-section
   element (e.g. a service guide's <h2 id="faq">, which otherwise inherited
   min-height:100vh and rendered as a 100vh-tall heading). */
.shards-landing-page--1 #why,
.shards-landing-page--1 #what,
.shards-landing-page--1 #how,
.shards-landing-page--1 #offer,
.shards-landing-page--1 #portfolio,
.shards-landing-page--1 #process,
.shards-landing-page--1 #thoughts,
.shards-landing-page--1 #growth-studio,
.shards-landing-page--1 #clients,
.shards-landing-page--1 #where,
.shards-landing-page--1 #contact,
.shards-landing-page--1 #case-studies,
.shards-landing-page--1 #insights,
.shards-landing-page--1 #faq,
.shards-landing-page--1 #services-home {
	 min-height: 100vh;
}

/* keep section content vertically centered in the full-height band */
.shards-landing-page--1 #why,.shards-landing-page--1 #what,.shards-landing-page--1 #offer,.shards-landing-page--1 #process,.shards-landing-page--1 #thoughts,.shards-landing-page--1 #growth-studio,.shards-landing-page--1 #clients,.shards-landing-page--1 #where,.shards-landing-page--1 #contact,.shards-landing-page--1 #case-studies,.shards-landing-page--1 #insights,.shards-landing-page--1 #faq,.shards-landing-page--1 #services-home{justify-content:center;}

/* homepage polish overrides (2026-06-04) */
/* #what holds only two short text columns: let it size to its content instead of
   the forced 100vh band, which left a tall dead-space gap below the text. */
#what{min-height:auto;justify-content:flex-start;}
/* RSS article cards inside the Marketing Book tab panel */
#rss-feeds [class*="col-"]{margin-bottom:1rem;}

/* 2026-06-04 tweaks ----------------------------------------------------- */
/* Extra bottom breathing room on the Welcome (#what) and Live Webinars
   sections (~a fifth more space below the content). */
#what{padding-bottom:6rem !important;}
#webinars{padding-bottom:6rem !important;}

/* Our Services cards inverted: black card, white text, white button with
   black text (button inverts to black/white on hover). */
#services-home .card{background:#000 !important;border:1px solid #000 !important;}
#services-home .card .card-title,
#services-home .card .card-text{color:#fff !important;}
#services-home .card .btn-book{background:#fff !important;color:#000 !important;border:3px solid #fff !important;}
#services-home .card .btn-book:hover{background:#000 !important;color:#fff !important;border-color:#fff !important;text-decoration:none;}

/* Task 5: Growth Studio badges - rectangular to match site style */
#growth-studio .badge {
  border-radius: 0;
}

/* Task 2: Case Studies cards - match Marketing Book style */
#case-studies .card {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid #C8C8C8;
}
#case-studies .card > a {
  display: block;
  line-height: 0;
}
/* Every surface that shows a case-study card: homepage band (#case-studies),
   the /case-studies/ index grid, and the Related block on each detail page.
   Bootstrap 4's .card-img-top sets width:100% with no height:auto, so the HTML
   height="400" attribute is honoured and letterboxes the 2:1 SVG art (~113px of
   white above and below, inside the img). Kept to these three scopes on purpose:
   a bare .card-img-top rule would also crop the mixed-ratio #rss-feeds
   thumbnails on the homepages. */
#case-studies .card-img-top,
#case-studies-grid .card-img-top,
.cs-section .card-img-top {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 2;
  object-fit: cover;
  object-position: center;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  vertical-align: top;
}
#case-studies .card-body {
  padding-top: 20px;
  padding-bottom: 20px;
}

#case-studies .card-title {
  margin-bottom: 20px;
  font-weight: 100;
  font-size: 1.3rem;
}

/* FAQ Floating Pill Cloud */
@keyframes faqFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes faqFloatAlt {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px) translateX(2px); }
}

#faqAccordion {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 1rem 0;
}

.faq-item {
  border: none;
  margin-bottom: 0;
  flex-shrink: 0;
  animation: faqFloat 4s ease-in-out infinite;
}
.faq-item:nth-child(even) {
  animation-name: faqFloatAlt;
}
.faq-item:nth-child(3n)   { animation-duration: 4.5s; }
.faq-item:nth-child(3n+1) { animation-duration: 3.8s; animation-delay: 0.5s; }
.faq-item:nth-child(3n+2) { animation-duration: 5s;   animation-delay: 1s; }
.faq-item:nth-child(5n)   { animation-duration: 3.5s; animation-delay: 0.3s; }
.faq-item:nth-child(7n)   { animation-duration: 4.2s; animation-delay: 0.8s; }

/* When a pill is expanded, stop floating and go full width */
.faq-item.faq-expanded {
  animation: none;
  flex-basis: 100%;
  order: -1;
}

.faq-question {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  margin-bottom: 0;
  font-weight: 500;
  font-size: 0.85rem;
  line-height: 1.4;
  background: #fff;
  color: #000;
  border: 1px solid #fff;
  border-radius: 0;
  transition: all 0.25s ease;
  white-space: nowrap;
  box-shadow: none;
}
.faq-question:hover {
  border-color: #ccc;
  color: #000;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.faq-question[aria-expanded="true"] {
  background: #fff;
  color: #000;
  border-color: #fff;
  box-shadow: 0 4px 20px rgba(255,255,255,0.15);
}

.faq-icon {
  font-weight: 300;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1em;
  transition: transform 0.25s ease;
  flex-shrink: 0;
  color: rgba(0,0,0,0.5);
  position: relative;
  top: -1px;
}

/* FAQ section: invert btn-outline-dark btn-book */
#faq .btn-outline-dark.btn-book {
  background: #fff;
  color: #000;
  border-color: #fff;
}
#faq .btn-outline-dark.btn-book:hover {
  background: transparent;
  color: #fff;
  border-color: #fff;
}
.faq-question[aria-expanded="true"] .faq-icon {
  transform: rotate(45deg);
  color: #000;
}

.faq-answer {
  padding: 1rem 1.25rem 0.5rem;
  font-size: 0.95rem;
  line-height: 1.75;
  color: rgba(255,255,255,0.75);
  max-width: 700px;
  margin: 0 auto;
  text-align: left;
}

/* Expanded state: answer card */
.faq-item.faq-expanded .collapse.show,
.faq-item.faq-expanded .collapsing {
  background: rgba(255,255,255,0.06);
  border-radius: 0;
  margin-top: 8px;
  padding: 0 4px;
}

/* Mobile: smaller pills, tighter layout */
@media (max-width: 768px) {
  #faqAccordion {
    gap: 6px;
    padding: 0.5rem 0;
  }
  .faq-question {
    font-size: 0.75rem;
    padding: 6px 14px;
  }
  .faq-item {
    animation-duration: 0s !important; /* disable float on mobile for perf */
  }
  .faq-answer {
    font-size: 0.9rem;
    padding: 0.75rem 1rem 0.5rem;
  }
}

/* Fix 3: Header nav items vertical alignment + center text */
.navbar-heading .navbar-nav {
  align-items: center;
}
.navbar-heading .nav-item {
  display: flex;
  align-items: center;
}
.navbar-heading .nav-link {
  text-align: center;
}

/* Marketing Book: equal height cards */
#rss-feeds > .col-lg-4 {
  display: flex;
}
#rss-feeds .card {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#rss-feeds .card-body {
  display: flex;
  flex-direction: column;
  flex: 1;
}
#rss-feeds .card-body .btn-book {
  margin-top: 14px;
}

/* Case Studies: equal-height cards (mirrors #rss-feeds flex pattern) */
#case-studies .col-md-12.col-lg-4 { display: flex; }
#case-studies .card { display: flex; flex-direction: column; flex: 1; }
#case-studies .card-body { display: flex; flex-direction: column; flex: 1; }
#case-studies .card-body .btn-book { margin-top: auto; }

/* Partners Section — scattered floating layout */
#partners {
  padding: 12px 0;
  background-color: #f8f9fa;
  overflow: hidden;
  position: relative;
}
#matrix-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.12;
}
/* Desktop multi-row ticker */
#partners .partners-desktop-ticker {
  overflow: hidden;
  position: relative;
  padding: 4px 0 0;
}
#partners .partners-desktop-ticker .ticker-row {
  display: flex;
  width: max-content;
  margin-bottom: 1px;
}
#partners .partners-desktop-ticker .ticker-row.scroll-left {
  animation: ticker-left 100s linear infinite;
}
#partners .partners-desktop-ticker .ticker-row.scroll-right {
  animation: ticker-right 100s linear infinite;
}
#partners .partners-desktop-ticker .ticker-row:nth-child(1) { animation-duration: 110s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(2) { animation-duration: 95s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(3) { animation-duration: 105s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(4) { animation-duration: 88s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(5) { animation-duration: 100s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(6) { animation-duration: 92s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(7) { animation-duration: 108s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(8) { animation-duration: 96s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(9) { animation-duration: 103s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(10) { animation-duration: 90s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(11) { animation-duration: 97s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(12) { animation-duration: 104s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(13) { animation-duration: 91s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(14) { animation-duration: 107s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(15) { animation-duration: 93s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(16) { animation-duration: 101s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(17) { animation-duration: 98s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(18) { animation-duration: 106s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(19) { animation-duration: 89s; }
#partners .partners-desktop-ticker .ticker-row:nth-child(20) { animation-duration: 102s; }
#partners .partners-desktop-ticker .partner-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 130px;
  height: 44px;
  padding: 4px 14px;
  margin: 0 6px;
  position: relative;
}
#partners .partners-desktop-ticker .partner-logo {
  height: 26px;
  max-width: 110px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
#partners .partners-desktop-ticker .partner-name {
  display: none;
  font-size: 10px;
  color: #555;
  margin-top: 2px;
  white-space: nowrap;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}
#partners .partners-desktop-ticker .partner-cell:hover .partner-logo {
  opacity: 1;
}
#partners .partners-desktop-ticker .partner-cell:hover .partner-name {
  display: block;
}
#partners .partners-desktop-ticker::before,
#partners .partners-desktop-ticker::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
#partners .partners-desktop-ticker::before {
  left: 0;
  background: linear-gradient(to right, #f8f9fa, transparent);
}
#partners .partners-desktop-ticker::after {
  right: 0;
  background: linear-gradient(to left, #f8f9fa, transparent);
}
#partners .partners-desktop-ticker:hover .ticker-row {
  animation-play-state: paused;
}
/* Mobile ticker fallback */
#partners .partners-mobile-ticker { display: none; overflow: hidden; }
#partners .partners-mobile-ticker .ticker-row {
  display: flex;
  width: max-content;
  margin-bottom: 4px;
}
#partners .partners-mobile-ticker .ticker-row.scroll-left {
  animation: ticker-left 60s linear infinite;
}
#partners .partners-mobile-ticker .ticker-row.scroll-right {
  animation: ticker-right 60s linear infinite;
}
#partners .partners-mobile-ticker .ticker-row:nth-child(odd) { animation-duration: 55s; }
#partners .partners-mobile-ticker .ticker-row:nth-child(even) { animation-duration: 65s; }
#partners .partners-mobile-ticker .ticker-row:nth-child(3n) { animation-duration: 58s; }
#partners .partners-mobile-ticker .ticker-row:nth-child(4n+1) { animation-duration: 62s; }
@keyframes ticker-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
@keyframes ticker-right {
  0% { transform: translateX(-50%); }
  100% { transform: translateX(0); }
}
#partners .partners-mobile-ticker .partner-cell {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 120px;
  height: 48px;
  padding: 8px 12px;
  margin: 0 4px;
}
#partners .partners-mobile-ticker .partner-logo {
  height: 24px;
  max-width: 96px;
  width: auto;
  object-fit: contain;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
#partners .partners-mobile-ticker .partner-cell:hover .partner-logo {
  opacity: 1;
}
@media (max-width: 767px) {
  #partners .partners-desktop-ticker { display: none; }
  #partners .partners-mobile-ticker { display: block; }
}
.why {
	border-left: solid #fff 10px;
  border-right: solid #fff 10px;
}
.how {
	border: solid #fff 3px;
}
.story {
	padding: 1.5rem;
}
.smallTitle {
    font-size: 10px;
    text-transform: uppercase;
    line-height: 10px;
    letter-spacing: 3px;
    font-weight: 500;
}

#growth-studio .card-title {
color:#fff;
}

#growth-studio {
	background:linear-gradient(to top,rgba(50,50,50,0.9),rgba(255,255,255,0.9)),linear-gradient(to bottom,rgba(30,30,30,0.5),rgba(255,255,255,0.5)),url("../images/scalarly-growth-studio.png")no-repeat center center;
  	-webkit-background-size: cover;
  	-moz-background-size: cover;
  	-o-background-size: cover;
  	background-size: cover;
}




.bg-dark {
  background-color:#000 !important;
}
.why p {
	font-size: 0.9rem;
	color:#f9fafc;
  line-height: 44px;
	font-weight: 100;
	letter-spacing: 2px;
	opacity: 1;
	transition: all 0.3s ease;
	white-space: normal;
	text-decoration: none;
	font-family: 'HKGrotesk-Regular',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.how p {
	color:#f9fafc;
	font-size: 1.45rem;
  line-height: 44px;
	font-weight: 100;
	padding-top: 20px;
	padding-bottom: 20px;
	letter-spacing: 2px;
	opacity: 1;
	transition: all 0.3s ease;
	white-space: normal;
	text-decoration: none;
	font-family: 'HKGrotesk-Regular',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.footer-title,
.main-title,
#contact h3 {
  font-family: 'HKGrotesk-Semibold',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.growth-title {
  font-family: 'HKGrotesk-Medium',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
.navbar-brand,
.navbar-heading,
.navbar-footing {
  font-family: 'Lato', 'Poppins',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
body h3 {
  color:#0d3359;
}
.welcome .typeform-share-main {
    margin-top: 40px;
}
.welcome .typeform-share-main,
.typeform-share-main-foot {
		font-weight: 500;
		text-decoration: none;
		display: inline-block;
		font-size: 18px;
}
.welcome .typeform-share-main:hover,
.typeform-share-main-foot:hover {
    text-decoration: none;
}

.team-quote {
	font-size:15px;
}

#projects .card {
	box-shadow:none;
	border: 1px solid #02111B;
	border-radius: 0px;
	width:100%;
	/* padding-top:100px;
	padding-bottom:100px; */

}
#offer .card,
#process .card {
	box-shadow:none;
	border: 1px solid #02111B;
	border-radius: 0px;
	width:100%;
}
#offer .card h4 {
	text-transform:uppercase;
	font-family: 'HKGrotesk-Semibold',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	margin-bottom:0;
	color: #02111B;
}
#projects h4 {
	text-transform:uppercase;
	font-family: 'HKGrotesk-Semibold',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	text-align:center;
	margin-bottom:0;
	color: #02111B;
}
#process .card h4 {
	text-transform:uppercase;
	font-family: 'HKGrotesk-Semibold',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	text-align:left;
	margin-bottom:0;
	color: #fff;
}
#process .card
 {
	background-color: #02111B;
	background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23ffffff' fill-opacity='0.08' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
	border-color: #fff;
}
#process .card p
 {
	font-size:0.9rem;
}
#projects h6 {
	text-transform:uppercase;
	font-family: 'HKGrotesk-Light',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size: 13px;
	font-weight:100;
	color:#007EA7;
	text-align:center;
}
#projects .proj-button {
	/* color:#007EA7; */
	color:rgba(0,0,0,.5);
	font-weight: 500;
	/* border-bottom: 3px solid #007EA7; */
	text-decoration: none;
	display: inline-block;
	padding-top: 10px;
	padding-bottom: 4px;
}
#process .card h6 {
	text-transform:uppercase;
	font-family: 'HKGrotesk-Semibold',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
	font-size: 13px;
	color:#a8a8a8;
	text-align:left;
}
#process .card-calimero {
	background-color:#a8a8a81f;
}
#process .card-calimero p {
	font-size:0.9rem;
}
/* Card typography stays site-wide: the 303 case-study pages and the blog index
   inherit it and have no font-family of their own. */
.card-body {
	font-family: 'HKGrotesk-Light',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* The 80px band padding is homepage-only: #services-home, #offer and #process use
   `card card-body` as full-height panels. Unscoped it hit every Bootstrap card on
   the site, so each new card surface had to ship a compensating override, and the
   Related block on the case-study pages shipped without one and carried ~160px of
   dead space for months (PR #159). Scoped here so the site-wide default is
   Bootstrap's own 20px. The #case-studies and #rss-feeds overrides below still win
   inside the homepage on id specificity. */
.shards-landing-page--1 .card-body {
	padding-top:80px;
	padding-bottom:80px;
}
.card-activities ul {
	list-style-type: none;
}

#contact {
  padding-top: 8rem;
  padding-bottom: 8rem;
  background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23eaebed' fill-opacity='0.53'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.shards-landing-page--1 .section-title:after {
  background:none;
}
.main-title, .footer-title, .growth-title {
	color:#02111B;
  font-size: 3.5rem;
  text-transform: uppercase;
  font-weight: 500;
  /* letter-spacing: -.1125rem; */
  margin-bottom: 20px;
  line-height:1.2;
}

.title-alter {
  /* color:#0d3359; */
  color:#323648;
}
.shards-landing-page--1 .welcome {
background:none;
}
.shards-landing-page--1 .welcome:before {
    /* background: #919ba5; */
    background-color: #ffffff;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%23eaebed' fill-opacity='0.53' fill-rule='evenodd'/%3E%3C/svg%3E");  }

.navbar-dark .navbar-nav .active>.nav-link,
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link.show,
.navbar-dark .navbar-nav .show>.nav-link {
  color: #0d3359;
  font-weight: 500;
}
.navbar-heading {
    border-bottom: solid 1px #f8f8f8;
    /* background: #919ba5; */
    background: #fff;
    text-transform:uppercase;
    font-size:0.65rem;
    font-weight:600;
    letter-spacing: 1px;
    color: #0d3359;
    opacity: 1;
    transition: all 0.3s ease;
    max-width: 100%;
    white-space: normal;
    text-decoration: none;
    display: inline-block;
  }
  .navbar-footing {
      border-top: solid 1px #f8f8f8;
      /* background: #919ba5; */
      background: #fff;
      text-transform:uppercase;
      font-size:0.65rem;
      font-weight:500;
      letter-spacing: 1px;
      color: #0d3359;
      opacity: 1;
      transition: all 0.3s ease;
      max-width: 100%;
      white-space: normal;
      text-decoration: none;
    }
  .navbar-heading .navbar-brand {
    font-weight:600;
		color:#02111B;
  }
    .navbar-brand img { width:110px;}
  .navbar-footing .navbar-brand {
  font-size: 0.7rem;
      }

.zoho {
  margin-left:10px;
  margin-top:8px;
}

/* Special for SMALL only */
@media (max-width: 992px) {

	#offer .cards-firstrow {padding-top:30px;}

	#projects .cards-firstrow {padding-top:70px;}

	#offer .col-lg-6,
	#projects .col-lg-6
	{margin-bottom:50px;}
}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 276px) {

	#offer .card h4 {
		text-align:center;
	}

	.card-activities ul {
	  text-align: center;
		padding-left:0;
		position:relative;
		top:20%;
	  color: #02111B;
		font-weight: 600;
	  font-size: 0.75rem;
	}

 }

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {

	.why p {
		font-size: 1.05rem;
	}

	#offer .card h4 {
		padding-left:35px;
		text-align:left;
	}

	.card-activities ul {
		text-align: left;
		padding-left:40px;
	}

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

	.shards-landing-page--1 .ball
	 {
	  position: absolute;
	  border-radius: 100%;
	  opacity: 1;
	}

 	.cards-secrow {padding-top:30px;}

	#projects .proj-panel-left {
			border-right: 5px solid #02111B;
	}
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {  }

/* ─── Lead Magnet Forms ─── */
.lm-form-container {
  background: #f8f9fa;
  border: 1px solid #e9ecef;
  padding: 2rem;
  margin: 2rem 0;
}
.lm-inner {
  max-width: 480px;
  margin: 0 auto;
  text-align: center;
}
.lm-title {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: #02111B;
  margin-bottom: .5rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.lm-desc {
  font-family: 'HKGrotesk-Light', -apple-system, sans-serif;
  font-size: .95rem;
  color: #666;
  margin-bottom: 1.5rem;
  line-height: 1.6;
}
.lm-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.lm-input {
  font-family: 'HKGrotesk-Regular', -apple-system, sans-serif;
  font-size: .9rem;
  padding: 10px 14px;
  border: 1px solid #ddd;
  background: #fff;
  color: #333;
  flex: 1;
  min-width: 160px;
}
.lm-input:focus {
  outline: none;
  border-color: #02111B;
}
.lm-btn {
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif;
  font-size: .85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 10px 24px;
  background: #02111B;
  color: #fff;
  border: 2px solid #02111B;
  cursor: pointer;
  transition: all .2s ease;
  white-space: nowrap;
}
.lm-btn:hover {
  background: #fff;
  color: #02111B;
}
.lm-btn:disabled {
  opacity: .6;
  cursor: not-allowed;
}
.lm-privacy {
  font-family: 'HKGrotesk-Light', -apple-system, sans-serif;
  font-size: .75rem;
  color: #999;
  margin-top: .75rem;
}
.lm-error {
  font-family: 'HKGrotesk-Regular', -apple-system, sans-serif;
  font-size: .85rem;
  color: #dc3545;
  margin-top: .5rem;
}
.lm-success .lm-title {
  color: #28a745;
}
.lm-download-btn {
  display: inline-block;
  font-family: 'HKGrotesk-Semibold', -apple-system, sans-serif;
  font-size: .9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 12px 28px;
  background: #02111B;
  color: #fff;
  text-decoration: none;
  border: 2px solid #02111B;
  margin-top: 1rem;
  transition: all .2s ease;
}
.lm-download-btn:hover {
  background: #fff;
  color: #02111B;
  text-decoration: none;
}
@media (max-width: 576px) {
  .lm-fields {
    flex-direction: column;
  }
  .lm-input, .lm-btn {
    width: 100%;
  }
}
/* Mobile: hide filter bars, show 1 card per section */
@media (max-width: 768px) {
  #csHomeFilter,
  #khHomeFilter,
  #blogHomeFilter {
    display: none !important;
  }
  /* Center mobile partner ticker within section */
  #partners .partners-mobile-ticker {
    max-width: 100vw;
    margin: 0 auto;
  }
  /* Shrink client carousel on mobile */
  .client-carousel {
    height: 400px;
  }
}

/* ===== Extended footer + flag language switcher (site-wide, 2026-06-03) ===== */
.scal-footer{background:#02111B;color:#cfd6dd;padding:56px 0 28px;font-family:'HKGrotesk-Regular','Lato',-apple-system,sans-serif;}
.scal-footer .container{max-width:1140px;margin:0 auto;padding:0 20px;}
.scal-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;}
.scal-foot-brand img{height:26px;margin-bottom:14px;filter:brightness(0) invert(1);}
.scal-foot-brand p{font-size:13px;line-height:1.6;color:#8a97a3;max-width:320px;margin:0;}
.scal-foot-col h4{font-family:'HKGrotesk-Semibold','Raleway',sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:1.5px;color:#6b7a86;margin:0 0 14px;}
.scal-foot-col ul{list-style:none;padding:0;margin:0;}
.scal-foot-col li{margin-bottom:9px;}
.scal-foot-col a{color:#cfd6dd;text-decoration:none;font-size:14px;transition:color .15s ease;}
.scal-foot-col a:hover{color:#fff;text-decoration:none;}
.scal-foot-certs{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;border-top:1px solid rgba(255,255,255,.08);margin-top:40px;padding-top:24px;}
.scal-foot-zoho{height:32px;width:auto;}
.scal-foot-stars{color:#fbbc04;letter-spacing:1px;margin-left:5px;font-size:12px;}
.scal-foot-bottom{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:20px;padding-top:18px;border-top:1px solid rgba(255,255,255,.06);}
.scal-foot-bottom small{color:#6b7a86;font-size:12px;line-height:1.5;}
.scal-foot-langs{display:flex;gap:10px;align-items:center;}
.scal-foot-langs a{display:inline-flex;line-height:0;}
.scal-foot-langs img{width:22px;height:auto;border-radius:2px;opacity:.6;transition:opacity .15s ease,outline .15s ease;}
.scal-foot-langs a.is-active img,.scal-foot-langs a:hover img{opacity:1;outline:1px solid rgba(255,255,255,.55);}
.scal-foot-badge{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.scal-foot-badge img{height:24px;width:auto;}
.scal-foot-cert{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;background:#fff;border-radius:6px;font-family:'HKGrotesk-Semibold','Raleway',sans-serif;font-size:11px;font-weight:600;letter-spacing:.2px;color:#1a2b3d;white-space:nowrap;text-decoration:none;}
a.scal-foot-cert{transition:box-shadow .15s ease,transform .15s ease;}
a.scal-foot-cert:hover{box-shadow:0 3px 10px rgba(0,0,0,.28);transform:translateY(-1px);text-decoration:none;color:#1a2b3d;}
.scal-foot-cert img{height:16px;width:auto;display:block;}
/* 2nd badge row sits right under the first, no extra divider/gap */
.scal-foot-certs-2{margin-top:10px;border-top:none;padding-top:0;}
@media(max-width:767px){.scal-foot-grid{grid-template-columns:1fr 1fr;gap:24px;}.scal-foot-brand{grid-column:1 / -1;}.scal-foot-bottom{justify-content:flex-start;}}

/* header flag language switcher (content pages that lack one) */
.scal-hdr-langs{display:flex;gap:8px;align-items:center;margin-left:14px;}
.scal-hdr-langs a{display:inline-flex;line-height:0;}
.scal-hdr-langs img{width:20px;height:auto;border-radius:2px;opacity:.55;}
.scal-hdr-langs a.is-active img,.scal-hdr-langs a:hover img{opacity:1;}