/* ==========================================================================
   Peacock Design Solutions — Main Stylesheet (style.css)
   Premium Corporate Digital Agency Theme
   Author: Peacock Design Solutions
   ========================================================================== */

/* ----------------------------------------------------------------------
   1. DESIGN TOKENS / ROOT VARIABLES
   ---------------------------------------------------------------------- */
:root {
  /* ===== TRI-COLOUR PROFESSIONAL PALETTE =====
     Cyan = brand/primary · Green = supporting partner (gradient pair)
     Coral = high-energy accent for key CTAs & highlights.
     Navy ink + cool neutrals keep three saturated colours feeling premium. */
  --primary: #00ACCC;          /* cyan */
  --primary-deep: #0091AD;
  --primary-bright: #2AC4E0;
  --secondary: #03A84E;        /* green */
  --secondary-deep: #028A40;
  --accent: #FF7F50;           /* coral */
  --accent-deep: #FF6333;
  --ink: #0E2A39;              /* deep navy — headings & body ink */
  --white: #ffffff;
  --dark: #0B2230;             /* near-black navy — dark sections */
  --light-bg: #F2F8FA;         /* cool soft surface */

  /* Derived tints */
  --primary-tint: rgba(0, 172, 204, 0.10);
  --primary-soft: rgba(0, 172, 204, 0.18);
  --secondary-tint: rgba(3, 168, 78, 0.10);
  --accent-tint: rgba(255, 127, 80, 0.14);
  --muted: #5A6B78;
  --border: #E2EAEF;

  /* Gradients */
  --btn-gradient: linear-gradient(100deg, #00ACCC 0%, #03A84E 100%);
  --accent-gradient: linear-gradient(100deg, #FF6333 0%, #FF7F50 100%);
  --green-cyan-gradient: linear-gradient(100deg, #03A84E 0%, #00ACCC 100%);
  --tri-gradient: linear-gradient(100deg, #00ACCC 0%, #03A84E 50%, #FF7F50 100%);
  --hero-gradient: linear-gradient(135deg, #e7f6f9 0%, #f2f8fa 55%, #ffffff 100%);
  --mesh-1: radial-gradient(circle at 16% 20%, rgba(0, 172, 204, 0.20), transparent 46%),
    radial-gradient(circle at 84% 26%, rgba(3, 168, 78, 0.16), transparent 50%),
    radial-gradient(circle at 50% 92%, rgba(255, 127, 80, 0.16), transparent 46%);

  /* Typography */
  --font-display: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;

  /* Radii & shadows */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --shadow-sm: 0 2px 6px rgba(11, 34, 48, 0.04), 0 8px 22px rgba(11, 34, 48, 0.05);
  --shadow: 0 4px 14px rgba(11, 34, 48, 0.05), 0 18px 44px rgba(11, 34, 48, 0.08);
  --shadow-lg: 0 8px 26px rgba(11, 34, 48, 0.07), 0 32px 70px rgba(11, 34, 48, 0.13);
  --shadow-primary: 0 16px 38px rgba(0, 172, 204, 0.30);

  /* Transitions */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --transition: 0.4s var(--ease);
  --container: 1200px;
}

/* ----------------------------------------------------------------------
   2. BASE / RESET
   ---------------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  color: var(--dark);
  background: var(--white);
  line-height: 1.7;
  overflow-x: hidden;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  color: var(--dark);
  letter-spacing: -0.02em;
}

a {
  text-decoration: none;
  color: inherit;
  transition: color var(--transition);
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
ul {
  list-style: none;
}
section {
  position: relative;
}

::selection {
  background: var(--primary);
  color: #fff;
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: var(--light-bg);
}
::-webkit-scrollbar-thumb {
  background: var(--secondary);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--primary);
}

/* ----------------------------------------------------------------------
   3. LAYOUT HELPERS
   ---------------------------------------------------------------------- */
.container {
  max-width: var(--container);
}
.section {
  padding: 80px 0;
}
.section-sm {
  padding: 70px 0;
}

.section-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}
.section-label::before {
  content: "";
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
}

.section-title {
  font-size: clamp(1.9rem, 3.5vw, 2.9rem);
  margin-bottom: 18px;
  color: var(--ink);
}
.section-subtitle {
  color: var(--muted);
  font-size: 1.05rem;
  max-width: 640px;
}
.text-gradient {
  background: var(--btn-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ----------------------------------------------------------------------
   4. BUTTONS
   ---------------------------------------------------------------------- */
.btn-pds {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 14px 30px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition);
  white-space: nowrap;
}
.btn-primary-pds {
  background: var(--btn-gradient);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn-primary-pds::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, #0091ad 0%, #028a40 100%);
  opacity: 0;
  transition: opacity var(--transition);
  z-index: -1;
}
.btn-primary-pds:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 46px rgba(0, 172, 204, 0.34);
  color: #fff;
}
.btn-primary-pds:hover::after {
  opacity: 1;
}

.btn-outline-pds {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}
.btn-outline-pds:hover {
  background: var(--primary);
  color: #fff;
  transform: translateY(-3px);
}

.btn-light-pds {
  background: #fff;
  color: var(--primary);
  box-shadow: var(--shadow-sm);
}
.btn-light-pds:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.btn-pds i {
  transition: transform var(--transition);
}
.btn-pds:hover i {
  transform: translateX(4px);
}

/* ----------------------------------------------------------------------
   5. NAVBAR
   ---------------------------------------------------------------------- */
.pds-topbar {
  background: var(--dark);
  color: #cdd7e2;
  font-size: 0.85rem;
  padding: 9px 0;
}
.pds-topbar a {
  color: #cdd7e2;
}
.pds-topbar a:hover {
  color: var(--primary);
}
.pds-topbar .topbar-info {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
}
.pds-topbar .topbar-info span i {
  color: var(--primary);
  margin-right: 7px;
}
.pds-topbar .topbar-social a {
  margin-left: 14px;
  font-size: 0.95rem;
}

.pds-navbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  padding: 18px 0;
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(0px);
  transition: padding var(--transition), background var(--transition),
    box-shadow var(--transition), backdrop-filter var(--transition);
}
.pds-navbar.scrolled {
  padding: 11px 0;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(160%);
  box-shadow: var(--shadow-sm);
}
.pds-navbar .navbar-brand img {
  height: 46px;
  transition: height var(--transition);
}
.pds-navbar.scrolled .navbar-brand img {
  height: 40px;
}

.pds-navbar .nav-link {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.97rem;
  color: var(--dark) !important;
  padding: 8px 16px !important;
  position: relative;
}
.pds-navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 16px;
  bottom: 2px;
  width: 0;
  height: 2px;
  background: var(--btn-gradient);
  border-radius: 2px;
  transition: width var(--transition);
}
.pds-navbar .nav-link:hover::after,
.pds-navbar .nav-link.active::after {
  width: calc(100% - 32px);
}
.pds-navbar .nav-link:hover,
.pds-navbar .nav-link.active {
  color: var(--primary) !important;
}

/* Dropdown */
.pds-navbar .nav-item.dropdown {
  position: relative;
}
.pds-navbar .dropdown-menu {
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 12px;
  margin-top: 14px;
  min-width: 250px;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease), visibility 0.3s var(--ease);
  display: block;
  visibility: hidden;
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 1040;
  background: var(--white);
}
.pds-navbar .dropdown:hover .dropdown-menu,
.pds-navbar .nav-item.dropdown:hover .dropdown-menu,
.pds-navbar .dropdown-menu.show {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}
.pds-navbar .dropdown-item {
  font-family: var(--font-display);
  font-size: 0.92rem;
  font-weight: 500;
  border-radius: 10px;
  padding: 11px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: background var(--transition), color var(--transition);
}
.pds-navbar .dropdown-item i {
  color: var(--primary);
  width: 18px;
}
.pds-navbar .dropdown-item:hover {
  background: var(--primary-tint);
  color: var(--primary);
}
.pds-navbar .dropdown-item:hover i {
  color: var(--primary);
}

.navbar-toggler {
  border: none;
  padding: 6px;
}
.navbar-toggler:focus {
  box-shadow: none;
}
.navbar-toggler-icon-custom {
  width: 26px;
  height: 2px;
  background: var(--dark);
  position: relative;
  display: block;
  transition: var(--transition);
}
.navbar-toggler-icon-custom::before,
.navbar-toggler-icon-custom::after {
  content: "";
  position: absolute;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--dark);
  transition: var(--transition);
}
.navbar-toggler-icon-custom::before {
  top: -8px;
}
.navbar-toggler-icon-custom::after {
  top: 8px;
}

/* ----------------------------------------------------------------------
   6. HERO / SWIPER BANNER
   ---------------------------------------------------------------------- */
.hero-swiper {
  width: 100%;
  height: 50vh;
  min-height: 640px;
}
.hero-slide {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--hero-gradient);
}
.hero-slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mesh-1);
  z-index: 0;
}
.hero-content {
  position: relative;
  z-index: 3;
  padding: 60px 0;
}
.hero-tagline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  background: rgba(255, 255, 255, 0.7);
  padding: 9px 20px;
  border-radius: 100px;
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.hero-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  line-height: 1.08;
  margin-bottom: 22px;
}
.hero-desc {
  font-size: 1.1rem;
  color: var(--muted);
  max-width: 540px;
  margin-bottom: 34px;
}
.hero-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
}
.hero-need-help {
  display: flex;
  align-items: center;
  gap: 12px;
}
.hero-need-help .nh-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  box-shadow: var(--shadow-sm);
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 1.1rem;
  animation: ring 2.2s infinite;
}
.hero-need-help small {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
}
.hero-need-help strong {
  font-family: var(--font-display);
  color: var(--dark);
}

@keyframes ring {
  0%,
  100% {
    transform: rotate(0);
  }
  10%,
  30% {
    transform: rotate(14deg);
  }
  20%,
  40% {
    transform: rotate(-14deg);
  }
}

.hero-visual {
  position: relative;
  z-index: 2;
}
.hero-visual img.hero-main {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  animation: floatY 6s ease-in-out infinite;
}
.hero-floating-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
}
.hero-floating-card .fc-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--btn-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
}
.hero-floating-card small {
  color: var(--muted);
  font-weight: 400;
  font-size: 0.75rem;
}
.hero-floating-card strong {
  font-size: 1.05rem;
}
.fc-1 {
  top: 12%;
  left: -6%;
  animation: floatY 5s ease-in-out infinite;
}
.fc-2 {
  bottom: 25%;
  right: -4%;
  animation: floatY 6.5s ease-in-out infinite 0.5s;
}

/* Animated background blobs */
.hero-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(50px);
  opacity: 0.5;
  z-index: 1;
  animation: floatBlob 12s ease-in-out infinite;
}
.hero-blob.b1 {
  width: 340px;
  height: 340px;
  background: var(--primary);
  top: -80px;
  right: -60px;
}
.hero-blob.b2 {
  width: 260px;
  height: 260px;
  background: var(--accent);
  bottom: -60px;
  left: -40px;
  animation-delay: 3s;
}

@keyframes floatY {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-18px);
  }
}
@keyframes floatBlob {
  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(20px, -30px) scale(1.05);
  }
  66% {
    transform: translate(-15px, 20px) scale(0.97);
  }
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  color: var(--primary);
  font-size: 0.78rem;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-align: center;
}
.scroll-indicator .mouse {
  width: 24px;
  height: 40px;
  border: 2px solid var(--primary);
  border-radius: 14px;
  margin: 0 auto 8px;
  position: relative;
}
.scroll-indicator .mouse::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 8px;
  background: var(--primary);
  border-radius: 4px;
  animation: scrollDot 1.6s infinite;
}
@keyframes scrollDot {
  0% {
    opacity: 0;
    top: 7px;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    top: 20px;
  }
}

/* Swiper controls */
.hero-swiper .swiper-pagination-bullet {
  width: 11px;
  height: 11px;
  background: var(--primary);
  opacity: 0.35;
  transition: var(--transition);
}
.hero-swiper .swiper-pagination-bullet-active {
  opacity: 1;
  width: 30px;
  border-radius: 6px;
}
.hero-swiper .swiper-button-next,
.hero-swiper .swiper-button-prev {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  box-shadow: var(--shadow);
  color: var(--primary);
  transition: var(--transition);
}
.hero-swiper .swiper-button-next:hover,
.hero-swiper .swiper-button-prev:hover {
  background: var(--primary);
  color: #fff;
}
.hero-swiper .swiper-button-next::after,
.hero-swiper .swiper-button-prev::after {
  font-size: 1.1rem;
  font-weight: 700;
}

/* ----------------------------------------------------------------------
   7. PAGE BANNER (inner pages)
   ---------------------------------------------------------------------- */
.page-banner {
  padding: 50px 0 50px;
  background: var(--hero-gradient);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.page-banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mesh-1);
}
.page-banner .container {
  position: relative;
  z-index: 2;
}
.page-banner h1 {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  margin-bottom: 14px;
  color: var(--ink);
}
.breadcrumb-pds {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.7);
  padding: 9px 22px;
  border-radius: 100px;
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
}
.breadcrumb-pds a:hover {
  color: var(--primary);
}
.breadcrumb-pds .sep {
  color: var(--primary);
}
.breadcrumb-pds .current {
  color: var(--primary);
  font-weight: 600;
}

/* ----------------------------------------------------------------------
   8. CARDS — Services / Features / Process
   ---------------------------------------------------------------------- */
.service-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 38px 32px;
  height: 100%;
  position: relative;
  overflow: hidden;
  transition: transform var(--transition), box-shadow var(--transition),
    border-color var(--transition);
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--btn-gradient);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.service-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}
.service-card:hover::before {
  transform: scaleX(1);
}
.service-icon {
  width: 70px;
  height: 70px;
  border-radius: 18px;
  background: var(--primary-tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  margin-bottom: 22px;
  transition: var(--transition);
}
.service-card:hover .service-icon {
  color: #fff;
  transform: rotate(-6deg) scale(1.06);
}
.service-card h3 {
  font-size: 1.3rem;
  margin-bottom: 12px;
}
.service-card p {
  color: var(--muted);
  font-size: 0.97rem;
  margin-bottom: 20px;
}
.service-link {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.service-link i {
  transition: transform var(--transition);
}
.service-card:hover .service-link i {
  transform: translateX(5px);
}

/* Feature card (why choose us) */
.feature-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px 26px;
  height: 100%;
  transition: var(--transition);
}
.feature-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
}
.feature-card .fi {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--btn-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  margin-bottom: 18px;
}
.feature-card h4 {
  font-size: 1.12rem;
  margin-bottom: 10px;
}
.feature-card p {
  color: var(--muted);
  font-size: 0.93rem;
}

/* ----------------------------------------------------------------------
   9. ABOUT / COUNTERS
   ---------------------------------------------------------------------- */
.about-img-wrap {
  position: relative;
}
.about-img-wrap img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.about-exp-badge {
  position: absolute;
  bottom: -24px;
  right: -10px;
  background: var(--btn-gradient);
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 28px;
  box-shadow: var(--shadow-primary);
  text-align: center;
  animation: floatY 5s ease-in-out infinite;
}
.about-exp-badge .num {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 800;
  line-height: 1;
}
.about-exp-badge .lbl {
  font-size: 0.82rem;
  opacity: 0.9;
}
.about-list li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 14px;
  color: #334155;
}
.about-list li i {
  color: var(--primary);
  background: var(--primary-tint);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  flex-shrink: 0;
  margin-top: 3px;
}

.counter-strip {
  background: var(--dark);
  color: #fff;
}
.counter-strip .counter-item {
  text-align: center;
  padding: 18px;
}
.counter-strip .counter-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  background: var(--accent-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.counter-strip .counter-lbl {
  color: #ffffff;
  font-size: 0.95rem;
  margin-top: 4px;
}

/* ----------------------------------------------------------------------
   10. PORTFOLIO
   ---------------------------------------------------------------------- */
.portfolio-filter {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 44px;
}
.portfolio-filter button {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 0.9rem;
  padding: 10px 22px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  cursor: pointer;
  transition: var(--transition);
}
.portfolio-filter button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.portfolio-filter button.active {
  background: var(--btn-gradient);
  color: #fff;
  border-color: transparent;
  box-shadow: var(--shadow-primary);
}

.portfolio-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--transition);
}
.portfolio-item img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.portfolio-item:hover img {
  transform: scale(1.1);
}
.portfolio-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8, 26, 31, 0.92),
    rgba(0, 172, 204, 0.45) 55%,
    transparent
  );
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 26px;
  opacity: 0;
  transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay {
  opacity: 1;
}
.portfolio-overlay span {
  color: var(--primary);
  font-size: 0.8rem;
  font-family: var(--font-display);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.portfolio-overlay h4 {
  color: #fff;
  font-size: 1.25rem;
  margin: 6px 0 14px;
  transform: translateY(12px);
  transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay h4 {
  transform: translateY(0);
}
.portfolio-overlay .pf-link {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #fff;
  color: var(--primary);
  display: grid;
  place-items: center;
  transform: translateY(12px);
  transition: var(--transition);
}
.portfolio-item:hover .portfolio-overlay .pf-link {
  transform: translateY(0);
}
.portfolio-overlay .pf-link:hover {
  background: var(--primary);
  color: #fff;
}

.portfolio-info {
  padding: 24px 20px;
  background: #fff;
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
}
.portfolio-info h5 {
  font-size: 1.15rem;
  font-weight: 600;
  margin: 0 0 10px;
  color: var(--dark);
}
.portfolio-info p {
  font-size: 0.9rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.5;
}

/* ----------------------------------------------------------------------
   11. PROCESS TIMELINE
   ---------------------------------------------------------------------- */
.process-step {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 32px 26px;
  height: 100%;
  position: relative;
  transition: var(--transition);
}
.process-step:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
}
.process-step .step-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.6rem;
  color: var(--primary-soft);
  position: absolute;
  top: 14px;
  right: 22px;
  line-height: 1;
}
.process-step .step-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--primary-tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.4rem;
  margin-bottom: 18px;
}
.process-step:hover .step-icon {
  background: var(--btn-gradient);
  color: #fff;
}
.process-step h4 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}
.process-step p {
  color: var(--muted);
  font-size: 0.92rem;
}

/* ----------------------------------------------------------------------
   12. TESTIMONIALS
   ---------------------------------------------------------------------- */
.testi-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 38px 34px;
  height: 100%;
  position: relative;
}
.testi-card .quote-mark {
  font-family: var(--font-display);
  font-size: 4rem;
  color: var(--primary-soft);
  line-height: 0.7;
  position: absolute;
  top: 24px;
  right: 30px;
}
.testi-stars {
  color: var(--accent);
  margin-bottom: 16px;
}
.testi-card p {
  color: #334155;
  font-size: 1rem;
  margin-bottom: 24px;
}
.testi-author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testi-author img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
}
.testi-author h5 {
  font-size: 1.05rem;
  margin: 0;
}
.testi-author small {
  color: var(--primary);
  font-weight: 600;
}

/* ----------------------------------------------------------------------
   13. BLOG
   ---------------------------------------------------------------------- */
.blog-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  height: 100%;
  transition: var(--transition);
}
.blog-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
}
.blog-thumb {
  overflow: hidden;
  height: 220px;
}
.blog-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s var(--ease);
}
.blog-card:hover .blog-thumb img {
  transform: scale(1.08);
}
.blog-body {
  padding: 26px;
}
.blog-meta {
  font-size: 0.82rem;
  color: var(--primary);
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: 10px;
}
.blog-body h4 {
  font-size: 1.18rem;
  margin-bottom: 12px;
}
.blog-body p {
  color: var(--muted);
  font-size: 0.93rem;
  margin-bottom: 16px;
}

/* ----------------------------------------------------------------------
   14. CAREER / JOB CARDS
   ---------------------------------------------------------------------- */
.job-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.job-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.job-card .job-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-tint);
  padding: 5px 14px;
  border-radius: 100px;
  margin-bottom: 14px;
}
.job-card h4 {
  font-size: 1.2rem;
  margin-bottom: 10px;
}
.job-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  color: var(--muted);
  font-size: 0.86rem;
  margin: 14px 0;
}
.job-meta span i {
  color: var(--primary);
  margin-right: 6px;
}

/* ----------------------------------------------------------------------
   15. FAQ ACCORDION
   ---------------------------------------------------------------------- */
.faq-accordion .accordion-item {
  border: 1px solid var(--border);
  border-radius: var(--radius) !important;
  margin-bottom: 16px;
  overflow: hidden;
  background: #fff;
}
.faq-accordion .accordion-button {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--dark);
  padding: 22px 26px;
  background: #fff;
}
.faq-accordion .accordion-button:not(.collapsed) {
  color: var(--primary);
  background: var(--primary-tint);
  box-shadow: none;
}
.faq-accordion .accordion-button:focus {
  box-shadow: none;
}
.faq-accordion .accordion-button::after {
  background-image: none;
  content: "\f067";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.85rem;
  color: var(--primary);
  transition: var(--transition);
  width: auto;
  height: auto;
}
.faq-accordion .accordion-button:not(.collapsed)::after {
  content: "\f068";
  transform: none;
}
.faq-accordion .accordion-body {
  padding: 4px 26px 24px;
  color: var(--muted);
}

/* ----------------------------------------------------------------------
   16. CONTACT
   ---------------------------------------------------------------------- */
.contact-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 44px;
  box-shadow: var(--shadow-sm);
}
.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.contact-info-item .ci-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  flex-shrink: 0;
  background: var(--primary-tint);
  color: var(--primary);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
}
.contact-info-item h5 {
  font-size: 1rem;
  margin-bottom: 3px;
}
.contact-info-item p,
.contact-info-item a {
  color: var(--muted);
  font-size: 0.95rem;
}
.contact-info-item a:hover {
  color: var(--primary);
}

.form-control-pds {
  width: 100%;
  padding: 14px 18px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 0.95rem;
  transition: var(--transition);
  background: var(--light-bg);
}
.form-control-pds:focus {
  outline: none;
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 4px var(--primary-tint);
}
textarea.form-control-pds {
  resize: vertical;
  min-height: 140px;
}

/* ===== MODAL STYLING ===== */
.modal-content.quote-modal {
  border: none;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 56px rgba(11, 32, 39, 0.16);
  background: var(--white);
}
.quote-modal .modal-header {
  background: var(--btn-gradient);
  padding: 24px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.quote-modal .modal-title {
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.5rem;
}
.quote-modal .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}
.quote-modal .btn-close:hover {
  opacity: 1;
}
.quote-modal .modal-body {
  padding: 20px;
}
.quote-form .form-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--dark);
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.quote-form .form-control-pds {
  border: 1.5px solid var(--border);
  background: var(--light-bg);
  font-size: 0.95rem;
  transition: all var(--transition);
}
.quote-form .form-control-pds:focus {
  border-color: var(--primary);
  background: var(--white);
  box-shadow: 0 0 0 4px var(--primary-tint);
}
.quote-form .btn-primary-pds {
  margin-top: 8px;
  padding: 14px 28px;
  font-weight: 600;
  border: none;
}
.quote-form .btn-primary-pds:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-primary);
}

/* Modal responsive */
@media (max-width: 576px) {
  .quote-modal .modal-body {
    padding: 20px;
  }
  .quote-modal .modal-title {
    font-size: 1.25rem;
  }
}
.form-label-pds {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 8px;
  display: block;
}
.form-msg {
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  margin-top: 8px;
  display: none;
}
.form-msg.success {
  background: rgba(34, 197, 94, 0.12);
  color: #15803d;
  display: block;
}
.form-msg.error {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
  display: block;
}

.map-wrap {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  height: 100%;
  min-height: 360px;
}
.map-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  min-height: 360px;
}

/* WhatsApp float */
.whatsapp-float {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 1040;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  box-shadow: 0 12px 30px rgba(37, 211, 102, 0.4);
  animation: pulseWa 2s infinite;
}
.whatsapp-float:hover {
  color: #fff;
  transform: scale(1.08);
}
@keyframes pulseWa {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
  }
  70% {
    box-shadow: 0 0 0 16px rgba(37, 211, 102, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Back to top */
.back-to-top {
  position: fixed;
  bottom: 26px;
  right: 26px;
  z-index: 1040;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--btn-gradient);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  border: none;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: var(--transition);
  box-shadow: var(--shadow-primary);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ----------------------------------------------------------------------
   17. CTA SECTION
   ---------------------------------------------------------------------- */
.cta-section {
  background: var(--btn-gradient);
  border-radius: var(--radius-lg);
  padding: 64px;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-align: center;
}
.cta-section::before,
.cta-section::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
}
.cta-section::before {
  width: 280px;
  height: 280px;
  top: -120px;
  left: -80px;
}
.cta-section::after {
  width: 220px;
  height: 220px;
  bottom: -110px;
  right: -60px;
}
.cta-section h2 {
  color: #fff;
  font-size: clamp(1.8rem, 3.5vw, 2.6rem);
  margin-bottom: 14px;
  position: relative;
}
.cta-section p {
  color: rgba(255, 255, 255, 0.9);
  max-width: 560px;
  margin: 0 auto 28px;
  position: relative;
}
.cta-section .btn-light-pds {
  position: relative;
}

/* ----------------------------------------------------------------------
   18. FOOTER
   ---------------------------------------------------------------------- */
.pds-footer {
  background: var(--dark);
  color: #94a3b8;
  padding-top: 80px;
  position: relative;
  overflow: hidden;
}
.pds-footer .footer-logo {
  height: 50px;
  margin-bottom: 22px;
}
.pds-footer p {
  font-size: 0.93rem;
}
.pds-footer h5 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 22px;
  position: relative;
  padding-bottom: 12px;
}
.pds-footer h5::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  background: var(--btn-gradient);
  border-radius: 3px;
}
.pds-footer ul li {
  margin-bottom: 12px;
}
.pds-footer ul li a {
  font-size: 0.93rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: var(--transition);
}
.footer-link ul li a::before {
  content: "\f105";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  color: var(--primary);
  font-size: 0.8rem;
  transition: var(--transition);
}
.pds-footer ul li a:hover {
  color: #fff;
  padding-left: 4px;
}
.footer-contact li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 0.92rem;
}
.footer-contact li i {
  color: var(--primary);
  margin-top: 4px;
}
.footer-social {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.footer-social a {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-grid;
  place-items: center;
  color: #cbd5e1;
  transition: var(--transition);
}
.footer-social a:hover {
  background: var(--btn-gradient);
  color: #fff;
  transform: translateY(-3px);
}
.footer-newsletter {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.footer-newsletter input {
  flex: 1;
  padding: 12px 16px;
  border-radius: 100px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 0.9rem;
}
.footer-newsletter input::placeholder {
  color: #64748b;
}
.footer-newsletter input:focus {
  outline: none;
  border-color: var(--primary);
}
.footer-newsletter button {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background: var(--btn-gradient);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--transition);
}
.footer-newsletter button:hover {
  transform: scale(1.06);
}
.footer-bottom {
  margin-top: 60px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: 24px 0;
  font-size: 0.88rem;
}
.footer-bottom a:hover {
  color: #fff;
}

/* ----------------------------------------------------------------------
   19. PRELOADER
   ---------------------------------------------------------------------- */
.pds-preloader {
  position: fixed;
  inset: 0;
  background: #fff;
  z-index: 9999;
  display: grid;
  place-items: center;
  transition: opacity 0.6s, visibility 0.6s;
}
.pds-preloader.hide {
  opacity: 0;
  visibility: hidden;
}
.pds-preloader .loader {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 4px solid var(--primary-soft);
  border-top-color: var(--primary);
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ============================================================
   UI/UX POLISH LAYER — fixes content visibility, icon spacing,
   hover states, mobile layouts, and visual depth.
   ============================================================ */

/* ---- AOS visibility OVERRIDE ----
   AOS's default behavior hides elements with opacity:0 until they scroll into
   the viewport. This causes content below the fold to appear invisible to:
   - Screen readers / accessibility tools
   - Search engine crawlers seeing the initial render
   - Users who don't scroll
   - Resize/orientation changes that re-trigger initial state
   So we keep content always visible. AOS still gets to add its .aos-animate
   class — we just don't depend on it for visibility. The site has plenty of
   motion from Swiper, hover states, counters, and blob animations. */
[data-aos] {
  opacity: 1 !important;
  transform: none !important;
}
/* Optional subtle micro-animation when AOS does trigger (slide-up only) */
[data-aos^="fade-up"]:not(.aos-animate) {
  transform: translateY(20px) !important;
  opacity: 0.92 !important;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-aos^="fade-up"].aos-animate {
  transform: none !important;
  opacity: 1 !important;
}

/* ---- Hero floating stat cards: stack label above value properly ---- */
.hero-floating-card > span:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.15;
}
.hero-floating-card small {
  letter-spacing: 0.6px;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 500;
}
.hero-floating-card strong {
  font-size: 1rem;
  color: var(--dark);
  font-weight: 700;
}

/* ---- Top bar icons + spacing ---- */
.pds-topbar .topbar-info span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 20px;
}
.pds-topbar .topbar-info i {
  color: var(--primary);
}

/* ---- AOS-safety: always show critical above-the-fold content ---- */
.pds-topbar [data-aos],
.pds-navbar [data-aos],
.pds-hero [data-aos],
.pds-hero .swiper-slide [data-aos] {
  opacity: 1 !important;
  transform: none !important;
}

/* ---- Mobile contact form spacing (form was crammed below info) ---- */
@media (max-width: 991px) {
  .contact-card {
    margin-top: 32px;
  }
}

/* ---- Service cards: ensure consistent height + cta sticks to bottom ---- */
.service-card {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.service-card .service-link {
  margin-top: auto;
}

/* ---- Hero CTA button row: round phone-icon button proper styling ---- */
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.hero-phone-circle {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--primary-tint);
  display: grid;
  place-items: center;
  color: var(--primary);
  font-size: 1.15rem;
  box-shadow: var(--shadow-sm);
  flex-shrink: 0;
}

/* ---- WhatsApp float + back-to-top: solid visible icons ---- */
.whatsapp-float {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 1.6rem;
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 999;
  box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
  transition: transform 0.25s var(--ease);
}
.whatsapp-float:hover {
  transform: scale(1.08);
  color: #fff;
}
.back-to-top {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--btn-gradient);
  color: #fff;
  border: 0;
  position: fixed;
  right: 24px;
  bottom: 96px;
  z-index: 998;
  display: grid;
  place-items: center;
  font-size: 1rem;
  box-shadow: var(--shadow-primary);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 0.3s var(--ease);
}
.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* ---- Section-label inside dark sections (testimonials) needs lighter tint ---- */
.testimonials-section .section-label {
  background: rgba(255, 255, 255, 0.08);
  color: var(--ink);
}
.testimonials-section .section-title {
  color: var(--ink);
}
.testimonials-section .section-subtitle {
  color: rgba(255, 255, 255, 0.7);
}

/* ---- Counter strip: ensure visible even without scroll (counters init via JS) ---- */
.counter-strip .counter-num {
  min-height: 1.2em;
  display: inline-block;
}
/* Faux number to seed before JS animates */
.counter-strip .counter-num::before {
  content: attr(data-count) attr(data-suffix);
}
.counter-strip .counter-num:not(:empty)::before {
  content: "";
}

/* ---- Mobile breakpoint cleanups ---- */
@media (max-width: 991px) {
  .hero-floating-card {
    display: none;
  }
}
@media (max-width: 575px) {
  .whatsapp-float {
    width: 52px;
    height: 52px;
    font-size: 1.4rem;
    right: 16px;
    bottom: 16px;
  }
  .back-to-top {
    width: 44px;
    height: 44px;
    right: 16px;
    bottom: 80px;
  }
  .pds-topbar {
    display: none;
  } /* declutter mobile */
}
@media (min-width:992px){
  .pds-navbar .nav-item.dropdown{ position:relative; }
  .pds-navbar .nav-item.dropdown:hover > .dropdown-menu{
    display:block;
    opacity:1;
    visibility:visible;
    margin-top:0;
  }
  .pds-navbar .nav-item.dropdown::after{
    content:"";
    position:absolute;
    top:100%;
    left:0;
    width:100%;
    height:18px;
    background:transparent;
  }
}

/* ---- Services dropdown: keep open on hover + bridge the gap ---- */
    @media (min-width:992px){
      .pds-navbar .nav-item.dropdown{ position:relative; }
      .pds-navbar .nav-item.dropdown:hover > .dropdown-menu{
        display:block; opacity:1; visibility:visible; margin-top:0;
      }
      .pds-navbar .nav-item.dropdown::after{
        content:""; position:absolute; top:100%; left:0; width:100%; height:18px; background:transparent;
      }
    }
    /* ---- Job detail ---- */
    .job-detail-card{
      background:#fff; border-radius:22px; padding:38px 40px;
      box-shadow:0 18px 44px -30px rgba(15,23,42,.3);
    }
    .job-meta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
    .job-meta span{
      display:inline-flex; align-items:center; gap:7px;
      padding:6px 14px; border-radius:999px; background:var(--light-bg,#f1f5f9);
      font-family:'Inter',sans-serif; font-weight:600; font-size:.82rem; color:#334155;
    }
    .job-meta .badge-walkin{ background:#dcfce7; color:#166534; }
    .job-intro{ color:#475569; font-family:'Inter',sans-serif; line-height:1.6; margin:0 0 22px; }
    .jd-heading{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; color:#0f172a; margin:30px 0 14px; }
    .jd-heading:first-of-type{ margin-top:8px; }
    .job-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
    .job-details-grid{
      display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px;
      background:var(--light-bg,#f8fafc); border-radius:16px; padding:20px 24px; margin-top:6px;
    }
    .job-details-grid div{ font-family:'Inter',sans-serif; font-size:.93rem; color:#475569; }
    .job-details-grid strong{ color:#0f172a; }
    @media (max-width:575.98px){ .job-details-grid{ grid-template-columns:1fr; } }
    /* listing card hover (career.html) */
    .job-card{ transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
    .job-card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -30px rgba(15,23,42,.42); }
    /* cover image at top of the detail card */
    .job-cover{ width:100%; height:600px; object-fit:cover; border-radius:16px; margin-bottom:26px; display:block; }
    @media (max-width:575.98px){ .job-cover{ height:200px; } }


 
  /* ===================================================================
     SHARED TOKENS
     =================================================================== */
  :root{
    --pds-accent:var(--primary);
    --pds-accent-soft:var(--primary-deep);
    --pds-zone-bg:#e9f6f9;
    --pds-zone-bg-hover:#dcf0f5;
    --pds-border:var(--primary);
    --pds-chip-border:var(--border);
    --pds-panel-bg:var(--light-bg);
    --pds-text:#1f2733;
    --pds-text-muted:#5b6470;
  }
 
  /* ===================================================================
     SKILL PICKER STYLES
     =================================================================== */
  .pds-skills{ width:100%; }
  .pds-skills__box{
    display:flex;flex-wrap:wrap;align-items:center;gap:8px;
    min-height:66px;background:#fff;
    border:2px solid var(--pds-chip-border);border-radius:12px;
    padding:12px 14px;cursor:text;
    transition:border-color .18s ease, box-shadow .18s ease;
  }
  .pds-skills__box.is-focused{ border-color:var(--pds-accent);box-shadow:0 0 0 4px rgba(0,172,204,.15); }
  .pds-chip{
    display:inline-flex;align-items:center;gap:7px;background:#fff;
    border:1px solid var(--pds-chip-border);color:var(--pds-text);
    border-radius:999px;padding:6px 12px;font-size:.9rem;line-height:1;
    box-shadow:0 1px 2px rgba(0,0,0,.04);
  }
  .pds-chip__x{ border:none;background:transparent;color:var(--pds-text-muted);
    cursor:pointer;font-size:1rem;line-height:1;padding:0;transition:color .15s ease; }
  .pds-chip__x:hover{ color:#d6336c; }
  .pds-skills__input{
    flex:1 1 120px;min-width:120px;border:none;outline:none;
    font-size:.95rem;color:var(--pds-text);padding:6px 2px;background:transparent;
  }
  .pds-skills__panel{ margin-top:14px;background:#e9f6f9;border-radius:12px;padding:18px; }
  .pds-skills__panel-title{ color:var(--pds-accent);font-weight:700;font-size:.95rem;margin:0 0 14px; }
  .pds-skills__suggestions{ display:flex;flex-wrap:wrap;gap:10px; }
  .pds-suggest{
    border:1px solid var(--pds-chip-border);background:#fff;color:var(--pds-text);
    border-radius:999px;padding:8px 16px;font-size:.88rem;line-height:1;cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
  }
  .pds-suggest:hover{ background:var(--pds-accent);border-color:var(--pds-accent);color:#fff;transform:translateY(-1px); }
  .pds-suggest.is-added{ background:transparent;color:#c2c8d2;border-color:#e3e7ef;cursor:default;pointer-events:none; }
 
  /* ===================================================================
     RESUME DROP ZONE STYLES
     =================================================================== */
  .pds-dropzone{
    position:relative;background:#e9f6f9;
    border:3px dashed var(--pds-border);border-radius:16px;
    padding:8px 8px 8px;text-align:center;cursor:pointer;
    transition:background .2s ease,border-color .2s ease,transform .15s ease,box-shadow .2s ease;
  }
  .pds-dropzone:hover{ background:var(--pds-zone-bg-hover); }
  .pds-dropzone.is-dragover{ background:var(--pds-zone-bg-hover);border-color:var(--pds-accent-soft);
    transform:scale(1.005);box-shadow:0 12px 30px -12px rgba(0,172,204,.45); }
  .pds-dropzone__icon{ font-size:2.4rem;line-height:1;margin-bottom:12px;display:block;
    filter:drop-shadow(0 4px 6px rgba(0,0,0,.12)); }
  .pds-dropzone__headline{ color:var(--pds-accent-soft);font-size:1.2rem;font-weight:700;margin:0 0 8px; }
  .pds-dropzone__hint{ color:var(--pds-text-muted);font-size:.85rem;margin:0 0 18px; }
  .pds-browse-btn{
    appearance:none;border:none;background:var(--pds-accent-soft);color:#fff;
    font-size:.95rem;font-weight:600;padding:11px 28px;border-radius:10px;cursor:pointer;
    transition:background .2s ease,transform .12s ease;box-shadow:0 6px 16px -6px rgba(0,172,204,.6);
  }
  .pds-browse-btn:hover{ background:var(--pds-accent);transform:translateY(-1px); }
  .pds-browse-btn:active{ transform:translateY(0); }
  .pds-native-input{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }
  .pds-filelist{ text-align:center;margin:12px 0 0;font-size:.9rem;min-height:1.3em; }
  .pds-filelist__empty{ color:var(--pds-text-muted); }
  .pds-file{ display:inline-flex;align-items:center;gap:12px;background:#eef6f9;color:#1f2733;
    border:1px solid #dcebef;border-radius:10px;padding:9px 13px;margin:4px auto 0;max-width:100%; }
  .pds-file__icon{ font-size:1.15rem; }
  .pds-file__meta{ text-align:left;line-height:1.25;overflow:hidden; }
  .pds-file__name{ font-weight:600;max-width:320px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
  .pds-file__size{ font-size:.75rem;color:var(--pds-text-muted); }
  .pds-file__remove{ border:none;background:#ffe3e3;color:#d6336c;width:24px;height:24px;border-radius:50%;
    cursor:pointer;font-size:1rem;line-height:1;flex:0 0 auto;transition:background .15s ease; }
  .pds-file__remove:hover{ background:#ffc9c9; }
  .pds-error{ color:#b4232b;background:#ffeaea;display:inline-block;padding:6px 14px;
    border-radius:8px;margin-top:8px;font-size:.82rem; }

    /* ---- Services dropdown: keep open on hover + bridge the gap ---- */
    @media (min-width:992px){
      .pds-navbar .nav-item.dropdown{ position:relative; }
      .pds-navbar .nav-item.dropdown:hover > .dropdown-menu{
        display:block; opacity:1; visibility:visible; margin-top:0;
      }
      .pds-navbar .nav-item.dropdown::after{
        content:""; position:absolute; top:100%; left:0; width:100%; height:18px; background:transparent;
      }
    }
    /* ---- Job detail ---- */
    .job-detail-card{
      background:#fff; border-radius:22px; padding:38px 40px;
      box-shadow:0 18px 44px -30px rgba(15,23,42,.3);
    }
    .job-meta{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
    .job-meta span{
      display:inline-flex; align-items:center; gap:7px;
      padding:6px 14px; border-radius:999px; background:var(--light-bg,#f1f5f9);
      font-family:'Inter',sans-serif; font-weight:600; font-size:.82rem; color:#334155;
    }
    .job-meta .badge-walkin{ background:#dcfce7; color:#166534; }
    .job-intro{ color:#475569; font-family:'Inter',sans-serif; line-height:1.6; margin:0 0 22px; }
    .jd-heading{ font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; color:#0f172a; margin:30px 0 14px; }
    .jd-heading:first-of-type{ margin-top:8px; }
    .job-actions{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:6px; }
    .job-details-grid{
      display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px;
      background:var(--light-bg,#f8fafc); border-radius:16px; padding:20px 24px; margin-top:6px;
    }
    .job-details-grid div{ font-family:'Inter',sans-serif; font-size:.93rem; color:#475569; }
    .job-details-grid strong{ color:#0f172a; }
    @media (max-width:575.98px){ .job-details-grid{ grid-template-columns:1fr; } }
    /* listing card hover (career.html) */
    .job-card{ transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
    .job-card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -30px rgba(15,23,42,.42); }
    /* cover image at top of the detail card */
    .job-cover{ width:100%; height:600px; object-fit:cover; border-radius:16px; margin-bottom:26px; display:block; }
    @media (max-width:575.98px){ .job-cover{ height:200px; } }
    /* wide job-application modal */
    .modal-apply{ max-width:1140px !important; width:96%; }
    @media (min-width:576px){ .modal-apply{ margin:1.75rem auto; } }


    /* ---- Services dropdown: keep open on hover + bridge the gap ---- */
    @media (min-width:992px){
      .pds-navbar .nav-item.dropdown{ position:relative; }
      .pds-navbar .nav-item.dropdown:hover > .dropdown-menu{
        display:block; opacity:1; visibility:visible; margin-top:0;
      }
      .pds-navbar .nav-item.dropdown::after{
        content:""; position:absolute; top:100%; left:0; width:100%; height:18px; background:transparent;
      }
    }

    /* ---- Card design refresh: lift + glow on hover ---- */
    .service-card{ height:100%; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; will-change:transform; }
    .service-card:hover{ transform:translateY(-8px); box-shadow:0 28px 56px -30px rgba(15,23,42,.45); }
    .service-card .service-icon{ transition:transform .4s cubic-bezier(.2,.7,.2,1); }
    .service-card:hover .service-icon{ transform:translateY(-2px) scale(1.08) rotate(-4deg); }
    .service-card .service-link i{ transition:transform .3s ease; }
    .service-card:hover .service-link i{ transform:translateX(5px); }

    .feature-card{ height:100%; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
    .feature-card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -32px rgba(15,23,42,.4); }
    .feature-card .fi{ transition:transform .4s ease; }
    .feature-card:hover .fi{ transform:scale(1.1); }

    .service-hero-img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
    .service-hero-img:hover{ transform:translateY(-6px) scale(1.01); }

    /* ---- Specs band ---- */
    .stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .stat-item{
      text-align:center; padding:30px 18px; border-radius:18px; background:#fff;
      box-shadow:0 18px 44px -30px rgba(15,23,42,.3);
      transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
    }
    .stat-item:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -30px rgba(15,23,42,.4); }
    .stat-item .ico{ font-size:1.8rem; color:var(--primary); }
    .stat-item .num{ margin-top:10px; font-family:'Poppins',sans-serif; font-weight:700; font-size:1.25rem; line-height:1.2; color:#0f172a; }
    .stat-item .lbl{ margin-top:4px; color:#64748b; font-family:'Inter',sans-serif; font-weight:500; font-size:.9rem; }
    @media (max-width:767.98px){ .stats-band{ grid-template-columns:repeat(2,1fr); } }

    /* ---- Concept cards (What is a domain / hosting) ---- */
    .concept-card{
      height:100%; padding:38px; border-radius:22px; background:#fff;
      box-shadow:0 18px 44px -30px rgba(15,23,42,.3);
      transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
    }
    .concept-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(15,23,42,.45); }
    .concept-card .concept-ico{ font-size:2.2rem; color:var(--primary); margin-bottom:14px; }

    /* ---- Services dropdown: keep open on hover + bridge the gap ---- */
    @media (min-width:992px){
      .pds-navbar .nav-item.dropdown{ position:relative; }
      .pds-navbar .nav-item.dropdown:hover > .dropdown-menu{
        display:block; opacity:1; visibility:visible; margin-top:0;
      }
      .pds-navbar .nav-item.dropdown::after{
        content:""; position:absolute; top:100%; left:0; width:100%; height:18px; background:transparent;
      }
    }

    /* ---- Card design refresh: lift + glow on hover ---- */
    .service-card{ height:100%; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; will-change:transform; }
    .service-card:hover{ transform:translateY(-8px); box-shadow:0 28px 56px -30px rgba(15,23,42,.45); }
    .service-card .service-icon{ transition:transform .4s cubic-bezier(.2,.7,.2,1); }
    .service-card:hover .service-icon{ transform:translateY(-2px) scale(1.08) rotate(-4deg); }
    .service-card .service-link i{ transition:transform .3s ease; }
    .service-card:hover .service-link i{ transform:translateX(5px); }

    .feature-card{ height:100%; transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
    .feature-card:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -32px rgba(15,23,42,.4); }
    .feature-card .fi{ transition:transform .4s ease; }
    .feature-card:hover .fi{ transform:scale(1.1); }

    .service-hero-img{ transition:transform .6s cubic-bezier(.2,.7,.2,1); }
    .service-hero-img:hover{ transform:translateY(-6px) scale(1.01); }

    /* ---- Stats band ---- */
    .stats-band{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
    .stat-item{
      text-align:center; padding:30px 18px; border-radius:18px; background:#fff;
      box-shadow:0 18px 44px -30px rgba(15,23,42,.3);
      transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
    }
    .stat-item:hover{ transform:translateY(-6px); box-shadow:0 28px 56px -30px rgba(15,23,42,.4); }
    .stat-item .num{ font-family:'Poppins',sans-serif; font-weight:800; font-size:1.5rem; line-height:1; color:var(--primary); }
    .stat-item .lbl{ margin-top:10px; color:#64748b; font-family:'Inter',sans-serif; font-weight:600; font-size:.95rem; }
    @media (max-width:767.98px){ .stats-band{ grid-template-columns:repeat(2,1fr); } }

    /* ---- Platform cards (Android / iOS) ---- */
    .platform-card{
      height:100%; padding:36px; border-radius:22px; background:#fff;
      box-shadow:0 18px 44px -30px rgba(15,23,42,.3);
      transition:transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
    }
    .platform-card:hover{ transform:translateY(-8px); box-shadow:0 30px 60px -30px rgba(15,23,42,.45); }
    .platform-card .platform-ico{ font-size:2.4rem; margin-bottom:14px; }
    .platform-card .chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
    .platform-card .chips span{
      padding:6px 14px; border-radius:999px; background:var(--light-bg,#f1f5f9);
      font-family:'Inter',sans-serif; font-weight:600; font-size:.85rem; color:#334155;
    }


/* ============================================================
   PREMIUM REFINEMENT LAYER
   Resting elevation, disciplined accents, keyboard focus,
   richer dark sections. Added on top — structure untouched.
   ============================================================ */

/* Cards lift slightly even at rest -> "floating", premium feel */
.service-card,
.feature-card,
.process-step,
.testi-card,
.blog-card,
.job-card,
.portfolio-info {
  box-shadow: var(--shadow-sm);
}

/* Section eyebrow: crisper pill with a hairline + gold dot */
.section-label {
  border: 1px solid var(--primary-soft);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}

/* Accessible keyboard focus (premium products never skip this) */
:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}
.btn-pds:focus-visible {
  outline-offset: 4px;
}

/* Headings: tighter, more confident tracking on large display sizes */
.hero-title,
.section-title,
.page-banner h1 {
  letter-spacing: -0.025em;
}

/* A single thin gold rule under the dark counter strip for separation */
.counter-strip {
  border-top: none;
  position: relative;
}
.counter-strip::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--tri-gradient);
}
.counter-strip .counter-lbl {
  letter-spacing: 0.04em;
  font-weight: 500;
  opacity: 0.85;
}

/* Service icon tiles: subtle inner ring for depth */
.service-icon,
.process-step .step-icon {
  box-shadow: inset 0 0 0 1px var(--primary-soft);
}
.service-card:hover .service-icon,
.process-step:hover .step-icon {
  box-shadow: none;
}

/* Footer headings get a teal->gold underline accent */
.pds-footer h5::after {
  background: var(--accent-gradient);
}

/* Testimonial quote-mark: gold, softer */
.testi-card .quote-mark {
  color: var(--accent-tint);
}

/* Refined link-underline on primary text links */
.service-link,
.blog-meta {
  letter-spacing: 0.01em;
}

/* Slightly calmer hero ambient blobs */
.hero-blob {
  opacity: 0.38;
}


/* ============================================================
   TRI-COLOUR REDESIGN LAYER
   Cyan + Green + Coral, applied as an organised system across
   cards, counters, CTAs and signature accent lines.
   ============================================================ */

/* ---- Service icon tiles: bold gradient tiles, white glyphs,
        rotating through the three brand colours per card ---- */
.service-icon {
  background: var(--btn-gradient);
  color: #fff;
  box-shadow: none;
}
.service-icon img { filter: brightness(0) invert(1); }   /* force white glyph */
.row:has(.service-card) > [class*="col-"]:nth-child(3n + 2) .service-icon {
  background: var(--accent-gradient);
}
.row:has(.service-card) > [class*="col-"]:nth-child(3n + 3) .service-icon {
  background: var(--green-cyan-gradient);
}

/* ---- Service-card top reveal bar: full tri-colour sweep ---- */
.service-card::before { background: var(--tri-gradient); height: 5px; }

/* ---- Counter numbers: tri-colour gradient text ---- */
.counter-strip .counter-num {
  background: var(--tri-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ---- The main conversion CTA (navbar) pops CORAL ---- */
.navbar-cta .btn-primary-pds {
  background: var(--accent-gradient);
  box-shadow: 0 14px 32px rgba(255, 127, 80, 0.34);
}
.navbar-cta .btn-primary-pds::after {
  background: linear-gradient(100deg, #ff6333 0%, #ff9b78 100%);
}
.navbar-cta .btn-primary-pds:hover {
  box-shadow: 0 18px 40px rgba(255, 127, 80, 0.42);
}

/* ---- Signature tri-colour accent line under hero & page banners ---- */
.hero-wrap { position: relative; }
.hero-wrap::after,
.page-banner::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--tri-gradient);
  z-index: 6;
}

/* ---- Feature cards get a thin coloured top edge, rotating ---- */
.feature-card { border-top: 3px solid var(--primary); }
.row:has(.feature-card) > [class*="col-"]:nth-child(3n + 2) .feature-card {
  border-top-color: var(--secondary);
}
.row:has(.feature-card) > [class*="col-"]:nth-child(3n + 3) .feature-card {
  border-top-color: var(--accent);
}

/* ---- Process timeline: rotate the step-icon colours too ---- */
.row:has(.process-step) > [class*="col-"]:nth-child(3n + 2) .step-icon {
  background: var(--secondary-tint);
  color: var(--secondary);
}
.row:has(.process-step) > [class*="col-"]:nth-child(3n + 3) .step-icon {
  background: var(--accent-tint);
  color: var(--accent);
}
.process-step:hover .step-icon { color: #fff; }

/* ---- Portfolio filter active + service links keep cyan brand ---- */
.portfolio-filter button.active { background: var(--btn-gradient); }

/* ---- Section eyebrow dot already coral; give the pill a faint tri sheen ---- */
.section-label { border: 1px solid var(--border); }

/* ---- Testimonial stars: warm coral accent ---- */
.testi-stars { color: var(--accent); }

/* ---- Links / hovers resolve to cyan brand ---- */
a:hover { color: var(--primary); }


    /* Masonry-style grid: varied box sizes, title BELOW each box */
    .portfolio-grid{
      display:grid;
      grid-template-columns:repeat(12, 1fr);
      gap:52px 32px;
      grid-auto-flow:dense;
      margin-top:48px;
    }

    /* Each item is a clickable block: box + caption underneath */
    .portfolio-col{
      grid-column:span 4;                 /* default = 3 per row */
      display:block;
      text-decoration:none;
      cursor:pointer;
    }
    .portfolio-col.size-lg{   grid-column:span 7; }
    .portfolio-col.size-md{   grid-column:span 5; }
    .portfolio-col.size-half{ grid-column:span 6; }
    .portfolio-col.size-sm{   grid-column:span 4; }

    /* The rounded box that holds the image */
    .pf-box{
      position:relative;
      border-radius:22px;
      overflow:hidden;
      background:#eef1f6;
      aspect-ratio:16 / 10;
      box-shadow:0 18px 40px -24px rgba(15,23,42,.28);
      transition:transform .45s cubic-bezier(.2,.7,.2,1), box-shadow .45s ease;
    }
    .size-sm   .pf-box{ aspect-ratio:4 / 3; }
    .size-half .pf-box{ aspect-ratio:16 / 9; }

    .pf-box img{
      width:100%;
      height:100%;
      object-fit:cover;
      display:block;
      transition:transform .7s cubic-bezier(.2,.7,.2,1);
    }
    /* subtle hairline border so light images still read as a card */
    .pf-box::after{
      content:"";
      position:absolute; inset:0;
      border-radius:22px;
      box-shadow:inset 0 0 0 1px rgba(15,23,42,.06);
      pointer-events:none;
    }

    /* Hover: lift the box + zoom the image (Ramotion feel) */
    .portfolio-col:hover .pf-box{
      transform:translateY(-6px);
      box-shadow:0 30px 60px -28px rgba(15,23,42,.45);
    }
    .portfolio-col:hover .pf-box img{ transform:scale(1.06); }

    /* Caption below the box */
    .pf-caption{ padding:20px 4px 0; }
    .pf-caption h4{
      font-family:'Poppins', sans-serif;
      font-weight:700;
      font-size:1.6rem;
      line-height:1.2;
      color:#0f172a;
      margin:0;
      display:inline-flex;
      align-items:center;
      gap:10px;
      transition:gap .3s ease;
    }
    .pf-caption h4 .pf-arrow{
      font-size:1rem;
      opacity:0;
      transform:translateX(-6px);
      transition:opacity .3s ease, transform .3s ease;
    }
    .portfolio-col:hover .pf-caption h4{ gap:16px; }
    .portfolio-col:hover .pf-caption h4 .pf-arrow{ opacity:1; transform:translateX(0); }
    /* Description: hidden by default, expands in on hover */
    .pf-desc{
      max-height:0;
      opacity:0;
      overflow:hidden;
      margin-top:0;
      font-family:'Inter', sans-serif;
      font-size:1rem;
      line-height:1.55;
      color:#475569;
      transition:max-height .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease, margin-top .5s ease;
    }
    .portfolio-col:hover .pf-desc{
      max-height:160px;
      opacity:1;
      margin-top:10px;
    }

    /* ===== Responsive ===== */
    @media (max-width:991.98px){
      .portfolio-grid{ gap:44px 24px; }
      .portfolio-col,
      .portfolio-col.size-sm,
      .portfolio-col.size-half{ grid-column:span 6; }
      .portfolio-col.size-lg,
      .portfolio-col.size-md{ grid-column:span 12; }
      .pf-caption h4{ font-size:1.4rem; }
    }
    @media (max-width:575.98px){
      .portfolio-grid{ gap:36px 16px; }
      .portfolio-col,
      .portfolio-col.size-sm,
      .portfolio-col.size-md,
      .portfolio-col.size-half,
      .portfolio-col.size-lg{ grid-column:span 12; }
      .pf-box,
      .size-sm .pf-box,
      .size-half .pf-box{ aspect-ratio:16 / 10; }
      .pf-caption h4{ font-size:1.35rem; }
    }


    /* Smooth, GPU-friendly transitions on every card */
    .portfolio-grid .portfolio-col,
    .portfolio-grid .pf-box,
    .portfolio-grid .pf-box img,
    .portfolio-grid .pf-caption h4,
    .portfolio-grid .pf-arrow,
    .portfolio-grid .pf-desc {
      transition: transform .55s cubic-bezier(.22,.61,.36,1),
                  box-shadow .55s cubic-bezier(.22,.61,.36,1),
                  color .35s ease, opacity .45s ease;
      will-change: transform;
    }

    /* Image frame: clip overflow so the zoom stays inside rounded corners */
    .portfolio-grid .pf-box {
      overflow: hidden;
      border-radius: 16px;
      position: relative;
    }

    /* Soft gradient sheen that sweeps across on hover */
    .portfolio-grid .pf-box::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
      transform: translateX(-120%);
      transition: transform .9s ease;
      pointer-events: none;
      z-index: 2;
    }

    /* Lift the frame and deepen the shadow on hover.
       The lift lives on .pf-box (not the card) so it never fights the
       scroll-reveal transform that the card itself runs. */
    .portfolio-grid .portfolio-col:hover .pf-box {
      transform: translateY(-10px);
      box-shadow: 0 22px 45px -18px rgba(15, 23, 42, .45);
    }

    /* Zoom the image */
    .portfolio-grid .portfolio-col:hover .pf-box img {
      transform: scale(1.08);
    }

    /* Trigger the sweep */
    .portfolio-grid .portfolio-col:hover .pf-box::after {
      transform: translateX(120%);
    }

    /* Animate the caption arrow */
    .portfolio-grid .pf-arrow {
      display: inline-block;
      opacity: 0;
      transform: translateX(-8px);
      margin-left: 6px;
    }
    .portfolio-grid .portfolio-col:hover .pf-arrow {
      opacity: 1;
      transform: translateX(4px);
    }

    /* ===== Scroll-driven animation =====
       Cards fade up and scale in as they scroll into view, and the image crop
       drifts gently while the card crosses the viewport. This uses native CSS
       scroll timelines where supported; older browsers fall back cleanly to the
       AOS scroll reveals already on each card. */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {

        /* Each card reveals in step with its scroll position */
        .portfolio-grid .portfolio-col {
          opacity: 0;
          animation: pf-reveal linear both;
          animation-timeline: view();
          animation-range: entry 0% entry 55%;
        }
        /* Light stagger so neighbouring cards don't snap in together */
        .portfolio-grid .portfolio-col:nth-child(even) {
          animation-range: entry 8% entry 63%;
        }

        /* Let the scroll timeline own the reveal — silence AOS's easing here */
        .portfolio-grid .portfolio-col[data-aos] { transition: none !important; }

        /* Parallax: the image crop drifts as the card travels up the screen */
        .portfolio-grid .pf-box img {
          animation: pf-parallax linear both;
          animation-timeline: view();
          animation-range: cover 0% cover 100%;
        }
      }
    }

    @keyframes pf-reveal {
      from { opacity: 0; transform: translateY(48px) scale(.95); }
      to   { opacity: 1; transform: translateY(0)    scale(1);   }
    }

    @keyframes pf-parallax {
      from { object-position: 50% 35%; }
      to   { object-position: 50% 65%; }
    }

    /* Respect users who prefer no motion */
    @media (prefers-reduced-motion: reduce) {
      .portfolio-grid .portfolio-col,
      .portfolio-grid .pf-box img,
      .portfolio-grid .pf-box::after { transition: none; animation: none; }
    }


    .pds-work{
      --acc:#0e8388;          /* peacock teal */
      --acc-2:#1b9aaa;
      --ink:#0f172a;
      --muted:#64748b;
      --line:#e6ebf1;
      --card:#ffffff;
    }
    .pds-work .work-head{ text-align:center; max-width:760px; margin:0 auto 34px; }
    .pds-work .work-head h2{
      font-family:'Poppins',sans-serif; font-weight:700; color:var(--ink);
      font-size:clamp(1.6rem,1.1rem + 1.8vw,2.4rem); line-height:1.2; margin:0 0 12px;
    }
    .pds-work .work-head p{ color:var(--muted); font-family:'Inter',sans-serif; font-size:1.02rem; margin:0; }

    /* ===== Filter bar ===== */
    .pf2-filter{
      display:flex; flex-wrap:wrap; justify-content:center; gap:10px;
      margin:0 0 40px; padding:0;
    }
    .pf2-filter button{
      font-family:'Poppins',sans-serif; font-weight:500; font-size:.9rem;
      color:#334155; background:#fff; border:1px solid var(--line);
      padding:9px 18px; border-radius:999px; cursor:pointer;
      transition:color .25s ease, background-color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
      white-space:nowrap;
    }
    .pf2-filter button:hover{ color:var(--acc); border-color:var(--acc); transform:translateY(-2px); }
    .pf2-filter button.active{
      color:#fff; border-color:transparent;
      background:linear-gradient(120deg,var(--acc),var(--acc-2));
      box-shadow:0 10px 22px -10px rgba(14,131,136,.7);
    }

    /* ===== Grid ===== */
    .pf2-grid{
      display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
    }
    @media (max-width:991px){ .pf2-grid{ grid-template-columns:repeat(2,1fr); gap:22px; } }
    @media (max-width:575px){ .pf2-grid{ grid-template-columns:1fr; gap:20px; } }

    /* ===== Card ===== */
    .pf2-card{
      display:block; text-decoration:none; background:var(--card);
      border:1px solid var(--line); border-radius:16px; overflow:hidden;
      box-shadow:0 6px 18px -12px rgba(15,23,42,.25);
      transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s cubic-bezier(.22,.61,.36,1), border-color .45s ease;
    }
    .pf2-card:hover{
      transform:translateY(-8px);
      box-shadow:0 26px 46px -22px rgba(15,23,42,.5);
      border-color:rgba(14,131,136,.35);
    }

    .pf2-thumb{
      position:relative; overflow:hidden; aspect-ratio:16/11; background:#f1f5f9;
    }
    .pf2-thumb img{
      width:100%; height:100%; object-fit:cover; object-position:top center; display:block;
      transition:transform .7s cubic-bezier(.22,.61,.36,1);
    }
    .pf2-card:hover .pf2-thumb img{ transform:scale(1.07); }

    /* Hover overlay with "Visit Website" */
    .pf2-thumb::after{
      content:""; position:absolute; inset:0;
      background:linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(14,131,136,.55) 100%);
      opacity:0; transition:opacity .4s ease;
    }
    .pf2-card:hover .pf2-thumb::after{ opacity:1; }
    .pf2-visit{
      position:absolute; left:50%; bottom:16px; transform:translate(-50%,12px);
      z-index:2; display:inline-flex; align-items:center; gap:8px;
      font-family:'Poppins',sans-serif; font-weight:600; font-size:.82rem; color:#fff;
      background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.5);
      backdrop-filter:blur(4px); padding:8px 16px; border-radius:999px;
      opacity:0; transition:opacity .4s ease, transform .4s ease;
    }
    .pf2-card:hover .pf2-visit{ opacity:1; transform:translate(-50%,0); }

    .pf2-body{ padding:18px 20px 22px; }
    .pf2-cat{
      display:inline-block; font-family:'Inter',sans-serif; font-weight:600; font-size:.72rem;
      letter-spacing:.06em; text-transform:uppercase; color:var(--acc);
      background:rgba(14,131,136,.09); padding:4px 10px; border-radius:6px; margin-bottom:10px;
    }
    .pf2-title{
      font-family:'Poppins',sans-serif; font-weight:600; font-size:1.02rem; line-height:1.35;
      color:var(--ink); margin:0;
    }

    /* ===== Filtering ===== */
    .pf2-card.is-hidden{ display:none !important; }
    .pf2-card.just-shown{ animation:pf2-pop .5s cubic-bezier(.22,.61,.36,1) both; }
    @keyframes pf2-pop{
      from{ opacity:0; transform:translateY(16px) scale(.97); }
      to  { opacity:1; transform:translateY(0)    scale(1);   }
    }
    .pf2-empty{
      display:none; text-align:center; color:var(--muted);
      font-family:'Inter',sans-serif; padding:40px 0;
    }

    /* ===== Scroll-driven reveal (modern browsers; AOS is the fallback) ===== */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        .pf2-grid .pf2-card:not(.is-hidden):not(.just-shown){
          opacity:0;
          animation:pf2-reveal linear both;
          animation-timeline:view();
          animation-range:entry 0% entry 48%;
        }
        /* light stagger so rows don't snap in all at once */
        .pf2-grid .pf2-card:nth-child(3n+2){ animation-range:entry 6% entry 54%; }
        .pf2-grid .pf2-card:nth-child(3n+3){ animation-range:entry 12% entry 60%; }
        /* let the scroll timeline own the reveal */
        .pf2-grid .pf2-card[data-aos]{ transition:none !important; }
      }
    }
    @keyframes pf2-reveal{
      from{ opacity:0; transform:translateY(46px) scale(.95); }
      to  { opacity:1; transform:translateY(0)    scale(1);   }
    }

    @media (prefers-reduced-motion: reduce){
      .pf2-card, .pf2-thumb img, .pf2-thumb::after, .pf2-visit{ transition:none; animation:none; }
    }