/* =========================================================
   Cloud4Rain — Main Stylesheet
   Variables come from inline CSS injected by functions.php
   (so colors are editable from Customizer)
   ========================================================= */

/* Self-hosted Good Times font (bundled with theme).
   WOFF2 preferred, OTF fallback. font-display: block forces the browser
   to wait briefly for the font instead of showing a different fallback. */
@font-face {
  font-family: "Good Times";
  src:
    url("../fonts/good-times.woff2") format("woff2"),
    url("../fonts/good-times.otf") format("opentype");
  font-weight: 400 900;
  font-style: normal;
  font-display: block;
}

:root {
  --c4r-primary: #01444c;
  --c4r-secondary: #1d5b5e;
  --c4r-accent: #8ec0b4;
  --c4r-bg: #f5f2ec;
  --c4r-text: #1a1a1a;
  --c4r-text-light: #ffffff;
  --c4r-muted: #6b7b7b;
  --c4r-border: rgba(255, 255, 255, 0.12);
  --c4r-radius: 14px;
  --c4r-radius-lg: 22px;
  --c4r-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);

  --c4r-font-sans:
    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --c4r-font-display: "Manrope", var(--c4r-font-sans);

  --c4r-container: 1280px;

  /* Spacing system — unified vertical rhythm across sections.
       Major sections use --section-py, compact strips use --section-py-sm. */
  --c4r-section-py: clamp(
    72px,
    7vw,
    112px
  ); /* major sections (about, services, stories, news, cta, products cards) */
  --c4r-section-py-sm: clamp(
    40px,
    5vw,
    72px
  ); /* compact strips (trusted, newsletter, footer) */
  --c4r-content-gap: clamp(
    28px,
    4vw,
    56px
  ); /* between header and content within a section */
  --c4r-card-gap: clamp(20px, 2.5vw, 32px); /* between cards in a row */
  --c4r-container-pad: clamp(
    16px,
    2.5vw,
    32px
  ); /* horizontal container padding */
}

/* ── reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  padding: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scrollbar-gutter: stable;
}
main,
header,
footer,
nav,
section,
article,
aside {
  display: block;
  margin: 0;
}
body {
  font-family: var(--c4r-font-sans);
  color: var(--c4r-text);
  background: var(--c4r-primary);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}
img {
  max-width: 100%;
  height: auto;
  display: block;
}
a {
  color: inherit;
  text-decoration: none;
  transition: color 0.2s;
}
a:hover {
  color: var(--c4r-primary);
}
button {
  font-family: inherit;
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--c4r-font-display);
  margin: 0 0 0.5em;
  line-height: 1.2;
  font-weight: 700;
  color: inherit;
}
p {
  margin: 0 0 1em;
}
ul {
  padding: 0;
  margin: 0;
  list-style: none;
}

.screen-reader-text {
  position: absolute !important;
  clip: rect(1px, 1px, 1px, 1px);
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: absolute;
  top: 8px;
  left: 8px;
  background: #fff;
  padding: 8px 12px;
  z-index: 10000;
  clip: auto;
  width: auto;
  height: auto;
}

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

/* ── buttons ──────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 24px;
  border-radius: 999px;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    background 0.2s ease,
    color 0.2s ease,
    box-shadow 0.2s ease;
}
.btn:hover {
  transform: translateY(-1px);
}
.btn--accent {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
}
.btn--accent:hover {
  background: #b8ee5d;
  color: var(--c4r-primary);
}
.btn--primary {
  background: var(--c4r-primary);
  color: #fff;
}
.btn--primary:hover {
  background: #0a3133;
  color: #fff;
}
.btn--ghost {
  background: transparent;
  color: var(--c4r-primary);
  border: 1.5px solid var(--c4r-primary);
}
.btn--ghost:hover {
  background: var(--c4r-primary);
  color: #fff;
}
.btn--sm {
  padding: 10px 18px;
  font-size: 14px;
}
.btn--block {
  width: 100%;
}

/* ── helpers ──────────────────────────────────────────── */
.eyebrow {
  display: inline-block;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c4r-secondary);
  font-weight: 600;
  margin-bottom: 14px;
}
.section-title {
  font-size: clamp(28px, 4vw, 44px);
  margin: 0 0 0.4em;
  color: var(--c4r-primary);
}
.section-title--light {
  color: #fff;
}
.section-head {
  margin-bottom: 40px;
}
.section-head--center {
  text-align: center;
}
.section-head--row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.muted {
  color: var(--c4r-muted);
}
.muted--light {
  color: rgba(255, 255, 255, 0.65);
}
.c4r-placeholder {
  background: linear-gradient(135deg, #d9e0e0, #bcc8c8);
  border-radius: var(--c4r-radius);
  aspect-ratio: 3/2;
}
.c4r-placeholder--lg {
  aspect-ratio: 4/3;
  height: 100%;
  min-height: 360px;
}
.c4r-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.c4r-icon--emoji {
  font-size: 28px;
}
.c4r-icon--img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}
/* When the icon sits inside the small footer chip on a service card */
.service-card__icon .c4r-icon--img {
  max-height: 22px;
}
/* When the icon sits inside the hexagonal slot on a product card */
.product-card__icon .c4r-icon--img {
  max-height: 32px;
  max-width: 36px;
}

/* ── header ───────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c4r-primary);
  color: #fff;
  transition: box-shadow 0.25s ease;
}
.site-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
  min-height: 84px;
  padding: 0 32px;
  max-width: 1440px;
  margin: 0 auto;
}
.site-branding {
  display: inline-flex;
  align-items: center;
  color: #fff;
  text-decoration: none;
  max-width: 240px;
  min-width: 0;
}
.site-branding .custom-logo-link {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.site-branding img,
.site-branding .custom-logo,
.site-branding .custom-logo-link img {
  max-height: 48px;
  max-width: 100%;
  height: auto;
  width: auto;
  display: block;
  object-fit: contain;
}
.site-logo-text {
  font-family: var(--c4r-font-display);
  font-size: 26px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
}
.site-logo-text--light {
  color: #fff;
}

/* Nav menu — center */
.site-nav {
  justify-self: center;
}
.site-nav__menu {
  display: flex;
  align-items: center;
  gap: 36px;
}
.site-nav__menu a {
  color: rgba(255, 255, 255, 0.92);
  font-size: 15px;
  font-weight: 500;
  padding: 24px 0;
  position: relative;
  letter-spacing: 0;
  transition: color 0.15s ease;
}
.site-nav__menu a:hover {
  color: #fff;
}
.site-nav__menu .current-menu-item > a,
.site-nav__menu .current_page_item > a,
.site-nav__menu .current-menu-ancestor > a {
  color: #fff;
}
.site-nav__menu .current-menu-item > a::after,
.site-nav__menu .current_page_item > a::after,
.site-nav__menu .current-menu-ancestor > a::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  width: 22px;
  height: 2px;
  background: color-mix(in srgb, var(--c4r-accent) 85%, transparent);
  border-radius: 2px;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}

/* Login dropdown wrapper */
.login-dropdown {
  position: relative;
}

/* Login pill (white, rounded) */
.login-pill {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 12px 22px;
  background: #fff;
  color: var(--c4r-primary);
  border: 0;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    background 0.2s ease;
}
.login-pill:hover {
  background: #fff;
  color: var(--c4r-primary);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.login-pill[aria-expanded="true"] {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.login-pill__dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 26px;
  height: 26px;
}
.login-pill__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c4r-secondary);
  opacity: 0.35;
  animation: c4r-dots-pulse 2.6s ease-in-out infinite both;
  will-change: transform, opacity;
}
.login-pill__dots span:nth-child(1) {
  animation-delay: 0s;
}
.login-pill__dots span:nth-child(2) {
  animation-delay: 0.32s;
}
.login-pill__dots span:nth-child(3) {
  animation-delay: 0.64s;
}
.login-pill:hover .login-pill__dots span,
.login-pill[aria-expanded="true"] .login-pill__dots span {
  animation-duration: 1.8s;
}
@keyframes c4r-dots-pulse {
  0%,
  60%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
  30% {
    opacity: 1;
    transform: scale(1.35);
  }
}
@media (prefers-reduced-motion: reduce) {
  .login-pill__dots span {
    animation: none;
    opacity: 0.65;
  }
}

/* Login menu dropdown */
.login-menu {
  position: absolute;
  top: calc(100% + 14px);
  right: 0;
  min-width: 320px;
  background: rgba(1, 68, 76, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition:
    opacity 0.2s ease,
    transform 0.25s ease,
    visibility 0.25s;
  z-index: 105;
}
.login-dropdown.is-open .login-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.login-menu__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.login-menu__item a {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 14px 18px;
  color: rgba(255, 255, 255, 0.92);
  font-size: 16px;
  font-weight: 500;
  border-radius: 12px;
  transition:
    background 0.15s ease,
    color 0.15s ease;
  text-align: right;
}
.login-menu__item a:hover {
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.login-menu__item.is-active a {
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
}
.login-menu__label {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  flex: 1;
  justify-content: flex-end;
}
.login-menu__suffix {
  color: var(--c4r-accent);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-family: var(--c4r-font-display);
}
.login-menu__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: rgba(255, 255, 255, 0.85);
  flex-shrink: 0;
}
.login-menu__icon .dashicons {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: inherit;
}
.login-menu__icon--img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.08);
}
.login-menu__icon--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Page blur overlay (visible while dropdown open) */
.page-blur-overlay {
  position: fixed;
  inset: 0;
  top: var(--c4r-header-h, 84px);
  background: rgba(8, 39, 42, 0.35);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.25s ease,
    visibility 0.25s;
  z-index: 90;
  pointer-events: none;
}
body.login-open .page-blur-overlay {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
body.login-open {
  overflow: hidden;
}

@media (max-width: 520px) {
  .login-menu {
    min-width: 260px;
    right: -8px;
  }
}

/* mobile burger */
.site-nav__toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 8px;
  flex-direction: column;
  gap: 5px;
}
.site-nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.site-nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1100px) {
  .site-nav__menu {
    gap: 24px;
  }
  .site-header__inner {
    gap: 20px;
    padding: 0 24px;
  }
}
/* Mobile login section — hidden on desktop, shown inside the nav drawer on mobile */
.site-nav__login {
  display: none;
}

@media (max-width: 980px) {
  .site-header__inner {
    grid-template-columns: auto 1fr auto;
    min-height: 72px;
  }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--c4r-primary);
    padding: 16px 24px 24px;
    transform: translateY(-200%);
    transition: transform 0.3s ease;
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
    justify-self: stretch;
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .site-nav.is-open {
    transform: translateY(0);
  }
  .site-nav__menu {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
  .site-nav__menu a {
    padding: 14px 0;
    width: 100%;
    border-bottom: 1px solid var(--c4r-border);
  }
  .site-nav__menu .current-menu-item > a::after,
  .site-nav__menu .current_page_item > a::after {
    left: 0;
    transform: none;
    bottom: 0;
    width: 22px;
  }
  .site-nav__toggle {
    display: inline-flex;
  }

  /* Hide the desktop login pill (with dots) on mobile — login moves into the nav drawer */
  .login-dropdown {
    display: none;
  }

  /* Show login items inside the nav drawer */
  .site-nav__login {
    display: block;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--c4r-border);
  }
  .site-nav__login-title {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 12px;
  }
  .site-nav__login-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .site-nav__login-item a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    transition: background 0.2s ease;
  }
  .site-nav__login-item a:hover,
  .site-nav__login-item.is-active a {
    background: var(--c4r-accent);
    color: var(--c4r-primary);
  }
  .site-nav__login-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
  }
  .site-nav__login-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
  }
  .site-nav__login-suffix {
    color: var(--c4r-accent);
    margin-left: 4px;
    font-size: 12px;
  }
  .site-nav__login-item.is-active .site-nav__login-suffix {
    color: var(--c4r-primary);
  }
}

/* ── hero ─────────────────────────────────────────────── */
.hero {
  position: relative;
  margin: 0;
  padding: 0;
  background: var(--c4r-primary);
}
.hero-swiper {
  width: 100%;
  /* fill viewport below the header */
  height: calc(100vh - 84px);
  height: calc(100svh - 84px); /* small-vh on mobile browsers */
  min-height: 460px;
  max-height: 900px;
  display: block;
  margin: 0;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.hero .swiper-wrapper {
  margin: 0;
  padding: 0;
}
.hero + section {
  margin-top: 0;
}
@media (max-width: 980px) {
  .hero-swiper {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
  }
}
.hero-slide {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--c4r-secondary);
  display: flex;
  align-items: flex-end;
  color: #fff;
}
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(1, 68, 76, 0) 0%,
      rgba(1, 68, 76, 0.45) 55%,
      rgba(1, 68, 76, 0.85) 100%
    ),
    linear-gradient(90deg, rgba(1, 68, 76, 0.55) 0%, rgba(1, 68, 76, 0) 60%);
  pointer-events: none;
}

/* Title link — only the title text is clickable */
.hero-slide__title a {
  color: inherit;
  text-decoration: none;
  display: inline;
  transition:
    color 0.25s ease,
    text-shadow 0.25s ease;
}
.hero-slide__title a:hover {
  color: var(--c4r-accent);
}
.hero-slide__inner {
  position: relative;
  z-index: 2;
  padding: 0 48px 18vh; /* lift content up from the bottom */
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.hero-slide__eyebrow {
  display: inline-block;
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c4r-accent);
  margin-bottom: 14px;
  font-weight: 600;
}
.hero-slide__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 4.2vw, 56px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
  max-width: 12ch; /* wraps to two lines like the Figma */
}
.hero-slide__subtitle {
  font-size: clamp(15px, 1.6vw, 18px);
  max-width: 640px;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, 0.88);
}
.hero-slide__inner .btn {
  margin-top: 26px;
}

.hero-slide--empty {
  min-height: 460px;
  background: linear-gradient(135deg, var(--c4r-secondary), var(--c4r-primary));
}

@media (max-width: 720px) {
  .hero-slide__inner {
    padding: 0 22px 110px; /* more bottom padding so title clears the arrows/pagination */
  }
  .hero-slide__title {
    font-size: clamp(30px, 9vw, 42px); /* bigger, more impactful on mobile */
    line-height: 1.08;
    max-width: 14ch;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
  }
  .hero-slide__eyebrow {
    font-size: 11px;
    margin-bottom: 10px;
  }
  .hero-slide__subtitle {
    font-size: 14px;
    margin-top: 12px;
  }
  .hero-slide__inner .btn {
    margin-top: 18px;
  }

  .hero-swiper {
    height: calc(100vh - 72px);
    height: calc(100svh - 72px);
    min-height: 480px;
  }

  /* Pagination: lift it a bit and align consistently */
  .hero .swiper-pagination {
    bottom: 50px !important;
    left: 22px !important;
  }
}

/* — Smaller mobile (≤480px) — extra spacing tweaks for the hero */
@media (max-width: 480px) {
  .hero-slide__inner {
    padding: 0 18px 100px;
  }
  .hero-slide__title {
    font-size: clamp(26px, 8.5vw, 36px);
    max-width: 11ch;
  }
  /* Arrows slightly larger for easier tapping */
  .hero-swiper__btn {
    --c4r-arrow-size: 42px;
  }
  .hero .swiper-button-prev {
    right: 64px !important;
    bottom: 14px !important;
  }
  .hero .swiper-button-next {
    right: 14px !important;
    bottom: 14px !important;
  }
  .hero .swiper-pagination {
    bottom: 24px !important;
    left: 18px !important;
  }
}

/* ── slider controls ─────────────────────────────────── */
.hero .swiper-pagination {
  bottom: 32px !important;
  z-index: 6;
}
.swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background: rgba(255, 255, 255, 0.4);
  opacity: 1;
  transition:
    width 0.3s ease,
    background 0.2s ease,
    opacity 0.2s ease;
  margin: 0 5px !important;
}
.swiper-pagination-bullet:hover {
  background: rgba(255, 255, 255, 0.7);
}
.swiper-pagination-bullet-active {
  background: var(--c4r-accent);
  width: 32px;
  border-radius: 5px;
}

/* Arrow buttons — circular, glass-like */
.hero-swiper__btn {
  --c4r-arrow-size: 56px;
  width: var(--c4r-arrow-size) !important;
  height: var(--c4r-arrow-size) !important;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff !important;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.15s ease,
    box-shadow 0.25s ease;
  z-index: 6;
  margin-top: calc(var(--c4r-arrow-size) / -2) !important;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}
.hero-swiper__btn:hover {
  background: var(--c4r-accent);
  border-color: var(--c4r-accent);
  color: var(--c4r-primary) !important;
  transform: scale(1.06);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.28);
}
.hero-swiper__btn:active {
  transform: scale(0.98);
}

/* Arrows: bottom-right corner, side by side — clear of the title */
.hero .swiper-button-prev,
.hero .swiper-button-next {
  top: auto !important;
  bottom: 32px !important;
  margin-top: 0 !important;
}
.hero .swiper-button-prev {
  left: auto !important;
  right: 104px !important;
}
.hero .swiper-button-next {
  right: 32px !important;
}
.hero .swiper-pagination {
  left: 48px !important;
  right: auto !important;
  width: auto !important;
  text-align: left !important;
}

/* Replace default chevron with cleaner one via ::after */
.hero-swiper__btn::after {
  font-family: inherit !important;
  font-size: 0 !important; /* hide the default text */
  width: 14px;
  height: 14px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  border-radius: 1px;
  content: "" !important;
}
.hero .swiper-button-prev::after {
  transform: rotate(-135deg) translate(-1px, -1px);
}
.hero .swiper-button-next::after {
  transform: rotate(45deg) translate(-1px, 1px);
}

/* Disabled / hidden (when no loop) — subtle fade */
.swiper-button-disabled.hero-swiper__btn {
  opacity: 0.35;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .hero-swiper__btn {
    --c4r-arrow-size: 44px;
  }
  .hero .swiper-button-prev {
    left: auto !important;
    right: 76px !important;
    bottom: 18px !important;
  }
  .hero .swiper-button-next {
    right: 16px !important;
    bottom: 18px !important;
  }
  .hero .swiper-pagination {
    bottom: 14px !important;
    left: 24px !important;
  }
}

/* ── partners strip ──────────────────────────────────── */
.partners {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  align-items: center;
  justify-content: space-between;
  padding: 28px 24px;
  border-bottom: 1px solid #e6e1d8;
}
.partners__item img {
  max-height: 44px;
  width: auto;
  opacity: 0.8;
  filter: grayscale(1);
  transition:
    opacity 0.2s,
    filter 0.2s;
}
.partners__item img:hover {
  opacity: 1;
  filter: none;
}

/* ── about ────────────────────────────────────────────── */
/* (legacy .about rule below is overridden by the modern one — kept inert) */
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.about__text {
  color: #2c3636;
  font-size: 16px;
}
.about__media img {
  border-radius: var(--c4r-radius-lg);
  box-shadow: var(--c4r-shadow);
}
@media (max-width: 880px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* ── services (legacy grid styles kept for fallback) ──── */
.cards {
  display: grid;
  gap: 24px;
}
.cards--3 {
  grid-template-columns: repeat(3, 1fr);
}
.cards--4 {
  grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 980px) {
  .cards--3,
  .cards--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .cards--3,
  .cards--4 {
    grid-template-columns: 1fr;
  }
}

.card {
  background: #fff;
  border-radius: var(--c4r-radius-lg);
  padding: 32px;
  box-shadow: var(--c4r-shadow);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}
.card__icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--c4r-primary);
  color: var(--c4r-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 22px;
  font-size: 26px;
}
.card__icon .dashicons {
  font-size: 26px;
  width: 26px;
  height: 26px;
  color: var(--c4r-accent);
}
.card__icon--light {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.card__icon--light .dashicons {
  color: #fff;
}
.card__title {
  font-size: 20px;
  color: var(--c4r-primary);
  margin-bottom: 10px;
}
.card__title a {
  color: inherit;
}
.card__title--light {
  color: #fff;
}
.card__text {
  color: var(--c4r-muted);
  font-size: 14.5px;
  flex-grow: 1;
  margin-bottom: 18px;
}
.card__text--light {
  color: rgba(255, 255, 255, 0.75);
}
.card__link {
  color: var(--c4r-primary);
  font-weight: 600;
  font-size: 14px;
}
.card__link:hover {
  color: var(--c4r-secondary);
}
.card__link--light {
  color: var(--c4r-accent);
}
.card__link--light:hover {
  color: #fff;
}

/* ── stories (legacy class kept for fallback) ──────────── */
.card--story {
  padding: 0;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c4r-border);
}

/* ── products (legacy class kept for fallback) ────────── */
.card--product {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--c4r-border);
  padding: 28px;
  cursor: pointer;
}
.card--product:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ── news (legacy classes kept for fallback) ──────────── */
.card--news {
  padding: 0;
  overflow: hidden;
}

/* ── cta / contact ────────────────────────────────────── */
.cta {
  background:
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 60%),
    var(--c4r-primary);
  color: #fff;
  padding: var(--c4r-section-py) 0;
}
.cta__grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

/* Left column */
.cta__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--c4r-accent) 15%, transparent);
  color: var(--c4r-accent);
  margin-bottom: 22px;
}
.cta__title {
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin: 0 0 14px;
}
.cta__text {
  font-family: "Noto Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 24px;
  max-width: 460px;
}
.cta__map {
  margin: 0 0 24px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}
.cta__map iframe {
  display: block;
}

.cta__contact {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.cta__contact li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.85);
  font-size: 14px;
}
.cta__contact .dashicons {
  color: var(--c4r-accent);
}
.cta__contact a {
  color: inherit;
  text-decoration: none;
}
.cta__contact a:hover {
  color: var(--c4r-accent);
}

/* Right column — white floating form card */
.cta__form {
  background: #fff;
  color: #161c2d;
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.22);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cta__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cta__label {
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #161c2d;
}
.cta__form input,
.cta__form select,
.cta__form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  background: #fff;
  color: #161c2d;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
.cta__form input::placeholder,
.cta__form textarea::placeholder {
  color: #99a1af;
}
.cta__form input:focus,
.cta__form select:focus,
.cta__form textarea:focus {
  border-color: var(--c4r-primary);
  box-shadow: 0 0 0 3px rgba(1, 68, 76, 0.08);
}
.cta__form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'><path d='M1 1.5l5 5 5-5' stroke='%2399A1AF' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}
.cta__submit {
  margin-top: 4px;
  padding: 14px 24px;
  background: var(--c4r-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.2s ease,
    transform 0.12s ease;
}
.cta__submit:hover {
  background: var(--c4r-secondary);
  transform: translateY(-1px);
}

@media (max-width: 880px) {
  .cta__grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

.form-msg {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  margin: 12px 0 0;
}
.form-msg--ok {
  background: color-mix(in srgb, var(--c4r-accent) 15%, transparent);
  color: var(--c4r-accent);
  border: 1px solid color-mix(in srgb, var(--c4r-accent) 30%, transparent);
}
.form-msg--error {
  background: rgba(255, 80, 80, 0.15);
  color: #ffaaaa;
  border: 1px solid rgba(255, 80, 80, 0.3);
}

/* ── Newsletter section (light bg, sits between CTA and footer) ── */
.newsletter {
  background: #f6f6f6;
  padding: var(--c4r-section-py-sm) 0;
}
.newsletter__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
}
.newsletter__heading {
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(18px, 1.6vw, 22px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--c4r-primary);
  margin: 0;
  max-width: 380px;
}
.newsletter__form {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 999px;
  padding: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  max-width: 460px;
  width: 100%;
  justify-self: end;
}
.newsletter__form input[type="email"] {
  flex: 1;
  min-width: 0;
  padding: 10px 18px;
  border: 0;
  background: transparent;
  color: #161c2d;
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  outline: none;
}
.newsletter__form input[type="email"]::placeholder {
  color: #99a1af;
}
.newsletter__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 9px 9px 22px;
  background: var(--c4r-primary);
  color: #fff;
  border: 0;
  border-radius: 999px;
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.newsletter__btn:hover {
  background: var(--c4r-secondary);
}
.newsletter__btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
}
.newsletter__msg {
  grid-column: 1 / -1;
}

/* ── Site footer ── */
.site-footer {
  background: #f6f6f6;
  color: #4b5563;
  padding: var(--c4r-section-py-sm) 0 0;
  border-top: 1px solid #eaeaea;
}
.site-footer__columns {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(20px, 3vw, 40px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.footer-col__title {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  font-weight: 700;
  color: var(--c4r-primary);
  text-transform: capitalize;
  margin: 0 0 16px;
  letter-spacing: 0.01em;
}
.footer-col__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer-col__list a {
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  color: var(--c4r-primary);
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer-col__list a:hover {
  color: var(--c4r-secondary);
  text-decoration: underline;
}
.footer-col--contact .footer-col__contact-link {
  color: var(--c4r-primary);
  word-break: break-word;
}

/* Bottom row — copyright + socials */
.site-footer__bottom {
  border-top: 1px solid #eaeaea;
  padding: 18px 0;
}
.site-footer__bottom-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.site-footer__copy {
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  color: #6b7280;
}
.site-footer__social {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 12px;
}
.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: transparent;
  color: var(--c4r-primary);
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease;
}
.site-footer__social a:hover {
  background: var(--c4r-primary);
  color: #fff;
  transform: translateY(-1px);
}
.site-footer__social .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 1;
}
.site-footer__social svg {
  display: block;
  width: 18px;
  height: 18px;
}
.site-footer__social-img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

@media (max-width: 980px) {
  .site-footer__columns {
    grid-template-columns: repeat(3, 1fr);
  }
  .newsletter__grid {
    grid-template-columns: 1fr;
  }
  .newsletter__form {
    justify-self: start;
  }
}
@media (max-width: 600px) {
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
  }
  .site-footer__bottom-row {
    flex-direction: column;
    align-items: center;
  }
}

/* ── single posts / pages ─────────────────────────────── */
.site-main.home {
  padding: 0;
} /* home: hero is flush against header */
.single-post-wrap {
  max-width: 820px;
}
.single-post__title {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--c4r-primary);
}
.single-post__meta {
  color: var(--c4r-muted);
  margin-bottom: 22px;
  font-size: 14px;
}
.single-post__media {
  margin: 22px 0;
}
.single-post__media img {
  border-radius: var(--c4r-radius);
}
.entry-content {
  font-size: 16px;
}
.entry-content p {
  margin: 0 0 1em;
}
.entry-content h2 {
  font-size: 28px;
  color: var(--c4r-primary);
  margin-top: 1.5em;
}
.entry-content a {
  color: var(--c4r-secondary);
  text-decoration: underline;
}
.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) {
  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 600px) {
  .post-grid {
    grid-template-columns: 1fr;
  }
}

/* ── page header ─────────────────────────────────────── */
.page-header {
  margin-bottom: 30px;
}
.page-title {
  font-size: clamp(28px, 4vw, 44px);
  color: var(--c4r-primary);
}

/* ── reveal animation ────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ── header scrolled state ───────────────────────────── */
.site-header.is-scrolled {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}

/* ── single CPT archive helper title ─────────────────── */
.archive .page-header {
  padding: 30px 0;
}

/* ── search/comment defaults (lightweight) ───────────── */
.comments-area,
.search-form {
  margin-top: 40px;
}

/* =========================================================
   Intro section (under the hero)
   Dark teal background, two-column: tagline+CTAs / heading+copy
   ========================================================= */
.intro {
  background:
    radial-gradient(
      ellipse 70% 90% at 30% 45%,
      rgba(180, 220, 215, 0.32) 0%,
      rgba(180, 220, 215, 0.12) 35%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 60% 70% at 15% 85%,
      rgba(0, 0, 0, 0.18) 0%,
      transparent 60%
    ),
    var(--c4r-primary);
  color: #fff;
  padding: clamp(60px, 9vw, 100px) 0 clamp(72px, 7vw, 100px);
  position: relative;
  overflow: hidden;
}
.intro::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    color-mix(in srgb, var(--c4r-accent) 35%, transparent),
    transparent
  );
}
.intro__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}
.intro__tagline {
  font-family: "Good Times", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.08;
  letter-spacing: 0.01em;
  margin: 0 0 22px;
  margin-left: 65px;
  color: #fff;
  text-transform: uppercase;
}
.c4r-indent {
  display: inline-block;
  padding-left: 1.4em;
}

.intro__ctas {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.btn--intro {
  padding: 10px 10px 10px 30px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 999px;
  gap: 18px;
  line-height: 1;
}
.btn--intro .btn__label {
  line-height: 1;
}
.btn--intro-primary {
  border-radius: 200px;
  border: 1px solid var(--Deep-Teal, #0A5B63);
  background: var(--Dark-Teal, #01444C);
  color: #fff;
}
.btn--intro-primary:hover {
  background: #2a7074;
  color: #fff;
}
.btn--intro-secondary {
  background: #fff;
  color: var(--c4r-primary);
}
.btn--intro-secondary:hover {
  background: #f1efe9;
  color: var(--c4r-primary);
}

.btn__arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  transition:
    transform 0.2s ease,
    background 0.2s ease;
}
.btn--intro-primary .btn__arrow-wrap {
  background: #fff;
  color: var(--c4r-primary);
}
.btn--intro-secondary .btn__arrow-wrap {
  background: rgba(1, 68, 76, 0.1);
  color: var(--c4r-primary);
}
.btn--intro:hover .btn__arrow-wrap {
  transform: translate(2px, -2px);
}
.btn__arrow {
  width: 15px;
  height: 15px;
  display: block;
}

.intro__right {
  color: #bfc8ca;
  max-width: 803px;
  font-family: "Noto Sans", "Inter", sans-serif;
}
.intro__heading {
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  color: #bfc8ca;
  margin: 0 0 14px;
}
.intro__desc {
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 120%;
  color: #bfc8ca;
  margin: 0;
}

@media (max-width: 860px) {
  .intro {
    padding: clamp(56px, 12vw, 96px) 0 clamp(48px, 8vw, 72px);
  }
  .intro__grid {
    grid-template-columns: 1fr;
    gap: 36px;
    align-items: start;
  }
  .intro__left {
    text-align: center;
  }
  .intro__tagline {
    font-size: clamp(28px, 8.5vw, 38px);
    margin-bottom: 24px;
    line-height: 1.05;
    text-align: center;
  }
  /* Cancel the desktop "GO CLOUD" left indent on mobile so both lines center */
  .intro__tagline .c4r-indent {
    padding-left: 0;
  }
  /* Center the CTA buttons row on mobile */
  .intro__ctas {
    justify-content: center;
  }

  /* Better-balanced buttons on mobile */
  .intro__ctas {
    gap: 12px;
  }
  .btn--intro {
    padding: 10px 10px 10px 24px;
    font-size: 14px;
    gap: 14px;
    width: 100%;
    justify-content: space-between;
  }
  .btn__arrow-wrap {
    width: 36px;
    height: 36px;
  }

  /* Right-side copy: stronger hierarchy + better readability */
  .intro__right {
    color: #dce5e6;
  }
  .intro__heading {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    color: #ffffff;
    margin: 0 0 14px;
  }
  .intro__desc {
    font-size: 15px;
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.78);
    margin: 0;
  }
}

/* Smaller mobile — tighter still */
@media (max-width: 480px) {
  .intro__tagline {
    font-size: clamp(26px, 9vw, 34px);
  }
  .intro__heading {
    font-size: 16px;
  }
  .intro__desc {
    font-size: 14px;
    line-height: 1.6;
  }
  .btn--intro {
    padding: 9px 9px 9px 22px;
    font-size: 13.5px;
  }
  .btn__arrow-wrap {
    width: 34px;
    height: 34px;
  }
}

/* =========================================================
   Trusted By (partner logos strip)
   Sits between Intro and About. Light bg, centered heading,
   logos in a single row that wraps on narrower screens.
   ========================================================= */
.trusted {
  background: #F1FBF9;
  padding: var(--c4r-section-py-sm) 0;
  border-bottom: 1px solid rgba(1, 68, 76, 0.06);
}
.trusted__heading {
  color: var(--Dark-Teal, #01444c);
  text-align: center;
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: 24px; /* 150% */
  padding-bottom: 15px;
}
/* Marquee: an overflow-hidden mask containing a flex track that
   scrolls left infinitely. Track holds the logos twice, so a translation
   of -50% places the duplicate exactly where the original started — no jump. */
.trusted__marquee {
  --gap: clamp(20px, 2.5vw, 40px);
  position: relative;
  overflow: hidden;
  /* fade the edges so logos enter/exit softly */
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}
.trusted__track {
  display: flex;
  align-items: center;
  width: max-content;
  will-change: transform;
}
.trusted__marquee.is-animated .trusted__track {
  animation: c4r-trusted-scroll var(--c4r-trusted-duration, 32s) linear infinite;
}
.trusted__marquee.is-animated:hover .trusted__track,
.trusted__marquee.is-animated:focus-within .trusted__track {
  animation-play-state: paused;
}
.trusted__marquee.is-static .trusted__track {
  width: 100%;
  justify-content: center;
  gap: var(--gap);
}
@keyframes c4r-trusted-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
.trusted__item {
  /* Width sized so exactly --c4r-trusted-visible items fit in the container.
       Item is the slot (width + gap), inner img has gap as margin-right
       so the doubled track loops perfectly at -50%. */
  flex: 0 0 calc((min(100vw, 1200px) - 48px) / var(--c4r-trusted-visible, 6));
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: var(--gap);
  box-sizing: border-box;
}
.trusted__item img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  opacity: 0.92;
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}
.trusted__item:hover img {
  opacity: 1;
  transform: translateY(-1px);
}

/* Reduce visible count on smaller viewports for readability.
   These overrides win over the inline value because they target a child
   element (.trusted__marquee) where the variable is re-declared. */
@media (max-width: 1100px) {
  .trusted__marquee {
    --c4r-trusted-visible: 4;
  }
}
@media (max-width: 700px) {
  .trusted__marquee {
    --c4r-trusted-visible: 3;
  }
}
@media (max-width: 480px) {
  .trusted__marquee {
    --c4r-trusted-visible: 2;
  }
}

@media (max-width: 560px) {
  .trusted__heading {
    font-size: 13px;
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .trusted__marquee.is-animated .trusted__track {
    animation: none;
  }
}

/* =========================================================
   About Us — content + bullet list + collage
   ========================================================= */
.about {
  background-color: #F1FBF9;
  background-image:
    linear-gradient(to right, rgba(1, 68, 76, 0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(1, 68, 76, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
  background-position: -1px -1px;
  padding: var(--c4r-section-py) 0;
  position: relative;
  overflow: hidden;
}
.about__decor {
  position: absolute;
  top: 20px;
  right: 0;
  width: clamp(180px, 22vw, 267px);
  height: auto;
  pointer-events: none;
  z-index: 0;
  opacity: 0.45;
}
.about::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: .17px;
  background: linear-gradient(244deg, transparent 0%, rgb(215 239 234 / 55%) 2%, transparent 72%);
  pointer-events: none;
  z-index: 1;
}
.about__grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  position: relative;
  z-index: 1;
}

.about__eyebrow {
  display: inline-block;
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c4r-secondary);
  font-weight: 600;
  margin-bottom: 14px;
}
.about__title {
  color: var(--Dark-Teal, #01444c);
  font-family: "Good Times";
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: 110%; /* 48.4px */
}
.about__text {
  margin: 0 0 24px;
  max-width: 540px;
  color: #8F9496;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%; /* 30.1px */
}

.about__bullets {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.about__bullet {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #2F2F2F;
  font-family: "Noto Sans";
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%;
}
.about__bullet-text {
  color: #2F2F2F;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%; /* 30.1px */
}
.about__bullet-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.about__bullet-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.about__btn {
  margin-top: 4px;
}

/* Image collage — 2 columns / 2 rows; the main image spans both rows */
.about__media {
  display: grid;
  grid-template-columns: 1.45fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  aspect-ratio: 1.05 / 1;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}
.about__media-main {
  grid-row: 1 / 3;
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  background: var(--c4r-secondary);
}
.about__media-side {
  border-radius: 18px;
  overflow: hidden;
  background: var(--c4r-secondary);
  min-height: 0;
}
.about__media-main img,
.about__media-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.about__caption {
  position: absolute;
  bottom: 14px;
  left: 16px;
  right: 16px;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 11px;
  line-height: 1.45;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
}

@media (max-width: 860px) {
  .about__grid {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .about__text {
    max-width: none;
  }
  .about__media {
    justify-self: stretch;
    max-width: none;
    aspect-ratio: 1.4 / 1;
  }
}
@media (max-width: 480px) {
  .about__media {
    aspect-ratio: 1 / 1;
  }
  .about__bullet {
    font-size: 14px;
  }
}

/* =========================================================
   Strategic Services — centered header + Swiper carousel
   ========================================================= */
.services {
  background-color: #F1FBF9;
  padding: var(--c4r-section-py) 0;
  position: relative;
  /* No overflow:hidden so the prev/next arrows can sit outside the cards.
       Swiper itself clips slides via its own overflow:hidden internally. */
}

/* Stylish bottom divider: gradient mint line that fades out at both edges,
   with a soft glow underneath for depth. */
.services::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    color-mix(in srgb, var(--c4r-accent) 0%, transparent) 5%,
    var(--c4r-accent) 50%,
    color-mix(in srgb, var(--c4r-accent) 0%, transparent) 95%,
    transparent 100%
  );
  box-shadow: 0 0 16px color-mix(in srgb, var(--c4r-accent) 35%, transparent);
}
.services__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto var(--c4r-content-gap);
}
.services__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(1, 68, 76, 0.06);
  color: var(--c4r-primary);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-family: "Noto Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.services__eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c4r-primary);
}
.services__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  color: var(--c4r-primary);
  margin: 0 0 16px;
  letter-spacing: 0.015em;
}
.services__subtitle {
  color: #8F9496;
  text-align: center;
  font-family: "Noto Sans";
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%; /* 30.1px */
  margin: 0;
}

/* Carousel container — viewport wraps the swiper and the nav buttons
   so the buttons can sit outside the card edges without being clipped. */
.services__viewport {
  position: relative;
}
.services__slider {
  position: relative;
  padding: 4px 4px 8px;
}
.services__slider .swiper-wrapper {
  align-items: stretch;
}

/* Card */
.service-card {
  background: #fff;
  border-radius: 20px;
  border: 1px solid transparent;
  padding: 24px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: auto;
  min-height: 280px;
  box-shadow: 0 2px 8px rgba(1, 68, 76, 0.03);
  transition:
    box-shadow 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    backdrop-filter 0.25s ease;
  position: relative;
}
.service-card:hover {
  border-color: #DCDCDC;
  background: rgba(142, 192, 180, 0.39);
  backdrop-filter: blur(10.8px);
  box-shadow: 0 4px 12px rgba(1, 68, 76, 0.05);
}
/* Active (first visible) slide gets a soft frosted accent like the Figma */
.services-swiper .swiper-slide-active .service-card {
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--c4r-accent) 18%, transparent) 0%,
    rgba(255, 255, 255, 0.95) 60%
  );
  box-shadow:
    0 12px 28px rgba(1, 68, 76, 0.1),
    inset 0 0 0 1px rgba(1, 68, 76, 0.05);
}

.service-card__badge {
  align-self: flex-start;
  background: var(--c4r-primary);
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
}
.service-card__title {
  color: #565555;
  font-family: Mulish;
  font-size: 23px;
  font-style: normal;
  font-weight: 700;
  line-height: 110%;
  margin: 4px 0 0;
}
.service-card__text {
  color: #565555;
  font-family: Mulish;
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%;
  margin: 0;
  flex: 0 0 auto;
  /* Always reserve exactly five lines; clamp longer text with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 7.525em; /* 5 lines × line-height 1.505 */
}
.service-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(1, 68, 76, 0.08);
}
.service-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(1, 68, 76, 0.06);
  color: var(--c4r-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.service-card__icon .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 1;
}
.service-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  background: #fff;
  color: var(--c4r-primary);
  border: 1px solid #dcdcdc;
  border-radius: 30px;
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}
.service-card__btn-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(1, 68, 76, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.service-card__btn:hover {
  background: var(--c4r-primary);
  color: #fff;
  border-color: var(--c4r-primary);
}
.service-card__btn:hover .service-card__btn-arrow {
  width: 24px;
  height: 24px;
  background: #fff;
  color: var(--c4r-primary);
}

/* Navigation arrows — siblings of .services__slider inside .services__viewport.
   Positioned OUTSIDE the cards (negative left/right) so they don't overlap. */
.services-swiper__prev,
.services-swiper__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--c4r-primary);
  box-shadow: 0 8px 22px rgba(1, 68, 76, 0.14);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.services-swiper__prev:hover,
.services-swiper__next:hover {
  background: var(--c4r-primary);
  color: var(--c4r-accent);
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 12px 26px rgba(1, 68, 76, 0.22);
}
/* Sit outside the cards on the left/right edge of the viewport */
.services-swiper__prev {
  left: -64px;
}
.services-swiper__next {
  right: -64px;
}
.services-swiper__prev.swiper-button-disabled,
.services-swiper__next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Scale the offset down on smaller viewports so the buttons stay on screen */
@media (max-width: 1300px) {
  .services-swiper__prev {
    left: -28px;
  }
  .services-swiper__next {
    right: -28px;
  }
}
@media (max-width: 980px) {
  .services-swiper__prev,
  .services-swiper__next {
    width: 42px;
    height: 42px;
  }
  .services-swiper__prev {
    left: -8px;
  }
  .services-swiper__next {
    right: -8px;
  }
}
@media (max-width: 600px) {
  .services__head {
    margin-bottom: 28px;
  }
  .services-swiper__prev,
  .services-swiper__next {
    width: 38px;
    height: 38px;
  }
  .services-swiper__prev {
    left: 4px;
  }
  .services-swiper__next {
    right: 4px;
  }
}

/* =========================================================
   Success Stories — split background (dark teal top, cream bottom)
   with cards that bridge both zones
   ========================================================= */
.stories {
  /* Hard-stop linear-gradient = sharp horizontal split.
       Top zone holds the section header; cards extend down into the cream zone. */
  background: linear-gradient(
    to bottom,
    var(--c4r-primary) 0%,
    var(--c4r-primary) 50%,
    #f6f6f6 50%,
    #f6f6f6 100%
  );
  color: #fff;
  padding: var(--c4r-section-py) 0;
  position: relative;
}
.stories__head {
  max-width: 720px;
  margin: 0 0 var(--c4r-content-gap);
}
.stories__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 16px;
  letter-spacing: 0.015em;
}
.stories__subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* Carousel container — viewport wraps swiper + nav buttons */
.stories__viewport {
  position: relative;
}
.stories__slider {
  position: relative;
  padding: 4px 4px 8px;
}
.stories__slider .swiper-wrapper {
  align-items: stretch;
}

/* Static grid fallback — when story count <= visible, skip Swiper and
   render as centred fixed-width cards so they don't stretch to fill the row. */
.stories-grid__row {
  display: grid;
  grid-template-columns: repeat(
    var(--c4r-stories-visible, 2),
    minmax(0, 460px)
  );
  justify-content: center;
  gap: 28px;
}
@media (max-width: 980px) {
  .stories-grid__row {
    grid-template-columns: repeat(2, minmax(0, 420px));
    gap: 20px;
  }
}
@media (max-width: 720px) {
  .stories-grid__row {
    grid-template-columns: minmax(0, 460px);
  }
}

/* Card — image sits on dark teal top half, body sits on cream bottom half.
   The card itself is transparent; the section's split background shows through. */
.story-card {
  width: 417.5px;
  max-width: 100%;
  padding: 12px 0px 12px 0px;
  display: flex;
  flex-direction: column;
  height: auto;
  text-decoration: none;
}
.story-card__media {
  position: relative;
  display: block;
  width: 417.5px;
  max-width: 100%;
  height: 356px;
  overflow: hidden;
  border-radius: 14px;
  background: var(--c4r-secondary);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22);
}
.story-card__media img {
  width: 100%;
  height: 356px;
  object-fit: cover;
  display: block;
}

/* Tag chips overlaid on the image, bottom-left — translucent dark teal */
.story-card__tags {
  position: absolute;
  left: 12px;
  bottom: 25px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  z-index: 2;
}
.story-card__tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: #f6f6f6;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.18);
  color: #2F2F2F;
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
}

/* Card body — sits on the section's cream lower half. Tight gaps to match Figma. */
.story-card__body {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 14px 0 4px;
}
.story-card__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 12px;
  color: #161C2D;
  font-family: Mulish;
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%;
  text-transform: capitalize;
  margin: 0;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(1, 68, 76, 0.12);
}
.story-card__title {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0;
}
.story-card__title a {
  color: var(--Dark-Teal, #01444C);
  font-family: "Noto Sans";
  font-size: 27px;
  font-style: normal;
  font-weight: 700;
  line-height: 120%;
  text-decoration: none;
  /* Always reserve exactly two lines; clamp longer titles with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.4em; /* 2 lines × line-height 1.2 */
}
.story-card__title a:hover {
  color: var(--c4r-primary);
}
.story-card__text {
  color: #161C2D;
  font-family: "Noto Sans";
  font-size: 17px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%;
  margin: 0;
  /* Always reserve exactly five lines; clamp longer text with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 7.525em; /* 5 lines × line-height 1.505 */
}
.story-card__link {
  align-self: flex-start;
  color: var(--Dark-Teal, #01444C);
  font-family: Mulish;
  font-size: 16px;
  font-style: normal;
  font-weight: 600;
  line-height: 145.5%; /* 29.1px */
  text-decoration: none;
  margin-top: 2px;
  transition: color 0.2s ease;
}
.story-card__link:hover {
  color: var(--c4r-secondary);
}

/* Navigation arrows — outside the cards (white-on-dark variant) */
.stories-swiper__prev,
.stories-swiper__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--c4r-primary);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}
.stories-swiper__prev:hover,
.stories-swiper__next:hover {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  transform: translateY(-50%) scale(1.06);
}
.stories-swiper__prev {
  left: -64px;
}
.stories-swiper__next {
  right: -64px;
}
.stories-swiper__prev.swiper-button-disabled,
.stories-swiper__next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 1300px) {
  .stories-swiper__prev {
    left: -28px;
  }
  .stories-swiper__next {
    right: -28px;
  }
}
@media (max-width: 980px) {
  .stories-swiper__prev,
  .stories-swiper__next {
    width: 42px;
    height: 42px;
  }
  .stories-swiper__prev {
    left: -8px;
  }
  .stories-swiper__next {
    right: -8px;
  }
}
@media (max-width: 600px) {
  .stories__head {
    margin-bottom: 28px;
  }
  .stories-swiper__prev,
  .stories-swiper__next {
    width: 38px;
    height: 38px;
  }
  .stories-swiper__prev {
    left: 4px;
  }
  .stories-swiper__next {
    right: 4px;
  }
}

/* =========================================================
   Our Products — banner with bg image + dark teal cards zone
   ========================================================= */
.products {
  position: relative;
  background: #01444c;
  color: #fff;
}

/* Top banner — bg image faded behind centered Good Times title */
.products__banner {
  position: relative;
  min-height: 220px;
  padding: clamp(48px, 6vw, 88px) 24px;
  background-color: #062b30;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.products__banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(1, 68, 76, 0.55) 0%,
    rgba(1, 68, 76, 0.85) 70%,
    var(--c4r-primary) 100%
  );
}
.products__title {
  position: relative;
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.05;
  color: #fff;
  margin: 0;
  text-align: center;
  letter-spacing: 0.015em;
  z-index: 1;
}

/* Cards zone — solid dark teal underneath */
.products__cards-zone {
  position: relative;
  padding: clamp(36px, 4vw, 56px) 0 var(--c4r-section-py);
  background: var(--c4r-primary);
}

.products__viewport {
  position: relative;
}
.products__slider {
  position: relative;
  padding: 4px 4px 8px;
}
.products__slider .swiper-wrapper {
  align-items: stretch;
}

/* Card */
.product-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 22px;
  border-radius: 16px;
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.06),
    rgba(255, 255, 255, 0.02)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: #fff;
  text-decoration: none;
  height: auto;
  min-height: 120px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    transform 0.15s ease;
}
.product-card:hover {
  background: linear-gradient(
    135deg,
    color-mix(in srgb, var(--c4r-accent) 10%, transparent),
    rgba(255, 255, 255, 0.05)
  );
  border-color: color-mix(in srgb, var(--c4r-accent) 35%, transparent);
}

/* Top-left small star/sparkle decoration */
.product-card__star {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 16px;
  height: 16px;
  color: color-mix(in srgb, var(--c4r-accent) 55%, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Hexagonal icon container */
.product-card__icon {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  background: color-mix(in srgb, var(--c4r-accent) 12%, transparent);
  color: var(--c4r-accent);
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.product-card__icon .dashicons {
  font-size: 28px;
  width: 28px;
  height: 28px;
  line-height: 1;
}

.product-card__content {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.product-card__title {
  color: var(--White-Color, #F2F2F2);
  font-family: Poppins;
  font-size: 36px;
  font-style: normal;
  font-weight: 900;
  line-height: normal;
  margin: 0;
}
.product-card__subtitle {
  color: var(--White-Color, #F2F2F2);
  font-family: Poppins;
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0;
}

/* Navigation arrows — outside the cards (lime accent variant on dark bg) */
.products-swiper__prev,
.products-swiper__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.products-swiper__prev:hover,
.products-swiper__next:hover {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  border-color: var(--c4r-accent);
  transform: translateY(-50%) scale(1.06);
}
.products-swiper__prev {
  left: -64px;
}
.products-swiper__next {
  right: -64px;
}
.products-swiper__prev.swiper-button-disabled,
.products-swiper__next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 1300px) {
  .products-swiper__prev {
    left: -28px;
  }
  .products-swiper__next {
    right: -28px;
  }
}
@media (max-width: 980px) {
  .products-swiper__prev {
    left: -8px;
  }
  .products-swiper__next {
    right: -8px;
  }
}
@media (max-width: 600px) {
  .products-swiper__prev,
  .products-swiper__next {
    width: 38px;
    height: 38px;
  }
  .products-swiper__prev {
    left: 4px;
  }
  .products-swiper__next {
    right: 4px;
  }
  .product-card__icon {
    width: 56px;
    height: 56px;
  }
  .product-card__title {
    font-size: 18px;
  }
}

/* =========================================================
   Latest News — dark teal section, header row + carousel
   ========================================================= */
.news {
  background: #0d4f55;
  color: #fff;
  padding: var(--c4r-section-py) 0;
  position: relative;
}
.news__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: var(--c4r-content-gap);
  flex-wrap: wrap;
}
.news__head-text {
  min-width: 0;
}
.news__title {
  color: #fff;
  font-family: "Good Times", sans-serif;
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 0 0 10px;
}
@media (max-width: 600px) {
  .news__title {
    font-size: 32px;
    letter-spacing: 1.4px;
  }
}
.news__subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
}
.news__cta {
  flex-shrink: 0;
}

/* Carousel */
.news__viewport {
  position: relative;
}
.news__slider {
  position: relative;
  padding: 4px 4px 8px;
}
.news__slider .swiper-wrapper {
  align-items: stretch;
}

/* Card — clean, no shadow. Just a subtle darker tint and rounded corners. */
.news-card {
  border-radius: 16px;
  border: 0.8px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(180deg, rgba(142, 192, 180, 0.05) 0%, rgba(31, 103, 112, 0.34) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: auto;
  box-shadow: none;
  transition: background 0.3s ease;
  color: #fff;
}
.news-card:hover {
  background: rgba(0, 0, 0, 0.2);
}

.news-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.news-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 16px 18px 0px;
  border-radius: 25px;
  transition: transform 0.5s ease;
}
.news-card:hover .news-card__media img {
  transform: scale(1.04);
}

.news-card__body {
  padding: 16px 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1 1 auto;
}
.news-card__cat {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Mulish", "Noto Sans", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: 0.04em;
  background: rgba(10, 91, 99, 0.46);
  border: 0.8px solid #8ec0b4;
  border-radius: 26843500px;
  padding: 4px 12px;
  margin-bottom: 4px;
}
.news-card__title {
  color: #f2f2f2;
  font-family: "Inter", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 27px; /* 150% */
  letter-spacing: 0.45px;
  margin: 0;
}
.news-card__title a {
  color: inherit;
  text-decoration: none;
}
.news-card__title a:hover {
  color: var(--c4r-accent);
}
.news-card__text {
  color: #99a1af;
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 22.75px; /* 162.5% */
  letter-spacing: 0.35px;
  margin: 0;
  flex: 1 1 auto;
}
.news-card__link {
  align-self: flex-start;
  color: rgba(255, 255, 255, 0.85);
  font-family: "Mulish", "Noto Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  transition:
    color 0.2s ease,
    gap 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 4px;
}
.news-card__link:hover {
  color: var(--c4r-accent);
  gap: 8px;
}

/* Navigation arrows — outside the cards (white-on-dark variant) */
.news-swiper__prev,
.news-swiper__next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease,
    transform 0.15s ease;
}
.news-swiper__prev:hover,
.news-swiper__next:hover {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  border-color: var(--c4r-accent);
  transform: translateY(-50%) scale(1.06);
}
.news-swiper__prev {
  left: -64px;
}
.news-swiper__next {
  right: -64px;
}
.news-swiper__prev.swiper-button-disabled,
.news-swiper__next.swiper-button-disabled {
  opacity: 0.35;
  pointer-events: none;
}

@media (max-width: 1300px) {
  .news-swiper__prev {
    left: -28px;
  }
  .news-swiper__next {
    right: -28px;
  }
}
@media (max-width: 980px) {
  .news__head {
    align-items: flex-start;
  }
  .news-swiper__prev {
    left: -8px;
  }
  .news-swiper__next {
    right: -8px;
  }
}
@media (max-width: 600px) {
  .news-swiper__prev,
  .news-swiper__next {
    width: 38px;
    height: 38px;
  }
  .news-swiper__prev {
    left: 4px;
  }
  .news-swiper__next {
    right: 4px;
  }
}

/* — News header on mobile — left-aligned title/subtitle/CTA — */
@media (max-width: 860px) {
  .news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .news__title {
    font-size: clamp(28px, 8vw, 38px);
    letter-spacing: 1.2px;
    line-height: 1.05;
    margin-bottom: 6px;
  }
  .news__subtitle {
    font-size: 13.5px;
    line-height: 1.5;
    max-width: 320px;
  }
  .news__cta {
    width: auto;
    align-self: flex-start;
    padding: 8px 8px 8px 22px;
    font-size: 13px;
  }
  .news__cta .btn__arrow-wrap {
    width: 30px;
    height: 30px;
  }
}

/* =========================================================
   ⚡ Site-wide responsive enhancement layer
   Unified breakpoints (≤1100, ≤860, ≤600, ≤420)
   Targets common patterns across all home page sections.
   ========================================================= */

/* — Tablet landscape (≤1100px) — */
@media (max-width: 1100px) {
  :root {
    --c4r-section-py: clamp(56px, 7vw, 88px);
    --c4r-section-py-sm: clamp(36px, 5vw, 56px);
    --c4r-content-gap: clamp(24px, 4vw, 40px);
  }
  .container {
    padding: 0 24px;
  }

  /* Header — tighten nav gap */
  .site-header__inner {
    gap: 16px;
  }
  .site-nav__menu {
    gap: 18px;
  }

  /* Section grids that should still be 2-col on tablet */
  .intro__grid,
  .about__grid,
  .cta__grid {
    gap: clamp(28px, 4vw, 48px);
  }

  /* Footer — 4 cols on tablet (Contact wraps under) */
  .site-footer__columns {
    grid-template-columns: repeat(4, 1fr);
  }
  .footer-col--contact {
    grid-column: span 4;
  }
}

/* — Tablet portrait (≤860px) — collapse most 2-col grids */
@media (max-width: 860px) {
  .intro__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .intro__tagline {
    font-size: clamp(28px, 8vw, 38px);
  }
  .intro__right {
    margin-top: 4px;
  }

  .about__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .about__media {
    max-width: 520px;
    margin: 0 auto;
  }

  .cta__grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .cta__form {
    max-width: 520px;
    margin: 0 auto;
  }

  .newsletter__grid {
    grid-template-columns: 1fr;
    gap: 18px;
    text-align: center;
  }
  .newsletter__heading {
    max-width: none;
  }
  .newsletter__form {
    max-width: none;
    justify-self: stretch;
  }

  .news__head {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .news__cta {
    align-self: flex-start;
  }

  .stories__head {
    text-align: left;
  }
}

/* — About: hide eyebrow + image collage on mobile — */
@media (max-width: 860px) {
  .about__eyebrow,
  .about__media,
  .about__media.reveal.is-visible {
    display: none;
  }
  .about__grid {
    grid-template-columns: 1fr;
  }
}

/* — Stories: drop the split background on mobile so single-column cards
     sit on a uniform dark teal, then flip text colors to white for contrast. */
@media (max-width: 860px) {
  .stories {
    background: var(--c4r-primary);
  }
  .story-card__title a {
    color: #fff;
  }
  .story-card__title a:hover {
    color: var(--c4r-accent);
  }
  .story-card__text {
    color: rgba(255, 255, 255, 0.72);
  }
  .story-card__meta {
    color: rgba(255, 255, 255, 0.65);
  }
  .story-card__link {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.5);
  }
  .story-card__link:hover {
    color: var(--c4r-accent);
    border-bottom-color: var(--c4r-accent);
  }
  .story-card {
    border-color: rgba(255, 255, 255, 0.08);
  }
}

/* — Mobile (≤600px) — single column, smaller type, tighter spacing */
@media (max-width: 600px) {
  :root {
    --c4r-section-py: clamp(44px, 9vw, 64px);
    --c4r-section-py-sm: clamp(28px, 6vw, 44px);
    --c4r-content-gap: clamp(20px, 5vw, 32px);
    --c4r-container-pad: 16px;
  }

  /* Headings shrink */
  .intro__tagline,
  .about__title,
  .services__title,
  .stories__title,
  .news__title,
  .products__title,
  .cta__title {
    font-size: clamp(22px, 7vw, 30px);
    line-height: 1.15;
  }

  /* Common section subtitles */
  .services__subtitle,
  .stories__subtitle,
  .news__subtitle,
  .cta__text,
  .about__text {
    font-size: 14px;
    line-height: 1.55;
  }

  /* Buttons — full width feels nicer on small screens */
  .btn--intro {
    padding: 10px 10px 10px 22px;
    font-size: 13px;
    gap: 12px;
  }
  .btn--intro .btn__arrow-wrap {
    width: 32px;
    height: 32px;
  }
  .intro__ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .intro__ctas .btn--intro {
    justify-content: space-between;
    width: 100%;
  }

  /* Footer columns — 2 cols, contact full width */
  .site-footer__columns {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }
  .footer-col--contact {
    grid-column: span 2;
  }
  .site-footer__bottom-row {
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
  }

  /* CTA form padding */
  .cta__form {
    padding: 22px 18px;
  }

  /* Newsletter form on mobile — keep input + button stacked-friendly */
  .newsletter__form {
    flex-wrap: wrap;
    padding: 8px;
  }
  .newsletter__btn {
    width: 100%;
    justify-content: center;
  }

  /* Story / news / service / product card tighter padding */
  .story-card__body,
  .news-card__body {
    padding: 12px;
  }
  .service-card {
    padding: 20px 18px 18px;
    min-height: 240px;
  }

  /* About bullets a touch smaller */
  .about__bullet {
    font-size: 13.5px;
  }

  /* Trusted-by heading shrinks more */
  .trusted__heading {
    font-size: 12px;
    letter-spacing: 0.08em;
  }
}

/* — Small mobile (≤420px) — last-mile tweaks */
@media (max-width: 420px) {
  .container {
    padding: 0 14px;
  }

  /* Single-column footer */
  .site-footer__columns {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .footer-col--contact {
    grid-column: span 1;
  }

  /* CTA form fields tighter */
  .cta__form input,
  .cta__form select,
  .cta__form textarea {
    padding: 10px 12px;
    font-size: 13.5px;
  }

  /* Carousel arrows smaller and inside the cards on tiny screens */
  .services-swiper__prev,
  .services-swiper__next,
  .stories-swiper__prev,
  .stories-swiper__next,
  .products-swiper__prev,
  .products-swiper__next,
  .news-swiper__prev,
  .news-swiper__next {
    width: 34px;
    height: 34px;
  }
}

/* — Touch-friendly tap targets (any pointer-coarse device) — */
@media (pointer: coarse) {
  .login-pill,
  .btn,
  .btn--intro,
  .newsletter__btn,
  .cta__submit,
  .service-card__btn,
  .story-card__link,
  .news-card__link {
    min-height: 44px;
  }

  .site-footer__social a {
    width: 40px;
    height: 40px;
  }
}

/* — Wide screens (≥1440px) — let major sections breathe a bit more — */
@media (min-width: 1440px) {
  :root {
    --c4r-section-py: clamp(96px, 8vw, 140px);
    --c4r-section-py-sm: clamp(56px, 5vw, 88px);
  }
}

/* =========================================================
   ⚡ FINAL MOBILE POLISH (≤860px) — site-wide consistency
   Addresses: heading hierarchy, card padding, form rhythm,
   trusted-by sizing, footer compaction.
   ========================================================= */

@media (max-width: 860px) {
  /* Bigger, bolder section titles for impact on small screens */
  .about__title,
  .services__title,
  .stories__title,
  .products__title,
  .cta__title {
    font-size: clamp(28px, 8vw, 36px);
    line-height: 1.1;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
  }
  .news__title {
    font-size: clamp(28px, 8.5vw, 38px);
    line-height: 1.05;
  }

  /* Section subtitles consistency */
  .services__subtitle,
  .stories__subtitle,
  .news__subtitle {
    font-size: 14px;
    line-height: 1.5;
    max-width: 320px;
  }

  /* Section heads center-aligned where they look natural */
  .services__head {
    text-align: left;
    max-width: none;
  }
  .services__eyebrow {
    font-size: 10.5px;
    padding: 5px 12px;
  }

  /* Trusted-by — give the strip more presence on mobile */
  .trusted__heading {
    font-size: 13px;
    margin-bottom: 22px;
  }
  .trusted__item {
    height: 44px;
    min-width: 70px;
  }

  /* About — compact spacing now that media is hidden */
  .about__content {
    gap: 14px;
  }
  .about__bullets {
    gap: 10px;
    margin: 14px 0 22px;
  }
  .about__bullet {
    font-size: 14px;
    gap: 10px;
  }
  .about__bullet-icon {
    width: 22px;
    height: 22px;
  }
  .about__btn {
    font-size: 13px;
  }

  /* Card carousels — make slides feel comfortable */
  .service-card,
  .story-card,
  .news-card,
  .product-card {
    border-radius: 14px;
  }

  /* Service card body */
  .service-card {
    padding: 20px 18px;
    min-height: auto;
  }
  .service-card__title {
    font-size: 17px;
  }
  .service-card__text {
    font-size: 13.5px;
  }

  /* Product card */
  .product-card {
    padding: 18px 16px;
    min-height: 100px;
    gap: 14px;
  }
  .product-card__icon {
    width: 56px;
    height: 56px;
  }
  .product-card__title {
    font-size: 18px;
  }

  /* CTA section */
  .cta__icon {
    width: 38px;
    height: 38px;
    margin-bottom: 16px;
  }
  .cta__map iframe {
    height: 180px;
  }
  .cta__contact li {
    font-size: 13.5px;
  }
  .cta__form {
    padding: 22px 18px;
    gap: 14px;
    border-radius: 16px;
  }
  .cta__label {
    font-size: 12.5px;
  }
  .cta__form input,
  .cta__form select,
  .cta__form textarea {
    padding: 11px 13px;
    font-size: 14px;
    border-radius: 9px;
  }
  .cta__submit {
    padding: 13px 22px;
    font-size: 14px;
  }

  /* Newsletter on mobile — clean stacked variant */
  .newsletter__form {
    flex-direction: column;
    align-items: stretch;
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: 0;
    gap: 10px;
  }
  .newsletter__form input[type="email"] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 999px;
    padding: 12px 18px;
  }
  .newsletter__btn {
    justify-content: center;
    padding: 12px 22px;
  }

  /* Footer — compact and balanced */
  .site-footer__columns {
    gap: 28px 20px;
    padding-bottom: 32px;
  }
  .footer-col__title {
    font-size: 13px;
    margin-bottom: 12px;
  }
  .footer-col__list a {
    font-size: 13px;
  }
  .site-footer__bottom-row {
    padding: 6px 0;
  }
  .site-footer__copy {
    font-size: 12.5px;
    text-align: center;
  }

  /* Carousel arrows — slightly bigger touch targets and never too close to edge */
  .services-swiper__prev,
  .services-swiper__next,
  .stories-swiper__prev,
  .stories-swiper__next,
  .products-swiper__prev,
  .products-swiper__next,
  .news-swiper__prev,
  .news-swiper__next {
    width: 40px;
    height: 40px;
  }

  /* Hide noisy section decorations on mobile so content reads cleaner */
  .intro::before,
  .services::after {
    display: none;
  }
}

/* — Smallest mobile (≤420px) — last-mile compaction — */
@media (max-width: 420px) {
  .about__title,
  .services__title,
  .stories__title,
  .products__title,
  .cta__title {
    font-size: clamp(24px, 7.5vw, 30px);
  }
  .news__title {
    font-size: clamp(26px, 8vw, 32px);
  }

  .service-card__title {
    font-size: 16px;
  }
  .product-card__title {
    font-size: 17px;
  }
  .news-card__title {
    font-size: 17px;
  }

  .cta__form {
    padding: 20px 14px;
  }
}

/* =========================================================
   About Page — Hero / Mission / Vision / Values
   ========================================================= */
.aboutpg-hero {
  background:
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 60%),
    var(--c4r-primary);
  color: #fff;
  padding: clamp(56px, 6vw, 96px) 0 var(--c4r-section-py);
  position: relative;
  overflow: hidden;
}
.aboutpg-hero__inner {
  position: relative;
}

.aboutpg-hero__eyebrow {
  display: block;
  color: #8EC0B4;
  text-align: center;
  font-family: Inter;
  font-size: 17px;
  font-style: normal;
  font-weight: 500;
  line-height: 30px;
  margin: 0 auto 28px;
}

.aboutpg-hero__top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.aboutpg-hero__media {
  position: relative;
  width: fit-content;
  max-width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(
      60% 60% at 50% 50%,
      rgba(0, 207, 255, 0.18) 0%,
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(180deg, #052e33 0%, #022026 100%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.aboutpg-hero__media img {
  width: 656px;
  height: 405px;
  object-fit: cover;
  display: block;
}
.aboutpg-hero__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aboutpg-hero__glow {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 225, 255, 0.32) 0%,
    rgba(0, 225, 255, 0) 65%
  );
  filter: blur(8px);
}
.aboutpg-hero__phone {
  position: relative;
  width: 36%;
  aspect-ratio: 0.5 / 1;
  background: linear-gradient(160deg, #0b3d44 0%, #02151a 100%);
  border: 1.5px solid rgba(255, 255, 255, 0.18);
  border-radius: 24px;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
}
.aboutpg-hero__phone-screen {
  font-family: "Good Times", sans-serif;
  font-size: clamp(13px, 1.6vw, 20px);
  color: var(--c4r-accent);
  letter-spacing: 0.06em;
  text-align: center;
  line-height: 1.1;
}

.aboutpg-hero__copy {
  padding-left: 8px;
}
.aboutpg-hero__title {
  color: #FFF;
  font-family: "Good Times";
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%;
  text-transform: capitalize;
  margin: 0 0 22px;
  letter-spacing: 0.015em;
}
.aboutpg-hero__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 560px;
}
.c4r-rt-p {
  color: #F2F2F2;
  font-family: Mulish;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%;
}
.c4r-rt-bullet-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.c4r-rt-bullet-text {
  color: #FFF;
  font-family: Mulish;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%;
}
.aboutpg-hero__desc .c4r-rt-p {
  margin: 0 0 0.75em;
}
.aboutpg-hero__desc .c4r-rt-p:last-child {
  margin-bottom: 0;
}
.aboutpg-hero__desc .c4r-rt-list {
  list-style: none;
  padding: 0;
  margin: 0.6em 0 0;
  display: grid;
  gap: 10px;
}
.aboutpg-hero__desc .c4r-rt-list:last-child {
  margin-bottom: 0;
}
.aboutpg-hero__desc .c4r-rt-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.aboutpg-hero__desc .c4r-rt-bullet-icon,
.aboutpg-hero__bullets-desc .c4r-rt-bullet-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

.aboutpg-hero__divider {
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 30%,
    rgba(255, 255, 255, 0.15) 70%,
    transparent 100%
  );
  margin: clamp(36px, 5vw, 64px) 0 clamp(28px, 4vw, 48px);
}

.aboutpg-hero__bottom {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.aboutpg-hero__gc {
  width: fit-content;
  max-width: 100%;
  border-radius: 22px;
  overflow: hidden;
  background:
    radial-gradient(
      60% 80% at 30% 50%,
      rgba(0, 207, 255, 0.18) 0%,
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(180deg, #052e33 0%, #022026 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
}
.aboutpg-hero__gc img {
  width: 656px;
  height: 214px;
  object-fit: cover;
  display: block;
}
.aboutpg-hero__gc-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.aboutpg-hero__gc-tag {
  font-family: "Good Times", sans-serif;
  font-size: clamp(20px, 3vw, 36px);
  color: #fff;
  line-height: 1.05;
  letter-spacing: 0.04em;
  text-align: center;
}
.aboutpg-hero__gc-tag .c4r-indent {
  padding-left: 1.4em;
  display: inline-block;
}

.aboutpg-hero__bullets-col {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.aboutpg-hero__bullets-desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  max-width: 560px;
}
.aboutpg-hero__bullets-desc .c4r-rt-p {
  margin: 0 0 0.6em;
}
.aboutpg-hero__bullets-desc .c4r-rt-p:last-child {
  margin-bottom: 0;
}
.aboutpg-hero__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.aboutpg-hero__bullet {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  font-family: "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.85);
}
.aboutpg-hero__bullet-icon {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c4r-accent);
  margin-top: 9px;
}

/* — Mission / Vision shared layout — */
.aboutpg-mv {
  background: var(--c4r-primary);
  color: #fff;
  padding: var(--c4r-section-py) 0;
  position: relative;
}
.aboutpg-mission {
  background: rgba(142, 192, 180, 0.26);
}
/* keep the dark-teal stack continuous between hero/mission/vision/values */
.aboutpg-hero + .aboutpg-mv,
.aboutpg-mv + .aboutpg-mv,
.aboutpg-mv + .aboutpg-values,
.aboutpg-hero + .aboutpg-values {
  margin-top: 0;
}

.aboutpg-vision .aboutpg-mv__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  color: #fff;
  text-align: center;
  letter-spacing: 0.015em;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
}
.aboutpg-mv__title {
  color: #FFF;
  font-family: "Good Times";
  font-size: 44px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: 0.88px;
  text-decoration-style: solid;
  text-decoration-skip-ink: none;
  text-decoration-thickness: auto;
  text-underline-offset: auto;
  text-underline-position: from-font;
  margin: 0;
  text-align: left;
}
.aboutpg-mv__title--top {
  text-align: center;
  width: 100%;
  max-width: var(--c4r-container);
  margin: 0 auto clamp(32px, 4vw, 56px);
  padding: 0 var(--c4r-container-pad);
}

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

.aboutpg-mv__media {
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 1.4 / 1;
  background:
    radial-gradient(
      50% 70% at 30% 50%,
      rgba(0, 207, 255, 0.16) 0%,
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(180deg, #052e33 0%, #021a1f 100%);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  position: relative;
}
/* Split layout — two side-by-side images replacing the single tile.
   The wrapper drops its own background + aspect ratio so the inner split
   grid can size itself based on the two image tiles. */
.aboutpg-mv__media--split {
  background: transparent;
  box-shadow: none;
  aspect-ratio: auto;
  border-radius: 0;
  overflow: visible;
}
.aboutpg-mv__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.aboutpg-mv__split-img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1 / 1.05;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32);
  display: block;
}
.aboutpg-mv__media img {
  width: 317px;
  height: 324px;
  aspect-ratio: 136/139;
  border-radius: 25px;
  object-fit: cover;
  display: block;
}
.aboutpg-mv__media-placeholder {
  position: relative;
  width: 100%;
  height: 100%;
}
.aboutpg-mv__glow {
  position: absolute;
  width: 70%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(0, 225, 255, 0.4) 0%,
    rgba(0, 225, 255, 0) 65%
  );
  filter: blur(6px);
}
.aboutpg-mv__glow--warm {
  background: radial-gradient(
    circle,
    rgba(255, 170, 80, 0.45) 0%,
    rgba(255, 170, 80, 0) 65%
  );
}

.aboutpg-mv__copy {
  max-width: 560px;
}
.aboutpg-mv__subtitle {
  color: #8EC0B4;
  font-family: "Noto Sans";
  font-size: 40px;
  font-style: normal;
  font-weight: 600;
  line-height: 65px; /* 162.5% */
  letter-spacing: 0.8px;
  margin: 0 0 14px;
}
.aboutpg-mv__text {
  color: #D7D9D9;
  /* pargraph2 */
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 150% */
  margin: 0;
}
.aboutpg-mv__text .c4r-rt-p {
  margin: 0 0 0.85em;
  color: #D7D9D9;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 30px; /* 150% */
}
.aboutpg-mv__text .c4r-rt-p:last-child {
  margin-bottom: 0;
}
.aboutpg-mv__text .c4r-rt-list {
  list-style: none;
  padding: 0;
  margin: 0.4em 0 0.85em;
  display: grid;
  gap: 10px;
}
.aboutpg-mv__text .c4r-rt-list:last-child {
  margin-bottom: 0;
}
.aboutpg-mv__text .c4r-rt-bullet {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.aboutpg-mv__text .c4r-rt-bullet-icon {
  flex: 0 0 auto;
  width: 25px;
  height: 25px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 3px;
}

/* — Values — */
.aboutpg-values {
  background: var(--c4r-primary);
  color: #fff;
  padding: var(--c4r-section-py) 0 calc(var(--c4r-section-py) + 8px);
}
.aboutpg-values__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  color: #fff;
  margin: 0 auto var(--c4r-content-gap);
  text-align: center;
  letter-spacing: 0.015em;
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
}
.aboutpg-values__title-wrap,
.aboutpg-values .container > .aboutpg-values__title {
  /* keep the underlined title centered relative to its container */
}
.aboutpg-values .container {
  text-align: center;
}
/* 6-col grid → each card spans 2 cols. Row 1 = cards 1-3 (cols 1-2, 3-4, 5-6).
   Row 2 = cards 4-5 centered (cols 2-3, 4-5). */
.aboutpg-values__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  text-align: left;
  margin-top: 8px;
}
.aboutpg-values__grid > .value-card { grid-column: span 2; }
.aboutpg-values__grid > .value-card:nth-child(4) { grid-column: 2 / span 2; }
.aboutpg-values__grid > .value-card:nth-child(5) { grid-column: 4 / span 2; }
.value-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 22px 20px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  transition:
    border-color 0.25s ease,
    background 0.25s ease;
}
.value-card:hover {
  border-color: rgba(178, 167, 230, 0.55);
  background: rgba(255, 255, 255, 0.07);
}
.value-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(178, 167, 230, 0.18);
  color: #B2A7E6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.value-card__icon .dashicons {
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.value-card__icon .c4r-icon--img {
  max-width: 26px;
  max-height: 26px;
}
.value-card__icon .c4r-icon--emoji {
  font-size: 24px;
}

.value-card__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.value-card__title {
  color: #C0C5D7;
  font-family: Inter;
  font-size: 20px;
  font-style: normal;
  font-weight: 900;
  line-height: 30px; /* 150% */
  margin: 0;
}
.value-card__text {
  color: #D9D9D9;
  /* p-02 */
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 24px; /* 150% */
  margin: 0;
}

/* About-page CTA — pinned to primary dark teal so it matches the rest of the page */
/* CTA background inherits from .cta — no override needed (matches home page). */

/* =========================================================
   About Page — Responsive
   Breakpoints follow the rest of the site: 1100 / 860 / 600 / 480 / 420.
   ========================================================= */

/* — Tablet landscape (≤1100) — tighter gaps, slightly smaller media */
@media (max-width: 1100px) {
  .aboutpg-hero {
    padding: clamp(48px, 6vw, 80px) 0 var(--c4r-section-py);
  }
  .aboutpg-hero__top,
  .aboutpg-hero__bottom,
  .aboutpg-mv__grid {
    gap: clamp(28px, 4vw, 48px);
  }
  .aboutpg-mv__media {
    aspect-ratio: 1.35 / 1;
  }
  .aboutpg-mv__copy {
    max-width: 480px;
  }
  .aboutpg-values__grid {
    gap: 18px;
  }
}

/* — Tablet portrait (≤860) — collapse 2-col grids; keep values 2-col */
@media (max-width: 860px) {
  .aboutpg-hero {
    padding: clamp(40px, 8vw, 64px) 0 var(--c4r-section-py);
  }

  .aboutpg-hero__top,
  .aboutpg-hero__bottom {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .aboutpg-hero__copy {
    padding-left: 0;
    text-align: center;
  }
  .aboutpg-hero__desc {
    margin-left: auto;
    margin-right: auto;
  }
  .aboutpg-hero__media {
    max-width: 480px;
    margin: 0 auto;
    aspect-ratio: 1.4 / 1;
  }
  .aboutpg-hero__gc {
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 16 / 7;
  }
  .aboutpg-hero__bullets {
    max-width: 520px;
    margin: 0 auto;
  }
  .aboutpg-hero__phone {
    width: 30%;
  }

  .aboutpg-mv__grid,
  .aboutpg-mv__grid--reverse {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .aboutpg-mv__copy {
    max-width: none;
  }
  .aboutpg-mv__media {
    max-width: 520px;
    margin: 0 auto;
    aspect-ratio: 1.5 / 1;
  }
  /* Reset reverse so the image always stays first on mobile (matches Mission rhythm) */
  .aboutpg-mv__grid--reverse .aboutpg-mv__copy {
    order: 2;
  }
  .aboutpg-mv__grid--reverse .aboutpg-mv__media {
    order: 1;
  }

  .aboutpg-values__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
  /* Reset 6-col positioning so the 2-col layout works */
  .aboutpg-values__grid > .value-card,
  .aboutpg-values__grid > .value-card:nth-child(4),
  .aboutpg-values__grid > .value-card:nth-child(5) {
    grid-column: auto;
  }
  /* When 5 items in a 2-col grid, the 5th is alone on row 3 — span both cols */
  .aboutpg-values__grid > .value-card:nth-child(5):last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
  }
}

/* — Mobile (≤600) — single-column values, smaller type, tighter padding */
@media (max-width: 600px) {
  .aboutpg-hero__eyebrow {
    margin-bottom: 18px;
    font-size: 12px;
  }
  .aboutpg-hero__title,
  .aboutpg-mv__title,
  .aboutpg-values__title {
    font-size: clamp(22px, 7.5vw, 30px);
    line-height: 1.15;
  }
  .aboutpg-mv__title,
  .aboutpg-values__title {
    text-align: center;
  }
  .aboutpg-hero__desc,
  .aboutpg-mv__text {
    font-size: 14.5px;
    line-height: 1.6;
  }
  .aboutpg-hero__bullet {
    font-size: 14px;
    gap: 10px;
  }
  .aboutpg-hero__bullet-icon {
    width: 22px;
    height: 22px;
  }

  .aboutpg-hero__divider {
    margin: 28px 0 24px;
  }

  .aboutpg-hero__media {
    aspect-ratio: 1.2 / 1;
    max-width: 360px;
  }
  .aboutpg-hero__phone {
    width: 38%;
  }
  .aboutpg-hero__phone-screen {
    font-size: 12px;
  }
  .aboutpg-hero__gc {
    aspect-ratio: 16 / 8;
    max-width: 420px;
  }
  .aboutpg-hero__gc-tag {
    font-size: clamp(20px, 7vw, 28px);
  }
  .aboutpg-mv__media {
    max-width: 420px;
    aspect-ratio: 1.5 / 1;
  }
  .aboutpg-mv__subtitle {
    font-size: clamp(18px, 5.5vw, 22px);
    text-align: center;
  }

  .aboutpg-values__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .aboutpg-values__grid > .value-card,
  .aboutpg-values__grid > .value-card:nth-child(4),
  .aboutpg-values__grid > .value-card:nth-child(5),
  .aboutpg-values__grid > .value-card:nth-child(5):last-child {
    grid-column: auto;
    max-width: none;
    margin: 0;
  }
  .value-card {
    padding: 20px 18px;
  }
  .value-card__title {
    font-size: 17px;
  }
  .value-card__text {
    font-size: 13.5px;
  }
  .value-card__icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
  }
}

/* — Small mobile (≤480) — last-mile compaction */
@media (max-width: 480px) {
  .aboutpg-hero {
    padding: 36px 0 var(--c4r-section-py);
  }
  .aboutpg-hero__media {
    max-width: 320px;
    aspect-ratio: 1.15 / 1;
  }
  .aboutpg-hero__gc {
    aspect-ratio: 16 / 9;
    max-width: 360px;
  }
  .aboutpg-hero__bullets {
    gap: 12px;
  }
  .aboutpg-mv__media {
    max-width: 360px;
    aspect-ratio: 1.4 / 1;
  }
}

/* — Tiny phones (≤420) — */
@media (max-width: 420px) {
  .aboutpg-hero__title,
  .aboutpg-mv__title,
  .aboutpg-values__title {
    font-size: clamp(20px, 8vw, 26px);
  }
  .aboutpg-hero__media {
    max-width: 280px;
  }
  .value-card {
    padding: 18px 16px;
  }
}

/* =========================================================
   Services Page — /services/ archive
   Hero (dark teal) + 3-col card grid (cream)
   ========================================================= */
.servicespg-hero {
  background:
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 60%),
    var(--c4r-primary);
  color: #fff;
  padding: clamp(64px, 7vw, 112px) 0 clamp(56px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}
.servicespg-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.servicespg-hero__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 22px;
  letter-spacing: 0.015em;
}
.servicespg-hero__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
  max-width: 540px;
}

/* Right side — cloud image inside thin teal-bordered frame */
.servicespg-hero__media-wrap {
  display: flex;
  justify-content: flex-end;
}
.servicespg-hero__media-frame {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1.05 / 1;
  padding: 14px;
}
.servicespg-hero__media {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.servicespg-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.servicespg-hero__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.servicespg-hero__cloud {
  position: relative;
  width: 60%;
  height: 38%;
  background:
    radial-gradient(
      ellipse at 30% 60%,
      rgba(180, 210, 220, 0.95) 0%,
      rgba(180, 210, 220, 0) 60%
    ),
    radial-gradient(
      ellipse at 70% 50%,
      rgba(140, 180, 200, 0.85) 0%,
      rgba(140, 180, 200, 0) 60%
    ),
    radial-gradient(
      ellipse at 50% 70%,
      rgba(200, 220, 230, 0.95) 0%,
      rgba(200, 220, 230, 0) 60%
    );
  filter: blur(2px) drop-shadow(0 12px 30px rgba(0, 0, 0, 0.4));
  border-radius: 50%;
}
.servicespg-hero__cloud--two {
  position: absolute;
  width: 30%;
  height: 22%;
  top: 30%;
  right: 18%;
  opacity: 0.7;
}

/* — Grid (cream bg) — */
.servicespg-grid {
  background: var(--c4r-bg);
  padding: var(--c4r-section-py) 0;
}
.servicespg-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* — Card — */
.servicespg-card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  backdrop-filter: blur(10.8px);
  -webkit-backdrop-filter: blur(10.8px);
  padding: 26px 24px 22px;
  min-height: 280px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease;
}
/* Hover — translucent mint wash (no movement, just a recolor) */
.servicespg-card:hover {
  background: rgba(142, 192, 180, 0.39);
  border: 1px solid #dcdcdc;
  backdrop-filter: blur(10.8px);
  -webkit-backdrop-filter: blur(10.8px);
}

.servicespg-card__title {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--c4r-primary);
  margin: 0 0 4px;
  letter-spacing: 0.005em;
}
.servicespg-card__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7c7e;
  margin: 0 0 4px;
  /* Always reserve exactly five lines; clamp longer text with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 7.75em; /* 5 lines × line-height 1.55 */
}

.servicespg-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
}
.servicespg-card__bullets li {
  position: relative;
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7c7e;
  padding-left: 16px;
}
.servicespg-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c4r-primary);
  opacity: 0.55;
}
.servicespg-card:hover .servicespg-card__bullets li {
  color: #4d6062;
}
.servicespg-card:hover .servicespg-card__bullets li::before {
  opacity: 0.85;
}

.servicespg-card__text {
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.6;
  color: #6b7c7e;
  margin: 0;
  flex: 1 1 auto;
}

/* — Card footer (icon + Learn More) — */
.servicespg-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
  padding-top: 12px;
}
.servicespg-card__icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(1, 68, 76, 0.06);
  color: var(--c4r-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.servicespg-card:hover .servicespg-card__icon {
  background: rgba(255, 255, 255, 0.6);
}
.servicespg-card__icon .dashicons {
  font-size: 18px;
  width: 18px;
  height: 18px;
  line-height: 18px;
}
.servicespg-card__icon .c4r-icon--img {
  max-width: 20px;
  max-height: 20px;
}
.servicespg-card__icon .c4r-icon--emoji {
  font-size: 18px;
}

/* Default state — outlined white pill with small arrow chip */
.servicespg-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 30px;
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c4r-primary);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.servicespg-card__btn-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(1, 68, 76, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

/* Button hover (only when hovering the button itself, not the card) →
   filled dark-teal pill with white arrow chip */
.servicespg-card__btn:hover {
  background: var(--c4r-primary);
  color: #fff;
  border-color: var(--c4r-primary);
}
.servicespg-card__btn:hover .servicespg-card__btn-arrow {
  width: 24px;
  height: 24px;
  background: #fff;
  color: var(--c4r-primary);
}

/* CTA section pinned to dark teal on /services/ to match visual rhythm */
/* CTA background inherits from .cta — no override needed (matches home page). */

/* — Responsive — */
@media (max-width: 1100px) {
  .servicespg-grid__list {
    gap: 18px;
  }
  .servicespg-hero__inner {
    gap: clamp(28px, 4vw, 48px);
  }
  .servicespg-hero__media-frame {
    max-width: 400px;
  }
}
@media (max-width: 860px) {
  .servicespg-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .servicespg-hero__desc {
    margin-left: auto;
    margin-right: auto;
  }
  .servicespg-hero__media-wrap {
    justify-content: center;
  }
  .servicespg-hero__media-frame {
    max-width: 360px;
  }

  .servicespg-grid__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .servicespg-hero__title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .servicespg-hero__desc {
    font-size: 15px;
  }
  .servicespg-hero__media-frame {
    max-width: 300px;
    padding: 10px;
  }

  .servicespg-grid__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .servicespg-card {
    padding: 22px 20px 20px;
    min-height: 0;
  }
  .servicespg-card__title {
    font-size: 18px;
  }
}
@media (max-width: 420px) {
  .servicespg-hero__title {
    font-size: clamp(24px, 9vw, 32px);
  }
  .servicespg-card__btn {
    padding: 9px 12px;
    font-size: 13px;
  }
}

/* =========================================================
   Service Details — single-service.php
   Hero / Challenges / Process / Approach / Technologies
   ========================================================= */

/* — HERO — full viewport on first screen (flush against Challenges).
   Content sits near the TOP of the hero, not centered, so the title and
   illustration anchor to the upper portion of the viewport. */
.servicedt-hero {
  background:
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 60%),
    var(--c4r-primary);
  color: #fff;
  min-height: 100vh;
  min-height: 100svh;
  padding: clamp(48px, 7vw, 110px) 0 clamp(36px, 4vw, 60px);
  display: flex;
  align-items: flex-start;
  position: relative;
  overflow: hidden;
}
.servicedt-hero > .container {
  width: 100%;
}
.servicedt-hero__inner {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.servicedt-hero__copy {
  text-align: left;
}
.servicedt-hero__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 64px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.servicedt-hero__btn {
  display: inline-flex;
}

/* Right-side illustration placeholder — concentric mint orbits with a glow core */
.servicedt-hero__media {
  position: relative;
  aspect-ratio: 1.1 / 1;
  max-width: 380px;
  margin-left: auto;
  border-radius: 18px;
  background:
    radial-gradient(
      60% 70% at 60% 50%,
      rgba(0, 225, 255, 0.1) 0%,
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(180deg, #052e33 0%, #021a1f 100%);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.servicedt-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.servicedt-hero__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.servicedt-hero__orbit,
.servicedt-hero__core,
.servicedt-hero__person {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
.servicedt-hero__orbit {
  width: 76%;
  aspect-ratio: 1;
  border: 1px dashed rgba(142, 192, 180, 0.45);
}
.servicedt-hero__orbit--mid {
  width: 54%;
  aspect-ratio: 1;
  border: 1px dashed rgba(142, 192, 180, 0.6);
}
.servicedt-hero__orbit--in {
  width: 32%;
  aspect-ratio: 1;
  border: 1px dashed rgba(142, 192, 180, 0.75);
}
.servicedt-hero__core {
  width: 16%;
  aspect-ratio: 1;
  background: radial-gradient(
    circle,
    rgba(255, 180, 80, 1) 0%,
    rgba(255, 140, 40, 0.85) 45%,
    rgba(255, 80, 40, 0) 100%
  );
  filter: blur(0.5px);
  box-shadow: 0 0 60px rgba(255, 160, 60, 0.55);
}
/* Tiny "satellite" person silhouette to the bottom-right edge of the orbits */
.servicedt-hero__person {
  width: 22px;
  height: 28px;
  top: 78%;
  left: 78%;
  transform: translate(-50%, -50%);
  border-radius: 0;
  background:
    radial-gradient(
      circle at 50% 22%,
      var(--c4r-accent) 0 6px,
      transparent 7px
    ),
    linear-gradient(to bottom, transparent 0 35%, var(--c4r-accent) 36% 100%);
  -webkit-mask:
    radial-gradient(circle at 50% 22%, black 6px, transparent 7px) top / 100%
      35% no-repeat,
    linear-gradient(black, black) bottom / 60% 65% no-repeat;
  mask:
    radial-gradient(circle at 50% 22%, black 6px, transparent 7px) top / 100%
      35% no-repeat,
    linear-gradient(black, black) bottom / 60% 65% no-repeat;
  background: var(--c4r-accent);
  opacity: 0.85;
  box-shadow: 0 0 20px rgba(142, 192, 180, 0.4);
}

/* — BUSINESS CHALLENGES — fixed-height flex-centered block per the Figma */
.servicedt-challenges {
  display: flex;
  height: 525.6px;
  padding: 0 32px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  align-self: stretch;
  background: #256468;
  color: #fff;
}
.servicedt-challenges__grid {
  width: 100%;
  max-width: var(--c4r-container);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: center;
}
/* Text block — no card chrome (just flows on the dark teal) */
.servicedt-challenges__card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.servicedt-challenges__title {
  color: rgba(217, 227, 228, 0.94);
  font-family: "Good Times", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 400;
  line-height: 40px;
  letter-spacing: -1px;
  margin: 0 0 16px;
}
.servicedt-challenges__text {
  color: #f2f2f2;
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 32.5px;
  margin: 0 0 24px;
}
.servicedt-challenges__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.servicedt-challenges__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 26px;
}
.servicedt-challenges__check {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.servicedt-challenges__media {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  min-height: 240px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.servicedt-challenges__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.servicedt-challenges__media-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}
.servicedt-challenges__warn {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(255, 200, 80, 0.18);
  color: #c98c00;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* — OUR PROCESS — cream bg, centered head + 3-up card grid */
.servicedt-process {
  background: var(--c4r-bg);
  padding: clamp(64px, 7vw, 104px) 0;
}
.servicedt-process__head {
  text-align: center;
  max-width: 720px;
  margin: 0 auto clamp(28px, 4vw, 48px);
}
.servicedt-process__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1.05;
  color: var(--c4r-primary);
  margin: 0 0 10px;
  letter-spacing: 0.015em;
}
.servicedt-process__subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7c7e;
  margin: 0;
}
.servicedt-process__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.servicedt-step {
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 14px;
  padding: 22px 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 130px;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.servicedt-step:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(1, 68, 76, 0.08);
  border-color: rgba(1, 68, 76, 0.12);
}
.servicedt-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--c4r-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
}
.servicedt-step__title {
  font-family: "Manrope", sans-serif;
  font-size: 15.5px;
  font-weight: 700;
  color: var(--c4r-primary);
  margin: 0;
}
.servicedt-step__text {
  font-family: "Noto Sans", sans-serif;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6b7c7e;
  margin: 0;
}

/* — OUR APPROACH — */
.servicedt-approach {
  background: var(--c4r-primary);
  padding: clamp(64px, 7vw, 104px) 0;
  color: #fff;
}
.servicedt-approach__grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: stretch;
}
.servicedt-approach__media {
  border-radius: 16px;
  overflow: hidden;
  aspect-ratio: 1.05 / 1;
  background:
    radial-gradient(
      60% 70% at 50% 50%,
      rgba(0, 207, 255, 0.16) 0%,
      rgba(0, 0, 0, 0) 70%
    ),
    linear-gradient(180deg, #052e33 0%, #021a1f 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
}
.servicedt-approach__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.servicedt-approach__bulb {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(142, 192, 180, 0.18);
  color: var(--c4r-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Approach copy — flows directly on the dark teal (no card chrome) */
.servicedt-approach__card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  align-self: center;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.servicedt-approach__title {
  color: #fff;
  font-family: "Sora", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 40px;
  margin: 0 0 14px;
}
.servicedt-approach__text {
  color: rgba(255, 255, 255, 0.9);
  font-family: "DM Sans", sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: 29.25px;
  margin: 22px 0 0;
}
.servicedt-approach__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.servicedt-approach__bullets li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: #fff;
  font-family: "DM Sans", sans-serif;
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
  line-height: 20px;
}
.servicedt-approach__check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* — TECHNOLOGIES WE USE — light cream bg, content lives inside a floating
   rounded white card so the section reads as a "panel" against the cream */
.servicedt-tech {
  background: var(--c4r-bg);
  padding: clamp(56px, 6vw, 88px) 0;
  text-align: center;
}
.servicedt-tech__inner {
  max-width: 920px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 22px;
  padding: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 40px);
  box-shadow: 0 8px 30px rgba(1, 68, 76, 0.05);
}
.servicedt-tech__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  color: var(--c4r-primary);
  margin: 0 0 8px;
  letter-spacing: 0.005em;
}
.servicedt-tech__title .c4r-indent {
  padding-left: 0;
}
.servicedt-tech__subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #6b7c7e;
  margin: 0 0 24px;
}
.servicedt-tech__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}
.servicedt-tech__chips li {
  padding: 7px 16px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #dcdcdc;
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  color: var(--c4r-primary);
  font-weight: 500;
}

/* — Service-detail CTA: keep dark teal to match the rest of the page — */
.servicedt + .cta,
.servicedt .cta {
  background: var(--c4r-primary);
}

/* — Responsive — */
@media (max-width: 1100px) {
  .servicedt-process__grid {
    gap: 14px;
  }
  .servicedt-approach__bullets {
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
  }
}
@media (max-width: 860px) {
  .servicedt-hero {
    min-height: 0;
    padding: clamp(48px, 9vw, 88px) 0;
  }
  .servicedt-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .servicedt-hero__copy {
    text-align: center;
  }
  .servicedt-hero__btn {
    align-self: center;
  }
  .servicedt-hero__media {
    margin: 0 auto;
    max-width: 360px;
  }

  .servicedt-challenges {
    height: auto;
    padding: 0 16px clamp(48px, 8vw, 80px);
  }
  .servicedt-challenges__grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .servicedt-challenges__media {
    min-height: 180px;
  }

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

  .servicedt-approach__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .servicedt-approach__media {
    max-width: 420px;
    margin: 0 auto;
    aspect-ratio: 1.4 / 1;
  }
}
@media (max-width: 600px) {
  .servicedt-hero__title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .servicedt-hero__media {
    max-width: 280px;
    aspect-ratio: 1 / 1;
  }

  .servicedt-challenges__card {
    padding: 22px 20px;
  }
  .servicedt-challenges__title {
    font-size: clamp(18px, 5.5vw, 22px);
  }

  .servicedt-process__title {
    font-size: clamp(24px, 7.5vw, 32px);
  }
  .servicedt-process__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .servicedt-approach__card {
    padding: 26px 22px 24px;
  }
  .servicedt-approach__title {
    font-size: clamp(22px, 6vw, 28px);
  }
  .servicedt-approach__bullets {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .servicedt-tech__title {
    font-size: clamp(22px, 6.5vw, 28px);
  }
  .servicedt-tech__chips li {
    padding: 7px 13px;
    font-size: 13px;
  }
}
@media (max-width: 420px) {
  .servicedt-step {
    padding: 18px 18px 16px;
  }
}

/* =========================================================
   Success Stories archive — /success-stories/
   Hero (centered, dark teal) + 2-col card grid (continues dark teal)
   ========================================================= */
.storiespg-hero {
  background:
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 60%),
    var(--c4r-primary);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0 clamp(36px, 4vw, 56px);
  text-align: center;
}
.storiespg-hero__inner {
  max-width: 820px;
  margin: 0 auto;
}
.storiespg-hero__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 22px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.storiespg-hero__subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 auto;
  max-width: 720px;
}

.storiespg-grid {
  background: var(--c4r-primary);
  padding: 0 0 var(--c4r-section-py);
}
.storiespg-grid__list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* — Card — */
/* — Light cream/white card on the dark teal page background — */
.storypg-card {
  display: flex;
  flex-direction: column;
  background: #F1FBF9;
  border: 1px solid rgba(1, 68, 76, 0.08);
  border-radius: 18px;
  padding: 22px 22px 24px;
  gap: 16px;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  color: var(--c4r-primary);
}
.storypg-card:hover {
  border-color: rgba(1, 68, 76, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Header row: title left, corner icon right */
.storypg-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.storypg-card__title {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: var(--c4r-primary);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.storypg-card__title a {
  color: inherit;
  text-decoration: none;
}
.storypg-card__title a:hover {
  color: var(--c4r-secondary);
}
.storypg-card__corner {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--c4r-primary);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
}
.storypg-card__corner:hover {
  background: #fff;
  color: var(--c4r-primary);
  transform: translate(2px, -2px);
}

/* Tags row — accent pill first, then outline pills */
.storypg-card__tags {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.storypg-card__tag {
  font-family: "Mulish", "Noto Sans", sans-serif;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--c4r-primary);
  background: #fff;
  border: 1px solid rgba(1, 68, 76, 0.18);
  border-radius: 999px;
  padding: 4px 12px;
}
.storypg-card__tag--accent {
  background: rgba(142, 192, 180, 0.35);
  border-color: rgba(142, 192, 180, 0.6);
  color: var(--c4r-primary);
}

/* Image — centered with padding to match Figma */
.storypg-card__media {
  position: relative;
  display: block;
  aspect-ratio: 16 / 8;
  overflow: hidden;
  border-radius: 12px;
  background: var(--c4r-secondary);
}
.storypg-card__media img,
.storypg-card__img,
.storypg-card__media .c4r-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  padding: 0;
}

/* Body — stack of labelled content blocks */
.storypg-card__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.storypg-card__block {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.storypg-card__eyebrow {
  color: #6A7282;
  font-family: Sora;
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.35px;
  text-transform: uppercase;
}
.storypg-card__text {
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #4d5a5c;
  margin: 0;
}

/* Tech chips */
.storypg-card__chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.storypg-card__chips li {
  font-family: "Mulish", "Noto Sans", sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--c4r-primary);
  background: #fff;
  border: 1px solid rgba(1, 68, 76, 0.14);
  border-radius: 6px;
  padding: 4px 10px;
}

/* KPI stats — mint-tinted boxes side by side */
.storypg-card__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.storypg-card__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: rgba(142, 192, 180, 0.18);
  border-radius: 10px;
}
.storypg-card__stat-value {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 26px;
  font-weight: 800;
  color: var(--c4r-secondary);
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.storypg-card__stat-label {
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  color: #4d5a5c;
  line-height: 1.4;
}

/* Pagination — recolor for the dark teal bg */
.storiespg-grid .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 24px 4px 0 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  text-decoration: none;
}
.storiespg-grid .page-numbers.current,
.storiespg-grid .page-numbers:hover {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  border-color: var(--c4r-accent);
}

/* CTA on /success-stories/ continues the dark teal */
/* CTA background inherits from .cta — no override needed (matches home page). */

/* — Responsive — */
@media (max-width: 1100px) {
  .storiespg-grid__list {
    gap: 18px;
  }
}
@media (max-width: 860px) {
  .storiespg-grid__list {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .storypg-card {
    padding: 18px 18px 20px;
  }
}
@media (max-width: 600px) {
  .storiespg-hero__title {
    font-size: clamp(28px, 8vw, 40px);
  }
  .storiespg-hero__subtitle {
    font-size: 15px;
  }
  .storypg-card__title {
    font-size: 19px;
  }
  .storypg-card__stat-value {
    font-size: 22px;
  }
}
@media (max-width: 420px) {
  .storypg-card__stats {
    grid-template-columns: 1fr;
    gap: 10px;
  }
}

/* =========================================================
   Success Story Details — single-success_story.php
   Hero (dark teal, centered title + subtitle + featured image)
   + white content area + CTA (continues dark teal)
   ========================================================= */
.storydt-hero {
  background:
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 60%),
    var(--c4r-primary);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0 clamp(28px, 4vw, 0px);
  text-align: center;
}
.storydt-hero__inner {
  max-width: 940px;
  margin: 0 auto;
}
.storydt-hero__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(28px, 3.6vw, 44px);
  line-height: 1.1;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* Hero subtitle / "tag" line — small label below the title */
.storydt-hero__tag {
  color: #f9f9f9;
  text-align: center;
  font-family: "Inter", sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 150%; /* 24px */
  margin: 0 auto clamp(28px, 0vw, 48px);
  max-width: 720px;
}

/* Featured image — sits flush at the bottom of the hero, slightly
   bleeding into the content area below for a "hero-card" feel.
   Background-image based (no <img>) per the design spec. */
.storydt-hero__media {
  display: block;
  margin: 0 0 -1px;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
}
/* News hero: centered image sitting on a wider mint band that peeks out
   on either side. The band is absolutely centered behind the figure. */
.storydt-hero__feature {
  position: relative;
  display: flex;
  justify-content: center;
}
.storydt-hero__band {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1481px;
  max-width: 100vw;
  height: 160px;
  background: #8EC0B4;
  z-index: 0;
}
.storydt-hero__feature .storydt-hero__media {
  position: relative;
  z-index: 1;
  border-radius: 20px;
  box-shadow: 15px 20px 30px 0 rgba(0, 0, 0, 0.25);
}

/* — CONTENT — translucent teal reading column over the page bg — */
.storydt-content {
  background: rgba(37, 100, 104, 0.6);
  color: #fff;
  padding: clamp(36px, 5vw, 72px) 0 clamp(56px, 7vw, 96px);
}
.storydt-content__inner {
  margin: 0 auto;
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  color: #fff;
}
.storydt-content__inner > * + * {
  margin-top: clamp(28px, 3vw, 40px);
}

/* — Admin-defined sections — */
.storydt-section {
  margin: 0;
  padding-bottom: 60px;
}
.storydt-section__title {
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 38px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  margin: 0 0 14px;
}
.storydt-section__desc p {
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin: 0 0 0.75em;
}
.storydt-section__desc p:last-child {
  margin-bottom: 0;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 23px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.storydt-content__inner p {
  margin: 0 0 1em;
  color: #FFF;
  font-family: "Noto Sans";
  font-size: 26px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.storydt-content__inner a {
  color: var(--c4r-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.storydt-content__inner a:hover {
  color: var(--c4r-secondary);
}

.storydt-content__inner ul,
.storydt-content__inner ol {
  margin: 0 0 1em;
  padding-left: 22px;
}
.storydt-content__inner li + li {
  margin-top: 6px;
}

.storydt-content__inner blockquote {
  margin: 1.5em 0;
  padding: 14px 20px;
  border-left: 3px solid var(--c4r-accent);
  background: var(--c4r-bg);
  border-radius: 4px;
  font-style: italic;
  color: var(--c4r-primary);
}
.storydt-content__inner img,
.storydt-content__inner figure {
  max-width: 100%;
  height: auto;
  border-radius: 12px;
}
.storydt-content__inner figure {
  margin: 1.5em 0;
}

/* CTA on a single Success Story continues the dark teal */
.storydt + .cta,
.storydt .cta {
  background: var(--c4r-primary);
}

/* =========================================================
   Products archive — /products/
   Hero (dark teal 2-col) + 3-col card grid (cream)
   ========================================================= */
.productspg-hero {
  background-color: var(--c4r-primary);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
    radial-gradient(ellipse 70% 90% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 70%),
    radial-gradient(ellipse 60% 70% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 60%);
  background-size: 56px 56px, 56px 56px, auto, auto;
  color: #fff;
  padding: clamp(64px, 7vw, 112px) 0 clamp(56px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}
.productspg-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.productspg-hero__title {
  color: #fff;
  font-family: "Good Times", sans-serif;
  font-size: 40px;
  font-style: normal;
  font-weight: 400;
  line-height: 130%; /* 52px */
  text-transform: capitalize;
  margin: 0 0 22px;
}
/* The accented portion (rendered via c4r_color_format → inline-styled span)
   inherits font-family / size / weight / line-height / text-transform from
   the parent; only the color is overridden. */
.productspg-hero__desc {
  color: #f2f2f2;
  font-family: "Mulish", sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 150.5%; /* 30.1px */
  margin: 0;
  max-width: 540px;
}

.productspg-hero__media-wrap {
  display: flex;
  justify-content: flex-end;
}
.productspg-hero__media-frame {
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1.05 / 1;
  border: 1.5px dashed color-mix(in srgb, var(--c4r-accent) 55%, transparent);
  border-radius: 22px;
  padding: 14px;
}
.productspg-hero__media {
  width: 100%;
  height: 100%;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(
      60% 70% at 30% 50%,
      rgba(0, 225, 255, 0.18) 0%,
      rgba(0, 0, 0, 0) 65%
    ),
    linear-gradient(180deg, #052e33 0%, #02151a 100%);
}
.productspg-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  mix-blend-mode: plus-lighter;
}
.productspg-hero__media-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.productspg-hero__cursor {
  position: absolute;
  width: 26%;
  height: 30%;
  top: 28%;
  left: 38%;
  background: linear-gradient(135deg, var(--c4r-accent) 0%, transparent 70%);
  clip-path: polygon(
    0 0,
    100% 50%,
    50% 60%,
    70% 100%,
    50% 110%,
    30% 70%,
    0 100%
  );
  opacity: 0.85;
  filter: drop-shadow(0 6px 20px rgba(142, 192, 180, 0.6));
}
.productspg-hero__cursor-glow {
  position: absolute;
  width: 60%;
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(142, 192, 180, 0.22) 0%,
    rgba(142, 192, 180, 0) 65%
  );
  filter: blur(10px);
}

/* — Grid (cream bg) — */
.productspg-grid {
  background: var(--c4r-bg);
  padding: var(--c4r-section-py) 0;
}
.productspg-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* — Card — same look as the services card (white, mint hover) */
.productspg-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 20px;
  backdrop-filter: blur(10.8px);
  -webkit-backdrop-filter: blur(10.8px);
  padding: 26px 24px 22px;
  min-height: 280px;
  transition:
    background 0.25s ease,
    border-color 0.25s ease;
}
.productspg-card:hover {
  background: rgba(142, 192, 180, 0.39);
  border: 1px solid #dcdcdc;
}

.productspg-card__title {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: var(--c4r-primary);
  margin: 0;
  letter-spacing: 0.005em;
  line-height: 1.3;
  /* Always reserve exactly two lines; clamp longer titles with an ellipsis */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 2.6em; /* 2 lines × line-height 1.3 */
}
.productspg-card__subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 12.5px;
  color: #6b7c7e;
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.productspg-card__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #6b7c7e;
  margin: 0;
  flex: 1 1 auto;
}
.productspg-card__bullets {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1 1 auto;
}
.productspg-card__bullets li {
  position: relative;
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #6b7c7e;
  padding-left: 16px;
}
.productspg-card__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c4r-primary);
  opacity: 0.55;
}

/* Card footer / Learn More button — outlined white pill, fills teal on hover */
.productspg-card__footer {
  margin-top: 8px;
  padding-top: 12px;
  display: flex;
  justify-content: flex-start;
}
.productspg-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 8px 8px 18px;
  background: #fff;
  border: 1px solid #dcdcdc;
  border-radius: 30px;
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: var(--c4r-primary);
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.productspg-card__btn-arrow {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(1, 68, 76, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  transition:
    width 0.25s ease,
    height 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}
.productspg-card__btn:hover {
  background: var(--c4r-primary);
  color: #fff;
  border-color: var(--c4r-primary);
}
.productspg-card__btn:hover .productspg-card__btn-arrow {
  width: 24px;
  height: 24px;
  background: #fff;
  color: var(--c4r-primary);
}

/* CTA on /products/ keeps the dark-teal rhythm */
/* CTA background inherits from .cta — no override needed (matches home page). */

/* Products responsive */
@media (max-width: 1100px) {
  .productspg-grid__list {
    gap: 18px;
  }
  .productspg-hero__inner {
    gap: clamp(28px, 4vw, 48px);
  }
  .productspg-hero__media-frame {
    max-width: 400px;
  }
}
@media (max-width: 860px) {
  .productspg-hero__inner {
    grid-template-columns: 1fr;
    gap: 32px;
    text-align: center;
  }
  .productspg-hero__desc {
    margin-left: auto;
    margin-right: auto;
  }
  .productspg-hero__media-wrap {
    justify-content: center;
  }
  .productspg-hero__media-frame {
    max-width: 360px;
  }

  .productspg-grid__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}
@media (max-width: 600px) {
  .productspg-hero__title {
    font-size: clamp(24px, 7vw, 32px);
  }
  .productspg-hero__desc {
    font-size: 15px;
  }
  .productspg-hero__media-frame {
    max-width: 300px;
    padding: 10px;
  }

  .productspg-grid__list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .productspg-card {
    padding: 22px 20px 20px;
    min-height: 0;
  }
  .productspg-card__title {
    font-size: 17px;
  }
}
@media (max-width: 420px) {
  .productspg-card__btn {
    padding: 8px 8px 8px 14px;
    font-size: 12.5px;
  }
}

/* =========================================================
   News archive — /news/
   Hero with floating newsletter card + filter pills + 3-col grid
   ========================================================= */
.newspg-hero {
  /* Lighter mint-tinted band over the dark-teal page bg, matching the
       Figma's lighter horizontal panel under the OUR NEWS title. */
  background:
    linear-gradient(
      180deg,
      rgba(142, 192, 180, 0.22) 0%,
      rgba(142, 192, 180, 0.1) 100%
    ),
    var(--c4r-primary);
  color: #fff;
  padding: clamp(56px, 7vw, 96px) 0 clamp(40px, 5vw, 64px);
  position: relative;
  overflow: visible;
}
.newspg-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.newspg-hero__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(34px, 4.4vw, 56px);
  line-height: 1.05;
  color: #fff;
  margin: 0 0 14px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.newspg-hero__subtitle {
  font-family: "Noto Sans", sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
  max-width: 540px;
}

/* Right-side embedded newsletter sign-up card — glass/frosted.
   Floats half-inside the hero, half-overflowing into the grid section
   below (matches the Figma's straddling card). */
.newspg-hero__newsletter {
  background: linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 20px;
  padding: 20px 22px 22px;
  width: 100%;
  max-width: 360px;
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  color: #fff;
  align-self: end;
  transform: translateY(50%);
  margin-bottom: 0;
  position: relative;
  z-index: 5;
}
.newspg-hero__newsletter-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(142, 192, 180, 0.18);
  color: var(--c4r-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.newspg-hero__newsletter-title {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 12px;
}
.newspg-hero__newsletter-form {
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 4px 4px 4px 16px;
  gap: 8px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.newspg-hero__newsletter-form input[type="email"] {
  flex: 1 1 auto;
  background: transparent;
  border: 0;
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  padding: 8px 0;
  min-width: 0;
}
.newspg-hero__newsletter-form input[type="email"]::placeholder {
  color: rgba(255, 255, 255, 0.55);
}
.newspg-hero__newsletter-form input[type="email"]:focus {
  outline: none;
}
.newspg-hero__newsletter-form button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 999px;
  background: var(--c4r-primary);
  color: #fff;
  border: 0;
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    filter 0.25s ease,
    background 0.25s ease;
}
.newspg-hero__newsletter-form button:hover {
  background: var(--c4r-secondary);
}

/* — Grid section (continues dark teal) — */
.newspg-grid {
  background: var(--c4r-primary);
  /* Top padding clears the bottom half of the floating newsletter card */
  padding: clamp(77px, 9vw, 70px) 0 var(--c4r-section-py);
  position: relative;
}
.newspg-grid__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 clamp(24px, 3vw, 36px);
  color: #fff;
}
.newspg-grid__heading {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 700;
  color: #fff;
  margin: 0;
  padding-left: 10px;
  border-left: 3px solid var(--c4r-accent);
}
.newspg-grid__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.newspg-pill {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.newspg-pill:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.newspg-pill.is-active {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  border-color: var(--c4r-accent);
}

.newspg-grid__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.newspg-grid__empty {
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Noto Sans", sans-serif;
  text-align: center;
}

/* — Card — */
/* News card — title + subtitle on top, padded image, date/text/btn below */
.newspg-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: var(--c4r-primary);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  padding: 22px 22px 24px;
  color: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
  transition:
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}
.newspg-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.36);
}

/* Top header: title + small subtitle/kicker */
.newspg-card__head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.newspg-card__title {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 22px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.newspg-card__title a {
  color: inherit;
  text-decoration: none;
}
.newspg-card__title a:hover {
  color: var(--c4r-accent);
}
.newspg-card__subtitle {
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 13.5px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
  line-height: 1.4;
}

/* Image — full width of the card edge-to-edge */
.newspg-card__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--c4r-secondary);
  margin-left: -22px;
  margin-right: -22px;
  width: calc(100% + 44px);
}
.newspg-card__media img,
.newspg-card__img,
.newspg-card__media .c4r-placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Body below image */
.newspg-card__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
}
.newspg-card__date {
  font-family: "Manrope", "Inter", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.newspg-card__text {
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}

/* "See more" pill, bottom-right */
.newspg-card__footer {
  margin-top: auto;
  padding-top: 6px;
  display: flex;
  justify-content: flex-end;
}
.newspg-card__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  text-decoration: none;
  font-family: "Noto Sans", "Inter", sans-serif;
  font-size: 14px;
  font-weight: 600;
  transition:
    background 0.25s ease,
    color 0.25s ease,
    border-color 0.25s ease;
}
.newspg-card__btn:hover {
  background: var(--c4r-accent);
  border-color: var(--c4r-accent);
  color: var(--c4r-primary);
}

/* Pagination — match the stories pagination on dark teal */
.newspg-grid .page-numbers {
  display: inline-block;
  padding: 8px 14px;
  margin: 24px 4px 0 0;
  border-radius: 999px;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  text-decoration: none;
}
.newspg-grid .page-numbers.current,
.newspg-grid .page-numbers:hover {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  border-color: var(--c4r-accent);
}

/* CTA on /news/ keeps the dark-teal rhythm */
/* CTA background inherits from .cta — no override needed (matches home page). */

/* — Responsive — */
@media (max-width: 1100px) {
  .newspg-grid__list {
    gap: 14px;
  }
}
@media (max-width: 860px) {
  .newspg-hero__inner {
    grid-template-columns: 1fr;
  }
  .newspg-hero__newsletter {
    max-width: none;
    transform: none; /* don't overflow on mobile — stacks under the title */
    align-self: stretch;
  }
  .newspg-grid {
    padding-top: var(--c4r-section-py);
  }
  .newspg-grid__list {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }
}
@media (max-width: 600px) {
  .newspg-hero__title {
    font-size: clamp(28px, 8vw, 38px);
  }
  .newspg-hero__subtitle {
    font-size: 14.5px;
  }
  .newspg-grid__list {
    grid-template-columns: 1fr;
  }
  .newspg-grid__heading {
    font-size: clamp(20px, 6vw, 24px);
  }
  .newspg-card__title {
    font-size: 19px;
  }
  .newspg-card__text {
    font-size: 13.5px;
  }
}

/* — Responsive — */
@media (max-width: 860px) {
  .storydt-hero__title {
    font-size: clamp(24px, 7vw, 34px);
  }
  .storydt-hero__tag {
    font-size: 14px;
  }
  .storydt-hero__media {
    aspect-ratio: 16 / 8;
  }
  .storydt-content__inner {
    font-size: 15.5px;
    line-height: 1.7;
  }
}
@media (max-width: 600px) {
  .storydt-hero {
    padding: clamp(36px, 8vw, 56px) 0 clamp(20px, 4vw, 32px);
  }
  .storydt-hero__title {
    font-size: clamp(22px, 7.5vw, 30px);
  }
  .storydt-content__inner h2 {
    font-size: clamp(20px, 6vw, 24px);
  }
  .storydt-content__inner h3 {
    font-size: clamp(17px, 5vw, 20px);
  }
}

/* ──────────────────────────────────────────────────────────────────────
   CAREERS — Archive (/careers/)
   ────────────────────────────────────────────────────────────────── */

.careerspg {
  background: var(--c4r-primary);
  color: #fff;
}

.careerspg-hero {
  background: radial-gradient(60% 60% at 50% 0%, rgba(142, 192, 180, 0.10), transparent 70%),
              var(--c4r-primary);
  padding: clamp(56px, 7vw, 96px) 0 clamp(28px, 4vw, 48px);
  text-align: center;
}
.careerspg-hero__inner {
  max-width: 880px;
}
.careerspg-hero__title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(34px, 5vw, 60px);
  line-height: 1.05;
  letter-spacing: 0.025em;
  color: #fff;
  margin: 0 0 18px;
}
.careerspg-hero__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
  max-width: 640px;
  margin: 0 auto 28px;
}
.careerspg-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 8px;
}
.careerspg-filter {
  font-family: "Mulish", sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.78);
  padding: 9px 18px;
  border-radius: 999px;
  border: 1px solid rgba(142, 192, 180, 0.4);
  background: transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.careerspg-filter:hover {
  color: #fff;
  border-color: var(--c4r-accent);
}
.careerspg-filter.is-active {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
  border-color: var(--c4r-accent);
}

.careerspg-list {
  background: var(--c4r-primary);
  padding: clamp(24px, 4vw, 56px) 0 clamp(56px, 7vw, 96px);
}
.careerspg-list__count {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 32px;
}
.careerspg-list__count-num {
  color: var(--c4r-accent);
  font-weight: 600;
  margin-left: 4px;
}
.careerspg-list__section-heading {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.78);
  margin: 36px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.careerspg-list__bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 36px 0 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.careerspg-list__bar .careerspg-list__section-heading {
  margin: 0;
  padding: 0;
  border: 0;
}
.careerspg-view-toggle {
  display: inline-flex;
  gap: 6px;
}
.careerspg-view-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: transparent;
  color: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
  padding: 0;
}
.careerspg-view-btn:hover {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.35);
}
.careerspg-view-btn.is-active {
  color: var(--c4r-primary);
  background: var(--c4r-accent);
  border-color: var(--c4r-accent);
}

/* Grid view — 2-col cards (1 col on narrow). The row layout flips vertical:
   title block on top, side block (stat + actions) below. */
.careerspg-rows[data-view="grid"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 14px;
}
.careerspg-rows[data-view="grid"] .careerspg-row {
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
}
.careerspg-rows[data-view="grid"] .careerspg-row__side {
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
}
.careerspg-rows[data-view="grid"] .careerspg-row__stat {
  align-items: flex-start;
}
.careerspg-list__empty {
  color: rgba(255, 255, 255, 0.7);
  font-family: "Noto Sans", sans-serif;
  padding: 32px 0;
  text-align: center;
}

/* Priority hiring card */
.careerspg-priority {
  display: grid;
  gap: 16px;
}
.careerspg-priority-card {
  background: rgba(142, 192, 180, 0.07);
  border: 1px solid rgba(142, 192, 180, 0.35);
  border-radius: 16px;
  padding: 24px 26px;
}
.careerspg-priority-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.careerspg-priority-card__chip {
  display: inline-flex;
  align-items: center;
  font-family: "Mulish", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c4r-accent);
  background: transparent;
  border: 1px solid rgba(142, 192, 180, 0.6);
  padding: 7px 18px;
  border-radius: 999px;
}
.careerspg-priority-card__salary {
  color: #fff;
  font-family: "Noto Sans", sans-serif;
  font-size: 15px;
  font-weight: 500;
}
.careerspg-priority-card__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: #fff;
  margin: 14px 0 12px;
  line-height: 1.2;
}
.careerspg-priority-card__title a { color: inherit; text-decoration: none; }
.careerspg-priority-card__title a:hover { color: var(--c4r-accent); }
.careerspg-priority-card__desc {
  font-family: "Noto Sans", sans-serif;
  font-size: 14.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 22px;
  max-width: 920px;
}
.careerspg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 24px;
}
.careerspg-chip {
  font-family: "Mulish", sans-serif;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c4r-primary);
  background: #fff;
  border: 0;
  padding: 7px 16px;
  border-radius: 999px;
}
.careerspg-priority-card__apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--c4r-primary);
  background: var(--c4r-accent);
  text-decoration: none;
  padding: 14px 38px;
  border-radius: 999px;
  transition: filter .2s ease, transform .2s ease;
  min-width: 230px;
}
.careerspg-priority-card__apply:hover {
  filter: brightness(0.96);
  transform: translateY(-1px);
}
.careerspg-priority-card__apply-arrow { display: none; }

/* List rows (Active Deployments) */
.careerspg-rows {
  display: grid;
  gap: 12px;
}
.careerspg-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 18px 22px;
  transition: background .2s ease, border-color .2s ease;
}
.careerspg-row:hover {
  background: rgba(142, 192, 180, 0.06);
  border-color: rgba(142, 192, 180, 0.3);
}
.careerspg-row__main { flex: 1 1 auto; min-width: 0; }
.careerspg-row__title {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.careerspg-row__title a { color: inherit; text-decoration: none; }
.careerspg-row__title a:hover { color: var(--c4r-accent); }
.careerspg-row__level-chip {
  font-family: "Mulish", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c4r-accent);
  background: rgba(142, 192, 180, 0.12);
  border: 1px solid rgba(142, 192, 180, 0.4);
  padding: 2px 9px;
  border-radius: 999px;
}
.careerspg-row__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: rgba(255, 255, 255, 0.68);
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
}
.careerspg-row__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.careerspg-row__meta-item .dashicons {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--c4r-accent);
}
.careerspg-row__side {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
}
.careerspg-row__posted {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Mulish", sans-serif;
}
.careerspg-row__posted-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.5);
}
.careerspg-row__posted-date {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
}
.careerspg-row__stat {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: "Mulish", sans-serif;
  line-height: 1.2;
}
.careerspg-row__stat-top {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--c4r-accent);
  text-transform: uppercase;
}
.careerspg-row__stat-bot {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  margin-top: 4px;
}
.careerspg-row__actions { display: flex; gap: 8px; }
.careerspg-row__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Mulish", sans-serif;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  text-decoration: none;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.careerspg-row__btn--ghost {
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.careerspg-row__btn--ghost:hover {
  border-color: var(--c4r-accent);
  color: var(--c4r-accent);
}
.careerspg-row__btn--solid {
  background: var(--c4r-accent);
  color: var(--c4r-primary);
}
.careerspg-row__btn--solid:hover { filter: brightness(0.95); }
.careerspg-row__btn.is-disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.55);
  cursor: not-allowed;
  pointer-events: none;
}

/* "CLOSED" chip used on closed jobs in both priority cards and rows */
.careerspg-closed-chip {
  display: inline-flex;
  align-items: center;
  font-family: "Mulish", sans-serif;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.22);
  padding: 3px 10px;
  border-radius: 999px;
}

/* Muted appearance for closed cards/rows so they read as "archived" */
.careerspg-priority-card.is-closed,
.careerspg-row.is-closed {
  opacity: 0.7;
}
.careerspg-priority-card.is-closed:hover,
.careerspg-row.is-closed:hover { opacity: 0.85; }
.careerspg-priority-card__apply.is-disabled {
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.7);
  cursor: not-allowed;
}

/* ──────────────────────────────────────────────────────────────────────
   CAREERS — Single (/careers/<slug>/)
   ────────────────────────────────────────────────────────────────── */

.careerpg {
  background:
    radial-gradient(ellipse 80% 110% at 30% 45%, rgba(180, 220, 215, 0.32) 0%, rgba(180, 220, 215, 0.12) 35%, transparent 80%),
    radial-gradient(ellipse 80% 110% at 15% 85%, rgba(0, 0, 0, 0.18) 0%, transparent 70%),
    var(--c4r-primary);
  color: #fff;
}
.careerpg-hero {
  padding: clamp(40px, 5vw, 80px) 0 clamp(56px, 6vw, 96px);
}
.careerpg-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(32px, 4vw, 56px);
  align-items: flex-start;
}
.careerpg-eyebrows {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.careerpg-eyebrow {
  font-family: "Mulish", sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.careerpg-eyebrow--accent {
  color: var(--c4r-primary);
  background: var(--c4r-accent);
}
.careerpg-eyebrow--ghost {
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.careerpg-title {
  font-family: "Good Times", sans-serif;
  font-size: clamp(32px, 4.4vw, 56px);
  line-height: 1.05;
  letter-spacing: 0.02em;
  color: #fff;
  margin: 0 0 18px;
}
.careerpg-inline-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-bottom: 28px;
  color: rgba(255, 255, 255, 0.78);
  font-family: "Noto Sans", sans-serif;
  font-size: 14.5px;
}
.careerpg-inline-meta__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.careerpg-inline-meta__item .dashicons {
  font-size: 17px;
  width: 17px;
  height: 17px;
  color: var(--c4r-accent);
}
.careerpg-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 12px;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0 0 36px;
}
.careerpg-meta-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  background: #01444C;
  border-radius: 24px;
  padding: 18px 22px;
}
.careerpg-meta-tile__label {
  font-family: "Mulish", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.55);
  text-transform: uppercase;
}
.careerpg-meta-tile__value {
  font-family: "Manrope", sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: #fff;
}

.careerpg-block { margin-top: 32px; }
/* Modifier — used by the Required Skills / Nice To Have section so it sits
   inside a darker rounded card with a 2-col grid for the two skill columns. */
.careerpg-block--skills {
  display: inline-grid;
  padding: 32px;
  row-gap: 32px;
  column-gap: 32px;
  align-self: stretch;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-radius: 24px;
  background: #064F57;
  width: 100%;
}
.careerpg-block--skills .careerpg-tags-row {
  display: contents; /* let each column be a direct grid child */
}
.careerpg-block__title {
  font-family: "Manrope", sans-serif;
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 700;
  color: #fff;
  margin: 0 0 18px;
}
.careerpg-resp {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 14px;
}
.careerpg-resp__item {
  display: flex;
  gap: 14px;
  font-family: "Noto Sans", sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
}
.careerpg-resp__dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c4r-accent);
  margin-top: 9px;
}
.careerpg-resp__icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1.5px solid var(--c4r-accent);
  color: var(--c4r-accent);
  margin-top: 2px;
}
.careerpg-richtext { color: rgba(255, 255, 255, 0.82); line-height: 1.65; font-family: "Noto Sans", sans-serif; }
.careerpg-richtext p { margin: 0 0 14px; }
.careerpg-richtext h2, .careerpg-richtext h3 { color: #fff; margin-top: 22px; }

.careerpg-tags-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.careerpg-tags-col__heading {
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 10px;
  text-transform: uppercase;
}
.careerpg-tags-col .careerpg-chip-row { margin: 0; }

/* Single-career chips (Required Skills / Nice To Have / inline tag rows). */
.careerpg-chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.careerpg-chip {
  display: inline-flex;
  align-items: center;
  font-family: "Mulish", sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--c4r-primary);
  padding: 7px 16px;
  border-radius: 16px;
  border: 1px solid rgba(48, 228, 95, 0.20);
  background: #8EC0B4;
}

.careerpg-benefits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.careerpg-benefit {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
}
.careerpg-benefit__icon {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(142, 192, 180, 0.12);
  color: var(--c4r-accent);
}
.careerpg-benefit__icon .dashicons {
  color: var(--c4r-accent);
  width: 20px;
  height: 20px;
  font-size: 20px;
}
.careerpg-benefit__label {
  font-family: "Manrope", sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  color: #fff;
}

/* Sidebar */
.careerpg-aside { width: 100%; }
.careerpg-aside__sticky {
  position: sticky;
  top: 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.careerpg-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 22px;
}

.careerpg-apply-cta {
  background: rgba(0, 0, 0, 0.22);
  border-color: rgba(255, 255, 255, 0.08);
}
.careerpg-apply-cta__text {
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 16px;
}
.careerpg-apply-cta__btn {
  display: block;
  text-align: center;
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--c4r-primary);
  background: var(--c4r-accent);
  padding: 14px 22px;
  border-radius: 999px;
  text-decoration: none;
  transition: filter .2s ease;
}
.careerpg-apply-cta__btn:hover { filter: brightness(0.95); }
.careerpg-apply-cta__btn.is-disabled {
  background: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.6);
  cursor: not-allowed;
}

.careerpg-recruiter__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.careerpg-recruiter__avatar {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  object-fit: cover;
  background: rgba(142, 192, 180, 0.2);
}
.careerpg-recruiter__avatar--ph {
  display: inline-block;
  background:
    radial-gradient(circle at 30% 30%, rgba(142, 192, 180, 0.7), rgba(142, 192, 180, 0.2));
}
.careerpg-recruiter__name {
  font-family: "Manrope", sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #fff;
}
.careerpg-recruiter__intro {
  font-family: "Noto Sans", sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 14px;
}
.careerpg-recruiter__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.careerpg-recruiter__stat {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 10px;
  padding: 10px 12px;
}
.careerpg-recruiter__stat-label {
  display: block;
  font-family: "Mulish", sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 2px;
}
.careerpg-recruiter__stat-value {
  font-family: "Manrope", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.careerpg-apply {
  background: #8EC0B4;
  border: 0;
  border-radius: 24px;
  padding: 28px 26px;
  color: var(--c4r-primary);
  box-sizing: border-box;
  overflow: hidden;
}
.careerpg-apply__form { box-sizing: border-box; }
.careerpg-apply__form * { box-sizing: border-box; }
.careerpg-apply__title {
  font-family: "Manrope", sans-serif;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--c4r-primary);
  margin: 0 0 22px;
  text-transform: uppercase;
}
.careerpg-apply__notice {
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 16px;
}
.careerpg-apply__notice.is-ok  { background: rgba(1, 68, 76, 0.16); color: var(--c4r-primary); }
.careerpg-apply__notice.is-err { background: rgba(220, 80, 80, 0.18); color: #5a1010; }
.careerpg-apply__closed {
  font-family: "Noto Sans", sans-serif;
  color: var(--c4r-primary);
  margin: 0;
}
.careerpg-apply__form { display: flex; flex-direction: column; gap: 14px; }
.careerpg-apply__section { display: flex; flex-direction: column; gap: 12px; }
.careerpg-apply__eyebrow {
  font-family: "Mulish", sans-serif;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--c4r-primary);
  margin: 0 0 2px;
  text-transform: uppercase;
}
.careerpg-apply__divider {
  border: 0;
  border-top: 1px solid rgba(1, 68, 76, 0.18);
  margin: 4px 0;
}
.careerpg-apply__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.careerpg-apply__row > * { min-width: 0; } /* prevent grid items from overflowing */
.careerpg-apply__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.careerpg-apply__row label,
.careerpg-apply__field label { display: flex; flex-direction: column; gap: 6px; }
.careerpg-apply__sublabel {
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--c4r-primary);
}
.careerpg-apply__form input[type="text"],
.careerpg-apply__form input[type="email"],
.careerpg-apply__form input[type="tel"],
.careerpg-apply__form textarea {
  font-family: "Noto Sans", sans-serif;
  font-size: 14px;
  background: #f4f1ea;
  color: var(--c4r-primary);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 12px 16px;
  outline: none;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  display: block;
  transition: border-color .15s ease, background .15s ease;
}
.careerpg-apply__form textarea {
  border-radius: 18px;
  resize: vertical;
  min-height: 92px;
}
.careerpg-apply__form input:focus,
.careerpg-apply__form textarea:focus {
  background: #fff;
  border-color: var(--c4r-primary);
}
.careerpg-apply__form input::placeholder,
.careerpg-apply__form textarea::placeholder {
  color: rgba(1, 68, 76, 0.55);
}

/* Dashed drop-zone for the CV upload */
.careerpg-apply__drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 22px 16px;
  border: 1.5px dashed rgba(1, 68, 76, 0.45);
  border-radius: 18px;
  background: rgba(1, 68, 76, 0.04);
  color: var(--c4r-primary);
  cursor: pointer;
  text-align: center;
  transition: background .2s ease, border-color .2s ease;
}
.careerpg-apply__drop:hover {
  background: rgba(1, 68, 76, 0.08);
  border-color: var(--c4r-primary);
}
.careerpg-apply__drop input[type="file"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.careerpg-apply__drop-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--c4r-primary);
  margin-bottom: 4px;
}
.careerpg-apply__drop-title {
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: var(--c4r-primary);
}
.careerpg-apply__drop-hint {
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  color: rgba(1, 68, 76, 0.65);
}
.careerpg-apply__drop-file {
  font-family: "Noto Sans", sans-serif;
  font-size: 12px;
  color: rgba(1, 68, 76, 0.78);
  margin-top: 6px;
}
.careerpg-apply__drop-file:empty::before {
  content: attr(data-empty);
  opacity: 0.6;
}

.careerpg-apply__submit {
  font-family: "Mulish", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: var(--c4r-primary);
  border: 0;
  padding: 14px 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: filter .2s ease, transform .15s ease;
  margin-top: 8px;
}
.careerpg-apply__submit:hover { filter: brightness(1.08); transform: translateY(-1px); }

/* Similar opportunities */
.careerpg-similar {
  background: rgba(0, 0, 0, 0.18);
  padding: clamp(48px, 5vw, 80px) 0;
}
.careerpg-similar__title {
  color: #E8E8EC;
  font-family: "Inter", sans-serif;
  font-size: 36px;
  font-style: normal;
  font-weight: 900;
  line-height: 40px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  margin: 0 0 22px;
}
.careerpg-similar__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}
.careerpg-similar__card {
  display: block;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 20px 22px;
  text-decoration: none;
  color: inherit;
  transition: background .2s ease, border-color .2s ease;
}
.careerpg-similar__card:hover {
  background: rgba(142, 192, 180, 0.07);
  border-color: rgba(142, 192, 180, 0.35);
}
.careerpg-similar__name {
  font-family: "Manrope", sans-serif;
  font-size: 16.5px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 6px;
}
.careerpg-similar__meta {
  color: rgba(255, 255, 255, 0.68);
  font-family: "Noto Sans", sans-serif;
  font-size: 13px;
  display: flex;
  gap: 6px;
}

@media (max-width: 1024px) {
  .careerpg-grid { grid-template-columns: 1fr; }
  .careerpg-aside__sticky { position: static; }
}
@media (max-width: 720px) {
  .careerspg-row {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .careerspg-row__side {
    flex-direction: row-reverse;
    justify-content: space-between;
  }
  .careerspg-row__posted { align-items: flex-start; }
  .careerpg-tags-row { grid-template-columns: 1fr; }
  .careerpg-benefits { grid-template-columns: 1fr; }
  .careerpg-apply__row { grid-template-columns: 1fr; }
}