/* ============================================
   UNILOGIK SYSTEMS - Design System & Styles
   Phase 3: Premium Polish & Enhancements
   ============================================ */

/* --- CSS Custom Properties --- */
:root {
  --color-primary: #099EDA;
  --color-primary-dark: #0780B5;
  --color-secondary: #24678D;
  --color-accent: #099EDA;
  --color-bg: #FFFFFF;
  --color-bg-light: #F7F8FC;
  --color-bg-dark: #0A1628;
  --color-text: #333333;
  --color-text-light: #666666;
  --color-text-white: #FFFFFF;
  --color-border: #E0E0E0;
  --color-bg-accent: #E8F4FD;
  --font-heading: 'Plus Jakarta Sans', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --shadow-card: 0 4px 24px rgba(0,0,0,0.08);
  --shadow-hover: 0 8px 32px rgba(0,0,0,0.12);
  --shadow-elevated: 0 12px 40px rgba(0,0,0,0.16);
  --transition: 0.15s ease;
  --section-padding: 100px 0;
  --container-width: 1200px;
}

/* --- Skip Link (Accessibility) --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 16px;
  z-index: 10000;
  padding: 12px 24px;
  background: var(--color-primary);
  color: #fff;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s;
}
.skip-link:focus {
  top: 16px;
}

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; font-size: 16px; }

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
  width: 100%;
}

/* --- Typography --- */
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); font-weight: 700; line-height: 1.2; color: #333; }
h1 { font-size: 48px; line-height: 1.17; letter-spacing: -0.02em; }
h2 { font-size: 36px; line-height: 1.22; font-weight: 700; color: #333; }
h3 { font-size: 24px; line-height: 1.33; font-weight: 600; color: #333; }
/* Keep headings on dark backgrounds white */
.stats h2, .stats .section-title,
.stats--has-bg h2, .stats--has-bg .section-title,
.hero h2, .hero h3 { color: #fff; }
h4 { font-size: 20px; line-height: 1.4; font-weight: 600; }
p { margin-bottom: 16px; }
.text-light { color: var(--color-text-light); }
.text-white { color: var(--color-text-white); }
.text-center { text-align: center; }
.text-small { font-size: 14px; line-height: 1.57; }

/* --- Section Utilities --- */
.section-label {
  display: inline-block;
  color: var(--color-primary);
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}
.section-title {
  font-family: var(--font-heading);
  font-size: 36px;
  font-weight: 700;
  color: #333;
  line-height: 1.22;
  margin-bottom: 48px;
}

/* --- Buttons --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: var(--radius-sm);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--transition);
  border: 1px solid transparent;
  text-align: center;
  white-space: nowrap;
}
.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}
.btn--primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(9, 158, 218, 0.3);
}
.btn--secondary {
  background: transparent;
  color: var(--color-text-white);
  border-color: var(--color-text-white);
}
.btn--secondary:hover {
  background: var(--color-text-white);
  color: var(--color-secondary);
  transform: translateY(-2px);
}
.btn--outline {
  background: transparent;
  color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.btn--outline:hover {
  background: var(--color-secondary);
  color: var(--color-text-white);
  transform: translateY(-2px);
}
.btn--white { background: #fff; color: var(--color-primary); border-color: #fff; }
.btn--white:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.btn--lg { padding: 18px 40px; font-size: 18px; }

/* --- Navigation --- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(12px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: all var(--transition);
}
.navbar.scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.1);
}
.navbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.navbar__logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.navbar__logo-icon { display: none; }
.navbar__logo-img {
  width: 153px;
  height: auto;
}
.navbar__logo-text { display: none; }
.navbar__nav {
  display: flex;
  align-items: center;
}
.navbar__links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.navbar__link {
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  transition: color var(--transition);
  position: relative;
}
.navbar__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition);
}
.navbar__link:hover::after,
.navbar__link--active::after {
  width: 100%;
}
.navbar__link:hover,
.navbar__link--active {
  color: #099EDA;
}
.navbar__cta {
  margin-left: 24px;
  padding: 10px 24px !important;
  font-size: 14px !important;
  flex-shrink: 0;
}
.navbar__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.navbar__hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: #333333;
  border-radius: 2px;
  transition: all var(--transition);
}
.navbar__hamburger.active .navbar__hamburger-line:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.navbar__hamburger.active .navbar__hamburger-line:nth-child(2) { opacity: 0; }
.navbar__hamburger.active .navbar__hamburger-line:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Hero Section --- */
.hero {
  position: relative;
  background: var(--color-bg-dark);
  padding: 160px 0 120px;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}
.hero::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(9,158,218,0.08) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(36,103,141,0.06) 0%, transparent 50%),
    radial-gradient(circle at 60% 80%, rgba(10,22,40,0.5) 0%, transparent 50%);
  z-index: 1;
}
.hero .container { position: relative; z-index: 2; }
.hero__pattern {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  z-index: 0;
  opacity: 0.15;
  background:
    linear-gradient(135deg, transparent 25%, rgba(9,158,218,0.1) 25%, rgba(9,158,218,0.1) 50%, transparent 50%),
    linear-gradient(45deg, transparent 25%, rgba(36,103,141,0.08) 25%, rgba(36,103,141,0.08) 50%, transparent 50%);
  background-size: 60px 60px;
}
.hero__inner {
  max-width: 1200px;
}
.hero__title {
  color: var(--color-text-white) !important;
  font-size: 56px;
  line-height: 1.12;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}
.hero__title-sub {
  display: block;
  font-size: 32px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.hero__subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 600px;
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero__actions .btn {
  font-size: 16px;
  padding: 13px 35px;
}
.hero__link {
  color: rgba(255,255,255,0.7);
  font-weight: 600;
  transition: color var(--transition);
}
.hero__link:hover { color: var(--color-text-white); }

/* --- Hero Inner (sub-pages) --- */
.hero--inner {
  padding: 140px 0 80px;
  min-height: auto;
}
.hero--inner .hero__title { font-size: 48px; }

/* --- Trust Bar --- */
.trust-bar {
  padding: 98px 0;
  background: #F7F8FC;
}
.trust-bar .container { text-align: center; }
.trust-bar__text {
  color: var(--color-text-light);
  font-size: 14px;
  margin-bottom: 24px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.trust-bar__logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: stretch;
  justify-items: stretch;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.trust-bar__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 96px;
  padding: 12px 28px;
  background: white;
  border-radius: var(--radius-sm);
  border: none;
  font-family: var(--font-heading);
  text-decoration: none;
  color: inherit;
  transition: all var(--transition);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text-light);
  transition: all var(--transition);
  text-align: center;
}
.trust-bar__logo:hover {
  color: var(--color-primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.trust-bar__logo--redhat {
  color: var(--color-text-light);
  border-color: var(--color-border);
  background: white;
}
.trust-bar__logo-svg {
  height: 47px;
  width: auto;
}
.trust-bar__logo-img {
  height: 47px;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
/* Wordmark logos that include both icon + text need a bit more height */
/* Red Hat & Dynatrace logos have padded viewBoxes (icon + wordmark composition with whitespace);
   bump their height so the visible content matches the size of Fortinet/Microsoft/AWS. */
.trust-bar__logo img[src*="redhat-logo-2024"],
.trust-bar__logo img[src*="dynatrace-logo-2024"] { height: 69px; }
/* Oracle wordmark is text-only and tight - keep it shorter to feel balanced. */
.trust-bar__logo img[src*="oracle-wordmark"] { height: 36px; }
/* AWS logo reduced by 20% to balance optical weight. */
.trust-bar__logo img[src*="aws-logo"] { height: 34px; }
/* On mobile, scale Oracle, Fortinet and Microsoft down so they don't
   read as visually heavier than the other logos at small sizes. */
@media (max-width: 768px) {
  .trust-bar__logo img[src*="oracle-wordmark"] { height: 18px; }
  .trust-bar__logo img[src*="fortinet-logo"]   { height: 24px; }
  .trust-bar__logo img[src*="microsoft-logo"]  { height: 24px; }
}

/* --- Services Section --- */
.services {
  padding: var(--section-padding);
}
.services__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.service-card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
  border: none;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
}
.service-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.service-card__icon {
  display: none;
}
.service-card__title {
  margin-bottom: 12px;
}
.service-card__desc {
  color: var(--color-text-light);
  margin-bottom: 16px;
}
.service-card__link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: gap var(--transition);
  margin-top: auto;
}
.service-card:hover .service-card__link { gap: 10px; }

/* --- Service Card Images --- */
.service-card__img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  border-radius: 12px 12px 0 0;
}
.service-card.has-img {
  padding: 0;
  overflow: hidden;
}
.service-card.has-img .service-card__img {
  margin: 0 0 24px 0;
  width: 100%;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
}
.service-card.has-img .service-card__icon,
.service-card.has-img .service-card__title,
.service-card.has-img .service-card__desc,
.service-card.has-img .service-card__link,
.service-card.has-img .card-icon,
.service-card.has-img h3,
.service-card.has-img p,
.service-card.has-img ul {
  padding-left: 32px;
  padding-right: 32px;
}
.service-card.has-img .service-card__link,
.service-card.has-img ul:last-child {
  padding-bottom: 32px;
}

/* --- Service card feature list (green checkmarks) ---
   Used when a service-card has bullet list items, e.g. on services.html */
.service-card__list {
  list-style: none;
  padding-left: 32px;
  padding-right: 32px;
  margin: 0 0 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.service-card__list li {
  position: relative;
  padding-left: 26px;
  font-size: 14px; /* 1px smaller than 15px list size, 2px smaller than 16px body */
  line-height: 1.55;
  color: var(--color-text-light); /* match the .service-card__desc paragraph above */
}
.service-card__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 4px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2322a06b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
}

/* --- Why Section --- */
.why {
  padding: var(--section-padding);
  background-color: #F7F8FC;
  position: relative;
  overflow: hidden;
}
.why::before {
  content: '';
  position: absolute;
  left: 50px;
  bottom: 50px;
  width: 80%;
  height: 80%;
  background-image: url('../images/unilogik-why-bg.png');
  background-repeat: no-repeat;
  background-position: bottom left;
  background-size: contain;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.why > .container {
  position: relative;
  z-index: 1;
}
.why__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.why__content .section-title {
  margin-bottom: 16px;
}
.why__desc {
  color: var(--color-text-light);
  font-size: 16px;
  margin-bottom: 0;
}
.why__benefits {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
.why__benefit {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: white;
  padding: 24px;
  border-radius: var(--radius-md);
  box-shadow: none;
  transition: none;
  cursor: default;
}
.why__benefit:hover {
  transform: none;
  box-shadow: none;
}
.why__benefit-icon {
  width: 56px;
  height: 56px;
  min-width: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: none;
  flex-shrink: 0;
}
.why__benefit-icon svg {
  width: 32px;
  height: 32px;
  color: var(--color-primary);
}
.why__benefit-title {
  margin-bottom: 4px;
  font-size: 18px;
}
.why__benefit-desc {
  color: var(--color-text-light);
  font-size: 15px;
  margin-bottom: 0;
}
.why__benefit-subtitle {
  color: var(--color-text-light);
  font-size: 13px;
  margin-top: 4px;
  margin-bottom: 0;
  line-height: 1.5;
}

/* --- Stats Bar --- */
.stats {
  padding: 130px 0;
  background: linear-gradient(135deg, var(--color-bg-dark), #0d2137);
  position: relative;
  overflow: hidden;
  text-align: center;
}
.stats .section-label,
.stats .section-title {
  text-align: center;
  display: block;
}
.stats::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 50%, rgba(9,158,218,0.08) 0%, transparent 70%);
}
.stats__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  position: relative;
}
.stats__item { text-align: center; }
.stats__number {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 800;
  color: var(--color-text-white);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  display: block;
}
.stats__label {
  color: rgba(255,255,255,0.6);
  font-size: 16px;
  display: block;
}

/* --- Testimonials (FRESCo 3-column card style) --- */
.testimonials {
  padding: 100px 0;
  background: #F7F8FC;
  text-align: center;
}
.testimonials .section-label,
.testimonials .section-title {
  text-align: center;
  display: block;
}
.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 32px;
}
.testimonials__grid--centered {
  max-width: 800px;
  margin: 0 auto;
  grid-template-columns: repeat(2, 1fr);
}

/* --- Testimonials Carousel (2 per row, draggable, dots) --- */
.testimonials__carousel {
  position: relative;
  text-align: left;
}
.testimonials__track {
  display: flex;
  gap: 32px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  padding-bottom: 8px;
}
.testimonials__track::-webkit-scrollbar { display: none; }
.testimonials__track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.testimonials__track.is-dragging .testimonial-card { user-select: none; pointer-events: none; }
.testimonials__track .testimonial-card {
  flex: 0 0 calc((100% - 32px) / 2); /* 2 per row, accounting for 32px gap */
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.testimonials__dots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 32px;
}
.testimonials__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #CBD0DC;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition), width var(--transition);
}
.testimonials__dot:hover { background: var(--color-primary); }
.testimonials__dot.is-active {
  background: var(--color-primary);
  width: 28px;
  border-radius: 6px;
}

.testimonial-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 40px 32px 32px;
  box-shadow: none;
  border: none;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: none;
}
.testimonial-card:hover {
  transform: none;
  box-shadow: none;
}
.testimonial-card__quote-mark {
  position: absolute;
  top: 24px;
  right: 28px;
  font-family: Georgia, serif;
  font-size: 64px;
  line-height: 1;
  color: #E0E0E0;
  opacity: 0.5;
  pointer-events: none;
}
.testimonial-card__text {
  font-size: 16px;
  line-height: 1.7;
  color: var(--color-text);
  font-style: italic;
  margin-bottom: 24px;
  flex-grow: 1;
}
.testimonial-card__divider {
  width: 60px;
  height: 1px;
  background: #E0E0E0;
  margin-bottom: 20px;
}
.testimonial-card__author {
  display: flex;
  align-items: center;
  gap: 14px;
}
.testimonial-card__avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  flex-shrink: 0;
}
.testimonial-card__author-info {
  display: flex;
  flex-direction: column;
}
.testimonial-card__author-info strong {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.3;
}
.testimonial-card__author-info span {
  color: var(--color-text-light);
  font-size: 13px;
  line-height: 1.4;
}

/* --- CIO Section --- */
.cio {
  padding: 80px 0;
  background: #E8F4FD;
  position: relative;
}
.cio__inner {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
}
.cio__title {
  color: #333 !important;
  margin-bottom: 16px;
}
.cio__desc {
  color: #666;
  font-size: 18px;
  margin-bottom: 32px;
}
.cio--has-bg {
  background: #E8F4FD;
  background-image: none;
}
.cio--has-bg::before {
  display: none;
}
.cio--has-bg .cio__inner {
  position: relative;
  z-index: 1;
}

/* --- CTA Section --- */
.cta {
  padding: 100px 0;
  background: var(--color-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta--textured {
  background-image: url('../images/unilogik-cta-texture.jpg');
  background-image: -webkit-image-set(url('../images/unilogik-cta-texture.webp') type('image/webp'), url('../images/unilogik-cta-texture.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/unilogik-cta-texture.webp') type('image/webp'), url('../images/unilogik-cta-texture.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.cta--textured::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(9,158,218,0.92) 0%, rgba(7,128,181,0.88) 50%, rgba(10,22,40,0.85) 100%);
  z-index: 0;
}
.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, transparent 50%);
}
.cta__inner {
  position: relative;
  z-index: 1;
}
.cta__title {
  color: white !important;
  font-size: 40px;
  margin-bottom: 16px;
}
.cta__subtitle {
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  margin-bottom: 36px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
.cta__phone {
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  margin-top: 20px;
}
.cta__phone a {
  color: white;
  font-weight: 700;
}

/* --- Footer --- */
.footer {
  background: var(--color-bg-dark);
  padding: 60px 0 32px;
  color: rgba(255,255,255,0.6);
  position: relative;
}
.footer__separator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary), var(--color-secondary), var(--color-primary));
}
.footer__tagline-bar {
  text-align: center;
  padding-bottom: 40px;
  margin-bottom: 40px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__tagline-bar p {
  color: rgba(255,255,255,0.85);
  font-size: 18px;
  font-style: italic;
  margin-bottom: 0;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 2fr 1fr;
  gap: 48px;
  margin-bottom: 60px;
}
.footer__brand .navbar__logo { margin-bottom: 16px; }
.footer__tagline {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.5);
  max-width: 280px;
}
.footer__heading {
  color: white !important;
  font-size: 15px;
  margin-bottom: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.footer__links {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer__links a {
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  transition: color var(--transition);
}
.footer__links a:hover { color: #099EDA; }
.footer__logo-img {
  width: 170px;
  height: auto;
  margin-bottom: 16px;

}
.footer__contact {
  font-style: normal;
}
.footer__contact p {
  color: rgba(255,255,255,0.5);
  font-size: 15px;
  margin-bottom: 8px;
}
.footer__contact a {
  color: rgba(255,255,255,0.5);
  transition: color var(--transition);
}
.footer__contact a:hover { color: #099EDA; }
.footer__bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.footer__social {
  display: flex;
  gap: 16px;
}
.footer__social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.footer__social a:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}
.footer__social svg {
  width: 16px;
  height: 16px;
  color: rgba(255,255,255,0.6);
}
.footer__social a:hover svg {
  color: #fff;
}

/* Footer Newsletter */
.footer__newsletter { margin-top: 20px; }
.footer__newsletter-heading {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.footer__newsletter-form { display: flex; flex-direction: column; gap: 8px; max-width: 80%; }
.footer__newsletter-input-wrap {
  display: flex;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  transition: border-color var(--transition);
}
.footer__newsletter-input-wrap:focus-within {
  border-color: var(--color-primary);
}
.footer__newsletter-input-wrap input {
  flex: 1;
  padding: 10px 14px;
  background: rgba(255,255,255,0.06);
  border: none;
  color: #fff;
  font-size: 14px;
  font-family: var(--font-body);
  outline: none;
  min-width: 0;
}
.footer__newsletter-input-wrap input::placeholder {
  color: rgba(255,255,255,0.35);
}
.footer__newsletter-input-wrap button {
  padding: 10px 14px;
  background: var(--color-primary);
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.footer__newsletter-input-wrap button:hover {
  background: var(--color-primary-dark);
}
.footer__newsletter-msg {
  font-size: 13px;
  color: #4ade80;
  margin-top: 4px;
}
.footer__newsletter-hint {
  font-size: 14px;
  color: rgba(255,255,255,0.5);
  margin-top: 4px;
  margin-bottom: 0;
}

/* Footer Columns Row (Company + Services side-by-side) */
.footer__columns-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

/* Footer Legal Links */
.footer__legal {
  display: flex;
  gap: 20px;
}
.footer__legal a {
  color: rgba(255,255,255,0.4);
  font-size: 13px;
  transition: color var(--transition);
}
.footer__legal a:hover {
  color: var(--color-primary);
}

/* --- Footer: Desktop/Mobile Toggle --- */
.footer__mobile { display: none; }
.footer__desktop { display: block; }

/* --- Mobile Footer Styles --- */
.footer__mobile-logo { display: block; margin-bottom: 12px; }
.footer__mobile-logo .footer__logo-img { width: 150px; }
.footer__mobile-tagline {
  font-size: 13px;
  color: rgba(255,255,255,0.45);
  margin-bottom: 20px;
}
.footer__mobile-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-bottom: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.footer__mobile-links a {
  flex: 0 0 50%;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,0.7);
  transition: color 0.2s;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.footer__mobile-links a:nth-child(odd) { padding-right: 12px; }
.footer__mobile-links a:nth-child(even) { padding-left: 12px; }
.footer__mobile-links a:hover { color: var(--color-primary); }
.footer__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}
.footer__mobile-phone,
.footer__mobile-email {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}
.footer__mobile-phone svg,
.footer__mobile-email svg {
  flex-shrink: 0;
  color: var(--color-primary);
}
.footer__mobile-phone:hover,
.footer__mobile-email:hover { color: var(--color-primary); }
.footer__mobile-social {
  display: flex;
  gap: 12px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 0;
}
.footer__mobile-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.footer__mobile-social a:hover {
  background: var(--color-primary);
  transform: translateY(-2px);
}
.footer__mobile-social svg { color: rgba(255,255,255,0.6); }
.footer__mobile-social a:hover svg { color: white; }

/* --- Industries Section --- */
.industries-section { background: var(--color-bg); }
.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.industry-card {
  text-align: center;
  padding: 40px 24px;
  border-radius: var(--radius-md);
  border: none;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
  transition: box-shadow var(--transition);
}
.industry-card:hover {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.14);
}
.industry-card__icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 20px;
  background: #f8f9fa;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.industry-card__icon svg {
  width: 26px;
  height: 26px;
  color: var(--color-primary);
}
.industry-card h3 {
  font-family: var(--font-heading);
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}
.industry-card p {
  font-size: 16px;
  color: var(--color-text-light);
  line-height: 1.6;
}

/* --- Homepage Image Insertions (Apr 2026) --- */

/* Why Unilogik - feature image inside content column */
.why__feature-img {
  display: none;
  width: 100%;
  height: auto;
  margin-top: 32px;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  background: #fff;
}

/* Stats - atmospheric divider as background overlay */
.stats.stats--has-bg {
  background:
    linear-gradient(135deg, rgba(10,22,40,0.72), rgba(13,33,55,0.72)),
    url('../images/unilogik-stats-divider-dark.jpg') center/cover no-repeat,
    linear-gradient(135deg, var(--color-bg-dark), #0d2137);
}

/* Industries strip: 6 full-width squares, no gap, no radius, flush to next section */
.industries-section { padding-bottom: 0; }
.industries-section .section-header { max-width: 760px; }
.industries-section .section-header p { font-size: 16px; }
.industries-strip {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
}
.industries-strip > picture { display: block; width: 100%; aspect-ratio: 1 / 1; }
.industries-strip__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.industries-strip__placeholder {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, #e8ecf3, #d9deea);
  border-radius: 0;
  position: relative;
}
.industries-strip__placeholder::after {
  content: '';
  position: absolute;
  inset: 50% 50%;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 24 24' fill='none' stroke='%23a3aabf' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='3' width='18' height='18' rx='2'/><circle cx='8.5' cy='8.5' r='1.5'/><path d='M21 15l-5-5L5 21'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.6;
}
@media (max-width: 768px) {
  .industries-strip { grid-template-columns: repeat(3, 1fr); }
}

/* Industries - wide cluster image above the grid */
.industries-hero-img {
  display: none;
  width: 100%;
  max-width: 980px;
  height: auto;
  margin: 24px auto 16px;
  border-radius: var(--radius-lg);
  background: #fff;
}

/* CIO Vancouver - skyline background */
.cio--vancouver {
  background:
    linear-gradient(180deg, rgba(10,22,40,0.55) 0%, rgba(10,22,40,0.85) 100%),
    url('../images/unilogik-cio-vancouver-skyline-dark.jpg') center/cover no-repeat;
  position: relative;
  overflow: hidden;
}
.cio--vancouver .cio__title {
  color: #fff !important;
}
.cio--vancouver .cio__desc {
  color: rgba(255,255,255,0.85);
}

/* FAQ - two-column layout with side illustration */
.faq-section--with-aside .faq-layout {
  display: block;
  max-width: 800px;
  margin: 0 auto;
}
.faq-section--with-aside .faq-list {
  max-width: 800px;
  margin: 0 auto;
}
.faq-aside {
  display: none;
}
.faq-aside__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

@media (max-width: 1024px) {
  .faq-section--with-aside .faq-layout {
    grid-template-columns: 240px 1fr;
    gap: 40px;
  }
}
@media (max-width: 768px) {
  .faq-section--with-aside .faq-layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .faq-aside {
    position: static;
    max-width: 320px;
    margin: 0 auto;
  }
  .why__feature-img { margin-top: 24px; }
  .industries-hero-img { margin: 16px auto 8px; }
}

/* --- Partner Detail (partners.html) --- */
.partner-detail {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 64px;
  align-items: start;
}
.partner-detail--reverse {
  grid-template-columns: 1fr 280px;
}
.partner-detail--reverse .partner-detail__logo {
  order: 2;
}
.partner-detail--reverse .partner-detail__content {
  order: 1;
}
.partner-detail__logo {
  position: sticky;
  top: 110px;
  background: #fff;
  border: none; /* stroke removed — only the shadow defines the box */
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
.partner-detail__logo img {
  max-width: 100%;
  max-height: 80px;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
}
.partner-detail__content .section-label {
  display: inline-block;
  margin-bottom: 12px;
}
.partner-detail__content h2 {
  margin-bottom: 16px;
  color: #333;
  font-size: 36px;
  line-height: 1.22;
}
.partner-detail__content p {
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: 16px;
  max-width: 720px;
}
.partner-detail__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.partner-product {
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}
.partner-product:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
/* No base shadow on gray section bg; subtle shadow appears only on hover */
.section-light .partner-product { box-shadow: none; }
.section-light .partner-product:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.partner-product h3 {
  font-size: 17px;
  margin-bottom: 8px;
  color: #333;
}
.partner-product p {
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 0;
  line-height: 1.6;
}
.partner-services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}
.partner-service {
  background: #fff;
  border: none; /* stroke removed */
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
/* On gray section, drop the shadow (white card on gray bg has its own contrast) */
.section-light .partner-service { box-shadow: none; }
.partner-service h4 {
  font-size: 16px;
  margin-bottom: 12px;
  color: #333;
}
.partner-service ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.partner-service li {
  font-size: 14px;
  color: var(--color-text);
  padding: 6px 0 6px 20px;
  position: relative;
  line-height: 1.5;
}
.partner-service li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.partner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 24px 0;
}
.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--color-secondary);
  font-family: var(--font-heading);
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px 7px 12px;
  border-radius: 999px;
  border: 1px solid #cfe6f7;
}
.partner-badge::before {
  content: '';
  width: 14px;
  height: 14px;
  background-color: #9aa3b2; /* gray check, matches POV pills */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.partner-detail__actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 24px;
}
.partner-disclaimer {
  margin-top: 24px;
  color: var(--color-text-light);
  font-size: 12px;
  line-height: 1.5;
}

@media (max-width: 1024px) {
  .partner-detail,
  .partner-detail--reverse {
    grid-template-columns: 220px 1fr;
    gap: 40px;
  }
  .partner-detail--reverse {
    grid-template-columns: 1fr 220px;
  }
  .partner-detail__content h2 { font-size: 28px; }
  .partner-detail__products,
  .partner-services { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .partner-detail,
  .partner-detail--reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .partner-detail--reverse .partner-detail__logo,
  .partner-detail--reverse .partner-detail__content {
    order: initial;
  }
  /* Logo box: full container width, logo centered inside */
  .partner-detail__logo {
    position: static;
    min-height: 120px;
    padding: 28px 24px;
    max-width: none;
    width: 100%;
  }
  .partner-detail__logo img { max-height: 60px; }
  /* Oracle, Fortinet and Microsoft logos are visually heavier — scale ~40% smaller on mobile. */
  .partner-detail__logo img[src*="oracle-wordmark"],
  .partner-detail__logo img[src*="fortinet-logo"],
  .partner-detail__logo img[src*="microsoft-logo"] { max-height: 36px; }
  /* Dynatrace wordmark reads small at default — force it bigger on mobile.
     max-height alone won't ENLARGE an SVG, so we use an explicit height. */
  .partner-detail__logo img[src*="dynatrace-wordmark"] {
    height: 96px;
    max-height: 96px;
    width: auto;
  }
  .partner-detail__content h2 { font-size: 24px; }
  /* CTA buttons: stack vertically, full width, centered text */
  .partner-detail__actions { flex-direction: column; gap: 12px; }
  .partner-detail__actions .btn { width: 100%; text-align: center; justify-content: center; }
}

/* --- Partner detail page layout (partner-redhat.html etc.) --- */
.partner-page-section { padding: 56px 0 64px; }
.partner-page__top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--color-border);
}
.partner-page__logo-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  box-shadow: var(--shadow-card);
}
.partner-page__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1;
}
.partner-page__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
.partner-page__main { max-width: 760px; }
.partner-page__main p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--color-text);
  margin: 0 0 14px;
}
.partner-page__products {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin: 16px 0 24px;
}
.partner-page__product {
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 18px 20px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}
.partner-page__product:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.section-light .partner-page__product { box-shadow: none; }
.section-light .partner-page__product:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.partner-page__product h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  color: #333;
  margin: 0 0 6px;
}
.partner-page__product p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-light);
  margin: 0;
}
.partner-page__disclaimer {
  margin-top: 18px;
  color: var(--color-text-light);
  font-size: 12px;
  line-height: 1.55;
}
@media (max-width: 1024px) {
  .partner-page__grid { grid-template-columns: 1fr; gap: 32px; }
  .partner-page__products { grid-template-columns: 1fr; }
}

/* --- Service detail page layout (platform-engineering.html, etc.) --- */
.service-page-section { padding: 64px 0 56px; }
.service-page__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 56px;
  align-items: start;
}
.service-page__main { max-width: 720px; }
.service-page__h2 {
  font-family: var(--font-heading);
  font-size: 36px;
  line-height: 1.22;
  font-weight: 700;
  color: #333;
  margin: 8px 0 16px;
  letter-spacing: -0.01em;
}
.service-page__h3 {
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin: 28px 0 12px;
}
.service-page__main p {
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--color-text);
  margin: 0 0 14px;
}
.service-page__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.service-page__list li {
  font-size: 15px;
  color: var(--color-text);
  padding: 7px 0 7px 24px;
  position: relative;
  line-height: 1.55;
}
.service-page__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.service-page__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 32px;
}
.service-page__sidebar {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 28px 28px 24px;
  position: sticky;
  top: 110px;
}
.service-page__sidebar-h {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 16px;
}
.service-page__tech {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
}
.service-page__tech li {
  font-size: 14px;
  color: var(--color-text);
  padding: 6px 0 6px 18px;
  position: relative;
  line-height: 1.45;
  border-bottom: 1px solid var(--color-border);
}
.service-page__tech li:last-child { border-bottom: 0; }
.service-page__tech li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
.service-page__sidebar-cta {
  border-top: 1px solid var(--color-border);
  padding-top: 18px;
}
.service-page__sidebar-note {
  font-size: 13px;
  color: var(--color-text-light);
  margin: 0;
  line-height: 1.55;
}

/* Related services */
.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
}
.related-card {
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  /* Padding moved onto .related-card__body so the image can sit
     flush at the top edge inside the rounded card. */
  padding: 0;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}
.related-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.section-light .related-card { box-shadow: none; }
.section-light .related-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.related-card__img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  /* Tiny zoom on hover for the same lift feel the service-cards have. */
  transition: transform 0.4s ease;
}
.related-card:hover .related-card__img { transform: scale(1.03); }
.related-card__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 24px;
}
.related-card__label {
  font-family: var(--font-heading);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.related-card__title {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-secondary);
  line-height: 1.35;
}

/* Service-page hero overrides for cleaner labels */
.hero-inner .section-label { font-size: 12px; }

@media (max-width: 1024px) {
  .service-page__grid { grid-template-columns: 1fr; gap: 32px; }
  .service-page__sidebar { position: static; }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .related-grid { grid-template-columns: 1fr; }
  .service-page__h2 { font-size: 22px; }
  .service-page__cta { flex-direction: column; }
  .service-page__cta .btn { width: 100%; }
}

/* --- Core Technologies grid (services.html) --- */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 16px;
}
.tech-block {
  background: #fff;
  border: none;
  border-radius: var(--radius-md);
  padding: 24px 26px 22px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}
.tech-block:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.section-light .tech-block { box-shadow: none; }
.section-light .tech-block:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.tech-block h3 {
  font-family: var(--font-heading);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin: 0 0 14px;
}
.tech-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.tech-block li {
  font-size: 14px;
  color: var(--color-text);
  padding: 6px 0 6px 18px;
  position: relative;
  line-height: 1.5;
}
.tech-block li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-primary);
}
@media (max-width: 1024px) {
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .tech-grid { grid-template-columns: 1fr; gap: 16px; }
  .tech-block { padding: 20px 22px; }
}

/* --- Job Listing (careers.html) --- */
.job-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto;
}
.job-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 32px;
  background: #fff;
  border: none;
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}
.job-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.section-light .job-card { box-shadow: none; }
.section-light .job-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.job-card__main { flex: 1; min-width: 0; }
.job-card__badge {
  display: inline-block;
  background: #e6f9ee;
  color: #28a745;
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.job-card__title {
  margin: 0 0 8px;
  font-family: var(--font-heading);
  font-size: 20px;
  font-weight: 700;
  color: #333;
  letter-spacing: -0.01em;
}
.job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  font-size: 14px;
  color: var(--color-text-light);
}
.job-card__location,
.job-card__posted { display: inline-flex; align-items: center; gap: 6px; }
.job-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 14px;
  color: var(--color-primary);
  white-space: nowrap;
  transition: gap var(--transition);
}
.job-card:hover .job-card__cta {
  gap: 10px;
  color: var(--color-primary-dark);
}
.job-list__footer { text-align: center; margin-top: 32px; }
.job-list__synced {
  margin-top: 16px;
  font-size: 13px;
  color: var(--color-text-light);
  font-style: italic;
}
@media (max-width: 640px) {
  .job-card { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .job-card__title { font-size: 18px; }
  .job-card__meta { gap: 12px; font-size: 13px; }
}

/* --- Back to Top Button --- */
.back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-card);
  transition: all var(--transition);
  opacity: 0;
  visibility: hidden;
  z-index: 900;
}
.back-to-top.visible {
  opacity: 1;
  visibility: visible;
}
.back-to-top:hover {
  background: var(--color-primary-dark);
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.back-to-top svg {
  width: 20px;
  height: 20px;
}

/* --- Contact Form --- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; }
.form-group { margin-bottom: 24px; }
.form-group label {
  display: block;
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 8px;
  color: var(--color-secondary);
}
.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--color-text);
  transition: border-color var(--transition), box-shadow var(--transition);
  background: white;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(9,158,218,0.15);
}
.form-group textarea { resize: vertical; min-height: 140px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.contact-info-card {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 40px;
  margin-bottom: 24px;
}
.contact-info-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px;
}
.contact-info-item:last-child { margin-bottom: 0; }
.contact-info-icon {
  width: 44px;
  height: 44px;
  min-width: 44px;
  border-radius: var(--radius-sm);
  background: linear-gradient(135deg, #e8f4fd, #d0eafa);
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-info-icon svg { width: 20px; height: 20px; color: var(--color-primary); }
.contact-info-text h4 { font-size: 15px; margin-bottom: 4px; }
.contact-info-text p { color: var(--color-text-light); font-size: 14px; margin-bottom: 0; }

.map-embed iframe {
  width: 100%;
  min-height: 300px;
}

/* --- FAQ Accordion --- */
.faq-section { padding: var(--section-padding); background: #F7F8FC; }
.faq-list { max-width: 800px; margin: 0 auto; }
.faq-item {
  background: white;
  border-radius: var(--radius-md);
  margin-bottom: 12px;
  box-shadow: none;
  overflow: hidden;
  transition: box-shadow var(--transition);
}
.faq-item:hover {
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
}
.faq-question {
  width: 100%;
  padding: 20px 24px;
  background: none;
  border: none;
  font-family: var(--font-heading);
  font-size: 17px;
  font-weight: 600;
  color: var(--color-secondary);
  text-align: left;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: color var(--transition);
}
.faq-question:hover { color: var(--color-primary); }
.faq-question svg { width: 20px; height: 20px; transition: transform var(--transition); min-width: 20px; }
.faq-item.active .faq-question svg { transform: rotate(180deg); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-answer-inner { padding: 0 24px 20px; color: var(--color-text-light); line-height: 1.7; font-size: 16px; }
.faq-answer-inner p { font-size: 16px; }
.faq-item.active .faq-answer { max-height: 300px; }

/* --- Process / Steps --- */
.process-steps {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  position: relative;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 32px;
  left: 48px;
  right: 48px;
  height: 2px;
  background: var(--color-border);
}
.process-step {
  flex: 1;
  text-align: center;
  position: relative;
}
.step-number {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 24px;
  font-weight: 700;
  margin: 0 auto 16px;
  position: relative;
  z-index: 1;
}
.process-step h4 { margin-bottom: 8px; }
.process-step p { color: var(--color-text-light); font-size: 14px; margin-bottom: 0; }

/* --- Partner Cards (Partners page) --- */
.partner-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
.partner-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 0;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  border: none;
  transition: box-shadow var(--transition);
  overflow: hidden;
}
.partner-card:hover { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10); }
.section-light .partner-card { box-shadow: none; }
.section-light .partner-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.partner-card__header {
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  overflow: hidden;
}
.partner-card__header--redhat { background: linear-gradient(135deg, #CC0000, #EE0000); }
.partner-card__header--fortinet { background: linear-gradient(135deg, #C4272F, #EE3124); }
.partner-card__header--dynatrace { background: linear-gradient(135deg, #0E6FFF, #1496FF); }
.partner-card__header--gitlab { background: linear-gradient(135deg, #E24329, #FC6D26); }
.partner-card__header--microsoft { background: linear-gradient(135deg, #005A9E, #0078D4); }
.partner-card__header--ibm { background: linear-gradient(135deg, #0530AD, #0F62FE); }
.partner-card__header--aws { background: linear-gradient(135deg, #C17B00, #FF9900); }
.partner-card__logo {
  height: 40px;
  max-width: 120px;
  width: auto;
  flex-shrink: 0;
  
  object-fit: contain;
}
.partner-card__header h3 {
  color: white !important;
  margin-bottom: 0;
  font-size: 24px;
}
.partner-card__header .partner-card-badge {
  margin-bottom: 0;
  background: rgba(255,255,255,0.2);
  color: white;
}
.partner-card__body {
  padding: 32px 40px 40px;
}
.partner-card-badge {
  display: inline-block;
  padding: 6px 16px;
  background: var(--color-bg-light);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-light);
  margin-bottom: 20px;
}
.partner-card h3 { font-size: 28px; margin-bottom: 16px; }
.partner-card p { color: var(--color-text-light); }
.partner-card ul { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.partner-card li {
  color: var(--color-text);
  font-size: 15px;
  padding-left: 24px;
  position: relative;
}
.partner-card li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 10px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-primary);
}
.partner-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px;
  color: var(--color-primary);
  font-weight: 600;
  font-size: 15px;
  transition: gap var(--transition), color var(--transition);
}
.partner-card__cta:hover {
  gap: 10px;
  color: var(--color-primary-dark);
}

/* --- Values Grid (About) --- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.value-card {
  text-align: center;
  padding: 40px 32px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}
.value-card:hover { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10); }
.section-light .value-card { box-shadow: none; }
.section-light .value-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.value-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f4fd, #d0eafa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.value-icon svg { width: 28px; height: 28px; color: var(--color-primary); }
.value-card h3 { font-size: 20px; margin-bottom: 12px; }
.value-card p { color: var(--color-text-light); font-size: 15px; margin-bottom: 0; }

/* --- Award Card --- */
.award-card {
  background: linear-gradient(135deg, var(--color-primary), #0780B5);
  color: white;
  border-radius: var(--radius-md);
  padding: 48px;
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
}
.award-card h3 { color: white; font-size: 28px; margin-bottom: 8px; }
.award-card p { color: rgba(255,255,255,0.85); margin-bottom: 0; }
.award-badge {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 36px;
}

/* --- Service Detail Cards (services page) --- */
.service-detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }

/* --- Breadcrumbs --- */
.breadcrumbs {
  padding: 12px 0;
  background: transparent;
  position: relative;
  z-index: 2;
}
.breadcrumbs ol {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  list-style: none;
}
.breadcrumbs li {
  color: rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
}
.breadcrumbs a { color: rgba(255,255,255,0.7); }
.breadcrumbs a:hover { color: white; }
.breadcrumbs .separator {
  margin: 0 4px;
  display: flex;
  align-items: center;
}

/* --- Timeline Section (About) --- */
.timeline {
  position: relative;
  padding-left: 40px;
  max-width: 700px;
}
.timeline::before {
  content: '';
  position: absolute;
  left: 15px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, var(--color-primary), var(--color-secondary));
}
.timeline__item {
  position: relative;
  margin-bottom: 40px;
  padding-left: 20px;
}
.timeline__item:last-child { margin-bottom: 0; }
.timeline__dot {
  position: absolute;
  left: -32px;
  top: 4px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--color-primary);
  border: 3px solid white;
  box-shadow: 0 0 0 2px var(--color-primary);
}
.timeline__year {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 18px;
  color: var(--color-primary);
  margin-bottom: 4px;
}
.timeline__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  color: var(--color-secondary);
  margin-bottom: 4px;
}
.timeline__desc {
  color: var(--color-text-light);
  font-size: 15px;
  margin-bottom: 0;
}

/* --- By the Numbers Section --- */
.numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.numbers-item {
  text-align: center;
  padding: 32px 16px;
  background: white;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  transition: all var(--transition);
}
.numbers-item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.numbers-item__number {
  font-family: var(--font-heading);
  font-size: 44px;
  font-weight: 800;
  color: var(--color-primary);
  display: block;
  margin-bottom: 4px;
}
.numbers-item__label {
  color: var(--color-text-light);
  font-size: 14px;
  font-weight: 500;
}

/* --- Case Studies Teaser (Homepage) --- */
.case-studies {
  padding: var(--section-padding);
  background: #fff;
  text-align: center;
}
.case-studies .section-label,
.case-studies .section-title {
  text-align: center;
  display: block;
}
.case-studies__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  text-align: left;
}
.case-study-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 40px 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
  display: block;
  text-decoration: none;
  color: inherit;
  border: none;
  text-align: center;
}
.case-study-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.case-study-card__stat {
  font-family: var(--font-heading);
  font-size: 52px;
  font-weight: 800;
  color: var(--color-primary);
  display: block;
  margin-bottom: 12px;
}
.case-study-card__title {
  font-size: 18px;
  margin-bottom: 8px;
}
.case-study-card__desc {
  color: var(--color-text-light);
  font-size: 15px;
  margin-bottom: 16px;
}
.case-study-card__link {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* --- Scroll Animations --- */
.animate-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.animate-on-scroll.animated {
  opacity: 1;
  transform: translateY(0);
}

/* --- Contact Form Social Proof --- */
.form-social-proof {
  margin-top: 16px;
  padding: 20px;
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--color-primary);
}
.form-social-proof blockquote {
  font-style: italic;
  font-size: 14px;
  color: var(--color-text-light);
  margin-bottom: 8px;
}
.form-social-proof cite {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-secondary);
  font-style: normal;
}
.form-response-time {
  text-align: center;
  margin-top: 12px;
  font-size: 14px;
  color: var(--color-text-light);
}

/* --- Hero Backgrounds with Parallax --- */
.hero--has-bg {
  background-image: url('../images/unilogik-hero-bg.jpg');
  background-image: -webkit-image-set(url('../images/unilogik-hero-bg.webp') type('image/webp'), url('../images/unilogik-hero-bg.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/unilogik-hero-bg.webp') type('image/webp'), url('../images/unilogik-hero-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.hero--has-bg::before {
  background: linear-gradient(135deg, rgba(10,22,40,0.95) 0%, rgba(10,22,40,0.80) 50%, rgba(10,22,40,0.60) 100%) !important;
}
.hero--partners-bg {
  background-image: url('../images/unilogik-partners-hero.jpg');
  background-image: -webkit-image-set(url('../images/unilogik-partners-hero.webp') type('image/webp'), url('../images/unilogik-partners-hero.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/unilogik-partners-hero.webp') type('image/webp'), url('../images/unilogik-partners-hero.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.hero--partners-bg::before {
  background: linear-gradient(135deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.7) 50%, rgba(10,22,40,0.5) 100%) !important;
}
.hero--contact-bg {
  background-image: url('../images/unilogik-contact-vancouver.jpg');
  background-image: -webkit-image-set(url('../images/unilogik-contact-vancouver.webp') type('image/webp'), url('../images/unilogik-contact-vancouver.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/unilogik-contact-vancouver.webp') type('image/webp'), url('../images/unilogik-contact-vancouver.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.hero--contact-bg::before {
  background: linear-gradient(135deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.7) 50%, rgba(10,22,40,0.5) 100%) !important;
}
.hero--about-bg {
  background-image: url('../images/unilogik-hero-bg.jpg');
  background-image: -webkit-image-set(url('../images/unilogik-hero-bg.webp') type('image/webp'), url('../images/unilogik-hero-bg.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/unilogik-hero-bg.webp') type('image/webp'), url('../images/unilogik-hero-bg.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.hero--about-bg::before {
  background: linear-gradient(135deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.7) 50%, rgba(10,22,40,0.5) 100%) !important;
}

/* --- Service Detail Images (services page) --- */
.service-card .service-detail-img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: 20px;
  box-shadow: var(--shadow-card);
}

/* --- Services Dropdown --- */
.navbar__dropdown {
  position: relative;
}
.navbar__dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 12px 0;
  min-width: 280px;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  margin-top: 12px;
  border: 1px solid var(--color-border);
  z-index: 100;
}
.navbar__dropdown:hover .navbar__dropdown-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 4px;
}
.navbar__dropdown-menu a {
  display: block;
  padding: 10px 24px;
  color: #333333 !important;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.navbar__dropdown-menu a::after { display: none !important; }
.navbar__dropdown-menu a:hover {
  background: rgba(9,158,218,0.08);
  color: #099EDA !important;
}

/* Legacy nav dropdown */
.nav-dropdown {
  position: relative;
}
.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #FFFFFF;
  border-radius: var(--radius-sm);
  padding: 12px 0;
  min-width: 280px;
  box-shadow: var(--shadow-elevated);
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  margin-top: 12px;
  border: 1px solid var(--color-border);
  z-index: 100;
}
.nav-dropdown:hover .nav-dropdown-menu {
  opacity: 1;
  visibility: visible;
  margin-top: 4px;
}
.nav-dropdown-menu a {
  display: block;
  padding: 10px 24px;
  color: #333333 !important;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}
.nav-dropdown-menu a::after { display: none !important; }
.nav-dropdown-menu a:hover {
  background: rgba(9,158,218,0.08);
  color: #099EDA !important;
}

/* --- About Photo Gallery --- */
.photo-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.photo-gallery__item {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: all var(--transition);
}
.photo-gallery__item:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
}
.photo-gallery__item img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}
.photo-gallery__item--wide {
  grid-column: span 2;
}
.photo-gallery__item--wide img {
  height: 200px;
}
.photo-gallery__caption {
  padding: 12px 16px;
  background: white;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

/* --- Service Sub-Page Styles --- */
.service-hero {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  padding: 160px 0 100px;
  overflow: hidden;
  min-height: auto;
  display: flex;
  align-items: center;
}
.service-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,22,40,0.85) 0%, rgba(10,22,40,0.7) 50%, rgba(10,22,40,0.5) 100%);
  z-index: 1;
}
.service-hero .container {
  position: relative;
  z-index: 2;
}
.service-hero h1 {
  color: white !important;
  font-size: 48px;
  line-height: 1.12;
  margin-bottom: 16px;
  letter-spacing: -0.03em;
}
.service-hero .hero-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 0;
  max-width: 600px;
}
.service-overview {
  padding: var(--section-padding);
}
.service-overview__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}
.service-overview__text p {
  color: var(--color-text-light);
  font-size: 18px;
  line-height: 1.7;
}
.service-overview__benefits h3 {
  margin-bottom: 24px;
}
.service-overview__benefits ul {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.service-overview__benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  color: var(--color-text);
  padding: 16px 20px;
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
  transition: all var(--transition);
}
.service-overview__benefits li:hover {
  background: var(--color-bg-accent);
  transform: translateX(4px);
}
.service-overview__benefits li svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
  flex-shrink: 0;
}
.capabilities-section {
  padding: var(--section-padding);
  background: var(--color-bg-light);
}
.capabilities-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.capability-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 32px 24px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
  text-align: center;
}
.capability-card:hover {
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}
.section-light .capability-card { box-shadow: none; }
.section-light .capability-card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.capability-card__icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e8f4fd, #d0eafa);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}
.capability-card__icon svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}
.capability-card h4 {
  margin-bottom: 8px;
  font-size: 17px;
}
.capability-card p {
  color: var(--color-text-light);
  font-size: 14px;
  margin-bottom: 0;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  .services__grid { grid-template-columns: repeat(2, 1fr); }
  .footer__grid { grid-template-columns: 1fr; gap: 32px; }
  .why__grid { gap: 40px; }
  .partner-detail-grid { grid-template-columns: 1fr; }
  .case-studies__grid { grid-template-columns: repeat(2, 1fr); }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials__grid--centered { grid-template-columns: 1fr; max-width: 400px; }
  .service-overview__grid { grid-template-columns: 1fr; gap: 40px; }
  .capabilities-grid { grid-template-columns: repeat(2, 1fr); }
  .industries-grid { grid-template-columns: repeat(2, 1fr); }
  /* Legacy grid overrides */
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  .why-grid { gap: 40px; }
}

@media (max-width: 768px) {
  :root { --section-padding: 64px 0; }
  h1 { font-size: 36px; }
  h2 { font-size: 28px; }
  .hero { padding: 120px 0 80px; min-height: auto; }
  .hero__title { font-size: 36px !important; }
  .hero__subtitle { font-size: 17px; }
  .hero--inner { padding: 120px 0 60px; }
  .hero--inner .hero__title { font-size: 36px !important; }

  /* Disable parallax on mobile for performance */
  .hero--has-bg,
  .hero--partners-bg,
  .hero--contact-bg,
  .hero--about-bg,
  .cio--has-bg,
  .cta--textured,
  .cta-section--textured { background-attachment: scroll !important; }

  /* Mobile nav - use absolute positioning within navbar to avoid
     backdrop-filter containing block issue with position:fixed */
  .navbar__nav {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    height: calc(100vh - 80px);
    height: calc(100dvh - 80px);
    background: #FFFFFF;
    flex-direction: column;
    padding: 32px;
    z-index: 9999;
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
  }
  .navbar__nav.active { display: flex; }
  .navbar__links {
    flex-direction: column;
    gap: 24px;
  }
  .navbar__link { font-size: 18px; }
  .navbar__hamburger { display: flex; }
  .navbar__cta { display: none; }

  .services__grid { grid-template-columns: 1fr; }
  .why__grid { grid-template-columns: 1fr; gap: 40px; }
  .stats__grid { grid-template-columns: 1fr; gap: 32px; }
  .stats__number { font-size: 40px; }
  .testimonials__grid { grid-template-columns: 1fr; }
  .testimonials__grid--centered { grid-template-columns: 1fr; max-width: 100%; }
  .contact-grid { grid-template-columns: 1fr; }
  .service-overview__grid { grid-template-columns: 1fr; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .photo-gallery { grid-template-columns: 1fr; }
  .photo-gallery__item--wide { grid-column: span 1; }
  .photo-gallery__item img,
  .photo-gallery__item--wide img {
    height: auto !important;
    width: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }
  .service-hero { background-attachment: scroll; padding: 120px 0 60px; }
  .service-hero h1 { font-size: 36px !important; }
  /* Mobile dropdown - hidden by default, toggled via JS */
  .navbar__dropdown-menu {
    position: static;
    transform: none;
    margin-top: 0;
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0 0 0 16px;
    min-width: auto;
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, opacity 0.2s ease;
  }
  .navbar__dropdown--open .navbar__dropdown-menu {
    opacity: 1;
    visibility: visible;
    max-height: 500px;
  }
  .navbar__dropdown-chevron {
    display: inline-flex;
    margin-left: 6px;
    transition: transform 0.3s ease;
    vertical-align: middle;
  }
  .navbar__dropdown--open .navbar__dropdown-chevron {
    transform: rotate(180deg);
  }
  /* Mobile footer - swap to compact layout */
  .footer { padding: 32px 0 20px; }
  .footer__mobile { display: block; }
  .footer__desktop { display: none; }
  .footer__bottom { flex-direction: column; gap: 10px; text-align: center; padding-top: 16px; margin-top: 0; font-size: 12px; }
  .footer__legal { justify-content: center; gap: 16px; }
  .footer__legal a { font-size: 12px; }
  .industries-grid { grid-template-columns: 1fr; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .process-steps { flex-direction: column; gap: 32px; }
  .process-steps::before { display: none; }
  .hero__actions { flex-direction: column; align-items: flex-start; }
  .cta__title { font-size: 28px !important; }
  .service-detail-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .trust-bar { padding: 32px 0; }
  .trust-bar__logos { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .trust-bar__logo { height: 64px; padding: 10px 14px; font-size: 12px; }
  .case-studies__grid { grid-template-columns: 1fr; }
  .numbers-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .numbers-item__number { font-size: 32px; }

  /* --- Mobile Polish: Sections & Spacing --- */
  .section { padding: 60px 0 !important; }
  .section-header { margin-bottom: 40px !important; }
  .section-header h2 { font-size: 24px !important; }
  .section-header p { font-size: 15px !important; }
  .section-label { font-size: 12px; }

  /* --- Mobile: Hero Inner --- */
  .hero--inner, .hero-inner { padding: 120px 0 60px; }
  .hero--inner .hero__title, .hero-inner h1 { font-size: 32px; }
  .hero-subtitle { font-size: 16px; }

  /* --- Mobile: Cards --- */
  .card-grid, .card-grid--2col { grid-template-columns: 1fr !important; }
  .partner-detail-grid { grid-template-columns: 1fr !important; }
  .card { padding: 24px; }
  .services__card { padding: 24px; }
  .why__card { padding: 24px; }

  /* --- Mobile: FAQ fixes --- */
  .faq-section { padding: 60px 0 80px; }
  .faq-section .section-header h2 { font-size: 24px; }
  .faq-question {
    font-size: 15px;
    padding: 16px 44px 16px 16px;
  }
  .faq-question svg {
    width: 18px;
    height: 18px;
    right: 14px;
  }
  .faq-answer-inner {
    padding: 0 16px 16px;
    font-size: 14px;
    line-height: 1.7;
  }
  .faq-answer-inner p {
    font-size: 14px;
    margin-bottom: 10px;
  }
  .faq-item {
    margin-bottom: 8px;
  }

  /* --- Mobile: Back-to-top button --- */
  .back-to-top {
    bottom: 16px;
    right: 16px;
    width: 40px;
    height: 40px;
    z-index: 99;
  }
  .back-to-top svg {
    width: 16px;
    height: 16px;
  }

  /* --- Mobile: CTA section --- */
  .cta-section { padding: 60px 0 !important; }
  .cta-section h2 { font-size: 24px !important; }
  .cta-section p { font-size: 15px !important; margin-bottom: 24px !important; }
  .cta--textured,
  .cta-section--textured { padding: 60px 0 !important; background-attachment: scroll !important; }
  .cta__title { font-size: 24px !important; }
  .cta__subtitle { font-size: 15px; }
  .cta-actions { flex-direction: column; gap: 16px; }
  .cta-phone { font-size: 14px; }

  /* --- Mobile: Stats --- */
  .stats__number { font-size: 36px; }
  .stat-number, .counter { font-size: 36px; }
  .stats__label { font-size: 13px; }

  /* --- Legacy mobile overrides --- */
  .hero h1 { font-size: 36px !important; }
  .hero .hero-subtitle { font-size: 17px; }
  .hero-inner { padding: 120px 0 60px; }
  .hero-inner h1 { font-size: 36px !important; }

  .nav-links {
    display: none;
    position: fixed;
    top: 80px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-bg-dark);
    flex-direction: column;
    padding: 32px;
    gap: 24px;
    z-index: 999;
  }
  .nav-links.active { display: flex; }
  .nav-links a { font-size: 18px; }
  .nav-toggle { display: flex; }
  .nav-cta { margin-left: 0; }

  .card-grid { grid-template-columns: 1fr; }
  .why-grid { grid-template-columns: 1fr !important; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr !important; gap: 32px; }
  .footer-bottom { flex-direction: column; gap: 16px; text-align: center; }
  .hero-actions { flex-direction: column; align-items: flex-start; }
  .tech-stack__grid { grid-template-columns: 1fr 1fr; }
  .related-services__grid { grid-template-columns: 1fr; }

  /* --- Mobile: Tech grid (service sub-pages) --- */
  .tech-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

  /* --- Mobile: Inline stat boxes override --- */
  [style*="padding: 48px 40px"] { padding: 32px 24px !important; }
  [style*="padding: 48px"] { padding: 32px 24px !important; }
  [style*="font-size: 48px"] { font-size: 36px !important; }

  /* --- Mobile: Map container --- */
  .map-embed img, [style*="height: 300px"][style*="object-fit"] { height: 200px !important; }

  /* --- Mobile: Careers page --- */
  .perks-box { padding: 28px 20px !important; }
  .perks-box__title { font-size: 20px !important; margin-bottom: 24px !important; }
  .perks-box__list { gap: 18px !important; }
  .perks-box__item { gap: 12px !important; }
  .perks-box__item-desc { font-size: 13px !important; }
  .opening-card { padding: 24px 20px !important; }
  .opening-card__header h3 { font-size: 18px !important; }
  .opening-card__desc { font-size: 14px !important; }
  .opening-card__meta { gap: 12px !important; font-size: 13px !important; }
  .openings-cta { padding: 28px 20px !important; }
  .openings-cta h3 { font-size: 20px !important; }
  .openings-cta > p { font-size: 14px !important; }
}

@media (max-width: 480px) {
  h1 { font-size: 28px; }
  h2 { font-size: 22px; }
  h3 { font-size: 18px; }
  .hero__title, .hero h1 { font-size: 28px !important; }
  .hero--inner .hero__title, .hero-inner h1 { font-size: 26px !important; }
  .hero-subtitle, .hero__subtitle { font-size: 15px; }
  .container { padding: 0 16px; }
  .btn--lg, .btn-lg { padding: 14px 28px; font-size: 16px; }

  /* --- 480px: Section spacing --- */
  .section { padding: 48px 0; }
  .section-header { margin-bottom: 32px; }
  .section-header h2 { font-size: 22px; }
  .section-header p { font-size: 14px; }
  .section-label { font-size: 11px; }

  /* --- 480px: Grids force single column --- */
  .numbers-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .numbers-item__number { font-size: 28px; }
  .services__grid { grid-template-columns: 1fr; }
  .card-grid { grid-template-columns: 1fr !important; }
  .tech-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .values-grid { grid-template-columns: 1fr; }
  .capabilities-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr; }
  .trust-bar__logos { grid-template-columns: repeat(2, 1fr); }
  .trust-bar__logo { height: 60px; padding: 10px 14px; font-size: 12px; }

  /* --- 480px: Cards & containers --- */
  .card, .services__card, .why__card, .value-card { padding: 20px; }
  .award-card { padding: 28px 20px; }
  .partner-card__header { padding: 16px 20px; }
  .partner-card__body { padding: 24px 20px; }

  /* --- 480px: Stats & numbers --- */
  .stats__number, .stat-number, .counter { font-size: 32px; }
  .stats__label { font-size: 12px; }

  /* --- 480px: CTA section --- */
  .cta-section { padding: 48px 0; }
  .cta-section h2 { font-size: 22px !important; }
  .cta-section p { font-size: 14px; }
  .cta__title { font-size: 22px !important; }
  .cta-actions { flex-direction: column; gap: 16px; }
  .cta-phone { font-size: 14px; }

  /* --- 480px: FAQ --- */
  .faq-question { font-size: 14px; padding: 14px 40px 14px 14px; }
  .faq-answer-inner { padding: 0 14px 14px; font-size: 13px; }
  .faq-answer-inner p { font-size: 13px; }

  /* --- 480px: Photo gallery --- */
  .photo-gallery { gap: 12px; margin-top: 24px; }
  .photo-gallery__item img,
  .photo-gallery__item--wide img {
    height: auto !important;
    width: 100%;
    aspect-ratio: auto;
    object-fit: cover;
  }

  /* --- 480px: Timeline --- */
  .timeline { padding-left: 28px; }
  .timeline__year { font-size: 13px; }
  .timeline__title { font-size: 16px; }
  .timeline__desc { font-size: 14px; }

  /* --- 480px: Benefit items --- */
  .benefit-item { gap: 14px; }
  .benefit-icon { width: 40px; height: 40px; min-width: 40px; }
  .benefit-icon svg { width: 20px; height: 20px; }
  .benefit-text h4 { font-size: 16px; }
  .benefit-text p { font-size: 14px; }

  /* --- 480px: Contact --- */
  .contact-grid { gap: 32px; }

  /* --- 480px: Service detail pages --- */
  .tech-stack__grid { grid-template-columns: 1fr !important; }
  .related-services__grid { grid-template-columns: 1fr; }
  .related-services__grid > a { padding: 24px !important; }
  .service-detail-grid { grid-template-columns: 1fr; }

  /* --- 480px: Inline stat boxes (about, careers) --- */
  [style*="padding: 48px 40px"] { padding: 28px 20px !important; }
  [style*="font-size: 48px"] { font-size: 32px !important; }

  /* --- 480px: Hero actions --- */
  .hero__actions, .hero-actions { gap: 12px; }
  .hero__actions .btn, .hero-actions .btn { width: 100%; text-align: center; }

  /* --- 480px: Event page (CIO) --- */
  .event-card { padding: 20px 16px; }
  .event-meta-item { font-size: 14px; }

  /* --- 480px: Careers page --- */
  .perks-box { padding: 24px 16px !important; }
  .perks-box__title { font-size: 18px !important; margin-bottom: 20px !important; }
  .perks-box__item-title { font-size: 14px !important; }
  .perks-box__item-desc { font-size: 12px !important; }
  .perks-box__item svg { width: 20px !important; height: 20px !important; }
  .opening-card { padding: 20px 16px !important; }
  .opening-card__header h3 { font-size: 16px !important; }
  .opening-card__badge { font-size: 12px !important; padding: 3px 10px !important; }
  .opening-card__desc { font-size: 13px !important; }
  .opening-card__meta { flex-direction: column !important; gap: 8px !important; font-size: 12px !important; }
  .openings-cta { padding: 24px 16px !important; }
}

/* ============================================
   LEGACY CLASS COMPATIBILITY
   Sub-pages (about, services, partners, contact)
   use the old naming convention. These aliases
   ensure both conventions work.
   ============================================ */

/* --- Legacy Buttons --- */
.btn-primary {
  background: var(--color-primary);
  color: var(--color-text-white);
  border-color: var(--color-primary);
}
.btn-primary:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(9, 158, 218, 0.3);
}
.btn-secondary {
  background: transparent;
  color: var(--color-text-white);
  border-color: var(--color-text-white);
}
.btn-secondary:hover {
  background: var(--color-text-white);
  color: var(--color-secondary);
  transform: translateY(-2px);
}
.btn-white { background: #fff; color: var(--color-primary); border-color: #fff; }
.btn-white:hover { background: #f0f0f0; transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); }
.btn-lg { padding: 18px 40px; font-size: 18px; }

/* --- Legacy Navbar (sub-pages use .nav-logo, .nav-links, .nav-toggle, .nav-cta) --- */
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
}
.nav-logo {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 800;
  color: var(--color-text);
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.logo-icon { display: none; }
.nav-logo-img {
  width: 160px;
  height: auto;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.nav-links a {
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  transition: color var(--transition);
  position: relative;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  transition: width var(--transition);
}
.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}
.nav-links a:hover,
.nav-links a.active {
  color: #099EDA;
}
.nav-cta { margin-left: 8px; }
.nav-cta .btn { padding: 10px 24px; font-size: 14px; }
.nav-cta a::after { display: none; }
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #333333;
  border-radius: 2px;
  transition: all var(--transition);
}
.nav-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* --- Legacy Hero (sub-pages) --- */
.hero-content { max-width: 720px; position: relative; z-index: 2; }
.hero h1 {
  color: var(--color-text-white) !important;
  font-size: 56px;
  line-height: 1.12;
  margin-bottom: 24px;
  letter-spacing: -0.03em;
}
.hero .hero-subtitle {
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 600px;
}
.hero-actions { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.hero-link { color: rgba(255,255,255,0.7); font-weight: 600; transition: color var(--transition); }
.hero-link:hover { color: var(--color-text-white); }
.hero-pattern {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 50%;
  z-index: 0;
  opacity: 0.15;
  background:
    linear-gradient(135deg, transparent 25%, rgba(9,158,218,0.1) 25%, rgba(9,158,218,0.1) 50%, transparent 50%),
    linear-gradient(45deg, transparent 25%, rgba(36,103,141,0.08) 25%, rgba(36,103,141,0.08) 50%, transparent 50%);
  background-size: 60px 60px;
}
.hero-inner {
  padding: 140px 0 80px;
  min-height: auto;
}
.hero-inner h1 { font-size: 48px; }

/* --- Legacy Section Utilities --- */
.section { padding: var(--section-padding); }
.section-dark { background: var(--color-bg-dark); }
.section-light { background: var(--color-bg-light); }
.section-header { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.section-header h2 { margin-bottom: 16px; }
.section-header p { color: var(--color-text-light); font-size: 18px; }

/* --- Legacy Cards Grid --- */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.card-grid--2col { grid-template-columns: repeat(2, 1fr); }
/* .tech-grid layout is defined earlier in the file (3 cols desktop / 2 tablet / 1 mobile) — do not override here */
.card {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 40px 32px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
  border: none;
}
.card:hover { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10); }
.section-light .card { box-shadow: none; }
.section-light .card:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.card-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: linear-gradient(135deg, #e8f4fd, #d0eafa);
}
.card-icon svg { width: 28px; height: 28px; color: var(--color-primary); }
.card h3 { margin-bottom: 12px; }
.card p { color: var(--color-text-light); margin-bottom: 16px; }
.card-link { color: var(--color-primary); font-weight: 600; font-size: 15px; display: inline-flex; align-items: center; gap: 6px; }
.card-link:hover { color: var(--color-primary-dark); }

/* --- Legacy Why Section --- */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.why-content h2 { margin-bottom: 16px; }
.why-content > p { color: var(--color-text-light); font-size: 18px; }
.benefit-list { display: flex; flex-direction: column; gap: 28px; }
.benefit-item {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: white;
  padding: 20px;
  border-radius: var(--radius-md);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
  transition: box-shadow var(--transition);
}
.benefit-item:hover { box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10); }
.section-light .benefit-item { box-shadow: none; }
.section-light .benefit-item:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06); }
.benefit-icon {
  width: 48px;
  height: 48px;
  min-width: 48px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e8f4fd, #d0eafa);
  flex-shrink: 0;
}
.benefit-icon svg { width: 24px; height: 24px; color: var(--color-primary); }
.benefit-text h4 { margin-bottom: 4px; font-size: 18px; }
.benefit-text p { color: var(--color-text-light); font-size: 15px; margin-bottom: 0; }

/* --- Legacy CTA Section --- */
.cta-section {
  padding: 100px 0;
  background: var(--color-primary);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-section--textured {
  background-image: url('../images/unilogik-cta-texture.jpg');
  background-image: -webkit-image-set(url('../images/unilogik-cta-texture.webp') type('image/webp'), url('../images/unilogik-cta-texture.jpg') type('image/jpeg'));
  background-image: image-set(url('../images/unilogik-cta-texture.webp') type('image/webp'), url('../images/unilogik-cta-texture.jpg') type('image/jpeg'));
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.cta-section--textured::before {
  background: linear-gradient(135deg, rgba(9,158,218,0.92) 0%, rgba(7,128,181,0.88) 50%, rgba(10,22,40,0.85) 100%) !important;
}
.cta-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 50%, rgba(0,0,0,0.1) 0%, transparent 50%);
}
.cta-section .container { position: relative; z-index: 1; }
.cta-section h2 { color: white !important; font-size: 40px; margin-bottom: 16px; }
.cta-section p { color: rgba(255,255,255,0.85); font-size: 18px; margin-bottom: 36px; }
.cta-actions { display: flex; align-items: center; justify-content: center; gap: 24px; flex-wrap: wrap; }
.cta-phone { color: rgba(255,255,255,0.85); font-size: 16px; }
.cta-phone strong { color: white; }

/* --- Legacy Footer --- */
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 60px;
}
.footer-brand .nav-logo { margin-bottom: 16px; }
.footer-brand p { font-size: 14px; line-height: 1.7; color: rgba(255,255,255,0.5); max-width: 280px; }
.footer-col h4 { color: white !important; font-size: 15px; margin-bottom: 20px; text-transform: uppercase; letter-spacing: 0.08em; }
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col li { color: rgba(255,255,255,0.5); font-size: 14px; transition: color var(--transition); }
.footer-col a:hover { color: #099EDA; }
.footer-logo-img {
  width: 180px;
  height: auto;
  margin-bottom: 16px;
}
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.footer-social { display: flex; gap: 16px; }
.footer-social a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition);
}
.footer-social a:hover { background: var(--color-primary); transform: translateY(-2px); }
.footer-social svg { width: 16px; height: 16px; color: rgba(255,255,255,0.6); }


/* --- Case Study Callout --- */
.case-study-callout {
  background: linear-gradient(135deg, var(--color-bg-accent) 0%, #dceef8 100%);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-md);
  padding: 32px 36px;
  margin: 40px 0;
  text-align: center;
}
.case-study-callout__label {
  font-family: var(--font-heading);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-primary-dark);
  margin-bottom: 8px;
}
.case-study-callout__stat {
  font-family: var(--font-heading);
  font-size: 48px;
  font-weight: 800;
  color: var(--color-primary-dark);
  line-height: 1.1;
  margin-bottom: 8px;
}
.case-study-callout__text {
  font-size: 16px;
  color: var(--color-text-light);
  max-width: 400px;
  margin: 0 auto;
  line-height: 1.6;
}

/* --- Technologies We Use Section --- */
.tech-stack {
  padding: 60px 0;
  background: var(--color-bg-light);
}
.tech-stack__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.tech-stack__item {
  background: var(--color-bg);
  border-radius: var(--radius-md);
  padding: 24px;
  text-align: center;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.tech-stack__item:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-hover);
}
.tech-stack__item-name {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 15px;
  color: var(--color-text);
  margin-bottom: 4px;
}
.tech-stack__item-version {
  font-size: 13px;
  color: var(--color-text-light);
}

/* --- Related Services Section --- */
.related-services {
  padding: 60px 0;
  background: var(--color-bg);
}
.related-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 32px;
}
.related-services__card {
  display: block;
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 28px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-card);
  transition: transform var(--transition), box-shadow var(--transition);
}
.related-services__card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-hover);
}
.related-services__card h4 {
  font-family: var(--font-heading);
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--color-text);
}
.related-services__card p {
  font-size: 14px;
  color: var(--color-text-light);
  line-height: 1.6;
  margin-bottom: 12px;
}
.related-services__card-link {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-primary);
}

/* ============================================
   CAREERS PAGE - Perks Box & Openings
   ============================================ */
.perks-box {
  background: linear-gradient(135deg, var(--color-bg-dark), #0d2137);
  border-radius: var(--radius-md);
  padding: 48px 40px;
  color: white;
}
.perks-box__title {
  color: white !important;
  margin-bottom: 32px;
  font-size: 22px;
}
.perks-box__list {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.perks-box__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.perks-box__item svg {
  flex-shrink: 0;
  margin-top: 2px;
}
.perks-box__item-title {
  font-weight: 600;
  margin-bottom: 4px;
}
.perks-box__item-desc {
  color: rgba(255,255,255,0.6);
  font-size: 14px;
}
.perks-box__divider {
  border-top: 1px solid rgba(255,255,255,0.1);
}

/* --- Openings --- */
.openings-list {
  max-width: 800px;
  margin: 0 auto;
}
.opening-card {
  background: white;
  border-radius: var(--radius-md);
  padding: 32px;
  margin-bottom: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  border-left: 4px solid var(--color-primary);
}
.opening-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.opening-card__header h3 {
  margin: 0;
}
.opening-card__badge {
  background: rgba(9, 158, 218, 0.1);
  color: var(--color-primary);
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.opening-card__desc {
  color: var(--color-text-light);
  margin-bottom: 16px;
}
.opening-card__meta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--color-text-light);
  font-size: 14px;
}
.opening-card__meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.openings-cta {
  background: var(--color-bg-light);
  border-radius: var(--radius-md);
  padding: 40px;
  margin-top: 40px;
  text-align: center;
}
.openings-cta h3 {
  margin-bottom: 12px;
}
.openings-cta > p {
  color: var(--color-text-light);
  margin-bottom: 24px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.openings-cta__email {
  color: var(--color-text-light);
  font-size: 14px;
  margin-top: 16px;
}
.openings-cta__email a {
  color: var(--color-primary);
  font-weight: 500;
}

/* === Disable hover translateY lift globally — keep shadow/color changes only === */
.btn:hover,
.btn--primary:hover,
.btn--secondary:hover,
.btn--outline:hover,
.btn--white:hover,
.btn-white:hover,
.service-card:hover,
.industry-card:hover,
.case-study-card:hover,
.partner-card:hover,
.value-card:hover,
.benefit-item:hover,
.testimonial-card:hover,
.trust-bar__logo:hover,
.footer-social a:hover,
.capability-card:hover,
.opening-card:hover,
.award-card:hover,
.card:hover,
.tech-block:hover,
.partner-product:hover,
.partner-detail-card:hover,
.service-page__card:hover,
.event-card:hover {
  transform: none !important;
}

/* === Navbar dark/negative variant (after scrolling past hero) === */
.navbar--dark {
  background: var(--color-bg-dark) !important;
  backdrop-filter: none;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.25);
}
.navbar--dark .navbar__link {
  color: rgba(255, 255, 255, 0.5);
}
.navbar--dark .navbar__link:hover,
.navbar--dark .navbar__link--active {
  color: #099EDA;
}
.navbar--dark .navbar__link::after { background: #099EDA; }
/* Hamburger lines on dark */
.navbar--dark .navbar__hamburger span { background: rgba(255, 255, 255, 0.7); }
.navbar--dark .navbar__hamburger-line { background: rgba(255, 255, 255, 0.7); }
/* Dark variant of the open mobile menu drawer */
@media (max-width: 768px) {
  .navbar--dark .navbar__nav {
    background: var(--color-bg-dark) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
  }
  .navbar--dark .navbar__nav .navbar__link {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .navbar--dark .navbar__nav .navbar__link:hover,
  .navbar--dark .navbar__nav .navbar__link--active {
    color: #099EDA !important;
  }
  .navbar--dark .navbar__nav .navbar__dropdown-menu a {
    color: rgba(255, 255, 255, 0.5) !important;
  }
  .navbar--dark .navbar__nav .navbar__dropdown-menu a:hover {
    color: #099EDA !important;
  }
}
/* Dropdown — dark variant matches footer palette */
.navbar--dark .navbar__dropdown-menu {
  background: var(--color-bg-dark);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}
.navbar--dark .navbar__dropdown-menu a {
  color: rgba(255, 255, 255, 0.5) !important;
}
.navbar--dark .navbar__dropdown-menu a:hover {
  background: rgba(9, 158, 218, 0.10);
  color: #099EDA !important;
}
/* Logo width stays the same when dark (180px); JS swaps src to new logo */

/* ============================================================
   Draft-only responsive fixes (tablet + mobile)
   ============================================================ */

/* (#3) Why Unilogik: reduce gap between benefit boxes by 10px */
.why__benefits { gap: 18px; }

/* (#5) Testimonials carousel: 1 per slide on mobile, keep 2 on tablet+ */
@media (max-width: 768px) {
  .testimonials__track .testimonial-card {
    flex: 0 0 100%;
  }
}

/* (#2) Hero title sub-line stays smaller than main line on mobile */
@media (max-width: 768px) {
  .hero__title-sub { font-size: 21px !important; line-height: 1.25; margin-top: 8px; }
}
@media (max-width: 480px) {
  .hero__title-sub { font-size: 17px !important; line-height: 1.25; margin-top: 6px; }
}

/* (#4) Proven Impact stats subtext bigger on mobile */
@media (max-width: 768px) {
  .stats__label { font-size: 16px !important; }
}
@media (max-width: 480px) {
  .stats__label { font-size: 15px !important; }
}

/* All section labels stay at 12px on mobile and tablet (was 11px on smallest) */
@media (max-width: 1024px) {
  .section-label,
  .hero-inner .section-label { font-size: 12px !important; }
}

/* (#6) FAQ: larger fonts on mobile + uncap max-height so all content shows */
.faq-item.active .faq-answer { max-height: 2000px !important; }
@media (max-width: 768px) {
  .faq-question { font-size: 17px !important; padding: 18px 44px 18px 18px !important; }
  .faq-answer-inner { padding: 0 18px 18px !important; font-size: 16px !important; }
  .faq-answer-inner p { font-size: 16px !important; line-height: 1.65 !important; }
}
@media (max-width: 480px) {
  .faq-question { font-size: 16px !important; }
  .faq-answer-inner,
  .faq-answer-inner p { font-size: 15px !important; }
}

/* Mobile menu: center all links, auto-expand Services dropdown,
   make dropdown sub-links smaller than main links */
@media (max-width: 768px) {
  .navbar__links { align-items: center !important; text-align: center; }
  .navbar__dropdown { width: 100%; display: flex; flex-direction: column; align-items: center; }
  .navbar__link { text-align: center; }
  /* Auto-expand the Services dropdown on mobile (no need to tap to open) */
  .navbar__dropdown-menu {
    position: static !important;
    transform: none !important;
    margin-top: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    min-width: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 14px;
  }
  /* Hide the chevron on mobile since the dropdown is always open */
  .navbar__dropdown-chevron { display: none !important; }
  /* Dropdown sub-links: smaller font than main nav links */
  .navbar__dropdown-menu a {
    font-size: 14px !important;
    padding: 4px 0 !important;
    color: var(--color-text-light) !important;
  }
}

/* (#7) Footer: center everything on mobile, stack everything vertically */
@media (max-width: 768px) {
  /* Use the desktop layout but stacked, centered */
  .footer__desktop { display: block !important; }
  .footer__mobile { display: none !important; }
  .footer__grid {
    display: flex !important;
    flex-direction: column !important;
    text-align: center;
    gap: 40px !important;
    align-items: center;
  }
  .footer__brand,
  .footer__columns-row,
  .footer__column {
    width: 100%;
    text-align: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }
  .footer__columns-row {
    gap: 40px !important;
  }
  .footer__brand a,
  .footer__brand .footer__tagline,
  .footer__brand .footer__newsletter,
  .footer__brand .footer__newsletter-form { margin-left: auto !important; margin-right: auto !important; }
  .footer__tagline { max-width: 320px; }
  .footer__newsletter { width: 100%; max-width: 320px; }
  .footer__newsletter-form { max-width: 100%; width: 100%; }
  .footer__newsletter-heading { text-align: center; }
  .footer__heading { text-align: center; }
  .footer__links {
    flex-direction: column !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 0;
    margin: 0;
    list-style: none;
  }
  .footer__contact { align-items: center; text-align: center; }
  .footer__contact p { text-align: center; }
  .footer__social { justify-content: center; }
  .footer__bottom { flex-direction: column; gap: 12px !important; text-align: center; }
  .footer__legal { justify-content: center; }
}

/* === services.html: Core Technologies section — widen intro paragraph
   so it wraps to ~3 lines instead of 5 === */
#core-technologies .section-header {
  max-width: 980px;
}

/* === Wider section-header variant — used on about.html "What We Do"
   so the H2 fits on a single line === */
.section-header--wide {
  max-width: 900px;
}

/* === contact.html: "Verify you are human" math captcha === */
.human-check__row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-bg-light);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
}
.human-check__question {
  font-family: var(--font-heading);
  font-size: 15px;
  font-weight: 600;
  color: var(--color-secondary);
  white-space: nowrap;
}
.human-check__row input[type="text"] {
  flex: 0 0 105px;
  text-align: center;
  font-weight: 700;
  letter-spacing: 0.05em;
}
@media (max-width: 480px) {
  .human-check__row { flex-direction: column; align-items: stretch; gap: 10px; }
  .human-check__question { text-align: center; }
  .human-check__row input[type="text"] { flex: 1 1 auto; }
}

/* === about.html Capabilities section ===
   - Section bg matches the "Our Story" (.why) section: #F7F8FC.
   - Cards have NO base shadow and NO hover shadow (they sit cleanly
     against the gray bg, like the .why__benefit boxes).
   - The "RHCE/RHCA", "CAD/USD", "Free POV" labels render as H3 (24px)
     in brand blue with 50px top/bottom padding for breathing room. */
#capabilities {
  background: var(--color-bg-light); /* same #F7F8FC as Our Story */
}
#capabilities .case-study-card {
  box-shadow: none;
}
#capabilities .case-study-card:hover {
  box-shadow: none;
}
#capabilities .case-study-card__stat {
  display: block;
  font-size: 24px;          /* H3 size */
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
  padding: 50px 0;
  margin-bottom: 0;
}
#capabilities .case-study-card__title {
  font-size: 18px;
  margin-top: 8px;
}

/* === about.html Community/Events section — 4 cards laid out as
   2 per row on desktop AND tablet (full container width), 1 per row
   on mobile. */
#events .industries-grid {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 768px) {
  #events .industries-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SERVICE DETAIL PAGES (platform-engineering, automation, …)
   ============================================================ */

/* 1) Per-service low-key hero backgrounds.
   Image subject is composed on the right third; left two-thirds are
   near-pure navy so the headline copy reads clearly without an overlay
   gradient that mutes the photo. */
.hero--service-bg {
  background-size: cover;
  background-position: center right;
  background-attachment: scroll;
  background-color: #0A1628;
}
/* Lighter overlay than other heros — the image already has built-in
   negative space on the left. We just need a touch of darkening for
   text legibility on the right edge. */
.hero--service-bg::before {
  background: linear-gradient(
    90deg,
    rgba(10,22,40,0.92) 0%,
    rgba(10,22,40,0.70) 40%,
    rgba(10,22,40,0.30) 100%
  ) !important;
}
/* The decorative diagonal pattern on the right of .hero--has-bg would
   collide with the subject in our service hero photos — suppress it. */
.hero--service-bg .hero-pattern { display: none; }
.hero--platform-bg     { background-image: url('../images/unilogik-service-hero-platform.jpg'); }
.hero--automation-bg   { background-image: url('../images/unilogik-service-hero-automation.jpg'); }
.hero--observability-bg{ background-image: url('../images/unilogik-service-hero-observability.jpg'); }
.hero--security-bg     { background-image: url('../images/unilogik-service-hero-security.jpg'); }
.hero--database-bg     { background-image: url('../images/unilogik-service-hero-database.jpg'); }
.hero--advisory-bg     { background-image: url('../images/unilogik-service-hero-advisory.jpg'); }
.hero--staff-bg        { background-image: url('../images/unilogik-service-hero-staff.jpg'); }
.hero--license-bg      { background-image: url('../images/unilogik-service-hero-license.jpg'); }
/* On mobile the subject sits behind the text — shift the bg right and
   add more darkening so the headline stays readable. */
@media (max-width: 768px) {
  .hero--service-bg {
    background-position: 75% center;
  }
  .hero--service-bg::before {
    background: linear-gradient(
      180deg,
      rgba(10,22,40,0.92) 0%,
      rgba(10,22,40,0.85) 60%,
      rgba(10,22,40,0.75) 100%
    ) !important;
  }
}

/* 2) Overview "Talk to Specialist" — phone button.
   Use .btn .btn--phone in place of .btn--outline. No stroke, dark text,
   small phone icon glyph, neutral gray hover. */
.btn--phone {
  background: transparent;
  border-color: transparent !important;
  color: var(--color-secondary);
  padding-left: 20px;
  padding-right: 20px;
  gap: 10px;
  font-weight: 700;
}
.btn--phone::before {
  content: '';
  width: 16px;
  height: 16px;
  display: inline-block;
  background-color: var(--color-secondary); /* dark blue, solid */
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><path d='M2.5 0C1.83696 0 1.20107 0.263392 0.732233 0.732233C0.263392 1.20107 0 1.83696 0 2.5L0 4.5C0 10.299 4.701 15 10.5 15H12.5C13.163 15 13.7989 14.7366 14.2678 14.2678C14.7366 13.7989 15 13.163 15 12.5V11.118C15 10.8393 14.9223 10.5661 14.7757 10.329C14.6291 10.092 14.4194 9.90049 14.17 9.776L11.755 8.568C11.5627 8.47188 11.352 8.4182 11.1372 8.41061C10.9224 8.40302 10.7084 8.44169 10.5099 8.524C10.3113 8.60632 10.1327 8.73035 9.98626 8.8877C9.83981 9.04505 9.72888 9.23204 9.661 9.436L9.363 10.329C9.30816 10.4929 9.19543 10.6311 9.04594 10.7178C8.89646 10.8045 8.72048 10.8338 8.551 10.8C7.47742 10.5853 6.49139 10.0576 5.71713 9.28352C4.94287 8.50943 4.41499 7.52353 4.2 6.45C4.16624 6.28052 4.19545 6.10454 4.28216 5.95506C4.36887 5.80557 4.50712 5.69284 4.671 5.638L5.78 5.268C6.13839 5.14832 6.43842 4.8978 6.6201 4.5665C6.80179 4.2352 6.85175 3.84754 6.76 3.481L6.174 1.137C6.09307 0.812518 5.90603 0.524386 5.64259 0.318382C5.37915 0.112377 5.05442 0.000315369 4.72 0L2.5 0Z'/></svg>") no-repeat center / contain;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'><path d='M2.5 0C1.83696 0 1.20107 0.263392 0.732233 0.732233C0.263392 1.20107 0 1.83696 0 2.5L0 4.5C0 10.299 4.701 15 10.5 15H12.5C13.163 15 13.7989 14.7366 14.2678 14.2678C14.7366 13.7989 15 13.163 15 12.5V11.118C15 10.8393 14.9223 10.5661 14.7757 10.329C14.6291 10.092 14.4194 9.90049 14.17 9.776L11.755 8.568C11.5627 8.47188 11.352 8.4182 11.1372 8.41061C10.9224 8.40302 10.7084 8.44169 10.5099 8.524C10.3113 8.60632 10.1327 8.73035 9.98626 8.8877C9.83981 9.04505 9.72888 9.23204 9.661 9.436L9.363 10.329C9.30816 10.4929 9.19543 10.6311 9.04594 10.7178C8.89646 10.8045 8.72048 10.8338 8.551 10.8C7.47742 10.5853 6.49139 10.0576 5.71713 9.28352C4.94287 8.50943 4.41499 7.52353 4.2 6.45C4.16624 6.28052 4.19545 6.10454 4.28216 5.95506C4.36887 5.80557 4.50712 5.69284 4.671 5.638L5.78 5.268C6.13839 5.14832 6.43842 4.8978 6.6201 4.5665C6.80179 4.2352 6.85175 3.84754 6.76 3.481L6.174 1.137C6.09307 0.812518 5.90603 0.524386 5.64259 0.318382C5.37915 0.112377 5.05442 0.000315369 4.72 0L2.5 0Z'/></svg>") no-repeat center / contain;
  flex-shrink: 0;
}
.btn--phone:hover {
  background: #EEF1F5; /* gentle neutral gray */
  color: var(--color-secondary);
  border-color: transparent !important;
  box-shadow: none;
}

/* 3) Small button modifier — used for sidebar CTAs. */
.btn--sm {
  padding: 10px 18px;
  font-size: 14px;
}

/* 4) Core Technologies sidebar — image on top, no stroke,
   "Learn About POV" reads as a dark-blue outline button. */
.service-page__sidebar {
  background: var(--color-bg-light);
  border: none !important;
  border-radius: var(--radius-md);
  padding: 0;
  overflow: hidden;
}
.service-page__sidebar-img {
  width: 100%;
  display: block;
  aspect-ratio: 16/9;
  object-fit: cover;
}
.service-page__sidebar-body {
  padding: 24px 26px 24px;
}
.service-page__sidebar-h {
  margin-top: 0;
}
.service-page__sidebar-cta {
  border-top: 1px solid rgba(0,0,0,0.06);
  padding-top: 18px;
}
/* The sidebar's "Learn About POV →" button — dark blue 1px stroke,
   dark blue text, fills with dark blue on hover. Re-uses .btn--outline
   colors but with a thinner 1px stroke (already global) and small size. */
.service-page__sidebar-cta .btn {
  margin-top: 12px;
}

/* === services.html: services section gets the index "services" grid
   (2 cols desktop) with our 8 service cards rendered in a 2x4 layout.
   The .services class already supplies the right paddings/grid. === */