/*
 * devorbit — custom site styles.
 *
 * Plain, hand-edited CSS. No build step: edit this file directly and the
 * change is live on next page load, nothing to run.
 *
 * Loaded after assets/css/vendor/bootstrap.min.css (untouched vendor file —
 * don't edit that one) and after style.css. See functions.php for the
 * enqueue order.
 *
 * Brand colors: blue #2563eb, navy #0f172a, cyan #06b6d4, green #10b981.
 */

/* ---------------------------------------------------------------
   Typography
--------------------------------------------------------------- */
:root {
  --devorbit-blue: #2563eb;
  --devorbit-navy: #0f172a;
  --devorbit-cyan: #06b6d4;
  --devorbit-green: #10b981;
  --devorbit-purple: #7c3aed;
}

body {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  line-height: 1.15;
  color: #0f172a;
}

/* ---------------------------------------------------------------
   Buttons
--------------------------------------------------------------- */
.btn {
  border-radius: 0.5rem;
  font-weight: 600;
  padding: 0.75rem 1.75rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn:hover, .btn:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

.btn--primary {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}
.btn--primary:hover, .btn--primary:focus-visible {
  background-color: #1350d4;
  border-color: #1350d4;
  color: #fff;
}

.btn--secondary {
  background-color: transparent;
  border: 2px solid #0f172a;
  color: #0f172a;
}
.btn--secondary:hover, .btn--secondary:focus-visible {
  background-color: #0f172a;
  color: #fff;
}

.btn--cta {
  background-color: #10b981;
  border-color: #10b981;
  color: #fff;
}
.btn--cta:hover, .btn--cta:focus-visible {
  background-color: #0d9367;
  border-color: #0d9367;
  color: #fff;
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  transition: box-shadow 0.2s ease, background-color 0.2s ease;
}
.site-header--scrolled {
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1rem;
  padding-block: 1rem;
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  /* Allow this to shrink on narrow screens instead of forcing the CTA +
     hamburger onto a second row — min-width:0 overrides the flex default
     of min-width:auto, which would otherwise block the image from actually
     shrinking below its intrinsic size. */
  flex-shrink: 1;
  min-width: 0;
  font-size: 1.375rem;
  font-weight: 700;
  color: #0f172a;
  text-decoration: none;
}
.site-header__logo img {
  width: auto;
  height: auto;
  max-height: 48px;
  max-width: 100%;
}
@media (max-width: 420px) {
  .site-header__logo img {
    max-height: 48px;
  }
}
@media (min-width: 992px) {
  .site-header__logo img {
    max-height: 70px;
  }
}

.site-header__logo-text {
  white-space: nowrap;
}

/* Optional mobile-only logo variant, set via Customizer > Site Identity.
   Falls back to showing the main logo everywhere when not set (see
   header.php) — these rules only matter when both are actually rendered. */
.site-header__logo-desktop {
  display: inline-flex;
  align-items: center;
}
.site-header__logo-mobile {
  display: none;
  align-items: center;
}
@media (max-width: 991.98px) {
  .site-header__logo-desktop {
    display: none;
  }
  .site-header__logo-mobile {
    display: inline-flex;
  }
}

.site-header__actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 1rem;
}
@media (max-width: 420px) {
  .site-header__cta {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

@media (min-width: 992px) {
  .site-header__collapse {
    display: flex !important;
    flex: 1 1 auto;
    justify-content: center;
  }
}
@media (max-width: 991.98px) {
  .site-header__collapse {
    flex-basis: 100%;
    order: 3;
    padding-block: 1rem;
  }
}

.site-header__nav-list {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (max-width: 991.98px) {
  .site-header__nav-list {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    width: 100%;
  }
}
.site-header__nav-list li {
  position: relative;
}
@media (max-width: 991.98px) {
  .site-header__nav-list > li {
    width: 100%;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
  }
  .site-header__nav-list > li:last-child {
    border-bottom: none;
  }
}
.site-header__nav-list a {
  display: inline-flex;
  align-items: center;
  color: #0f172a;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.2s ease;
}
@media (max-width: 991.98px) {
  .site-header__nav-list > li > a {
    display: flex;
    width: 100%;
    padding: 0.875rem 0;
  }
  /* The link stays a normal, fully navigable link (tapping "Services"
     opens the Services page) — only the separate .site-header__submenu-
     toggle button beside it expands/collapses the submenu. See
     assets/js/main.js, which inserts that button next to this link. */
  .site-header__nav-list > li.menu-item-has-children {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .site-header__nav-list > li.menu-item-has-children > a {
    width: auto;
    flex: 1 1 auto;
  }
}
.site-header__nav-list a:hover, .site-header__nav-list a:focus-visible {
  color: #2563eb;
}
/* Current-page highlight — WordPress adds these classes automatically. */
.site-header__nav-list .current-menu-item > a,
.site-header__nav-list .current-menu-ancestor > a,
.site-header__nav-list .current_page_item > a {
  color: #2563eb;
}
.site-header__nav-list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  flex-shrink: 0;
  width: 0.4em;
  height: 0.4em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}
@media (min-width: 992px) {
  .site-header__nav-list .menu-item-has-children:hover > a::after,
  .site-header__nav-list .menu-item-has-children:focus-within > a::after {
    transform: rotate(-135deg) translateY(2px);
  }
}
@media (max-width: 991.98px) {
  /* On mobile the link's own arrow is hidden — the separate
     .site-header__submenu-toggle button below owns the arrow and the
     open/closed (aria-expanded) state instead, since the link itself no
     longer toggles anything; it just navigates normally. */
  .site-header__nav-list .menu-item-has-children > a::after {
    display: none;
  }
}

/* Mobile-only submenu toggle button, inserted next to each parent link by
   assets/js/main.js. Hidden entirely on desktop, where the submenu already
   opens via CSS :hover/:focus-within on the parent <li>. */
.site-header__submenu-toggle {
  display: none;
}
@media (max-width: 991.98px) {
  .site-header__submenu-toggle {
    display: inline-flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: auto;
    padding: 0;
    background: transparent;
    border: none;
    color: #0f172a;
    cursor: pointer;
  }
  .site-header__submenu-toggle::after {
    content: "";
    display: inline-block;
    width: 0.45em;
    height: 0.45em;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .site-header__submenu-toggle[aria-expanded="true"] {
    color: #2563eb;
  }
  .site-header__submenu-toggle[aria-expanded="true"]::after {
    transform: rotate(-135deg);
  }
}

.site-header__nav-list .sub-menu {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0.5rem 0;
  background-color: #fff;
  border-radius: 0.5rem;
}
@media (min-width: 992px) {
  .site-header__nav-list .sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 220px;
    margin-top: 0;
    padding: 0.5rem 0;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 1040;
  }
}
@media (max-width: 991.98px) {
  .site-header__nav-list .sub-menu {
    display: none;
    width: 100%;
    flex: 1 1 100%;
    margin: 0;
    padding: 0 0 0.75rem;
  }
  .site-header__nav-list .menu-item-has-children.is-open > .sub-menu {
    display: block;
  }
}
.site-header__nav-list .sub-menu li {
  width: 100%;
}
.site-header__nav-list .sub-menu a {
  display: block;
  width: 100%;
  padding: 0.5rem 1.25rem;
  font-weight: 500;
  white-space: nowrap;
}
@media (max-width: 991.98px) {
  .site-header__nav-list .sub-menu a {
    padding: 0.5rem 0;
    white-space: normal;
    color: rgba(15, 23, 42, 0.7);
  }
}
@media (min-width: 992px) {
  .site-header__nav-list .menu-item-has-children:hover > .sub-menu,
  .site-header__nav-list .menu-item-has-children:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

.site-header__cta {
  white-space: nowrap;
}
/* Hide the CTA while the mobile nav is open — assets/js/main.js toggles
   this class on Bootstrap's collapse show/hide events — so the open panel
   matches the reference design (logo + close button only). */
@media (max-width: 991.98px) {
  .site-header--nav-open .site-header__cta {
    display: none;
  }
}

.site-header__toggler {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  background-color: transparent;
  color: #0f172a;
}
@media (min-width: 992px) {
  .site-header__toggler {
    display: none;
  }
}
.site-header__toggler:focus-visible {
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.35);
}

.site-header__toggler-icon {
  display: inline-flex;
}

.site-header__toggler-icon--close {
  display: none;
}

.site-header__toggler[aria-expanded=true] .site-header__toggler-icon--open {
  display: none;
}
.site-header__toggler[aria-expanded=true] .site-header__toggler-icon--close {
  display: inline-flex;
}

/* ---------------------------------------------------------------
   Hero section
--------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  background-color: #fff;
  background-image: var(--hero-bg-image, none);
  background-size: cover;
  background-position: center;
  padding-block: clamp(3rem, 6vw, 6rem);
}

/* Soft blurred gradient blobs — plain radial-gradient, no `filter: blur()`,
   so there's no extra paint cost for what's a purely decorative background. */
.hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
}
.hero__glow--blue {
  top: -12%;
  left: -10%;
  width: 30rem;
  height: 30rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.18), rgba(37, 99, 235, 0) 70%);
}
.hero__glow--purple {
  top: 8%;
  right: -12%;
  width: 26rem;
  height: 26rem;
  background: radial-gradient(circle, rgba(124, 58, 237, 0.16), rgba(124, 58, 237, 0) 70%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: center;
}
@media (min-width: 992px) {
  .hero__inner {
    grid-template-columns: 1.1fr 1fr;
  }
}

.hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  margin-bottom: 1.25rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 600;
}
.hero__badge-icon {
  flex-shrink: 0;
  color: #7c3aed;
}

.hero__heading {
  font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem);
  line-height: 1.1;
  margin-bottom: 1.25rem;
}

.hero__highlight {
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero__description {
  font-size: 1.125rem;
  color: rgba(15, 23, 42, 0.75);
  max-width: 40ch;
  margin-bottom: 2rem;
}
.hero__description p:last-child {
  margin-bottom: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__stat {
  display: flex;
  flex-direction: column;
}

.hero__stat-value {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
}

.hero__stat-label {
  font-size: 0.875rem;
  color: rgba(15, 23, 42, 0.6);
}

.hero__media {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
  padding: 1.5rem 0;
}
@media (min-width: 992px) {
  .hero__media {
    padding: 2.5rem 1rem;
  }
}

/* Abstract geometric flourishes — anchored to the media column, not the
   laptop itself, so they read as ambient background shapes. */
.hero__shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.hero__shape--ring {
  top: -1rem;
  right: 8%;
  width: 4.5rem;
  height: 4.5rem;
  border: 3px solid rgba(124, 58, 237, 0.25);
  border-radius: 50%;
}
.hero__shape--square {
  bottom: 2rem;
  left: 2%;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(124, 58, 237, 0.15));
  transform: rotate(18deg);
}

.hero__laptop {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
}

.hero__laptop-screen {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: #0f172a;
  border-radius: 0.75rem 0.75rem 0.25rem 0.25rem;
  padding: 0.5rem;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
}

.hero__laptop-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0.4rem;
}

.hero__laptop-placeholder {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  height: 100%;
  padding: 1.1rem;
  border-radius: 0.4rem;
  background: linear-gradient(135deg, #eef2ff, #f5f3ff);
}
.hero__laptop-placeholder-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  margin-right: 0.35rem;
  border-radius: 50%;
  background-color: rgba(37, 99, 235, 0.35);
}
.hero__laptop-placeholder-bar {
  width: 60%;
  height: 0.6rem;
  border-radius: 999px;
  background-color: rgba(15, 23, 42, 0.08);
}
.hero__laptop-placeholder-bar--wide {
  width: 90%;
  height: 1.5rem;
  margin-top: 0.4rem;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.18), rgba(124, 58, 237, 0.18));
}
.hero__laptop-placeholder-bar--short {
  width: 40%;
}

.hero__laptop-base {
  height: 0.9rem;
  margin: 0 -0.75rem;
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 0 0 0.9rem 0.9rem;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.18);
}

.hero__float-card {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  animation: devorbit-float 5s ease-in-out infinite;
}
.hero__float-card--top {
  top: 8%;
  left: -4%;
}
.hero__float-card--bottom {
  right: -6%;
  bottom: 6%;
  animation-delay: 1.5s;
}
@media (max-width: 575.98px) {
  .hero__float-card {
    padding: 0.5rem 0.75rem;
  }
  .hero__float-card--top {
    left: 0;
  }
  .hero__float-card--bottom {
    right: 0;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero__float-card {
    animation: none;
  }
}

.hero__float-card-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.12));
  color: #2563eb;
}

.hero__float-card-text {
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  color: rgba(15, 23, 42, 0.65);
  white-space: nowrap;
}
.hero__float-card-text strong {
  font-size: 1rem;
  color: #0f172a;
}

@keyframes devorbit-float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.hero__tech-icons {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hero__tech-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  background-color: #fff;
  color: #0f172a;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
  transition: transform 0.2s ease, color 0.2s ease;
}
.hero__tech-icon:hover {
  color: #2563eb;
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.footer-cta {
  background: linear-gradient(120deg, #2563eb, #7c3aed);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.footer-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  text-align: center;
}
@media (min-width: 768px) {
  .footer-cta__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}
.footer-cta__heading {
  margin-bottom: 0.5rem;
  color: #fff;
  font-size: clamp(1.5rem, 3vw, 2rem);
}
.footer-cta__description {
  margin: 0;
  color: rgba(255, 255, 255, 0.85);
}
.footer-cta__button {
  flex-shrink: 0;
}

.site-footer {
  background-color: #0f172a;
  color: #cbd5e1;
}

.site-footer__main {
  padding-top: clamp(3rem, 5vw, 4.5rem);
  padding-bottom: 2rem;
}

.site-footer__columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid #1e293b;
}
@media (min-width: 576px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 992px) {
  .site-footer__columns {
    grid-template-columns: 1.6fr 1fr 1fr 1fr 1.2fr;
  }
}

.site-footer__col-title {
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
}

.site-footer__logo {
  margin-bottom: 1.25rem;
}
.site-footer__logo img {
  width: auto;
  max-height: 56px;
  max-width: 100%;
}
/* Only applied when falling back to the main (light-background) logo — a
   dedicated Footer Logo upload is assumed to already suit a dark background. */
.site-footer__logo--inverted img {
  filter: brightness(0) invert(1);
}
.site-footer__logo-text {
  display: inline-block;
  margin-bottom: 1rem;
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
}

.site-footer__description {
  font-size: 0.9375rem;
  line-height: 1.6;
}
.site-footer__description p {
  margin-bottom: 0.75rem;
}
.site-footer__description p:last-child {
  margin-bottom: 0;
}

.site-footer__nav-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__nav-list a {
  color: #94a3b8;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer__nav-list a:hover,
.site-footer__nav-list a:focus-visible {
  color: #06b6d4;
}

.site-footer__address {
  margin-bottom: 0.75rem;
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.6;
}

.site-footer__email {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: #94a3b8;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s ease;
}
.site-footer__email:hover,
.site-footer__email:focus-visible {
  color: #06b6d4;
}

.site-footer__hours {
  font-size: 0.875rem;
  line-height: 1.6;
  color: #94a3b8;
}

.site-footer__secondary {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2.5rem;
}
@media (min-width: 768px) {
  .site-footer__secondary {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
  }
}

.site-footer__secondary-title {
  display: block;
  margin-bottom: 0.75rem;
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
}

.site-footer__social-list {
  display: flex;
  gap: 0.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.site-footer__social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background-color: #1e293b;
  color: #cbd5e1;
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.site-footer__social-link:hover,
.site-footer__social-link:focus-visible {
  background-color: #06b6d4;
  color: #0f172a;
  transform: translateY(-2px);
}

.site-footer__newsletter {
  max-width: 26rem;
}
.site-footer__newsletter-description {
  margin-bottom: 1rem;
  font-size: 0.9375rem;
}
.site-footer__newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.site-footer__newsletter-input {
  flex: 1 1 12rem;
  min-width: 0;
  padding: 0.65rem 1rem;
  border: 1px solid #1e293b;
  border-radius: 0.5rem;
  background-color: #1e293b;
  color: #fff;
  font-size: 0.9375rem;
}
.site-footer__newsletter-input::placeholder {
  color: #94a3b8;
}
.site-footer__newsletter-input:focus-visible {
  outline: 2px solid #06b6d4;
  outline-offset: 2px;
}
.site-footer__newsletter-button {
  flex-shrink: 0;
}

.site-footer__bottom {
  border-top: 1px solid #1e293b;
  padding-block: 1.25rem;
}
.site-footer__bottom-inner {
  display: flex;
  justify-content: center;
}
.site-footer__copyright {
  margin: 0;
  color: #94a3b8;
  font-size: 0.8125rem;
  text-align: center;
}

/* ---------------------------------------------------------------
   Section header — shared across homepage sections (Services, Why
   Choose Us, and future ones), not just one section's own markup.
--------------------------------------------------------------- */
.section-header {
  max-width: 42rem;
  margin: 0 auto 3rem;
  text-align: center;
}
/* Used where the header sits beside a button (e.g. "View All Articles")
   instead of standing alone and centered. */
.section-header--left {
  margin: 0;
  max-width: 36rem;
  text-align: left;
}
.section-header__eyebrow {
  display: inline-block;
  margin-bottom: 0.75rem;
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.section-header__title {
  margin-bottom: 1rem;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}
.section-header__description {
  margin: 0;
  color: rgba(15, 23, 42, 0.7);
  font-size: 1.0625rem;
}

/* ---------------------------------------------------------------
   Services section
--------------------------------------------------------------- */
.services {
  padding-block: clamp(3rem, 6vw, 6rem);
}

.services__view-all {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}
.service-card--featured {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), 0 24px 48px rgba(15, 23, 42, 0.12);
}

.service-card__badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.service-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1.5rem;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(124, 58, 237, 0.1));
  color: #2563eb;
}
.service-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.service-card__title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.service-card__description {
  margin-bottom: 1.5rem;
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.service-card__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: #2563eb;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.service-card__button svg {
  transition: transform 0.2s ease;
}
.service-card__button:hover,
.service-card__button:focus-visible {
  color: #1350d4;
}
.service-card__button:hover svg,
.service-card__button:focus-visible svg {
  transform: translateX(3px);
}

/* ---------------------------------------------------------------
   Why Choose Us section
--------------------------------------------------------------- */
.why-choose-us {
  padding-block: clamp(3rem, 6vw, 6rem);
  background-color: #f8fafc;
}

.feature-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.5rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover,
.feature-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
}

.feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(16, 185, 129, 0.12));
  color: #06b6d4;
}
.feature-card__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.feature-card__title {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
}

.feature-card__description {
  margin: 0;
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Development Process section — horizontal timeline (desktop), 2-col
   grid (tablet), vertical timeline (mobile). See assets/js/main.js for
   the scroll-reveal (.is-visible) that drives the fade-up + line-draw.
--------------------------------------------------------------- */
.process {
  padding-block: 100px;
}

.process-timeline {
  display: flex;
  flex-direction: column;
  gap: 3rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media (min-width: 768px) and (max-width: 991.98px) {
  .process-timeline {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2.5rem 2rem;
  }
}
@media (min-width: 992px) {
  .process-timeline {
    flex-direction: row;
    gap: 0;
  }
}

.process-step {
  position: relative;
  text-align: center;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.process-timeline.is-visible .process-step {
  opacity: 1;
  transform: translateY(0);
}
.process-timeline.is-visible .process-step:hover,
.process-timeline.is-visible .process-step:focus-within {
  transform: translateY(-6px);
}
/* Staggered reveal — each step a little behind the previous one. */
.process-step:nth-child(2) {
  transition-delay: 0.1s;
}
.process-step:nth-child(3) {
  transition-delay: 0.2s;
}
.process-step:nth-child(4) {
  transition-delay: 0.3s;
}
.process-step:nth-child(5) {
  transition-delay: 0.4s;
}
.process-step:nth-child(6) {
  transition-delay: 0.5s;
}
@media (min-width: 992px) {
  .process-step {
    flex: 1 1 0%;
    padding-inline: 1rem;
  }
}

/* The card is a separate inner element (not .process-step itself) so the
   connector line — positioned absolutely against .process-step — keeps
   the exact same coordinate system regardless of the card's own padding. */
.process-step__card {
  position: relative;
  z-index: 1;
  display: flex;
  height: 100%;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 1.75rem 2rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.process-step:hover .process-step__card,
.process-step:focus-within .process-step__card {
  border-color: #2563eb;
  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.1);
}

/* Connecting line — hidden by default (tablet's 2-col grid gets none, since
   a line across a wrapping grid doesn't read cleanly), vertical on mobile,
   horizontal on desktop. Sized relative to this step's own box rather than
   a fixed percentage, so it self-adjusts to any number of steps. */
.process-step__connector {
  display: none;
}
@media (max-width: 767.98px) {
  .process-step:not(:first-child) .process-step__connector {
    display: block;
    position: absolute;
    top: -3rem;
    left: calc(50% - 1px);
    z-index: 0;
    width: 2px;
    height: 3rem;
    background: linear-gradient(180deg, #2563eb, #06b6d4);
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.6s ease;
  }
  .process-timeline.is-visible .process-step__connector {
    transform: scaleY(1);
  }
}
@media (min-width: 992px) {
  .process-step:not(:first-child) .process-step__connector {
    display: block;
    position: absolute;
    top: 1.75rem;
    left: -50%;
    z-index: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #2563eb, #06b6d4);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s ease;
  }
  .process-timeline.is-visible .process-step__connector {
    transform: scaleX(1);
  }
  /* Hovering a step fills in the line leading to the *next* step. */
  .process-step:hover + .process-step .process-step__connector,
  .process-step:focus-within + .process-step .process-step__connector {
    transform: scaleX(1);
  }
}

.process-step__number {
  position: relative;
  z-index: 1;
  display: block;
  margin-bottom: 1rem;
  color: #0f172a;
  font-size: 1.75rem;
  font-weight: 800;
  transition: color 0.3s ease;
}
.process-step:hover .process-step__number,
.process-step:focus-within .process-step__number {
  color: #2563eb;
}

.process-step__icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
  color: #06b6d4;
  transition: transform 0.3s ease;
}
.process-step:hover .process-step__icon,
.process-step:focus-within .process-step__icon {
  transform: scale(1.1);
}
.process-step__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.process-step__title {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.process-step__description {
  margin: 0 auto;
  max-width: 22rem;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
  opacity: 0.75;
  transition: opacity 0.3s ease;
}
.process-step:hover .process-step__description,
.process-step:focus-within .process-step__description {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .process-step,
  .process-step__connector,
  .process-step__card {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Client Testimonials section
--------------------------------------------------------------- */
.testimonials {
  padding-block: clamp(3rem, 6vw, 6rem);
  background-color: #f8fafc;
}

.testimonial-card {
  position: relative;
  z-index: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.08);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.testimonial-card:hover,
.testimonial-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}
.testimonial-card--featured {
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.35), 0 24px 48px rgba(15, 23, 42, 0.12);
}

.testimonial-card__quote {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 0;
  color: rgba(37, 99, 235, 0.06);
}

.testimonial-card__badge {
  position: relative;
  z-index: 1;
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.star-rating {
  position: relative;
  z-index: 1;
  margin-bottom: 1rem;
}
.star-rating__stars {
  display: inline-flex;
  gap: 0.15rem;
}
.star-rating__star {
  color: #cbd5e1;
}
.star-rating__star--filled {
  color: #f59e0b;
}

.testimonial-card__review {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  margin: 0 0 1.5rem;
  padding: 0;
  border: none;
  color: rgba(15, 23, 42, 0.75);
  font-size: 0.9375rem;
  font-style: normal;
  line-height: 1.7;
}

.testimonial-card__meta {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin: 0;
}

.testimonial-card__photo {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.testimonial-card__photo--placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #2563eb, #7c3aed);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 700;
  text-transform: uppercase;
}

.testimonial-card__identity {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.testimonial-card__name {
  color: #0f172a;
  font-weight: 700;
  font-size: 0.9375rem;
}
.testimonial-card__role {
  color: rgba(15, 23, 42, 0.6);
  font-size: 0.8125rem;
}

/* ---------------------------------------------------------------
   Industries We Serve section
--------------------------------------------------------------- */
.industries {
  padding-block: 100px;
  background-color: #f8fafc;
}

.industries__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.industry-card {
  position: relative;
  z-index: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 30px;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  animation: devorbit-fade-up 0.6s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.industry-card:hover,
.industry-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}
/* A pseudo-element clipped by the card's own `overflow: hidden` + rounded
   corners, rather than a `border-top` — a differently-sized border-top on a
   rounded box renders inconsistently at the corners across browsers. */
.industry-card--featured::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1;
  height: 3px;
  background-color: #10b981;
}

@keyframes devorbit-fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .industry-card,
  .blog-card {
    animation: none;
  }
}

.industry-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.75rem;
  height: 3.75rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.industry-card:hover .industry-card__icon,
.industry-card:focus-within .industry-card__icon {
  transform: scale(1.08);
  background-color: rgba(37, 99, 235, 0.16);
}
.industry-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.industry-card__title {
  margin-bottom: 0.5rem;
  color: #020617;
  font-size: 1.125rem;
}

.industry-card__description {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Latest Insights (blog) section
--------------------------------------------------------------- */
.latest-blog {
  padding-block: 100px;
}

.latest-blog__header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.latest-blog__view-all {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  animation: devorbit-fade-up 0.6s ease both;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.blog-card:hover,
.blog-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}

.blog-card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.blog-card__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.blog-card:hover .blog-card__image,
.blog-card:focus-within .blog-card__image {
  transform: scale(1.06);
}
.blog-card__image--placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(124, 58, 237, 0.12));
}

.blog-card__category {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background-color: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* Plain-text alternative to .blog-card__category (the image-overlay badge)
   for sections that show the category inline in the meta row instead — see
   template-parts/latest-articles.php. */
.blog-card__category-inline {
  color: #2563eb;
  font-weight: 600;
}

.blog-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  padding: 1.5rem 1.5rem 1.75rem;
}

.blog-card__meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  color: #475569;
  font-size: 0.8125rem;
}
.blog-card__dot {
  color: #cbd5e1;
}

.blog-card__title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}
.blog-card__title-link {
  display: -webkit-box;
  overflow: hidden;
  color: #020617;
  text-decoration: none;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}
.blog-card__title-link:hover,
.blog-card__title-link:focus-visible {
  color: #2563eb;
}

.blog-card__excerpt {
  display: -webkit-box;
  flex: 1 1 auto;
  overflow: hidden;
  margin-bottom: 1.5rem;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.blog-card__excerpt p {
  margin: 0;
}

.blog-card__read-more {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: #2563eb;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.blog-card__read-more svg {
  transition: transform 0.2s ease;
}
.blog-card__read-more:hover,
.blog-card__read-more:focus-visible {
  color: #1350d4;
}
.blog-card__read-more:hover svg,
.blog-card__read-more:focus-visible svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .blog-card {
    animation: none;
    transition: none;
  }
  .blog-card:hover,
  .blog-card:focus-within {
    transform: none;
  }
  .blog-card__image,
  .blog-card__read-more,
  .blog-card__read-more svg {
    transition: none;
  }
  .blog-card:hover .blog-card__image,
  .blog-card:focus-within .blog-card__image {
    transform: none;
  }
  .blog-card__read-more:hover svg,
  .blog-card__read-more:focus-visible svg {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   About Us — Hero section (page-about.php)
--------------------------------------------------------------- */
.about-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(3rem, 6vw, 6rem);
  background-color: #f8fafc;
}

.about-hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: devorbit-glow-drift 18s ease-in-out infinite;
}
.about-hero__glow--blue {
  top: -14%;
  left: -10%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0) 70%);
}
.about-hero__glow--cyan {
  right: -12%;
  bottom: -18%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14), rgba(6, 182, 212, 0) 70%);
  animation-delay: 4s;
}
@keyframes devorbit-glow-drift {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(2%, 3%) scale(1.06);
  }
}

.about-hero__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%);
  opacity: 0.6;
}

.about-hero__breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.about-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: #475569;
  list-style: none;
}
.about-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: #94a3b8;
}
.about-hero__breadcrumb a {
  color: #475569;
  text-decoration: none;
}
.about-hero__breadcrumb a:hover,
.about-hero__breadcrumb a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}
.about-hero__breadcrumb li[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
}

.about-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 992px) {
  .about-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
  }
}

.about-hero__content {
  animation: devorbit-fade-up 0.6s ease both;
}

.about-hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.about-hero__heading {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  line-height: 1.15;
}

.about-hero__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-hero__description {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.about-hero__trust-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.5rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 480px) {
  .about-hero__trust-list {
    grid-template-columns: 1fr 1fr;
  }
}

.about-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #0f172a;
  font-size: 0.9375rem;
  font-weight: 600;
}

.about-hero__trust-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.about-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.about-hero__media {
  position: relative;
  animation: devorbit-fade-up 0.6s ease 0.15s both;
}

.about-hero__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__glow,
  .about-hero__content,
  .about-hero__media {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   About Us — Who We Are section (page-about.php)
--------------------------------------------------------------- */
.who-we-are {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.who-we-are__glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -14%;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0) 70%);
  pointer-events: none;
}

.who-we-are__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 60px;
}
@media (min-width: 992px) {
  .who-we-are__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.who-we-are__content {
  animation: devorbit-fade-up 0.6s ease both;
}


.who-we-are__heading {
  margin-bottom: 1.25rem;
  color: #020617;
  font-size: clamp(1.875rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
}

.who-we-are__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.who-we-are__description {
  margin-bottom: 2rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}
.who-we-are__description p {
  margin-bottom: 1rem;
}
.who-we-are__description p:last-child {
  margin-bottom: 0;
}

.who-we-are__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.who-we-are__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  animation: devorbit-fade-up 0.6s ease 0.15s both;
}
@media (max-width: 575.98px) {
  .who-we-are__features {
    grid-template-columns: 1fr;
  }
}

.who-we-are__feature-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.who-we-are__feature-card:hover,
.who-we-are__feature-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}

.who-we-are__feature-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 0.85rem;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.3s ease;
}
.who-we-are__feature-card:hover .who-we-are__feature-icon,
.who-we-are__feature-card:focus-within .who-we-are__feature-icon {
  transform: scale(1.1);
}
.who-we-are__feature-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.who-we-are__feature-title {
  margin-bottom: 0.5rem;
  color: #020617;
  font-size: 1.0625rem;
}

.who-we-are__feature-description {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.who-we-are__stats {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem 1.5rem;
  margin: 60px 0 0;
  padding: 2.5rem 0 0;
  list-style: none;
  border-top: 1px solid #e2e8f0;
}
@media (min-width: 992px) {
  .who-we-are__stats {
    grid-template-columns: repeat(4, 1fr);
  }
}

.who-we-are__stat {
  text-align: center;
}

.who-we-are__stat-value {
  display: block;
  margin-bottom: 0.25rem;
  color: #2563eb;
  font-size: clamp(1.75rem, 2vw + 1rem, 2.25rem);
  font-weight: 800;
}

.who-we-are__stat-label {
  display: block;
  color: #475569;
  font-size: 0.875rem;
}

@media (prefers-reduced-motion: reduce) {
  .who-we-are__content,
  .who-we-are__features {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   About Us — Our Story section (page-about.php)
--------------------------------------------------------------- */
.our-story {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.our-story__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(circle at 20% 30%, rgba(0, 0, 0, 0.6), transparent 60%);
  opacity: 0.6;
}

.our-story__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
  margin-bottom: 60px;
}
@media (min-width: 992px) {
  .our-story__grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
  /* Content stays first in the DOM (headings before decorative imagery,
     for accessibility/SEO reading order) but visually sits on the right,
     matching the "Left illustration / Right content" layout requirement. */
  .our-story__media {
    order: -1;
  }
}

@keyframes devorbit-slide-right {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.our-story__content {
  animation: devorbit-slide-right 0.6s ease both;
}


.our-story__heading {
  margin-bottom: 1.25rem;
  color: #020617;
  font-size: clamp(1.875rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
}

.our-story__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.our-story__description {
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.75;
}
.our-story__description p {
  margin-bottom: 1rem;
}
.our-story__description p:last-child {
  margin-bottom: 0;
}

.our-story__media {
  position: relative;
  animation: devorbit-fade-up 0.6s ease 0.15s both;
}

.our-story__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

.our-story__values {
  position: relative;
  z-index: 1;
}

.our-story__value-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.our-story__value-card:hover,
.our-story__value-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}

.our-story__value-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 0.85rem;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.3s ease;
}
.our-story__value-card:hover .our-story__value-icon,
.our-story__value-card:focus-within .our-story__value-icon {
  transform: scale(1.1);
}
.our-story__value-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.our-story__value-title {
  margin-bottom: 0.5rem;
  color: #020617;
  font-size: 1.0625rem;
}

.our-story__value-description {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .our-story__content,
  .our-story__media {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   About Us — Mission & Vision section (page-about.php)
--------------------------------------------------------------- */
.mission-vision {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.mission-vision__glow {
  position: absolute;
  z-index: 0;
  top: 20%;
  left: 50%;
  width: 40rem;
  height: 40rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.08), rgba(6, 182, 212, 0) 70%);
  transform: translateX(-50%);
  pointer-events: none;
}

.mission-vision__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.mission-vision__cards {
  position: relative;
  z-index: 1;
  margin-bottom: 30px;
}

/* Gradient border via layered backgrounds (solid fill clipped to
   padding-box, gradient clipped to border-box) rather than a plain
   `border`, so the border itself can carry — and animate — a gradient. */
.mission-vision__card {
  padding: 2.5rem;
  border: 2px solid transparent;
  border-radius: 1rem;
  background-image: linear-gradient(#fff, #fff), linear-gradient(135deg, #2563eb, #06b6d4, #2563eb);
  background-origin: padding-box, border-box;
  background-clip: padding-box, border-box;
  background-size: 100% 100%, 300% 300%;
  background-position: 0 0, 0% 0%;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, background-position 0.6s ease;
}
.mission-vision__card:hover,
.mission-vision__card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(37, 99, 235, 0.18);
  background-position: 0 0, 100% 100%;
}

.mission-vision__card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.5rem;
  border-radius: 1rem;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.3s ease;
}
.mission-vision__card:hover .mission-vision__card-icon,
.mission-vision__card:focus-within .mission-vision__card-icon {
  transform: scale(1.1);
}
.mission-vision__card-icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.mission-vision__card-title {
  margin-bottom: 0.75rem;
  color: #020617;
  font-size: 1.5rem;
}

.mission-vision__card-description {
  margin: 0;
  color: #475569;
  font-size: 1rem;
  line-height: 1.7;
}

.mission-vision__principles {
  position: relative;
  z-index: 1;
}

.mission-vision__principle-card {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.mission-vision__principle-card:hover,
.mission-vision__principle-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}

.mission-vision__principle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 0.85rem;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.3s ease;
}
.mission-vision__principle-card:hover .mission-vision__principle-icon,
.mission-vision__principle-card:focus-within .mission-vision__principle-icon {
  transform: scale(1.1);
}
.mission-vision__principle-icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.mission-vision__principle-title {
  margin-bottom: 0.5rem;
  color: #020617;
  font-size: 1.0625rem;
}

.mission-vision__principle-description {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .mission-vision__card,
  .mission-vision__card-icon,
  .mission-vision__principle-icon {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   About Us — Core Values section (page-about.php)
--------------------------------------------------------------- */
.core-values {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.core-values__glow {
  position: absolute;
  z-index: 0;
  top: -12%;
  right: -10%;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.08), rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
}

.core-values__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.core-values__grid {
  position: relative;
  z-index: 1;
}

/* Fade-up-on-scroll: assets/js/main.js adds `is-visible` to any
   .js-scroll-reveal element (this grid) the first time it's in view; each
   card then animates in with a slight stagger. */
.core-value-card {
  display: flex;
  flex-direction: column;
  padding: 2rem 1.75rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.core-values__grid.is-visible .core-value-card {
  opacity: 1;
  transform: translateY(0);
}
.core-values__grid > div:nth-child(2) .core-value-card {
  transition-delay: 0.08s;
}
.core-values__grid > div:nth-child(3) .core-value-card {
  transition-delay: 0.16s;
}
.core-values__grid > div:nth-child(4) .core-value-card {
  transition-delay: 0.24s;
}
.core-values__grid > div:nth-child(5) .core-value-card {
  transition-delay: 0.32s;
}
.core-values__grid > div:nth-child(6) .core-value-card {
  transition-delay: 0.4s;
}
.core-value-card:hover,
.core-value-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.15), 0 24px 48px rgba(37, 99, 235, 0.16);
  border-color: #2563eb;
}
.core-values__grid.is-visible .core-value-card:hover,
.core-values__grid.is-visible .core-value-card:focus-within {
  transform: translateY(-6px);
}

.core-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.3s ease;
}
.core-value-card:hover .core-value-card__icon,
.core-value-card:focus-within .core-value-card__icon {
  transform: scale(1.1);
}
.core-value-card__icon img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.core-value-card__title {
  margin-bottom: 0.75rem;
  color: #020617;
  font-size: 1.25rem;
}

.core-value-card__description {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .core-value-card {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   About Us — Why Choose DevOrbit Technologies section
   (page-about.php; distinct names throughout from the homepage's
   .why-choose-us / .feature-card, which is a separate section and CPT)
--------------------------------------------------------------- */
.about-why-choose-us {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.about-why-choose-us__glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  left: -12%;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
}

.about-why-choose-us__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 992px) {
  .about-why-choose-us__grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
  /* Content stays first in the DOM (headings before decorative imagery)
     but visually sits on the right, matching the "Left illustration /
     Right content" layout requirement. */
  .about-why-choose-us__media {
    order: -1;
  }
}

.about-why-choose-us__content {
  animation: devorbit-fade-up 0.6s ease both;
}


.about-why-choose-us__heading {
  margin-bottom: 1.25rem;
  color: #020617;
  font-size: clamp(1.875rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
}

.about-why-choose-us__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.about-why-choose-us__description {
  margin-bottom: 2rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* Fade-up-on-scroll: assets/js/main.js adds `is-visible` to any
   .js-scroll-reveal element (this grid) the first time it's in view; each
   card then animates in with a slight stagger. */
.about-why-choose-us__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 2.5rem;
}
@media (max-width: 575.98px) {
  .about-why-choose-us__features {
    grid-template-columns: 1fr;
  }
}

.why-us-card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.about-why-choose-us__features.is-visible .why-us-card,
.services-why-choose-us__features.is-visible .why-us-card {
  opacity: 1;
  transform: translateY(0);
}
.about-why-choose-us__features > *:nth-child(2),
.services-why-choose-us__features > *:nth-child(2) {
  transition-delay: 0.08s;
}
.about-why-choose-us__features > *:nth-child(3),
.services-why-choose-us__features > *:nth-child(3) {
  transition-delay: 0.16s;
}
.about-why-choose-us__features > *:nth-child(4),
.services-why-choose-us__features > *:nth-child(4) {
  transition-delay: 0.24s;
}
.about-why-choose-us__features > *:nth-child(5),
.services-why-choose-us__features > *:nth-child(5) {
  transition-delay: 0.32s;
}
.about-why-choose-us__features > *:nth-child(6),
.services-why-choose-us__features > *:nth-child(6) {
  transition-delay: 0.4s;
}
.why-us-card:hover,
.why-us-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}

.why-us-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin-bottom: 1rem;
  border-radius: 50%;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.3s ease;
}
.why-us-card:hover .why-us-card__icon,
.why-us-card:focus-within .why-us-card__icon {
  transform: scale(1.1);
}
.why-us-card__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.why-us-card__title {
  margin-bottom: 0.5rem;
  color: #020617;
  font-size: 1.0625rem;
}

.why-us-card__description {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.about-why-choose-us__cta {
  display: inline-flex;
}

.about-why-choose-us__media {
  position: relative;
}

.about-why-choose-us__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .about-why-choose-us__content {
    animation: none;
  }
  .why-us-card {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Technology Stack section — tabbed variant (template-parts/technology-
   stack.php). Shared by the About page and the single Service page.

   A single WP_Query loads every `technology` post once, ordered by
   display_order; every card renders into one grid tagged with its own
   data-category, and assets/js/main.js's tablist toggles a single
   data-active-category attribute on the grid to show/hide cards — no
   repeat queries, no per-tab markup duplication. The six category
   selectors below are a fixed, spec'd set (frontend/backend/cms/database/
   cloud/ai), not something to loop or extend without also updating the
   `technology_category` ACF Select field's choices and this file's PHP.
--------------------------------------------------------------- */
.technology-stack {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.technology-stack__glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -12%;
  width: 34rem;
  height: 34rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.08), rgba(6, 182, 212, 0) 70%);
  pointer-events: none;
}

.technology-stack__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- Tabs (Bootstrap nav-pills, custom roving-tabindex behaviour) ---- */
.technology-stack__tabs-wrap {
  position: relative;
  z-index: 1;
  margin: 0 -1.5rem 1.5rem;
  padding: 0 1.5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.technology-stack__tabs-wrap::-webkit-scrollbar {
  display: none;
}
/* Below 768px the tab row scrolls horizontally (see .technology-stack__tabs
   below) — scrolling itself works fine, but with no visual hint the last
   pill just abruptly clips at the viewport edge and reads as a rendering
   bug rather than "swipe for more". A soft mask-fade at both edges is the
   standard affordance for a horizontally-scrollable row. Applied to the
   wrap (not the scrolling content) so it stays fixed to the viewport edge
   regardless of scroll position. */
@media (max-width: 767.98px) {
  .technology-stack__tabs-wrap {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 1.5rem, #000 calc(100% - 1.5rem), transparent);
  }
}

.technology-stack__tabs {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.5rem;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  padding: 0 1.5rem 0.25rem;
}
@media (min-width: 768px) {
  .technology-stack__tabs {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    padding: 0 0 0.25rem;
  }
}

.technology-stack__tab {
  position: relative;
  flex-shrink: 0;
  padding: 0.6rem 1.25rem;
  color: #475569;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.technology-stack__tab::after {
  content: "";
  position: absolute;
  left: 1.25rem;
  right: 1.25rem;
  bottom: 0.3rem;
  height: 2px;
  background-color: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.technology-stack__tab:hover,
.technology-stack__tab:focus-visible {
  color: #2563eb;
  border-color: #93c5fd;
}
.technology-stack__tab:hover::after,
.technology-stack__tab:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}
.technology-stack__tab.active {
  color: #fff;
  background-color: #2563eb;
  border-color: #2563eb;
}
.technology-stack__tab.active::after {
  opacity: 0;
}
.technology-stack__tab:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.technology-stack__category-description {
  max-width: 40rem;
  margin: 0 auto 2.5rem;
  color: #475569;
  font-size: 0.9375rem;
  text-align: center;
}

/* ---- Card grid — filtered by data-active-category, not re-queried ---- */
.technology-stack__grid {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
  position: relative;
  z-index: 1;
  transition: opacity 0.15s ease;
}
.technology-stack__grid.is-switching {
  opacity: 0;
}

/* Only the card matching the grid's current data-active-category shows;
   every other card in the (already-loaded) grid stays hidden. */
.technology-stack__grid > [data-category] {
  display: none;
}
.technology-stack__grid[data-active-category="frontend"] > [data-category="frontend"],
.technology-stack__grid[data-active-category="backend"] > [data-category="backend"],
.technology-stack__grid[data-active-category="cms"] > [data-category="cms"],
.technology-stack__grid[data-active-category="database"] > [data-category="database"],
.technology-stack__grid[data-active-category="cloud"] > [data-category="cloud"],
.technology-stack__grid[data-active-category="ai"] > [data-category="ai"] {
  display: block;
}

/* Fade-up-on-scroll: assets/js/main.js adds `is-visible` to any
   .js-scroll-reveal element the first time it's in view. */
.tech-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 1.75rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.technology-stack__grid.is-visible .tech-card {
  opacity: 1;
  transform: translateY(0);
}
.technology-stack__grid > div:nth-child(3n+2) .tech-card {
  transition-delay: 0.08s;
}
.technology-stack__grid > div:nth-child(3n+3) .tech-card {
  transition-delay: 0.16s;
}
.tech-card:hover,
.tech-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}

.tech-card__logo {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
  height: 48px;
  transition: transform 0.3s ease;
}
.tech-card:hover .tech-card__logo,
.tech-card:focus-within .tech-card__logo {
  transform: scale(1.1);
}
.tech-card__logo img {
  width: auto;
  max-width: 100%;
  height: 48px;
  object-fit: contain;
}

.tech-card__logo-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, #2563eb, #06b6d4);
  color: #fff;
  font-size: 1.25rem;
  font-weight: 800;
  text-transform: uppercase;
}

.tech-card__name {
  margin-bottom: 0.5rem;
  color: #020617;
  font-size: 1.125rem;
}

.tech-card__description {
  margin: 0 0 1rem;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.tech-card__link {
  margin-top: auto;
  color: #2563eb;
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
}
.tech-card__link:hover,
.tech-card__link:focus-visible {
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  .tech-card {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
  .tech-card__logo {
    transition: none;
  }
  .technology-stack__grid {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Contact Us — Hero section (page-contact.php)
--------------------------------------------------------------- */
.contact-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4.5rem, 10vw, 140px);
  padding-bottom: clamp(4rem, 8vw, 120px);
  background-color: #f8fafc;
}

.contact-hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: devorbit-glow-drift 18s ease-in-out infinite;
}
.contact-hero__glow--blue {
  top: -12%;
  left: -10%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0) 70%);
}
.contact-hero__glow--cyan {
  right: -12%;
  bottom: -16%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14), rgba(6, 182, 212, 0) 70%);
  animation-delay: 4s;
}

.contact-hero__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%);
  opacity: 0.6;
}

.contact-hero__breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.contact-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: #475569;
  list-style: none;
}
.contact-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: #94a3b8;
}
.contact-hero__breadcrumb a {
  color: #475569;
  text-decoration: none;
}
.contact-hero__breadcrumb a:hover,
.contact-hero__breadcrumb a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}
.contact-hero__breadcrumb li[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
}

.contact-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
}
@media (min-width: 992px) {
  .contact-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-hero__content {
  animation: devorbit-fade-up 0.6s ease both;
}

.contact-hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.contact-hero__heading {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  line-height: 1.15;
}

.contact-hero__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.contact-hero__description {
  max-width: 34rem;
  margin-bottom: 2rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.contact-hero__trust-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.5rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 480px) {
  .contact-hero__trust-list {
    grid-template-columns: 1fr 1fr;
  }
}

.contact-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #0f172a;
  font-size: 0.9375rem;
  font-weight: 600;
}

.contact-hero__trust-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.contact-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.contact-hero__media {
  position: relative;
  animation: devorbit-fade-up 0.6s ease 0.15s both;
}

.contact-hero__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

.contact-hero__illustration--placeholder {
  position: relative;
  display: flex;
  min-height: 28rem;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* Abstract geometric flourishes */
.contact-hero__shape {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.contact-hero__shape--ring {
  top: -0.5rem;
  right: 8%;
  width: 4.5rem;
  height: 4.5rem;
  border: 3px solid rgba(6, 182, 212, 0.25);
  border-radius: 50%;
}
.contact-hero__shape--square {
  bottom: 1.5rem;
  left: 2%;
  width: 3rem;
  height: 3rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.15), rgba(6, 182, 212, 0.15));
  transform: rotate(18deg);
}

/* Laptop mockup — stands in for "a modern website" until a real
   illustration is uploaded via the hero_illustration ACF field. */
.contact-hero__laptop {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 25rem;
}
.contact-hero__laptop-screen {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  aspect-ratio: 16 / 10;
  padding: 1.1rem;
  background-color: #0f172a;
  border-radius: 0.75rem 0.75rem 0.25rem 0.25rem;
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.25);
}
.contact-hero__laptop-dot {
  display: inline-block;
  width: 0.45rem;
  height: 0.45rem;
  margin-right: 0.3rem;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.25);
}
.contact-hero__laptop-bar {
  width: 55%;
  height: 0.6rem;
  border-radius: 999px;
  background-color: rgba(255, 255, 255, 0.12);
}
.contact-hero__laptop-bar--wide {
  width: 85%;
  height: 1.5rem;
  margin-top: 0.3rem;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.5), rgba(6, 182, 212, 0.5));
}
.contact-hero__laptop-bar--short {
  width: 35%;
}
.contact-hero__laptop-base {
  height: 0.9rem;
  margin: 0 -0.75rem;
  background: linear-gradient(180deg, #cbd5e1, #94a3b8);
  border-radius: 0 0 0.9rem 0.9rem;
  box-shadow: 0 12px 20px rgba(15, 23, 42, 0.18);
}

/* Floating dashboard cards */
.contact-hero__card {
  position: absolute;
  z-index: 2;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  animation: devorbit-float 5s ease-in-out infinite;
}

.contact-hero__card--stat {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  top: 6%;
  left: -6%;
  padding: 0.65rem 1rem;
}
.contact-hero__card-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.65rem;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12));
  color: #2563eb;
}
.contact-hero__card-text {
  display: flex;
  flex-direction: column;
  font-size: 0.8125rem;
  color: rgba(15, 23, 42, 0.65);
  white-space: nowrap;
}
.contact-hero__card-text strong {
  font-size: 1rem;
  color: #0f172a;
}

.contact-hero__card--chart {
  display: flex;
  align-items: flex-end;
  gap: 0.35rem;
  bottom: 10%;
  right: -8%;
  height: 3.25rem;
  padding: 0.75rem 0.9rem;
  animation-delay: 1.5s;
}
.contact-hero__chart-bar {
  display: block;
  width: 0.5rem;
  border-radius: 999px 999px 0 0;
  background-color: #2563eb;
}
.contact-hero__chart-bar--1 {
  height: 40%;
  background-color: #2563eb;
}
.contact-hero__chart-bar--2 {
  height: 70%;
  background-color: #06b6d4;
}
.contact-hero__chart-bar--3 {
  height: 55%;
  background-color: #2563eb;
}
.contact-hero__chart-bar--4 {
  height: 100%;
  background-color: #10b981;
}

.contact-hero__card--code {
  top: 32%;
  right: -10%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  width: 8rem;
  padding: 0.75rem 0.85rem;
  background-color: #0f172a;
  animation-delay: 0.8s;
}
.contact-hero__code-dot {
  display: inline-block;
  width: 0.4rem;
  height: 0.4rem;
  margin-right: 0.25rem;
  border-radius: 50%;
}
.contact-hero__code-dot--red {
  background-color: #f87171;
}
.contact-hero__code-dot--yellow {
  background-color: #fbbf24;
}
.contact-hero__code-dot--green {
  background-color: #10b981;
}
.contact-hero__code-line {
  display: block;
  height: 0.4rem;
  margin-top: 0.3rem;
  border-radius: 999px;
}
.contact-hero__code-line--1 {
  width: 90%;
  background-color: rgba(6, 182, 212, 0.6);
}
.contact-hero__code-line--2 {
  width: 70%;
  background-color: rgba(255, 255, 255, 0.2);
}
.contact-hero__code-line--3 {
  width: 55%;
  background-color: rgba(16, 185, 129, 0.6);
}

@media (max-width: 767.98px) {
  .contact-hero__card--code {
    display: none;
  }
}

/* Circular floating icon badges */
.contact-hero__float-badge {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14);
  color: #2563eb;
  animation: devorbit-float 5s ease-in-out infinite;
}
.contact-hero__float-badge--email {
  top: 4%;
  left: 8%;
  animation-delay: 0.4s;
}
.contact-hero__float-badge--cloud {
  bottom: 20%;
  left: -4%;
  color: #06b6d4;
  animation-delay: 1.2s;
}
.contact-hero__float-badge--api {
  top: 16%;
  right: 6%;
  color: #10b981;
  animation-delay: 2s;
}

@media (max-width: 575.98px) {
  .contact-hero__card--stat,
  .contact-hero__card--chart {
    padding: 0.5rem 0.75rem;
  }
  .contact-hero__card--stat {
    left: 0;
  }
  .contact-hero__card--chart {
    right: 0;
  }
  .contact-hero__float-badge--cloud {
    left: 0;
  }
  .contact-hero__float-badge--api {
    right: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero__glow,
  .contact-hero__content,
  .contact-hero__media,
  .contact-hero__card,
  .contact-hero__float-badge {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   Contact Us — Get In Touch section (page-contact.php)
--------------------------------------------------------------- */
.get-in-touch {
  position: relative;
  overflow: hidden;
  padding-top: clamp(3.5rem, 8vw, 100px);
  padding-bottom: clamp(3.5rem, 8vw, 100px);
  background-color: #f8fafc;
}

.get-in-touch__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 75%);
  opacity: 0.6;
}

.get-in-touch__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.get-in-touch__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}
@media (min-width: 992px) {
  .get-in-touch__grid {
    grid-template-columns: 5fr 7fr;
    align-items: start;
  }
}

/* Contact info cards */
.get-in-touch__info {
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.contact-info-card {
  display: flex;
  gap: 1.1rem;
  padding: 1.75rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.contact-info-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.1);
}

.contact-info-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 14px;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
  color: #2563eb;
}
/* Rotating brand-color treatment so the five cards read as a set, not
   five identical blue icons. */
.get-in-touch__info .contact-info-card:nth-child(2) .contact-info-card__icon {
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(6, 182, 212, 0.04));
  color: #06b6d4;
}
.get-in-touch__info .contact-info-card:nth-child(3) .contact-info-card__icon {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(16, 185, 129, 0.04));
  color: #10b981;
}
.get-in-touch__info .contact-info-card:nth-child(4) .contact-info-card__icon {
  background: linear-gradient(135deg, rgba(124, 58, 237, 0.12), rgba(124, 58, 237, 0.04));
  color: #7c3aed;
}
.get-in-touch__info .contact-info-card:nth-child(5) .contact-info-card__icon {
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.08));
  color: #2563eb;
}

.contact-info-card__title {
  margin-bottom: 0.35rem;
  font-size: 1.0625rem;
}

.contact-info-card__info {
  margin-bottom: 0.3rem;
  color: #020617;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}
.contact-info-card__info a {
  color: #2563eb;
  text-decoration: none;
}
.contact-info-card__info a:hover,
.contact-info-card__info a:focus-visible {
  text-decoration: underline;
}

.contact-info-card__description {
  margin: 0;
  color: #475569;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Form column */
.get-in-touch__form-col {
  position: relative;
}

.get-in-touch__form-glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -12%;
  width: 24rem;
  height: 24rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.12), rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
  animation: devorbit-glow-drift 18s ease-in-out infinite;
}

.get-in-touch__form-card {
  position: relative;
  z-index: 1;
  padding: 2.5rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(15, 23, 42, 0.08);
}
@media (max-width: 575.98px) {
  .get-in-touch__form-card {
    padding: 1.75rem;
  }
}

.get-in-touch__form-heading {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
}

.get-in-touch__form-description {
  margin-bottom: 1.75rem;
  color: #475569;
  font-size: 0.9375rem;
}

.get-in-touch__privacy-note {
  margin: 1rem 0 0;
  color: #475569;
  font-size: 0.8125rem;
  text-align: center;
}

/* Contact Form 7 output — scoped to this section so it never affects any
   other CF7 form elsewhere on the site. Structural classes (.form-row,
   .form-row--full, .form-row--submit) are the ones the form is expected to
   be wrapped in inside the Contact Form 7 admin editor. */
.get-in-touch__form .form-row {
  min-width: 0;
  margin-bottom: 1.25rem;
}
.get-in-touch__form .form-row--full,
.get-in-touch__form .form-row--submit {
  grid-column: 1 / -1;
}
@media (min-width: 576px) {
  .get-in-touch__form form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 1.25rem;
  }
}

.get-in-touch__form label {
  display: block;
  margin-bottom: 0.4rem;
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 600;
}

.get-in-touch__form input[type="text"],
.get-in-touch__form input[type="email"],
.get-in-touch__form input[type="tel"],
.get-in-touch__form select,
.get-in-touch__form textarea {
  width: 100%;
  padding: 16px;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.get-in-touch__form textarea {
  min-height: 8rem;
  resize: vertical;
}
.get-in-touch__form ::placeholder {
  color: #94a3b8;
}
.get-in-touch__form input:focus,
.get-in-touch__form select:focus,
.get-in-touch__form textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.get-in-touch__form .wpcf7-not-valid-tip {
  margin-top: 0.35rem;
  color: #dc2626;
  font-size: 0.8125rem;
}
.get-in-touch__form .wpcf7-response-output {
  margin: 1.25rem 0 0;
  padding: 0.85rem 1rem;
  border-radius: 0.65rem;
  font-size: 0.875rem;
  white-space: nowrap;
}
/* The form card is nearly full-width below the 992px breakpoint too (see
   .get-in-touch__grid), so a smaller font is enough to keep this on one
   line through tablet and large-phone widths — it's not a "desktop only"
   cutoff, since 567–768px is still wide enough once the text itself is a
   little smaller. Only genuinely narrow phones give up and wrap again. */
@media (max-width: 767.98px) {
  .get-in-touch__form .wpcf7-response-output {
    padding: 0.75rem 0.85rem;
    font-size: 0.8125rem;
  }
}
@media (max-width: 479.98px) {
  .get-in-touch__form .wpcf7-response-output {
    white-space: normal;
  }
}
.get-in-touch__form form.sent .wpcf7-response-output {
  color: #0d9367;
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
}
.get-in-touch__form form.invalid .wpcf7-response-output,
.get-in-touch__form form.unaccepted .wpcf7-response-output,
.get-in-touch__form form.aborted .wpcf7-response-output,
.get-in-touch__form form.spam .wpcf7-response-output,
.get-in-touch__form form.failed .wpcf7-response-output {
  color: #dc2626;
  background-color: rgba(220, 38, 38, 0.08);
  border: 1px solid rgba(220, 38, 38, 0.25);
}

.get-in-touch__form input[type="submit"] {
  width: 100%;
  padding: 1rem 1.75rem;
  background-color: #10b981;
  border: 2px solid #10b981;
  border-radius: 0.75rem;
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.get-in-touch__form input[type="submit"]:hover,
.get-in-touch__form input[type="submit"]:focus-visible {
  background-color: #0d9367;
  border-color: #0d9367;
  transform: translateY(-2px);
  box-shadow: 0 20px 40px rgba(16, 185, 129, 0.25);
}
.get-in-touch__form .wpcf7-spinner {
  margin-left: 0.6rem;
}

@media (prefers-reduced-motion: reduce) {
  .get-in-touch__form-glow {
    animation: none;
  }
  .contact-info-card,
  .get-in-touch__form input[type="submit"] {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Blog — Hero section (page-blog.php)
--------------------------------------------------------------- */
.blog-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4.5rem, 10vw, 140px);
  padding-bottom: clamp(4rem, 8vw, 120px);
  background-color: #f8fafc;
}

.blog-hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: devorbit-glow-drift 18s ease-in-out infinite;
}
.blog-hero__glow--blue {
  top: -12%;
  left: -10%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0) 70%);
}
.blog-hero__glow--cyan {
  right: -12%;
  bottom: -16%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14), rgba(6, 182, 212, 0) 70%);
  animation-delay: 4s;
}

.blog-hero__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%);
  opacity: 0.6;
}

.blog-hero__breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.blog-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: #475569;
  list-style: none;
}
.blog-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: #94a3b8;
}
.blog-hero__breadcrumb a {
  color: #475569;
  text-decoration: none;
}
.blog-hero__breadcrumb a:hover,
.blog-hero__breadcrumb a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}
.blog-hero__breadcrumb li[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
}

.blog-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
}
@media (min-width: 992px) {
  .blog-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.blog-hero__content {
  animation: devorbit-fade-up 0.6s ease both;
}

.blog-hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.blog-hero__heading {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  line-height: 1.15;
}

.blog-hero__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.blog-hero__description {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.blog-hero__topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 0 0 2rem;
  padding: 0;
  list-style: none;
}

.blog-hero__topic {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f172a;
  font-size: 0.8125rem;
  font-weight: 600;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.blog-hero__topic:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.blog-hero__topic-icon {
  display: inline-flex;
  color: #2563eb;
}
/* Rotate the brand colors per topic, same idea as the illustration's
   floating badges, so the three read as a set rather than identical blue. */
.blog-hero__topic:nth-child(2) .blog-hero__topic-icon {
  color: #7c3aed;
}
.blog-hero__topic:nth-child(3) .blog-hero__topic-icon {
  color: #06b6d4;
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero__topic {
    transition: none;
  }
}

.blog-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.blog-hero__media {
  position: relative;
  animation: devorbit-fade-up 0.6s ease 0.15s both;
}

.blog-hero__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .blog-hero__glow,
  .blog-hero__content,
  .blog-hero__media {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   Blog — Blog Categories pill nav (page-blog.php)

   Real links, not JS-driven tabs (see template-parts/blog/category-
   filter.php for why) — plain <a> pills with `aria-current="page"`
   marking the active one, no role="tablist"/"tab" ARIA needed since
   there's no in-page panel switching to describe.
--------------------------------------------------------------- */
.blog-category-filter {
  padding-top: 80px;
  padding-bottom: 50px;
  background-color: #fff;
}

.blog-category-filter__nav-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.blog-category-filter__nav-wrap::-webkit-scrollbar {
  display: none;
}

.blog-category-filter__nav {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 15px;
  width: max-content;
  min-width: 100%;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.blog-category-filter__nav.is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (min-width: 768px) {
  .blog-category-filter__nav {
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
  }
}

.blog-category-filter__pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
  padding: 0.6rem 1.25rem;
  color: #0f172a;
  font-size: 0.9375rem;
  font-weight: 600;
  white-space: nowrap;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.blog-category-filter__pill:hover,
.blog-category-filter__pill:focus-visible {
  color: #2563eb;
  border-color: #2563eb;
}
.blog-category-filter__pill.active {
  color: #fff;
  background-color: #2563eb;
  border-color: #2563eb;
  box-shadow: 0 8px 20px rgba(37, 99, 235, 0.25);
}
.blog-category-filter__pill:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.blog-category-filter__pill-icon {
  display: inline-flex;
  flex-shrink: 0;
}

.blog-category-filter__pill-count {
  color: inherit;
  font-weight: 500;
  opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
  .blog-category-filter__nav {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Blog — Latest Articles section (page-blog.php)
--------------------------------------------------------------- */
.latest-articles {
  padding-block: 100px;
}

.latest-articles__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 30px card gap via Bootstrap 5's grid gutter custom properties, scoped to
   this grid only so the homepage's own .row.g-4 (24px) is untouched. */
.latest-articles__grid {
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
  margin-bottom: 3rem;
}

.latest-articles__empty {
  max-width: 32rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  text-align: center;
}

.latest-articles__empty-text {
  margin-bottom: 1.5rem;
  color: #475569;
  font-size: 1.0625rem;
}

/* Pagination — built on paginate_links(), type: list, so the base markup
   is a plain <ul> of .page-numbers items; everything below just themes
   those default WordPress classes. */
.latest-articles__pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.latest-articles__pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-width: 2.75rem;
  height: 2.75rem;
  padding: 0 1rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.latest-articles__pagination a.page-numbers:hover,
.latest-articles__pagination a.page-numbers:focus-visible {
  transform: translateY(-2px);
  border-color: #2563eb;
  color: #2563eb;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.latest-articles__pagination .page-numbers.current {
  background-color: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.latest-articles__pagination .page-numbers.dots {
  border-color: transparent;
  background-color: transparent;
  color: #94a3b8;
}

.latest-articles__pagination .page-numbers.prev,
.latest-articles__pagination .page-numbers.next {
  padding-inline: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  .latest-articles__pagination .page-numbers {
    transition: none;
  }
  .latest-articles__pagination a.page-numbers:hover,
  .latest-articles__pagination a.page-numbers:focus-visible {
    transform: none;
  }
}

@media (max-width: 575.98px) {
  .latest-articles__pagination .page-numbers {
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.75rem;
    font-size: 0.875rem;
  }
}

/* ---------------------------------------------------------------
   Single Post — Blog Hero section (single.php, Section 1)
--------------------------------------------------------------- */
.single-hero {
  padding-top: 80px;
  padding-bottom: 2rem;
  background-color: #f8fafc;
}

.single-hero__breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
.single-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: #475569;
  list-style: none;
}
.single-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: #94a3b8;
}
.single-hero__breadcrumb a {
  color: #475569;
  text-decoration: none;
}
.single-hero__breadcrumb a:hover,
.single-hero__breadcrumb a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}
.single-hero__breadcrumb li[aria-current="page"] {
  overflow: hidden;
  max-width: 20rem;
  color: #0f172a;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.single-hero__category {
  display: inline-flex;
  margin-bottom: 1rem;
  padding: 0.3rem 0.85rem;
  border-radius: 999px;
  background-color: #2563eb;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-decoration: none;
}
.single-hero__category:hover,
.single-hero__category:focus-visible {
  background-color: #1350d4;
  color: #fff;
}

.single-hero__title {
  max-width: 46rem;
  margin-bottom: 1.5rem;
  font-size: clamp(2rem, 3.5vw + 1rem, 3rem);
  line-height: 1.2;
}

.single-hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: #475569;
  font-size: 0.9375rem;
}
.single-hero__author {
  color: #0f172a;
  font-weight: 700;
}
.single-hero__dot {
  color: #cbd5e1;
}

/* ---------------------------------------------------------------
   Single Post — Featured Image section (Section 2)
--------------------------------------------------------------- */
.single-featured-image {
  padding-bottom: 2.5rem;
  background-color: #f8fafc;
}

.single-featured-image__frame {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 1rem;
}

.single-featured-image__image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------------------------------------------------------
   Single Post — Article Content section (Section 3)

   the_content() is the only source of this markup; every rule below
   targets the standard classic/block-editor output (headings, lists,
   tables, code, quotes, buttons, embeds) rather than a custom template —
   per the brief, this page uses no ACF.
--------------------------------------------------------------- */
.single-content {
  padding-block: 2.5rem;
}

.single-content__body {
  max-width: 820px;
  margin: 0 auto;
  color: #475569;
  font-size: 18px;
  line-height: 1.8;
}

.single-content__body > * + * {
  margin-top: 1.5em;
}

.single-content__body h2,
.single-content__body h3,
.single-content__body h4,
.single-content__body h5,
.single-content__body h6 {
  margin-top: 2em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}
.single-content__body h2 {
  font-size: 1.75rem;
}
.single-content__body h3 {
  font-size: 1.5rem;
}
.single-content__body h4 {
  font-size: 1.25rem;
}
.single-content__body h5 {
  font-size: 1.125rem;
}
.single-content__body h6 {
  font-size: 1rem;
}

.single-content__body a {
  color: #2563eb;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.single-content__body a:hover,
.single-content__body a:focus-visible {
  color: #1350d4;
}

.single-content__body ul,
.single-content__body ol {
  padding-left: 1.5em;
}
.single-content__body li + li {
  margin-top: 0.5em;
}
.single-content__body ul {
  list-style: disc;
}
.single-content__body ol {
  list-style: decimal;
}

/* Images */
.single-content__body img {
  height: auto;
  max-width: 100%;
  border-radius: 0.75rem;
}
.single-content__body figure {
  margin: 0;
}
.single-content__body figcaption {
  margin-top: 0.75rem;
  color: #94a3b8;
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
}

/* Tables — display:block + overflow-x is a CSS-only responsive-table
   technique, no JS wrapper element required. */
.single-content__body table {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: 0.9375rem;
  -webkit-overflow-scrolling: touch;
}
.single-content__body th,
.single-content__body td {
  padding: 0.75rem 1rem;
  border: 1px solid #e2e8f0;
  text-align: left;
  white-space: nowrap;
}
.single-content__body th {
  background-color: #f8fafc;
  color: #0f172a;
  font-weight: 700;
}
.single-content__body tbody tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Code blocks */
.single-content__body pre {
  position: relative;
  overflow-x: auto;
  padding: 1.5rem;
  background-color: #0f172a;
  border-radius: 0.75rem;
  color: #e2e8f0;
  font-size: 0.875rem;
  line-height: 1.6;
}
.single-content__body pre code {
  padding: 0;
  background: none;
  color: inherit;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.single-content__body code {
  padding: 0.15rem 0.4rem;
  background-color: #f1f5f9;
  border-radius: 0.3rem;
  color: #0f172a;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 0.875em;
}

.single-content__copy-code {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  padding: 0.35rem 0.75rem;
  background-color: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.5rem;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  transition: background-color 0.25s ease;
}
.single-content__copy-code:hover,
.single-content__copy-code:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
}
.single-content__copy-code.is-copied {
  background-color: #10b981;
  border-color: #10b981;
}

/* Blockquotes */
.single-content__body blockquote {
  margin: 0;
  padding: 1.25rem 1.75rem;
  background-color: #f8fafc;
  border-left: 4px solid #2563eb;
  border-radius: 0 0.75rem 0.75rem 0;
  color: #0f172a;
  font-size: 1.125rem;
  font-style: italic;
}
.single-content__body blockquote p:last-child {
  margin-bottom: 0;
}

/* Buttons (Gutenberg Button block) */
.single-content__body .wp-block-button__link {
  display: inline-block;
  padding: 0.75rem 1.75rem;
  background-color: #2563eb;
  border-radius: 0.5rem;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.single-content__body .wp-block-button__link:hover,
.single-content__body .wp-block-button__link:focus-visible {
  background-color: #1350d4;
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.12);
}

/* Embedded videos */
.single-content__body .wp-block-embed__wrapper {
  overflow: hidden;
  border-radius: 0.75rem;
}

/* Highlight / callout boxes — an editor opts in by adding "highlight-box"
   or "callout-box" as an Additional CSS Class on a block in the editor's
   Advanced panel; see template-parts/single-content.php. */
.single-content__body .highlight-box {
  padding: 1.25rem 1.5rem;
  background-color: rgba(37, 99, 235, 0.06);
  border-radius: 0.75rem;
}
.single-content__body .callout-box {
  padding: 1.25rem 1.5rem;
  background-color: rgba(16, 185, 129, 0.06);
  border-left: 4px solid #10b981;
  border-radius: 0 0.75rem 0.75rem 0;
}
.single-content__body .highlight-box > *:first-child,
.single-content__body .callout-box > *:first-child {
  margin-top: 0;
}
.single-content__body .highlight-box > *:last-child,
.single-content__body .callout-box > *:last-child {
  margin-bottom: 0;
}

.single-content__page-links {
  margin-top: 2rem;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .single-content__body {
    font-size: 1rem;
  }
}

/* ---------------------------------------------------------------
   Single Post — Share Article section (Section 4)
--------------------------------------------------------------- */
.single-share {
  padding-block: 2.5rem;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.single-share__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  max-width: 820px;
  margin: 0 auto;
}

.single-share__heading {
  margin: 0;
  font-size: 1.125rem;
}

.single-share__list {
  display: flex;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.single-share__button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50%;
  color: #0f172a;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.single-share__button:hover,
.single-share__button:focus-visible {
  transform: translateY(-3px);
  border-color: #2563eb;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.1);
  color: #2563eb;
}

.single-share__button-icon--check {
  display: none;
}
.single-share__button.is-copied .single-share__button-icon--link {
  display: none;
}
.single-share__button.is-copied .single-share__button-icon--check {
  display: inline-flex;
}
.single-share__button.is-copied {
  border-color: #10b981;
  color: #10b981;
}

@media (max-width: 575.98px) {
  .single-share__inner {
    justify-content: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-content__copy-code,
  .single-share__button {
    transition: none;
  }
  .single-share__button:hover,
  .single-share__button:focus-visible {
    transform: none;
  }
  .single-content__body .wp-block-button__link:hover,
  .single-content__body .wp-block-button__link:focus-visible {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Single Post — Related Articles section (Section 5)
--------------------------------------------------------------- */
.single-related {
  padding-top: 2.5rem;
  padding-bottom: 100px;
}

/* ---------------------------------------------------------------
   Generic Page template (page.php) — plain content pages with no
   dedicated page-{slug}.php template of their own, e.g. legal pages
   (Privacy Policy, Terms & Conditions, Cookie Policy).
--------------------------------------------------------------- */
.page-hero {
  padding-top: 80px;
  padding-bottom: 2.5rem;
  background-color: #f8fafc;
  text-align: center;
}

.page-hero__breadcrumb {
  margin-bottom: 1.5rem;
  font-size: 0.875rem;
}
.page-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: #475569;
  list-style: none;
}
.page-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: #94a3b8;
}
.page-hero__breadcrumb a {
  color: #475569;
  text-decoration: none;
}
.page-hero__breadcrumb a:hover,
.page-hero__breadcrumb a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}
.page-hero__breadcrumb li[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
}

.page-hero__title {
  max-width: 42rem;
  margin: 0 auto;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.75rem);
}

.page-hero__updated {
  margin: 0.75rem 0 0;
  color: #64748b;
  font-size: 0.9375rem;
}

.page-content {
  padding-block: 4rem;
}
/* Narrower reading width than the section's own container — long-form
   legal text is more readable at ~860px than stretched full-width. */
.page-content .single-content__body {
  max-width: 860px;
  margin: 0 auto;
}

/* ---------------------------------------------------------------
   404 page (404.php)
--------------------------------------------------------------- */
.error-404 {
  padding-block: 120px;
  background-color: #f8fafc;
  text-align: center;
}

.error-404__inner {
  max-width: 640px;
  margin: 0 auto;
}

.error-404__code {
  margin: 0 0 0.5rem;
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Plus Jakarta Sans", sans-serif;
  font-size: clamp(4.5rem, 12vw, 7rem);
  font-weight: 800;
  line-height: 1;
}

.error-404__title {
  margin-bottom: 1rem;
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.error-404__description {
  max-width: 34rem;
  margin: 0 auto 2rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.error-404__search {
  margin-bottom: 2rem;
}

.error-404__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
}

/* Core WordPress search form output (get_search_form(), no custom
   searchform.php override) — .search-form/.search-field/.search-submit
   are WP's own default class names, so this also styles the "no search
   results" fallback in template-parts/content-none.php for free. */
.search-form {
  display: flex;
  gap: 0.5rem;
  max-width: 26rem;
  margin: 0 auto;
}
.search-form label {
  flex: 1 1 auto;
  margin: 0;
  text-align: left;
}
.search-field {
  width: 100%;
  padding: 0.75rem 1rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  color: #0f172a;
  font-family: inherit;
  font-size: 0.9375rem;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.search-field:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.search-submit {
  flex-shrink: 0;
  padding: 0.75rem 1.5rem;
  background-color: #2563eb;
  border: 2px solid #2563eb;
  border-radius: 0.75rem;
  color: #fff;
  font-weight: 600;
  font-size: 0.9375rem;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
.search-submit:hover,
.search-submit:focus-visible {
  background-color: #1d4ed8;
  border-color: #1d4ed8;
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.2);
}
@media (max-width: 480px) {
  .search-form {
    flex-direction: column;
  }
}

/* ---------------------------------------------------------------
   Services — Hero section (page-services.php)
--------------------------------------------------------------- */
.services-hero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(4.5rem, 10vw, 140px);
  padding-bottom: clamp(4rem, 8vw, 120px);
  background-color: #f8fafc;
}

.services-hero__glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  animation: devorbit-glow-drift 18s ease-in-out infinite;
}
.services-hero__glow--blue {
  top: -12%;
  left: -10%;
  width: 32rem;
  height: 32rem;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.14), rgba(37, 99, 235, 0) 70%);
}
.services-hero__glow--cyan {
  right: -12%;
  bottom: -16%;
  width: 28rem;
  height: 28rem;
  background: radial-gradient(circle, rgba(6, 182, 212, 0.14), rgba(6, 182, 212, 0) 70%);
  animation-delay: 4s;
}

.services-hero__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.6), transparent 70%);
  opacity: 0.6;
}

.services-hero__breadcrumb {
  position: relative;
  z-index: 1;
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.services-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: #475569;
  list-style: none;
}
.services-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: #94a3b8;
}
.services-hero__breadcrumb a {
  color: #475569;
  text-decoration: none;
}
.services-hero__breadcrumb a:hover,
.services-hero__breadcrumb a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}
.services-hero__breadcrumb li[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
}

.services-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 40px;
}
@media (min-width: 992px) {
  .services-hero__grid {
    grid-template-columns: 1fr 1fr;
  }
}

.services-hero__content {
  animation: devorbit-fade-up 0.6s ease both;
}

.services-hero__badge {
  display: inline-flex;
  align-items: center;
  margin-bottom: 1.25rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0.1));
  color: #2563eb;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.services-hero__heading {
  margin-bottom: 1.25rem;
  font-size: clamp(2rem, 4vw + 1rem, 3.25rem);
  line-height: 1.15;
}

.services-hero__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services-hero__description {
  max-width: 34rem;
  margin-bottom: 1.75rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.services-hero__trust-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.85rem 1.5rem;
  margin: 0 0 2.25rem;
  padding: 0;
  list-style: none;
}
@media (min-width: 480px) {
  .services-hero__trust-list {
    grid-template-columns: 1fr 1fr;
  }
}

.services-hero__trust-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: #0f172a;
  font-size: 0.9375rem;
  font-weight: 600;
}

.services-hero__trust-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background-color: rgba(16, 185, 129, 0.12);
  color: #10b981;
}

.services-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.services-hero__media {
  position: relative;
  animation: devorbit-fade-up 0.6s ease 0.15s both;
}

.services-hero__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .services-hero__glow,
  .services-hero__content,
  .services-hero__media {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   Services — Our Services section (page-services.php)
--------------------------------------------------------------- */
.our-services {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.our-services__glow {
  position: absolute;
  z-index: 0;
  top: -12%;
  right: -10%;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0) 70%);
  pointer-events: none;
}

.our-services__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.5), transparent 70%);
  opacity: 0.6;
}

.our-services__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.our-services__grid {
  position: relative;
  z-index: 1;
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}

.our-service-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.5rem 2rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.our-service-card:hover,
.our-service-card:focus-within {
  transform: translateY(-6px);
  border-color: #2563eb;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
}

.our-service-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12));
  color: #2563eb;
  transition: transform 0.3s ease;
}
.our-service-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.our-service-card:hover .our-service-card__icon,
.our-service-card:focus-within .our-service-card__icon {
  transform: scale(1.1);
}

.our-service-card__title {
  margin-bottom: 0.75rem;
  font-size: 1.25rem;
}

.our-service-card__description {
  margin-bottom: 1.25rem;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.our-service-card__features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}
.our-service-card__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 600;
}
.our-service-card__features svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #10b981;
}

.our-service-card__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  color: #2563eb;
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  transition: gap 0.2s ease, color 0.2s ease;
}
.our-service-card__button svg {
  transition: transform 0.2s ease;
}
.our-service-card__button:hover,
.our-service-card__button:focus-visible {
  color: #1350d4;
}
.our-service-card__button:hover svg,
.our-service-card__button:focus-visible svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .our-service-card,
  .our-service-card__icon,
  .our-service-card__button,
  .our-service-card__button svg {
    transition: none;
  }
  .our-service-card:hover,
  .our-service-card:focus-within {
    transform: none;
  }
  .our-service-card:hover .our-service-card__icon,
  .our-service-card:focus-within .our-service-card__icon {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Single Service page (single-service.php)
--------------------------------------------------------------- */
.single-service-hero {
  padding-top: 80px;
  padding-bottom: 2.5rem;
  background-color: #f8fafc;
  text-align: center;
}

.single-service-hero__breadcrumb {
  margin-bottom: 2rem;
  font-size: 0.875rem;
}
.single-service-hero__breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  color: #475569;
  list-style: none;
}
.single-service-hero__breadcrumb li:not(:last-child)::after {
  content: "/";
  margin-left: 0.4rem;
  color: #94a3b8;
}
.single-service-hero__breadcrumb a {
  color: #475569;
  text-decoration: none;
}
.single-service-hero__breadcrumb a:hover,
.single-service-hero__breadcrumb a:focus-visible {
  color: #2563eb;
  text-decoration: underline;
}
.single-service-hero__breadcrumb li[aria-current="page"] {
  color: #0f172a;
  font-weight: 600;
}

.single-service-hero__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12));
  color: #2563eb;
}
.single-service-hero__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.single-service-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}

.single-service-hero__title {
  max-width: 42rem;
  margin: 0 auto 1rem;
  font-size: clamp(2rem, 3.5vw + 1rem, 2.75rem);
}

.single-service-hero__lead {
  max-width: 38rem;
  margin: 0 auto 2rem;
  color: #475569;
  font-size: 1.125rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------
   Single Service page — content + features/CTA panel
--------------------------------------------------------------- */
.single-service-content {
  padding-block: 4rem;
}

.single-service-content__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  max-width: 1024px;
  margin: 0 auto;
}
@media (min-width: 992px) {
  .single-service-content__grid {
    grid-template-columns: 2fr 1fr;
    align-items: start;
  }
}

.single-service-content__features {
  position: sticky;
  top: 1.5rem;
  padding: 2rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.single-service-content__features-title {
  margin-bottom: 1.25rem;
  font-size: 1.125rem;
}

.single-service-content__features ul {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.single-service-content__features li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  color: #0f172a;
  font-size: 0.9375rem;
  font-weight: 600;
}
.single-service-content__features svg {
  flex-shrink: 0;
  margin-top: 0.1rem;
  color: #10b981;
}

.single-service-content__cta {
  display: flex;
  width: 100%;
  justify-content: center;
}

@media (max-width: 991.98px) {
  .single-service-content__features {
    position: static;
  }
}

/* ---------------------------------------------------------------
   Single Service page — Key Features

   Card markup/classes are new to this page, but copy the same values as
   `.feature-card` (icon circle, shadow, hover lift) so the design system
   stays identical without coupling this page to the homepage's component.
   Fade-up-on-scroll: assets/js/main.js adds `is-visible` to any
   .js-scroll-reveal element (this grid) the first time it's in view; each
   card then animates in with a slight stagger.
--------------------------------------------------------------- */
.single-service-features {
  padding-block: 100px;
}

.service-feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.5rem;
  background-color: #fff;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease;
}
.single-service-features__grid.is-visible .service-feature-card {
  opacity: 1;
  transform: translateY(0);
}
.single-service-features__grid > div:nth-child(2) .service-feature-card {
  transition-delay: 0.08s;
}
.single-service-features__grid > div:nth-child(3) .service-feature-card {
  transition-delay: 0.16s;
}
.single-service-features__grid > div:nth-child(4) .service-feature-card {
  transition-delay: 0.24s;
}
.single-service-features__grid > div:nth-child(5) .service-feature-card {
  transition-delay: 0.08s;
}
.single-service-features__grid > div:nth-child(6) .service-feature-card {
  transition-delay: 0.16s;
}
.single-service-features__grid > div:nth-child(7) .service-feature-card {
  transition-delay: 0.24s;
}
.single-service-features__grid > div:nth-child(8) .service-feature-card {
  transition-delay: 0.32s;
}
.service-feature-card:hover,
.service-feature-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
}

.service-feature-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(6, 182, 212, 0.12), rgba(16, 185, 129, 0.12));
  color: #06b6d4;
  transition: transform 0.25s ease;
}
.service-feature-card:hover .service-feature-card__icon,
.service-feature-card:focus-within .service-feature-card__icon {
  transform: scale(1.08);
}
.service-feature-card__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.service-feature-card__title {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
}

.service-feature-card__description {
  margin: 0;
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.9375rem;
  line-height: 1.6;
}

@media (prefers-reduced-motion: reduce) {
  .service-feature-card,
  .service-benefit-card {
    transition: none;
  }
}

/* ---------------------------------------------------------------
   Single Service page — Business Benefits

   Same card pattern as Key Features above, distinguished only by icon
   color (blue, matching `.industry-card__icon`) so the two sections read
   as related but distinct at a glance.
--------------------------------------------------------------- */
.single-service-benefits {
  padding-block: 100px;
  background-color: #f8fafc;
}

.service-benefit-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2rem 1.5rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.single-service-benefits__grid.is-visible .service-benefit-card {
  opacity: 1;
  transform: translateY(0);
}
.single-service-benefits__grid > div:nth-child(2) .service-benefit-card {
  transition-delay: 0.08s;
}
.single-service-benefits__grid > div:nth-child(3) .service-benefit-card {
  transition-delay: 0.16s;
}
.single-service-benefits__grid > div:nth-child(4) .service-benefit-card {
  transition-delay: 0.24s;
}
.single-service-benefits__grid > div:nth-child(5) .service-benefit-card {
  transition-delay: 0.08s;
}
.single-service-benefits__grid > div:nth-child(6) .service-benefit-card {
  transition-delay: 0.16s;
}
.single-service-benefits__grid > div:nth-child(7) .service-benefit-card {
  transition-delay: 0.24s;
}
.single-service-benefits__grid > div:nth-child(8) .service-benefit-card {
  transition-delay: 0.32s;
}
.service-benefit-card:hover,
.service-benefit-card:focus-within {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
  border-color: #2563eb;
}

.service-benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background-color: rgba(37, 99, 235, 0.1);
  color: #2563eb;
  transition: transform 0.25s ease, background-color 0.25s ease;
}
.service-benefit-card:hover .service-benefit-card__icon,
.service-benefit-card:focus-within .service-benefit-card__icon {
  transform: scale(1.08);
  background-color: rgba(37, 99, 235, 0.16);
}
.service-benefit-card__icon img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.service-benefit-card__title {
  margin-bottom: 0.5rem;
  font-size: 1.0625rem;
}

.service-benefit-card__description {
  margin: 0;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

/* ---------------------------------------------------------------
   Single Service page — Related Services
--------------------------------------------------------------- */
.single-service-related {
  padding-top: 1rem;
  padding-bottom: 100px;
}
.single-service-related .section-header {
  text-align: left;
  margin-left: 0;
}

/* ---------------------------------------------------------------
   Services page — Development Process background treatment

   Scoped to .process--services only, so the homepage's own Development
   Process section (template-parts/process.php) keeps its existing plain
   background — this richer glow/pattern treatment is specific to the
   Services page instance (template-parts/development-process.php).
--------------------------------------------------------------- */
.process--services {
  position: relative;
  overflow: hidden;
  background-color: #f8fafc;
}
.process--services::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -10%;
  left: -8%;
  width: 28rem;
  height: 28rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0) 70%);
  pointer-events: none;
}
.process--services::after {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.5), transparent 70%);
  opacity: 0.6;
  pointer-events: none;
}
.process--services .container {
  position: relative;
  z-index: 1;
}

/* ---------------------------------------------------------------
   Services page — Why Choose DevOrbit Technologies section

   Mirrors the About page's own Why Choose Us grid math (5fr/7fr,
   illustration visually first via order: -1 — see
   .about-why-choose-us__grid) under its own class prefix, since the
   illustration content differs (this page's richer tech scene, reusing
   the same .services-hero__* pieces built for the Services Hero).
   `.why-us-card` itself is reused verbatim — see assets/css/custom.css's
   About Us Why Choose Us block for that component's styles.
--------------------------------------------------------------- */
.services-why-choose-us {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.services-why-choose-us__glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -12%;
  width: 32rem;
  height: 32rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
}

.services-why-choose-us__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.5), transparent 75%);
  opacity: 0.6;
}

.services-why-choose-us__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
}
@media (min-width: 992px) {
  .services-why-choose-us__grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
  /* Content stays first in the DOM (headings before decorative imagery)
     but visually sits on the right, matching the "Left illustration /
     Right content" layout requirement. */
  .services-why-choose-us__media {
    order: -1;
  }
}

.services-why-choose-us__content {
  animation: devorbit-fade-up 0.6s ease both;
}


.services-why-choose-us__heading {
  margin-bottom: 1.25rem;
  color: #020617;
  font-size: clamp(1.875rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
}

.services-why-choose-us__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.services-why-choose-us__description {
  margin-bottom: 2rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.services-why-choose-us__features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  margin-bottom: 2.5rem;
}
@media (max-width: 575.98px) {
  .services-why-choose-us__features {
    grid-template-columns: 1fr;
  }
}

.services-why-choose-us__cta {
  display: inline-flex;
}

.services-why-choose-us__media {
  position: relative;
}

.services-why-choose-us__illustration {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 1rem;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.12);
}

@media (prefers-reduced-motion: reduce) {
  .services-why-choose-us__content {
    animation: none;
  }
}

/* ---------------------------------------------------------------
   Services page — Engagement Models section
--------------------------------------------------------------- */
.engagement-models {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.engagement-models__glow {
  position: absolute;
  z-index: 0;
  top: -12%;
  left: -10%;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0) 70%);
  pointer-events: none;
}

.engagement-models__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.5), transparent 70%);
  opacity: 0.6;
}

.engagement-models__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.engagement-models__grid {
  position: relative;
  z-index: 1;
  --bs-gutter-x: 30px;
  --bs-gutter-y: 30px;
}

.engagement-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 2.25rem 1.75rem 2rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.engagement-card.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered reveal — each card a little behind the previous one. */
.engagement-models__grid > *:nth-child(2) .engagement-card {
  transition-delay: 0.08s;
}
.engagement-models__grid > *:nth-child(3) .engagement-card {
  transition-delay: 0.16s;
}
.engagement-models__grid > *:nth-child(4) .engagement-card {
  transition-delay: 0.24s;
}
/* Must come after .is-visible in source order — same specificity, so
   whichever rule is later wins once both apply, keeping the hover lift
   working after the card has revealed. */
.engagement-card:hover,
.engagement-card:focus-within {
  transform: translateY(-6px);
  border-color: #2563eb;
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.1);
}

.engagement-card__number {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: #f1f5f9;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}

.engagement-card__icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.5rem;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(6, 182, 212, 0.12));
  color: #2563eb;
  transition: transform 0.3s ease;
}
.engagement-card__icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}
.engagement-card:hover .engagement-card__icon,
.engagement-card:focus-within .engagement-card__icon {
  transform: scale(1.1);
}

.engagement-card__title {
  margin-bottom: 0.75rem;
  font-size: 1.1875rem;
}

.engagement-card__description {
  margin-bottom: 1.25rem;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.engagement-card__best-for-label {
  margin-bottom: 0.6rem;
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.engagement-card__best-for {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 1.75rem;
  padding: 0;
  list-style: none;
}
.engagement-card__best-for li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  color: #0f172a;
  font-size: 0.875rem;
  font-weight: 600;
}
.engagement-card__best-for svg {
  flex-shrink: 0;
  margin-top: 0.15rem;
  color: #10b981;
}

.engagement-card__button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
  padding: 0.65rem 1.25rem;
  border: 2px solid #0f172a;
  border-radius: 0.5rem;
  color: #0f172a;
  font-weight: 600;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.25s ease, color 0.25s ease, gap 0.2s ease;
}
.engagement-card__button svg {
  transition: transform 0.2s ease;
}
.engagement-card__button:hover,
.engagement-card__button:focus-visible {
  background-color: #0f172a;
  color: #fff;
  gap: 0.6rem;
}
.engagement-card__button:hover svg,
.engagement-card__button:focus-visible svg {
  transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {
  .engagement-card {
    opacity: 1;
    transform: none !important;
    transition: none;
  }
  .engagement-card__icon,
  .engagement-card__button,
  .engagement-card__button svg {
    transition: none;
  }
  .engagement-card:hover .engagement-card__icon,
  .engagement-card:focus-within .engagement-card__icon {
    transform: none;
  }
}

/* ---------------------------------------------------------------
   Services page — Frequently Asked Questions section
--------------------------------------------------------------- */
.faq {
  position: relative;
  overflow: hidden;
  padding-block: 100px;
  background-color: #f8fafc;
}

.faq__glow {
  position: absolute;
  z-index: 0;
  top: -10%;
  right: -10%;
  width: 30rem;
  height: 30rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.1), rgba(6, 182, 212, 0) 70%);
  pointer-events: none;
}

.faq__pattern {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image: radial-gradient(rgba(15, 23, 42, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse at top, rgba(0, 0, 0, 0.5), transparent 70%);
  opacity: 0.6;
}

.faq__highlight {
  background: linear-gradient(90deg, #2563eb, #06b6d4);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.faq__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: 3rem;
}
@media (min-width: 992px) {
  .faq__grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
}

.faq__intro {
  animation: devorbit-fade-up 0.6s ease both;
}


.faq__heading {
  margin-bottom: 1.25rem;
  color: #020617;
  font-size: clamp(1.875rem, 3.5vw + 1rem, 2.75rem);
  line-height: 1.2;
}

.faq__description {
  margin-bottom: 2rem;
  color: #475569;
  font-size: 1.0625rem;
  line-height: 1.7;
}

.faq__cta-card {
  padding: 2rem;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.06);
}

.faq__cta-heading {
  margin-bottom: 0.6rem;
  font-size: 1.25rem;
}

.faq__cta-description {
  margin-bottom: 1.5rem;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.6;
}

.faq__cta-button {
  display: inline-flex;
}

/* Bootstrap accordion overrides — every item gets its own fully rounded
   card with a gap between (Bootstrap's default merges adjacent items'
   borders/radii), rather than changing Bootstrap's own collapse/toggle
   behaviour, which stays exactly as-is. */
.faq__accordion .accordion-item {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.faq__accordion .accordion-item:last-child {
  margin-bottom: 0;
}
.faq__accordion .accordion-item:hover {
  border-color: #2563eb;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.08);
}
/* Same blue-border accent as :hover, kept on while a panel is open — a
   thin :has() progressive enhancement (unsupported browsers just show no
   accent border, no breakage either way). */
.faq__accordion .accordion-item:has(.accordion-button:not(.collapsed)) {
  border-color: #2563eb;
}

.faq__accordion .accordion-button {
  padding: 1.25rem 1.5rem;
  color: #0f172a;
  font-family: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 1rem;
  background-color: #fff;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.faq__accordion .accordion-button:not(.collapsed) {
  /* Deliberately no background tint here: a tinted header sitting flush
     against the white .accordion-body below created a visible seam at
     the color boundary even with Bootstrap's own divider line removed —
     the blue text + item border below are enough to signal "open". */
  color: #2563eb;
  box-shadow: none;
}
/* :focus-visible, not :focus — a mouse click also gives the button focus,
   and a 4px spread box-shadow renders along every edge of it, which reads
   as an unwanted line right at the header/body boundary once expanded.
   :focus-visible keeps the ring for keyboard navigation only, matching
   the same convention already used everywhere else in this theme
   (.btn:focus-visible, .our-service-card:focus-within, etc.). */
.faq__accordion .accordion-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}
.faq__accordion .accordion-button::after {
  transition: transform 0.3s ease;
}

.faq__accordion .accordion-body {
  padding: 0.5rem 1.5rem 1.5rem;
  color: #475569;
  font-size: 0.9375rem;
  line-height: 1.7;
}
.faq__accordion .accordion-body p:last-child {
  margin-bottom: 0;
}

.faq__accordion .accordion-collapse {
  transition: height 0.3s ease;
}

@media (prefers-reduced-motion: reduce) {
  .faq__intro {
    animation: none;
  }
  .faq__accordion .accordion-item,
  .faq__accordion .accordion-button,
  .faq__accordion .accordion-button::after,
  .faq__accordion .accordion-collapse {
    transition: none;
  }
}