/*
 * Site-wide Plexus background
 * Connected particles, network lines and low-opacity geometric facets.
 * The animation is decorative and never intercepts user input.
 */
:root {
  --plexus-primary-rgb: 143, 150, 255;
  --plexus-deep-rgb: 81, 89, 201;
  --plexus-warm-rgb: 201, 95, 36;
}

.plexus-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
  opacity: .92;
  contain: strict;
}

.plexus-stage::before,
.plexus-stage::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.plexus-stage::before {
  inset: -12%;
  background:
    radial-gradient(circle at 14% 18%, rgba(var(--plexus-primary-rgb), .13), transparent 25%),
    radial-gradient(circle at 83% 22%, rgba(var(--plexus-deep-rgb), .09), transparent 27%),
    radial-gradient(circle at 72% 82%, rgba(var(--plexus-primary-rgb), .105), transparent 29%);
  animation: plexusAmbientShift 18s ease-in-out infinite alternate;
}

.plexus-stage::after {
  width: min(42vw, 590px);
  aspect-ratio: 1;
  right: -12vw;
  top: 16vh;
  border: 1px solid rgba(var(--plexus-primary-rgb), .07);
  transform: rotate(28deg);
  background:
    linear-gradient(30deg, transparent 49.5%, rgba(var(--plexus-primary-rgb), .06) 50%, transparent 50.5%),
    linear-gradient(150deg, transparent 49.5%, rgba(var(--plexus-deep-rgb), .05) 50%, transparent 50.5%);
  animation: plexusMeshFloat 24s ease-in-out infinite alternate;
}

.plexus-stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

body.plexus-enabled {
  isolation: isolate;
}

body.portfolio-page.plexus-enabled {
  background:
    linear-gradient(rgba(249, 250, 255, .94), rgba(255, 255, 255, .94)),
    #f8f9ff;
}

body.portfolio-page.plexus-enabled > .l-main,
body.portfolio-page.plexus-enabled > .footer {
  position: relative;
  z-index: 1;
}

body.portfolio-page.plexus-enabled > .l-header,
body.portfolio-page.plexus-enabled > .site-loader,
body.portfolio-page.plexus-enabled > .scroll-progress,
body.portfolio-page.plexus-enabled > .cookie-banner,
body.portfolio-page.plexus-enabled > .cookie-modal,
body.portfolio-page.plexus-enabled > .back-to-top {
  z-index: 20;
}

/* Keep the network visible through large page surfaces without reducing text clarity. */
body.portfolio-page.plexus-enabled .l-main > section {
  background-color: rgba(255, 255, 255, .88) !important;
}

body.portfolio-page.plexus-enabled .l-main > section:nth-of-type(even) {
  background-color: rgba(247, 248, 255, .86) !important;
}

body.portfolio-page.plexus-enabled .cms-card,
body.portfolio-page.plexus-enabled .project-card,
body.portfolio-page.plexus-enabled .publication-card,
body.portfolio-page.plexus-enabled .editorial-card,
body.portfolio-page.plexus-enabled .service-card,
body.portfolio-page.plexus-enabled .client-card,
body.portfolio-page.plexus-enabled .testimonial-card,
body.portfolio-page.plexus-enabled .resource-card,
body.portfolio-page.plexus-enabled .faq-card,
body.portfolio-page.plexus-enabled .contact__form,
body.portfolio-page.plexus-enabled .contact__intro,
body.portfolio-page.plexus-enabled .appointment-panel,
body.portfolio-page.plexus-enabled .custom-form-card,
body.portfolio-page.plexus-enabled .public-form-shell,
body.portfolio-page.plexus-enabled .closed-form-state {
  background-color: rgba(255, 255, 255, .96) !important;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

/* Admin application integration. */
body.admin-body.plexus-enabled {
  position: relative;
  isolation: isolate;
  background: #f7f8ff;
}

body.admin-body.plexus-enabled > .plexus-stage {
  left: 270px;
  width: calc(100% - 270px);
  opacity: .72;
}

body.admin-body.plexus-enabled > .admin-shell {
  position: relative;
  z-index: 1;
}

body.admin-body.plexus-enabled .admin-main {
  background: rgba(247, 248, 251, .86);
}

body.admin-body.plexus-enabled .card,
body.admin-body.plexus-enabled .admin-card,
body.admin-body.plexus-enabled .form-builder-intro,
body.admin-body.plexus-enabled .builder-fieldset,
body.admin-body.plexus-enabled .admin-form-library-card,
body.admin-body.plexus-enabled .question-row,
body.admin-body.plexus-enabled .notification-dropdown {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes plexusAmbientShift {
  from { transform: translate3d(-1.5%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1.5%, 0) scale(1.05); }
}

@keyframes plexusMeshFloat {
  from { transform: translate3d(0, -2%, 0) rotate(25deg) scale(.98); }
  to { transform: translate3d(-7%, 6%, 0) rotate(36deg) scale(1.06); }
}

@media (max-width: 900px) {
  .plexus-stage { opacity: .78; }
  .plexus-stage::after { width: 72vw; right: -30vw; }
  body.admin-body.plexus-enabled > .plexus-stage {
    left: 0;
    width: 100%;
    opacity: .58;
  }
  body.portfolio-page.plexus-enabled .l-main > section {
    background-color: rgba(255, 255, 255, .92) !important;
  }
}

@media (max-width: 560px) {
  .plexus-stage { opacity: .64; }
  .plexus-stage::before { inset: -24%; }
  body.portfolio-page.plexus-enabled .l-main > section {
    background-color: rgba(255, 255, 255, .94) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plexus-stage::before,
  .plexus-stage::after {
    animation: none !important;
  }
}

@media print {
  .plexus-stage { display: none !important; }
}

/* ================================================================
   Hero visibility, soft-edge spacing and local Plexus surfaces
   ================================================================ */

html,
body.portfolio-page {
  overflow-x: clip;
}

/* Give content more usable width while preserving safe responsive gutters. */
body.portfolio-page .bd-grid {
  width: min(calc(100% - clamp(1.5rem, 5vw, 5.5rem)), 1420px);
  max-width: 1420px;
  margin-inline: auto;
}

/* The hero previously clipped social icons, long labels and 3D decorations. */
body.portfolio-page .home {
  width: min(calc(100% - clamp(1.25rem, 4vw, 4.5rem)), 1460px) !important;
  max-width: 1460px !important;
  min-height: max(760px, 94svh);
  overflow: visible !important;
  padding-inline: clamp(.5rem, 2.2vw, 2rem) !important;
  padding-bottom: clamp(4rem, 8vw, 7rem) !important;
}

body.portfolio-page .home__data,
body.portfolio-page .dynamic-hero-card,
body.portfolio-page .hero-card {
  min-width: 0;
  max-width: min(100%, 760px);
  overflow: visible !important;
}

body.portfolio-page .home__title,
body.portfolio-page .hero__summary,
body.portfolio-page .hero__availability,
body.portfolio-page .page-hero h1,
body.portfolio-page .page-hero p {
  overflow-wrap: anywhere;
  word-break: normal;
}

body.portfolio-page .home__social {
  position: relative;
  z-index: 5;
  padding-inline: .35rem;
}

body.portfolio-page .home__img.dynamic-profile-frame {
  right: clamp(.5rem, 2.5vw, 2.75rem) !important;
  max-width: min(42vw, 520px);
}

body.portfolio-page .three-hero-orb {
  inset: -4% !important;
}

/* Local stage sits above a section background but below all real content. */
.plexus-surface {
  position: relative !important;
  isolation: isolate;
  overflow: visible !important;
}

.plexus-local-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  user-select: none;
  opacity: .78;
  contain: layout paint style;
  mask-image: linear-gradient(90deg, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4.5%, #000 95.5%, transparent 100%);
}

.plexus-local-stage--hero {
  opacity: .98;
}

.plexus-local-stage--section {
  inset: clamp(.25rem, 1vw, .8rem) 0;
  border-radius: clamp(24px, 3vw, 44px);
  opacity: .72;
}

.plexus-local-stage::before,
.plexus-local-stage::after {
  content: "";
  position: absolute;
  inset-block: 0;
  width: clamp(42px, 7vw, 110px);
  z-index: 2;
  pointer-events: none;
}

.plexus-local-stage::before {
  left: 0;
  background: linear-gradient(90deg, rgba(249,250,255,.98), rgba(249,250,255,.34), transparent);
}

.plexus-local-stage::after {
  right: 0;
  background: linear-gradient(270deg, rgba(249,250,255,.98), rgba(249,250,255,.34), transparent);
}

.plexus-local-stage__canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

/* Keep every direct content child safely above the local animation. */
.plexus-surface > :not(.plexus-local-stage) {
  position: relative;
  z-index: 2;
}

/* Hero surfaces become translucent so the local network is clearly visible. */
body.portfolio-page .page-hero__inner.plexus-surface,
body.portfolio-page .page-hero.plexus-surface,
body.portfolio-page .article-hero.plexus-surface,
body.portfolio-page .publication-detail.plexus-surface,
body.portfolio-page .refined-article-hero.plexus-surface,
body.portfolio-page .refined-publication-detail.plexus-surface {
  background:
    linear-gradient(135deg, rgba(247,248,255,.78), rgba(255,255,255,.72) 62%),
    transparent !important;
  border: 1px solid rgba(var(--plexus-primary-rgb), .17);
  box-shadow: 0 26px 80px rgba(var(--plexus-deep-rgb), .10);
  border-radius: clamp(24px, 3vw, 38px);
}

body.portfolio-page .home.plexus-surface {
  background:
    radial-gradient(circle at 80% 25%, rgba(var(--plexus-primary-rgb), .13), transparent 35%),
    linear-gradient(135deg, rgba(251,252,255,.58), rgba(255,255,255,.30));
  border-radius: clamp(28px, 4vw, 58px);
  box-shadow:
    0 34px 110px rgba(var(--plexus-deep-rgb), .08),
    inset 0 0 0 1px rgba(var(--plexus-primary-rgb), .08);
}

/* Selected homepage sections receive an active, atmospheric network panel. */
body.portfolio-page .section.plexus-surface {
  background-color: rgba(255,255,255,.78) !important;
}

body.portfolio-page .section.plexus-surface:nth-of-type(even) {
  background-color: rgba(247,248,255,.76) !important;
}

/* Soft visual beginnings and endings without masking text or icons. */
body.portfolio-page .section.plexus-surface::selection,
body.portfolio-page .home.plexus-surface::selection {
  background: rgba(var(--plexus-primary-rgb), .28);
}

body.portfolio-page .logo-carousel-viewport,
body.portfolio-page .project-filter-panel,
body.portfolio-page .content-hub-strip,
body.portfolio-page .publication-actions,
body.portfolio-page .tag-cloud {
  scroll-padding-inline: clamp(1rem, 4vw, 3rem);
}

/* Fade the edges of horizontal tracks only; never fade the actual hero copy. */
body.portfolio-page .logo-carousel-viewport {
  padding-inline: clamp(1rem, 3vw, 2.5rem);
  margin-inline: clamp(-2rem, -2vw, -1rem);
  mask-image: linear-gradient(90deg, transparent 0, #000 clamp(1.2rem, 4vw, 4rem), #000 calc(100% - clamp(1.2rem, 4vw, 4rem)), transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 clamp(1.2rem, 4vw, 4rem), #000 calc(100% - clamp(1.2rem, 4vw, 4rem)), transparent 100%);
}

@media (max-width: 1050px) {
  body.portfolio-page .home {
    min-height: auto;
    padding-top: 8.25rem !important;
  }

  body.portfolio-page .home__img.dynamic-profile-frame {
    right: 0 !important;
    max-width: min(46vw, 430px);
  }
}

@media (max-width: 767px) {
  body.portfolio-page .bd-grid,
  body.portfolio-page .home,
  body.portfolio-page .page-hero.bd-grid,
  body.portfolio-page .portfolio-cta.bd-grid,
  body.portfolio-page .contact__container.bd-grid {
    width: min(calc(100% - 1.25rem), 100%) !important;
  }

  body.portfolio-page .home {
    padding-inline: .35rem !important;
    padding-bottom: 3.5rem !important;
    border-radius: 28px;
  }

  body.portfolio-page .home__data,
  body.portfolio-page .dynamic-hero-card,
  body.portfolio-page .hero-card {
    max-width: 100%;
  }

  body.portfolio-page .home__img.dynamic-profile-frame {
    position: relative !important;
    right: auto !important;
    bottom: auto !important;
    width: min(100%, 390px) !important;
    max-width: 390px;
    justify-self: center;
    margin: 1.25rem auto 0;
  }

  body.portfolio-page .home__social {
    padding-inline: .6rem;
  }

  body.portfolio-page .hero__metrics {
    grid-template-columns: 1fr !important;
  }

  .plexus-local-stage {
    opacity: .72;
    mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 2.5%, #000 97.5%, transparent 100%);
  }

  .plexus-local-stage--hero {
    opacity: .86;
  }

  .plexus-local-stage::before,
  .plexus-local-stage::after {
    width: 34px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .plexus-local-stage {
    opacity: .52;
  }
}

@media print {
  .plexus-local-stage {
    display: none !important;
  }
}

/* Preserve intentionally positioned hero media after the generic content layering rule. */
body.portfolio-page .home.plexus-surface > .home__img {
  position: absolute;
}

@media (max-width: 767px) {
  body.portfolio-page .home.plexus-surface > .home__img {
    position: relative !important;
  }
}

/* ================================================================
   Homepage section edge treatment
   Borderless splash fades decorate both sides of the main content area without
   drawing hard rails or masking section content.
   ================================================================ */
body.home-page .l-main > section.home,
body.home-page .l-main > section.section,
body.home-page .l-main > section.portfolio-cta {
  position: relative;
  isolation: isolate;
}

.section-edge-fade {
  position: absolute !important;
  z-index: 1 !important;
  top: clamp(1.25rem, 7%, 4rem);
  bottom: clamp(1.25rem, 7%, 4rem);
  width: clamp(76px, 8vw, 132px);
  pointer-events: none;
  opacity: .82;
  filter: blur(.35px);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
  background:
    radial-gradient(ellipse 62% 14% at 10% 12%, rgba(143,150,255,.24) 0 28%, rgba(143,150,255,.08) 52%, transparent 74%),
    radial-gradient(circle at 28% 22%, rgba(112,105,244,.34) 0 2px, transparent 4px),
    radial-gradient(circle at 12% 29%, rgba(143,150,255,.30) 0 3px, transparent 5px),
    radial-gradient(ellipse 78% 18% at 4% 41%, rgba(91,87,201,.30) 0 18%, rgba(143,150,255,.11) 42%, transparent 72%),
    radial-gradient(circle at 34% 49%, rgba(143,150,255,.38) 0 2px, transparent 4px),
    radial-gradient(circle at 18% 56%, rgba(91,87,201,.26) 0 4px, transparent 7px),
    radial-gradient(ellipse 70% 17% at 7% 68%, rgba(143,150,255,.28) 0 20%, rgba(143,150,255,.09) 44%, transparent 74%),
    radial-gradient(circle at 31% 77%, rgba(112,105,244,.32) 0 3px, transparent 5px),
    radial-gradient(circle at 14% 86%, rgba(143,150,255,.28) 0 2px, transparent 5px),
    radial-gradient(ellipse 58% 13% at 8% 94%, rgba(91,87,201,.23) 0 24%, transparent 72%);
  background-repeat: no-repeat;
}

.section-edge-fade::before,
.section-edge-fade::after {
  content: '';
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  background: rgba(143,150,255,.18);
  filter: blur(8px);
}

.section-edge-fade::before {
  width: 42px;
  height: 84px;
  left: -8px;
  top: 28%;
  transform: rotate(-14deg);
}

.section-edge-fade::after {
  width: 30px;
  height: 64px;
  left: 6px;
  bottom: 18%;
  transform: rotate(18deg);
  opacity: .76;
}

.section-edge-fade--left {
  left: max(-28px, calc((100% - 1420px) / 2 - 58px));
}

.section-edge-fade--right {
  right: max(-28px, calc((100% - 1420px) / 2 - 58px));
  transform: scaleX(-1);
}

body.home-page .l-main > section.plexus-surface > .plexus-local-stage {
  position: absolute;
  z-index: 0;
}

@media (max-width: 767px) {
  .section-edge-fade {
    width: 68px;
    top: .9rem;
    bottom: .9rem;
    opacity: .62;
  }

  .section-edge-fade--left {
    left: -24px;
  }

  .section-edge-fade--right {
    right: -24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-edge-fade { opacity: .55; }
}

/* ================================================================
   Full-width homepage section correction
   Main homepage surfaces span the complete viewport width. Their readable
   content keeps responsive inner breathing room, while splash fades sit at
   the real left and right edges instead of a former fixed-width container.
   ================================================================ */
body.home-page .l-main {
  width: 100%;
  max-width: none;
  overflow-x: clip;
}

body.home-page .l-main > section.home,
body.home-page .l-main > section.section,
body.home-page .l-main > section.portfolio-cta {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box;
}

/* The hero is itself a .bd-grid section, so it receives its own full-width
   responsive gutters. Other sections keep their title and copy aligned to the
   same gutters while their internal grids are allowed to use all available room. */
body.home-page .l-main > section.home.bd-grid {
  width: 100% !important;
  max-width: none !important;
  padding-left: clamp(1rem, 4vw, 4.75rem) !important;
  padding-right: clamp(1rem, 4vw, 4.75rem) !important;
}

body.home-page .l-main > section.section {
  padding-left: clamp(1rem, 4vw, 4.75rem) !important;
  padding-right: clamp(1rem, 4vw, 4.75rem) !important;
}

body.home-page .l-main > section.section > .bd-grid,
body.home-page .l-main > section.section > [class*="__container"].bd-grid,
body.home-page .l-main > section.section > [class$="-grid"].bd-grid,
body.home-page .l-main > section.portfolio-cta.bd-grid {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}

/* Remove the old centred-container edge calculation. */
body.home-page .section-edge-fade--left {
  left: 0 !important;
}

body.home-page .section-edge-fade--right {
  right: 0 !important;
}

@media (max-width: 767px) {
  body.home-page .l-main > section.home.bd-grid,
  body.home-page .l-main > section.section {
    padding-left: .85rem !important;
    padding-right: .85rem !important;
  }

  body.home-page .section-edge-fade--left {
    left: -14px !important;
  }

  body.home-page .section-edge-fade--right {
    right: -14px !important;
  }
}