/** Shopify CDN: Minification failed

Line 1439:0 Comments in CSS use "/* ... */" instead of "//"
Line 4495:0 Unexpected "="

**/
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  color: var(--p);
  background: var(--bg, var(--bg));
}
.case-navigation-section{
    position: sticky !important;
    top: var(--header-h);
    z-index: 99;
}
/* The sticky bar is sized by its links, as in the reference, where .prod-nav
   carries no vertical padding. The section writes its padding settings inline on
   the <nav>, and those settings sit in templates/metaobject/, which Shopify
   rejects on upload, so the override has to happen here. */
.case-navigation-section .prod-nav{
    padding-block: 0 !important;
}

/* Case study bands. The reference alternates tinted and plain sections with
   `.page > .cs-band { background: var(--bga) }`; here the sections are not
   children of .page, so the tint never landed. The child combinator keeps this
   to the case study templates, where the section sits inside a div wrapper —
   on service pages `.cs-band` is the Shopify section wrapper itself. */
div.shopify-section>.cs-band{
    background: var(--bga);
}

.cs-hero-grid.hereo-case{
  padding:0 ;
}
.post-related .tlx-sec__inner, .tlx-hero-page .tlx-sec__inner,
.prod-faq-section .tlx-sec__inner{
    padding: 0;
}
/* The reference markup is `.cs-hero > .cs-hero-bg + .container`, so the glow
   covers the whole hero and `.cs-hero > .container { z-index: 2 }` lifts the copy
   above it. Here the section wraps both in .tlx-sec__inner, which would trap the
   glow inside the section's padding, so the wrapper stays out of the positioning
   chain and the copy carries the stacking rule instead. */
.tlx-sec__inner.inner_case{
  padding: 76px 0 84px;
  max-width: unset;
  margin: unset;
  position: static;
}
.cs-hero .tlx-sec__inner.inner_case>.container{
  position: relative;
  z-index: 2;
}

.tlx-sec h1,
.tlx-sec h2,
.tlx-sec h3 {
  color: var(--sec-head, var(--p));
}

@media (max-width: 749px) {
  .tlx-sec {
    padding-block: var(--sec-pt-m, 56px) var(--sec-pb-m, 56px);
  }
}

.port:hover {
  border-color: var(--a);
  box-shadow: 0 16px 32px rgba(var(--p-deep-rgb), .08);
  transform: translateY(-3px);
}

.port .tag {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(var(--a-rgb), 0.12);
  color: var(--a);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.port .tag2 {
  background: rgba(var(--p-deep-rgb), 0.08);
  color: var(--p);
  margin-left: 6px;
}

.proc .pnum {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 42px;
  font-weight: 900;
  color: rgba(var(--a-rgb), .15);
  line-height: 1;
}

.fit-no {
  background: rgba(var(--a-rgb), .05);
  border: 1px solid var(--br);
}
 .shopify-section--prod-nav{
  position:sticky !important;
  top: var(--header-h);
  z-index:999;
 }
#shopify-section-sections--19233435320382__header {
  position: sticky;
  top: 0;
  z-index: 9999;
}

@keyframes float {
}

@keyframes meshShift {
}

.cro-offer .bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #5b9d3c;
  font-weight: 800;
}

.compare .tlx {
  background: rgba(var(--a-rgb), .06);
  font-weight: 700;
  color: var(--p);
}

.guarantee {
  display: flex;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, var(--p-deep) 0%, var(--p-2) 100%);
  color: #fff;
  padding: 36px 40px;
  border-radius: var(--r);
}

details:hover {
  border-color: rgba(var(--a-rgb), .3);
}

.test::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 20px;
  font-size: 80px;
  color: rgba(var(--a-rgb), .12);
  font-family: Georgia, serif;
  line-height: 1;
  font-weight: 700;
}

.cro-offer-pill {
  background: linear-gradient(135deg, var(--a), var(--a-2));
  box-shadow: 0 4px 14px rgba(var(--a-rgb), .4);
}

@keyframes fadeUp {
}

::selection {
  background: rgba(var(--a-rgb), .25);
  color: var(--p);
}

.why .wnum {
  background: linear-gradient(135deg, var(--a), var(--a-2));
  box-shadow: 0 4px 12px rgba(var(--a-rgb), .3);
}

section.section-dark {
  background: var(--bgd, var(--bgd));
  color: #fff;
}

.hero-stats-band {
  background: linear-gradient(135deg, var(--p) 0%, var(--p-2) 60%, #1d4a82 100%);
  color: #fff;
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}

.hero-stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(var(--a-rgb), .18) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(91, 157, 220, .12) 0%, transparent 50%);
  pointer-events: none;
}

.hsb-stat {
  text-align: left;
  padding-left: 18px;
  border-left: 2px solid rgba(var(--a-rgb), .45);
}

.hsb-stat strong {
  display: block;
  font-size: 42px;
  font-weight: 900;
  color: var(--a, var(--a));
  line-height: 1;
  letter-spacing: -.03em;
  font-feature-settings: "tnum";
  margin-bottom: 6px;
}

@keyframes brand-scroll {
}

.awards-bar {
  padding: 48px 0;
  background: var(--bg, var(--bg));
  border-bottom: 1px solid var(--br, var(--br));
}

.awards-bar h2 {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--m, var(--m));
  margin: 0 0 28px;
  font-weight: 700;
}

.award-badge:hover {
  border-color: var(--a, var(--a));
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(var(--p-rgb), .08);
}

.award-badge .a-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--p, var(--p));
  letter-spacing: -.01em;
  line-height: 1.2;
}

.award-badge .a-sub {
  font-size: 11px;
  color: var(--m, var(--m));
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-stats-row .hsb-stat {
  text-align: left;
  padding-left: 18px;
  border-left: 2px solid rgba(var(--a-rgb), .45);
}

.hero-stats-row .hsb-stat strong {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: var(--a, var(--a));
  line-height: 1;
  letter-spacing: -.03em;
  font-feature-settings: "tnum";
  margin-bottom: 6px;
}

@keyframes row-scroll-left {
}

@keyframes row-scroll-right {
}

@keyframes pf-float {
}

@supports not (overflow-x:clip) {
}

.hero-phone-cta svg {
  width: 20px;
  height: 20px;
  color: var(--a, var(--a));
}

.next-line span::before {
  content: "✓";
  color: #5b9d3c;
  font-weight: 800;
}

@keyframes annpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(var(--a-rgb), .6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(var(--a-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--a-rgb), 0);
  }
}

section h2,
.section h2,
section .container>h2,
section .container--narrow>h2,
.blog-head h2,
.pricing-section h2,
.review-head h2 {
  font-size: clamp(22px, 2.8vw, 32px) !important;
  line-height: 1.18 !important;
  letter-spacing: -.4px !important;
}

.sr-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(var(--a-rgb), .14), rgba(var(--a-rgb), .06));
  color: var(--a, var(--a));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sr-body strong {
  display: block;
  font-size: 14px;
  color: var(--p, var(--p-deep));
  font-weight: 700;
  line-height: 1.3;
}

.sr-body span {
  display: block;
  font-size: 12px;
  color: var(--m, var(--m));
  margin-top: 2px;
}

.sr-tag {
  font-size: 11px;
  color: #94a0b0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(var(--p-deep-rgb), .04);
  padding: 3px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

.search-empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--m, var(--m));
  font-size: 13.5px;
}
#portfolio_template p{
  color: white !important;
}

.story-img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, var(--p-deep), var(--p-3));
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 140px;
  font-weight: 900;
  letter-spacing: -4px;
}

.value:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(var(--p-deep-rgb), .12);
  border-color: transparent;
}

.case-list-grid>a:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(var(--p-deep-rgb), .18);
}

.filter-count {
  font-size: 12.5px;
  color: var(--m);
  margin-left: auto;
}

.recog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -14px rgba(var(--p-deep-rgb), .14);
  border-color: transparent;
}

.recog-card .rc-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(var(--a-rgb), .16), rgba(var(--a-rgb), .04));
  color: var(--a, var(--a));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.ind-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(var(--p-deep-rgb), .12);
  border-color: transparent;
  background: linear-gradient(135deg, #fff, rgba(var(--a-rgb), .03));
}

@media(max-width:480px) {
}

.blog-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(var(--p-deep-rgb), .18);
  border-color: transparent;
}

.blog-feat .cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--a);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(var(--a-rgb), .1);
  border-radius: 99px;
  align-self: flex-start;
}

.blog-feat-img {
  min-height: 300px;
  background: linear-gradient(135deg, var(--p-deep) 0%, var(--a) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 80px;
  font-weight: 900;
  letter-spacing: -4px;
  position: relative;
}

@media(max-width:380px) {
}

.mnav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--p-rgb), .45);
  opacity: 0;
  transition: opacity .26s cubic-bezier(.4, 0, .2, 1);
}

.mnav-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px -12px rgba(var(--p-rgb), .35);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}
.mnav-panel::-webkit-scrollbar{display:none;}
.mnav-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(var(--p-deep-rgb), .04);
  border: 1px solid rgba(var(--p-deep-rgb), .06);
  border-radius: 50%;
  color: var(--p);
  cursor: pointer;
  padding: 0;
}

.mnav-close:hover {
  background: rgba(var(--a-rgb), .1);
  color: var(--a);
}

.mnav-list>li>a:hover,
.mnav-toggle:hover {
  background: rgba(var(--p-deep-rgb), .035);
}

.mnav-sub a:hover {
  color: var(--p);
  background: rgba(var(--p-deep-rgb), .03);
}

.ps-card .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--p-rgb), .22) 0%, rgba(var(--p-rgb), .48) 34%, rgba(var(--p-rgb), .78) 58%, rgba(var(--p-rgb), .94) 100%);
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--a, var(--a));
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--p, var(--p));
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top .18s cubic-bezier(.4, 0, .2, 1);
}

.mp-cat-navy {
  background: rgba(var(--p-rgb), .07);
  color: var(--p);
}

.mp-note:hover {
  border-color: rgba(var(--a-rgb), .3);
}

.mp-note-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--a-dark);
}

.sh-chip:hover .sh-chip-face {
  border-color: rgba(var(--a-rgb), .4);
}

.sh-chip input:checked+.sh-chip-face {
  border-color: var(--a);
  background: rgba(var(--a-rgb), .06);
  color: var(--a-dark);
}

.pg-info strong {
  color: var(--p);
  font-weight: 800;
  font-family: var(--f);
}

.pg-btn,
.pg-num {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--br);
  border-radius: 99px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}

.art-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--a);
  box-shadow: 0 0 0 4px rgba(var(--a-rgb), .12);
}

.art-search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(var(--a-rgb), .32);
}

.art-cats a:hover {
  color: var(--a-dark);
}

.art-cats a:hover em {
  background: rgba(var(--a-rgb), .1);
  color: var(--a-dark);
}

.art-mod-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--a-dark);
  text-decoration: none;
}

.art-thumb.cover-3 {
  background: linear-gradient(135deg, var(--p) 0%, #3a5fa8 100%);
}

.art-posts a:hover strong {
  color: var(--a-dark);
}

.prod-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(var(--a-rgb), .3);
}

.prod-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(var(--a-rgb), .1);
  color: var(--a);
  margin-bottom: 18px;
}

.prod-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: var(--a-dark);
}

.kb-item:hover {
  border-color: rgba(var(--a-rgb), .3);
  box-shadow: var(--shadow-sm);
}

.prod-bar .prod-demo-link:hover {
  color: var(--a-dark);
}

.pm-rows {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.4vw, 18px);
  margin-top: clamp(34px, 4vw, 52px);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 6%, #000 94%, transparent);
}

.pm-row {
  display: flex;
  gap: clamp(10px, 1.4vw, 18px);
  width: max-content;
  will-change: transform;
  animation: pm-left 68s linear infinite;

  direction: ltr;
}

@keyframes pm-left {
}

@keyframes pm-right {
}

.pm-row img {
  display: block;
  height: clamp(150px, 19vw, 250px);
  width: auto;
  border-radius: 16px;
  object-fit: cover;
  box-shadow: var(--shadow);
  border: 1px solid var(--br);
  background: var(--bga);
  flex: 0 0 auto;
}

.vs-section {
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
}

.vs-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.vs-stats {
  list-style: none;
  margin: clamp(28px, 3.4vw, 40px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(20px, 2.6vw, 30px);
}

.vs-stats strong {
  display: block;
  font-size: clamp(24px, 2.8vw, 32px);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--p);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.vs-cta {
  margin-top: clamp(28px, 3.4vw, 38px);
  align-self: start;
}

.vs-marquee {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1.2vw, 16px);
  height: clamp(430px, 50vw, 600px);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 11%, #000 89%, transparent);
}

.vs-track {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vw, 16px);
  will-change: transform;
  animation: vs-up 46s linear infinite;
}

@keyframes vs-up {
}

@keyframes vs-down {
}

.mt-section {
  padding: clamp(56px, 7vw, 96px) 0;
}

.mt-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(26px, 4vw, 64px);
}

.mt-row+.mt-row {
  margin-top: clamp(44px, 6vw, 88px);
}

.mt-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 700/351;
  object-fit: cover;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), box-shadow .45s cubic-bezier(.4, 0, .2, 1);
}

.mt-body h3 {
  font-size: clamp(19px, 2.2vw, 27px) !important;
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.22 !important;
  color: var(--p);
  margin: 0 0 14px;
  text-wrap: balance;
}

@media(max-width:860px) {
}

.lt-section .container {
  position: relative;
}

.lt-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(20px, 2.6vw, 34px);
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.lt-tile {
  display: grid;
  place-items: center;
  width: 100%;
  max-width: 112px;
  aspect-ratio: 1;
  border-radius: var(--r-lg);
  background: var(--lt-bg, #fff);
  color: var(--lt-fg, var(--p));
  box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .6);
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), box-shadow .35s cubic-bezier(.4, 0, .2, 1);
}

.lt-cell:hover .lt-tile {
  transform: translateY(-6px);
  box-shadow: 0 26px 44px -14px rgba(0, 0, 0, .7);
}

.lt-label {
  font-size: 16px;
  font-weight: 700;
  color: rgba(255, 255, 255, .86);
  line-height: 1.3;
}

@media(max-width:620px) {
  .lt-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.pa-section {
  padding: clamp(56px, 7vw, 96px) 0 0;
}

.pa-panel {
  position: relative;
  flex: 0 0 clamp(58px, 5vw, 74px);
  display: flex;
  cursor: pointer;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--grad);
  color: #fff;
  transition: flex-grow .5s cubic-bezier(.4, 0, .2, 1), flex-basis .5s cubic-bezier(.4, 0, .2, 1),
    background .35s cubic-bezier(.4, 0, .2, 1);
}

.pa-body {
  padding: 56px clamp(22px, 3vw, 40px) 34px;
  max-width: 620px;
  animation: pa-in .45s cubic-bezier(.4, 0, .2, 1) both;
}

@keyframes pa-in {
}

.pa-body h3 {
  font-size: clamp(19px, 2.1vw, 26px) !important;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--a);
  margin: 0 0 12px;
  line-height: 1.2 !important;
}

.hv-section {
  padding: 80px 0;
}

.hv-grid {
  display: grid;
  gap: clamp(16px, 2vw, 26px);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.hv-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-lg);
  min-height: clamp(260px, 26vw, 320px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  background: var(--p);
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: box-shadow .4s cubic-bezier(.4, 0, .2, 1),
    transform .4s cubic-bezier(.4, 0, .2, 1);
}

.hv-cover {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: var(--hv-ink, var(--p));
}

.hv-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--p);
  opacity: 0;
  transition: opacity .4s cubic-bezier(.4, 0, .2, 1);
}

.hv-face {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: clamp(18px, 2vw, 24px);
  color: #fff;
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
}

.hv-reveal {
  position: absolute;
  inset: auto 0 0;
  padding: 0 clamp(18px, 2vw, 24px);
  color: rgba(255, 255, 255, .86);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .45s cubic-bezier(.4, 0, .2, 1), opacity .3s, padding .45s cubic-bezier(.4, 0, .2, 1);
}

.hv-card:hover .hv-reveal,
.hv-card:focus-visible .hv-reveal,
.hv-card.is-open .hv-reveal {
  max-height: 260px;
  opacity: 1;
  padding: 0 clamp(18px, 2vw, 24px) clamp(18px, 2vw, 24px);
  position: relative;
  inset: auto;
}

.hv-reveal p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}

.cmg-mesh {
  position: absolute;
  inset: 0;
  opacity: .75;
  background: radial-gradient(58% 62% at 18% 8%, rgba(var(--a-rgb), .22), transparent 62%),
    radial-gradient(52% 58% at 84% 92%, rgba(58, 95, 168, .5), transparent 64%);
}

.cmg-brand {
  display: block;
  line-height: 0;
  margin-bottom: clamp(30px, 5vw, 52px);
}

.cmg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--a-2);
  background: rgba(var(--a-rgb), .12);
  border: 1px solid rgba(var(--a-rgb), .28);
  border-radius: 999px;
  padding: 6px 14px;
}

.cmg-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a);
  box-shadow: 0 0 0 0 rgba(var(--a-rgb), .6);
  animation: cmg-pulse 2.4s infinite;
}

@keyframes cmg-pulse {
  70% {
    box-shadow: 0 0 0 9px rgba(var(--a-rgb), 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(var(--a-rgb), 0);
  }
}

.cmg h1 {
  font-size: clamp(30px, 5.4vw, 54px) !important;
  font-weight: 800;
  line-height: 1.08 !important;
  letter-spacing: -.03em;
  color: #fff;
  margin: 22px 0 0;
  text-wrap: balance;
}

.cmg-lede {
  font-size: clamp(15px, 1.7vw, 17px);
  line-height: 1.7;
  color: rgba(255, 255, 255, .78);
  margin: 18px 0 0;
  max-width: 52ch;
}

.cmg-routes {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 26px;
  margin: clamp(30px, 4vw, 44px) 0 0;
  padding: clamp(22px, 3vw, 28px) 0 0;
  width: 100%;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.cmg-routes a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  transition: color .25s cubic-bezier(.4, 0, .2, 1);
}

@media (max-width: 820px) {
}

[dir="rtl"] .hsb-stat {
  text-align: right;
  padding-right: 18px;
  padding-left: 0;
  border-right: 2px solid rgba(var(--a-rgb), .45);
  border-left: 0;
}

[dir="rtl"] .hero-stats-row .hsb-stat {
  text-align: right;
  padding-right: 18px;
  padding-left: 0;
  border-right: 2px solid rgba(var(--a-rgb), .45);
  border-left: 0;
}

section {
  padding: 0 0;
  position: relative !important;
}



.res {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 36px;
  background: linear-gradient(135deg, var(--p-deep) 0%, var(--p-2) 100%);
  color: #fff;
  border-radius: var(--r);
}

.loss {
  background: #fff8f5;
  border: 1px solid rgba(var(--a-rgb), .2);
  border-radius: var(--r);
  padding: 36px 40px;
  margin: 36px 0;
}

.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, var(--p-deep) 0%, var(--p-2) 100%);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
  z-index: 900;
  transform: translateY(100%);
  transition: transform .3s;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--br);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: all .2s;
  flex-shrink:0;
}

.cs-show-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(var(--a-rgb), .3);
}



.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--p) 0%, var(--a) 100%);
  box-shadow: 0 4px 12px rgba(var(--a-rgb), .25);
  font-weight: 900;
  font-size: 18px;
}

.ci-wrap {
  background: linear-gradient(135deg, rgba(var(--a-rgb), .15), rgba(var(--a-rgb), .06));
  border-radius: 12px;
  transition: all .2s;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--p) 0%, var(--a) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(var(--a-rgb), .25);
}

.brand-text strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--p, var(--p));
}

.brand-text small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--m, var(--m));
  margin-top: 3px;
}

.section-alt {
  background: var(--bga, var(--bga));
}

.award-badge {
  padding: 18px 14px;
  border: 1.5px solid var(--br-2, var(--br-2));
  border-radius: 14px;
  text-align: center;
  background: #fff;
  transition: all .2s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.brand-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--p) 0%, var(--a) 100%);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(var(--a-rgb), .25);
}

.filter-wrap {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--br);
  position: sticky;
  top: 74px;
  z-index: 900;
  padding: 12px 24px;
  box-shadow: 0 4px 16px -8px rgba(var(--p-rgb), .12);
}

.prod-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--br);
  box-shadow: 0 4px 16px -8px rgba(var(--p-rgb), .12);
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(var(--a-rgb), .3);
}

.prod-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--br);
  box-shadow: 0 -6px 24px -10px rgba(var(--p-rgb), .18);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .25s, visibility .25s;
}

.pm-section {
  padding: clamp(56px, 7vw, 96px) 0;
  overflow: hidden;
}

.mt-head {
  max-width: 760px;
  margin: 0 auto clamp(34px, 4vw, 58px);
  text-align: center;
}

.lt-section {
  position: relative;
  overflow: hidden;
  background: var(--bgd);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0;
}

.lt-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .5;
  background: radial-gradient(60% 70% at 15% 0%, rgba(42, 68, 122, .55), transparent 60%),
    radial-gradient(50% 60% at 85% 100%, rgba(var(--a-rgb), .18), transparent 62%);
}

.lt-head {
  max-width: 720px;
  margin: 0 ;
  text-align: left;
  padding-bottom: 0;
}

.lt-mono {
  font-size: clamp(15px, 1.7vw, 22px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.pa-head {
  max-width: 760px;
  margin: 0 auto clamp(30px, 3.6vw, 46px);
  text-align: center;
}

.pa-rail {
  display: flex;
  gap: 6px;
  padding: 0 clamp(12px, 3vw, 24px) clamp(48px, 6vw, 80px);
  align-items: stretch;
  min-height: clamp(300px, 38vw, 420px);
}

.hv-head {
  max-width: 760px;
  margin: 0 auto clamp(30px, 3.6vw, 46px);
  text-align: center;
}

.hv-mesh {
  position: absolute;
  inset: 0;
  opacity: .9;
  background: radial-gradient(70% 60% at 20% 15%, color-mix(in srgb, var(--hv-brand) 55%, transparent), transparent 65%),
    radial-gradient(60% 55% at 85% 90%, color-mix(in srgb, var(--hv-brand) 30%, transparent), transparent 60%),
    linear-gradient(160deg, rgba(255, 255, 255, .10), rgba(0, 0, 0, .35));
}

.hv-badge {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--hv-brand, var(--p));
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.02em;
}

.hv-go {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--a);
  color: var(--a);
  transition: background .3s, color .3s;
}

#pr-track {
  grid-auto-columns: clamp(300px, 40vw, 470px);
}

.cmg-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 38px);
}

button.ann-link:hover {
  border-color: var(--a, var(--a));
}

.mega-links a:hover {
  color: var(--a-dark);
}

.mega-links a[aria-current] {
  color: var(--a-dark);
  font-weight: 700;
}

.demo-note {
  margin: 0 0 22px;
  padding: 9px 14px;
  border: 1px dashed rgba(var(--a-rgb), .45);
  border-radius: 8px;
  background: rgba(var(--a-rgb), .06);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--a-dark);
  display: inline-block;
}

button.ann-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
  color: var(--a, var(--a));
  font-weight: 700;
  border-bottom: 1px dashed rgba(var(--a-rgb), .4);
  margin-left:4px;
}

/* hero keeps its own artwork */
.tlx-hero-home>.tlx-sec,
.tlx-hero-service>.tlx-sec,
.tlx-hero-case>.tlx-sec,
.tlx-hero-portfolio>.tlx-sec {
  background: transparent;
}



// our css

/* === Tetralogicx — combined stylesheet === */
/* Generated from index.html sections. Edit here for site-wide changes. */


/* ==========================================================================
   inline-0
   ========================================================================== */
/* legacy :root removed; the canonical token block lives below. --f moved with it. */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--f);
  color: var(--p);
  line-height: 1.65;
  background: var(--bg);
  font-size: 16px;
}

a {
  color: inherit;
}

/* section {
  padding: 64px 0;
} */

h1 {
  font-size: clamp(34px, 5vw, 56px);
  line-height: 1.1;
  margin: 0 0 20px;
  font-weight: 800;
  letter-spacing: -0.6px;
}

h2 {
  font-size: clamp(28px, 3.6vw, 40px);
  line-height: 1.15;
  margin: 0 0 18px;
  font-weight: 800;
  letter-spacing: -0.4px;
}

h3 {
  font-size: 21px;
  margin: 0 0 10px;
  font-weight: 700;
  letter-spacing: -0.2px;
}

h4 {
  font-size: 17px;
  margin: 0 0 8px;
  font-weight: 700;
}

p {
  margin: 0 0 14px;
}

.lede {
  font-size: 19px;
  color: var(--m);
  max-width: 780px;
  font-weight: 400;
  letter-spacing: -0.005em;
}
.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* HEADER */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--br);
  z-index: 1000;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  justify-content: space-between;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--p);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: -0.4px;
}

.brand-logo {
  width: 34px;
  height: 34px;
  background: linear-gradient(135deg, var(--p) 0%, var(--a) 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
}

.main-nav {
  display: flex;
  gap: 6px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav>li {
  position: relative;
}

.main-nav>li>a,
.main-nav>li>span {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 10px 14px;
  color: var(--p);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  border-radius: 6px;
  transition: background .15s;
  cursor: pointer;
}

.main-nav>li>a:hover,
.main-nav>li:hover>span {
  background: var(--bga);
  color: var(--a);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 14px;
}

/* removed duplicate phone glyph — using single inline SVG instead */
.header-cta .btn {
  padding: 11px 22px;
  font-size: 14px;
}

/* MEGA MENU */

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 0;
  font-size: 24px;
  color: var(--p);
  cursor: pointer;
  padding: 8px;
}

@media(max-width:980px) {

  .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }
}

/* FOOTER */
.site-footer {
  background: var(--p);
  color: rgba(255, 255, 255, .85);
  padding: 64px 0 24px;
  margin-top: 64px;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 40px;
  margin-bottom: 48px;
}

.footer-brand-blurb {
  font-size: 14px;
  line-height: 1.7;
  color: rgba(255, 255, 255, .7);
  margin: 14px 0 18px;
  max-width: 320px;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 14px;
}

.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  transition: background .2s;
  font-size: 14px;
  font-weight: 700;
}

.footer-social a:hover {
  background: var(--a);
}

.footer-col h2 {
  color: #fff;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  margin: 0 0 18px;
  font-weight: 700;
}

.footer-col a {
  color: rgba(255, 255, 255, .7);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s;
}

.footer-col a:hover {
  color: var(--a);
}

.footer-col p {
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  margin: 0 0 10px;
}

.footer-contact-item {
  margin-bottom: 14px;
}

.footer-contact-item strong {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  display: block;
  margin-bottom: 4px;
  font-weight: 700;
}

.footer-bottom {
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

.footer-bottom a {
  color: rgba(255, 255, 255, .6);
  text-decoration: none;
  margin-left: 18px;
}

.footer-bottom a:hover {
  color: var(--a);
}

@media(max-width:980px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 30px;
  }
}

@media(max-width:600px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}

/* Component classes used across pages (same as before) */
.hero {
  padding: 72px 0 48px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}

/* the services page carries its title in .page-hero, so this block is just a
   CTA + trust strip beside the helper card: top-align it instead of centring. */
.hero--compact {
  align-items: start;
  padding: 48px 0 40px;
  padding-left: 25px;
  padding-right: 25px;
}

@media(max-width:900px) {
  .hero--compact {
    grid-template-columns: 1fr;
  }
}

.hs {
  padding: 18px;
  background: var(--bga);
  border-radius: 12px;
  border: 1px solid var(--br);
}

.hs strong {
  display: block;
  font-size: 28px;
  color: var(--p);
  font-weight: 800;
  line-height: 1;
}

.hs span {
  font-size: 13px;
  color: var(--m);
}

.badges {
  display: flex;
  gap: 14px;
  margin-top: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p);
}

.badge::before {
  content: "\25cf";
  color: #5b9d3c;
  font-size: 11px;
}

.hero-card {
  padding: 36px;
  background: linear-gradient(135deg, #0a2540 0%, #14365e 100%);
  color: #fff;
  border-radius: 18px;
}

.hero-card h2,
.hero-card h3 {
  color: #fff;
}

.hero-card ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
}

.hero-card li {
  padding: 8px 0 8px 28px;
  position: relative;
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
}

.hero-card li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--a);
  font-weight: 800;
}

.logo-strip {
  padding: 36px 0;
  border-top: 1px solid var(--br);
  border-bottom: 1px solid var(--br);
  background: var(--bga);
  margin: 0 -24px;
}

.logo-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.logo-strip h2 {
  text-align: center;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--m);
  margin: 0 0 20px;
  font-weight: 600;
}

.lr {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  align-items: center;
  justify-items: center;
}

.lr div {
  font-weight: 700;
  color: var(--m);
  font-size: 14px;
  letter-spacing: -0.3px;
  opacity: .8;
}

.pp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.pp {
  padding: 28px;
  background: var(--bga);
  border-radius: var(--r);
  border: 1px solid var(--br);
}

.pp h3 {
  font-size: 18px;
  color: var(--p);
}

.pp p {
  color: var(--m);
  margin: 0;
  font-size: 15px;
}

.serv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.serv {
  padding: 30px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: #fff;
  transition: all .2s;
  position: relative;
  text-decoration: none;
  color: inherit;
  display: block;
}

.serv:hover {
  border-color: var(--a);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(10, 37, 64, .08);
}

.serv .num {
  font-size: 14px;
  font-weight: 800;
  color: var(--a);
  letter-spacing: 1px;
  margin-bottom: 12px;
  display: block;
}

.serv p {
  color: var(--m);
  margin: 0;
  font-size: 15px;
}

.port-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.port {
  padding: 32px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: var(--r);
  transition: all .2s;
}

.port:hover {
  border-color: var(--a);
  box-shadow: 0 16px 32px rgba(10, 37, 64, .08);
  transform: translateY(-3px);
}

.port .tag {
  display: inline-block;
  padding: 5px 12px;
  background: rgba(240, 97, 74, 0.12);
  color: var(--a);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 14px;
}

.port .tag2 {
  background: rgba(10, 37, 64, 0.08);
  color: var(--p);
  margin-left: 6px;
}

.port h3 {
  font-size: 22px;
  margin-bottom: 10px;
}

.port p {
  color: var(--m);
  margin: 0 0 18px;
  font-size: 15px;
}

.port-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--br);
}

.pm strong {
  display: block;
  font-size: 24px;
  color: var(--a);
  font-weight: 800;
  line-height: 1;
}

.pm span {
  font-size: 12px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.port-link {
  display: inline-block;
  margin-top: 16px;
  color: var(--p);
  font-weight: 700;
  text-decoration: none;
  font-size: 14px;
  border-bottom: 2px solid var(--a);
  padding-bottom: 2px;
}

.port-link:hover {
  color: var(--a);
}

.proc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.proc {
  padding: 28px;
  background: var(--bga);
  border-radius: var(--r);
  position: relative;
}

.proc .pnum {
  position: absolute;
  top: 18px;
  right: 24px;
  font-size: 42px;
  font-weight: 900;
  color: rgba(240, 97, 74, .15);
  line-height: 1;
}

.proc h3 {
  font-size: 18px;
  margin-bottom: 8px;
  padding-right: 50px;
}

.proc p {
  color: var(--m);
  margin: 0;
  font-size: 14px;
}

.res {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 36px;
  background: linear-gradient(135deg, #0a2540 0%, #14365e 100%);
  color: #fff;
  border-radius: var(--r);
}

.res-c {
  text-align: center;
}

.res-c strong {
  display: block;
  font-size: 48px;
  font-weight: 900;
  color: var(--a);
  line-height: 1;
  margin-bottom: 8px;
}

.res-c h4 {
  color: #fff;
  font-size: 15px;
  margin-bottom: 6px;
}

.res-c p {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  margin: 0;
}

.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.why {
  padding: 28px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: var(--r);
  position: relative;
}

.why .wnum {
  display: inline-block;
  width: 36px;
  height: 36px;
  background: var(--a);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 36px;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 14px;
}

.why h3 {
  font-size: 18px;
}

.why p {
  color: var(--m);
  margin: 0;
  font-size: 15px;
}

.tech-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.tech-pill {
  padding: 10px 18px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  color: var(--p);
}

.tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tier {
  padding: 32px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: #fff;
  transition: all .2s;
  position: relative;
}

.tier.feat {
  border-color: var(--a);
  box-shadow: 0 16px 32px rgba(240, 97, 74, .15);
  transform: scale(1.02);
}

.tier.feat::before {
  content: "Most Popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--a);
  color: #fff;
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tier h3 {
  font-size: 22px;
  margin-bottom: 4px;
}

.tier .price {
  font-size: 34px;
  font-weight: 900;
  color: var(--p);
  margin: 8px 0 4px;
}

.tier .price span {
  font-size: 14px;
  font-weight: 600;
  color: var(--m);
}

.tier .dur {
  font-size: 13px;
  color: var(--m);
  margin-bottom: 18px;
}

.tier ul {
  list-style: none;
  padding: 0;
  margin: 18px 0 24px;
}

.tier li {
  padding: 8px 0 8px 26px;
  position: relative;
  color: var(--p);
  font-size: 14px;
}

.tier li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--a);
  font-weight: 800;
}

.fit {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.fit-c {
  padding: 32px;
  border-radius: var(--r);
}

.fit-yes {
  background: rgba(91, 157, 60, .08);
  border: 1px solid rgba(91, 157, 60, .3);
}

.fit-no {
  background: rgba(240, 97, 74, .05);
  border: 1px solid var(--br);
}

.fit-c h3 {
  margin-bottom: 18px;
}

.fit-c ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.fit-yes li {
  padding: 9px 0 9px 28px;
  position: relative;
  color: var(--p);
  font-size: 15px;
}

.fit-yes li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: #5b9d3c;
  font-weight: 800;
}

.fit-no li {
  padding: 9px 0 9px 28px;
  position: relative;
  color: var(--m);
  font-size: 15px;
}

.fit-no li::before {
  content: "\2715";
  position: absolute;
  left: 0;
  color: #c44;
  font-weight: 800;
}

.test-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.test {
  padding: 28px;
  background: var(--bga);
  border-radius: var(--r);
}

.stars {
  color: #f5b300;
  font-size: 16px;
  letter-spacing: 2px;
  margin-bottom: 14px;
}

.test p {
  color: var(--p);
  font-style: italic;
  margin: 0 0 18px;
  font-size: 15px;
}

.test .auth {
  font-size: 14px;
  color: var(--m);
}

.test .auth strong {
  color: var(--p);
  display: block;
  font-style: normal;
  font-weight: 700;
}

details {
  padding: 20px 24px;
  border: 1px solid var(--br);
  border-radius: 12px;
  margin-bottom: 12px;
  background: #fff;
}

details[open] {
  background: var(--bga);
  border-color: var(--a);
}

summary {
  font-weight: 700;
  cursor: pointer;
  font-size: 17px;
  list-style: none;
  position: relative;
  padding-right: 32px;
}

summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 50%;
  font-size: 24px;
  color: var(--a);
  font-weight: 300;
  transform: translate(50%, -50%);
}

details[open] summary::after {
  content: "\2212";
}

details p {
  margin: 14px 0 0;
  color: var(--m);
  font-size: 15px;
}

.fc {
  background: linear-gradient(135deg, #0a2540 0%, #14365e 100%);
  color: #fff;
  padding: 72px 40px;
  border-radius: 18px;
  text-align: center;
  margin: 48px 0;
}

.fc h2 {
  color: #fff;
}

.fc p {
  color: rgba(255, 255, 255, .85);
  max-width: 680px;
  margin: 0 auto 28px;
  font-size: 18px;
}

.fc .cta-row {
  justify-content: center;
}

@media(max-width:900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .pp-grid,
  .serv-grid,
  .proc-grid,
  .why-grid,
  .tier-grid,
  .test-grid {
    grid-template-columns: 1fr;
  }

  .port-grid,
  .fit {
    grid-template-columns: 1fr;
  }

  .lr {
    grid-template-columns: repeat(3, 1fr);
  }

  .res {
    grid-template-columns: repeat(2, 1fr);
  }

  .tier.feat {
    transform: none;
  }
}

/* === HERO === */
.hero-anim {
  position: relative;
  color: #fff;
  overflow: hidden;
}

.hero-anim::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #0a1d35;
  z-index: 0;
}

.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .85;
}

.hero-bg::before,
.hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: float 14s ease-in-out infinite;
}

.hero-bg::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(240, 97, 74, .65) 0%, transparent 70%);
  top: -160px;
  left: -100px;
}

.hero-bg::after {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(91, 157, 220, .55) 0%, transparent 70%);
  bottom: -200px;
  right: -120px;
  animation-delay: -7s;
}

.hero-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 20% 30%, rgba(240, 97, 74, .18) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(91, 157, 220, .18) 0%, transparent 40%);
  z-index: 1;
  animation: meshShift 18s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(60px, -40px) scale(1.1);
  }
}

@keyframes meshShift {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
  }

  50% {
    transform: scale(1.15) rotate(8deg);
  }
}

.hero-anim-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 80px 24px 56px;
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 48px;
  align-items: center;
}

.hero-left .eyebrow {
  background: rgba(255, 255, 255, .14);
  color: #ffd4b8;
  border: 1px solid rgba(255, 255, 255, .18);
}

.hero-left h1 {
  color: #fff;
  font-size: clamp(34px, 4.5vw, 56px);
  line-height: 1.08;
  letter-spacing: -0.6px;
  max-width: 780px;
}

.hero-left h1 em {
  font-style: normal;
  color: var(--a);
}

.hero-left .lede {
  color: rgba(255, 255, 255, .85);
  font-size: 20px;
  max-width: 640px;
}

.hero-cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 28px;
}

.hero-proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 26px;
  color: rgba(255, 255, 255, .85);
  font-size: 14px;
  flex-wrap: wrap;
}

.hero-proof .stars {
  color: #f5b300;
  font-size: 18px;
  letter-spacing: 2px;
}

.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .12);
}

.hero-stats .has strong {
  display: block;
  font-size: 32px;
  font-weight: 900;
  color: var(--a);
  line-height: 1;
  margin-bottom: 6px;
}

.hero-stats .has span {
  font-size: 12px;
  color: rgba(255, 255, 255, .65);
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

/* Capability strip in hero */
.cap-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.cap-strip span {
  padding: 6px 12px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 99px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}

/* CRO sidebar form */
.cro-offer {
  background: rgba(255, 255, 255, .97);
  color: var(--p);
  border-radius: 18px;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  position: relative;
}

.cro-offer-pill {
  position: absolute;
  top: -14px;
  left: 24px;
  background: var(--a);
  color: #fff;
  padding: 5px 14px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.cro-offer h3 {
  font-size: 20px;
  margin: 8px 0 4px;
}

.cro-offer .sub {
  color: var(--m);
  font-size: 14px;
  margin-bottom: 18px;
}

.cro-offer .bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--p);
}

.cro-offer .bullets li {
  padding: 6px 0 6px 24px;
  position: relative;
}

.cro-offer .bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #5b9d3c;
  font-weight: 800;
}

.cro-offer input,
.cro-offer select,
.cro-offer textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--br);
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  margin-bottom: 10px;
}

.cro-offer textarea {
  resize: vertical;
  min-height: 60px;
}

.cro-offer button {
  width: 100%;
  padding: 13px;
  font-size: 15px;
}

.cro-offer .trust {
  font-size: 11px;
  color: var(--m);
  text-align: center;
  margin-top: 10px;
}

/* Service practice cards */
.practice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.practice {
  padding: 32px;
  background: #fff;
}

.practice:hover {
  border-color: var(--a);
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(10, 37, 64, .08);
}

.practice .p-icon {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: rgba(240, 97, 74, .12);
  color: var(--a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.practice .p-icon svg {
  width: 26px;
  height: 26px;
}

.practice h3 {
  margin-bottom: 8px;
}

.practice .p-desc {
  color: var(--m);
  font-size: 14px;
  margin-bottom: 16px;
}

.practice .p-list {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  font-size: 13px;
}

.practice .p-list li {
  padding: 5px 0 5px 22px;
  position: relative;
  color: var(--p);
}

.practice .p-list li::before {
  content:  "→";
  position: absolute;
  left: 0;
  color: var(--a);
  font-weight: 800;
}

.practice .p-cta {
  font-weight: 700;
  color: var(--p);
  text-decoration: none;
  border-bottom: 2px solid var(--a);
  padding-bottom: 2px;
  font-size: 13px;
}

.practice .p-cta:hover {
  color: var(--a);
}

/* Loss block */
.loss {
  background: #fff8f5;
  border: 1px solid rgba(240, 97, 74, .2);
  border-radius: var(--r);
  padding: 36px 40px;
  margin: 36px 0;
}

.loss-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.loss-c strong {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: var(--a);
  line-height: 1;
  margin-bottom: 6px;
}

.loss-c p {
  color: var(--p);
  font-size: 14px;
  margin: 0;
}

/* Outcomes */
.outcomes-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.outcome {
  padding: 30px;
  border: 1px solid var(--br);
  border-radius: var(--r);
  background: #fff;
}

.outcome .big {
  font-size: 42px;
  font-weight: 900;
  color: var(--a);
  line-height: 1;
  margin-bottom: 12px;
}

.outcome h3 {
  margin-bottom: 8px;
}

.outcome p {
  color: var(--m);
  font-size: 15px;
  margin: 0;
}

/* Case study mini-cards */
.case-mini {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.cm {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: var(--r);
}

.cm .brand {
  font-weight: 800;
  font-size: 17px;
  color: var(--p);
  margin-bottom: 4px;
}

.cm .indu {
  font-size: 11px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.cm .stat {
  font-size: 28px;
  color: var(--a);
  font-weight: 900;
  line-height: 1;
}

.cm .stat-lbl {
  font-size: 11px;
  color: var(--m);
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.cm .body {
  font-size: 12px;
  color: var(--m);
}

/* Industries served */
.industries-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.ind {
  padding: 20px 16px;
  background: var(--bga);
  border-radius: var(--r);
  text-align: center;
  transition: all .2s;
}

.ind:hover {
  background: #fff;
  border: 1px solid var(--a);
}

.ind svg {
  width: 32px;
  height: 32px;
  color: var(--a);
  margin-bottom: 10px;
}

.ind strong {
  display: block;
  font-size: 14px;
  color: var(--p);
}

/* Comparison */
.compare {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0 0;
}

.compare th,
.compare td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--br);
  text-align: left;
  font-size: 14px;
}

.compare th {
  background: var(--bga);
  font-weight: 800;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--p);
}

.compare th:not(:first-child) {
  text-align: center;
}

.compare td:not(:first-child) {
  text-align: center;
}

.compare .tlx {
  background: rgba(240, 97, 74, .06);
  font-weight: 700;
  color: var(--p);
}

.compare .check {
  color: #3f7d28;
  font-weight: 800;
}

.compare .x {
  color: #b3261e;
  font-weight: 800;
}

/* Guarantee */
.guarantee {
  display: flex;
  gap: 24px;
  align-items: center;
  background: linear-gradient(135deg, #0a2540 0%, #14365e 100%);
  color: #fff;
  padding: 36px 40px;
  border-radius: var(--r);
}

.guarantee-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.guarantee-icon svg {
  width: 36px;
  height: 36px;
  color: var(--a);
}

.guarantee h3 {
  color: #fff;
  margin-bottom: 6px;
}

.guarantee p {
  color: rgba(255, 255, 255, .85);
  margin: 0;
  font-size: 15px;
}

/* Logo trio */
.logo-trio {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}

.lt-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 10px;
  text-decoration: none;
}

.lt-item svg {
  width: 20px;
  height: 24px;
  flex-shrink: 0;
}

.lt-text small {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: .9px;
  font-weight: 600;
  color: rgba(255, 255, 255, .55);
  display: block;
}

.lt-text strong {
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  display: block;
}

.lt-shopify .bag-light {
  fill: #95BF47;
}

.lt-shopify .bag-dark {
  fill: #5E8E3E;
}

.lt-plus .bag-light {
  fill: #1A1A1A;
}

.lt-plus .bag-dark {
  fill: #000;
}

.lt-partner .bag-light {
  fill: #95BF47;
}

.lt-partner .bag-dark {
  fill: #5E8E3E;
}

/* Sticky CTA */
.sticky-cta {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #0a2540 0%, #14365e 100%);
  color: #fff;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, .2);
  z-index: 900;
  transform: translateY(100%);
  transition: transform .3s;
}

.sticky-cta.show {
  transform: translateY(0);
}

.sticky-cta strong {
  font-size: 15px;
  color: #fff;
}

.sticky-cta .meta {
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  margin-left: 6px;
}

.sticky-cta-buttons {
  display: flex;
  gap: 10px;
}

.sticky-cta-close {
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, .6);
  font-size: 20px;
  cursor: pointer;
  padding: 6px;
}

@media(max-width:980px) {
  .hero-anim-inner {
    grid-template-columns: 1fr;
  }

  .practice-grid,
  .outcomes-grid,
  .loss-row,
  .case-mini {
    grid-template-columns: 1fr 1fr;
  }

  .hero-stats {
    grid-template-columns: 1fr 1fr;
  }

  .industries-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .compare {
    display: block;
    overflow-x: auto;
  }

  .sticky-cta {
    flex-direction: column;
  }

  .guarantee {
    flex-direction: column;
    text-align: center;
  }
}

@media(max-width:600px) {

  .practice-grid,
  .outcomes-grid,
  .loss-row,
  .case-mini,
  .industries-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   home-sliders
   ========================================================================== */
/* === SHARED SLIDER STYLES === */

.slider-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 28px;
}

.slider-head .left {
  flex: 1;
  min-width: 260px;
}

.slider-nav {
  display: flex;
  gap: 10px;
  align-items: center;
}

.slider-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid var(--br);
  background: #fff;
  color: var(--p);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s;
  font-size: 18px;
  font-weight: 700;
}

.slider-btn:hover {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
  transform: translateY(-1px);
}

.slider-btn:disabled {
  opacity: .3;
  cursor: not-allowed;
  transform: none;
}

.slider-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 340px;
  gap: 20px;
  overflow-x: auto;
}

.slider-track::-webkit-scrollbar {
  height: 6px;
}

.slider-track::-webkit-scrollbar-thumb {
  background: var(--mm);
  border-radius: 3px;
}

.slider-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}

.slider-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--br);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: all .2s;
}

.slider-dot.active {
  background: var(--a);
  width: 24px;
  border-radius: 4px;
}

/* PORTFOLIO SLIDER cards */
.ps-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  transition: transform .25s;
  box-shadow: var(--shadow);
}

.ps-card:hover {
  transform: translateY(-4px);
}

.ps-card .bg {
  position: absolute;
  inset: 0;
  transition: transform .3s;
}

.ps-card:hover .bg {
  transform: scale(1.06);
}

.ps-card .mesh {
  position: absolute;
  inset: 0;
}

.ps-card .initials {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 60px;
  font-weight: 900;
  color: rgba(255, 255, 255, .18);
  letter-spacing: -2px;
  line-height: 1;
}

.ps-card .body {
  position: relative;
  z-index: 2;
}

.ps-card .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.ps-card .tag {
  padding: 3px 10px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #fff;
}

.ps-card h3 {
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 4px;
  letter-spacing: -.3px;
}

.ps-card .desc {
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  margin: 0 0 14px;
  line-height: 1.5;
}

.ps-card .metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .2);
}

.ps-card .metric strong {
  display: block;
  font-size: 22px;
  font-weight: 900;
  color: var(--a-2);
  line-height: 1;
}

.ps-card .metric span {
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.ps-card .arr {
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  transition: all .2s;
}

.ps-card:hover .arr {
  background: var(--a);
}

/* REVIEWS SLIDER (mixed text + video) */
/* surface + hover match .wk-card / .cs-show-card so every card on the site
   lifts and shadows identically */
.rs-card {
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 20px;
  padding: 0;
  overflow: hidden;
  height: auto;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: all .25s;
}

.rs-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(240, 97, 74, .3);
}

/* Text review */
.rs-text {
  padding: 28px;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 340px;
}

.rs-text .qmark {
  font-family: Georgia, serif;
  font-size: 60px;
  color: rgba(240, 97, 74, .18);
  line-height: .7;
  margin: -8px 0 -4px;
  font-weight: 700;
}

.rs-text .stars {
  color: #fbbf24;
  letter-spacing: 3px;
  font-size: 16px;
  margin-bottom: 10px;
}

.rs-text p {
  color: var(--p);
  font-size: 15px;
  line-height: 1.6;
  font-style: italic;
  flex: 1;
  margin: 0 0 18px;
}

.rs-text .who {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--br-2);
}

.rs-text .avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p), var(--a));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  flex-shrink: 0;
}

.rs-text .who strong {
  display: block;
  color: var(--p);
  font-size: 14px;
  font-weight: 700;
}

.rs-text .who span {
  display: block;
  color: var(--m);
  font-size: 12px;
}

/* Video review */
.rs-video {
  position: relative;
  cursor: pointer;
}

.rs-video .thumb {
  position: relative;
  height: 200px;
  background: linear-gradient(135deg, #0a1838 0%, #2a447a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rs-video .thumb .mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(240, 97, 74, .35) 0%, transparent 60%);
}

.rs-video .thumb .play {
  position: relative;
  z-index: 1;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .95);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .3);
  transition: all .2s;
}

.rs-card:hover .rs-video .thumb .play {
  transform: scale(1.1);
  background: var(--a);
}

.rs-video .thumb .play svg {
  width: 24px;
  height: 24px;
  color: var(--p);
  margin-left: 3px;
  transition: color .2s;
}

.rs-card:hover .rs-video .thumb .play svg {
  color: #fff;
}

.rs-video .badge-v {
  position: absolute;
  top: 14px;
  left: 14px;
  background: rgba(0, 0, 0, .6);
  backdrop-filter: blur(8px);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 99px;
  letter-spacing: .5px;
  text-transform: uppercase;
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.rs-video .badge-v::before {
  content: "";
  width: 6px;
  height: 6px;
  background: #ef4444;
  border-radius: 50%;
}

.rs-video .duration {
  position: absolute;
  bottom: 14px;
  right: 14px;
  background: rgba(0, 0, 0, .7);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  font-feature-settings: "tnum";
}

.rs-video .meta {
  padding: 22px;
}

.rs-video .stars {
  color: #fbbf24;
  letter-spacing: 3px;
  font-size: 14px;
  margin-bottom: 8px;
}

.rs-video h4 {
  margin: 0 0 6px;
  font-size: 16px;
  color: var(--p);
  font-weight: 700;
  letter-spacing: -.2px;
}

.rs-video .vsub {
  font-size: 13px;
  color: var(--m);
  margin: 0;
}

/* CASE STUDIES SHOWCASE */
.cs-showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.cs-show-card {
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.cs-show-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(240, 97, 74, .3);
}

.cs-show-cover {
  position: relative;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
}

.cs-show-cover .bg {
  position: absolute;
  inset: 0;
  transition: transform .3s;
}

.cs-show-card:hover .cs-show-cover .bg {
  transform: scale(1.05);
}

.cs-show-cover .mesh {
  position: absolute;
  inset: 0;
}

.cs-show-cover .inits {
  position: relative;
  z-index: 1;
  font-size: 80px;
  font-weight: 900;
  letter-spacing: -2px;
  color: rgba(255, 255, 255, .4);
}

.cs-show-cover .label {
  position: absolute;
  top: 18px;
  left: 18px;
  background: rgba(255, 255, 255, .95);
  color: var(--p);
  font-size: 11px;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 99px;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.cs-show-body {
  padding: 28px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.cs-show-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.cs-show-tag {
  padding: 3px 10px;
  background: var(--bga);
  color: var(--p);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

.cs-show-body h3 {
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--p);
  letter-spacing: -.2px;
}

.cs-show-body p {
  color: var(--m);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}

.cs-show-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--br-2);
}

.cs-show-metrics .smm strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--a);
  line-height: 1;
}

.cs-show-metrics .smm span {
  font-size: 11px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: .4px;
}

/* Gradient backgrounds (cycled) */
.bg-c1 {
  background: linear-gradient(135deg, #0a1838 0%, #2a447a 100%);
}

.bg-c1+.mesh,
.bg-c1+.mesh {
  background: radial-gradient(circle at 30% 30%, rgba(240, 97, 74, .35) 0%, transparent 55%);
}

.bg-c2 {
  background: linear-gradient(135deg, #2d1b4e 0%, #6938a5 100%);
}

.bg-c2+.mesh,
.bg-c2+.mesh {
  background: radial-gradient(circle at 70% 30%, rgba(255, 194, 71, .3) 0%, transparent 55%);
}

.bg-c3 {
  background: linear-gradient(135deg, #0c3b3a 0%, #2d8073 100%);
}

.bg-c3+.mesh,
.bg-c3+.mesh {
  background: radial-gradient(circle at 30% 60%, rgba(255, 140, 71, .35) 0%, transparent 55%);
}

.bg-c4 {
  background: linear-gradient(135deg, #5b1d3a 0%, #b13c61 100%);
}

.bg-c4+.mesh,
.bg-c4+.mesh {
  background: radial-gradient(circle at 70% 60%, rgba(255, 194, 71, .3) 0%, transparent 55%);
}

.bg-c5 {
  background: linear-gradient(135deg, #1e3a5f 0%, #3970b3 100%);
}

.bg-c5+.mesh,
.bg-c5+.mesh {
  background: radial-gradient(circle at 50% 30%, rgba(240, 97, 74, .35) 0%, transparent 55%);
}

.bg-c6 {
  background: linear-gradient(135deg, #3d1d0f 0%, #9c4727 100%);
}

.bg-c6+.mesh,
.bg-c6+.mesh {
  background: radial-gradient(circle at 30% 30%, rgba(255, 210, 140, .3) 0%, transparent 55%);
}

@media(max-width:900px) {
  .cs-showcase-grid {
    grid-template-columns: 1fr;
  }

  .slider-track {
    grid-auto-columns: 280px;
  }
}

/* ==========================================================================
   modern-theme
   ========================================================================== */
/* === MODERN THEME OVERRIDE === */
:root {
  --p: #0a1838;
  --p-2: #14365e;
  --a: #f0614a;
  --a-2: #fd9786;
  --m: #5b6b7c;
  --mm: #68758a;
  --bg: #fcfcfd;
  --bga: #f3f5f8;
  --bgd: #0a1632;
  --br: #e6eaf0;
  --br-2: #eef1f5;
  --r: 16px;
  --r-lg: 22px;
  --shadow-sm: 0 1px 3px rgba(10, 24, 56, .04), 0 1px 2px rgba(10, 24, 56, .06);
  --shadow: 0 4px 12px rgba(10, 24, 56, .05), 0 2px 6px rgba(10, 24, 56, .04);
  --shadow-lg: 0 24px 48px -12px rgba(10, 24, 56, .18);
  --shadow-xl: 0 32px 64px -20px rgba(10, 24, 56, .25);
  --grad: linear-gradient(135deg, #0a1838 0%, #1a2c52 50%, #2a447a 100%);
  /* brand gradient, gold -> orange -> magenta, taken from the logo mark */
  --grad-btn: linear-gradient(135deg, #F7C948 -10%, #F0614A 55%, #A81E5A 130%);
  --grad-alt: linear-gradient(135deg, #1a2c52 0%, #2a447a 50%, #3a5fa8 100%);
  --f: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Better font rendering + system stack with Inter where available */

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  background: var(--bg);
  color: var(--p);
}

/* Tighter, more modern typography */
h1 {
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.08;
}

h2 {
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

h3 {
  font-weight: 700;
  letter-spacing: -0.015em;
}

p {
  color: var(--p);
}

/* Cards — modern radii + layered shadows + smoother hovers */
.pp,
.serv,
.why,
.tier,
.case,
.cs-card,
.post-card,
.outcome,
.h-serv a,
.practice {
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: all .25s cubic-bezier(.4, 0, .2, 1);
  border: 1px solid var(--br-2);
}

.pp:hover,
.serv:hover,
.why:hover,
.tier:hover,
.outcome:hover,
.h-serv a:hover,
.practice:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(240, 97, 74, .25);
}

.pp {
  background: linear-gradient(180deg, #fff 0%, var(--bga) 100%);
  border-top-width: 1px;
  border-top-color: var(--br-2);
  position: relative;
  overflow: hidden;
}

.pp::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--a), var(--a-2));
}

.serv {
  background: #fff;
}

.why {
  background: #fff;
}

/* Tier card refinements */
.tier.feat {
  border-color: var(--a);
  box-shadow: 0 24px 48px -12px rgba(240, 97, 74, .25);
}

.tier .price {
  color: var(--p);
}

/* Hero refinements */
.hero-card,
.lead-card,
.cro-offer {
  border-radius: var(--r-lg);
}

.lead-card,
.cro-offer {
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, .1);
}

/* Hero stats — more refined */
.hero-stats .has strong,
.has strong {
  font-feature-settings: "tnum";
  letter-spacing: -0.03em;
}

.hero-stats {
  background: rgba(255, 255, 255, .04);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  padding: 24px;
}

/* Logo strip — more modern */
.logo-strip {
  background: linear-gradient(180deg, var(--bga) 0%, var(--bg) 100%);
  border-color: var(--br-2);
}

.lr div {
  font-weight: 600;
  color: var(--mm);
  transition: color .2s;
}

.lr div:hover {
  color: var(--p);
}

/* Results section — better depth */
.res {
  background: var(--grad);
  box-shadow: var(--shadow-xl);
  border-radius: var(--r-lg);
}

.res-c strong {
  letter-spacing: -0.03em;
  font-feature-settings: "tnum";
}

/* Sections — more breathing room
section {
  padding: 80px 0;
}

@media(max-width:900px) {
  section {
    padding: 56px 0;
  }
} */

/* Header — cleaner, more refined */
.site-header {
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(230, 234, 240, .6);
  box-shadow: 0 1px 0 rgba(10, 24, 56, .02);
}

.header-inner {
  height: 76px;
}

.brand {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: -0.025em;
  color: var(--p);
}

.brand-logo {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--p) 0%, var(--a) 100%);
  box-shadow: 0 4px 12px rgba(240, 97, 74, .25);
  font-weight: 900;
  font-size: 18px;
}

.main-nav>li>a,
.main-nav>li>span {
  font-size: 14px;
  font-weight: 600;
  color: var(--p);
  padding: 10px 16px;
  border-radius: 8px;
  letter-spacing: -0.01em;
}

.main-nav>li>a:hover,
.main-nav>li:hover>span {
  background: var(--bga);
  color: var(--p);
}

.header-cta .btn {
  padding: 10px 20px;
  font-size: 14px;
}

/* Mega menu — modern glass treatment */

/* Footer — more refined */
.site-footer {
  background: linear-gradient(180deg, var(--bgd) 0%, #070f24 100%);
  border-top: none;
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(240, 97, 74, .5), transparent);
}

.footer-col h2 {
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.1em;
  font-weight: 700;
}

.footer-col a {
  font-size: 14px;
  color: rgba(255, 255, 255, .65);
  transition: color .15s, transform .2s;
}

.footer-col a:hover {
  color: var(--a);
  padding-left: 4px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .08);
  transition: all .2s;
}

.footer-social a:hover {
  background: var(--a);
  border-color: var(--a);
  transform: translateY(-2px);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding-top: 32px;
}

/* Forms — modern */
.field input,
.field select,
.field textarea,
.lead-card .lf input,
.lead-card .lf select,
.lead-card .lf textarea,
.cro-offer input,
.cro-offer select,
.cro-offer textarea,
.contact-form input,
.contact-form select,
.contact-form textarea {
  border-radius: 10px;
  border-width: 1.5px;
  font-size: 14px;
  padding: 12px 14px;
  transition: border-color .15s, box-shadow .15s;
  background: #fff;
}

.field input:focus,
.field select:focus,
.field textarea:focus,
.lead-card .lf input:focus,
.lead-card .lf select:focus,
.lead-card .lf textarea:focus,
.cro-offer input:focus,
.cro-offer select:focus,
.cro-offer textarea:focus {
  border-color: var(--a);
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .12);
  outline: none;
}

/* Details/FAQ — modern */
details {
  border-radius: 14px;
  border-width: 1.5px;
  border-color: var(--br-2);
  transition: all .2s;
  background: #fff;
}

details:hover {
  border-color: rgba(240, 97, 74, .3);
}

details[open] {
  background: linear-gradient(135deg, #fff, var(--bga));
  border-color: var(--a);
  box-shadow: var(--shadow);
}

summary {
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Final CTA — more impactful */
.fc {
  background: var(--grad);
  box-shadow: var(--shadow-xl);
  border-radius: 24px;
  padding: 80px 48px;
  position: relative;
  overflow: hidden;
}

.fc::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -10%;
  width: 60%;
  height: 200%;
  background: radial-gradient(circle, rgba(240, 97, 74, .18) 0%, transparent 60%);
}

.fc h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(28px, 3.6vw, 40px);
}

.fc p {
  position: relative;
  z-index: 1;
}

.fc .cta-row {
  position: relative;
  z-index: 1;
}

/* Stars */
.stars {
  color: #fbbf24;
}

/* Testimonials — modern */
.test {
  background: linear-gradient(180deg, #fff 0%, var(--bga) 100%);
  border: 1px solid var(--br-2);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.test::before {
  content: "\201C";
  position: absolute;
  top: 8px;
  left: 20px;
  font-size: 80px;
  color: rgba(240, 97, 74, .12);
  font-family: Georgia, serif;
  line-height: 1;
  font-weight: 700;
}

.test p {
  position: relative;
  z-index: 1;
}

/* Service hero refinements */
.service-hero,
.page-hero {
  background: var(--grad);
}

.service-hero::before,
.page-hero::before {
  background: radial-gradient(ellipse at 20% 20%, rgba(240, 97, 74, .25) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(91, 157, 220, .18) 0%, transparent 50%);
}

/* Tags & pills */
.tech-pill {
  background: #fff;
  border: 1px solid var(--br-2);
  box-shadow: var(--shadow-sm);
  font-size: 13px;
  padding: 8px 16px;
  font-weight: 600;
  color: var(--p);
  transition: all .2s;
}

.tech-pill:hover {
  border-color: var(--a);
  color: var(--a);
  transform: translateY(-1px);
}

/* Badges — the glass treatment is for dark panels only. Unscoped it rendered
   white-on-white (1:1 contrast) wherever badges sat on a light section. */
.hero-anim .badge,
.page-hero .badge,
.service-hero .badge,
.port-hero .badge,
.cs-hero .badge,
.section-dark .badge {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .15);
  backdrop-filter: blur(8px);
  font-weight: 600;
  color: #fff;
  font-size: 12px;
  padding: 6px 14px;
}

.hero-anim .badge::before,
.page-hero .badge::before,
.service-hero .badge::before,
.port-hero .badge::before,
.cs-hero .badge::before,
.section-dark .badge::before {
  color: #7fd45a;
}

/* CRO offer — modern */
.cro-offer {
  box-shadow: 0 32px 80px -20px rgba(0, 0, 0, .35), 0 0 0 1px rgba(255, 255, 255, .1);
}

.cro-offer-pill {
  background: linear-gradient(135deg, var(--a), var(--a-2));
  box-shadow: 0 4px 14px rgba(240, 97, 74, .4);
}

/* Animations — subtle scroll-in */
@media (prefers-reduced-motion: no-preference) {
  section {
    animation: fadeUp .8s ease-out backwards;
  }

  section:nth-child(2) {
    animation-delay: .05s;
  }

  section:nth-child(3) {
    animation-delay: .1s;
  }

  section:nth-child(4) {
    animation-delay: .15s;
  }
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Scrollbar — modern */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: var(--bga);
}

::-webkit-scrollbar-thumb {
  background: var(--mm);
  border-radius: 5px;
  border: 2px solid var(--bga);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--m);
}

/* Selection */
::selection {
  background: rgba(240, 97, 74, .25);
  color: var(--p);
}

/* Numbered cards in services - cleaner */
.serv .num {
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.1em;
}

.proc .pnum {
  font-weight: 900;
  letter-spacing: -0.05em;
}

.why .wnum {
  background: linear-gradient(135deg, var(--a), var(--a-2));
  box-shadow: 0 4px 12px rgba(240, 97, 74, .3);
}

/* Card icons */
.ci-wrap {
  background: linear-gradient(135deg, rgba(240, 97, 74, .15), rgba(240, 97, 74, .06));
  border-radius: 12px;
  transition: all .2s;
}

.pp:hover .ci-wrap,
.serv:hover .ci-wrap,
.why:hover .ci-wrap {
  background: linear-gradient(135deg, var(--a), var(--a-2));
}

.pp:hover .ci,
.serv:hover .ci,
.why:hover .ci {
  color: #fff;
}

/* Smoother general transitions */
a,
button {
  transition: all .15s ease;
}

/* Mobile refinements */
@media(max-width:900px) {
  h1 {
    font-size: clamp(28px, 7vw, 40px);
  }

  h2 {
    font-size: clamp(24px, 5vw, 32px);
  }

  .fc {
    padding: 48px 24px;
    border-radius: 18px;
  }
}

/* ==========================================================================
   brand-tagline
   ========================================================================== */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  line-height: 1;
}

.brand-logo {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0a1838 0%, #f0614a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 900;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(240, 97, 74, .25);
}

.brand-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.1;
}

.brand-text strong {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--p, #0a1838);
}

.brand-text small {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--m, #5b6b7c);
  margin-top: 3px;
}

.site-footer .brand-text strong {
  color: #fff;
}

.site-footer .brand-text small {
  color: rgba(255, 255, 255, .7);
}

/* the small-viewport hide for .brand-text small lives with the header block below,
   after the later `display:block` rule that would otherwise override it */

/* ==========================================================================
   section-containers
   ========================================================================== */
=== STANDARDIZED SECTIONS + CONTAINER ===
section {
  padding: 80px 0;
}

/* the header is sticky at 74px (64px on phones); keep anchor jumps clear of it */
[id] {
  scroll-margin-top: 90px;
}

@media(max-width:600px) {
  [id] {
    scroll-margin-top: 78px;
  }
}

/* Background variants for sections */

section.section-dark {
  background: var(--bgd, #0a1632);
  color: #fff;
}

/* ==========================================================================
   slider-patch
   ========================================================================== */
/* === SLIDER PATCH: full-width edge-to-edge, no scrollbar, drag enabled === */
.slider-wrap {
  position: relative;
}

.slider-head,
.slider-dots {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.slider-track {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 600px + 24px));
  padding-right: max(24px, calc(50vw - 600px + 24px));
  /* --shadow-xl reaches 44px below the card and the hover lifts it 5px, so the
     scroll box needs that much room or it clips the shadow. Negative margins
     cancel the extra space so section rhythm is unchanged. */
  padding-top: 16px;
  padding-bottom: 52px;
  margin-top: -16px;
  margin-bottom: -44px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}


.slider-track::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

.slider-track.dragging {
  cursor: grabbing;
}

.slider-track.dragging * {
  pointer-events: none;
}

.slider-track a,
.slider-track>* {
  user-select: none;
  -webkit-user-select: none;
}

.slider-track>* img,
.slider-track>* svg {
  pointer-events: none;
  -webkit-user-drag: none;
}

/* Sections containing sliders: allow track overflow but constrain rest */
section:has(> .container > .slider-wrap),
section:has(> .slider-wrap) {
  overflow-x: clip;
}

/* ==========================================================================
   container-narrow
   ========================================================================== */
/* Aligns to .container so the FAQ shares the page's left edge; the answer prose
   keeps its own reading measure rather than running the full 1152px. */
.container--narrow {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.container--narrow details p {
  max-width: 70ch;
}

/* ==========================================================================
   hero-stats-logos
   ========================================================================== */
/* === HERO STATS BAND (under hero) === */
.hero-stats-band {
  background: linear-gradient(135deg, #0a1838 0%, #14365e 60%, #1d4a82 100%);
  color: #fff;
  padding: 48px 0;
  position: relative;
  overflow: hidden;
}

.hero-stats-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 30%, rgba(240, 97, 74, .18) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(91, 157, 220, .12) 0%, transparent 50%);
  pointer-events: none;
}

.hsb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
}

.hsb-stat {
  text-align: left;
  padding-left: 18px;
  border-left: 2px solid rgba(240, 97, 74, .45);
}

.hsb-stat strong {
  display: block;
  font-size: 42px;
  font-weight: 900;
  color: var(--a, #f0614a);
  line-height: 1;
  letter-spacing: -.03em;
  font-feature-settings: "tnum";
  margin-bottom: 6px;
}

.hsb-stat h4 {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.hsb-stat p {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  margin: 0;
  line-height: 1.5;
}

/* === BRAND LOGO STRIP (animated marquee) === */

.brand-track-wrap {
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  overflow: hidden;
}

.brand-track {
  display: flex;
  gap: 60px;
  align-items: center;
  animation: brand-scroll 35s linear infinite;
  width: max-content;
  padding: 8px 0;
}

.brand-strip:hover .brand-track {
  animation-play-state: paused;
}

@keyframes brand-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

.brand-item {
  flex-shrink: 0;
  color: #606e7f;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.02em;
  transition: color .2s, filter .2s;
  white-space: nowrap;
  text-decoration: none;
  font-family: 'Inter', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.brand-item:hover {
  color: var(--p, #0a1838);
}

/* Unique brand styles to mimic real logos */
.bi-clinikally {
  font-weight: 800;
  letter-spacing: -.04em;
  color: #606e7f;
}

.bi-clinikally::before {
  color: #4dafbe;
  font-size: 18px;
  margin-right: 6px;
  font-weight: 400;
}

.bi-clinikally:hover {
  color: #1e8390;
}

.bi-clinikally:hover::before {
  color: #4dafbe;
}

.bi-goom {
  font-style: italic;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: lowercase;
  font-size: 26px;
}

.bi-goom:hover {
  color: #1a1a1a;
}

.bi-danas {
  font-family: 'Brush Script MT', cursive;
  font-weight: 400;
  font-size: 30px;
  letter-spacing: 0;
  color: #a08699;
}

.bi-danas:hover {
  color: #c14b8d;
}

.bi-diaspora {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: 16px;
  color: #606e7f;
}

.bi-diaspora:hover {
  color: #c44b1f;
}

.bi-fairharbor {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: 14px;
  font-family: 'Inter', sans-serif;
}

.bi-fairharbor:hover {
  color: #1d4a7a;
}

.bi-juicepress {
  font-weight: 900;
  font-size: 24px;
  color: #606e7f;
  text-transform: lowercase;
  letter-spacing: -.04em;
}

.bi-juicepress:hover {
  color: #e85d2f;
}

.bi-loops {
  font-style: italic;
  font-weight: 800;
  text-transform: lowercase;
  font-size: 24px;
  letter-spacing: -.01em;
}

.bi-loops:hover {
  color: #d56b8a;
}

.bi-trudiamonds {
  font-family: Georgia, serif;
  font-weight: 400;
  letter-spacing: .15em;
  text-transform: uppercase;
  font-size: 14px;
  color: #606e7f;
}

.bi-trudiamonds:hover {
  color: #0a1838;
}

.bi-innogear {
  font-weight: 900;
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: -.02em;
}

.bi-innogear:hover {
  color: #0f6bb8;
}

.bi-harber {
  font-family: Georgia, serif;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: .04em;
  color: #606e7f;
}

.bi-harber:hover {
  color: #5b3a1a;
}

.bi-pur {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.bi-pur strong {
  font-weight: 300;
}

.bi-pur:hover {
  color: #8b9d2f;
}

.bi-jb {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -.02em;
}

.bi-jb:hover {
  color: #c43f1f;
}

@media(max-width:900px) {
  .hsb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }
}

@media(max-width:600px) {
  .hsb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

  .hsb-stat strong {
    font-size: 32px;
  }

  .brand-item {
    font-size: 18px;
  }

  .brand-track {
    gap: 40px;
  }
}

/* ==========================================================================
   awards-engagement
   ========================================================================== */
/* === AWARDS & CERTIFICATIONS BAR === */
.awards-bar {
  padding: 48px 0;
  background: var(--bg, #fcfcfd);
  border-bottom: 1px solid var(--br, #e6eaf0);
}

.awards-bar h2 {
  text-align: center;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--m, #5b6b7c);
  margin: 0 0 28px;
  font-weight: 700;
}

.awards-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  align-items: stretch;
}

.award-badge {
  padding: 18px 14px;
  border: 1.5px solid var(--br-2, #eef1f5);
  border-radius: 14px;
  text-align: center;
  background: #fff;
  transition: all .2s;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.award-badge:hover {
  border-color: var(--a, #f0614a);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(10, 24, 56, .08);
}

.award-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 13px;
  color: #fff;
  letter-spacing: .5px;
}

.award-badge .a-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--p, #0a1838);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.award-badge .a-sub {
  font-size: 11px;
  color: var(--m, #5b6b7c);
  letter-spacing: .5px;
  text-transform: uppercase;
  font-weight: 600;
}

.award-badge .stars {
  color: #fbbf24;
  font-size: 11px;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Brand-specific icon backgrounds */
.aw-shopify {
  background: linear-gradient(135deg, #95BF47, #5E8E3E);
}

.aw-plus {
  background: linear-gradient(135deg, #1a1a1a, #000);
}

.aw-clutch {
  background: linear-gradient(135deg, #ef3a4a, #c41832);
}

.aw-goodfirms {
  background: linear-gradient(135deg, #f15a29, #d63a0c);
}

.aw-designrush {
  background: linear-gradient(135deg, #4dafbe, #1e8390);
}

.aw-upwork {
  background: linear-gradient(135deg, #14a800, #0e7a00);
}

@media(max-width:980px) {
  .awards-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media(max-width:600px) {
  .awards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
}

/* === ENGAGEMENT MODEL SNAPSHOT === */
.engage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.engage {
  padding: 32px;
  border: 1.5px solid var(--br-2, #eef1f5);
  border-radius: 20px;
  background: #fff;
  transition: all .25s;
  position: relative;
  display: flex;
  flex-direction: column;
}

.engage:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px -12px rgba(10, 24, 56, .18);
  border-color: rgba(240, 97, 74, .3);
}

.engage.feat {
  border-color: var(--a, #f0614a);
  box-shadow: 0 24px 48px -12px rgba(240, 97, 74, .2);
}

.engage.feat::before {
  content: "Most popular";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--a, #f0614a);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 99px;
  box-shadow: 0 4px 14px rgba(240, 97, 74, .4);
}

.engage .e-name {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--a, #f0614a);
  margin-bottom: 8px;
}

.engage h3 {
  font-size: 22px;
  margin: 0 0 4px;
  letter-spacing: -.02em;
}

.engage .e-price {
  font-size: 32px;
  font-weight: 900;
  color: var(--p, #0a1838);
  line-height: 1;
  margin: 6px 0 4px;
  font-feature-settings: "tnum";
  letter-spacing: -.025em;
}

.engage .e-price span {
  font-size: 15px;
  font-weight: 600;
  color: var(--m, #5b6b7c);
}

.engage .e-dur {
  font-size: 13px;
  color: var(--m, #5b6b7c);
  margin-bottom: 14px;
}

.engage .e-best {
  padding: 10px 14px;
  background: var(--bga, #f3f5f8);
  border-radius: 10px;
  font-size: 13px;
  color: var(--p, #0a1838);
  margin-bottom: 14px;
  font-weight: 500;
}

.engage .e-best strong {
  color: var(--a, #f0614a);
  font-weight: 700;
}

.engage ul {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  flex: 1;
}

.engage li {
  padding: 7px 0 7px 24px;
  position: relative;
  color: var(--p, #0a1838);
  font-size: 14px;
  line-height: 1.5;
}

.engage li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #5b9d3c;
  font-weight: 800;
}

.engage .e-cta {
  margin-top: auto;
}

@media(max-width:900px) {
  .engage-grid {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   hero-merge
   ========================================================================== */
/* === MERGED HERO + STATS === */
.hero-anim-inner {
  grid-template-rows: auto auto;
}

.hero-stats-row {
  grid-column: 1 / -1;
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  position: relative;
  z-index: 2;
}

.hero-stats-row .hsb-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}

.hero-stats-row .hsb-stat {
  text-align: left;
  padding-left: 18px;
  border-left: 2px solid rgba(240, 97, 74, .45);
}

.hero-stats-row .hsb-stat strong {
  display: block;
  font-size: 36px;
  font-weight: 900;
  color: var(--a, #f0614a);
  line-height: 1;
  letter-spacing: -.03em;
  font-feature-settings: "tnum";
  margin-bottom: 6px;
}

.hero-stats-row .hsb-stat h4 {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin: 0 0 4px;
  letter-spacing: -.01em;
}

.hero-stats-row .hsb-stat p {
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  margin: 0;
  line-height: 1.5;
}

@media(max-width:900px) {
  .hero-stats-row {
    margin-top: 32px;
    padding-top: 24px;
  }

  .hero-stats-row .hsb-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media(max-width:600px) {
  .hero-stats-row .hsb-stat strong {
    font-size: 28px;
  }
}

/* ==========================================================================
   infinite-sliders
   ========================================================================== */
/* === TWO-ROW BRAND MARQUEE === */
.brand-rows {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.brand-row-mask {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}



.brand-strip:hover .brand-track-row {
  animation-play-state: paused;
}

@keyframes row-scroll-left {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@keyframes row-scroll-right {
  from {
    transform: translateX(-50%);
  }

  to {
    transform: translateX(0);
  }
}

/* Remove the old single .brand-track if it lingered */
.brand-strip .brand-track-wrap {
  display: none;
}

/* ==========================================================================
   modern-footer
   ========================================================================== */
/* === PRE-FOOTER CTA === */
.prefooter-cta {
  position: relative;
  background: linear-gradient(135deg, #0a1838 0%, #14365e 60%, #1d4a82 100%);
  color: #fff;
  padding: 72px 0;
  margin: 0;
  overflow: hidden;
}

.prefooter-bg {
  position: absolute;
  inset: 0;
}

.prefooter-bg::before,
.prefooter-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: pf-float 16s ease-in-out infinite;
}

.prefooter-bg::before {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(240, 97, 74, .5) 0%, transparent 70%);
  top: -140px;
  left: -80px;
}

.prefooter-bg::after {
  width: 480px;
  height: 480px;
  background: radial-gradient(circle, rgba(91, 157, 220, .4) 0%, transparent 70%);
  bottom: -160px;
  right: -100px;
  animation-delay: -8s;
}

.prefooter-mesh {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 30%, rgba(240, 97, 74, .18) 0%, transparent 50%);
}

@keyframes pf-float {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  50% {
    transform: translate(40px, -30px) scale(1.1);
  }
}

.prefooter-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
  padding: 0px 0;
}

.prefooter-cta .eyebrow {
  background: rgba(255, 255, 255, .14);
  color: #ffd4b8;
  border: 1px solid rgba(255, 255, 255, .18);
}

.prefooter-cta h2 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 42px);
  margin: 14px 0 14px;
  letter-spacing: -.025em;
  line-height: 1.1;
}

.prefooter-cta p {
  color: rgba(255, 255, 255, .8);
  font-size: 17px;
  margin: 0;
  max-width: 560px;
}

.pfc-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}

.pfc-right .btn {
  min-width: 240px;
  text-align: center;
}

.pfc-stars {
  color: #fbbf24;
  font-size: 15px;
  letter-spacing: 2px;
  margin-top: 8px;
}

.pfc-stars span {
  color: rgba(255, 255, 255, .7);
  font-size: 13px;
  letter-spacing: 0;
  margin-left: 8px;
}

/* === MODERN FOOTER === */
.site-footer {
  background: linear-gradient(180deg, #0a1632 0%, #050a1c 100%);
  color: rgba(255, 255, 255, .85);
  padding: 80px 0 28px;
  margin-top: 0;
  position: relative;
  overflow: hidden;
}

.footer-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(240, 97, 74, .6) 30%, rgba(240, 97, 74, .6) 70%, transparent 100%);
}

.site-footer::after {
  content: "";
  position: absolute;
  top: -200px;
  right: -100px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(240, 97, 74, .08) 0%, transparent 60%);
  pointer-events: none;
}
.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
  z-index: 1;
}

.footer-top {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 64px;
}

.footer-brand-col .brand {
  margin-bottom: 18px;
}

.footer-brand-col .brand-logo {
  box-shadow: 0 4px 14px rgba(240, 97, 74, .3);
}

.footer-brand-blurb {
  color: rgba(255, 255, 255, .65);
  font-size: 14px;
  line-height: 1.7;
  margin: 0 0 24px;
  max-width: 340px;
}

/* Newsletter */
.footer-newsletter {
  margin-bottom: 24px;
}

.footer-newsletter h2 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #fff;
  font-weight: 700;
  margin: 0 0 12px;
}

.newsletter-form {
  position: relative;
  display: flex;
  align-items: stretch;
}

.newsletter-form input {
  flex: 1;
  border: 1.5px solid rgb(226 220 220);
 
  padding: 13px 16px;
  border-radius: 10px 0 0 10px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s, background .15s;
}

.newsletter-form input::placeholder {
  color: rgba(255, 255, 255, .4);
}

.newsletter-form input:focus {
  border-color: var(--a, #f0614a);
  background: rgba(255, 255, 255, .10);
}

.newsletter-form button {
  background: var(--a, #f0614a);
  color: #fff;
  width: 52px;
  border-radius: 0 10px 10px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  border: 1.5px solid var(--a, #f0614a);
  border-left: 0;
}

.newsletter-form button:hover {
  background: #fd9786;
}

.newsletter-form button svg {
  width: 18px;
  height: 18px;
}

.nl-msg {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 8px;
  font-size: 12px;
  color: #7dd95c;
  opacity: 0;
  transition: opacity .3s;
  font-weight: 600;
}

/* Social icons */
.footer-social {
  display: flex;
  gap: 10px;
}

.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  text-decoration: none;
  transition: all .2s;
}

.footer-social a:hover {
  background: var(--a, #f0614a);
  border-color: var(--a, #f0614a);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(240, 97, 74, .4);
}

.footer-social a svg {
  width: 18px;
  height: 18px;
  color: #fff;
}

/* Footer columns */
.footer-col h2 {
  color: #fff;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 700;
  margin: 0 0 18px;
}

.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col li {
  margin-bottom: 10px;
}

.footer-col a {
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  font-size: 14px;
  transition: color .15s, transform .2s;
  display: inline-block;
}

.footer-col a:hover {
  color: #fff;
  transform: translateX(4px);
}

.footer-col a:hover::before {
  content: "→ ";
  color: var(--a, #f0614a);
}

/* Contact column */
.footer-contact-col h2 {
  margin-bottom: 18px;
}

.footer-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 18px;
}

.fci-icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 8px;
  background: rgba(240, 97, 74, .12);
  color: var(--a, #f0614a);
  display: flex;
  align-items: center;
  justify-content: center;
}

.fci-icon svg {
  width: 16px;
  height: 16px;
}

.footer-contact-item strong {
  display: block;
  color: #fff;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin-bottom: 3px;
}

.footer-contact-item span,
.footer-contact-item a {
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
  line-height: 1.5;
  display: block;
  text-decoration: none;
}

.footer-contact-item a:hover {
  color: var(--a, #f0614a);
}

/* Footer bottom bar */
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  padding: 28px 0 0;
  border-top: 1px solid rgba(255, 255, 255, .08);
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

.fb-left small {
  font-size: 13px;
  color: rgba(255, 255, 255, .5);
}

.fb-right {
  display: flex;
  gap: 20px;
}

.fb-right a {
  color: rgba(255, 255, 255, .55);
  text-decoration: none;
  font-size: 13px;
  transition: color .15s;
}

.fb-right a:hover {
  color: var(--a, #f0614a);
}

@media(max-width:980px) {
  .fb-right{flex-wrap: wrap;justify-content: center;}
  .prefooter-inner {
    grid-template-columns: 1fr;
    text-align: center;
    padding-inline: 24px;
  }

  .pfc-right {
    align-items: center;
  }

  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
}

@media(max-width:600px) {
  .footer-top {
    grid-template-columns: 1fr;
  }

  .footer-bottom {
    flex-direction: column;
    text-align: center;
  }

  .pfc-right .btn {
    min-width: 0;
    width: 100%;
  }
}

/* ==========================================================================
   footer-icon-fix-v2
   ========================================================================== */
/* Force perfectly centered icon (both axes) in the rounded badge */
.footer-contact-item {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.fci-icon {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  border-radius: 8px !important;
  background: rgba(240, 97, 74, .12) !important;
  color: var(--a, #f0614a) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  flex-shrink: 0;
}

.fci-icon>svg {
  width: 16px !important;
  height: 16px !important;
  display: block !important;
  margin: 0 !important;
  vertical-align: middle !important;
  flex: 0 0 auto;
}

/* ==========================================================================
   no-hscroll
   ========================================================================== */
/* Kill horizontal scrollbar caused by full-bleed slider tracks */
html,
body {
  overflow-x: clip;
  max-width: 100%;
}

/* Older browsers fallback */
@supports not (overflow-x:clip) {

  html,
  body {
    overflow-x: hidden;
  }
}

/* ==========================================================================
   quick-facts
   ========================================================================== */
.qf-strip {
  background: linear-gradient(90deg, rgba(240, 97, 74, .06), rgba(91, 157, 220, .06));
  border-top: 1px solid var(--br-2);
  border-bottom: 1px solid var(--br-2);
  padding: 18px 0;
  font-size: 14px;
  color: var(--p);
}

.qf-strip .container {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.qf-strip strong {
  color: var(--p);
  font-weight: 700;
}

.qf-strip .sep {
  color: var(--mm);
}

/* ==========================================================================
   hero-phone-cta
   ========================================================================== */
.hero-phone-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  transition: all .2s;
  margin-top: 14px;
}

.hero-phone-cta:hover {
  background: rgba(255, 255, 255, .12);
  transform: translateY(-1px);
}

.hero-phone-cta svg {
  width: 20px;
  height: 20px;
  color: var(--a, #f0614a);
}

.hero-phone-cta small {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, .65);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}

.hero-phone-cta strong {
  display: block;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.next-line {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--m);
  margin-top: 12px;
}

.next-line span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.next-line span::before {
  content: "✓";
  color: #5b9d3c;
  font-weight: 800;
}

/* ==========================================================================
   announce-bar-css
   ========================================================================== */
/* === SLEEK TOP ANNOUNCEMENT BAR (language + currency) === */
.announce-bar {
  color: #fff;
  font-size: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  position: relative;
  z-index: 1001;
}

.announce-inner {
  max-width: 1200px;
  margin: 0 auto;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.announce-message {
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .85);
  font-weight: 500;
  letter-spacing: .01em;
}

.announce-message .ann-pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--a, #f0614a);
  box-shadow: 0 0 0 0 rgba(240, 97, 74, .6);
  animation: annpulse 2s ease-out infinite;
}

@keyframes annpulse {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 97, 74, .6);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(240, 97, 74, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(240, 97, 74, 0);
  }
}
.announce-message a.ann-link {
  color: var(--a, #f0614a);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px dashed rgba(240, 97, 74, .4);
  padding-bottom: 1px;
  margin-left: 6px;
}

.announce-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.announce-controls .ann-sep {
  width: 1px;
  height: 14px;
  background: rgba(255, 255, 255, .18);
}

.ann-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .06);
  cursor: pointer;
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  transition: background .2s, border-color .2s;
  letter-spacing: .02em;
}

.ann-switch:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .2);
}

.ann-switch .ann-caret {
  font-size: 8px;
  opacity: .7;
  margin-left: 2px;
}

.ann-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #fff;
  min-width: 180px;
  display: none;
  z-index: 1100;
}

.ann-switch[aria-expanded="true"] .ann-dropdown {
  display: block;
}

.ann-dropdown button .code {
  margin-left: auto;
  font-size: 11px;
  color: var(--m, #5b6b7c);
  font-weight: 700;
  letter-spacing: .5px;
}

/* Hiding the whole message left an empty navy bar carrying only the language
   pill. Keep the offer and its link; drop only the long qualifying clause. */
@media(max-width:760px) {
  .ann-long {
    display: none;
  }

  .announce-message {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .announce-message>span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .announce-message a.ann-link {
    white-space: nowrap;
  }

  .announce-controls {
    flex-shrink: 0;
  }
}

@media(max-width:420px) {
  .announce-message {
    font-size: 11px;
  }
}

/* ==========================================================================
   modern-header-mega-v2
   ========================================================================== */
/* === MODERN HEADER + FULL-WIDTH MEGA MENU === */
.site-header {
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, .85);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom: 1px solid rgba(230, 234, 240, .6);
  box-shadow: 0 1px 0 rgba(10, 24, 56, .02);
  z-index: 1000;
}

.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  height: 74px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  color: var(--p);
  font-weight: 800;
  font-size: 20px;
  letter-spacing: -.4px;
}

.brand-logo {
  width: 36px;
  height: 36px;
  background: linear-gradient(135deg, var(--p) 0%, var(--a) 100%);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  font-weight: 900;
  box-shadow: 0 6px 16px rgba(240, 97, 74, .25);
}

.brand-text strong {
  display: block;
  line-height: 1;
  font-weight: 800;
}

.brand-text small {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--m);
  letter-spacing: .6px;
  margin-top: 3px;
  text-transform: uppercase;
}

.main-nav {
  display: flex;
  gap: 2px;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav>li {
  position: static;
}

/* top-level nav items only; a bare `.main-nav a` outranks every rule inside
   the mega panel and rewrites its links into padded flex rows */
.main-nav>li>a,
.main-nav>li>span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  color: var(--p);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  border-radius: 8px;
  transition: background .18s, color .18s;
  cursor: pointer;
  letter-spacing: -.01em;
}

.main-nav>li>a:hover,
.main-nav>li:hover>span {
  background: rgba(10, 37, 64, .04);
  color: var(--p);
}

.main-nav>li>a.is-active {
  background: rgba(240, 97, 74, .08);
  color: var(--a);
}

.header-cta {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-icon-btn {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 37, 64, .04);
  border: 1px solid rgba(10, 37, 64, .06);
  border-radius: 50%;
  color: var(--p);
  cursor: pointer;
  padding: 0;
  transition: background .2s, color .2s, transform .2s, border-color .2s;
}

.header-icon-btn svg {
  width: 16px;
  height: 16px;
}

.header-icon-btn:hover {
  background: rgba(240, 97, 74, .1);
  color: var(--a);
  border-color: rgba(240, 97, 74, .2);
  transform: scale(1.04);
}

.header-cta .btn {
  padding: 9px 18px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}

.mobile-menu-btn {
  display: none;
  background: transparent;
  border: 0;
  font-size: 22px;
  color: var(--p);
  cursor: pointer;
  padding: 6px;
}

/* Small viewports: the brand tagline, phone and header CTA together pushed the
   menu button off-screen (it landed at x=372 in a 365px viewport, leaving the
   site with no reachable navigation). Drop them so search + menu always fit. */
@media(max-width:600px) {
  .header-inner {
    padding: 0 16px;
    gap: 12px;
    height: 64px;
  }

  .brand-text small {
    display: none;
  }

  .brand-logo {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }

  .brand-text strong {
    font-size: 17px;
  }

  .header-cta {
    gap: 4px;
  }

  .header-cta .btn {
    display: none;
  }

  /* 44px minimum touch targets */
  .header-icon-btn {
    width: 44px;
    height: 44px;
  }

  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* Between 600 and 900 the nav is already hidden; keep the CTA on one line. */
@media(max-width:900px) {
  .header-cta .btn {
    white-space: nowrap;
  }
}

/* === SERVICES MEGA MENU (v3) ===
   Four pillar columns + featured card + contact strip.
   .has-mega / .mega-wrap / .mega-col / .mega-eyebrow / .mega-item are load-bearing
   for assets/js/mobile-nav.js, which builds the mobile drawer from this markup. */
.has-mega {
  position: static !important;
}

/* --- trigger --- */
.mm-trigger {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 14px;
  margin: 0;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--p);
  border-radius: 8px;
  cursor: pointer;
  transition: background .18s, color .18s;
}

.main-nav>li.has-mega:hover .mm-trigger,
.mm-trigger[aria-expanded="true"] {
  background: rgba(10, 37, 64, .04);
}

.mm-trigger[aria-expanded="true"] {
  color: var(--a);
}

.mm-trigger:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

/* keeps the pointer inside :hover while it crosses the gap to the panel */
.mm-trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 16px;
}

/* --- panel --- */
/* the wrap spans the whole viewport, so leaving it hoverable kept :hover alive
   across the full width and the menu could never be dismissed sideways */
.mega-wrap {
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  width: 100%;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .22s ease, visibility .22s, transform .32s cubic-bezier(.16, 1, .3, 1);
  /* contains the scrim's z-index:-1 so it cannot fall behind the header */
  isolation: isolate;
}

/* Page scrim under an open mega panel, matching .search-overlay /
   .modal-overlay. It hangs off .mega-wrap rather than .mega-panel because the
   panel is a scroll box (overflow:hidden auto) and would clip it. Being a child
   of .mega-wrap, it inherits the panel's existing fade - no JS needed.
   pointer-events stays none so the outside-click close keeps working. */
.mega-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  height: 100vh;
  background: rgba(10, 24, 56, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  pointer-events: none;
  z-index: -1;
}

.main-nav>li.has-mega:hover .mega-wrap,
.main-nav>li.has-mega.is-open .mega-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.mega-panel {
  pointer-events: auto;
  white-space: normal;
  background: #fff;
  border-top: 1px solid var(--br-2);
  border-bottom: 1px solid var(--br-2);
  box-shadow: 0 32px 80px -28px rgba(10, 24, 56, .26);
  /* the full menu is ~800px tall; on a short laptop the contact strip would sit
     below the fold with no way to reach it, so the panel scrolls itself */
  max-height: calc(100vh - 128px);
  overflow: hidden auto;
  overscroll-behavior: contain;
  /* the scrollbar is hidden rather than guttered: any reserved track narrows the
     scroll box and knocks the inner container off the .header-inner rail. Wheel,
     trackpad and keyboard scrolling still work, and the spacing below keeps the
     panel short enough that it only overflows on unusually short windows. */
  scrollbar-width: none;
}

.mega-panel::-webkit-scrollbar {
  width: 0;
  height: 0;
}

.mega-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 26px 24px 24px;
}

/* --- pillar column --- */
.mega-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 14px;
}

.mega-col:first-child {
  padding-left: 0;
}

/* .mega-col+.mega-col {
  border-left: 1px solid var(--br-2);
} */

.mega-col-4 {
  padding-right: 0;
}
.mt-rail{
  display:none;
}

.mega-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #da3116;
}

.mega-eyebrow svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--a);
}

/* two-line floor: at 15px the shortest headline fits on one line and its column
   would start its first service block a row above the other three */
.mega-head {
  margin: 0 0 16px;
  min-height: 1.64em;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.32;
  letter-spacing: -.002em;
  color: var(--p);
  text-wrap: balance;
}

/* --- service group --- */
.mega-group {
  display: flex;
  flex-direction: column;
}

.mega-group+.mega-group {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--br-2);
}

.mega-item {
  display: block;
  margin: 0 -8px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--p);
  transition: background .18s;
}

.mega-item-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.mega-item:hover {
  background: var(--bga);
}

.mega-item:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 1px;
}

.mega-icon {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .28s cubic-bezier(.16, 1, .3, 1);
}

.mega-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

.mega-item:hover .mega-icon {
  transform: scale(1.07);
}

.mega-item strong {
  min-width: 0;
}

.mega-item strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--p);
}

.mega-item .desc {
  display: block;
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--m);
}

.mega-col-1 .mega-icon {
  background: rgba(240, 97, 74, .10);
  color: var(--a);
}

.mega-col-2 .mega-icon {
  background: rgba(10, 24, 56, .07);
  color: var(--p);
}

.mega-col-3 .mega-icon {
  background: rgba(58, 95, 168, .11);
  color: #3a5fa8;
}

.mega-col-4 .mega-icon {
  background: rgba(91, 157, 220, .17);
  color: #245a94;
}

/* --- chevron sub-links --- */
.mega-links {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mega-links a {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--p);
  text-decoration: none;
  transition: color .16s;
}

.mega-links a::before {
  content: "";
  flex-shrink: 0;
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--a);
  border-right: 1.5px solid var(--a);
  transform: rotate(45deg);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.mega-links a:hover {
  color: #da3116;
}

.mega-links a:hover::before {
  transform: rotate(45deg) translate(2px, -2px);
}

.mega-links a:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
  border-radius: 4px;
}

.mega-links a[aria-current] {
  color: #da3116;
  font-weight: 700;
}


/* --- contact strip --- */
.mega-strip {
  border-top: 1px solid var(--br-2);
  background: var(--bga);
}

.mega-strip-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 24px;
}

.mega-strip-l {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.mega-strip .ms-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(240, 97, 74, .10);
  color: var(--a);
}

.mega-strip .ms-icon svg {
  width: 19px;
  height: 19px;
}

.mega-strip strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--p);
}

.mega-strip .ms-text span {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--m);
}

/* The one contact button every mega strip uses (Services, Products, Company).
   Built on .mw-btn so it matches the buttons inside the panels above it.
   Scoped with .mega-strip because .mw-btn is defined later in this file and
   would otherwise win on source order - it sets margin-top:auto, which drops
   the button off centre in the strip's flex row. */
.mega-strip .ms-btn {
  flex-shrink: 0;
  margin-top: 0;
  padding: 11px 18px;
}

.mega-strip .ms-btn span {
  flex: 0 0 auto;
}

@media(max-width:900px) {

  .main-nav {
    display: none;
  }

  .mobile-menu-btn {
    display: block;
  }

  .mega-wrap {
    display: none;
  }
}

@media(prefers-reduced-motion:reduce) {

  .mega-wrap,
  .main-nav>li.has-mega:hover .mega-wrap,
  .main-nav>li.has-mega.is-open .mega-wrap {
    transform: none;
    transition: opacity .01s linear, visibility .01s;
  }

  .mega-icon,
  .mega-links a::before {
    transition: none;
  }

  .mega-item:hover .mega-icon {
    transform: none;
  }

  .mega-links a:hover::before {
    transform: rotate(45deg);
  }
}

/* ==========================================================================
   hero-centered-v2
   ========================================================================== */
/* === V2: Centered hero, fits viewport, no form === */
.hero-anim {
  min-height: calc(100vh - 116px);
  display: flex;
  align-items: center;
  padding: 0;
}

.hero-particles {
  position: absolute !important;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  display: block;
}

@media (prefers-reduced-motion: reduce) {
}

.hero-anim-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  grid-template-columns: none !important;
  gap: 0 !important;
  width: 100%;
}

.hero-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

.hero-left .eyebrow {
  margin-bottom: 18px;
}

.hero-left h1 {
  font-size: clamp(28px, 3.6vw, 44px) !important;
  line-height: 1.12 !important;
  max-width: 820px;
  margin: 0 0 18px !important;
}

.hero-left .lede {
  font-size: clamp(15px, 1.6vw, 18px) !important;
  max-width: 680px;
  margin: 0 0 26px !important;
}

.hero-cta-row {
  justify-content: center;
  margin-top: 8px !important;
}

.hero-proof {
  justify-content: center;
  margin-top: 22px !important;
}

.cap-strip {
  justify-content: center;
  margin-top: 22px !important;
}

.hero-stats-row {
  display: none !important;
}

.hero-cta-row .btn {
  padding: 10px 20px !important;
  font-size: 13.5px !important;
}

.header-cta .btn {
  padding: 8px 16px !important;
  font-size: 12.5px !important;
}

.sticky-cta .btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.prefooter-cta .btn {
  padding: 11px 22px !important;
  font-size: 14px !important;
}

@media(max-width:900px) {
  .hero-anim {
    min-height: auto;
    padding: 44px 0 52px !important;
  }

  .hero-anim-inner {
    padding: 32px 20px;
  }

  .hero-left h1 {
    font-size: clamp(24px, 5vw, 32px) !important;
  }
}

/* ==========================================================================
   blog-grid-css
   ========================================================================== */
/* not on a Shopify section wrapper: there the section's padding settings (.tlx-sec)
   own the spacing, and the product pages' showcase sits on the page background */
.blog-section:not(.shopify-section) {
  padding: 96px 0;
  background: #fff;
}

.blog-section .container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.blog-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

.blog-head .blog-head-left {
  flex: 1;
  min-width: 280px;
}

.blog-head h2 {
  margin: 8px 0 12px;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height: 1.1;
  letter-spacing: -.6px;
}

.blog-head p.lede {
  margin: 0;
  color: var(--m, #5b6b7c);
  font-size: 17px;
  max-width: 640px;
}

.blog-head .btn {
  flex-shrink: 0;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.blog-card {
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
  position: relative;
}

.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -20px rgba(10, 37, 64, .25);
  border-color: transparent;
}

.blog-cover {
  position: relative;
  height: 200px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.blog-cover svg.cover-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.blog-cover .cover-icon {
  position: relative;
  z-index: 2;
  width: 72px;
  height: 72px;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
}

.blog-cover .cover-icon svg {
  width: 34px;
  height: 34px;
  color: #fff;
}

.blog-cover.cover-1 {
  background: linear-gradient(135deg, #0a2540 0%, #2a447a 100%);
}

.blog-cover.cover-2 {
  background: linear-gradient(135deg, #f0614a 0%, #ff8a4d 100%);
}

.blog-cover.cover-3 {
  background: linear-gradient(135deg, #0a1838 0%, #3a5fa8 100%);
}

.blog-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .18) 0%, transparent 50%);
  z-index: 1;
}

.blog-body {
  padding: 24px 24px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.blog-cat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(240, 97, 74, .1);
  color: #f0614a;
  border-radius: 999px;
  padding: 5px 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 14px;
}

.blog-cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f0614a;
}

.blog-card h3 {
  margin: 0 0 12px;
  font-size: 20px;
  line-height: 1.3;
  letter-spacing: -.3px;
  color: var(--p, #0a2540);
}

.blog-card .excerpt {
  color: var(--m, #5b6b7c);
  font-size: 14.5px;
  line-height: 1.6;
  margin: 0 0 20px;
  flex: 1;
}

.blog-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 12.5px;
  color: #94a0b0;
  border-top: 1px solid #eef2f7;
  padding-top: 16px;
}

.blog-meta .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #cbd3df;
}

.blog-arrow {
  margin-left: auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #f6f8fb;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--p, #0a2540);
  transition: all .25s;
}

.blog-card:hover .blog-arrow {
  background: var(--a, #f0614a);
  color: #fff;
  transform: translateX(4px);
}

.blog-arrow svg {
  width: 14px;
  height: 14px;
}

@media(max-width:980px) {
  .blog-grid {
    grid-template-columns: 1fr 1fr;
  }

  .blog-grid>a:last-child {
    grid-column: 1 / -1;
  }

  .blog-head {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media(max-width:640px) {
  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-grid>a:last-child {
    grid-column: auto;
  }
}

/* ==========================================================================
   modal-popup-css
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 24, 56, .65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}

.modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.modal-box {
  background: #fff;
  border-radius: 18px;
  max-width: 540px;
  width: 100%;
  position: relative;
  box-shadow: 0 40px 100px -20px rgba(10, 24, 56, .45), 0 0 0 1px rgba(255, 255, 255, .08);
  transform: translateY(20px) scale(.97);
  opacity: 0;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s ease;
  overflow-x: hidden;
  max-height: 100%;
}
.modal-box::-webkit-scrollbar{display:none;}
.modal-overlay.is-open .modal-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.modal-head {
  padding: 18px 28px 16px;
  background: linear-gradient(135deg, #0a2540 0%, #1a2c52 60%, #2a447a 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.modal-head::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(240, 97, 74, .4) 0%, transparent 70%);
}

.modal-head::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(91, 157, 220, .3) 0%, transparent 70%);
}

.modal-eyebrow {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #ffd4b8;
  padding: 4px 10px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-bottom: 8px;
}

.modal-eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a, #f0614a);
}

.modal-head h3 {
  position: relative;
  z-index: 2;
  margin: 0 0 4px;
  font-size: 18px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.3px;
  color: #fff;
}

.modal-head p {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 12px;
  color: rgba(255, 255, 255, .82);
  line-height: 1.5;
}

.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background .2s, transform .2s;
}

.modal-close:hover {
  background: rgba(255, 255, 255, .22);
  transform: rotate(90deg);
}

.modal-body {
  padding: 16px 22px 18px;
}

.modal-body form {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-body label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--p, #0a2540);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin-bottom: 3px;
}

.modal-body input,
.modal-body select,
.modal-body textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid #e4e9f0;
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--p, #0a2540);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  box-sizing: border-box;
}

.modal-body input:focus,
.modal-body select:focus,
.modal-body textarea:focus {
  outline: none;
  border-color: var(--a, #f0614a);
  box-shadow: 0 0 0 3px rgba(240, 97, 74, .12);
}

.modal-body textarea {
  resize: none;
  min-height: 50px;
  height: 50px;
}

.modal-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.modal-field {
  display: flex;
  flex-direction: column;
}

.modal-submit {
  margin-top: 4px;
  padding: 10px 18px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
  width: 100%;
  justify-content: center;
  display: flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, var(--a, #f0614a) 0%, #ff8a4d 100%) !important;
  color: #fff !important;
  border: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(240, 97, 74, .32);
  transition: transform .15s, box-shadow .15s;
}

.modal-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(240, 97, 74, .42);
}

.modal-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed #e4e9f0;
  font-size: 11px;
  color: var(--m, #5b6b7c);
  flex-wrap: wrap;
}

.modal-trust span {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.modal-trust span::before {
  content: "✓";
  color: #5b9d3c;
  font-weight: 800;
}

.modal-success {
  display: none;
  text-align: center;
  padding: 14px 0;
}

.modal-success.is-shown {
  display: block;
}

.modal-success .check {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, #5b9d3c 0%, #7ec06a 100%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  margin-bottom: 14px;
  box-shadow: 0 8px 22px rgba(91, 157, 60, .32);
}

.modal-success h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--p, #0a2540);
  font-weight: 800;
}

.modal-success p {
  margin: 0;
  font-size: 13.5px;
  color: var(--m, #5b6b7c);
  line-height: 1.55;
}

@media(max-width:560px) {
  .modal-head {
    padding: 22px 22px 18px;
  }

  .modal-head h3 {
    font-size: 18px;
  }

  .modal-body {
    padding: 18px 22px 22px;
  }

  .modal-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   search-popup-css
   ========================================================================== */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 24, 56, .55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 80px 24px 24px;
  z-index: 10001;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.search-box {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 680px;
  box-shadow: 0 40px 100px -20px rgba(10, 24, 56, .5);
  transform: translateY(-12px) scale(.98);
  opacity: 0;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1), opacity .25s;
  overflow: hidden;
}

.search-overlay.is-open .search-box {
  transform: translateY(0) scale(1);
  opacity: 1;
}

.search-input-wrap {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid #eef2f7;
}

.search-input-wrap>svg {
  width: 22px;
  height: 22px;
  color: var(--a, #f0614a);
  flex-shrink: 0;
}

.search-input-wrap input {
  flex: 1;
  border: 0;
  outline: 0;
  font-size: 18px;
  font-family: inherit;
  color: var(--p, #0a2540);
  background: transparent;
  padding: 4px 0;
  font-weight: 600;
  letter-spacing: -.2px;
}

.search-input-wrap input::placeholder {
  color: #94a0b0;
  font-weight: 500;
}

.search-shortcut {
  background: rgba(10, 37, 64, .05);
  border: 1px solid rgba(10, 37, 64, .08);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--m, #5b6b7c);
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
}

.search-results {
  padding: 14px 12px 18px;
  max-height: 62vh;
  overflow-y: auto;
}

.search-results .sr-section {
  padding: 6px 10px 4px;
}

.search-results .sr-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--m, #5b6b7c);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 6px 10px;
}

.search-results .sr-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, #e4e9f0, transparent);
  margin-left: 6px;
}

.search-results a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--p);
  transition: background .15s;
}

.search-results a:hover,
.search-results a.is-active {
  background: rgba(240, 97, 74, .07);
}

.sr-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: linear-gradient(135deg, rgba(240, 97, 74, .14), rgba(240, 97, 74, .06));
  color: var(--a, #f0614a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sr-icon svg {
  width: 18px;
  height: 18px;
}

.sr-body {
  flex: 1;
  min-width: 0;
}

.sr-body strong {
  display: block;
  font-size: 14px;
  color: var(--p, #0a2540);
  font-weight: 700;
  line-height: 1.3;
}

.sr-body span {
  display: block;
  font-size: 12px;
  color: var(--m, #5b6b7c);
  margin-top: 2px;
}

.sr-tag {
  font-size: 11px;
  color: #94a0b0;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: rgba(10, 37, 64, .04);
  padding: 3px 8px;
  border-radius: 99px;
  flex-shrink: 0;
}

.search-empty {
  padding: 36px 18px;
  text-align: center;
  color: var(--m, #5b6b7c);
  font-size: 13.5px;
}

.search-empty strong {
  display: block;
  color: var(--p);
  font-size: 15px;
  margin-bottom: 4px;
  font-weight: 700;
}

.search-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  border-top: 1px solid #eef2f7;
  background: #f6f8fb;
  font-size: 11.5px;
  color: var(--m, #5b6b7c);
  gap: 14px;
  flex-wrap: wrap;
}

.search-foot .sf-keys {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-foot .sf-key {
  background: #fff;
  border: 1px solid #e4e9f0;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--p);
  box-shadow: 0 1px 0 #e4e9f0;
}

.search-foot a {
  color: var(--a, #f0614a);
  font-weight: 700;
  text-decoration: none;
}

/* ==========================================================================
   video-modal-css
   ========================================================================== */
.video-overlay {
  position: fixed;
  inset: 0;
  background: rgba(8, 15, 30, .78);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 10002;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s;
}

.video-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.video-box {
  position: relative;
  width: 100%;
  max-width: 960px;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 50px 120px -20px rgba(0, 0, 0, .6);
  transform: scale(.96);
  opacity: 0;
  transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .25s;
}

.video-overlay.is-open .video-box {
  transform: scale(1);
  opacity: 1;
}

.video-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #000;
}

.video-frame iframe,
.video-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
  display: block;
}

.video-close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  transition: background .2s, transform .2s;
}

.video-close:hover {
  background: rgba(255, 255, 255, .22);
  transform: rotate(90deg);
}

.video-caption {
  position: absolute;
  bottom: -44px;
  left: 0;
  right: 0;
  color: rgba(255, 255, 255, .85);
  font-size: 12.5px;
  text-align: center;
  font-weight: 600;
  letter-spacing: .02em;
}

body.video-locked {
  overflow: hidden;
}

@media(max-width:760px) {
  .video-box {
    max-width: 100%;
  }

  .video-close {
    top: -40px;
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

.rs-video {
  cursor: pointer;
}

.rs-video:focus-visible {
  outline: 2px solid var(--a, #f0614a);
  outline-offset: 4px;
  border-radius: 14px;
}

/* ==========================================================================
   INNER-PAGE STYLES (about, contact, portfolio, services detail, case studies, blog)
   ========================================================================== */

/* Page hero (used on about, contact, portfolio, services, case-studies, blog list) */
.page-hero {
  position: relative;
  color: #fff;
  background: linear-gradient(135deg, #0a1838 0%, #1a2c52 50%, #2a447a 100%);
  padding: 80px 0 72px;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 20%, rgba(240, 97, 74, .25) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(91, 157, 220, .18) 0%, transparent 50%);
  pointer-events: none;
}

.page-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
}

.page-hero-inner .eyebrow {
  background: rgba(255, 255, 255, .14);
  color: #ffd4b8;
  border: 1px solid rgba(255, 255, 255, .18);
}

.page-hero-inner h1 {
  color: #fff;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -.6px;
  margin: 12px 0 14px;
  max-width: 880px;
}

.page-hero-inner .lede {
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
  max-width: 720px;
  margin: 0;
}

/* Service detail pages */
.service-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}

.service-hero-left h1 {
  color: #fff;
  font-size: clamp(30px, 3.6vw, 46px);
  line-height: 1.1;
  letter-spacing: -.5px;
  margin: 12px 0 14px;
}

.service-hero-left .lede {
  color: rgba(255, 255, 255, .85);
  font-size: 18px;
  margin: 0 0 22px;
}

.serv-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 40px;
}

.serv-head h2 {
  margin: 8px 0 12px;
}

@media(max-width:900px) {
  .service-hero-inner {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 48px 20px;
  }
}

/* Page wrapper (already in style.css but ensure sections have spacing) */
.page {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.page>section {
  padding: 72px 0;
}

.page>section.section-alt {
  background: var(--bga);
  margin: 0 -100vw;
  padding-left: calc(100vw - 0px);
  padding-right: calc(100vw - 0px);
}

.page>section.section-alt {
  background: var(--bga);
}

.page>section h2 {
  font-size: clamp(26px, 3.2vw, 38px);
  line-height: 1.15;
  margin: 8px 0 14px;
  letter-spacing: -.4px;
}

.page>section .lede {
  color: var(--m);
  font-size: 17px;
  margin: 0 0 28px;
  max-width: 760px;
}

/* About — story */
.story {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 48px;
  align-items: center;
}

.story-img {
  aspect-ratio: 1;
  background: linear-gradient(135deg, #0a2540, #2a447a);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 140px;
  font-weight: 900;
  letter-spacing: -4px;
}

.story-img span {
  opacity: .9;
}

@media(max-width:900px) {
  .story {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .story-img {
    aspect-ratio: 16/9;
    font-size: 100px;
  }
}

/* About — values */
.values-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.value {
  padding: 24px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 16px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.value:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 40px -12px rgba(10, 37, 64, .12);
  border-color: transparent;
}

.value .nb {
  display: inline-block;
  font-size: 13px;
  font-weight: 800;
  color: var(--a);
  margin-bottom: 8px;
  letter-spacing: .5px;
}

.value h3 {
  margin: 0 0 6px;
  font-size: 18px;
  color: var(--p);
  font-weight: 700;
}

.value p {
  margin: 0;
  color: var(--m);
  font-size: 14px;
  line-height: 1.6;
}

@media(max-width:760px) {
  .values-grid {
    grid-template-columns: 1fr;
  }
}

/* About — team grid */
.team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.member {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 16px;
  text-align: center;
}

.member .avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--p), var(--a));
  color: #fff;
  font-weight: 800;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.member strong {
  display: block;
  font-size: 15px;
  color: var(--p);
  font-weight: 700;
}

.member .role {
  display: block;
  font-size: 12.5px;
  color: var(--m);
  margin-top: 3px;
}

@media(max-width:980px) {
  .team-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:520px) {
  .team-grid {
    grid-template-columns: 1fr;
  }
}

/* Contact page */
.contact-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  align-items: start;
}
.mm-company-link {
  text-decoration: none !important;
}
.contact-block {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 18px;
  padding: 32px;
}

.contact-info>div {
  margin-bottom: 22px;
}

.contact-info strong {
  display: block;
  font-size: 11px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  margin-bottom: 5px;
}

.contact-info a {
  color: var(--p);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}

.contact-info a:hover {
  color: var(--a);
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}

.lf-row label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--p);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 5px;
}

.lf-row {
  margin-bottom: 12px;
}

.contact-block input,
.contact-block select,
.contact-block textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--br);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  box-sizing: border-box;
}

.contact-block input:focus,
.contact-block select:focus,
.contact-block textarea:focus {
  outline: none;
  border-color: var(--a);
  box-shadow: 0 0 0 3px rgba(240, 97, 74, .12);
}

.contact-block textarea {
  min-height: 120px;
  resize: vertical;
}

@media(max-width:900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

  .field-row {
    grid-template-columns: 1fr;
  }
}

/* Portfolio page */

.filter-wrap {
  background: #fff;
  border-bottom: 1px solid var(--br);
  position: sticky;
  top: 74px;
  z-index: 50;
}

.filter-wrap-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.filter-tabs button {
  background: #f6f8fb;
  border: 1px solid var(--br);
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p);
  cursor: pointer;
  font-family: inherit;
}

.filter-tabs button.is-active {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}

.filter-count {
  font-size: 12px;
  color: var(--m);
  margin-left: auto;
  flex: 0 0 fit-content;
}

.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  padding: 32px 0;
}

.bento .item {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.bento .item .img-wrap {
  aspect-ratio: 16/10;
  background: linear-gradient(135deg, var(--p), var(--a));
  position: relative;
}

.bento .item .body {
  padding: 18px;
}

.bento .item h3 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--p);
}

.bento .item p {
  margin: 0;
  font-size: 13px;
  color: var(--m);
}

.bento .item .ftags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.bento .item .ftag {
  font-size: 11px;
  color: var(--a);
  background: rgba(240, 97, 74, .08);
  padding: 3px 8px;
  border-radius: 99px;
  font-weight: 700;
}

@media(max-width:980px) {
}

@media(max-width:600px) {
}

/* Case study pages */
.cs-hero {
  padding: 64px 0 48px;
  background: var(--grad);
  color: #fff;
}

.cs-hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 48px;
  align-items: center;
}

.cs-hero-grid h1 {
  color: #fff;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.1;
  margin: 14px 0 12px;
}

.cs-hero-grid .lede {
  color: rgba(255, 255, 255, .85);
  font-size: 18px;
}

.cs-hero-meta {
  display: flex;
  gap: 22px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.cs-meta-item strong {
  display: block;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.cs-meta-item span {
  display: block;
  color: rgba(255, 255, 255, .65);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 2px;
}

.cs-hero-img {
  aspect-ratio: 4/3;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, .55);
  font-size: 14px;
}

.cs-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.cs-tag {
  font-size: 11px;
  color: #ffd4b8;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .18);
  padding: 4px 11px;
  border-radius: 99px;
  font-weight: 700;
}

.cs-narrative {
  max-width: 760px;
  margin: 0 auto;
}

.cs-narrative h2 {
  margin: 32px 0 12px;
}

.cs-narrative p {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--p);
  margin: 0 0 18px;
}

.cs-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 32px 0;
  padding: 28px;
  background: var(--bga);
  border-radius: 18px;
}

.cs-metrics .ms-c {
  text-align: center;
}

.cs-metrics strong {
  display: block;
  font-size: 30px;
  color: var(--a);
  font-weight: 900;
  line-height: 1;
}

.cs-metrics span {
  display: block;
  font-size: 11.5px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-top: 6px;
}

.cs-quote {
  background: var(--bga);
  padding: 32px;
  border-radius: 18px;
  border: 1px solid var(--br);
  margin: 28px 0;
}

.cs-quote p {
  font-size: 18px;
  line-height: 1.55;
  font-style: italic;
  margin: 0 0 14px;
  color: var(--p);
}

.cs-quote .q-auth {
  font-size: 14px;
  font-weight: 700;
  color: var(--p);
}

.cs-quote .q-stars {
  color: #fbbf24;
  letter-spacing: 2px;
  margin-bottom: 8px;
}

.cs-features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin: 24px 0;
}

.cs-features-grid>div {
  padding: 22px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 14px;
}

.cs-features-grid h4 {
  margin: 0 0 6px;
  font-size: 15px;
  color: var(--p);
}

.cs-features-grid p {
  margin: 0;
  font-size: 13px;
  color: var(--m);
  line-height: 1.55;
}

@media(max-width:900px) {
  .cs-hero-grid {
    grid-template-columns: 1fr;
  }

  .cs-metrics {
    grid-template-columns: 1fr 1fr;
  }

  .cs-features-grid {
    grid-template-columns: 1fr;
  }
}

/* Blog post pages */
.post-hero {
  padding: 48px 0;
  background: var(--bga);
  border-bottom: 1px solid var(--br);
}

.post-hero>.container {
  max-width: 840px;
}

.post-hero .cat {
  display: inline-block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--a);
  font-weight: 800;
  margin-bottom: 10px;
}

.post-hero h1 {
  font-size: clamp(28px, 3.6vw, 42px);
  line-height: 1.18;
  margin: 8px 0 14px;
}

/* .meta had no rule of its own, so date/read-time/author ran together */
.post-hero .meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 22px;
  font-size: 14px;
  color: var(--m);
}

.post-hero .meta span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.post-meta {
  display: flex;
  gap: 14px;
  font-size: 13px;
  color: var(--m);
  align-items: center;
  flex-wrap: wrap;
}

.post-cover {
  max-width: 840px;
  margin: 24px auto 0;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--p), var(--a));
  border-radius: 18px;
  overflow: hidden;
}

.post-img {
  width: 100%;
  height: 100%;
}

.post-body {
  max-width: 760px;
  margin: 48px auto;
  padding: 0 24px;
}

.post-body-content {
  /* matches the body size (16px); line-height a touch over body's 1.65 because
     the measure here is ~780px */
  font-size: 16px;
  line-height: 1.7;
  color: var(--p);
}

.post-body-content h2 {
  margin: 36px 0 16px;
  font-size: 26px;
}

.post-body-content h3 {
  margin: 28px 0 12px;
  font-size: 20px;
}

.post-body-content p {
  margin: 0 0 18px;
}

.post-body-content ul,
.post-body-content ol {
  margin: 0 0 18px;
  padding-left: 24px;
}

.post-body-content li {
  margin-bottom: 8px;
}

.post-body-content blockquote {
  background: var(--bga);
  border-radius: 12px;
  padding: 20px 24px;
  margin: 28px 0;
  font-style: italic;
  color: var(--m);
}

.post-body-content code {
  background: var(--bga);
  padding: 2px 6px;
  border-radius: 5px;
  font-size: 14px;
  color: var(--a);
}

.post-share {
  display: flex;
  gap: 10px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--br);
}

.post-related {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

/* the section box is container-width, but a background colour set on it should
   run edge to edge like every other band; stretch only the paint layer */
.post-related>.tlx-bg {
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
}

/* Blog list / case studies list — featured + grid */
.blog-feat,
.case-feat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
  margin: 32px 0 48px;
  background: var(--bga);
  border-radius: 20px;
  overflow: hidden;
}

.blog-feat-img,
.case-feat-img {
  background: linear-gradient(135deg, var(--p), var(--a));
  min-height: 280px;
}

.blog-feat>div:last-child,
.case-feat>div:last-child {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.blog-feat h2,
.case-feat h2 {
  margin: 8px 0 12px;
  font-size: 26px;
  line-height: 1.25;
}

@media(max-width:900px) {

  .blog-feat,
  .case-feat {
    grid-template-columns: 1fr;
  }

  .blog-feat-img,
  .case-feat-img {
    min-height: 200px;
  }
}

.case-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.case-list-grid>a {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: block;
  transition: transform .25s, box-shadow .25s;
}

.case-list-grid>a:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(10, 37, 64, .18);
}

.case-list-grid .cs-img {
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, var(--p), var(--a));
}

.case-list-grid .cs-body {
  padding: 20px;
}

.case-list-grid h3 {
  margin: 6px 0 6px;
  font-size: 18px;
  color: var(--p);
}

.case-list-grid .cs-tags {
  margin-top: 10px;
}

@media(max-width:760px) {
  .case-list-grid {
    grid-template-columns: 1fr;
  }
}

/* Misc — content strips and small components */
.cta-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cta-strip {
  padding: 32px 28px;
  background: var(--grad);
  color: #fff;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.cta-strip h3 {
  color: #fff;
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.cta-strip p {
  color: rgba(255, 255, 255, .78);
  margin: 6px 0 0;
  font-size: 14px;
}

.metrics-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.metrics-strip .ms-c {
  text-align: center;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 14px;
}

.metrics-strip strong {
  display: block;
  font-size: 32px;
  color: var(--a);
  font-weight: 900;
  line-height: 1;
}

.metrics-strip span {
  display: block;
  font-size: 11.5px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-top: 6px;
}

@media(max-width:760px) {
  .metrics-strip {
    grid-template-columns: 1fr 1fr;
  }
}

/* Featured cards (case studies / blog) */
.feat-card {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 18px;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.feat-card .feat-side {
  padding: 32px;
}

.feat-card .feat-row {
  display: flex;
  gap: 18px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.feat-card .feat-metrics strong {
  display: block;
  font-size: 22px;
  color: var(--a);
  font-weight: 800;
}

.feat-card .feat-metrics span {
  display: block;
  font-size: 11px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

@media(max-width:760px) {
  .feat-card {
    grid-template-columns: 1fr;
  }
}

/* Sticky header offset for sub-page sections */
.req {
  color: var(--a);
  font-weight: 800;
}

.fm {
  font-size: 12.5px;
  color: var(--m);
  margin-top: 6px;
}

.ps {
  font-size: 12px;
  color: var(--m);
}

.row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.topm {
  padding: 18px 22px;
  background: var(--bga);
  border-radius: 14px;
  margin-bottom: 18px;
}

.topm-l strong {
  display: block;
  color: var(--p);
  font-size: 14px;
  font-weight: 700;
}

.topm-l span {
  font-size: 12.5px;
  color: var(--m);
}

.lc-sub {
  color: var(--m);
  font-size: 14px;
  margin-top: 6px;
}

.lc-trust {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--m);
  margin-top: 14px;
  flex-wrap: wrap;
}

.consent {
  font-size: 12px;
  color: var(--m);
  margin-top: 12px;
}

.pfc-left {
  flex: 1;
}

/* Portfolio item background variants */
.bg-1 {
  background: linear-gradient(135deg, #0a2540 0%, #2a447a 100%);
}

.bg-2 {
  background: linear-gradient(135deg, #f0614a 0%, #ff8a4d 100%);
}

.bg-3 {
  background: linear-gradient(135deg, #0a1838 0%, #3a5fa8 100%);
}

.bg-4 {
  background: linear-gradient(135deg, #1a2c52 0%, #5263d9 100%);
}

.bg-5 {
  background: linear-gradient(135deg, #2a447a 0%, #f0614a 100%);
}

.bg-6 {
  background: linear-gradient(135deg, #14365e 0%, #ff8a4d 100%);
}

.cat-bar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 18px 0 28px;
}

.cat-bar a {
  font-size: 13px;
  font-weight: 700;
  color: var(--m);
  background: var(--bga);
  border-radius: 99px;
  padding: 6px 14px;
  text-decoration: none;
  transition: background .15s, color .15s;
}

.cat-bar a.is-active,
.cat-bar a:hover {
  background: var(--a);
  color: #fff;
}

.cs-feat {
  padding: 32px;
  background: linear-gradient(135deg, var(--p), #1a2c52);
  color: #fff;
  border-radius: 18px;
  margin: 24px 0;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 32px;
  align-items: center;
}

.cs-feat h3 {
  color: #fff;
  margin: 0 0 10px;
  font-size: 22px;
}

.cs-feat p {
  color: rgba(255, 255, 255, .82);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 14px;
}

.cs-feat .cs-img {
  aspect-ratio: 4/3;
  background: rgba(255, 255, 255, .06);
  border-radius: 14px;
}

@media(max-width:760px) {
  .cs-feat {
    grid-template-columns: 1fr;
  }
}

/* Container alignment fallback — when sections inside .page lack inner .container */
.page>section>*:not(.container):not(.story):not(.bento):not(.cs-narrative):not(.contact-layout):not(.values-grid):not(.team-grid):not(.metrics-strip):not(.cta-strip):not(.cs-features-grid):not(.cs-metrics):not(.case-list-grid):not(.blog-feat):not(.case-feat):not(.filter-wrap-inner):not(.cs-quote):not(.res) {
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   SERVICE DETAIL PAGES — restore split hero (left content + right form)
   ========================================================================== */
.hero-anim.service-hero {
  min-height: auto !important;
  display: block !important;
  padding: 0 !important;
}

.hero-anim.service-hero .service-hero-inner {
  display: grid !important;
  grid-template-columns: 1.3fr 1fr !important;
  gap: 48px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 72px 24px 64px;
  position: relative;
  z-index: 2;
}

.service-hero-left .eyebrow {
  background: rgba(255, 255, 255, .14);
  color: #ffd4b8;
  border: 1px solid rgba(255, 255, 255, .18);
}

.service-hero-left h1 {
  color: #fff;
  font-size: clamp(30px, 3.6vw, 46px) !important;
  line-height: 1.1 !important;
  letter-spacing: -.5px;
  margin: 14px 0 14px;
}

.service-hero-left h1 em {
  font-style: normal;
  color: var(--a);
}

.service-hero-left .lede {
  color: rgba(255, 255, 255, .86);
  font-size: 18px;
  margin: 0 0 22px;
  max-width: 560px;
}

.service-hero-left .hero-cta-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 0;
  justify-content: flex-start !important;
}

.service-hero-left .hero-proof {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 22px;
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  flex-wrap: wrap;
  justify-content: flex-start !important;
}

.service-hero-left .hero-proof .stars {
  color: #fbbf24;
  letter-spacing: 2px;
  font-size: 16px;
}

.hero-anim.service-hero .cro-offer {
  align-self: start;
  max-width: 100%;
}

@media(max-width:980px) {
  .hero-anim.service-hero .service-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 36px;
    padding: 48px 20px;
  }
}

/* Tighten practice icons on 4-col service grids */
.practice-grid[style*="repeat(4"] .p-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  margin-bottom: 14px;
}

.practice-grid[style*="repeat(4"] .p-icon svg {
  width: 20px;
  height: 20px;
}

.practice-grid[style*="repeat(4"] .practice h3 {
  font-size: 16px !important;
  margin-bottom: 6px;
}

.practice-grid[style*="repeat(4"] .practice .p-desc {
  font-size: 13px;
  line-height: 1.55;
}

@media(max-width:1024px) {
  .practice-grid[style*="repeat(4"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media(max-width:600px) {
  .practice-grid[style*="repeat(4"] {
    grid-template-columns: 1fr !important;
  }
}


/* ==========================================================================
   PORTFOLIO HERO — full-bleed dark hero matching homepage style
   ========================================================================== */
.port-hero {
  position: relative;
  background: linear-gradient(135deg, #0a1838 0%, #1a2c52 50%, #2a447a 100%);
  color: #fff;
  overflow: hidden;
  padding: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}

.port-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: .85;
}

.port-hero-bg::before,
.port-hero-bg::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  animation: float 14s ease-in-out infinite;
}

.port-hero-bg::before {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(240, 97, 74, .55) 0%, transparent 70%);
  top: -160px;
  left: -100px;
}

.port-hero-bg::after {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(91, 157, 220, .45) 0%, transparent 70%);
  bottom: -200px;
  right: -120px;
  animation-delay: -7s;
}

.port-hero-mesh {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(circle at 20% 30%, rgba(240, 97, 74, .18) 0%, transparent 40%), radial-gradient(circle at 80% 70%, rgba(91, 157, 220, .18) 0%, transparent 40%);
}

.port-hero-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 64px 24px 56px;
  text-align: center;
}

.port-hero .eyebrow {
  background: rgba(255, 255, 255, .14);
  color: #ffd4b8;
  border: 1px solid rgba(255, 255, 255, .18);
  font-size: 11px;
  letter-spacing: .7px;
  padding: 5px 12px;
}

.port-hero h1 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 44px) !important;
  line-height: 1.12 !important;
  letter-spacing: -.5px;
  font-weight: 800;
  margin: 12px auto 14px;
  max-width: 820px;
}

.port-hero h1 em {
  font-style: normal;
  color: var(--a);
}

.port-hero .lede {
  color: rgba(255, 255, 255, .86);
  font-size: clamp(14px, 1.4vw, 16px) !important;
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 680px;
}

.port-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  max-width: 720px;
  margin: 0 auto;
  padding: 20px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

.port-stats .ps {
  text-align: center;
}

.port-stats .ps strong {
  display: block;
  font-size: 22px;
  color: var(--a);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.3px;
  font-feature-settings: "tnum";
}

.port-stats .ps span {
  display: block;
  font-size: 11px;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-top: 5px;
  font-weight: 600;
}

@media(max-width:900px) {
  .port-hero-inner {
    padding: 56px 20px 48px;
  }

  .port-stats {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
}

@media(max-width:520px) {
  .port-stats {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Filter bar — full-bleed sticky bar below hero */
.filter-wrap {
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--br);
  position: sticky;
  top: 74px;
  z-index: 900;
  padding: 12px 24px;
  box-shadow: 0 4px 16px -8px rgba(10, 24, 56, .12);
}

.filter-wrap-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

/* ==========================================================================
   PORTFOLIO PAGE — featured row, bento grid, item cards
   ========================================================================== */

/* Override the .page > section padding for the portfolio page first section */

.filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-tabs button {
  background: #f6f8fb;
  border: 1px solid var(--br);
  padding: 7px 14px;
  border-radius: 99px;
  font-size: 13px;
  font-weight: 600;
  color: var(--p);
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}

.filter-tabs button.active,
.filter-tabs button:hover {
  background: var(--p);
  color: #fff;
  border-color: var(--p);
}

.filter-tabs button.active {
  background: var(--a);
  border-color: var(--a);
}

.filter-count {
  font-size: 12.5px;
  color: var(--m);
  margin-left: auto;
  flex: 0 0 fit-content;
}

.filter-count strong {
  color: var(--p);
  font-weight: 800;
}

/* The bar is sticky, so on narrow screens a wrapped set of pills would park a
   150-200px block under the header for the whole scroll. Keep it to one row and
   let it scroll sideways instead; the count is secondary, so it drops out. */
@media(max-width:900px) {
  .filter-wrap {
    padding: 10px 0;
  }

  .filter-wrap-inner {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0 24px;
    -webkit-overflow-scrolling: touch;
  }

  .filter-wrap-inner::-webkit-scrollbar {
    display: none;
  }

  .filter-tabs {
    flex-wrap: nowrap;
  }

  .filter-tabs button {
    white-space: nowrap;
  }

  .filter-count {
    display: none;
  }
}

/* === FEATURED ROW: 1 big + 2 side === */
.feat-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin: 32px 0 22px;
}

.feat-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 20px;
}

.feat-card {
  position: relative;
  display: block;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  min-height: 260px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.feat-card.big {
  min-height: 540px;
}

.feat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 32px 60px -20px rgba(10, 24, 56, .45);
}

.feat-card>.bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform .4s ease;
}

.feat-card:hover>.bg {
  transform: scale(1.05);
}

.feat-card>.mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 24, 56, 0) 30%, rgba(10, 24, 56, .55) 75%, rgba(10, 24, 56, .85) 100%);
}

.feat-card .initials {
  position: absolute;
  top: 22px;
  right: 24px;
  z-index: 3;
  font-size: 46px;
  font-weight: 900;
  color: rgba(255, 255, 255, .22);
  letter-spacing: -2px;
  line-height: 1;
}

.feat-card.big .initials {
  font-size: 88px;
  top: 32px;
  right: 34px;
}

.feat-card .arr {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 3;
  width: 38px;
  height: 38px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 18px;
  transition: all .2s;
}

.feat-card:hover .arr {
  background: var(--a);
  transform: rotate(-45deg);
}

.feat-card>.body {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
}

.feat-card.big>.body {
  padding: 32px;
}

.feat-card .ftags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.feat-card .ftag {
  font-size: 11px;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  padding: 4px 10px;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: .4px;
}

.feat-card h2 {
  color: #fff;
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.3px;
}

.feat-card.big h2 {
  font-size: 32px;
}

.feat-card p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .82);
  font-size: 13.5px;
  line-height: 1.55;
}

.feat-card.big p {
  font-size: 15px;
}

.feat-card .feat-metrics {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.feat-card .fm strong {
  display: block;
  color: var(--a);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
}

.feat-card .fm span {
  display: block;
  color: rgba(255, 255, 255, .72);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 4px;
}

.feat-card.big .fm strong {
  font-size: 30px;
}

@media(max-width:980px) {
  .feat-row {
    grid-template-columns: 1fr;
  }

  .feat-side {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }

  .feat-card.big {
    min-height: 380px;
  }
}

@media(max-width:600px) {
  .feat-side {
    grid-template-columns: 1fr;
  }
}

/* === BENTO GRID === */
.bento {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 8px 0 32px;
}

.bento .item {
  position: relative;
  display: block;
  border-radius: 16px;
  overflow: hidden;
  text-decoration: none;
  color: #fff;
  min-height: 300px;
  transition: transform .3s ease, box-shadow .3s ease;
}

.bento .item:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 50px -18px rgba(10, 24, 56, .35);
}

.bento .item .bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  transition: transform .4s ease;
}

.bento .item:hover .bg {
  transform: scale(1.05);
}

.bento .item .mesh {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(10, 24, 56, 0) 35%, rgba(10, 24, 56, .55) 78%, rgba(10, 24, 56, .88) 100%);
}

.bento .item .initials {
  position: absolute;
  top: 18px;
  right: 20px;
  z-index: 3;
  font-size: 40px;
  font-weight: 900;
  color: rgba(255, 255, 255, .22);
  letter-spacing: -2px;
  line-height: 1;
}

.bento .item .body {
  position: relative;
  z-index: 3;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 20px;
}

.bento .item .ftags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.bento .item .ftag {
  font-size: 11px;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  padding: 3px 9px;
  border-radius: 99px;
  font-weight: 700;
  letter-spacing: .4px;
}

.bento .item h3 {
  color: #fff;
  margin: 0 0 6px;
  font-size: 17px !important;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.2px;
}

.bento .item p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
  line-height: 1.5;
}

.bento .item .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

.bento .item .row>div:first-child {
  display: flex;
  flex-direction: column;
}

.bento .item .topm {
  color: var(--a);
  font-size: 18px;
  font-weight: 900;
  line-height: 1;
  padding: 0;
  background: transparent;
  border-radius: 0;
  margin: 0;
}

.bento .item .topm-l {
  color: rgba(255, 255, 255, .7);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 3px;
}

.bento .item .arr {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, .18);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 15px;
  transition: all .2s;
}

.bento .item:hover .arr {
  background: var(--a);
  transform: rotate(-45deg);
}

/* Hidden filter state */
.bento .item.hide,
.feat-card.hide {
  display: none !important;
}

@media(max-width:980px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:600px) {
  .bento {
    grid-template-columns: 1fr;
  }

  .bento .item {
    min-height: 260px;
  }
}

/* Portfolio: hide the .page section padding so feat-row + bento aren't double-padded */
.page>section[style*="padding-top:0"] {
  padding-top: 0 !important;
  padding-bottom: 64px;
}

/* ==========================================================================
   ABOUT PAGE — MODERN VISUAL TREATMENTS
   ========================================================================== */

/* Story section: 2-column with image side as a layered visual card */
.about-story {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 48px;
  align-items: center;
}

.about-story-side {
  position: relative;
  aspect-ratio: 1/1;
  border-radius: 24px;
  background: linear-gradient(135deg, #0a2540 0%, #1a2c52 50%, #2a447a 100%);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-story-side::before {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(240, 97, 74, .4) 0%, transparent 70%);
  top: -100px;
  right: -100px;
  filter: blur(40px);
}

.about-story-side::after {
  content: "";
  position: absolute;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(91, 157, 220, .35) 0%, transparent 70%);
  bottom: -100px;
  left: -100px;
  filter: blur(40px);
}

.about-story-side .ass-card {
  position: relative;
  z-index: 2;
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 80%;
}

.about-story-side .ass-stat {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 14px;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: #fff;
}

.about-story-side .ass-stat strong {
  display: block;
  font-size: 28px;
  color: var(--a, #f0614a);
  font-weight: 900;
  line-height: 1;
  font-feature-settings: "tnum";
}

.about-story-side .ass-stat span {
  display: block;
  font-size: 12px;
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .7px;
  margin-top: 4px;
  font-weight: 600;
}

.about-story-side .ass-stat .ass-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: rgba(240, 97, 74, .18);
  color: var(--a, #f0614a);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.about-story-side .ass-stat .ass-icon svg {
  width: 20px;
  height: 20px;
}

.about-story-text h2 {
  font-size: clamp(24px, 2.6vw, 32px) !important;
  line-height: 1.18;
  margin-bottom: 18px;
}

.about-story-text p {
  color: var(--m);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 14px;
}

@media(max-width:900px) {
  .about-story {
    grid-template-columns: 1fr;
  }

  .about-story-side {
    aspect-ratio: 16/10;
  }
}

/* Mission / Vision — 2-card layout with corner accents */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

.mv-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--br, #e4e9f0);
  border-radius: 20px;
  padding: 36px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.mv-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--a, #f0614a) 0%, #ff8a4d 100%);
}

.mv-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 50px -16px rgba(10, 37, 64, .16);
  border-color: transparent;
}

.mv-card .mv-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(240, 97, 74, .18), rgba(240, 97, 74, .06));
  color: var(--a, #f0614a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.mv-card .mv-icon svg {
  width: 24px;
  height: 24px;
}

.mv-card.alt::before {
  background: linear-gradient(90deg, #0a2540 0%, #3a5fa8 100%);
}

.mv-card.alt .mv-icon {
  background: linear-gradient(135deg, rgba(10, 37, 64, .12), rgba(10, 37, 64, .04));
  color: var(--p, #0a2540);
}

.mv-card h2 {
  font-size: 22px !important;
  line-height: 1.25;
  margin: 0 0 12px;
  color: var(--p);
}

.mv-card p {
  margin: 0;
  color: var(--m);
  font-size: 15px;
  line-height: 1.7;
}

@media(max-width:760px) {
  .mv-grid {
    grid-template-columns: 1fr;
  }
}

/* Values grid — icons + hover lift */
.values-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.value-modern {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 18px;
  padding: 28px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
  position: relative;
}

.value-modern:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -12px rgba(10, 37, 64, .14);
  border-color: transparent;
}

.value-modern .v-num {
  position: absolute;
  top: 18px;
  right: 22px;
  font-size: 42px;
  font-weight: 900;
  color: rgba(240, 97, 74, .08);
  line-height: 1;
  letter-spacing: -2px;
  font-feature-settings: "tnum";
}

.value-modern .v-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(240, 97, 74, .18), rgba(240, 97, 74, .06));
  color: var(--a, #f0614a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}

.value-modern .v-icon svg {
  width: 22px;
  height: 22px;
}

.value-modern h3 {
  font-size: 17px !important;
  margin: 0 0 6px;
  color: var(--p);
  font-weight: 800;
}

.value-modern p {
  margin: 0;
  color: var(--m);
  font-size: 14px;
  line-height: 1.6;
}

@media(max-width:900px) {
  .values-modern {
    grid-template-columns: 1fr 1fr;
  }
}

@media(max-width:560px) {
  .values-modern {
    grid-template-columns: 1fr;
  }
}
   
/* Practice areas — 4 large cards with icon + arrow link */
.practice-modern {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.practice-modern .pm-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 20px;
  padding: 32px;
  overflow: hidden;
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.practice-modern .pm-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(240, 97, 74, 0) 0%, rgba(240, 97, 74, 0) 100%);
  opacity: 0;
  transition: opacity .3s;
  border-radius: 20px;
  pointer-events: none;
}
 
.practice-modern .pm-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 28px 60px -18px rgba(10, 37, 64, .18);
  border-color: transparent;
}

.practice-modern .pm-card:hover::before {
  opacity: 1;
  background: linear-gradient(135deg, rgba(240, 97, 74, .04) 0%, rgba(240, 97, 74, 0) 60%);
}

.practice-modern .pm-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(240, 97, 74, .18), rgba(240, 97, 74, .06));
  color: var(--a, #f0614a); 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 18px;
}

.practice-modern .pm-icon svg {
  width: 26px;
  height: 26px;
}

.practice-modern .pm-eyebrow {
  display: inline-block;
  font-size: 11px;
  color: var(--a, #f0614a);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 4px 10px;
  background: rgba(240, 97, 74, .1);
  border-radius: 99px;
  margin-bottom: 10px;
}

.practice-modern .pm-card h3 {
  font-size: 20px !important;
  margin: 0 0 10px;
  color: var(--p);
  font-weight: 800;
  letter-spacing: -.3px;
}

.practice-modern .pm-card p {
  margin: 0 0 16px;
  color: var(--m);
  font-size: 14.5px;
  line-height: 1.65;
}

.practice-modern .pm-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--a, #f0614a);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: gap .2s;
}

.practice-modern .pm-cta::after {
  content: "→";
  transition: transform .2s;
}

.practice-modern .pm-card:hover .pm-cta::after {
  transform: translateX(4px);
}

@media(max-width:760px) {
  .practice-modern {
    grid-template-columns: 1fr;
  }
}

/* How We Work — 5-step process with connecting line */
.process-modern {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  position: relative;
}

.process-modern::before {
  content: "";
  position: absolute;
  top: 34px;
  left: 6%;
  right: 6%;
  height: 2px;
  background: linear-gradient(90deg, rgba(240, 97, 74, 0) 0%, rgba(240, 97, 74, .35) 15%, rgba(240, 97, 74, .35) 85%, rgba(240, 97, 74, 0) 100%);
  z-index: 0;
}

.process-step {
  position: relative;
  z-index: 1;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 16px;
  padding: 22px;
  text-align: center;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.process-step:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -14px rgba(10, 37, 64, .14);
  border-color: transparent;
}

.process-step .ps-num {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--a, #f0614a) 0%, #ff8a4d 100%);
  color: #fff;
  font-weight: 900;
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  box-shadow: 0 8px 20px rgba(240, 97, 74, .32);
  font-feature-settings: "tnum";
}

.process-step:nth-child(even) .ps-num {
  background: linear-gradient(135deg, var(--p, #0a2540) 0%, #3a5fa8 100%);
  box-shadow: 0 8px 20px rgba(10, 37, 64, .22);
}

.process-step h3 {
  font-size: 15px !important;
  margin: 0 0 6px;
  color: var(--p);
  font-weight: 800;
}

.process-step p {
  margin: 0;
  color: var(--m);
  font-size: 12.5px;
  line-height: 1.55;
}

@media(max-width:980px) {
  .process-modern {
    grid-template-columns: repeat(2, 1fr);
  }

  .process-modern::before {
    display: none;
  }
}

@media(max-width:520px) {
  .process-modern {
    grid-template-columns: 1fr;
  }
}

/* Recognition badges — modern */
.recog-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.recog-card {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 16px;
  padding: 24px;
  text-align: center;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.recog-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -14px rgba(10, 37, 64, .14);
  border-color: transparent;
}

.recog-card .rc-icon {
  width: 60px;
  height: 60px;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(240, 97, 74, .16), rgba(240, 97, 74, .04));
  color: var(--a, #f0614a);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}

.recog-card .rc-icon svg {
  width: 28px;
  height: 28px;
}

.recog-card strong {
  display: block;
  font-size: 14px;
  color: var(--p);
  font-weight: 800;
}

.recog-card span {
  display: block;
  font-size: 11.5px;
  color: var(--m);
  margin-top: 4px;
  line-height: 1.4;
}

@media(max-width:760px) {
  .recog-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:420px) {
  .recog-modern {
    grid-template-columns: 1fr;
  }
}

/* Industries — modern cards with subtle icons */
.industries-modern {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.ind-card {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 14px;
  padding: 22px;
  transition: transform .25s, box-shadow .25s, border-color .25s, background .25s;
  cursor: default;
}

.ind-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px -12px rgba(10, 37, 64, .12);
  border-color: transparent;
  background: linear-gradient(135deg, #fff, rgba(240, 97, 74, .03));
}

.ind-card .ind-icon {
  font-size: 24px;
  line-height: 1;
  margin-bottom: 10px;
  display: block;
}

.ind-card h3 {
  font-size: 15px !important;
  margin: 0 0 6px;
  color: var(--p);
  font-weight: 800;
}

.ind-card p {
  margin: 0;
  color: var(--m);
  font-size: 13px;
  line-height: 1.55;
}

@media(max-width:900px) {
  .industries-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:480px) {
  .industries-modern {
    grid-template-columns: 1fr;
  }
}

/* Culture — modern cards */
.culture-modern {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.cul-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 18px;
  padding: 26px;
  overflow: hidden;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.cul-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -14px rgba(10, 37, 64, .14);
  border-color: transparent;
}

.cul-card .cm-tag {
  display: inline-block;
  font-size: 11px;
  color: var(--a, #f0614a);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .7px;
  padding: 3px 10px;
  background: rgba(240, 97, 74, .1);
  border-radius: 99px;
  margin-bottom: 12px;
}

.cul-card .cm-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(10, 37, 64, .06), rgba(10, 37, 64, .02));
  color: var(--p);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  float: right;
  margin-left: 14px;
}

.cul-card .cm-icon svg {
  width: 20px;
  height: 20px;
}

.cul-card h3 {
  font-size: 17px !important;
  margin: 0 0 8px;
  color: var(--p);
  font-weight: 800;
}

.cul-card p {
  margin: 0;
  color: var(--m);
  font-size: 13.5px;
  line-height: 1.65;
}

@media(max-width:900px) {
  .culture-modern {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width:520px) {
  .culture-modern {
    grid-template-columns: 1fr;
  }
}

/* Common — section heading block */
.section-head-center {
  text-align: left;
  max-width: 100%;
  margin: 0 auto 40px;
}

.section-head-center h2 {
  font-size: clamp(24px, 2.8vw, 34px) !important;
  line-height: 1.18;
  margin: 10px 0 12px !important;
  letter-spacing: -.4px;
  font-weight: 800;
}

.section-head-center .lede {
  color: var(--m);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 ;
}

/* ==========================================================================
   BLOG LIST PAGE — modern card grid (overrides post-* used for single-post)
   ========================================================================== */
.blog-grid .post-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s;
  margin: 0;
  box-shadow: none;
  padding: 0;
}

.blog-grid .post-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -20px rgba(10, 37, 64, .18);
  border-color: transparent;
}

.blog-grid .post-card .post-img {
  width: 100%;
  height: 180px;
  background: linear-gradient(135deg, #0a2540 0%, #3a5fa8 100%);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 42px;
  font-weight: 900;
  letter-spacing: -2px;
}

.blog-grid .post-card:nth-child(3n+2) .post-img {
  background: linear-gradient(135deg, #f0614a 0%, #ff8a4d 100%);
}

.blog-grid .post-card:nth-child(3n+3) .post-img {
  background: linear-gradient(135deg, #1a2c52 0%, #5263d9 100%);
}

.blog-grid .post-card:nth-child(5n+4) .post-img {
  background: linear-gradient(135deg, #2a447a 0%, #f0614a 100%);
}

.blog-grid .post-card .post-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .18) 0%, transparent 55%), radial-gradient(circle at 80% 80%, rgba(0, 0, 0, .18) 0%, transparent 55%);
}

.blog-grid .post-card .post-img span {
  position: relative;
  z-index: 1;
}

.blog-grid .post-card .post-body {
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
  margin: 0;
  max-width: none;
}

.blog-grid .post-card .cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(240, 97, 74, .1);
  color: var(--a, #f0614a);
  border-radius: 99px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 12px;
}

.blog-grid .post-card .cat::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--a, #f0614a);
}

.blog-grid .post-card h3 {
  margin: 0 0 10px !important;
  font-size: 20px !important;
  line-height: 1.32;
  letter-spacing: -.2px;
  color: var(--p, #0a2540);
  font-weight: 800;
}

.blog-grid .post-card p {
  margin: 0 0 14px;
  color: var(--m, #5b6b7c);
  font-size: 13.5px;
  line-height: 1.6;
  flex: 1;
}

.blog-grid .post-card .post-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: #94a0b0;
  border-top: 1px solid #eef2f7;
  padding-top: 12px;
  margin-top: auto;
}

.blog-grid .post-card .post-meta span {
  display: inline-flex;
  align-items: center;
}

.blog-grid .post-card .post-meta span+span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: #cbd3df;
  margin: 0 8px 1px;
}

/* Featured blog post card (blog-feat) */
.blog-feat {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: var(--bga);
  border-radius: 22px;
  overflow: hidden;
  margin: 0 0 40px;
  border: 1px solid var(--br);
  transition: transform .3s, box-shadow .3s, border-color .3s;
}

.blog-feat:hover {
  transform: translateY(-4px);
  box-shadow: 0 30px 60px -20px rgba(10, 37, 64, .18);
  border-color: transparent;
}

.blog-feat>div:first-child {
  padding: 36px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
 
.blog-feat .cat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--a);
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 4px 10px;
  background: rgba(240, 97, 74, .1);
  border-radius: 99px;
  align-self: flex-start;
}

.blog-feat .cat::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a);
}

.blog-feat h2 {
  font-size: clamp(20px, 2.2vw, 28px) !important;
  line-height: 1.22;
  margin: 0 0 14px;
  letter-spacing: -.3px;
}

.blog-feat p {
  color: var(--m);
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0 0 16px;
}

.blog-feat .meta {
  display: flex;
  gap: 14px;
  font-size: 12.5px;
  color: var(--m);
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.blog-feat-img {
  min-height: 300px;
  background: linear-gradient(135deg, #0a2540 0%, #f0614a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 80px;
  font-weight: 900;
  letter-spacing: -4px;
  position: relative;
}

.blog-feat-img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .15) 0%, transparent 55%);
}

.blog-feat-img span {
  position: relative;
  z-index: 1;
}

@media(max-width:760px) {
  .blog-feat {
    grid-template-columns: 1fr;
  }

  .blog-feat>div:first-child {
    padding: 28px;
  }

  .blog-feat-img {
    min-height: 200px;
    font-size: 56px;
  }
}

/* Newsletter section "fc" card on blog page */
.fc {
  background: linear-gradient(135deg, #0a2540 0%, #1a2c52 60%, #2a447a 100%);
  color: #fff;
  border-radius: 22px;
  padding: 48px 36px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin: 40px 0;
}

.fc::before {
  content: "";
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(240, 97, 74, .25) 0%, transparent 70%);
}

.fc::after {
  content: "";
  position: absolute;
  bottom: -100px;
  left: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(91, 157, 220, .2) 0%, transparent 70%);
}

.fc h2 {
  color: #fff;
  margin: 0 0 8px;
  position: relative;
  z-index: 1;
}

.fc p {
  color: rgba(255, 255, 255, .82);
  margin: 0 0 22px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  z-index: 1;
}

.fc form,
.fc .cta-row {
  position: relative;
  z-index: 1;
}

.fc input[type="email"] {
  padding: 13px 18px;
  border-radius: 9px;
  border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(255, 255, 255, .06);
  color: #fff;
  font-size: 14px;
  min-width: 280px;
}

.fc input[type="email"]::placeholder {
  color: rgba(255, 255, 255, .55);
}

.fc input[type="email"]:focus {
  outline: none;
  border-color: var(--a);
  background: rgba(255, 255, 255, .12);
}

/* ==========================================================================
   CONTACT PAGE — modern form + info panel
   ========================================================================== */
.contact-layout {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 36px;
  align-items: start;
  margin: 32px 0 0;
}

/* scoped to the contact page layout: the service hero's <form> also carries
   .contact-form, and it must not pick up this card treatment */
.contact-layout>.contact-form {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 20px;
  padding: 36px;
}

/* the reference sizes these from `section h3 { line-height: 1.3 }`, a global rule
   this theme does not carry; scoped here so only the contact panel is affected */
.contact-info .contact-block h3 {
  line-height: 1.3;
}
.contact-layout>.contact-form>h2 {
  /* the reference gets 8px/14px from `.page > section h2`; this theme has no .page
     wrapper, so the same rhythm is set on the heading itself */
  margin: 8px 0 14px;
  font-size: 22px !important;
  color: var(--p);
  font-weight: 800;
}
.contact-layout>.contact-form>p {
  color: var(--m);
  font-size: 14px;
  margin: 0 0 22px;
  line-height: 1.6;
}

.contact-form .field {
  display: flex;
  flex-direction: column;
  margin-bottom: 14px;
}

.contact-form .field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 0;
}

.contact-form .field-row .field {
  margin-bottom: 14px;
}

.contact-form label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--p);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 6px;
}

.contact-form .req {
  color: var(--a);
  font-weight: 900;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid var(--br);
  border-radius: 9px;
  font-size: 14px;
  font-family: inherit;
  background: #fff;
  color: var(--p);
  box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: var(--a);
  box-shadow: 0 0 0 3px rgba(240, 97, 74, .12);
}

.contact-form textarea {
  min-height: 120px;
  resize: vertical;
}

.contact-form .consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px;
  color: var(--m);
  margin: 8px 0 18px;
}

.contact-form .consent input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  accent-color: var(--a);
}

.contact-form .consent label {
  font-size: 12.5px;
  color: var(--m);
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  margin: 0;
}
/* 
.contact-form button[type="submit"] {
  margin-top: 0px;
} */

/* Contact info side panel (4 small blocks) */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.contact-info .contact-block {
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 16px;
  padding: 22px;
  transition: transform .25s, box-shadow .25s, border-color .25s;
}

.contact-info .contact-block:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px -10px rgba(10, 37, 64, .1);
  border-color: transparent;
}

.contact-info .contact-block h3 {
  margin: 0 0 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--a);
  font-weight: 800;
}

.contact-info .contact-block h3 {
  margin: 0 0 10px;
  font-size: 16px !important;
  color: var(--p);
  font-weight: 800;
}

.contact-info .contact-block p {
  margin: 0 0 4px;
  color: var(--m);
  font-size: 13.5px;
  line-height: 1.6;
}

.contact-info .contact-block a {
  color: var(--p);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1.5px dashed transparent;
  transition: border-color .2s, color .2s;
}

.contact-info .contact-block a:hover {
  color: var(--a);
  border-bottom-color: var(--a);
}

@media(max-width:980px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }
  /* the info panel took its own 20px inset only because the section had no gutter
     on small screens; the wrapper now carries it, as in the reference */
}

@media(max-width:600px) {
  /* the card keeps its 36px inset down to 600px, as in the reference */
  .contact-layout>.contact-form {
    padding: 24px;
  }
  .contact-form .field-row {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   GLOBAL HEADING SIZE REDUCTION — applied site-wide
   Reduces hero H1, section H2, and card H3 sizes uniformly across all pages.
   ========================================================================== */

/* Hero H1s — across homepage v2, port-hero, service-hero, page-hero */
.hero-left h1,
.port-hero h1,
.port-hero-inner h1,
.service-hero-left h1,
.page-hero-inner h1,
.cs-hero-grid h1,
.post-hero h1 {
  font-size: clamp(22px, 2.8vw, 36px) !important;
  line-height: 1.15 !important;
  letter-spacing: -.4px !important;
}

/* Section H2s — applied broadly, including modern about/portfolio/case-studies/blog/contact */
section h2,
.section-head-center h2,
.blog-head h2,
.slider-head h2,
.about-story-text h2,
.mv-card h2,
.blog-feat h2,
.contact-form>h2,
.cs-narrative h2,
.fc h2,
.howto-head h2,
.feat-card h2,
.feat-card.big h2,
.cta-strip h2,
.bento .item h2 {
  font-size: clamp(18px, 2.2vw, 26px) !important;
  line-height: 1.22 !important;
  letter-spacing: -.3px !important;
}

/* Smaller H4s used inside contact cards & misc */
.contact-info .contact-block h3,
.cs-meta-item h4,
.member h3 {
  font-size: 14px !important;
}

/* Featured/large H2s inside specific cards still appear bigger than card H3s but smaller than before */
.cs-show-card h3,
.feat-card.big h2 {
  font-size: 17px !important;
}

/* Lede paragraphs — also slightly tightened so they balance smaller headings */
.port-hero .lede,
.hero-left .lede,
.section-head-center .lede,
.page-hero-inner .lede,
.cs-hero-grid .lede {
  font-size: clamp(13px, 1.3vw, 15px) !important;
  line-height: 1.6 !important;
}

/* Page-hero H1 was conflicting with new sizes — explicit */
.page-hero h1 {
  font-size: clamp(22px, 2.8vw, 36px) !important;
  line-height: 1.15 !important;
}

/* ==========================================================================
   service-page-specifics
   Three blocks that carry the per-service content on the 15 service pages.
   Deliberately three different shapes so the page does not read as another
   run of identical card grids.
   ========================================================================== */

/* --- Stepped flow: how an engagement runs (a real sequence, so it is numbered) --- */
.svc-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 40px;
  border-top: 1px solid var(--br);
}

.svc-flow .step {
  position: relative;
  padding: 28px 28px 30px 0;
}

.svc-flow .step+.step {
  padding-left: 28px;
  border-left: 1px solid var(--br);
}

.svc-flow .step::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 38px;
  height: 2px;
  background: var(--a);
}

.svc-flow .step+.step::before {
  left: -1px;
}

.svc-flow .s-n {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--a);
  margin-bottom: 12px;
  font-feature-settings: "tnum";
}

.svc-flow h3 {
  font-size: 17px;
  margin: 0 0 8px;
  letter-spacing: -.015em;
}

.svc-flow p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--m);
}

@media(max-width:900px) {
  .svc-flow {
    grid-template-columns: 1fr;
    border-top: 0;
  }

  .svc-flow .step {
    padding: 22px 0 22px 22px;
    border-left: 1px solid var(--br);
  }

  .svc-flow .step+.step {
    padding-left: 22px;
  }

  .svc-flow .step::before {
    top: 24px;
    left: -1px;
    width: 2px;
    height: 18px;
  }

  .svc-flow .step+.step::before {
    left: -1px;
  }
}

/* --- Scope: two plain lists, no cards --- */
.svc-scope {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 56px;
  margin-top: 36px;
}

.svc-scope h3 {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--br);
}

.svc-scope ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.svc-scope li {
  position: relative;
  padding: 0 0 14px 30px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--p);
}

.svc-scope li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: 800;
}

.svc-scope .in li::before {
  content: "\2713";
  color: #2f8f4e;
}

.svc-scope .out li {
  color: var(--m);
}

.svc-scope .out li::before {
  content: "\2013";
  color: var(--mm);
}

.svc-scope .note {
  margin: 18px 0 0;
  font-size: 13.5px;
  color: var(--m);
  line-height: 1.6;
}

@media(max-width:820px) {
  .svc-scope {
    grid-template-columns: 1fr;
    gap: 36px;
  }
}

/* --- Paths: approach, when it fits, and the catch --- */
.svc-paths {
  margin-top: 36px;
  border-top: 1px solid var(--br);
}

.svc-path {
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 1.35fr 1.35fr;
  gap: 32px;
  padding: 26px 0;
  border-bottom: 1px solid var(--br);
  align-items: start;
}

.svc-path h3 {
  font-size: 17px;
  margin: 0;
  letter-spacing: -.015em;
}

.svc-path .lbl {
  display: block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--mm);
  margin-bottom: 7px;
}

.svc-path p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--m);
}

.svc-path .catch p {
  color: var(--p);
}

@media(max-width:900px) {
  .svc-path {
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 24px 0;
  }

  .svc-path h3 {
    margin-bottom: 2px;
  }
}

/* ==========================================================================
   mobile-header-and-drawer
   Below 900px the desktop nav is hidden, so the header becomes a three-slot
   grid: menu button left, logo centred, search right. The menu button opens
   a drawer built from the same .main-nav markup (assets/js/mobile-nav.js).
   ========================================================================== */
@media(max-width:900px) {
  .header-inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    height: 64px;
  }

  /* the <nav> wrapper still takes a grid cell even with .main-nav hidden,
     which pushed the search button onto a second row */
  .header-inner>nav {
    display: none;
  }

  .mobile-menu-btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    grid-column: 1;
    justify-self: start;
  }

  .brand {
    grid-column: 2;
    justify-self: center;
    gap: 9px;
  }

  .brand-text small {
    display: none;
  }

  .header-cta {
    grid-column: 3;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 0;
  }

  .header-cta .btn {
    display: none !important;
  }

  .header-icon-btn {
    width: 44px;
    height: 44px;
  }
}

@media(max-width:380px) {
  .brand-text strong {
    font-size: 16px;
  }

  .brand-logo {
    width: 30px;
    height: 30px;
    font-size: 15px;
  }
}

/* Drawer ------------------------------------------------------------------ */
html.mnav-locked {
  overflow: hidden;
}

.mnav {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.mnav[hidden] {
  display: none;
}

.mnav-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 24, 56, .45);
  opacity: 0;
  transition: opacity .26s cubic-bezier(.4, 0, .2, 1);
}

.mnav-panel {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(86vw, 360px);
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 70px -12px rgba(10, 24, 56, .35);
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mnav.is-open .mnav-backdrop {
  opacity: 1;
}

.mnav.is-open .mnav-panel {
  transform: translateX(0);
}

.mnav-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--br);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}

.mnav-head .brand-text small {
  display: block;
}

.mnav-close {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(10, 37, 64, .04);
  border: 1px solid rgba(10, 37, 64, .06);
  border-radius: 50%;
  color: var(--p);
  cursor: pointer;
  padding: 0;
}

.mnav-close svg {
  width: 18px;
  height: 18px;
}

.mnav-close:hover {
  background: rgba(240, 97, 74, .1);
  color: var(--a);
}

.mnav-list {
  list-style: none;
  margin: 0;
  padding: 8px 0 4px;
  flex: 1;
}

.mnav-list>li>a,
.mnav-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 600;
  color: var(--p);
  text-decoration: none;
  background: transparent;
  border: 0;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  letter-spacing: -.01em;
}

.mnav-list>li>a[aria-current] {
  color: var(--a);
}

.mnav-list>li>a:hover,
.mnav-toggle:hover {
  background: rgba(10, 37, 64, .035);
}

.mnav-toggle svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--mm);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}

.mnav-toggle[aria-expanded="true"] svg {
  transform: rotate(180deg);
  color: var(--a);
}

.mnav-sub {
  padding: 2px 0 10px;
  background: var(--bga);
  border-top: 1px solid var(--br-2);
  border-bottom: 1px solid var(--br-2);
}

.mnav-sub[hidden] {
  display: none;
}

.mnav-subhead {
  margin: 14px 20px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm);
}

.mnav-sub ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mnav-sub a {
  display: block;
  padding: 10px 20px 10px 20px;
  font-size: 14.5px;
  color: var(--m);
  text-decoration: none;
  font-weight: 500;
}

.mnav-sub a.mnav-parent {
  color: var(--p);
  font-weight: 700;
  padding-top: 12px;
}

.mnav-sub a:not(.mnav-parent) {
  padding-left: 32px;
}

.mnav-sub a[aria-current] {
  color: var(--a);
  font-weight: 700;
}

.mnav-sub a:hover {
  color: var(--p);
  background: rgba(10, 37, 64, .03);
}

.mnav-foot {
  padding: 16px 20px 24px;
  border-top: 1px solid var(--br);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mnav-cta {
  width: 100%;
  text-align: center;
  justify-content: center;
}

.mnav-phone {
  font-size: 14px;
  font-weight: 700;
  color: var(--p);
  text-decoration: none;
  text-align: center;
}

.mnav-phone:hover {
  color: var(--a);
}

@media (prefers-reduced-motion: reduce) {

  .mnav-backdrop,
  .mnav-panel,
  .mnav-toggle svg {
    transition: none;
  }

  .mnav-panel {
    transform: none;
  }

  .mnav:not(.is-open) .mnav-panel {
    display: none;
  }
}

/* ==========================================================================
   client-store-screenshots
   Real captures of the live stores, replacing the ghost-initial placeholders.
   The browser frame makes it unambiguous that this is the shipped storefront.
   ========================================================================== */
.cs-shot {
  position: relative;
  display: block;
  aspect-ratio: auto;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  align-items: stretch;
  justify-content: flex-start;
  color: inherit;
  font-size: inherit;
  box-shadow: 0 30px 70px -22px rgba(10, 24, 56, .55), 0 0 0 1px rgba(255, 255, 255, .14);
}

.cs-shot .chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: #f1f3f7;
  border-bottom: 1px solid #e2e7ef;
}

.cs-shot .dots {
  display: flex;
  gap: 5px;
  flex-shrink: 0;
}

.cs-shot .dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #d3d9e3;
}

.cs-shot .url {
  flex: 1;
  min-width: 0;
  background: #fff;
  border-radius: 5px;
  padding: 3px 10px;
  font-size: 11px;
  color: #6b7889;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

.cs-shot img {
  display: block;
  width: 100%;
  height: auto;
}

@media(max-width:900px) {
  .cs-shot {
    margin-top: 8px;
  }
}

/* Portfolio cards: the capture becomes the card surface, with a scrim so the
   white copy keeps its contrast over whatever the store's palette is. */
.ps-card .ps-shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}

.ps-card:hover .ps-shot {
  transform: scale(1.06);
}

.ps-card .scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 24, 56, .22) 0%, rgba(10, 24, 56, .48) 34%, rgba(10, 24, 56, .78) 58%, rgba(10, 24, 56, .94) 100%);
}

/* ==========================================================================
   form-states
   Inline validation, pending and result states (assets/js/forms.js).
   ========================================================================== */
.field-error {
  margin: 6px 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: #b3261e;
  font-weight: 600;
}

input.has-error,
select.has-error,
textarea.has-error {
  border-color: #b3261e !important;
  background: #fff6f5;
}

input.has-error:focus,
select.has-error:focus,
textarea.has-error:focus {
  box-shadow: 0 0 0 3px rgba(179, 38, 30, .12) !important;
}

button.is-busy {
  opacity: .75;
  cursor: progress;
}

.form-status {
  margin: 18px 0 0;
  padding: 16px 18px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.6;
  border: 1px solid transparent;
}

.form-status strong {
  display: block;
  font-size: 15px;
  margin-bottom: 4px;
}

.form-status p {
  margin: 0;
}

.form-status.is-ok {
  background: #eef8f1;
  border-color: #c6e6d1;
  color: #14532d;
}

.form-status.is-err {
  background: #fdf1f0;
  border-color: #f3ccc8;
  color: #7f1d1d;
}

.form-status.is-warn {
  background: #fff7ed;
  border-color: #fed7aa;
  color: #7c2d12;
}

.form-status a {
  color: inherit;
  font-weight: 700;
}

.fs-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.fs-actions .btn {
  padding: 9px 16px !important;
  font-size: 13.5px !important;
}

.fs-tel {
  font-weight: 700;
  font-size: 13.5px;
  text-decoration: none;
}

/* on dark hero panels the result block needs its own surface */
.service-hero .form-status,
.hero-anim .form-status,
.cro-offer .form-status {
  background: rgba(255, 255, 255, .96);
}

/* hero lead form used placeholders as labels; these are the real ones */
.lf-lab {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--m);
  margin: 0 0 5px;
  letter-spacing: -.005em;
}

.cro-offer .lf-lab,
.service-hero .lf-lab {
  color: var(--m);
}

.cro-offer form input,
.cro-offer form select {
  margin-bottom: 12px;
}

/* ==========================================================================
   accessibility
   ========================================================================== */

/* Visible focus for keyboard users. The stylesheet had seven `outline:none`
   declarations against a single :focus-visible rule, so tabbing through the
   nav, carousels, FAQ and filters showed nothing at all. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--a, #f0614a);
  outline-offset: 2px;
  border-radius: 4px;
}

.site-header a:focus-visible,
.mnav a:focus-visible,
.mnav button:focus-visible {
  outline-offset: 3px;
}

/* on dark panels the orange ring needs a light halo to stay visible */
.hero-anim :focus-visible,
.site-footer :focus-visible,
.prefooter-cta :focus-visible,
.section-dark :focus-visible,
.cs-hero :focus-visible,
.page-hero :focus-visible {
  outline-color: #ffb694;
  box-shadow: 0 0 0 6px rgba(10, 24, 56, .45);
}


/* Screen-reader-only text and the skip link */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 2000;
  background: var(--p, #0a1838);
  color: #fff;
  padding: 12px 20px;
  border-radius: 0 0 10px 10px;
  font-weight: 700;
  font-size: 14px;
  text-decoration: none;
  transition: top .18s cubic-bezier(.4, 0, .2, 1);
}

.skip-link:focus {
  top: 0;
}

/* Comparison table: green and red alone carried the meaning. These marks give
   the same information without relying on colour perception. */
.compare .check::before {
  content: "\2713\00a0";
  font-weight: 900;
}

.compare .x::before {
  content: "\2715\00a0";
  font-weight: 900;
}

.compare .check.tlx::before {
  content: none;
}

/* cell already reads "✓" */

/* Motion: seven animations ran infinitely, including full-screen background
   drift. Under `reduce` everything settles rather than loops. */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .hero-bg::before,
  .hero-bg::after,
  .hero-mesh,
  .port-hero-bg::before,
  .port-hero-bg::after {
    animation: none !important;
    transform: none !important;
  }

  .brand-track,
  .row-scroll,
  .logo-row {
    animation: none !important;
    transform: none !important;
  }

  .ann-pulse {
    animation: none !important;
  }

  .hero-particles {
    display: none;
  }
}

/* The desktop header had exactly 0px of slack at its 1200px container, so any
   text-size change made the nav, phone and CTA wrap. Tighter gap plus explicit
   nowrap guards give it room and stop it collapsing again. */
@media(min-width:901px) {
  .header-inner {
    gap: 20px;
  }

  /* top-level items only: a bare .main-nav a also hit every link inside the
     mega panel, and the inherited nowrap made its copy run across columns */
  .main-nav>li>a,
  .main-nav>li>span,
  .mm-trigger {
    white-space: nowrap;
  }

  .main-nav {
    gap: 0;
  }

  .header-cta .btn,
  .brand-text small,
  .brand-text strong {
    white-space: nowrap;
  }

  .header-cta {
    flex-shrink: 0;
  }

  .brand {
    flex-shrink: 0;
  }
}

@media(min-width:901px) and (max-width:1150px) {

  .main-nav>li>a,
  .main-nav>li>span,
  .mm-trigger {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 13.5px;
  }

}

/* Modal triggers were <a href="#">, which jump to the top if JS fails and are
   announced as links to something they never navigate to. They are <button>
   now; these rules keep them visually identical to the anchors they replaced. */
button.btn,
button.ann-link,
button.header-icon-btn {
  font-family: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  appearance: none;
}

button.btn {
  border: none;
  text-align: center;
}

button.ann-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  cursor: pointer;
  color: var(--a, #f0614a);
  font-weight: 700;
  border-bottom: 1px dashed rgba(240, 97, 74, .4);
}

button.ann-link:hover {
  border-color: var(--a, #f0614a);
}

/* ==========================================================================
   hero-home-v3
   Homepage top banner: copy left, layered product screens right.
   Scoped to .hero-home so the 15 .hero-anim.service-hero pages are unaffected.
   ========================================================================== */
.hero-home {
  min-height: auto;
  display: block;
  padding: 0;
}

/* the particle field runs under the copy; this scrim keeps the headline and
   lede legible over it without dimming the product screens on the right */
.hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  /* the scrim has to sit above the particle canvas and the glow layers (both
     z-index 1) or the constellation and the orange glow wash over the copy */
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 17, 40, .86) 0%, rgba(7, 17, 40, .72) 34%, rgba(7, 17, 40, .28) 58%, transparent 76%);
}

.hh-inner {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 24px 0px;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  gap: 44px;
  align-items: center;
  text-align: left;
}

/* --- copy --- */
.hh-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.hh-eyebrow {
  margin: 0 0 18px;
  font-size: 12.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--a);
}

.hh-eyebrow span {
  margin: 0 6px;
  color: rgba(240, 97, 74, .55);
}

.hh-copy h1 {
  margin: 0 0 22px;
  color: #fff;
  font-size: clamp(29px, 3.3vw, 44px);
  font-weight: 800;
  line-height: 1.07;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

.hh-copy h1 em {
  font-style: normal;
  color: var(--a);
}

.hh-lede {
  margin: 0 0 30px;
  color: rgba(255, 255, 255, .82);
  font-size: clamp(15.5px, 1.4vw, 18px);
  line-height: 1.6;
  max-width: 52ch;
  text-wrap: pretty;
}

.hh-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 0 0 30px;
}

.hh-cta .btn {
  padding: 9px 18px;
  font-size: 13px;
  border-radius: 7px;
}

.hh-trust {
  margin: 0 0 16px;
  color: rgba(255, 255, 255, .66);
  font-size: 14px;
}

/* --- capability chips --- */
.hh-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hh-chips li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: -.01em;
}

.hh-chips svg {
  width: 16px;
  height: 16px;
  color: var(--a);
  flex-shrink: 0;
}

/* --- product screens --- */
.hh-visual {
  min-width: 0;
}

.hh-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.hh-art text {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

@media(max-width:1080px) {
  .hh-inner {
    grid-template-columns: 1fr;
    gap: 44px;
    padding: 0px 24px 0px;
  }

  .hh-copy h1 {
    max-width: 20ch;
  }

  .hh-lede {
    max-width: 60ch;
  }

  .hh-visual {
    max-width: 640px;
  }
}

@media(max-width:600px) {
  .hh-inner {
    gap: 36px;
  }

  .hh-eyebrow {
    font-size: 11.5px;
    letter-spacing: .12em;
  }

  .hh-cta {
    gap: 10px;
  }

  .hh-cta .btn {
    flex: 1 1 auto;
    justify-content: center;
  }

  .hh-chips li {
    padding: 8px 13px;
    font-size: 12.5px;
  }
}

/* === WORK MEGA MENU ===
   Portfolio / case studies / featured project. Shares .mega-wrap, .mega-panel,
   .mega-col, .mega-eyebrow, .mega-head and .mega-strip with the services menu;
   only the pieces below are specific to it. */
.mega-inner-work {
  grid-template-columns: 284px minmax(0, 1fr);
}

.mw-desc {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--m);
}

/* --- portfolio rows --- */
/* Work + Company link lists: the base .mega-links treatment - orange chevron
   on the left, no dividers, label warming to #da3116 on hover and current -
   at the slightly larger row size these two menus use. */
.mw-chevs {
  margin: 0;
}

.mw-chevs a {
  gap: 11px;
  padding: 7px 0;
  font-size: 13.5px;
  font-weight: 600;
}

.mw-chevs a::before {
  width: 6px;
  height: 6px;
  border-width: 2px;
}

.mw-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--a);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.mw-case:hover .mw-chev {
  transform: translateX(3px);
}

/* --- case study rows --- */
.mw-cases {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mw-case {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 -8px;
  padding: 8px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .18s;
}

.mw-case:hover {
  background: var(--bga);
}

.mw-case:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 1px;
}

.mw-case img {
  width: 64px;
  height: 44px;
  flex-shrink: 0;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid var(--br-2);
  background: var(--bga);
}

.mw-case-text {
  min-width: 0;
  flex: 1;
}

.mw-case-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--p);
}

.mw-case-text .desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--m);
}

/* --- column footer button --- */
.mw-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: auto;
  padding: 12px 14px;
  border: 1px solid var(--br);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color .18s, background .18s;
}

.mw-btn span {
  flex: 1;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--p);
}

.mw-btn>svg:first-child {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--a);
}

.mw-arrow {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--a);
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}

.mw-btn:hover {
  background: var(--bga);
  border-color: rgba(240, 97, 74, .35);
}

.mw-btn:hover .mw-arrow {
  transform: translateX(3px);
}

.mw-btn:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}


/* --- featured project --- */

.mw-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border: 1px solid #e2eaf4;
  border-radius: 14px;
  background: linear-gradient(135deg, #f8fbfd 0%, #eef4fa 100%);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}

.mw-feature:hover {
  border-color: rgba(240, 97, 74, .3);
  box-shadow: var(--shadow);
}

.mw-feature:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.mw-feature-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  padding: 22px 24px 20px;
}

.mw-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}

.mw-tags span {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(58, 95, 168, .10);
  color: #245a94;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
}

.mw-feature h4, .mw-feature .mega-sub {
  margin: 0 0 6px;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--p);
}

.mw-sub {
  display: block;
  margin-bottom: 10px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--p);
}

.mw-copy {
  display: block;
  margin-bottom: 18px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--m);
}

.mw-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding: 11px 18px;
  border-radius: 9px;
  background: var(--p);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  transition: background .2s;
}

.mw-cta svg {
  width: 14px;
  height: 14px;
  transition: transform .2s;
}

.mw-feature:hover .mw-cta {
  background: var(--p-2);
}

.mw-feature:hover .mw-cta svg {
  transform: translateX(3px);
}

.mw-shot {
  flex: 1;
  min-height: 120px;
  margin-top: auto;
  overflow: hidden;
  border-top: 1px solid #e2eaf4;
}

.mw-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

/* --- results strip --- */
.mw-strip .mega-strip-inner {
  gap: 24px;
}

.mw-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  margin: 0;
}

.mw-stats>div {
  padding: 0 22px;
  border-left: 1px solid var(--br);
  text-align: center;
}

.mw-stats>div:first-child {
  border-left: 0;
}

.mw-stats dt {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
  font-feature-settings: "tnum";
}

.mw-stats dd {
  margin: 2px 0 0;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--m);
}

@media(max-width:1100px) {
  .mega-inner-work {
    grid-template-columns: 284px minmax(0, 1fr);
  }

  .mw-feat-col {
    grid-column: 1/-1;
    padding: 20px 0 0;
    border-left: 0;
    border-top: 1px solid var(--br-2);
  }

  .mw-stats>div {
    padding: 0 16px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .mw-chev,
  .mw-arrow,
  .mw-cta,
  .mw-cta svg,
  .mw-feature {
    transition: none;
  }

  .mw-case:hover .mw-chev,
  .mw-btn:hover .mw-arrow,
  .mw-feature:hover .mw-cta svg {
    transform: none;
  }
}

/* === PRODUCTS MEGA MENU ===
   Product list / featured products / why. Shares the panel, column, eyebrow,
   head, row and button primitives with the services and work menus. */
.mega-inner-products {
  grid-template-columns: 280px minmax(0, 1fr);
}

/* --- category rows with icons --- */
/* --- featured product cards --- */
.mp-cat {
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
}

.mp-cat-blue {
  background: rgba(58, 95, 168, .10);
  color: #245a94;
}

.mp-cat-navy {
  background: rgba(10, 24, 56, .07);
  color: var(--p);
}

/* --- idea note --- */
.mp-note {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  padding: 14px 16px;
  border: 1px solid var(--br-2);
  border-radius: 12px;
  background: var(--bga);
  text-decoration: none;
  transition: border-color .18s;
}

.mp-note:hover {
  border-color: rgba(240, 97, 74, .3);
}

.mp-note:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.mp-note .ms-text {
  flex: 1;
  min-width: 0;
}

/* .ms-icon / .ms-text are styled under .mega-strip; this note reuses them outside it */
.mp-note .ms-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(240, 97, 74, .10);
  color: var(--a);
}

.mp-note .ms-icon svg {
  width: 19px;
  height: 19px;
}

.mp-note .ms-text strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--p);
}

.mp-note .ms-text>span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--m);
}

.mp-note-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex-shrink: 0;
  font-size: 12.5px;
  font-weight: 700;
  color: #da3116;
}

/* --- why list --- */
.mp-why {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.mp-check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 1px;
  color: #3a5fa8;
}

.mp-why strong {
  display: block;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--p);
}

.mp-why li>span>span {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--m);
}

/* --- custom solution card --- */
/* --- strip button --- */

@media(max-width:1100px) {
  .mega-inner-products {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr);
  }

  .mp-why {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px 28px;
  }

  .mp-why li {
    flex: 1 1 240px;
  }
}

/* A malformed @media(prefers-reduced-motion:reduce) block sat here: a selector
   list ending in a trailing comma, with no declaration block at all, and
   ".mp-card: hover" (a space after the colon is not a valid pseudo-class). It
   applied nothing in any browser — Chrome discards the whole rule, and .mp-card
   appeared nowhere else in the theme, so no styling is lost by removing it.
   Left as a comment rather than silently deleted because the intent was clearly
   to honour reduced-motion for those elements; if that is still wanted it needs
   writing properly, which would be a behaviour change rather than a cleanup. */

/* === COMPANY MEGA MENU ===
   Two link columns plus a dark featured card, on the shared panel. */
.mega-inner-company {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr);
}

.mega-inner-company .mega-col {
  padding: 0 20px;
}

.mega-inner-company .mega-col:first-child {
  padding-left: 0;
}

.mega-inner-company .mw-desc {
  margin-bottom: 16px;
}

/* featured dark card */
.mc-feat-col {
  padding: 0 0 0 20px;
}

.mc-feature {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  border-radius: 14px;
  background: var(--grad);
  text-decoration: none;
  transition: box-shadow .2s;
}

.mc-feature:hover {
  box-shadow: var(--shadow-lg);
}

.mc-feature:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.mc-feature-body {
  padding: 22px 22px 20px;
}

.mc-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #ffb98f;
}

.mc-feature h4, .mc-feature .mega-sub {
  margin: 0 0 10px;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.22;
  letter-spacing: -.025em;
  color: #fff;
  text-wrap: balance;
}

.mc-copy {
  display: block;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.mc-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.mc-stats>span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 14px 4px;
  text-align: center;
}

.mc-stats>span+span {
  border-left: 1px solid rgba(255, 255, 255, .14);
}

.mc-stats svg {
  width: 15px;
  height: 15px;
  color: var(--a);
  margin-bottom: 2px;
}

.mc-stats strong {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  font-feature-settings: "tnum";
}

.mc-stats>span>span {
  font-size: 9.5px;
  font-weight: 600;
  line-height: 1.25;
  color: rgba(255, 255, 255, .62);
}

/* strip: the shared .mega-strip + .ms-btn treatment, no menu-specific rules */

/* === INSIGHTS MEGA MENU ===
   A header row over three equal post cards - one card per article that exists. */
.mega-inner-insights {
  display: block;
}

/* the wrapper exists so mobile-nav.js can find a .mega-col to walk; it must not
   pick up the column padding or the divider rule */
.mi-col {
  display: block;
  padding: 0;
  border: 0;
}

.mi-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 28px;
  padding-bottom: 18px;
  margin-bottom: 22px;
  border-bottom: 1px solid var(--br-2);
}

.mi-top-copy {
  min-width: 0;
}

.mi-top-copy .mega-head {
  margin-bottom: 0;
}

.mi-top-btn {
  flex-shrink: 0;
  margin-top: 0;
}

.mi-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mi-cards>li {
  display: flex;
}

.mi-card {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 20px;
  border: 1px solid var(--br-2);
  border-radius: 14px;
  background: linear-gradient(180deg, #fff 0%, var(--bga) 100%);
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.mi-card:hover {
  border-color: rgba(240, 97, 74, .3);
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.mi-card:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.mi-cat {
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(58, 95, 168, .10);
  color: #245a94;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.mi-card h4, .mi-card .mega-sub {
  margin: 0 0 9px;
  font-size: 15.5px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: var(--p);
  text-wrap: balance;
}

.mi-excerpt {
  display: block;
  margin-bottom: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--m);
}

.mi-card .mi-excerpt {
  flex: 1;
}

.mi-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--br-2);
}

.mi-meta {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--mm);
  font-feature-settings: "tnum";
}

.mi-read {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: #da3116;
}

.mi-card:hover .mw-arrow {
  transform: translateX(3px);
}

/* newsletter strip */
.mi-strip .mega-strip-inner {
  gap: 24px;
}

.mi-form {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
  flex-shrink: 0;
}

.mi-form input::placeholder {
  color: var(--mm);
}

.mi-form input:focus {
  outline: none;
  border-color: var(--a);
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .12);
}

.mi-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9px;
  background: var(--grad-btn);
  color: #fff;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.mi-form button svg {
  width: 17px;
  height: 17px;
}

.mi-form button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(240, 97, 74, .32);
}

.mi-form button:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.mi-form .nl-msg {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #1a7f4f;
}

.mi-form.is-sent .nl-msg {
  display: block;
}

@media(max-width:1200px) {
  .mega-inner-company {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mega-inner-company .mega-col {
    padding: 0 14px;
  }

  .mega-inner-company .mega-col:first-child {
    padding-left: 0;
  }

  .mc-feat-col {
    grid-column: 1/-1;
    padding: 20px 0 0;
    margin-top: 20px;
    border-top: 1px solid var(--br-2);
    border-left: 0;
  }
}

@media(max-width:1100px) {
  .mi-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mi-cards>li:last-child {
    grid-column: 1/-1;
  }

  .mi-form input {
    width: 200px;
  }
}

@media(max-width:820px) {
  .mi-top {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .mi-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .mi-cards>li:last-child {
    grid-column: auto;
  }
}

@media(prefers-reduced-motion:reduce) {

  .mc-feature,
  .mi-card,
  .mi-form button {
    transition: none;
  }

  .mi-card:hover {
    transform: none;
  }

  .mi-card:hover .mw-arrow {
    transform: none;
  }

  .mi-form button:hover {
    transform: none;
  }
}

/* phone moved out of the header into the announce bar, before the language switch */
.ann-phone {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #fff;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -.01em;
  white-space: nowrap;
}

.ann-phone:hover {
  /* the brand orange, not the pale peach this used to be. #fd9786 would score
     better on the bar (5.79:1 vs 3.79:1) but reads salmon, which is the same
     complaint the old value had. */
  color: var(--a);
}

@media (prefers-reduced-motion: reduce) {
  .ann-phone {
    transition: none;
  }
}

/* ==========================================================================
   service-hero-form
   Service page banner: copy and contact routes left, enquiry form right.
   ========================================================================== */
.service-hero .sh-routes {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
}

.sh-routes li {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.sh-route-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
}

.sh-route-icon svg {
  width: 18px;
  height: 18px;
}

.sh-route-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sh-route-text>span {
  font-size: 12px;
  font-weight: 700;
  color: rgba(255, 255, 255, .66);
}

.sh-route-text a {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  letter-spacing: -.01em;
}

.sh-route-text a:hover {
  color: var(--a-2);
}

.sh-route-text a:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- form card --- */
.sh-form-card {
  background: #fff;
  border-radius: var(--r-lg);
  padding: 28px;
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(255, 255, 255, .1);
}

.sh-form-card h2 {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.25;
  color: var(--p);
}

.sh-form-card form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- service chips --- */
.sh-chips {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 4px;
  padding: 0;
  border: 0;
}

.sh-chips legend {
  padding: 0;
}

.sh-chip {
  display: block;
  cursor: pointer;
}

.sh-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.sh-chip-face {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border: 1.5px solid var(--br);
  border-radius: 10px;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--p);
  transition: border-color .18s, background .18s, color .18s;
}

.sh-chip-face svg {
  width: 17px;
  height: 17px;
  flex-shrink: 0;
  color: var(--m);
  transition: color .18s;
}

.sh-chip:hover .sh-chip-face {
  border-color: rgba(240, 97, 74, .4);
}

.sh-chip input:checked+.sh-chip-face {
  border-color: var(--a);
  background: rgba(240, 97, 74, .06);
  color: #da3116;
}

.sh-chip input:checked+.sh-chip-face svg {
  color: var(--a);
}

.sh-chip input:focus-visible+.sh-chip-face {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

/* --- fields --- */
.sh-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.sh-field {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.sh-lab {
  margin: 0 0 5px;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--m);
}

.sh-form-card input,
.sh-form-card select,
.sh-form-card textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1.5px solid var(--br);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--p);
}

.sh-form-card textarea {
  resize: vertical;
  min-height: 108px;
  line-height: 1.55;
}

/* the muted placeholder default sits under 4.5:1; this clears it */
.sh-form-card ::placeholder {
  color: #6b7789;
  opacity: 1;
}

.sh-form-card input:focus,
.sh-form-card select:focus,
.sh-form-card textarea:focus {
  outline: none;
  border-color: var(--a);
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .12);
}

.sh-field-area {
  position: relative;
}

.sh-count {
  position: absolute;
  right: 12px;
  bottom: 10px;
  font-size: 11px;
  color: var(--mm);
  font-feature-settings: "tnum";
  pointer-events: none;
}

.sh-submit {
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: 4px;
  padding: 15px 20px !important;
  font-size: 15px !important;
}

.sh-submit svg {
  width: 16px;
  height: 16px;
  transition: transform .2s;
}

.sh-submit:hover svg {
  transform: translateX(3px);
}

.sh-privacy {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--m);
}

.sh-privacy svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--mm);
}

.sh-form-success {
  text-align: center;
  padding: 22px 4px;
}

.sh-form-success strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  color: var(--p);
}

.sh-form-success p {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--m);
}

@media (max-width: 900px) {
  .sh-form-card {
    padding: 22px;
  }

  .sh-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-hero .sh-routes {
    gap: 14px 22px;
  }
}

@media (max-width: 560px) {
  .sh-row {
    grid-template-columns: 1fr;
  }

  .sh-chips {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .sh-chip-face {
    padding: 10px;
    font-size: 12px;
  }

  .service-hero .sh-routes {
    flex-direction: column;
    gap: 12px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .sh-chip-face,
  .sh-chip-face svg,
  .sh-submit svg {
    transition: none;
  }

  .sh-submit:hover svg {
    transform: none;
  }
}

/* ==========================================================================
   service-hero-fit
   Shopify Development banner: homepage background treatment, sized to sit
   inside one screen so the whole form is visible without scrolling.
   ========================================================================== */
.hero-anim.service-hero.hero-fit {
  /* --hero-chrome is measured at runtime (announce bar height varies with
     wrapping); the fallback covers the no-JS case */
  min-height: calc(100vh - var(--hero-chrome, 112px)) !important;
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
}

/* same scrim the homepage uses, so the copy reads over the particle field */
.service-hero.hero-fit::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(7, 17, 40, .86) 0%, rgba(7, 17, 40, .72) 34%,
      rgba(7, 17, 40, .3) 60%, rgba(7, 17, 40, .12) 100%);
}

.hero-fit .service-hero-inner {
  width: 100%;
  padding: 32px 24px !important;
  gap: 40px !important;
  align-items: center;
}

/* left column, tuned to the homepage scale */
.hero-fit .service-hero-left .eyebrow {
  background: none;
  border: 0;
  padding: 0;
  margin-bottom: 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--a);
}

.hero-fit .service-hero-left h1 {
  font-size: clamp(28px, 3.1vw, 42px) !important;
  line-height: 1.08 !important;
  letter-spacing: -.025em;
  margin: 0 0 14px !important;
  text-wrap: balance;
}

.hero-fit .service-hero-left .lede {
  font-size: clamp(15px, 1.35vw, 17px) !important;
  line-height: 1.55;
  margin: 0 0 20px !important;
  max-width: 52ch;
}

.hero-fit .sh-routes {
  margin: 18px 0 0;
  gap: 12px 26px;
}

.hero-fit .sh-route-icon {
  width: 38px;
  height: 38px;
}

.hero-fit .hero-proof {
  margin-top: 16px;
}

/* Shopify credentials */
.sh-badges {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sh-badges li {
  display: grid;
  align-items: center;
  gap: 8px;
  padding: 8px 13px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
}

.sh-badges svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: #95bf47;
}

.sh-badges li>span {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.sh-badges strong {
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -.01em;
}

.sh-badges li>span>span {
  font-size: 10.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  text-align: center;
}

/* form card, compacted to fit the viewport */
.hero-fit .sh-form-card {
  padding: 24px;
}

.hero-fit .sh-form-card h2 {
  font-size: 19px;
  margin-bottom: 14px;
}

.hero-fit .sh-form-card form {
  gap: 10px;
}

.hero-fit .sh-form-card input,
.hero-fit .sh-form-card select,
.hero-fit .sh-form-card textarea {
  padding: 11px 13px;
  font-size: 13.5px;
}

.hero-fit .sh-form-card textarea {
  min-height: 84px;
}

.hero-fit .sh-lab {
  margin-bottom: 4px;
  font-size: 11px;
}

.hero-fit .sh-submit {
  padding: 13px 20px !important;
  font-size: 14.5px !important;
}

.hero-fit .sh-privacy {
  font-size: 11px;
}

@media (max-width: 1100px) {
  .hero-anim.service-hero.hero-fit {
    min-height: auto !important;
  }

  .hero-fit .service-hero-inner {
    padding: 48px 24px !important;
  }

  .service-hero.hero-fit::after {
    background: linear-gradient(180deg, rgba(7, 17, 40, .8) 0%, rgba(7, 17, 40, .5) 100%);
  }
}

/* ==========================================================================
   shopify-page-sections
   Five sections carried over from the old shopify-development page. Each gets
   a different treatment so the page does not read as one repeated card grid.
   ========================================================================== */

/* --- where revenue leaks --- */
.leak-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 44px;
}

.leak-list li {
  display: flex;
  gap: 13px;
  min-width: 0;
}

.leak-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--a);
}

.leak-list li>span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.leak-list strong {
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--p);
}

.leak-list li>span>span {
  font-size: 14px;
  line-height: 1.6;
  color: var(--m);
}

/* --- results band --- */
.metric-band {
  background: var(--grad);
  color: #fff;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
}

.metric-grid>div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4px 20px;
  text-align: center;
}

.metric-grid>div+div {
  border-left: 1px solid rgba(255, 255, 255, .16);
}

.metric-grid strong {
  font-size: clamp(32px, 3.4vw, 44px);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1;
  font-feature-settings: "tnum";
}

.metric-grid span {
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
}

.metric-grid small {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .66);
  max-width: 22ch;
}

/* --- tech stack --- */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px 44px;
}

.stack-group h3 {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--mm);
}

.stack-group ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.stack-group li {
  padding: 8px 14px;
  border: 1px solid var(--br);
  border-radius: 8px;
  background: #fff;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p);
}

/* --- client voices (reuses .rs-card from the homepage slider) --- */
.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.voices-grid .rs-card {
  width: auto;
  min-width: 0;
}

/* --- why brands stay --- */
.why-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px 36px;
}

.why-list li {
  display: flex;
  gap: 12px;
  min-width: 0;
}

.why-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
  color: #3a5fa8;
}

.why-list li>span {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.why-list strong {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--p);
}

.why-list li>span>span {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--m);
}

@media (max-width: 900px) {

  .leak-list,
  .stack-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .why-list,
  .voices-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px 0;
  }

  .metric-grid>div:nth-child(odd) {
    border-left: 0;
  }
}

/* --- reviews slider: video and text cards share a row, so match their height
       and keep the caption pinned to the card floor --- */
.rs-video {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 340px;
}

.rs-video .thumb {
  flex-shrink: 0;
}

.rs-video .meta {
  margin-top: auto;
}

/* --- audit offer pill + subline in the service hero form --- */
.sh-pill {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 12px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(240, 97, 74, .10);
  border: 1px solid rgba(240, 97, 74, .2);
  color: #da3116;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.sh-form-card .sh-sub {
  margin: 0 0 16px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--m);
}

.hero-fit .sh-form-card h2 {
  margin-bottom: 8px;
}

.hero-fit .sh-form-card .sh-sub {
  margin-bottom: 14px;
  font-size: 12.5px;
}

/* the audit offer adds a pill, a sub-line and a store URL field, which pushed
   the card past the fold; tighten it back inside the single-screen banner */
.hero-fit .sh-form-card {
  padding: 20px 22px;
}

.hero-fit .sh-form-card h2 {
  font-size: 18px;
}

.hero-fit .sh-pill {
  margin-bottom: 10px;
  padding: 4px 11px;
  font-size: 10.5px;
}

.hero-fit .sh-form-card .sh-sub {
  margin-bottom: 12px;
  font-size: 12px;
  line-height: 1.5;
}

.hero-fit .sh-form-card form {
  gap: 8px;
}

.hero-fit .sh-form-card input,
.hero-fit .sh-form-card textarea {
  padding: 10px 12px;
  font-size: 13px;
}

.hero-fit .sh-form-card textarea {
  min-height: 62px;
}

.hero-fit .sh-submit {
  padding: 12px 18px !important;
  font-size: 14px !important;
}

.hero-fit .sh-privacy {
  font-size: 10.5px;
}

/* ==========================================================================
   services-mega-tabs
   The four pillars became a vertical tab rail with one panel each, so the
   panel is as tall as the tallest single pillar instead of all four at once.
   ========================================================================== */
.mega-inner-tabs {
  grid-template-columns: 264px minmax(0, 1fr);
  gap: 0;
}

/* --- rail --- */
.mt-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-right: 20px;
  border-right: 1px solid var(--br-2);
}

.mt-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid transparent;
  border-radius: 11px;
  background: transparent;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background .16s, border-color .16s;
}

.mt-tab:hover {
  background: var(--bga);
}

.mt-tab.is-active {
  background: rgba(240, 97, 74, .07);
  border-color: rgba(240, 97, 74, .22);
}

.mt-tab:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.mt-tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(10, 24, 56, .06);
  color: var(--m);
  transition: background .16s, color .16s;
}

.mt-tab-icon svg {
  width: 17px;
  height: 17px;
}

.mt-tab.is-active .mt-tab-icon {
  background: rgba(240, 97, 74, .12);
  color: var(--a);
}

.mt-tab-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.mt-tab-text strong {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--p);
}

.mt-tab-text>span {
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--m);
}

.mt-tab.is-active .mt-tab-text strong {
  color: #da3116;
}

.mt-tab-chev {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--mm);
  opacity: 0;
  transition: opacity .16s, transform .16s;
}

.mt-tab.is-active .mt-tab-chev {
  opacity: 1;
  color: var(--a);
  transform: translateX(2px);
}

/* --- panels --- */
.mt-panels {
  position: relative;
  padding-left: 28px;
  min-width: 0;
}

.mt-panel {
  padding: 0;
  border-left: 0;
}

.mt-panel[hidden] {
  display: none;
}

.mt-panel-label {
  display: none;
}

/* the tab already names the pillar */
.mt-panel .mega-head {
  max-width: 34ch;
}

.mt-groups {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px 36px;
  align-items: start;
}

.mt-groups .mega-group+.mega-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.mt-panel .mega-item {
  margin: 0 -8px;
}

@media (prefers-reduced-motion: reduce) {

  .mt-tab,
  .mt-tab-icon,
  .mt-tab-chev {
    transition: none;
  }

  .mt-tab.is-active .mt-tab-chev {
    transform: none;
  }
}

@media (max-width: 1100px) {
  .mega-inner-tabs {
    grid-template-columns: 220px minmax(0, 1fr);
  }

  .mt-groups {
    grid-template-columns: 1fr;
  }
}

/* --- products mega: product detail panels (shares .mt-rail / .mt-panel) --- */
.mega-inner-products .mt-rail {
  gap: 4px;
}


.mp-check {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: #3a5fa8;
}

.mp-custom {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.mp-why {
  list-style: none;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--br-2);
  border-radius: 12px;
  background: var(--bga);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.mp-why li {
  display: flex;
  gap: 10px;
}

.mp-why strong {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--p);
  letter-spacing: -.01em;
}

.mp-why li>span>span {
  display: block;
  margin-top: 2px;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--m);
}

.mp-cta {
  margin-top: auto;
  max-width: 280px;
}

.mp-custom .mega-head {
  margin-bottom: 8px;
}

.mp-custom .mw-desc {
  max-width: 54ch;
}

.mp-custom .mp-note {
  width: 100%;
  margin-top: 18px;
}

/* --- products mega: product grid inside each category tab --- */
.mp-grid {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 64px;
}

.mp-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin: 0 -8px;
  padding: 10px 8px;
  border-radius: 10px;
  text-decoration: none;
  transition: background .18s;
}

.mp-item:hover {
  background: var(--bga);
}

.mp-item:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 1px;
}

.mp-item-text {
  min-width: 0;
}

.mp-item-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--p);
}

.mp-item-text .desc {
  display: block;
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--m);
}

.mega-inner-products .mega-icon {
  background: rgba(240, 97, 74, .10);
  color: var(--a);
}

.mp-cta {
  max-width: 260px;
  margin-top: auto;
}

.mp-custom .mp-why {
  margin: 4px 0 18px;
  padding: 0;
  border: 0;
  background: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
}

@media (max-width: 1100px) {

  .mp-grid,
  .mp-custom .mp-why {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   WORK MEGA MENU - tab-rail panels
   Restored after _add_work_section.py's CSS replacement ran to end-of-file and
   removed them. The panels are wide, so both lists lay out in two rows rather
   than one long column, and the featured card sits side by side.
   ========================================================================== */

/* Portfolio: 8 links as 2 columns x 4 rows. Column flow, so reading order runs
   down the first column then down the second. */
.mw-rows-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-flow: column;
  grid-template-rows: repeat(4, auto);
  gap: 2px 36px;
}

/* Case studies: 4 client rows as 2 columns x 2 rows */
.mw-cases-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, auto);
  gap: 4px 24px;
}

.mega-inner-work .mw-btn {
  max-width: 280px;
  margin-top: 18px;
}

.mega-inner-work .mw-feature {
  flex-direction: row;
  align-items: stretch;
  max-height: 300px;
}

.mega-inner-work .mw-feature-body {
  width: 54%;
  padding: 22px 24px;
}

.mega-inner-work .mw-shot {
  flex: 1;
  margin-top: 0;
  border-top: 0;
  border-left: 1px solid #e2eaf4;
}

.mega-inner-work .mw-shot img {
  object-position: left top;
}

@media(max-width:1200px) {
  .mw-rows-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    grid-auto-flow: row;
  }

  .mw-cases-split {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
  }

  .mega-inner-work .mw-feature {
    flex-direction: column;
    max-height: none;
  }

  .mega-inner-work .mw-feature-body {
    width: 100%;
  }

  .mega-inner-work .mw-shot {
    border-left: 0;
    border-top: 1px solid #e2eaf4;
  }
}

/* ==========================================================================
   PAGINATION — blog.html article grid
   Same pill language as .filter-tabs button: white resting, navy on hover,
   orange for the current page.
   ========================================================================== */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 52px;
}

.pg-info {
  width: 100%;
  margin: 0 0 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--m);
}

.pg-info strong {
  color: var(--p);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.pg-btn,
.pg-num {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  border: 1px solid var(--br);
  border-radius: 99px;
  background: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p);
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.pg-num {
  padding: 0;
  font-variant-numeric: tabular-nums;
}

.pg-btn:hover:not(:disabled),
.pg-num:hover:not(.active) {
  background: var(--p);
  border-color: var(--p);
  color: #fff;
}

.pg-num.active {
  background: var(--a);
  border-color: var(--a);
  color: #fff;
  cursor: default;
}

.pg-btn:disabled {
  opacity: .4;
  cursor: not-allowed;
}

.pg-btn:focus-visible,
.pg-num:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.pg-btn svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}

.pg-gap {
  min-width: 26px;
  text-align: center;
  font-weight: 700;
  color: var(--mm);
  user-select: none;
}

@media(max-width:640px) {
  .pagination {
    margin-top: 40px;
  }

  /* labels drop, arrows stay, so the row never wraps on a phone */
  .pg-btn span {
    display: none;
  }

  .pg-btn {
    padding: 0;
    min-width: 40px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .pg-btn,
  .pg-num {
    transition: none;
  }
}

/* ==========================================================================
   ARTICLE PAGE — content column + sticky sidebar
   Inside .page (1200px, 24px padding) the run is 1152px: 784 article + 48 gap
   + 320 sidebar, which keeps the body copy at a readable measure.
   ========================================================================== */
.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 48px;
  align-items: start;
  /* clears the dark hero band above; padding rather than margin because
     .page has no top padding, so a margin here collapses through it and only
     part of the gap survives. Both columns start on this line, so the cover
     and the first sidebar card align. */
  padding-top: 48px;
  margin-bottom: 64px;
}

.article-main {
  min-width: 0;
}

/* the cover is the full width of the content column, with real air beneath it
   before the body copy starts */
.article-main .post-cover {
  max-width: none;
  margin: 0 0 36px;
  aspect-ratio: 21/9;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-main .post-cover span {
  font-size: 54px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: rgba(255, 255, 255, .34);
}

.art-side {
  position: sticky;
  top: 98px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.art-mod {
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  padding: 20px;
}

.art-mod-title {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm);
}

/* --- search --- */
.art-search {
  display: flex;
  gap: 8px;
}

.art-search input {
  flex: 1;
  min-width: 0;
  padding: 10px 13px;
  border: 1.5px solid var(--br);
  border-radius: 10px;
  background: var(--bga);
  font: inherit;
  font-size: 13.5px;
  color: var(--p);
}

.art-search input::placeholder {
  color: var(--mm);
}

.art-search input:focus {
  outline: none;
  background: #fff;
  border-color: var(--a);
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .12);
}

.art-search button {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  background: var(--grad-btn);
  color: #fff;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}

.art-search button svg {
  width: 17px;
  height: 17px;
}

.art-search button:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(240, 97, 74, .32);
}

.art-search button:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

/* --- categories --- */
.art-cats {
  list-style: none;
  margin: 0;
  padding: 0;
}

.art-cats li+li {
  border-top: 1px solid var(--br-2);
}

.art-cats a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p);
  text-decoration: none;
  transition: color .15s;
  text-transform:capitalize;
}

.art-cats a:hover {
  color: #da3116;
}

.art-cats em {
  font-style: normal;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mm);
  background: var(--bga);
  border-radius: 99px;
  padding: 2px 9px;
  font-variant-numeric: tabular-nums;
}

.art-cats a:hover em {
  background: rgba(240, 97, 74, .1);
  color: #da3116;
}

.art-mod-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 12.5px;
  font-weight: 700;
  color: #da3116;
  text-decoration: none;
}

.art-mod-more svg {
  width: 14px;
  height: 14px;
  transition: transform .18s;
}

.art-mod-more:hover svg {
  transform: translateX(3px);
}

/* --- popular articles --- */
.art-posts {
  list-style: none;
  margin: 0;
  padding: 0;
}

.art-posts li+li {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--br-2);
}

.art-posts a {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-decoration: none;
  color: inherit;
}

.art-thumb {
  flex: none;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -.02em;
  color: rgba(255, 255, 255, .92);
}

.art-thumb.cover-1 {
  background: linear-gradient(135deg, #0a2540 0%, #2a447a 100%);
}

.art-thumb.cover-2 {
  background: linear-gradient(135deg, #f0614a 0%, #ff8a4d 100%);
}

.art-thumb.cover-3 {
  background: linear-gradient(135deg, #0a1838 0%, #3a5fa8 100%);
}

.art-post-text {
  min-width: 0;
}

.art-post-text strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--p);
  transition: color .15s;
}

.art-posts a:hover strong {
  color: #da3116;
}

.art-post-meta {
  display: block;
  margin-top: 4px;
  font-size: 11.5px;
  color: var(--mm);
}

/* --- contact card --- */
.art-cta {
  display: block;
  padding: 22px;
  border-radius: 18px;
  background: var(--grad);
  text-decoration: none;
  transition: box-shadow .2s;
}

.art-cta:hover {
  box-shadow: var(--shadow-lg);
}

.art-cta-eyebrow {
  display: block;
  margin-bottom: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #ffb98f;
}

.art-cta strong {
  display: block;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #fff;
}

.art-cta-copy {
  display: block;
  margin-top: 9px;
  font-size: 12.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

.art-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  padding: 9px 15px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 12.5px;
  font-weight: 700;
  color: #fff;
}

.art-cta-btn svg {
  width: 14px;
  height: 14px;
  transition: transform .18s;
}

.art-cta:hover .art-cta-btn svg {
  transform: translateX(3px);
}

@media(max-width:1000px) {
  .article-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .art-side {
    position: static;
    margin-top: 0;
  }
}

@media(prefers-reduced-motion:reduce) {

  .art-search button,
  .art-mod-more svg,
  .art-cta,
  .art-cta-btn svg,
  .art-post-text strong {
    transition: none;
  }

  .art-search button:hover,
  .art-mod-more:hover svg,
  .art-cta:hover .art-cta-btn svg {
    transform: none;
  }
}

/* ==========================================================================
   ARTICLE — hero meta row, share icons, comments
   ========================================================================== */

/* meta now sits in the dark hero, under the lede */
.post-meta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 26px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .16);
}

.post-meta-row span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .82);
}

.post-meta-row svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--a-2);
}

/* --- share row --- */
.post-share {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 18px;
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--br);
}

.share-label {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--p);
}

.share-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.share-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--br);
  border-radius: 50%;
  background: #fff;
  color: var(--p);
  cursor: pointer;
  padding: 0;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
}

.share-btn svg {
  width: 17px;
  height: 17px;
}

.share-btn:hover {
  transform: translateY(-2px);
  color: #fff;
}

/* brand colours on hover, neutral at rest so the row stays calm */
.share-facebook:hover {
  background: #1877f2;
  border-color: #1877f2;
}

.share-x:hover {
  background: #0f1419;
  border-color: #0f1419;
}

.share-linkedin:hover {
  background: #0a66c2;
  border-color: #0a66c2;
}

.share-pinterest:hover {
  background: #bd081c;
  border-color: #bd081c;
}

.share-copy:hover {
  background: var(--p);
  border-color: var(--p);
}

.share-btn:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
}

.share-copied {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 4px 9px;
  border-radius: 6px;
  background: var(--p);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}

.share-copy.is-copied .share-copied {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.share-copy.is-copied {
  background: #1a7f4f;
  border-color: #1a7f4f;
  color: #fff;
}

/* --- comments --- */
.comments {
  margin-top: 56px;
  padding-top: 40px;
  border-top: 1px solid var(--br);
}

.comments-title {
  margin: 0 0 22px;
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.comments-title span {
  color: var(--mm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.comment-list {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.comment-empty {
  padding: 26px;
  border: 1.5px dashed var(--br);
  border-radius: 14px;
  background: var(--bga);
  text-align: center;
  font-size: 14px;
  color: var(--m);
}

.comment {
  display: flex;
  gap: 14px;
  padding: 18px;
  border: 1.5px solid var(--br-2);
  border-radius: 14px;
  background: #fff;
}

.comment-avatar {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--grad);
  color: #fff;
  font-size: 14px;
  font-weight: 800;
}

.comment-who {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}

.comment-who strong {
  font-size: 14px;
  font-weight: 700;
  color: var(--p);
}

.comment-who time {
  font-size: 12px;
  color: var(--mm);
}

.comment p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--m);
}

/* --- comment form --- */
.comment-form {
  padding: 26px;
  border: 1.5px solid var(--br-2);
  border-radius: 18px;
  background: var(--bga);
}

.comment-form h3 {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.015em;
  color: var(--p);
}

.cf-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

.comment-form label {
  display: block;
}

.comment-form label>span {
  display: block;
  margin-bottom: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--p);
}

.comment-form input,
.comment-form textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 11px 14px;
  border: 1.5px solid var(--br);
  border-radius: 10px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--p);
}

.comment-form textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
}

.comment-form input::placeholder,
.comment-form textarea::placeholder {
  color: var(--mm);
}

.comment-form input:focus,
.comment-form textarea:focus {
  outline: none;
  border-color: var(--a);
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .12);
}

.comment-form small {
  display: block;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--mm);
}

.cf-full {
  margin-bottom: 18px;
}

.comment-form .btn-p {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}

@media(max-width:640px) {
  .cf-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-meta-row {
    gap: 8px 18px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .share-btn,
  .share-copied {
    transition: none;
  }

  .share-btn:hover {
    transform: none;
  }
}

/* --- comment thread --- */
.comment-body {
  min-width: 0;
  flex: 1;
}

.comment-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(240, 97, 74, .12);
  color: #da3116;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.comment-reply {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: #da3116;
  cursor: pointer;
}

.comment-reply:hover {
  text-decoration: underline;
}

.comment-reply:focus-visible {
  outline: 2px solid var(--a);
  outline-offset: 2px;
  border-radius: 4px;
}

/* nested replies: indented, with a rule marking the thread */
.comment-replies {
  list-style: none;
  margin: 16px 0 0;
  padding: 0 0 0 22px;
  border-left: 2px solid var(--br);
  flex-basis: 100%;
}

.comment-replies .comment {
  padding: 14px 16px;
  background: var(--bga);
  border-color: transparent;
}

.comment-replies .comment-avatar {
  width: 34px;
  height: 34px;
  font-size: 12px;
}

.comment {
  flex-wrap: wrap;
}

@media(max-width:640px) {
  .comment-replies {
    padding-left: 14px;
  }
}

/* --- related posts (article pages) --- */
.related-title {
  margin: 0 0 26px;
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

/* only two real siblings exist, so cap the run rather than leaving an empty
   third cell - the cards then match the homepage width instead of stretching */
.blog-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
}

@media(max-width:980px) {
  .blog-grid-2 {
    max-width: none;
  }
}

/* .blog-grid-2 overrides .blog-grid's own single-column mobile rule, so it kept
   two columns all the way down - 152px cards at 390px, one word per line. */
@media(max-width:640px) {
  .blog-grid-2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   PRODUCTS — list grid + detail template
   ========================================================================== */
.prod-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.prod-card {
  display: flex;
  flex-direction: column;
  padding: 26px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: all .25s;
}

.prod-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(240, 97, 74, .3);
}

.prod-icon {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(240, 97, 74, .1);
  color: var(--a);
  margin-bottom: 18px;
}

.prod-icon svg {
  width: 24px;
  height: 24px;
}

.prod-cat {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 3px 10px;
  border-radius: 99px;
  background: var(--bga);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mm);
}

.prod-card h3 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.prod-card p {
  margin: 0 0 18px;
  flex: 1;
  font-size: 14px;
  line-height: 1.6;
  color: var(--m);
}

.prod-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 700;
  color: #da3116;
}

.prod-more svg {
  width: 14px;
  height: 14px;
  transition: transform .18s;
}

.prod-card:hover .prod-more svg {
  transform: translateX(3px);
}

/* --- detail hero --- */
.prod-hero-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.prod-hero-icon {
  width: 64px;
  height: 64px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  color: var(--a-2);
}

.prod-hero-icon svg {
  width: 30px;
  height: 30px;
}

.prod-hero-top h1 {
  margin: 6px 0 0;
}

.prod-hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

/* --- sticky section nav --- */
.prod-nav {
  position: sticky;
  top: var(--header-h);
  z-index: 900;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--br);
  box-shadow: 0 4px 16px -8px rgba(10, 24, 56, .12);
}

.prod-nav-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}

.prod-nav-inner::-webkit-scrollbar {
  display: none;
}

.prod-nav a {
  flex: none;
  padding: 15px 14px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--m);
  text-decoration: none;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}

.prod-nav a:hover {
  color: var(--p);
}

.prod-nav a.is-active {
  color: #da3116;
  border-bottom-color: var(--a);
}

/* --- detail sections --- */
/* `.page > section { padding: 72px 0 }` already exists and outranks a single
   class, so these are scoped to match its specificity and land after it */
.prod-section,
.page>.prod-section {
  /* padding: 64px 0; */
  scroll-margin-top: 140px;
}

.prod-section+.prod-section {
  border-top: 1px solid var(--br-2);
}

.prod-section h2 {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.demo-note {
  margin: 0 0 22px;
  padding: 9px 14px;
  border: 1px dashed rgba(240, 97, 74, .45);
  border-radius: 8px;
  background: rgba(240, 97, 74, .06);
  font-size: 12.5px;
  font-weight: 600;
  color: #da3116;
  display: inline-block;
}

.demo-empty {
  padding: 30px;
  border: 1.5px dashed var(--br);
  border-radius: 14px;
  background: var(--bga);
  text-align: center;
  color: var(--m);
  font-size: 14px;
}

.prod-about {
  max-width: 760px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--m);
}

.prod-about p {
  margin: 0 0 14px;
}





.prod-case h3 {
  margin: 0 0 7px;
  font-size: 16px;
  font-weight: 700;
  color: var(--p);
}

.prod-case p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--m);
}

.prod-cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.prod-case {
  padding: 24px;
  border-left: 3px solid var(--a);
  background: var(--bga);
  border-radius: 0 14px 14px 0;
}

.pc-num {
  display: block;
  margin-bottom: 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--a);
  font-variant-numeric: tabular-nums;
}

.pi-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.pi-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 12px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p);
}

.pi-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--a);
  flex: none;
}

/* --- pricing --- */
.prod-tiers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}

.prod-tier {
  position: relative;
  padding: 28px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}

.prod-tier.is-featured {
  border-color: var(--a);
  box-shadow: var(--shadow-lg);
}

.pt-badge {
  position: absolute;
  top: -11px;
  left: 28px;
  padding: 4px 12px;
  border-radius: 99px;
  background: var(--a);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.prod-tier h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mm);
}

.pt-price {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.pt-price strong {
  font-size: 38px;
  font-weight: 900;
  letter-spacing: -.03em;
  color: var(--p);
}

.pt-price span {
  font-size: 13px;
  color: var(--mm);
}

.pt-note {
  margin: 6px 0 18px;
  font-size: 12px;
  color: var(--mm);
}

.pt-list {
  list-style: none;
  margin: 0 0 22px;
  padding: 18px 0 0;
  border-top: 1px solid var(--br-2);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.pt-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--p);
}

.pt-list svg {
  width: 15px;
  height: 15px;
  flex: none;
  color: #1a7f4f;
}

.prod-tier .btn {
  width: 100%;
  justify-content: center;
}

/* --- knowledge base --- */
.prod-kb {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.kb-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  transition: border-color .18s, box-shadow .18s;
}

.kb-item:hover {
  border-color: rgba(240, 97, 74, .3);
  box-shadow: var(--shadow-sm);
}

.kb-icon {
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: var(--bga);
  color: var(--a);
}

.kb-icon svg {
  width: 18px;
  height: 18px;
}

.kb-text {
  flex: 1;
  min-width: 0;
}

.kb-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--p);
}

.kb-text span {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--m);
}

.kb-arrow {
  width: 15px;
  height: 15px;
  flex: none;
  color: var(--a);
  transition: transform .18s;
}

.kb-item:hover .kb-arrow {
  transform: translateX(3px);
}

/* --- faq (reuses the native details pattern) --- */
.prod-faq {
  max-width: 820px;
}

/* full-bleed tinted band; the doubled class beats `.page > section` */
.prod-section.section-alt-block,
.page>.prod-section.section-alt-block {
  margin: 0 calc(50% - 50vw);
  padding: 0px max(24px, calc(50vw - 600px + 24px));
}
.section-white{background: white;}

@media(max-width:1000px) {

  .prod-grid,
  .prod-cases,
  .prod-tiers {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pi-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media(max-width:680px) {

  .prod-grid,
  .prod-cases,
  .prod-tiers,
  .prod-kb {
    grid-template-columns: minmax(0, 1fr);
  }

  .pi-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* .prod-section {
    padding: 44px 0;
  } vertical rhythm comes from the section's padding settings (.tlx-sec) */
  .prod-section.section-alt-block, .page>.prod-section.section-alt-block{padding:0px 24px;}

  .prod-hero-top {
    gap: 14px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .prod-card,
  .prod-more svg,
  .kb-item,
  .kb-arrow {
    transition: none;
  }

  .prod-card:hover {
    transform: none;
  }

  .prod-card:hover .prod-more svg,
  .kb-item:hover .kb-arrow {
    transform: none;
  }
}

/* ==========================================================================
   PRODUCT DETAIL — hero, about slider, use cases, pricing toggle, KB,
   related apps, sticky install bar
   ========================================================================== */
.prod-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.prod-hero-pill {
  display: inline-block;
  margin-bottom: 14px;
  padding: 5px 13px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
}

.prod-hero-copy h1 {
  margin: 0 0 12px;
}

.prod-hero-sub {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--a-2);
}

.prod-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px;
  margin-top: 30px;
}

.prod-hero-install {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.prod-demo-link {
  font-size: 12.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.prod-demo-link:hover {
  color: #fff;
}

/* browser-ish frame used for hero media and use-case panels */
.pm-frame {
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 30px 70px -24px rgba(10, 24, 56, .55);
}

.pm-bar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #eef1f6;
  border-bottom: 1px solid #dfe5ee;
}

.pm-bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #c9d2e0;
}

.pm-shot {
  aspect-ratio: 16/10;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding: 20px; */
  text-align: center;
}

.pm-shot-1 {
  background: linear-gradient(135deg, #0a2540 0%, #2a447a 100%);
}

.pm-shot-2 {
  background: linear-gradient(135deg, #f0614a 0%, #ff8a4d 100%);
}

.pm-shot-3 {
  background: linear-gradient(135deg, #0a1838 0%, #3a5fa8 100%);
}

.pm-label {
  font-size: 13px;
  font-weight: 700;
  color: rgba(255, 255, 255, .55);
}

/* --- about: copy + slider --- */
.prod-about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}

.prod-about-copy p {
  margin: 0 0 14px;
  font-size: 16px;
  line-height: 1.7;
  color: var(--m);
}

.prod-bullets {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.prod-bullets li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--p);
}

.prod-bullets svg {
  width: 18px;
  height: 18px;
  flex: none;
  margin-top: 1px;
  color: #1a7f4f;
}

.prod-slider .ps-stage {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  border: 1.5px solid var(--br-2);
  box-shadow: var(--shadow-sm);
}

.ps-slide {
  display: none;
  aspect-ratio: 16/10;
  align-items: center;
  justify-content: center;
}

.ps-slide.is-active {
  display: flex;
}

.ps-slide span {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255, 255, 255, .6);
}

.ps-slide-1 {
  background: linear-gradient(135deg, #0a2540 0%, #2a447a 100%);
}

.ps-slide-2 {
  background: linear-gradient(135deg, #f0614a 0%, #ff8a4d 100%);
}

.ps-slide-3 {
  background: linear-gradient(135deg, #0a1838 0%, #3a5fa8 100%);
}

.ps-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.ps-thumb {
  flex: 1;
  height: 56px;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  padding: 0;
  opacity: .55;
  transition: opacity .18s, border-color .18s;
}

.ps-thumb:hover {
  opacity: .85;
}

.ps-thumb.is-active {
  opacity: 1;
  border-color: var(--a);
}

/* --- use cases --- */
.uc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 48px;
  align-items: start;
}

.uc-list {
  display: flex;
  flex-direction: column;
  border-left: 2px solid var(--br);
}

.uc-item {
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  cursor: pointer;
  padding: 20px 24px;
  margin-left: -2px;
  border-left: 2px solid transparent;
  transition: background .18s, border-color .18s;
}

.uc-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.uc-item span {
  display: block;
  font-size: 14px;
  line-height: 1.6;
  color: var(--m);
}

.uc-item:hover {
  background: var(--bga);
}

.uc-item.is-active {
  background: rgba(240, 97, 74, .07);
  border-left-color: var(--a);
}

.uc-panel {
  display: none;
}

.uc-panel.is-active {
  display: block;
}

.uc-stage .pm-frame {
  border-color: var(--br-2);
  box-shadow: var(--shadow-lg);
}

/* --- pricing toggle --- */
.price-toggle {
  display: inline-flex;
  gap: 4px;
  margin: 4px 0 28px;
  padding: 4px;
  border: 1.5px solid var(--br);
  border-radius: 99px;
  background: #fff;
}

.price-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 20px;
  border: 0;
  border-radius: 99px;
  background: none;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--m);
  cursor: pointer;
  transition: background .18s, color .18s;
}

.price-toggle button.is-active {
  background: var(--p);
  color: #fff;
}

.pt-save {
  padding: 2px 8px;
  border-radius: 99px;
  background: rgba(26, 127, 79, .14);
  color: #1a7f4f;
  font-size: 11px;
  font-weight: 700;
}

.price-toggle button.is-active .pt-save {
  background: rgba(255, 255, 255, .18);
  color: #fff;
}

.e-amt {
  font-variant-numeric: tabular-nums;
}

/* --- knowledge base cards --- */
.prod-h2-center {
  text-align: center;
}

.kb-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  margin-top: 8px;
}

.kb-card {
  padding: 34px 26px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 18px;
  box-shadow: var(--shadow-sm);
  text-align: center;
  text-decoration: none;
  transition: all .25s;
}

.kb-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(240, 97, 74, .3);
}

.kb-card-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: rgba(240, 97, 74, .1);
  color: var(--a);
}

.kb-card-icon svg {
  width: 26px;
  height: 26px;
}

.kb-card h3 {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #da3116;
}

.kb-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--m);
}

/* --- related apps --- */
.apps-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 2fr);
  gap: 48px;
  align-items: start;
}

.apps-eyebrow {
  display: block;
  margin-bottom: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--a);
}

.apps-intro h2 {
  margin: 0 0 20px;
}

.apps-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.app-card {
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  transition: all .25s;
}

.app-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(240, 97, 74, .3);
}

.app-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-bottom: 1.5px solid var(--br-2);
  background: var(--bga);
}

.app-icon {
  width: 42px;
  height: 42px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--grad);
  color: #fff;
}

.app-icon svg {
  width: 20px;
  height: 20px;
}

.app-card-top h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.app-card-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.app-card-body p {
  margin: 0 0 18px;
  flex: 1;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--m);
}

.app-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.app-price {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mm);
}

.app-add {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  background: var(--p);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
}

.app-add svg {
  width: 14px;
  height: 14px;
  transition: transform .18s;
}

.app-card:hover .app-add {
  background: var(--a);
}

.app-card:hover .app-add svg {
  transform: translateX(3px);
}

/* --- sticky install bar --- */
.prod-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--br);
  box-shadow: 0 -6px 24px -10px rgba(10, 24, 56, .18);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform .25s cubic-bezier(.4, 0, .2, 1), opacity .25s, visibility .25s;
}

.prod-bar.is-visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.prod-bar-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.prod-bar-name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.prod-bar-cta {
  display: flex;
  align-items: center;
  gap: 18px;
}

.prod-bar .prod-demo-link {
  color: var(--p);
}

.prod-bar .prod-demo-link:hover {
  color: #da3116;
}

@media(max-width:1000px) {

  .prod-hero-grid,
  .prod-about-grid,
  .uc-grid,
  .apps-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .kb-cards,
  .apps-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:680px) {

  .kb-cards,
  .apps-cards {
    grid-template-columns: minmax(0, 1fr);
  }

  .prod-hero-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .prod-hero-install {
    align-items: stretch;
  }

  .prod-bar-inner {
    padding: 10px 16px;
    gap: 12px;
  }

  .prod-bar-name {
    display: none;
  }

  .prod-bar-cta {
    width: 100%;
    justify-content: space-between;
  }
}

@media(prefers-reduced-motion:reduce) {

  .kb-card,
  .app-card,
  .prod-bar,
  .app-add svg,
  .uc-item {
    transition: none;
  }

  .kb-card:hover,
  .app-card:hover {
    transform: none;
  }
}

/* product pricing: all tiers on one row (Tracklify ships 4) */
.prod-section .engage-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.prod-section .engage {
  padding: 24px 20px;
}

.prod-section .e-price {
  font-size: 30px;
}

.prod-section .e-per {
  font-size: 13px;
}

@media(max-width:1100px) {
  .prod-section .engage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:680px) {
  .prod-section .engage-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   PRODUCT SHOWCASE — split cards, two per row (products.html)
   Left column carries the pitch, right column an all-CSS product mock that
   bleeds past the card edge. Mocks are decorative: aria-hidden in the markup.
   ========================================================================== */
.pshow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px;
}

.pshow {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  gap: 10px;
  min-height: 352px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 22px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .28s cubic-bezier(.4, 0, .2, 1), box-shadow .28s cubic-bezier(.4, 0, .2, 1), border-color .28s;
}

.pshow:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(240, 97, 74, .3);
}

.pshow:focus-visible {
  outline: none;
  border-color: var(--a);
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .12), var(--shadow-lg);
}

/* ---------------------------------------------------------------- body -- */
.pshow-body {
  display: flex;
  flex-direction: column;
  padding: 30px 2px 30px 30px;
}

.pshow-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 15px;
}

.pshow-icon {
  flex: none;
  width: 42px;
  height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
  background: var(--grad-btn);
  color: #fff;
  box-shadow: 0 4px 14px rgba(240, 97, 74, .3);
}

.pshow-icon svg {
  width: 21px;
  height: 21px;
}

.pshow-titles {
  min-width: 0;
}

.pshow-t1 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pshow-name {
  margin: 0;
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.pshow-flag {
  padding: 3px 8px;
  border-radius: 99px;
  background: rgba(240, 97, 74, .1);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .03em;
  color: #da3116;
  white-space: nowrap;
}

.pshow-cat {
  display: block;
  margin-top: 3px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm);
}

.pshow-body>p {
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.62;
  color: var(--m);
}

.pshow-list {
  margin: 0 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 10px;
}

.pshow-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  line-height: 1.4;
  font-weight: 500;
  color: var(--p);
}

.pshow-list svg {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 1px;
  color: var(--a);
}

.pshow-more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 22px;
  font-size: 13.5px;
  font-weight: 700;
  color: #da3116;
}

.pshow-more svg {
  width: 15px;
  height: 15px;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

.pshow:hover .pshow-more svg {
  transform: translateX(4px);
}

/* ------------------------------------------------------------- mock art -- */
.pshow-art {
  position: relative;
  overflow: hidden;
}

.pv {
  position: absolute;
  top: 50%;
  left: 0;
  right: 2px;
  height: 286px;
  transform: translateY(-50%);
  font-family: inherit;
}

/* shared mock primitives */
.pv-win {
  position: absolute;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 13px;
  box-shadow: 0 18px 38px -14px rgba(10, 24, 56, .28);
  overflow: hidden;
}

.pv-bar {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--br-2);
  background: #fbfcfe;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--mm);
}

.pv-bar i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #dfe5ee;
}

.pv-bar i:first-child {
  background: #ffbdb0;
}

.pv-bar i:nth-child(2) {
  background: #ffe0a8;
}

.pv-bar i:nth-child(3) {
  background: #b9e6c9;
}

.pv-bar span {
  margin-left: 6px;
}

.pv-float {
  position: absolute;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 12px;
  box-shadow: 0 20px 40px -12px rgba(10, 24, 56, .3);
  padding: 10px 12px;
  z-index: 3;
}

.pv-k {
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mm);
}

.pv-v {
  display: block;
  margin-top: 2px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
  font-feature-settings: "tnum";
}

.pv-l {
  display: block;
  height: 5px;
  border-radius: 3px;
  background: #eaeef4;
}

.pv-sq {
  border-radius: 6px;
  background: linear-gradient(135deg, #e8edf5, #f5f7fb);
}

/* ---- 1. Ordexa: admin dashboard + net-profit float --------------------- */
.pv-dash .pv-win {
  inset: 12px -22px 66px 0;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
}

.pv-side {
  border-right: 1px solid var(--br-2);
  background: linear-gradient(180deg, #0a1838, #14365e);
  padding: 9px 7px;
}

.pv-side b {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 10px;
  font-size: 8px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.01em;
}

.pv-side b::before {
  content: "";
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--a), var(--a-2));
}

.pv-side u {
  display: block;
  height: 5px;
  margin-bottom: 7px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .16);
}

.pv-side u.on {
  background: rgba(240, 97, 74, .85);
  width: 74%;
}

.pv-main {
  padding: 10px;
  min-width: 0;
}

.pv-tiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 9px;
}

.pv-tile {
  padding: 7px 8px;
  border: 1px solid var(--br-2);
  border-radius: 8px;
  background: #fbfcfe;
}

.pv-tile em {
  display: block;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mm);
}

.pv-tile strong {
  display: block;
  margin: 2px 0 1px;
  font-size: 11px;
  font-weight: 800;
  color: var(--p);
  font-feature-settings: "tnum";
}

.pv-tile s {
  text-decoration: none;
  font-size: 7.5px;
  font-weight: 700;
  color: #16a34a;
}

.pv-chart {
  border: 1px solid var(--br-2);
  border-radius: 8px;
  padding: 7px 8px 4px;
  background: #fff;
}

.pv-chart em {
  display: block;
  margin-bottom: 4px;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--mm);
}

.pv-chart svg {
  display: block;
  width: 100%;
  height: 84px;
}

.pv-float-profit {
  left: 6px;
  bottom: 0;
  width: 178px;
}

.pv-donut {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.pv-donut i {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: conic-gradient(var(--a) 0 58%, #14365e 58% 84%, #f0b429 84% 100%);
  -webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
  mask: radial-gradient(circle, transparent 52%, #000 53%);
}

.pv-legend {
  display: grid;
  gap: 3px;
  font-size: 8.5px;
  font-weight: 600;
  color: var(--m);
}

.pv-legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}

.pv-legend span::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--a);
}

.pv-legend span:nth-child(2)::before {
  background: #14365e;
}

.pv-legend span:nth-child(3)::before {
  background: #f0b429;
}

/* ---- 2. Tracklify: phone tracking screen ------------------------------- */
.pv-phone {
  position: absolute;
  top: 0;
  left: 16px;
  width: 152px;
  height: 286px;
  padding: 6px;
  border-radius: 24px;
  background: linear-gradient(160deg, #16233f, #0a1838);
  box-shadow: 0 24px 44px -14px rgba(10, 24, 56, .45);
}

.pv-scr {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: 19px;
  background: #fff;
  overflow: hidden;
}

.pv-scr::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 12px;
  border-radius: 0 0 9px 9px;
  background: #0a1838;
  z-index: 2;
}

.pv-app {
  flex: none;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 17px 9px 7px;
  border-bottom: 1px solid var(--br-2);
  font-size: 9px;
  font-weight: 800;
  color: var(--p);
}

.pv-app::before {
  content: "";
  width: 12px;
  height: 12px;
  border-radius: 4px;
  background: linear-gradient(135deg, var(--a), var(--a-2));
}

.pv-trk {
  flex: none;
  padding: 10px 9px 8px;
  text-align: center;
}

.pv-trk em {
  font-style: normal;
  font-size: 8px;
  font-weight: 600;
  color: var(--mm);
}

.pv-trk strong {
  display: block;
  margin: 2px 0 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: #16a34a;
}

.pv-trk p {
  margin: 0 0 9px;
  font-size: 7.5px;
  line-height: 1.45;
  color: var(--m);
}

.pv-steps {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 4px 5px;
}

.pv-steps::before {
  content: "";
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 2px;
  transform: translateY(-50%);
  background: #e6eaf0;
}

.pv-steps::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 50%;
  width: 67%;
  height: 2px;
  transform: translateY(-50%);
  background: #16a34a;
}

.pv-steps i {
  position: relative;
  z-index: 2;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #e6eaf0;
}

.pv-steps i.on {
  border-color: #16a34a;
  background: #16a34a;
}

.pv-slabel {
  display: flex;
  justify-content: space-between;
  font-size: 5.6px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--mm);
}

.pv-map {
  position: relative;
  flex: 1;
  min-height: 74px;
  margin: 8px 0 0;
  background:
    linear-gradient(90deg, rgba(214, 223, 235, .9) 1.5px, transparent 1.5px) 0 0/26px 26px,
    linear-gradient(180deg, rgba(214, 223, 235, .9) 1.5px, transparent 1.5px) 0 0/26px 26px,
    #eef2f7;
}

.pv-map::before {
  content: "";
  position: absolute;
  left: -10%;
  top: 44%;
  width: 130%;
  height: 7px;
  background: #cfd8e6;
  transform: rotate(-11deg);
}

.pv-pin {
  position: absolute;
  left: 50%;
  top: 42%;
  width: 15px;
  height: 15px;
  margin: -14px 0 0 -7px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: linear-gradient(135deg, var(--a), var(--a-2));
  box-shadow: 0 4px 10px rgba(240, 97, 74, .5);
}

.pv-pin::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: #fff;
}

.pv-float-eta {
  right: 0;
  bottom: 14px;
  width: 150px;
}

/* ---- 3. CartLift: cart panel + reminder + recovered stat --------------- */
.pv-lift .pv-win {
  top: 0;
  left: 0;
  right: 0;
  height: 146px;
}

.pv-rows {
  padding: 9px 10px;
  display: grid;
  gap: 8px;
}

.pv-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.pv-row .pv-sq {
  flex: none;
  width: 26px;
  height: 26px;
}

.pv-row div {
  flex: 1;
  min-width: 0;
  display: grid;
  gap: 4px;
}

.pv-row b {
  font-size: 9px;
  font-weight: 800;
  color: var(--p);
  font-feature-settings: "tnum";
}

.pv-tot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 2px;
  padding-top: 8px;
  border-top: 1px dashed var(--br);
  font-size: 9px;
  font-weight: 800;
  color: var(--p);
}

.pv-tot em {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--mm);
}

.pv-float-note {
  top: 132px;
  left: 0;
  width: 170px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.pv-ico {
  flex: none;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 7px;
  background: rgba(240, 97, 74, .12);
  color: var(--a);
}

.pv-ico svg {
  width: 12px;
  height: 12px;
}

.pv-note-t {
  font-size: 9px;
  font-weight: 800;
  color: var(--p);
}

.pv-note-s {
  display: block;
  margin-top: 2px;
  font-size: 8px;
  line-height: 1.4;
  color: var(--m);
}

.pv-float-stat {
  right: 0;
  bottom: 0;
  width: 132px;
}

.pv-spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
  margin-top: 7px;
}

.pv-spark i {
  flex: 1;
  border-radius: 2px 2px 0 0;
  background: rgba(240, 97, 74, .22);
}

.pv-spark i:last-child {
  background: linear-gradient(180deg, var(--a), var(--a-2));
}

/* ---- 4. Wishlist+: saved grid + back-in-stock alert -------------------- */
.pv-wish .pv-win {
  top: 0;
  left: 0;
  right: 0;
  height: 218px;
}

.pv-tiles4 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
}

.pv-item {
  position: relative;
  padding: 7px;
  border: 1px solid var(--br-2);
  border-radius: 8px;
  background: #fbfcfe;
}

.pv-item .pv-sq {
  height: 40px;
  margin-bottom: 6px;
}

.pv-item .pv-l {
  width: 82%;
  margin-bottom: 4px;
}

.pv-item b {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--p);
  font-feature-settings: "tnum";
}

.pv-heart {
  position: absolute;
  top: 11px;
  right: 11px;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 1px 4px rgba(10, 24, 56, .16);
  color: var(--mm);
}

.pv-heart svg {
  width: 8px;
  height: 8px;
}

.pv-heart.on {
  color: var(--a);
}

.pv-heart.on svg {
  fill: var(--a);
}

.pv-drop {
  position: absolute;
  top: 11px;
  left: 11px;
  padding: 2px 6px;
  border-radius: 99px;
  background: #16a34a;
  font-size: 7px;
  font-weight: 800;
  color: #fff;
  letter-spacing: .02em;
}

.pv-float-alert {
  left: 6px;
  bottom: 2px;
  width: 196px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* ---- 5. Variantsly: option picker + rule chip -------------------------- */
.pv-var .pv-win {
  top: 2px;
  left: 0;
  right: 0;
  height: 224px;
}

.pv-opt {
  padding: 10px;
}

.pv-opt em {
  display: block;
  margin: 0 0 6px;
  font-style: normal;
  font-size: 7.5px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mm);
}

.pv-sw {
  display: flex;
  gap: 7px;
  margin-bottom: 11px;
}

.pv-sw i {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(10, 24, 56, .08);
}

.pv-sw i:nth-child(1) {
  background: #0a1838;
}

.pv-sw i:nth-child(2) {
  background: #f0614a;
}

.pv-sw i:nth-child(3) {
  background: #cfd8e6;
}

.pv-sw i:nth-child(4) {
  background: #16a34a;
}

.pv-sw i:nth-child(5) {
  background: #b08968;
}

.pv-sw i.on {
  box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px var(--a);
}

.pv-chips {
  display: flex;
  gap: 6px;
  margin-bottom: 11px;
}

.pv-chips b {
  padding: 4px 9px;
  border: 1px solid var(--br);
  border-radius: 6px;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--p);
}

.pv-chips b.on {
  border-color: var(--a);
  background: rgba(240, 97, 74, .08);
  color: #da3116;
}

.pv-chips b.off {
  color: #b6c0cd;
  border-style: dashed;
  text-decoration: line-through;
}

.pv-field {
  padding: 7px 9px;
  border: 1px solid var(--br);
  border-radius: 7px;
  font-size: 8.5px;
  color: #9aa6b5;
  margin-bottom: 10px;
}

.pv-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--a), var(--a-2));
  font-size: 9px;
  font-weight: 800;
  color: #fff;
  box-shadow: 0 6px 16px rgba(240, 97, 74, .32);
}

.pv-float-rule {
  right: 0;
  bottom: 2px;
  width: 158px;
}

.pv-rule {
  display: block;
  margin-top: 4px;
  font-size: 8.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--p);
}

.pv-rule s {
  text-decoration: none;
  color: var(--a);
}

/* ---- 6. Checkout Studio: summary + upsell ------------------------------ */
.pv-ck .pv-win {
  top: 0;
  left: 0;
  right: 0;
  height: 236px;
}

.pv-up {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 10px 9px;
  padding: 8px;
  border: 1px dashed rgba(240, 97, 74, .5);
  border-radius: 8px;
  background: rgba(240, 97, 74, .05);
}

.pv-up .pv-sq {
  flex: none;
  width: 24px;
  height: 24px;
}

.pv-up div {
  flex: 1;
  min-width: 0;
}

.pv-up b {
  display: block;
  font-size: 8.5px;
  font-weight: 800;
  color: var(--p);
}

.pv-up span {
  font-size: 7.5px;
  color: var(--m);
}

.pv-toggle {
  flex: none;
  width: 22px;
  height: 13px;
  border-radius: 99px;
  background: var(--a);
  position: relative;
}

.pv-toggle::after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #fff;
}

.pv-pay {
  margin: 0 10px 10px;
  padding: 9px;
  border-radius: 8px;
  background: var(--p);
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  color: #fff;
}

.pv-float-field {
  right: 0;
  bottom: 4px;
  width: 156px;
}

.pv-mini {
  margin-top: 5px;
  padding: 6px 8px;
  border: 1px solid var(--br);
  border-radius: 6px;
  font-size: 8.5px;
  font-weight: 700;
  color: var(--p);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pv-mini svg {
  width: 10px;
  height: 10px;
  color: var(--mm);
}

/* ------------------------------------------------------------ responsive - */
@media(max-width:1080px) {
  .pshow-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 640px;
    margin-inline: auto;
  }
}

@media(max-width:640px) {
  .pshow {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    min-height: 0;
  }

  .pshow-body {
    padding: 26px 26px 6px;
  }

  .pshow-art {
    height: 300px;
  }

  .pv {
    top: 6px;
    left: 26px;
    right: 14px;
    transform: none;
  }
}

@media(max-width:420px) {
  .pshow-art {
    height: 286px;
  }

  .pv {
    left: 18px;
  }
}

@media(prefers-reduced-motion:reduce) {

  .pshow,
  .pshow-more svg {
    transition: none;
  }

  .pshow:hover {
    transform: none;
  }

  .pshow:hover .pshow-more svg {
    transform: none;
  }
}

/* END PRODUCT SHOWCASE */

/* Other apps: standard section head with the CTA on the same row as the title */
.apps-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 32px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}

.apps-head-l {
  flex: 1 1 480px;
  min-width: 0;
}

.apps-head-l .prod-sub {
  margin-bottom: 0;
}

.apps-head-cta {
  flex: none;
}

.apps-head-cta svg {
  width: 15px;
  height: 15px;
}

@media(max-width:680px) {
  .apps-head {
    align-items: stretch;
    gap: 18px;
  }

  .apps-head-cta {
    width: 100%;
    justify-content: center;
    margin-bottom: 0;
  }
}

/* ==========================================================================
   WORK CARDS AS A GRID — case-studies.html reuses the homepage .wk-card so the
   two surfaces stay one component instead of two lookalikes.
   ========================================================================== */
#case-studies-showcase {
  padding: 72px 0 88px;
}

.wk-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.wk-grid .wk-card {
  flex: 1 1 auto;
  width: auto;
}

@media(max-width:1000px) {
  .wk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:680px) {
  .wk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  #case-studies-showcase {
    padding: 48px 0 60px;
  }
}

/* ==========================================================================
   CASE STUDY DETAIL — long-form template
   Hero + sticky nav + banded sections. Everything below the hero lives inside
   .page, so full-bleed bands use the same negative-margin trick as
   .prod-section.section-alt-block on the product pages.
   ========================================================================== */
.cs-hero {
  position: relative;
  overflow: hidden;
  padding: 76px 0 84px;
  background: linear-gradient(135deg, #0a2540 0%, #14365e 55%, #1d4a82 100%);
  color: #fff;
}

.cs-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 22% 28%, rgba(255, 106, 61, .22) 0%, transparent 48%),
    radial-gradient(circle at 78% 72%, rgba(91, 157, 220, .18) 0%, transparent 48%);
}

.cs-hero>.container {
  position: relative;
  z-index: 2;
}

/* .cs-hero-grid predates this template and centres itself; inside .container
   that double-pads, so neutralise its own box here. */
.cs-hero>.container>.cs-hero-grid {
  max-width: none;
  margin: 0;
  padding: 0;
}

.cs-hero .cs-eyebrow {
  background: rgba(255, 255, 255, .12);
  color: #ffd4c2;
  border: 1px solid rgba(255, 255, 255, .18);
}

.cs-hero h1 {
  margin: 16px 0 0;
}

.cs-hero .lede {
  margin: 16px 0 0;
  max-width: 54ch;
  color: rgba(255, 255, 255, .84);
}

.cs-hero-cta {
  margin-top: 34px;
}

/* --- sticky section nav (shares .prod-nav from the product pages) --- */
.cs-hero+.prod-nav {
  top: var(--header-h);
}

/* --- full-bleed tinted band inside .page --- */
.page>.cs-band {
  background: var(--bga);
  margin: 0 calc(50% - 50vw);
  padding: 72px max(24px, calc(50vw - 600px + 24px));
}

.page>.cs-band-tight {
  padding-top: 56px;
  padding-bottom: 56px;
}

.cs-band-h {
  margin-bottom: 8px;
}

/* --- results at a glance --- */
.cs-metrics-4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 30px;
}

.cs-metric {
  padding: 24px 22px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

.cs-metric strong {
  display: block;
  font-size: 34px;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  color: var(--a);
  font-feature-settings: "tnum";
}

.cs-metric-l {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  font-weight: 700;
  color: var(--p);
}

.cs-metric-n {
  display: block;
  margin-top: 3px;
  font-size: 12.5px;
  color: var(--mm);
}

/* --- overview: About prose + At a glance card --- */
.cs-split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 48px;
  margin-top: 26px;
  align-items: start;
}

.cs-split-copy p {
  margin: 0 0 16px;
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--m);
  max-width: 60ch;
}

.cs-split-copy p:last-child {
  margin-bottom: 0;
}

.cs-facts {
  padding: 26px;
  background: var(--bga);
  border: 1px solid var(--br);
  border-radius: 18px;
}

.cs-facts h3 {
  margin: 0 0 16px !important;
  font-size: 12px !important;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm);
}

.cs-facts dl {
  margin: 0;
  display: grid;
  gap: 14px;
}

.cs-facts dl>div {
  display: grid;
  gap: 3px;
}

.cs-facts dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mm);
}

.cs-facts dd {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.45;
  color: var(--p);
}

.cs-facts-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--br);
  font-size: 13.5px;
  font-weight: 700;
  color: #da3116;
  text-decoration: none;
}

.cs-facts-cta svg {
  width: 15px;
  height: 15px;
  transition: transform .18s cubic-bezier(.4, 0, .2, 1);
}

.cs-facts-cta:hover svg {
  transform: translateX(4px);
}

/* --- challenge paired with approach --- */
.cs-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 30px;
}

.cs-pair-card {
  position: relative;
  padding: 32px;
  border-radius: 20px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  box-shadow: var(--shadow-sm);
}

.cs-pair-card h3 {
  margin: 14px 0 12px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--p);
}

.cs-pair-card p {
  margin: 0;
  font-size: 15px;
  line-height: 1.72;
  color: var(--m);
}

.cs-pair-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -.01em;
  font-feature-settings: "tnum";
}

.cs-pair-problem .cs-pair-n {
  background: rgba(10, 24, 56, .07);
  color: var(--p);
}

.cs-pair-solve {
  background: linear-gradient(160deg, #0a1838 0%, #14365e 100%);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

.cs-pair-solve .cs-pair-n {
  background: linear-gradient(135deg, var(--a), var(--a-2));
  color: #fff;
}

.cs-pair-solve h3 {
  color: #fff;
}

.cs-pair-solve p {
  color: rgba(255, 255, 255, .82);
}

/* --- what we built --- */
.cs-build-grid {
  margin-top: 30px;
}

/* --- outcome + testimonial --- */
.cs-outcome {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 40px;
  margin-top: 26px;
  align-items: start;
}

.cs-outcome-copy p {
  margin: 0;
  font-size: 16px;
  line-height: 1.75;
  color: var(--m);
  max-width: 58ch;
}

.cs-testimonial {
  position: relative;
  margin: 0;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(160deg, #0a1838 0%, #14365e 100%);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.cs-quote-mark {
  position: absolute;
  top: -18px;
  right: 16px;
  font-size: 120px;
  line-height: 1;
  font-weight: 800;
  color: rgba(255, 255, 255, .07);
}

.cs-stars {
  position: relative;
  font-size: 14px;
  letter-spacing: .16em;
  color: #f0b429;
}

.cs-testimonial blockquote {
  position: relative;
  margin: 14px 0 20px;
}

.cs-testimonial blockquote p {
  margin: 0;
  font-size: 17px;
  line-height: 1.62;
  font-weight: 500;
  color: #fff;
}

.cs-testimonial figcaption {
  position: relative;
  display: grid;
  gap: 2px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}

.cs-testimonial figcaption strong {
  font-size: 14px;
  font-weight: 800;
  color: #fff;
}

.cs-testimonial figcaption span {
  font-size: 13px;
  color: rgba(255, 255, 255, .7);
}

/* --- tech stack --- */
.cs-stack {
  margin-top: 30px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 26px 32px;
}

/* a later global bumps card h3s; the stack labels are labels, not headings */
.cs-stack .stack-group h3 {
  font-size: 12px !important;
  line-height: 1.3 !important;
  letter-spacing: .12em;
}

.cs-stack .stack-group ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.cs-stack .stack-group li {
  padding: 9px 12px;
  background: #fff;
  border: 1px solid var(--br);
  border-radius: 9px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--p);
}

/* ------------------------------------------------------------- responsive -- */
@media(max-width:1000px) {
  .tlx-revenue-leaks:not(.shopify-section), .tlx-capabilities-grid:not(.shopify-section),
  .hv-section
  {padding-block:56px !important;}
  .cs-metrics-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-split,
  .cs-outcome {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }

  .cs-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media(max-width:760px) {
  .cs-hero {
    padding: 40px 0 52px;
  }

  .cs-hero h1 {
    max-width: none;
  }

  .cs-pair {
    grid-template-columns: minmax(0, 1fr);
  }

  .page>.cs-band {
    padding-top: 56px;
    padding-bottom: 56px;
  }
}

@media(max-width:560px) {

  .cs-metrics-4,
  .cs-stack {
    grid-template-columns: minmax(0, 1fr);
  }

  .cs-metric strong {
    font-size: 30px;
  }

  .cs-pair-card,
  .cs-testimonial {
    padding: 24px;
  }
}

@media(prefers-reduced-motion:reduce) {
  .cs-facts-cta svg {
    transition: none;
  }

  .cs-facts-cta:hover svg {
    transform: none;
  }
}

/* END CASE STUDY DETAIL */

/* ==== LIBRARY PATTERNS - logo tiles, process accordion, hover cards ==== */
/* --- 6. photo marquee ---------------------------------------------------- */
/* Two full-bleed rows travelling opposite ways. The rows sit outside .container
   on purpose so they run edge to edge; only the heading and note are contained. */
.pm-section{padding:clamp(56px,7vw,96px) 0;overflow:hidden;}
.pm-head{max-width:760px;margin:0 auto;text-align:center;}
.pm-head h2{margin:12px 0 0;text-wrap:balance;}
.pm-head .lede{margin:14px auto 0;}

.pm-rows{display:flex;flex-direction:column;gap:clamp(10px,1.4vw,18px);
  margin-top:clamp(34px,4vw,52px);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);}
.pm-row{display:flex;gap:clamp(10px,1.4vw,18px);width:max-content;
  will-change:transform;animation:pm-left 68s linear infinite;
  /* the marquee reads the same either way round; pin it so RTL does not
     silently swap which row goes which direction */
  direction:ltr;}
.pm-row.pm-reverse{animation-name:pm-right;animation-duration:82s;}

/* each row holds its image set twice, so wrapping at 50% is seamless */
@keyframes pm-left  {from{transform:translateX(0);}    to{transform:translateX(-50%);}}
@keyframes pm-right {from{transform:translateX(-50%);} to{transform:translateX(0);}}

.pm-row img{display:block;height:clamp(150px,19vw,250px);width:auto;
  border-radius:16px;object-fit:cover;box-shadow:var(--shadow);
  border:1px solid var(--br);background:var(--bga);flex:0 0 auto;}
/* the source shots are all one shape, so vary the crop to break the rhythm */
.pm-row img:nth-child(4n+1){aspect-ratio:16/10;}
.pm-row img:nth-child(4n+2){aspect-ratio:1/1;}
.pm-row img:nth-child(4n+3){aspect-ratio:4/3;}
.pm-row img:nth-child(4n+4){aspect-ratio:3/4;}

.pm-rows:hover .pm-row{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){.pm-row{animation:none;}}
@media(max-width:640px){
  .pm-row img{height:clamp(120px,32vw,170px);border-radius:12px;}
}
.pm-section .demo-note{margin-top:clamp(26px,3vw,38px);}

/* --- 5. vertical marquee ------------------------------------------------- */
/* Columns of screenshots creeping vertically beside the copy. Sides are set
   with grid-column only, so this mirrors under [dir="rtl"] for free; the motion
   is on translateY, which direction does not affect. */
.vs-section{padding:clamp(56px,7vw,96px) 0;overflow:hidden;}
.vs-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(32px,5vw,72px);align-items:center;}
.vs-copy{grid-column:1;}
.vs-marquee{grid-column:2;}

.vs-copy h2{margin:12px 0 0;text-wrap:balance;}
.vs-copy .lede{margin:14px 0 0;max-width:46ch;}

.vs-stats{list-style:none;margin:clamp(28px,3.4vw,40px) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(20px,2.6vw,30px);}
.vs-stats li{display:flex;align-items:flex-start;gap:13px;}
.vs-stats svg{flex:0 0 auto;width:30px;height:30px;color:var(--a);margin-top:2px;}
.vs-stats strong{display:block;font-size:clamp(24px,2.8vw,32px);font-weight:800;
  letter-spacing:-.03em;color:var(--p);line-height:1.1;font-variant-numeric:tabular-nums;}
.vs-stats li>span>span{display:block;font-size:13.5px;color:var(--m);margin-top:3px;
  line-height:1.4;}
.vs-cta{margin-top:clamp(28px,3.4vw,38px);align-self:start;}
.vs-cta svg{width:15px;height:15px;}

/* the rail. Fading the top and bottom edges is what makes the loop read as
   continuous rather than as a list that stops. */
.vs-marquee{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);height:clamp(430px,50vw,600px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);
  mask-image:linear-gradient(to bottom,transparent,#000 11%,#000 89%,transparent);}
.vs-col{overflow:hidden;}
.vs-track{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,16px);
  will-change:transform;animation:vs-up 46s linear infinite;}
.vs-col-down .vs-track{animation-name:vs-down;animation-duration:54s;}
/* The case screenshots are landscape (700x351), so a portrait card has to crop
   them. 4/5 keeps enough of each store to stay recognisable; swap in portrait
   assets and this can go taller without losing anything. */
.vs-track img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  object-position:top center;border-radius:14px;box-shadow:var(--shadow);
  border:1px solid var(--br);background:var(--bga);}

/* the track holds the set twice, so wrapping at 50% is seamless */
@keyframes vs-up   {from{transform:translateY(0);}      to{transform:translateY(-50%);}}
@keyframes vs-down {from{transform:translateY(-50%);}   to{transform:translateY(0);}}

.vs-marquee:hover .vs-track{animation-play-state:paused;}
@media(prefers-reduced-motion:reduce){
  .vs-track{animation:none;}
  .vs-marquee{height:clamp(340px,42vw,460px);}
}

@media(max-width:900px){
  .vs-grid{grid-template-columns:1fr;gap:34px;}
  .vs-copy,.vs-marquee{grid-column:1;}
  .vs-copy{grid-row:1;}
  .vs-marquee{grid-row:2;height:clamp(320px,64vw,440px);}
  .vs-copy .lede{max-width:none;}
}
@media(max-width:560px){
  .vs-stats{gap:18px;}
  /* three columns get too narrow to read on a phone */
  .vs-marquee{grid-template-columns:repeat(2,minmax(0,1fr));}
  .vs-marquee .vs-col:nth-child(3){display:none;}
}

/* --- 4. media + text ----------------------------------------------------- */
/* Sides are set with grid-column only, so the whole thing mirrors for free
   under [dir="rtl"] - column 1 is the start edge, whichever way the page runs.
   No left/right properties anywhere in here, deliberately. */
.mt-section{padding:clamp(56px,7vw,96px) 0;}
.mt-head{max-width:760px;margin:0 auto clamp(34px,4vw,58px);text-align:center;}
.mt-head .lede{margin:14px auto 0;}
.mt-head code{background:var(--bga);border:1px solid var(--br-2);border-radius:5px;
  padding:1px 6px;font-size:.9em;direction:ltr;unicode-bidi:isolate;}

.mt-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;
  gap:clamp(26px,4vw,64px);}
.mt-row + .mt-row{margin-top:clamp(44px,6vw,88px);}

/* default: media in the start column, copy in the end column */
.mt-media{grid-column:1;grid-row:1;margin:0;}
.mt-body {grid-column:2;grid-row:1;}
/* the one class that swaps them */
.mt-row.mt-flip .mt-media{grid-column:2;}
.mt-row.mt-flip .mt-body {grid-column:1;}

.mt-media img{display:block;width:100%;height:auto;aspect-ratio:700/351;object-fit:cover;
  border-radius:var(--r-lg);box-shadow:var(--shadow-lg);
  transition:transform .45s cubic-bezier(.4,0,.2,1),box-shadow .45s cubic-bezier(.4,0,.2,1);}
.mt-row:hover .mt-media img{transform:translateY(-5px);box-shadow:var(--shadow-xl);}

.mt-kicker{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--a);margin-bottom:12px;}
.mt-body h3{font-size:clamp(19px,2.2vw,27px)!important;font-weight:800;letter-spacing:-.025em;
  line-height:1.22!important;color:var(--p);margin:0 0 14px;text-wrap:balance;}
.mt-body>p{font-size:15px;line-height:1.7;color:var(--m);margin:0 0 18px;max-width:52ch;}

.mt-points{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:9px;}
.mt-points li{position:relative;font-size:14.5px;color:var(--p);font-weight:500;
  padding-inline-start:24px;}
.mt-points li::before{content:"";position:absolute;inset-inline-start:0;top:.45em;
  width:9px;height:9px;border-radius:50%;background:var(--a);opacity:.85;}

.mt-cta{align-self:start;}
.mt-cta svg{width:15px;height:15px;}

@media(prefers-reduced-motion:reduce){.mt-media img{transition:none;}}

/* Mobile: image on top, always - the flip class is ignored so the reading order
   never depends on which side the picture happened to be on. */
@media(max-width:860px){
  .mt-row{grid-template-columns:1fr;gap:20px;}
  .mt-media,.mt-row.mt-flip .mt-media{grid-column:1;grid-row:1;}
  .mt-body, .mt-row.mt-flip .mt-body {grid-column:1;grid-row:2;}
  .mt-body>p{max-width:none;}
}

/* --- 1. logo tiles ------------------------------------------------------ */
.lt-section{position:relative;overflow:hidden;background:var(--bgd);color:#fff;
  padding:clamp(56px,7vw,96px) 0;}
.lt-mesh{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:radial-gradient(60% 70% at 15% 0%,rgba(42,68,122,.55),transparent 60%),
             radial-gradient(50% 60% at 85% 100%,rgba(240, 97, 74,.18),transparent 62%);}
.lt-section>.container{position:relative;}
.lt-head{max-width:720px;margin:0 ;text-align:left; padding-bottom: 20px;}
.lt-head .eyebrow{color:var(--a-2);}
.lt-head h2{color:#fff;margin:12px 0 0;}
.lt-head .lede{color:rgba(255,255,255,.72);margin:14px 0 0;}
.lt-grid{list-style:none;margin:0;padding:0;display:grid;gap:clamp(20px,2.6vw,34px);
  grid-template-columns:repeat(6,minmax(0,1fr));}
.lt-cell{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.lt-tile{display:grid;place-items:center;width:100%;max-width:112px;aspect-ratio:1;
  border-radius:var(--r-lg);background:var(--lt-bg,#fff);color:var(--lt-fg,var(--p));
  box-shadow:0 18px 34px -14px rgba(0,0,0,.6);
  transition:transform .35s cubic-bezier(.4,0,.2,1),box-shadow .35s cubic-bezier(.4,0,.2,1);}
.lt-cell:hover .lt-tile{transform:translateY(-6px);box-shadow:0 26px 44px -14px rgba(0,0,0,.7);}
.lt-tile img{width:58%;height:58%;object-fit:contain;}
.lt-mono{font-size:clamp(15px,1.7vw,22px);font-weight:800;letter-spacing:-.02em;}
.lt-label{font-size:16px;font-weight:700;color:rgba(255,255,255,.86);line-height:1.3;}
.lt-section .demo-note{margin-top:clamp(28px,3.4vw,44px);color:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.28);}
.lt-section .demo-note code{background:rgba(255,255,255,.12);color:#fff;
  border-radius:5px;padding:1px 6px;}
@media(max-width:1000px){.lt-grid{grid-template-columns:repeat(4,minmax(0,1fr));}}
@media(max-width:620px){.lt-grid{grid-template-columns:repeat(3,minmax(0,1fr));}}

/* --- 2. process accordion ---------------------------------------------- */
.pa-section{padding:clamp(56px,7vw,96px) 0 0;}
.pa-head{max-width:760px;margin:0 auto clamp(30px,3.6vw,46px);text-align:center;}
.pa-head .lede{margin:14px auto 0;}
.pa-rail{display:flex;gap:6px;padding:0 clamp(12px,3vw,24px) clamp(48px,6vw,80px);
  align-items:stretch;min-height:clamp(300px,38vw,420px);}
.pa-panel{position:relative;flex:0 0 clamp(58px,5vw,74px);display:flex;cursor:pointer;
  border-radius:var(--r);overflow:hidden;background:var(--grad);color:#fff;
  transition:flex-grow .5s cubic-bezier(.4,0,.2,1),flex-basis .5s cubic-bezier(.4,0,.2,1),
             background .35s cubic-bezier(.4,0,.2,1);}
.pa-panel:focus-visible{outline:3px solid var(--a);outline-offset:3px;}
.pa-panel.is-open{flex:1 1 auto;background:var(--bga);color:var(--p);
  box-shadow:var(--shadow-lg);}
.pa-num{position:absolute;top:18px;left:0;right:0;text-align:center;font-size:15px;
  font-weight:800;letter-spacing:.04em;color:inherit;opacity:.95;}
.pa-panel.is-open .pa-num{left:22px;right:auto;text-align:left;color:var(--mm);}
.pa-spine{position:absolute;bottom:22px;left:50%;transform:translateX(-50%) rotate(180deg);
  writing-mode:vertical-rl;font-size:12px;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;transition:opacity .25s;}
.pa-panel.is-open .pa-spine{opacity:0;pointer-events:none;}
.pa-body{padding:56px clamp(22px,3vw,40px) 34px;max-width:620px;
  animation:pa-in .45s cubic-bezier(.4,0,.2,1) both;}
@keyframes pa-in{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}
.pa-body h3{font-size:clamp(19px,2.1vw,26px)!important;font-weight:800;letter-spacing:-.02em;
  color:var(--a);margin:0 0 12px;line-height:1.2!important;}
.pa-lede{font-size:15px;font-weight:600;color:var(--p);margin:0 0 12px;line-height:1.5;}
.pa-desc{font-size:14.5px;color:var(--m);margin:0;line-height:1.7;}
@media(prefers-reduced-motion:reduce){.pa-panel,.pa-body{transition:none;animation:none;}}
@media(max-width:820px){
  .pa-rail{flex-direction:column;min-height:0;gap:8px;}
  .pa-panel{flex:0 0 auto;}
  .pa-spine{position:static;transform:none;writing-mode:horizontal-tb;
    padding:20px 20px 20px 62px;}
  /* the spine is static here, so hiding it with opacity alone would still
     reserve its width and shove the open panel's copy to the right */
  .pa-panel.is-open .pa-spine{display:none;}
  .pa-num{top:18px;left:22px;right:auto;text-align:left;}
  .pa-body{padding:8px 22px 28px 62px;}
}

/* --- 3. hover-reveal cards --------------------------------------------- */
.hv-head{max-width:760px;margin:0 auto clamp(30px,3.6vw,46px);text-align:center;}
.hv-head .lede{margin:14px auto 0;}
.hv-grid{display:grid;gap:clamp(16px,2vw,26px);grid-template-columns:repeat(3,minmax(0,1fr));}
.hv-card{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-lg);
  min-height:clamp(260px,26vw,320px);display:flex;flex-direction:column;
  justify-content:flex-end;background:var(--p);cursor:pointer;
  box-shadow:var(--shadow);transition:box-shadow .4s cubic-bezier(.4,0,.2,1),
             transform .4s cubic-bezier(.4,0,.2,1);}
.hv-card:hover,.hv-card:focus-visible,.hv-card.is-open{box-shadow:var(--shadow-xl);
  transform:translateY(-4px);}
.hv-card:focus-visible{outline:3px solid var(--a);outline-offset:3px;}
.hv-cover{position:absolute;inset:0;z-index:-2;background:var(--hv-ink,var(--p));}
.hv-mesh{position:absolute;inset:0;opacity:.9;
  background:radial-gradient(70% 60% at 20% 15%,color-mix(in srgb,var(--hv-brand) 55%,transparent),transparent 65%),
             radial-gradient(60% 55% at 85% 90%,color-mix(in srgb,var(--hv-brand) 30%,transparent),transparent 60%),
             linear-gradient(160deg,rgba(255,255,255,.10),rgba(0,0,0,.35));}
.hv-card::after{content:"";position:absolute;inset:0;z-index:-1;background:var(--p);
  opacity:0;transition:opacity .4s cubic-bezier(.4,0,.2,1);}
.hv-card:hover::after,.hv-card:focus-visible::after,.hv-card.is-open::after{opacity:.94;}
.hv-face{position:relative;display:flex;align-items:center;gap:14px;
  padding:clamp(18px,2vw,24px);color:#fff;
  transition:transform .4s cubic-bezier(.4,0,.2,1);}
.hv-badge{flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;
  border-radius:50%;background:#fff;color:var(--hv-brand,var(--p));
  font-size:14px;font-weight:800;letter-spacing:-.02em;}
.hv-face h3{flex:1;font-size:15.5px!important;font-weight:700;line-height:1.3!important;
  margin:0;color:#fff;letter-spacing:-.01em;}
.hv-go{flex:0 0 auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  border:1.5px solid var(--a);color:var(--a);transition:background .3s,color .3s;}
.hv-go svg{width:15px;height:15px;}
.hv-card:hover .hv-go,.hv-card:focus-visible .hv-go,.hv-card.is-open .hv-go{
  background:var(--a);color:#fff;}
.hv-reveal{position:absolute;inset:auto 0 0;padding:0 clamp(18px,2vw,24px);
  color:rgba(255,255,255,.86);
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.4,0,.2,1),opacity .3s,padding .45s cubic-bezier(.4,0,.2,1);}
.hv-card:hover .hv-reveal,.hv-card:focus-visible .hv-reveal,.hv-card.is-open .hv-reveal{
  max-height:260px;opacity:1;padding:0 clamp(18px,2vw,24px) clamp(18px,2vw,24px);
  position:relative;inset:auto;}
.hv-reveal p{margin:0;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.86);}
@media(prefers-reduced-motion:reduce){.hv-card,.hv-reveal,.hv-card::after{transition:none;}}
@media(max-width:900px){.hv-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.hv-grid{grid-template-columns:1fr;}
  .hv-reveal{max-height:260px;opacity:1;position:relative;inset:auto;
    padding:0 20px 20px;}}
/* END LIBRARY PATTERNS */

/* ==== PRODUCTS ON THE HOMEPAGE (tp-) ==== */
/* The cards are .pshow, styled by the PRODUCT SHOWCASE block products.html
   already uses. Nothing about the card itself is restyled here - this only
   sizes it for the shared slider track and tightens the inner padding, since a
   track column is narrower than a grid cell. */
/* .tp-section{padding:clamp(56px,7vw,96px) 0;} */
.tp-section .slider-nav{gap:10px;}
.tp-section .demo-note{margin:0 0 22px;}

/* one column per product; .pshow is a split card, so it needs more width than
   the 340px the track defaults to */
#pr-track{grid-auto-columns:clamp(300px,40vw,470px);}
#pr-track .pshow{min-height:0;height:100%;}
#pr-track .pshow-body{padding:26px 2px 26px 26px;}
#pr-track .pshow-list li{font-size:13px;}

/* The card is a split (copy | mock). Track columns are clamp(300,40vw,470), so
   below roughly a 1000px viewport a column is under 400px and the copy side
   drops to ~130px - one word per line. Stack the card from there, not at 760px.
   */
@media(max-width:1000px){
  #pr-track{grid-auto-columns:clamp(280px,62vw,380px);}
  #pr-track .pshow{grid-template-columns:minmax(0,1fr);gap:0;}
  #pr-track .pshow-body{padding:24px 24px 6px;}
  [dir="rtl"] #pr-track .pshow-body{padding:24px 24px 6px;}
}
@media(max-width:600px){.tp-section .slider-head{align-items:flex-start;}}
/* END PRODUCTS ON THE HOMEPAGE */

/* ==== LEGAL + SITEMAP PAGES ==== */
.legal-section{padding:clamp(44px,5vw,72px) 0 clamp(56px,7vw,96px);}
.legal-updated{font-size:12.5px;color:var(--mm);margin:0 0 28px;
  text-transform:uppercase;letter-spacing:.08em;font-weight:700;}
.legal-section h2{font-size:clamp(17px,1.9vw,21px)!important;font-weight:800;
  letter-spacing:-.02em;color:var(--p);margin:34px 0 12px;scroll-margin-top:90px;}
.legal-section h2:first-of-type{margin-top:0;}
.legal-section p{font-size:15px;line-height:1.75;color:var(--m);margin:0 0 14px;}
.legal-section a{color:var(--a);}
.legal-list{margin:0 0 16px;padding:0;list-style:none;display:flex;
  flex-direction:column;gap:9px;}
.legal-list li{position:relative;padding-inline-start:20px;font-size:15px;
  line-height:1.7;color:var(--m);}
.legal-list li::before{content:"";position:absolute;inset-inline-start:0;top:.62em;
  width:6px;height:6px;border-radius:50%;background:var(--a);opacity:.8;}
.legal-section code{background:var(--bga);border:1px solid var(--br-2);border-radius:5px;
  padding:1px 6px;font-size:.9em;direction:ltr;unicode-bidi:isolate;}

/* anything still needing a lawyer or a decision is impossible to miss */
.legal-banner{display:flex;flex-direction:column;gap:6px;padding:16px 18px;
  margin:0 0 28px;border:1px dashed var(--a);border-radius:var(--r);
  background:rgba(240, 97, 74,.06);}
.legal-banner strong{font-size:14px;color:#da3116;}
.legal-banner span{font-size:13.5px;line-height:1.6;color:var(--m);}
.legal-todo{display:inline;background:rgba(240, 97, 74,.12);
  border-bottom:2px dotted var(--a);color:#da3116;font-weight:600;padding:1px 4px;
  border-radius:3px;}

/* two columns: the text, and a sticky rail of related legal pages */
.legal-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:clamp(28px,4vw,60px);align-items:start;}
.legal-body{min-width:0;max-width:72ch;}

.legal-side{position:sticky;top:96px;display:flex;flex-direction:column;
  gap:16px;min-width:0;}
.legal-card{border:1px solid var(--br);border-radius:var(--r);background:#fff;
  padding:20px;box-shadow:var(--shadow-sm);}
.legal-card h2{font-size:12px!important;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm);margin:0 0 14px!important;}
.legal-card p{font-size:13.5px;line-height:1.6;margin:0 0 14px;}

/* The links are the mega menu's .mega-links chevron list, styled by that block.
   Only the spacing inside the card is set here. */
.legal-side .mega-links{margin:0;}
.legal-side .mega-links a{padding:7px 0;}

/* Below the point where a 300px rail leaves too little for the text, the two
   columns stack. Without this the content column collapses to a few pixels and
   the copy wraps one word per line. */
@media(max-width:960px){
  .legal-layout{grid-template-columns:minmax(0,1fr);}
  .legal-body{max-width:none;}
  .legal-side{position:static;}
}

/* sitemap */
.sm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(22px,3vw,40px);}
.sm-group h2{font-size:13px!important;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mm);margin:0 0 14px;
  display:flex;align-items:center;gap:8px;}
.sm-count{font-size:11px;font-weight:700;color:var(--a);background:rgba(240, 97, 74,.1);
  border-radius:999px;padding:2px 8px;letter-spacing:0;}
.sm-group ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.sm-group li{display:flex;flex-direction:column;gap:2px;}
.sm-group a{font-size:14.5px;font-weight:600;color:var(--p);text-decoration:none;
  line-height:1.35;}
.sm-group a:hover{color:var(--a);}
.sm-group li>span{font-size:11.5px;color:var(--mm);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  direction:ltr;unicode-bidi:isolate;}
@media(max-width:900px){.sm-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:560px){.sm-grid{grid-template-columns:1fr;}}
/* END LEGAL + SITEMAP */

/* ==== ANNOUNCE BAR EMAIL ==== */
/* .ann-mail carries .ann-phone too, so colour, hover and focus come for free.
   The label is the longer of the two, so it is the first to go when space runs
   short - the icon stays, and the address is still on the contact page. */
.ann-mail span{display:inline;}
@media(max-width:1100px){.ann-mail span{display:none;}}
@media(max-width:640px){.ann-mail{display:none;}
  .announce-controls .ann-sep:first-of-type{display:none;}}
/* END ANNOUNCE BAR EMAIL */

/* ==== COMING SOON (standalone page) ==== */
/* One self-contained screen. No header or footer exists on this page, so
   everything it needs is here - it must not depend on the site layout. */
.cmg-body{margin:0;background:var(--bgd);}
.cmg{position:relative;min-height:100svh;display:grid;
  place-items:center;overflow:hidden;padding:40px 24px;color:#fff;}
.cmg-bg{position:absolute;inset:0;background:var(--grad);}
.cmg-mesh{position:absolute;inset:0;opacity:.75;
  background:radial-gradient(58% 62% at 18% 8%,rgba(240, 97, 74,.22),transparent 62%),
             radial-gradient(52% 58% at 84% 92%,rgba(58,95,168,.5),transparent 64%);}
.cmg-inner{position:relative;z-index:2;width:100%;max-width:660px;text-align:center;
  display:flex;flex-direction:column;align-items:center;}

.cmg-brand{display:block;line-height:0;margin-bottom:clamp(30px,5vw,52px);}
.cmg-brand img{height:44px;width:auto;display:block;}
@media(max-width:600px){.cmg-brand img{height:36px;}}

.cmg-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;
  font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--a-2);
  background:rgba(240, 97, 74,.12);border:1px solid rgba(240, 97, 74,.28);
  border-radius:999px;padding:6px 14px;}
.cmg-pulse{width:7px;height:7px;border-radius:50%;background:var(--a);
  box-shadow:0 0 0 0 rgba(240, 97, 74,.6);animation:cmg-pulse 2.4s infinite;}
@keyframes cmg-pulse{
  70%{box-shadow:0 0 0 9px rgba(240, 97, 74,0);}
  100%{box-shadow:0 0 0 0 rgba(240, 97, 74,0);}}

.cmg h1{font-size:clamp(30px,5.4vw,54px)!important;font-weight:800;line-height:1.08!important;
  letter-spacing:-.03em;color:#fff;margin:22px 0 0;text-wrap:balance;}
.cmg h1 em{font-style:normal;color:var(--a);}
.cmg-lede{font-size:clamp(15px,1.7vw,17px);line-height:1.7;color:rgba(255,255,255,.78);
  margin:18px 0 0;max-width:52ch;}

.cmg-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;
  margin-top:clamp(28px,4vw,38px);}
.cmg-actions .btn{gap:9px;}
.cmg-actions .btn svg{width:16px;height:16px;}
.cmg-actions .btn-s{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.22);
  color:#fff;}
.cmg-actions .btn-s:hover{background:rgba(255,255,255,.14);}

.cmg-routes{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:10px 26px;margin:clamp(30px,4vw,44px) 0 0;padding:clamp(22px,3vw,28px) 0 0;
  width:100%;border-top:1px solid rgba(255,255,255,.14);}
.cmg-routes a{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;
  font-weight:600;color:rgba(255,255,255,.8);text-decoration:none;
  transition:color .25s cubic-bezier(.4,0,.2,1);}
.cmg-routes a:hover{color:#fff;}
.cmg-routes svg{width:15px;height:15px;color:var(--a);}
.cmg-routes a:focus-visible{outline:2px solid var(--a);outline-offset:4px;border-radius:5px;}

@media(prefers-reduced-motion:reduce){.cmg-pulse{animation:none;}}
/* END COMING SOON */

/* ==== BRAND LOGO (real artwork) ==== */
/* The lockup is now one image - the mark, wordmark and tagline are all in the
   artwork, so .brand-logo / .brand-text are no longer rendered. Height drives
   the size; width follows the intrinsic ratio. */
/* 38px in the header. The tagline baked into the artwork is essentially
   decorative at this size - a mark+wordmark variant without it would read
   better here if one is ever produced. */
.brand-img{display:block;height:38px;width:auto;max-width:100%;}
.brand picture{display:block;line-height:0;}
.site-footer .brand-img{height:40px;}
@media(max-width:1100px){.brand-img{height:34px;}}
@media(max-width:600px){.brand-img{height:30px;}.site-footer .brand-img{height:40px !important;}}

/* the artwork carries its own direction; never mirror it in RTL */
[dir="rtl"] .brand-img{transform:none;}
/* END BRAND LOGO */

/* WORK - COMBINED PORTFOLIO + CASE STUDIES */
.wk-section {
  /* padding: 80px 0; */
  /* the track's 100vw bleed must not become page-level horizontal scroll */
  overflow-x: clip;
}

.wk-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 28px;
}

.wk-head-copy h2 {
  margin: 14px 0 0;
}

.wk-lede {
  color: var(--m);
  max-width: 620px;
  margin: 10px 0 0;
  line-height: 1.65;
}

.wk-nav {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  padding-bottom: 2px;
}

.wk-head-btn {
  flex: none;
  white-space: nowrap;
  margin-left: 6px;
}

/* --- filter tabs --- */
.wk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 30px;
}

.wk-tab {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--p);
  background: #fff;
  border: 1.5px solid var(--br);
  border-radius: 99px;
  padding: 9px 18px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all .2s cubic-bezier(.4, 0, .2, 1);
}

.wk-tab span {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--mm);
  background: var(--bga);
  border-radius: 99px;
  padding: 2px 8px;
  transition: inherit;
}

.wk-tab:hover {
  border-color: rgba(240, 97, 74, .45);
  color: var(--a);
}
.wk-tab.is-active {
    background: var(--p);
    border-color: var(--p);
    color: #fff;
}
.wk-tab.is-active span {
    background: rgba(255, 255, 255, .16);
    color: #fff;
}

.wk-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .18);
}

/* --- slider track ---
   Full-bleed to the viewport like #portfolio-slider and #reviews-slider: the
   negative margins break out of .container, and the side padding pulls the
   first card back into line with the heading above it. At scrollLeft 0 the
   first card's left edge sits on the container's left edge. */
.wk-track {
  display: flex;
  gap: 24px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(24px, calc(50vw - 600px + 24px));
  padding-right: max(24px, calc(50vw - 600px + 24px));
  /* --shadow-xl is 0 32px 64px -20px, so it reaches 44px below the card and
     12px to each side; the hover lift adds 5px on top. Without this padding
     the scroll box clips the shadow and the cards read flatter than the ones
     in #case-studies-showcase. No scroll-snap and no CSS scroll-behavior:
     the loop advances by 1px a tick and snapping fights it. */
  padding-top: 16px;
  padding-bottom: 52px;
  margin-top: -16px;
  margin-bottom: -22px;
}

.wk-track>* img,
.wk-track>* svg {
  -webkit-user-drag: none;
  pointer-events: none;
}

.wk-track::-webkit-scrollbar {
  display: none;
}

.wk-track:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px rgba(240, 97, 74, .18);
  border-radius: 22px;
}

.wk-track.dragging {
  cursor: grabbing;
}

.wk-track.dragging * {
  pointer-events: none;
}

/* card surface + hover are copied from .cs-show-card in
   #case-studies-showcase so the two sections feel like one component */
.wk-card {
  /* fixed width, not a percentage: the track is viewport-wide, so a percentage
     would size cards against the bleed rather than the container.
     368px x 3 + two 24px gaps == the 1152px container content width. */
  flex: 0 0 368px;
  background: #fff;
  border: 1.5px solid var(--br-2);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: all .25s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}

.wk-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-xl);
  border-color: rgba(240, 97, 74, .3);
}

/* --- cover --- */
.wk-cover {
  position: relative;
  height: 196px;
  overflow: hidden;
  background: var(--bga);
  flex: none;
}

.wk-shot {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .3s;
}

.wk-card:hover .wk-shot {
  transform: scale(1.05);
}

.wk-cover-grad {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wk-cover .bg {
  position: absolute;
  inset: 0;
  transition: transform .3s;
}

.wk-cover .mesh {
  position: absolute;
  inset: 0;
}

.wk-card:hover .wk-cover .bg {
  transform: scale(1.05);
}

.wk-inits {
  position: relative;
  z-index: 1;
  font-size: 72px;
  font-weight: 900;
  letter-spacing: -2px;
  color: rgba(255, 255, 255, .4);
}

.wk-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 5px 11px;
  border-radius: 99px;
}

.wk-badge-case {
  background: var(--a);
  color: #fff;
}

.wk-badge-project {
  background: rgba(255, 255, 255, .95);
  color: var(--p);
}

.wk-label {
  position: absolute;
  bottom: 14px;
  left: 14px;
  z-index: 2;
  font-size: 11px;
  font-weight: 600;
  color: var(--p);
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(6px);
  padding: 5px 11px;
  border-radius: 99px;
}

/* --- body --- */
.wk-body {
  padding: 24px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.wk-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.wk-tag {
  padding: 3px 10px;
  background: var(--bga);
  color: var(--p);
  border-radius: 99px;
  font-size: 11px;
  font-weight: 600;
}

.wk-body h3 {
  font-size: 19px;
  line-height: 1.3;
  margin: 0 0 8px;
  color: var(--p);
  letter-spacing: -.2px;
}

.wk-body p {
  color: var(--m);
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 18px;
  flex: 1;
}

/* metrics are the .cs-show-metrics treatment from #case-studies-showcase:
   orange 900-weight figure over a muted uppercase label */
.wk-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--br-2);
}

.wk-metrics-solo {
  grid-template-columns: 1fr;
}

.wk-m strong {
  display: block;
  font-size: 18px;
  font-weight: 900;
  color: var(--a);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.wk-m span {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--m);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.wk-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 13px;
  font-weight: 600;
  color: #da3116;
}

.wk-cta i {
  font-style: normal;
  transition: transform .2s cubic-bezier(.4, 0, .2, 1);
}

.wk-card:hover .wk-cta i {
  transform: translateX(3px);
}

/* --- foot --- */
.wk-dots {
  margin-top: 4px;
}

.wk-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

@media(max-width:1024px) {
  .wk-card {
    flex: 0 0 340px;
  }
}

@media(max-width:900px) {
  .wk-section {
    /* padding: 56px 0; */
  }

  .wk-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .wk-nav {
    padding-bottom: 0;
  }
}

@media(max-width:640px) {
  .wk-card {
    flex: 0 0 min(340px, 84vw);
  }

  .wk-cover {
    height: 180px;
  }

  .wk-tabs {
    gap: 6px;
  }

  .wk-tab {
    padding: 8px 14px;
    font-size: 13px;
  }

  .wk-nav .slider-btn {
    width: 40px;
    height: 40px;
  }

  .wk-foot .btn {
    width: 100%;
    justify-content: center;
  }
}

@media(prefers-reduced-motion:reduce) {

  .wk-card,
  .wk-shot,
  .wk-cover .bg,
  .wk-cta i {
    transition: none;
  }

  .wk-card:hover {
    transform: none;
  }

  .wk-card:hover .wk-shot,
  .wk-card:hover .wk-cover .bg {
    transform: none;
  }
}

/* END WORK - COMBINED */

/* ==== RTL MIRROR - generated by _build_rtl.py, do not hand-edit ==== */
/* 212 mirrored rule(s). Regenerate with: python3 _build_rtl.py */
/* --- base ---------------------------------------------------------------- */
html[dir="rtl"] { direction: rtl; }
html[dir="rtl"] body { text-align: right; }

/* Font fallback is resolved per character, so Inter is listed FIRST and the
   script face second: Latin glyphs Inter has stay in Inter, and Urdu/Arabic
   glyphs it lacks fall through to Noto. Putting Noto first would render the
   site's English copy in Nastaliq, which is wrong while the content is still
   being translated - and still wrong afterwards for brand and tech names. */
html[dir="rtl"]:lang(ur) body,
html[dir="rtl"]:lang(ur) button,
html[dir="rtl"]:lang(ur) input,
html[dir="rtl"]:lang(ur) select,
html[dir="rtl"]:lang(ur) textarea {
  font-family: var(--f), "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", sans-serif;
}
html[dir="rtl"]:lang(ar) body,
html[dir="rtl"]:lang(ar) button,
html[dir="rtl"]:lang(ar) input,
html[dir="rtl"]:lang(ar) select,
html[dir="rtl"]:lang(ar) textarea {
  font-family: var(--f), "Noto Naskh Arabic", sans-serif;
}

/* Nastaliq is a sloped script with tall ascenders and deep descenders, so any
   run of it needs far more leading than Inter. Scope the extra leading to
   elements actually marked as Urdu rather than the whole document, so English
   copy is not left floating while the site is only half translated. */
[dir="rtl"] [lang="ur"], [dir="rtl"] .ur { line-height: 2.1; }
[dir="rtl"] [lang="ur"] h1, [dir="rtl"] [lang="ur"] h2, [dir="rtl"] [lang="ur"] h3,
[dir="rtl"] .ur h1, [dir="rtl"] .ur h2, [dir="rtl"] .ur h3 { line-height: 1.8 !important; }

/* Latin fragments inside RTL copy - brand names, tech chips, code - keep their
   own direction so "Next.js 15" does not come out reversed. */
[dir="rtl"] .stack-group li,
[dir="rtl"] code,
[dir="rtl"] .ref-id,
[dir="rtl"] .lt-mono,
[dir="rtl"] .hv-badge { direction: ltr; unicode-bidi: isolate; }

/* Phone numbers, emails and URLs are LTR runs. Without isolation the bidi
   algorithm moves the leading "+" of +92-42-... to the far end of the number. */
[dir="rtl"] .ann-phone span,
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] a[href^="mailto:"],
[dir="rtl"] .sh-privacy { direction: ltr; unicode-bidi: isolate; text-align: right; }

/* Numbers stay LTR inside an RTL line. */
[dir="rtl"] .metric-grid strong,
[dir="rtl"] .qf-strip strong,
[dir="rtl"] .pa-num,
[dir="rtl"] .wk-tab span { direction: ltr; unicode-bidi: embed; }

/* --- glyphs that point ---------------------------------------------------- */
/* Arrow characters (-> in buttons and links) are typed as entities, so the bidi
   algorithm will not mirror them. Flip them visually instead. */
/* Only ever flip the glyph itself. .wk-head-btn was in this list, which
   mirrored the button's TEXT along with its arrow. A text arrow (&rarr;) has to
   stay as it is - the bidi algorithm does not mirror U+2192, so it keeps
   pointing right in RTL. Swap the character if that ever matters. */
[dir="rtl"] .btn svg,
[dir="rtl"] .hv-go svg,
[dir="rtl"] .sh-submit svg,
[dir="rtl"] .slider-btn { transform: scaleX(-1); }
[dir="rtl"] .slider-btn:focus-visible { outline-offset: 3px; }

/* --- components that are asymmetric on purpose ---------------------------- */
/* The accordion spine reads bottom-to-top in LTR. In RTL the rail itself
   reverses, but the spine should still read the same way. */
[dir="rtl"] .pa-spine { writing-mode: vertical-rl; transform: translateX(50%) rotate(180deg); }
@media (max-width: 820px) {
  [dir="rtl"] .pa-spine { writing-mode: horizontal-tb; transform: none; }
}

/* Sliders scroll on a track. sliders.js drives scrollLeft, which is negative in
   RTL, so the JS does the arithmetic - CSS only has to reverse the flex flow. */
[dir="rtl"] .slider-track,
[dir="rtl"] .wk-track,
[dir="rtl"] .pa-rail { direction: rtl; }
[dir="rtl"] .wk-track {
  padding-right: max(24px, calc(50vw - 600px + 24px));
  padding-left: max(24px, calc(50vw - 600px + 24px));
}
/* The hero form and the two-column heroes swap sides with the mirror above;
   the particle canvas is symmetric and must not be flipped twice. */
[dir="rtl"] .hero-particles,
[dir="rtl"] .hero-mesh,
[dir="rtl"] .lt-mesh,
[dir="rtl"] .hv-mesh { transform: none; }
[dir="rtl"] .footer-bottom a {
  margin-right: 18px;
  margin-left: 0;
}
[dir="rtl"] .hero-card li {
  padding: 8px 28px 8px 0;
}
[dir="rtl"] .hero-card li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .port .tag2 {
  margin-right: 6px;
  margin-left: 0;
}
[dir="rtl"] .proc .pnum {
  left: 24px;
  right: auto;
}
[dir="rtl"] .proc h3 {
  padding-left: 50px;
  padding-right: 0;
}
[dir="rtl"] .tier.feat::before {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}
[dir="rtl"] .tier li {
  padding: 8px 26px 8px 0;
}
[dir="rtl"] .tier li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .fit-yes li {
  padding: 9px 28px 9px 0;
}
[dir="rtl"] .fit-yes li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .fit-no li {
  padding: 9px 28px 9px 0;
}
[dir="rtl"] .fit-no li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] summary {
  padding-left: 32px;
  padding-right: 0;
}
[dir="rtl"] summary::after {
  left: 0;
  right: auto;
}
[dir="rtl"] .hero-bg::before {
  right: -100px;
  left: auto;
}
[dir="rtl"] .hero-bg::after {
  left: -120px;
  right: auto;
}
[dir="rtl"] .cro-offer-pill {
  right: 24px;
  left: auto;
}
[dir="rtl"] .cro-offer .bullets li {
  padding: 6px 24px 6px 0;
}
[dir="rtl"] .cro-offer .bullets li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .practice .p-list li {
  padding: 5px 22px 5px 0;
}
[dir="rtl"] .practice .p-list li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .compare th,
[dir="rtl"] .compare td {
  text-align: right;
}
[dir="rtl"] /* Sticky CTA */
.sticky-cta {
  right: 0;
  left: 0;
}
[dir="rtl"] .sticky-cta .meta {
  margin-right: 6px;
  margin-left: 0;
}
[dir="rtl"] .slider-track {
  padding-right: 24px;
  padding-left: 24px;
}
[dir="rtl"] .ps-card .initials {
  left: 24px;
  right: auto;
}
[dir="rtl"] .rs-video .thumb .play svg {
  margin-right: 3px;
  margin-left: 0;
}
[dir="rtl"] .rs-video .badge-v {
  right: 14px;
  left: auto;
}
[dir="rtl"] .rs-video .duration {
  left: 14px;
  right: auto;
}
[dir="rtl"] .cs-show-cover .label {
  right: 18px;
  left: auto;
}
[dir="rtl"] .pp::before {
  right: 0;
  left: 0;
}
[dir="rtl"] .site-footer::before {
  right: 0;
  left: 0;
}
[dir="rtl"] .footer-col a:hover {
  padding-right: 4px;
  padding-left: 0;
}
[dir="rtl"] .fc::before {
  left: -10%;
  right: auto;
}
[dir="rtl"] .test::before {
  right: 20px;
  left: auto;
}
[dir="rtl"] .slider-head,
[dir="rtl"] .slider-dots {
  margin-right: auto;
  margin-left: auto;
}
[dir="rtl"] .slider-track {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}
[dir="rtl"] .hsb-stat {
  text-align: right;
  padding-right: 18px;
  padding-left: 0;
  border-right: 2px solid rgba(240, 97, 74, .45);
  border-left: 0;
}
[dir="rtl"] .bi-clinikally::before {
  margin-left: 6px;
  margin-right: 0;
}
[dir="rtl"] .engage.feat::before {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}
[dir="rtl"] .engage li {
  padding: 7px 24px 7px 0;
}
[dir="rtl"] .engage li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .hero-stats-row .hsb-stat {
  text-align: right;
  padding-right: 18px;
  padding-left: 0;
  border-right: 2px solid rgba(240, 97, 74, .45);
  border-left: 0;
}
[dir="rtl"] .prefooter-bg::before {
  right: -80px;
  left: auto;
}
[dir="rtl"] .prefooter-bg::after {
  left: -100px;
  right: auto;
}
[dir="rtl"] .pfc-stars span {
  margin-right: 8px;
  margin-left: 0;
}
[dir="rtl"] .footer-glow {
  right: 0;
  left: 0;
}
[dir="rtl"] .site-footer::after {
  left: -100px;
  right: auto;
}
[dir="rtl"] .newsletter-form input {
  border-radius: 0 10px 10px 0;
}
[dir="rtl"] .newsletter-form button {
  border-radius: 10px 0 0 10px;
  border-right: 0;
  border-left: 0;
}
[dir="rtl"] .nl-msg {
  right: 0;
  left: 0;
}
[dir="rtl"] .footer-col a:hover {
  transform: translateX(-4px);
}
[dir="rtl"] .announce-message a.ann-link {
  margin-right: 6px;
  margin-left: 0;
}
[dir="rtl"] .ann-switch {
  padding: 4px 8px 4px 10px;
}
[dir="rtl"] .ann-switch .ann-caret {
  margin-right: 2px;
  margin-left: 0;
}
[dir="rtl"] .ann-dropdown {
  left: 0;
  right: auto;
}
[dir="rtl"] .ann-dropdown button {
  text-align: right;
}
[dir="rtl"] .ann-dropdown button .code {
  margin-right: auto;
  margin-left: 0;
}
[dir="rtl"] /* keeps the pointer inside :hover while it crosses the gap to the panel */
.mm-trigger::after {
  right: 0;
  left: 0;
}
[dir="rtl"] /* --- panel --- */
/* the wrap spans the whole viewport,
[dir="rtl"] so leaving it hoverable kept :hover alive
   across the full width and the menu could never be dismissed sideways */
.mega-wrap {
  right: 0;
  left: 0;
}
[dir="rtl"] /* Page scrim under an open mega panel,
[dir="rtl"] matching .search-overlay /
   .modal-overlay. It hangs off .mega-wrap rather than .mega-panel because the
   panel is a scroll box (overflow:hidden auto) and would clip it. Being a child
   of .mega-wrap,
[dir="rtl"] it inherits the panel's existing fade - no JS needed.
   pointer-events stays none so the outside-click close keeps working. */
.mega-wrap::after {
  right: 50%;
  left: auto;
  margin-right: -50vw;
  margin-left: 0;
}
[dir="rtl"] .mega-col:first-child {
  padding-right: 0;
  padding-left: 0;
}
[dir="rtl"] .mega-col+.mega-col {
  border-right: 1px solid var(--br-2);
  border-left: 0;
}
[dir="rtl"] .mega-col-4 {
  padding-left: 0;
  padding-right: 0;
}
[dir="rtl"] .mega-links a::before {
  border-left: 1.5px solid var(--a);
  border-right: 0;
  transform: rotate(-45deg);
}
[dir="rtl"] .mega-links a:hover::before {
  transform: rotate(-45deg) translate(-2px, -2px);
}
@media(prefers-reduced-motion:reduce) {
  [dir="rtl"] .mega-links a:hover::before {
    transform: rotate(-45deg);
  }
}
[dir="rtl"] .blog-arrow {
  margin-right: auto;
  margin-left: 0;
}
[dir="rtl"] .blog-card:hover .blog-arrow {
  transform: translateX(-4px);
}
[dir="rtl"] .modal-head::before {
  left: -80px;
  right: auto;
}
[dir="rtl"] .modal-head::after {
  right: -100px;
  left: auto;
}
[dir="rtl"] .modal-close {
  left: 12px;
  right: auto;
}
[dir="rtl"] .modal-close:hover {
  transform: rotate(-90deg);
}
[dir="rtl"] .search-results .sr-label::after {
  margin-right: 6px;
  margin-left: 0;
}
[dir="rtl"] .video-close {
  left: 0;
  right: auto;
}
[dir="rtl"] .video-close:hover {
  transform: rotate(-90deg);
}
[dir="rtl"] .video-caption {
  right: 0;
  left: 0;
}
[dir="rtl"] .page-hero-inner {
  text-align: right;
}
[dir="rtl"] .page>section.section-alt {
  padding-right: calc(100vw - 0px);
  padding-left: calc(100vw - 0px);
}
[dir="rtl"] .post-body-content ul,
[dir="rtl"] .post-body-content ol {
  padding-right: 24px;
  padding-left: 0;
}
[dir="rtl"] /* Container alignment fallback — when sections inside .page lack inner .container */
.page>section>*:not(.container):not(.story):not(.bento):not(.cs-narrative):not(.contact-layout):not(.values-grid):not(.team-grid):not(.metrics-strip):not(.cta-strip):not(.cs-features-grid):not(.cs-metrics):not(.case-list-grid):not(.blog-feat):not(.case-feat):not(.filter-wrap-inner):not(.cs-quote):not(.res) {
  padding-right: 0;
  padding-left: 0;
}
[dir="rtl"] .port-hero-bg::before {
  right: -100px;
  left: auto;
}
[dir="rtl"] .port-hero-bg::after {
  left: -120px;
  right: auto;
}
[dir="rtl"] .filter-count {
  margin-right: auto;
  margin-left: 0;
}
[dir="rtl"] .feat-card .initials {
  left: 24px;
  right: auto;
}
[dir="rtl"] .feat-card.big .initials {
  left: 34px;
  right: auto;
}
[dir="rtl"] .feat-card .arr {
  right: 24px;
  left: auto;
}
[dir="rtl"] .feat-card:hover .arr {
  transform: rotate(45deg);
}
[dir="rtl"] .bento .item .initials {
  left: 20px;
  right: auto;
}
[dir="rtl"] .bento .item:hover .arr {
  transform: rotate(45deg);
}
[dir="rtl"] .about-story-side::before {
  left: -100px;
  right: auto;
}
[dir="rtl"] .about-story-side::after {
  right: -100px;
  left: auto;
}
[dir="rtl"] .mv-card::before {
  right: 0;
  left: 0;
}
[dir="rtl"] .value-modern .v-num {
  left: 22px;
  right: auto;
}
[dir="rtl"] .practice-modern .pm-card:hover .pm-cta::after {
  transform: translateX(-4px);
}
[dir="rtl"] .process-modern::before {
  right: 6%;
  left: 6%;
}
[dir="rtl"] .cul-card .cm-icon {
  float: left;
  margin-right: 14px;
  margin-left: 0;
}
[dir="rtl"] .fc::before {
  left: -100px;
  right: auto;
}
[dir="rtl"] .fc::after {
  right: -100px;
  left: auto;
}
[dir="rtl"] .fc p {
  margin-right: auto;
  margin-left: auto;
}
[dir="rtl"] .svc-flow .step {
  padding: 28px 0 30px 28px;
}
[dir="rtl"] .svc-flow .step+.step {
  padding-right: 28px;
  padding-left: 0;
  border-right: 1px solid var(--br);
  border-left: 0;
}
[dir="rtl"] .svc-flow .step::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .svc-flow .step+.step::before {
  right: -1px;
  left: auto;
}
@media(max-width:900px) {
  [dir="rtl"] .svc-flow .step {
    padding: 22px 22px 22px 0;
    border-right: 1px solid var(--br);
    border-left: 0;
  }
  [dir="rtl"] .svc-flow .step+.step {
    padding-right: 22px;
    padding-left: 0;
  }
  [dir="rtl"] .svc-flow .step::before {
    right: -1px;
    left: auto;
  }
  [dir="rtl"] .svc-flow .step+.step::before {
    right: -1px;
    left: auto;
  }
}
[dir="rtl"] .svc-scope li {
  padding: 0 30px 14px 0;
}
[dir="rtl"] .svc-scope li::before {
  right: 0;
  left: auto;
}
[dir="rtl"] .mnav-panel {
  right: 0;
  left: auto;
  transform: translateX(100%);
}
[dir="rtl"] .mnav-list>li>a,
[dir="rtl"] .mnav-toggle {
  text-align: right;
}
[dir="rtl"] .mnav-toggle[aria-expanded="true"] svg {
  transform: rotate(-180deg);
}
[dir="rtl"] .mnav-sub a:not(.mnav-parent) {
  padding-right: 32px;
  padding-left: 0;
}
[dir="rtl"] .skip-link {
  right: 12px;
  left: auto;
}
@media(min-width:901px) and (max-width:1150px) {
  [dir="rtl"] .main-nav>li>a,
[dir="rtl"] .main-nav>li>span,
[dir="rtl"] .mm-trigger {
    padding-right: 10px;
    padding-left: 10px;
  }
}
[dir="rtl"] .hh-inner {
  text-align: right;
}
[dir="rtl"] .mw-case:hover .mw-chev {
  transform: translateX(-3px);
}
[dir="rtl"] .mw-btn:hover .mw-arrow {
  transform: translateX(-3px);
}
[dir="rtl"] .mw-feature:hover .mw-cta svg {
  transform: translateX(-3px);
}
[dir="rtl"] .mw-stats>div {
  border-right: 1px solid var(--br);
  border-left: 0;
}
[dir="rtl"] .mw-stats>div:first-child {
  border-right: 0;
  border-left: 0;
}
@media(max-width:1100px) {
  [dir="rtl"] .mw-feat-col {
    border-right: 0;
    border-left: 0;
  }
}
[dir="rtl"] .mega-inner-company .mega-col:first-child {
  padding-right: 0;
  padding-left: 0;
}
[dir="rtl"] /* featured dark card */
.mc-feat-col {
  padding: 0 20px 0 0;
}
[dir="rtl"] .mc-stats>span+span {
  border-right: 1px solid rgba(255, 255, 255, .14);
  border-left: 0;
}
[dir="rtl"] .mi-card:hover .mw-arrow {
  transform: translateX(-3px);
}
[dir="rtl"] .mi-form .nl-msg {
  right: 0;
  left: auto;
}
@media(max-width:1200px) {
  [dir="rtl"] .mega-inner-company .mega-col:first-child {
    padding-right: 0;
    padding-left: 0;
  }
  [dir="rtl"] .mc-feat-col {
    border-right: 0;
    border-left: 0;
  }
}
[dir="rtl"] .sh-count {
  left: 12px;
  right: auto;
}
[dir="rtl"] .sh-submit:hover svg {
  transform: translateX(-3px);
}
[dir="rtl"] .metric-grid>div+div {
  border-right: 1px solid rgba(255, 255, 255, .16);
  border-left: 0;
}
@media (max-width: 900px) {
  [dir="rtl"] .metric-grid>div:nth-child(odd) {
    border-right: 0;
    border-left: 0;
  }
}
[dir="rtl"] /* --- rail --- */
.mt-rail {
  padding-left: 20px;
  padding-right: 0;
  border-left: 1px solid var(--br-2);
  border-right: 0;
}
[dir="rtl"] .mt-tab {
  text-align: right;
}
[dir="rtl"] .mt-tab.is-active .mt-tab-chev {
  transform: translateX(-2px);
}
[dir="rtl"] /* --- panels --- */
.mt-panels {
  padding-right: 28px;
  padding-left: 0;
}
[dir="rtl"] .mt-panel {
  border-right: 0;
  border-left: 0;
}
[dir="rtl"] .mega-inner-work .mw-shot {
  border-right: 1px solid #e2eaf4;
  border-left: 0;
}
@media(max-width:1200px) {
  [dir="rtl"] .mega-inner-work .mw-shot {
    border-right: 0;
    border-left: 0;
  }
}
[dir="rtl"] .art-mod-more:hover svg {
  transform: translateX(-3px);
}
[dir="rtl"] .art-cta:hover .art-cta-btn svg {
  transform: translateX(-3px);
}
[dir="rtl"] .share-copied {
  right: 50%;
  left: auto;
  transform: translateX(50%) translateY(4px);
}
[dir="rtl"] .share-copy.is-copied .share-copied {
  transform: translateX(50%) translateY(0);
}
[dir="rtl"] /* nested replies: indented,
[dir="rtl"] with a rule marking the thread */
.comment-replies {
  padding: 0 22px 0 0;
  border-right: 2px solid var(--br);
  border-left: 0;
}
@media(max-width:640px) {
  [dir="rtl"] .comment-replies {
    padding-right: 14px;
    padding-left: 0;
  }
}
[dir="rtl"] .prod-card:hover .prod-more svg {
  transform: translateX(-3px);
}
[dir="rtl"] .prod-case {
  border-right: 3px solid var(--a);
  border-left: 0;
  border-radius: 14px 0 0 14px;
}
[dir="rtl"] .pt-badge {
  right: 28px;
  left: auto;
}
[dir="rtl"] .kb-item:hover .kb-arrow {
  transform: translateX(-3px);
}
[dir="rtl"] .uc-list {
  border-right: 2px solid var(--br);
  border-left: 0;
}
[dir="rtl"] .uc-item {
  text-align: right;
  margin-right: -2px;
  margin-left: 0;
  border-right: 2px solid transparent;
  border-left: 0;
}
[dir="rtl"] .uc-item.is-active {
  border-right-color: var(--a);
}
[dir="rtl"] .app-card:hover .app-add svg {
  transform: translateX(-3px);
}
[dir="rtl"] /* --- sticky install bar --- */
.prod-bar {
  right: 0;
  left: 0;
}
[dir="rtl"] /* ---------------------------------------------------------------- body -- */
.pshow-body {
  padding: 30px 30px 30px 2px;
}
[dir="rtl"] .pshow:hover .pshow-more svg {
  transform: translateX(-4px);
}
[dir="rtl"] .pv {
  right: 0;
  left: 2px;
}
[dir="rtl"] .pv-bar span {
  margin-right: 6px;
  margin-left: 0;
}
[dir="rtl"] /* ---- 1. Ordexa: admin dashboard + net-profit float --------------------- */
.pv-dash .pv-win {
  inset: 12px 0 66px -22px;
}
[dir="rtl"] .pv-side {
  border-left: 1px solid var(--br-2);
  border-right: 0;
}
[dir="rtl"] .pv-float-profit {
  right: 6px;
  left: auto;
}
[dir="rtl"] /* ---- 2. Tracklify: phone tracking screen ------------------------------- */
.pv-phone {
  right: 16px;
  left: auto;
}
[dir="rtl"] .pv-scr::before {
  right: 50%;
  left: auto;
  transform: translateX(50%);
}
[dir="rtl"] .pv-steps::before {
  right: 3px;
  left: 3px;
}
[dir="rtl"] .pv-steps::after {
  right: 3px;
  left: auto;
}
[dir="rtl"] .pv-map::before {
  right: -10%;
  left: auto;
  transform: rotate(11deg);
}
[dir="rtl"] .pv-pin {
  right: 50%;
  left: auto;
  margin: -14px -7px 0 0;
  border-radius: 50% 50% 0 50%;
  transform: rotate(45deg);
}
[dir="rtl"] .pv-float-eta {
  left: 0;
  right: auto;
}
[dir="rtl"] /* ---- 3. CartLift: cart panel + reminder + recovered stat --------------- */
.pv-lift .pv-win {
  right: 0;
  left: 0;
}
[dir="rtl"] .pv-float-note {
  right: 0;
  left: auto;
}
[dir="rtl"] .pv-float-stat {
  left: 0;
  right: auto;
}
[dir="rtl"] /* ---- 4. Wishlist+: saved grid + back-in-stock alert -------------------- */
.pv-wish .pv-win {
  right: 0;
  left: 0;
}
[dir="rtl"] .pv-heart {
  left: 11px;
  right: auto;
}
[dir="rtl"] .pv-drop {
  right: 11px;
  left: auto;
}
[dir="rtl"] .pv-float-alert {
  right: 6px;
  left: auto;
}
[dir="rtl"] /* ---- 5. Variantsly: option picker + rule chip -------------------------- */
.pv-var .pv-win {
  right: 0;
  left: 0;
}
[dir="rtl"] .pv-float-rule {
  left: 0;
  right: auto;
}
[dir="rtl"] /* ---- 6. Checkout Studio: summary + upsell ------------------------------ */
.pv-ck .pv-win {
  right: 0;
  left: 0;
}
[dir="rtl"] .pv-toggle::after {
  left: 2px;
  right: auto;
}
[dir="rtl"] .pv-float-field {
  left: 0;
  right: auto;
}
@media(max-width:640px) {
  [dir="rtl"] .pv {
    right: 26px;
    left: 14px;
  }
}
@media(max-width:420px) {
  [dir="rtl"] .pv {
    right: 18px;
    left: auto;
  }
}
[dir="rtl"] .cs-facts-cta:hover svg {
  transform: translateX(-4px);
}
[dir="rtl"] .cs-quote-mark {
  left: 16px;
  right: auto;
}
[dir="rtl"] .pa-num {
  right: 0;
  left: 0;
}
[dir="rtl"] .pa-panel.is-open .pa-num {
  right: 22px;
  left: auto;
  text-align: right;
}
[dir="rtl"] .pa-spine {
  right: 50%;
  left: auto;
  transform: translateX(50%) rotate(-180deg);
}
@media(max-width:820px) {
  [dir="rtl"] .pa-spine {
    padding: 20px 62px 20px 20px;
  }
  [dir="rtl"] .pa-num {
    right: 22px;
    left: auto;
    text-align: right;
  }
  [dir="rtl"] .pa-body {
    padding: 8px 62px 28px 22px;
  }
}
[dir="rtl"] #pr-track .pshow-body {
  padding: 26px 26px 26px 2px;
}
[dir="rtl"] [dir="rtl"] #pr-track .pshow-body {
  padding: 26px 2px 26px 26px;
}
[dir="rtl"] .wk-head-btn {
  margin-right: 6px;
  margin-left: 0;
}
[dir="rtl"] /* --- slider track ---
   Full-bleed to the viewport like #portfolio-slider and #reviews-slider: the
   negative margins break out of .container,
[dir="rtl"] and the side padding pulls the
   first card back into line with the heading above it. At scrollLeft 0 the
   first card's left edge sits on the container's left edge. */
.wk-track {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: max(24px, calc(50vw - 600px + 24px));
  padding-left: max(24px, calc(50vw - 600px + 24px));
}
[dir="rtl"] .wk-badge {
  right: 14px;
  left: auto;
}
[dir="rtl"] .wk-label {
  right: 14px;
  left: auto;
}
[dir="rtl"] .wk-card:hover .wk-cta i {
  transform: translateX(-3px);
}
/* END RTL MIRROR */
/* This rule used to hard-code the system font stack here, with !important, which
   overrode var(--f-head) and forced EVERY heading on the site to render in
   -apple-system / Segoe UI instead of Inter. Measured against the reference
   build: reference h1 computed to Inter, this theme's h1 computed to
   -apple-system. The families it listed are already the fallbacks inside
   --f-head, so pointing at the variable keeps the identical fallback chain and
   restores Inter as the first choice. */
h1, h2, h3, h4, h5, h6{
  font-family: var(--f-head) !important;
}
.tlx-hero-service{
  justify-content:center;
}
.tlx-announce-bar{
  position: relative;
    z-index: 99999;
}
.mnav-locked .tlx-announce-bar{z-index: 999;}
.desktop_padding{padding:0;}
/* the full-bleed inner already carries the container gutter; a nested
   .container adding its own 24px pushed content off the reference grid */
.tlx-sec--full-bleed>.tlx-sec__inner .container{
  padding:0;
}
@media (max-width: 768px) {
   .container--narrow {
       padding:0;
    }
    .tlx-sec__inner{
      padding:0;
    }
    .engage-grid {
        grid-template-columns: 1fr;
  }
  /* the contact layout has no .container of its own, so the section wrapper keeps
     the 24px gutter the reference has on mobile instead of running edge to edge */
  .tlx-contact-form .tlx-sec__inner{
    padding-left:24px;
    padding-right:24px;
  }
  .tlx-sec__inner.product_grid{
    padding-left:24px;
    padding-right:24px;
  }
  .tlx-sec__inner.product_view{
    padding-left:24px;
    padding-right:24px;
  }
   .tlx-sec__inner.product_card{
    padding-left:24px;
    padding-right:24px;
  }
  .feat-row{
    padding-left:24px;
    padding-right:24px;

  } 
  .bento{
     padding-left:24px!important;
    padding-right:24px!important;
  }
 .tlx-sec__inner.inner_case{
  padding: 40px 0 52px;
 }
 .about-story-text{
  padding-left:24px;
  padding-right:24px;
 }
 .about-story-side{
  margin: 0 24px;
 }
}

    
   .pricing-custom a.btn{
    text-align: center;
   }
 .mega-inner-products .mt-rail{
  display:none;
 }
 #megaProducts .mega-inner-products{
  grid-template-columns: 1fr;
 }
 .mw-btn.mp-cta {
  display: none !important;
}
.ps-slide img{
  height: 100%;
  object-fit: contain;
}
.nl-msg.is-visible{
      display: flex;
    opacity: 1;
    position: unset;
}
.wk-tags.custom-tags{
  z-index: 11;
    position: absolute;
    bottom: 0;
    left: 10px;
}
.prod-bar-name{
  text-decoration: underline;
}
.shopify-pc__banner__dialog{
  position:fixed!important;
}
.hidden {
    display: none !important;
}
.work-grid-card .tlx-sec {
    padding-block: 56px;
}
@media (min-width:989px){
  .article__hero{padding-inline: 0 !important;}
  .work-grid-card .tlx-sec {
    padding-block: 80px;
  }
}
@media (max-width:989px){
  .mobile_padding{padding:0 24px !important;}
  .class_padding{padding-inline: 0 !important}
}

@media (max-width: 760px) {
  .tlx-portfolio-filter{
    top: var(--header-h);
    position: sticky;
    z-index: 900;
  }
}

/* ==== REFERENCE MATCH: SERVICES HERO ==== */
/* The reference ends with a global "eyebrows tightened" rule (11px, .8px,
   4px 10px, all !important) that beats its own `.hero-fit` eyebrow reset.
   Scoped here to the service hero; four classes to outrank the
   `.hero-fit .service-hero-left .eyebrow { padding: 0 }` resets. */
.tlx-hero-service.hero-fit .service-hero-left .eyebrow {
  padding: 4px 10px;
  font-size: 11px;
  letter-spacing: .8px;
}
/* hero-service renders through section-open, so the grid sits inside
   .tlx-sec > .tlx-sec__inner: the flex hero shrank .tlx-sec to its content
   and the inner wrapper added its own gutter. Let .service-hero-inner do the
   centring and gutters on its own, as in the reference. */
.tlx-hero-service > .tlx-sec {
  width: 100%;
}
.tlx-hero-service > .tlx-sec > .tlx-sec__inner {
  padding-inline: 0;
}
/* `.sh-badges li` is a grid so the logo badges (hero-bagdes, service-heroA)
   stack logo over caption. Icon badges (hero-service) carry the reference
   markup, so they keep its icon-beside-text row. */
.tlx-hero-service .sh-badges li:has(> svg) {
  display: inline-flex;
}
.tlx-hero-service .sh-badges li:has(> svg) > span {
  flex-direction: column;
}
/* ==== END SERVICES HERO ==== */

/* ==== REFERENCE MATCH: CONTACT PAGE ==== */
/* Hero and pre-footer CTA are shared sections, so everything here is scoped to
   the page that carries the contact form. */
/* the reference's last word on eyebrows is 4px 10px; the section files stop at 5px 12px */
main:has(.tlx-contact-form) :is(.port-hero, .prefooter-cta) .eyebrow {
  padding: 4px 10px;
}
@media (max-width: 900px) {
  /* the reference container gutter drops to 20px here; the theme keeps 24px */
  main:has(.tlx-contact-form) .prefooter-cta .tlx-sec__inner {
    --gutter: 20px;
  }
  /* !important only to beat `.mobile_padding { padding: 0 24px !important }` */
  main:has(.tlx-contact-form) .port-hero .tlx-sec__inner.mobile_padding {
    padding-inline: 20px !important;
  }
}
/* ==== END CONTACT PAGE ==== */

/* ==== REFERENCE MATCH: PRODUCT PAGES ==== */
/* ==== END PRODUCT PAGES ==== */

/* ==== REFERENCE MATCH: CASE STUDY PAGES ==== */
/* ==== END CASE STUDY PAGES ==== */