.th-text-logo a,
.th-logo-3 a {
  display: inline-block;
  font-family: var(--th-title-font, inherit);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
  color: #fff;
  white-space: nowrap;
}

.th-header-area .th-logo.th-text-logo {
  width: auto;
}

.th-header-area-three .th-header-wrapper .th-logo-3 {
  width: auto;
  height: auto;
  display: flex;
  align-items: center;
}

.th-offcanvas-logo a {
  display: inline-block;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: #101010;
}

.th-footer-left-logo,
.th-footer-logo-3 {
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 0.02em;
}

.th-footer-logo-3 a,
.th-footer-left-logo a {
  color: #fff;
}

.tech-icon {
  filter: brightness(0) invert(1);
  opacity: 0.85;
}

.hero-para-lg {
  font-size: 19px;
  line-height: 32px;
  max-width: 560px;
}

@media (max-width: 991px) {
  .hero-para-lg {
    max-width: 100%;
    font-size: 17px;
    line-height: 28px;
  }
}

/* Hero cutout photo (transparent PNG, no bg) */
.hero-thumb-cutout {
  position: relative;
  display: flex;
  justify-content: center;
}

.hero-thumb-cutout-glow {
  position: absolute;
  top: 8%;
  left: 50%;
  transform: translateX(-50%);
  width: 78%;
  height: 84%;
  background: radial-gradient(circle, rgba(255, 106, 43, 0.28) 0%, rgba(255, 106, 43, 0) 70%);
  filter: blur(10px);
  z-index: 0;
  pointer-events: none;
}

.hero-thumb-cutout-img {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  filter: drop-shadow(0 20px 24px rgba(0, 0, 0, 0.35));
  /* The source cutout photo has a hard flat edge at the bottom (the original
     photo simply ends there) — fade it into the dark background instead of
     showing an abrupt cut line. */
  -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 78%, transparent 100%);
}

@media (min-width: 1400px) {
  .hero-thumb-cutout-img {
    max-width: 620px;
  }
}

@media (max-width: 991px) {
  .hero-thumb-cutout-img {
    max-width: 400px;
  }
}

@media (max-width: 575px) {
  .hero-thumb-cutout-img {
    max-width: 320px;
  }
}

/* The theme applies a hand-drawn -2deg tilt to <span> inside hero titles, meant for
   short 1-2 word accents. Our role title is a full multi-word line, so the tilt just
   reads as a layout glitch — keep it straight. */
.th-banner-content-thee .th-title span {
  transform: none;
}

.hero-microcopy {
  font-size: 14px;
  color: #8A8A8A;
  letter-spacing: 0.02em;
}

/* Footer social links (home variant) — the whole pill (icon + label) must be
   clickable, not just the icon circle */
.th-footer-social-3 ul li a {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

/* Anchor scroll offset so sticky header doesn't cover the target section */
#clients,
#projects {
  scroll-margin-top: 100px;
}

@media (max-width: 767px) {
  #clients,
  #projects,
  .project-card {
    scroll-margin-top: 84px;
  }
}

/* Clients / trust bar */
.client-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 100%;
  background: #121212;
  border: 1px solid #2C2C2C;
  border-radius: 16px;
  padding: 32px 28px;
  text-decoration: none;
  transition: 0.3s;
}

.client-card:hover {
  border-color: #FF7B00;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(255, 106, 43, 0.35);
}

.client-card-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  margin-bottom: 20px;
}

.client-card-avatar-1 {
  background: linear-gradient(135deg, #FF7B00, #FF4D00);
}

.client-card-avatar-2 {
  background: linear-gradient(135deg, #DEFF00, #9AB800);
  color: #0E0E0E;
}

.client-card-avatar-3 {
  background: linear-gradient(135deg, #4D8DFF, #1F4FCC);
}

.client-card-name {
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  color: #FBFBFB;
  margin-bottom: 6px;
}

.client-card-type {
  font-size: 13px;
  line-height: 20px;
  color: #8A8A8A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
}

.client-card-link {
  margin-top: auto;
  font-size: 14px;
  font-weight: 600;
  color: #FF7B00;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.client-card-link-arrow {
  transition: 0.3s;
}

.client-card:hover .client-card-link-arrow {
  transform: translate(3px, -3px);
}

.clients-secondary {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid #2C2C2C;
}

.clients-secondary-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8A8A;
  margin-bottom: 16px;
  text-align: center;
}

.clients-secondary-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.clients-secondary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #121212;
  border: 1px solid #2C2C2C;
  border-radius: 100px;
  padding: 10px 18px;
}

.clients-secondary-item-name {
  font-size: 14px;
  font-weight: 600;
  color: #DEDEDE;
}

.clients-secondary-item-type {
  font-size: 12px;
  color: #6E6E6E;
}

.clients-secondary-item-type::before {
  content: '·';
  margin-right: 8px;
  color: #6E6E6E;
}

@media (max-width: 575px) {
  .client-card {
    padding: 26px 22px;
  }

  .clients-secondary-item {
    width: 100%;
    justify-content: space-between;
  }

  .clients-secondary-list {
    flex-direction: column;
  }
}

/* Project cards */
.project-card {
  height: 100%;
  position: relative;
  overflow: hidden;
  scroll-margin-top: 110px;
  transition: 0.3s;
}

.project-card:hover {
  transform: translateY(-4px);
  border-color: #4a4a4a;
}

.project-card-featured {
  border-color: rgba(255, 106, 43, 0.4);
}

.project-card-featured:hover {
  border-color: #FF7B00;
  box-shadow: 0 20px 40px -20px rgba(255, 106, 43, 0.35);
}

.project-card-index {
  position: absolute;
  top: 12px;
  right: 20px;
  font-size: 48px;
  font-weight: 800;
  color: transparent;
  -webkit-text-stroke: 1px #2C2C2C;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.project-card .th-work-single-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  z-index: 1;
}

.project-card-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 100px;
  padding: 5px 12px;
  margin-bottom: 16px;
}

.project-card-tag-verified {
  color: #7CE28C;
  background: rgba(124, 226, 140, 0.12);
}

.project-card-tag-nda {
  color: #8A8A8A;
  background: rgba(138, 138, 138, 0.12);
}

.project-card-client {
  font-size: 14px !important;
  color: #FF7B00 !important;
  font-weight: 600;
  margin-bottom: 12px;
}

.project-card-outcome {
  font-size: 15px !important;
  line-height: 24px !important;
  flex-grow: 1;
}

.project-card-stack {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
  padding: 0;
}

.project-card-stack li {
  font-size: 12px;
  color: #B4B2B2;
  border: 1px solid #302F2F;
  border-radius: 100px;
  padding: 6px 14px;
}

@media (max-width: 575px) {
  .project-card-index {
    font-size: 36px;
  }
}

/* Lead magnets grid */
.lead-magnet-card {
  background: linear-gradient(135deg, #171410 0%, #0E0E0E 100%);
  border: 1px solid #2C2C2C;
  border-radius: 20px;
  padding: 36px 32px;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.lead-magnet-card-featured {
  border: 1px solid rgba(255, 106, 43, 0.5);
  box-shadow: 0 20px 50px -20px rgba(255, 106, 43, 0.25);
}

.lead-magnet-tag {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #FF7B00;
  background: rgba(255, 106, 43, 0.12);
  border-radius: 100px;
  padding: 6px 14px;
  margin-bottom: 16px;
}

.lead-magnet-title {
  font-size: 24px !important;
  line-height: 32px !important;
  color: #FBFBFB;
}

.lead-magnet-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  flex-grow: 1;
}

.lead-magnet-bullets li {
  font-size: 15px;
  line-height: 24px;
  color: #DEDEDE;
  padding: 6px 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.lead-magnet-bullets-check {
  color: #FF7B00;
  font-weight: 700;
  flex-shrink: 0;
}

.lead-magnet-guarantee {
  font-size: 13px;
  line-height: 20px;
  color: #8A8A8A;
  margin-top: 16px;
  margin-bottom: 0;
}

@media (max-width: 767px) {
  .lead-magnet-card {
    padding: 28px 24px;
  }
}

.contact-form-status {
  margin-top: 16px;
  font-size: 15px;
  line-height: 22px;
}

.contact-form-status-success {
  color: #7CE28C;
}

.contact-form-status-error {
  color: #FF8A8A;
}

.th-contact-info-wrap-home {
  background: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 40px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.th-contact-info-wrap-home .th-contact-title {
  font-size: 28px;
}

.th-contact-info-list {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
}

.th-contact-info-list li {
  font-size: 17px;
  line-height: 32px;
  padding: 10px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.th-contact-info-list li:last-child {
  border-bottom: none;
}

.th-contact-info-list strong {
  display: inline-block;
  min-width: 90px;
  color: #FBFBFB;
}

.th-contact-info-list a {
  font-size: 17px;
  color: #DEDEDE;
}

.th-contact-wrap {
  background: #0E0E0E;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 40px;
}

@media (max-width: 767px) {
  .th-contact-info-wrap-home,
  .th-contact-wrap {
    padding: 28px;
  }
}

@media (max-width: 575px) {
  .th-footer-mail-title {
    font-size: 28px !important;
    line-height: 36px !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    padding: 0 12px;
  }
}

@media (max-width: 767px) {
  .th-exp-title {
    font-size: 96px;
    padding: 32px 28px;
  }

  .th-exp-box {
    position: static;
    display: inline-block;
    transform: none;
    margin: 16px 0 0;
    font-size: 16px;
    padding: 14px 22px;
  }

  .th-exp-grop-flex {
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .th-exp-title {
    font-size: 72px;
    padding: 24px 20px;
  }
}

main.th-designer-bg .th-para,
main.th-designer-bg .th-parea,
main.th-designer-bg p {
  color: #B4B2B2;
}

main.th-designer-bg .title,
main.th-designer-bg .th-title,
main.th-designer-bg h1,
main.th-designer-bg h2,
main.th-designer-bg h3,
main.th-designer-bg h4 {
  color: #FBFBFB;
}

main.th-designer-bg .sub-title {
  color: var(--th-theme-primary, #FF6A2B);
}

main.th-designer-bg label,
main.th-designer-bg .th-balel-title {
  color: #FBFBFB;
}

main.th-designer-bg input[type=text],
main.th-designer-bg input[type=email],
main.th-designer-bg input[type=tel],
main.th-designer-bg textarea {
  background-color: #0E0E0E;
  color: #FBFBFB;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

main.th-designer-bg input::placeholder,
main.th-designer-bg textarea::placeholder {
  color: #8A8A8A;
}

main.th-designer-bg a {
  color: #B4B2B2;
}

main.th-designer-bg li {
  color: #B4B2B2;
}

main.th-designer-bg strong {
  color: #FBFBFB;
}

/* The decorative giant rotated watermark text (h3.th-about-rotate-text) is meant
   to blend into the background (near-invisible, outline only). The broad h3 color
   rule above turns it solid white, which breaks the About section layout — restore
   the intended near-invisible watermark styling here with higher specificity. */
main.th-designer-bg h3.th-about-rotate-text,
main.th-designer-bg h3.th-about-rotate-text-2,
main.th-designer-bg h3.th-about-rotate-text-3 {
  color: #0E0E0E;
  -webkit-text-stroke-color: #2C2C2C;
}

/* ----------------------------------------
   Reduce section gaps on mobile
   (style.css only tightens .pt-120 / .pb-90;
   these fill the remaining gaps so consecutive
   sections don't stack huge vertical whitespace
   on small screens)
---------------------------------------- */
@media (max-width: 767px) {
  /* Fixed-height decorative divider block between Hero and next section —
     196px on desktop, way oversized once the hero is shorter on mobile */
  .th-black-bg-common-three {
    height: 40px;
  }

  /* Service cards use a fixed 312px height for a desktop hover-accordion
     effect. On mobile (stacked, no hover) that leaves a huge dead zone
     of empty space inside every card. */
  .th-offer-box-wrap {
    height: auto;
    overflow: visible;
    padding: 28px;
  }

  /* Bottom "not sure which one" CTA row: stop forcing the text bubble and
     button onto one flex row — that's what squeezes the button into a
     misshapen blob. Stack them instead. */
  .th-center-box {
    flex-direction: column;
    align-items: center;
    margin-top: 0;
    gap: 16px;
    text-align: center;
  }

  .th-expand-card-bottom .th-btn-box {
    display: block;
    white-space: normal;
  }

  /* Long multi-word CTA labels need smaller padding/font on mobile so the
     pill shape stays a pill instead of stretching into a blob when text wraps */
  .th-primary-btn .th-text {
    padding: 14px 22px;
    font-size: 14px;
  }
}

@media (max-width: 767px) {
  .pt-120 {
    padding-top: 44px;
  }

  .pb-90 {
    padding-bottom: 20px;
  }

  .pt-90 {
    padding-top: 36px;
  }

  .pb-120 {
    padding-bottom: 40px;
  }

  .pb-60 {
    padding-bottom: 24px;
  }

  .mb-120 {
    margin-bottom: 36px;
  }

  .mb-90 {
    margin-bottom: 28px;
  }

  .mb-80 {
    margin-bottom: 28px;
  }

  .mb-72 {
    margin-bottom: 24px;
  }

  .mb-56 {
    margin-bottom: 24px;
  }

  .mb-48 {
    margin-bottom: 20px;
  }

  .th-banner-content-thee.mt-100 {
    margin-top: 32px;
  }

  section + section,
  section + footer {
    margin-top: 0;
  }
}

@media (max-width: 575px) {
  .pt-120 {
    padding-top: 32px;
  }

  .th-black-bg-common-three {
    height: 24px;
  }

  .th-offer-box-wrap {
    padding: 24px 20px;
  }

  .pb-90 {
    padding-bottom: 12px;
  }

  .pt-90 {
    padding-top: 28px;
  }

  .pb-120 {
    padding-bottom: 28px;
  }

  .pb-60 {
    padding-bottom: 16px;
  }

  .mb-120 {
    margin-bottom: 24px;
  }

  .mb-90 {
    margin-bottom: 20px;
  }

  .mb-80 {
    margin-bottom: 20px;
  }

  .th-banner-content-thee.mt-100 {
    margin-top: 20px;
  }

  .clients-section {
    padding-top: 28px;
    padding-bottom: 8px;
  }
}

/* Project card case-study link */
.project-card-cta,
.project-card-cta:hover {
  margin-top: 20px;
  color: #FF7B00 !important;
}

.project-card:hover .client-card-link-arrow,
.clients-secondary-item-link:hover .client-card-link-arrow {
  transform: translate(3px, -3px);
}

/* Clients secondary: linked item */
.clients-secondary-item-link {
  text-decoration: none;
  transition: 0.3s;
}

.clients-secondary-item-link:hover {
  border-color: #FF7B00;
}

.clients-secondary-item-cta {
  font-size: 12px;
  font-weight: 600;
  color: #FF7B00;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 4px;
}

/* Case study detail page */
.case-study-eyebrow {
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.case-study-title {
  font-size: 44px;
  line-height: 1.15;
}

.case-study-heading {
  font-size: 32px;
  line-height: 1.25;
}

.case-study-lead {
  font-size: 19px !important;
  line-height: 32px !important;
}

.case-study-section {
  scroll-margin-top: 110px;
  padding-top: 40px;
  margin-top: 40px;
  border-top: 1px solid #2C2C2C;
}

.case-study-h3 {
  font-size: 1.25rem;
  line-height: 1.4;
  margin: 32px 0 16px;
}

.case-study-section code,
.case-study-table code {
  font-size: 0.9em;
  color: #FF7B00;
  background: rgba(255, 123, 0, 0.1);
  border-radius: 6px;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}

.case-study-list {
  padding-left: 20px;
}

.case-study-list li {
  margin-bottom: 12px;
}

.case-study-list strong,
.case-study-section .th-para strong {
  color: #FBFBFB;
}

.case-study-figure {
  margin: 0;
}

.case-study-figure img {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid #2C2C2C;
  border-radius: 20px;
}

.case-study-figure figcaption {
  font-size: 13px;
  line-height: 20px;
  color: #8A8A8A;
  margin-top: 10px;
  font-style: italic;
}

.case-study-figure-narrow {
  max-width: 480px;
}

.case-study-grid {
  display: grid;
  gap: 20px;
}

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

.case-study-grid-5 {
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.case-study-grid-5 .case-study-figure figcaption {
  text-align: center;
  font-style: normal;
}

.case-study-meta {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #2C2C2C;
  border: 1px solid #2C2C2C;
  border-radius: 20px;
  overflow: hidden;
}

.case-study-meta > div {
  background: #121212;
  padding: 20px 24px;
}

.case-study-meta dt {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF7B00;
  margin-bottom: 6px;
}

.case-study-meta dd {
  margin: 0;
  font-size: 15px;
  line-height: 24px;
  color: #DEDEDE;
}

.case-study-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.case-study-stat {
  display: flex;
  flex-direction: column;
  background: #121212;
  border: 1px solid #2C2C2C;
  border-radius: 16px;
  padding: 24px 20px;
  transition: 0.3s;
}

.case-study-stat:hover {
  border-color: #FF7B00;
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -20px rgba(255, 106, 43, 0.35);
}

.case-study-stat-value {
  font-size: 34px;
  line-height: 1.1;
  font-weight: 800;
  color: #FBFBFB;
}

.case-study-stat-label {
  font-size: 12px;
  line-height: 18px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8A8A8A;
  margin-top: 8px;
}

.case-study-toc {
  background: #121212;
  border: 1px solid #2C2C2C;
  border-radius: 20px;
  padding: 24px 28px;
}

.case-study-toc-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8A8A8A;
  margin-bottom: 12px;
}

.case-study-toc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  columns: 2;
  column-gap: 32px;
}

.case-study-toc li {
  margin-bottom: 8px;
  break-inside: avoid;
}

.case-study-toc a {
  font-size: 15px;
  color: #DEDEDE;
  transition: 0.3s;
}

.case-study-toc a:hover {
  color: #FF7B00;
}

.case-study-flow {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  counter-reset: flow;
}

.case-study-flow li {
  counter-increment: flow;
  font-size: 14px;
  line-height: 22px;
  color: #DEDEDE;
  background: #121212;
  border: 1px solid #2C2C2C;
  border-radius: 100px;
  padding: 10px 18px;
}

.case-study-flow li::before {
  content: counter(flow) '.';
  color: #FF7B00;
  font-weight: 700;
  margin-right: 8px;
}

.case-study-table-wrap {
  overflow-x: auto;
  border: 1px solid #2C2C2C;
  border-radius: 20px;
  background: #121212;
}

.case-study-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 560px;
}

.case-study-table th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #FF7B00;
  text-align: left;
  padding: 16px 20px;
  border-bottom: 1px solid #2C2C2C;
  white-space: nowrap;
}

.case-study-table td {
  font-size: 14px;
  line-height: 22px;
  color: #B4B2B2;
  padding: 14px 20px;
  border-bottom: 1px solid #1E1E1E;
  vertical-align: top;
}

.case-study-table td:first-child {
  color: #FBFBFB;
  font-weight: 600;
}

.case-study-table tbody tr:last-child td {
  border-bottom: 0;
}

.case-study-author {
  border-top: 1px solid #2C2C2C;
  padding-top: 24px;
}

@media (max-width: 991px) {
  .case-study-title {
    font-size: 36px;
  }

  .case-study-heading {
    font-size: 28px;
  }

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

@media (max-width: 767px) {
  .case-study-title {
    font-size: 30px;
  }

  .case-study-heading {
    font-size: 24px;
  }

  .case-study-lead {
    font-size: 17px !important;
    line-height: 28px !important;
  }

  .case-study-meta,
  .case-study-grid-3 {
    grid-template-columns: 1fr;
  }

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

  .case-study-toc ol {
    columns: 1;
  }

  .case-study-figure-narrow {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .case-study-stat-value {
    font-size: 28px;
  }

  .case-study-section {
    padding-top: 28px;
    margin-top: 28px;
  }
}