/*
 * Panda Systems identity layer: Graphite Cherry (AC).
 * Selected from palette-only round 4, 2026-10-20.
 * Scope: colour, surfaces, image grade and watermark. Hero rhythm is not
 * compressed here; the native layout may grow naturally on short screens.
 * Supertree component geometry, typography, spacing and templates stay intact.
 */

:root {
  --panda-ink: #1d2430;
  --panda-green-800: #9f2744;
  --panda-green-700: #9f2744;
  --panda-green-600: #c73557;
  --panda-green-500: #c73557;
  --panda-green-300: #dce0e5;
  --panda-green-200: #e8ebef;
  --panda-green-100: #f4f5f7;
  --panda-coral: #f2ad3f;
  --panda-coral-text: #9f2744;
  --panda-haze: #f4f5f7;
  --panda-haze-deep: #e8ebef;
  --panda-paper: #ffffff;
  --panda-hairline: #dce0e5;
  --panda-body: #404958;
  --panda-muted: #626b78;
  --panda-night: #0d1118;

  /* Supertree aliases: identity only, no geometry changes. */
  --bg-primary: var(--panda-haze);
  --bg-alt: var(--panda-haze-deep);
  --bg-dark: var(--panda-ink);
  --bg-footer: var(--panda-night);
  --text-heading: var(--panda-ink);
  --text-body: var(--panda-body);
  --text-muted: var(--panda-muted);
  --purple: var(--panda-green-600);
  --purple-hover: var(--panda-green-700);
  --purple-bright: var(--panda-green-500);
  --purple-light: var(--panda-green-100);
  --icon-bg: var(--panda-green-100);
  --card-bg: var(--panda-paper);
  --card-shadow: 0 1px 0 rgba(10, 20, 50, 0.04), 0 20px 48px -20px rgba(199, 53, 87, 0.24);

  --st-bg-primary: var(--panda-haze);
  --st-bg-dark: var(--panda-ink);
  --st-bg-footer: var(--panda-night);
  --st-bg-alt: var(--panda-haze-deep);
  --st-text-heading: var(--panda-ink);
  --st-text-body: var(--panda-body);
  --st-text-muted: var(--panda-muted);
  --st-purple: var(--panda-green-600);
  --st-purple-hover: var(--panda-green-700);
  --st-purple-bright: var(--panda-green-500);
  --st-purple-light: var(--panda-green-100);
  --st-card-bg: var(--panda-paper);
  --st-card-shadow: var(--card-shadow);

  --wps-light-gray: var(--panda-haze);
  --wps-purple-bold: var(--panda-green-700);
  --wps-purple: var(--panda-green-600);
  --wps-text: var(--panda-ink);
  --wps-text-soft: var(--panda-body);
  --wps-line: var(--panda-hairline);
  --wps-purple-ink: var(--panda-ink);
  --wps-green: var(--panda-green-600);
}

::selection {
  background: var(--panda-haze-deep);
  color: var(--panda-ink);
}

:focus-visible {
  outline: 2px solid var(--panda-coral);
  outline-offset: 3px;
}

body,
.standard-page,
.standard-post,
.standard-archive {
  background-color: var(--panda-haze);
  color: var(--panda-body);
}

/* Architectural graphite field with a cool highlight and cherry identity. */
.hero,
.standard-page__hero,
.hero--events {
  background:
    radial-gradient(72% 68% at 15% -8%, rgba(208, 219, 235, 0.38) 0%, transparent 62%),
    linear-gradient(158deg, #3f4858 0%, #283242 48%, #121722 100%);
}

.hero::before,
.standard-page__hero::before,
.hero--events::before {
  background: radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, 0.20) 0%, transparent 54%);
}

/* The navbar-specific v2 arrangement keeps all three original path shapes:
   panda symbol left, exact panda/systems wordmarks left-aligned at right and
   bottom-aligned with the symbol. Only white/dark presentation changes. */
.nav-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
}

.nav-logo img {
  width: auto;
  height: 60px;
}

.nav .nav-logo .logo-light,
.nav:not(.scrolled) .nav-logo .logo-light {
  filter: brightness(0) invert(1);
}

.nav .nav-logo .logo-dark,
.nav.scrolled .nav-logo .logo-dark,
.nav.mobile-open .nav-logo .logo-dark {
  filter: none;
}

/* Decorative hero branding uses only the exact v2 symbol: repeating the full
   stacked wordmark behind a headline would turn identity into background text. */
.hero::after {
  left: 50%;
  top: 50%;
  width: min(44vw, 520px);
  height: auto;
  aspect-ratio: 190 / 168;
  transform: translate(-50%, -50%);
  background: var(--panda-paper);
  opacity: 0.03;
  -webkit-mask: url("assets/logo/panda-systems-mark-v2.svg") center / contain no-repeat;
  mask: url("assets/logo/panda-systems-mark-v2.svg") center / contain no-repeat;
}

.standard-page__background-logo {
  right: 4%;
  top: 50%;
  width: min(52vw, 650px);
  height: auto;
  max-height: 72%;
  opacity: 0.025;
  filter: brightness(0) invert(1);
  transform: translateY(-50%);
}

.hero .hero-badge,
.standard-page__hero-eyebrow {
  border-color: rgba(255, 255, 255, 0.36);
  background: rgba(255, 255, 255, 0.10);
  color: #fff;
}

.hero p,
.standard-page__hero-subtitle {
  color: rgba(255, 255, 255, 0.86);
}

/* Signature spark: warm amber punctuates the cherry identity. */
.section-label {
  color: var(--panda-coral-text);
}

.section-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-right: 0.65em;
  border-radius: 50%;
  background: var(--panda-coral);
  vertical-align: 0.1em;
  box-shadow: 0 0 0 3px rgba(242, 173, 63, 0.14);
}

.section-label--light,
.cta-section .section-label--light,
.adeco-contact-panel .section-label {
  color: #fff;
}

/* Cool graphite-tinted surfaces preserve Supertree's airy atmosphere. */
.pillars,
.about,
.faq,
.blog-listing,
.standard-page__content,
.adeco-editorial {
  background-color: var(--panda-haze);
}

.clients-bar,
.clients-bar-track,
.standard-page .blog,
.blog {
  background-color: var(--panda-haze-deep);
}

/* Primary actions. */
a.btn-primary,
.btn-primary > .wp-block-button__link,
.request-form button[type="submit"],
.cta-form-submit,
.blog-newsletter-form button,
.standard-page__hero-button--primary {
  background: var(--panda-green-600);
  color: #fff !important;
}

a.btn-primary:hover,
.btn-primary > .wp-block-button__link:hover,
.request-form button[type="submit"]:hover,
.cta-form-submit:hover,
.blog-newsletter-form button:hover {
  background: var(--panda-green-700);
}

.hero a.btn-primary,
.hero .btn-primary > .wp-block-button__link,
.nav:not(.scrolled) .nav-cta .btn-primary,
.cta-section .btn-primary--white > .wp-block-button__link {
  background: #fff;
  color: var(--panda-ink) !important;
}

.hero a.btn-primary:hover,
.hero .btn-primary > .wp-block-button__link:hover,
.nav:not(.scrolled) .nav-cta .btn-primary:hover,
.cta-section .btn-primary--white > .wp-block-button__link:hover {
  background: var(--panda-haze-deep);
  color: var(--panda-ink) !important;
}

.hero .btn-outline > .wp-block-button__link,
.cta-section .btn-outline--white > .wp-block-button__link {
  border-color: rgba(255, 255, 255, 0.68);
}

.hero .btn-outline > .wp-block-button__link:hover,
.cta-section .btn-outline--white > .wp-block-button__link:hover {
  border-color: rgba(255, 255, 255, 0.84);
  background: rgba(255, 255, 255, 0.14);
  color: #fff !important;
}

a.btn-text,
.btn-text > .wp-block-button__link,
.blog-card-meta .btn-text,
.adeco-resource-card__link {
  color: var(--panda-green-600);
}

a.btn-text::after,
.btn-text > .wp-block-button__link::after,
.blog-card-meta .btn-text::after,
.adeco-resource-card__link span {
  color: var(--panda-coral-text);
}

a.btn-text:hover,
.btn-text > .wp-block-button__link:hover,
.blog-card-meta .btn-text:hover,
.adeco-resource-card__link:hover {
  color: var(--panda-green-700);
}

/* Paper cards with restrained cherry depth. */
.pillar-card,
.blog-card,
.cta-card,
.form-card,
.adeco-resource-card,
.adeco-value-card,
.adeco-policy-card {
  border-color: var(--panda-hairline);
  background: var(--panda-paper);
  box-shadow: var(--card-shadow);
}

.pillar-card:hover,
.blog-card:hover,
.adeco-resource-card:hover,
.adeco-value-card:hover {
  border-color: #d5c7cd;
  box-shadow: 0 1px 0 rgba(10, 20, 50, 0.05), 0 26px 54px -18px rgba(199, 53, 87, 0.28);
}

.adeco-value-card__number {
  border: 1px solid var(--panda-hairline);
  background: var(--panda-haze-deep);
  color: var(--panda-green-700);
}

/* The real Panda lockup occupies the same Supertree split-image geometry,
   but sits on a calm graphite-tinted field instead of being cropped like a photo. */
.panda-about-mark {
  display: grid;
  place-items: center;
  background:
    radial-gradient(70% 70% at 28% 20%, rgba(255, 255, 255, 0.84), transparent 66%),
    linear-gradient(145deg, var(--panda-haze-deep), color-mix(in srgb, var(--panda-green-600) 17%, var(--panda-haze)));
}

.panda-about-mark img {
  width: 100%;
  height: 100%;
  padding: clamp(42px, 7vw, 92px);
  object-fit: contain !important;
  filter: none !important;
}

.panda-about-mark::after {
  background: linear-gradient(145deg, rgba(199, 53, 87, 0.07), rgba(242, 173, 63, 0.05));
  mix-blend-mode: normal;
}

.panda-notes-grid .blog-card-meta {
  justify-content: flex-end;
}

/* Graphite editorial grade, intentionally subtle and restrained. */
.pillar-card-image img,
.about-image img,
.blog-card-image img {
  filter: saturate(0.90) contrast(1.06) brightness(1.01);
  transition: filter 0.4s ease, transform 0.5s ease;
}

.pillar-card-image::after,
.blog-card-image::after,
.about-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  background:
    linear-gradient(rgba(199, 53, 87, 0.06), rgba(199, 53, 87, 0.06)),
    linear-gradient(180deg, transparent 50%, rgba(29, 36, 48, 0.24) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

.about-image {
  overflow: hidden;
  border-radius: var(--card-radius);
}

.pillar-card:hover .pillar-card-image img,
.blog-card:hover .blog-card-image img,
.about-image:hover img {
  filter: saturate(1) contrast(1.02) brightness(1.03);
}

.pillar-card:hover .pillar-card-image::after,
.blog-card:hover .blog-card-image::after,
.about-image:hover::after {
  opacity: 0.55;
}

.article-featured-min img {
  filter: saturate(0.94) brightness(1.01);
}

.blog-card-image-placeholder {
  position: relative;
  background: linear-gradient(135deg, var(--panda-haze-deep), var(--panda-haze));
}

.blog-card-image-placeholder::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--panda-coral);
  box-shadow: 0 0 0 8px rgba(242, 173, 63, 0.14);
  transform: translate(-50%, -50%);
}

/* Graphite CTA bands retain the same luminous aura as the hero. */
.cta-section,
.stats,
.adeco-contact-panel,
:is(.standard-page__content, .editor-styles-wrapper) .cta-section {
  background:
    radial-gradient(58% 78% at 92% 100%, rgba(199, 53, 87, 0.30), transparent 62%),
    linear-gradient(158deg, #343d4c 0%, #46505f 50%, #1a202a 100%);
}

.cta-section::before,
:is(.standard-page__content, .editor-styles-wrapper) .cta-section::before {
  background: radial-gradient(ellipse 60% 50% at 15% 20%, rgba(208, 219, 235, 0.38), transparent 64%);
}

.cta-section p:not(.form-consent):not(.cta-card-lead),
.adeco-contact-panel__copy > p:last-child {
  color: var(--panda-haze);
}

.cta-section .cta-card h3,
.form-card .section-label,
.cta-card .section-label {
  color: var(--panda-coral-text);
}

/* Frosted settled state fixes the hard bar shown in the user screenshot. */
.nav.scrolled,
.nav.mobile-open {
  border-bottom-color: var(--panda-hairline);
  background: color-mix(in srgb, var(--panda-haze) 84%, transparent);
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

.nav.scrolled .nav-links a:hover,
.nav.scrolled .nav-links a.active,
.nav.scrolled .nav-links .current-menu-item > a,
.nav.scrolled .nav-links .current_page_item > a {
  color: var(--panda-green-600);
}

/* Forms. */
.request-form .field input,
.request-form .field textarea,
.cta-form input,
.cta-form select,
.cta-form textarea,
.cta-card input,
.cta-card select,
.cta-card textarea {
  border-color: var(--panda-hairline) !important;
  background: #fff !important;
}

.request-form .field input:focus,
.request-form .field textarea:focus,
.cta-form input:focus,
.cta-form select:focus,
.cta-form textarea:focus,
.cta-card input:focus,
.cta-card select:focus,
.cta-card textarea:focus {
  border-color: var(--panda-green-600) !important;
  box-shadow: 0 0 0 3px rgba(199, 53, 87, 0.16) !important;
}

.faq-item summary::after {
  color: var(--panda-coral-text);
}

.faq-item[open] summary::after {
  border-color: var(--panda-green-600);
  background: var(--panda-green-600);
  color: #fff;
}

.blog-filter.active,
.pagination .page-numbers.current,
.search-results .page-numbers.current {
  border-color: var(--panda-green-600);
  background: var(--panda-green-600);
}

.blog-newsletter {
  background:
    radial-gradient(70% 140% at 0% 0%, rgba(199, 53, 87, 0.30), transparent 62%),
    var(--panda-ink);
}

.blog-card-eyebrow,
.blog-card-tag,
.search-result__type,
.adeco-resource-card__year,
.adeco-value-card__number,
.adeco-policy-card .section-label {
  color: var(--panda-coral-text);
}

/* Graphite-black footer with a precise cherry-to-amber hairline. */
.footer {
  background:
    linear-gradient(90deg, transparent 0, #c73557 22%, #f2ad3f 50%, transparent 78%) top / 100% 1px no-repeat,
    linear-gradient(180deg, #1b212c 0%, #0d1118 100%);
}

/* Footer is a deliberate sign-off, so the complete v2 lockup is appropriate. */
.footer-brand img {
  width: 76px;
  height: auto;
  margin-bottom: 20px;
  filter: brightness(0) invert(1);
}

.footer-col h4 {
  color: #fff;
}

.footer-brand p,
.footer-col a {
  color: rgba(255, 255, 255, 0.72);
}

.footer-col a:hover,
.footer-col a:focus-visible {
  color: #fff;
  text-decoration: underline;
  text-decoration-color: var(--panda-coral);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.footer-bottom p,
.footer-bottom a {
  color: rgba(255, 255, 255, 0.72);
}

.footer-bottom a:hover {
  color: #fff;
}

.adeco-contact-panel__button {
  background: #fff;
  color: var(--panda-ink);
}

.adeco-contact-panel__button:hover {
  background: var(--panda-haze-deep);
}

@media (max-width: 968px) {
  .nav-logo img {
    height: 50px;
  }
}

@media (max-width: 640px) {
  .nav-logo img {
    height: 48px;
  }

  .hero::after {
    width: 72vw;
    opacity: 0.024;
  }

  .standard-page__background-logo {
    right: -12%;
    width: 82vw;
    max-height: 62%;
    opacity: 0.022;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pillar-card-image img,
  .about-image img,
  .blog-card-image img,
  .pillar-card-image::after,
  .blog-card-image::after,
  .about-image::after {
    transition: none;
  }
}