/* ============================================================
   The BrainTree — alternate direction "warm editorial"
   Loads AFTER redesign.css and only overrides what it defines.
   The hero block is intentionally untouched (v1 rules still
   apply to it), so the approved headline area stays identical.

   Enable with <body class="rd rd2">. Remove "rd2" (and this
   <link>) to return to the first direction.
   ============================================================ */

/* ============================================================
   Shared tokens on :root so the site-wide components (network
   band, register button) keep their palette on any page.
   ============================================================ */
:root {
  --w-bg: #fbf7f2;
  --w-bg-2: #f3ece1;
  --w-ink: #0f2233;
  --w-ink-2: #3d5567;
  --w-line: #e7dfd3;
  --w-blue: #0056b3;
  --w-amber: #f2a900;
  --w-amber-deep: #a97300;
}

body.rd2 {
  --w-bg: #fbf7f2;
  --w-bg-2: #f3ece1;
  --w-ink: #0f2233;
  --w-ink-2: #3d5567;
  --w-line: #e7dfd3;
  --w-blue: #0056b3;
  --w-amber: #f2a900;
  --w-amber-deep: #a97300;

  background: var(--w-bg);
  color: var(--w-ink-2);
}

/* Headings inherit their surface colour, so a heading sitting on a dark
   panel (or a photographic banner) stays legible. Light editorial
   surfaces below re-declare deep ink explicitly. */
body.rd2 h1,
body.rd2 h2,
body.rd2 h3,
body.rd2 h4,
body.rd2 h5 {
  color: inherit;
}

body.rd2 .rd-sec h2,
body.rd2 .rd-sec h3,
body.rd2 .rd-sec h4,
body.rd2 .rd-h2,
body.rd2 .rd-h3,
body.rd2 .rd-svc h3,
body.rd2 .rd-acc__head h2,
body.rd2 .rd-net__title {
  color: var(--w-ink);
}

/* ------------------------------------------------------------
   Rhythm + section heads
   ------------------------------------------------------------ */
body.rd2 .rd-sec {
  padding: clamp(72px, 7.5vw, 112px) 0;
  background: transparent;
}

body.rd2 .rd-sec--mist {
  background:
    radial-gradient(760px 340px at 88% -10%, rgba(242, 169, 0, .12), transparent 62%),
    radial-gradient(620px 320px at 4% 100%, rgba(0, 86, 179, .08), transparent 60%),
    rgba(243, 236, 225, .82);
}

body.rd2 .rd-sec__head {
  text-align: left;
  max-width: 720px;
  margin: 0 0 clamp(36px, 4vw, 54px);
}

body.rd2 .rd-h2 {
  font-size: clamp(2rem, 3.3vw, 2.95rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  margin: 0;
}

body.rd2 .rd-h3 {
  font-size: clamp(1.7rem, 2.6vw, 2.3rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
  margin: 0 0 18px;
}

body.rd2 .rd-rule {
  width: 56px;
  height: 4px;
  border-radius: 99px;
  background: var(--w-amber);
  margin: 18px 0 0;
}

body.rd2 .rd-rule--left {
  margin: 0 0 18px;
  width: 40px;
}

body.rd2 .rd-lead {
  line-height: 1.85;
  color: var(--w-ink-2);
}

/* ------------------------------------------------------------
   Header — warm paper, solid ink CTA, amber underline
   ------------------------------------------------------------ */
body.rd2 #header {
  background: rgba(251, 247, 242, .92);
  border-bottom: 1px solid var(--w-line);
  box-shadow: none;
}

body.rd2 #header nav > .hidden.lg\:flex > a:not(.btn-primary)::after,
body.rd2 #header nav .group > a::after {
  background: var(--w-amber);
  height: 2px;
}

body.rd2 #header nav > .hidden.lg\:flex > a:not(.btn-primary):hover,
body.rd2 #header nav .group > a:hover {
  color: var(--w-ink);
}

body.rd2 #header .btn-primary {
  background: var(--w-ink);
  color: #fff;
  box-shadow: 0 12px 24px -16px rgba(15, 34, 51, .8);
}

body.rd2 #header .btn-primary:hover {
  background: #17334b;
  box-shadow: 0 18px 30px -16px rgba(15, 34, 51, .85);
}

body.rd2 #header .rd-menu {
  border-color: var(--w-line);
}

body.rd2 #header .rd-menu a:hover {
  background: var(--w-bg-2);
  color: var(--w-ink);
}

/* ------------------------------------------------------------
   About — editorial deck + soft chips + ink form panel
   ------------------------------------------------------------ */
body.rd2 .rd-about__grid {
  grid-template-columns: 1.08fr .92fr;
  gap: clamp(36px, 5vw, 72px);
}

body.rd2 .rd-about__intro h3 {
  font-size: clamp(1.06rem, 1.35vw, 1.2rem);
  font-weight: 700;
  color: var(--w-amber-deep);
  letter-spacing: -.005em;
  margin: 0 0 18px;
}

body.rd2 .rd-feats {
  gap: 12px;
  margin-top: 32px;
}

body.rd2 .rd-feat {
  background: var(--w-bg-2);
  border: 1px solid transparent;
  border-radius: 16px;
  box-shadow: none;
  padding: 15px 17px;
}

body.rd2 .rd-feat:hover {
  background: #fff;
  border-color: var(--w-line);
  box-shadow: 0 20px 36px -30px rgba(15, 34, 51, .8);
}

body.rd2 .rd-feat__icon {
  background: #fff;
  border: 1px solid var(--w-line);
  color: var(--w-amber-deep);
  border-radius: 999px;
}

body.rd2 .rd-formcard {
  background: var(--w-ink);
  border: 0;
  border-radius: 30px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 0 46px 80px -50px rgba(15, 34, 51, .95);
  color: #c3d5e3;
}

body.rd2 .rd-formcard::before {
  height: 4px;
  background: var(--w-amber);
}

body.rd2 .rd-formcard::after {
  background: radial-gradient(circle, rgba(242, 169, 0, .18), transparent 70%);
}

body.rd2 .rd-formcard h3 {
  color: #fff;
  font-size: 1.42rem;
  letter-spacing: -.02em;
  margin: 4px 0 24px;
}

body.rd2 .rd-field label {
  color: #9db3c6;
  letter-spacing: .09em;
}

body.rd2 .rd-input {
  height: 50px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  color: #fff;
  color-scheme: dark;
}

body.rd2 .rd-input::placeholder {
  color: #7d95a9;
}

body.rd2 .rd-input:focus {
  background: rgba(255, 255, 255, .1);
  border-color: var(--w-amber);
  box-shadow: 0 0 0 4px rgba(242, 169, 0, .18);
}

body.rd2 .rd-formcard button[type="submit"] {
  height: 52px;
  border-radius: 13px;
  background: var(--w-amber);
  color: #12202e;
  font-weight: 800;
  box-shadow: 0 16px 28px -18px rgba(242, 169, 0, .95);
}

body.rd2 .rd-formcard button[type="submit"]:hover {
  background: #ffbe2e;
  box-shadow: 0 22px 36px -18px rgba(242, 169, 0, .95);
}

/* ------------------------------------------------------------
   Services — clean cards, ghost numerals, amber rail on hover
   ------------------------------------------------------------ */
body.rd2 .rd-svc-grid {
  gap: 18px;
}

body.rd2 .rd-svc {
  padding: 30px 28px 32px;
  border-radius: 24px;
  border-color: var(--w-line);
  box-shadow: none;
  background: #fff;
}

body.rd2 .rd-svc::before {
  inset: 14px auto 14px 0;
  height: auto;
  width: 3px;
  border-radius: 99px;
  background: var(--w-amber);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .35s ease;
}

body.rd2 .rd-svc:hover {
  transform: translateY(-4px);
  border-color: #d8cbb6;
  box-shadow: 0 34px 54px -42px rgba(15, 34, 51, .9);
}

body.rd2 .rd-svc:hover::before {
  transform: scaleY(1);
}

body.rd2 .rd-svc__num {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 999px;
  background: var(--w-bg-2);
  color: var(--w-ink);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: 0;
  opacity: 1;
  transition: background-color .3s ease, color .3s ease;
}

body.rd2 .rd-svc:hover .rd-svc__num {
  background: var(--w-amber);
  color: #12202e;
}

body.rd2 .rd-svc h3 {
  font-size: 1.08rem;
  letter-spacing: -.01em;
  margin-top: 36px;
  padding-right: 0;
}

body.rd2 .rd-svc p {
  font-size: .925rem;
  line-height: 1.72;
}

body.rd2 .rd-btn--solid {
  background: var(--w-ink);
  border-radius: 999px;
  height: 54px;
}

body.rd2 .rd-btn--solid:hover {
  background: #17334b;
}

/* ------------------------------------------------------------
   Who can we help — warm frame instead of blue blob
   ------------------------------------------------------------ */
body.rd2 .rd-media::before {
  inset: 16px -16px -16px 16px;
  width: auto;
  height: auto;
  border-radius: 34px;
  background: linear-gradient(150deg, rgba(242, 169, 0, .3), rgba(0, 86, 179, .12));
}

body.rd2 .rd-media img {
  border-radius: 30px;
  border: 7px solid #fff;
  box-shadow: 0 40px 70px -46px rgba(15, 34, 51, .9);
}

body.rd2 .rd-media__dot {
  background-image: radial-gradient(var(--w-amber) 1.6px, transparent 1.6px);
  opacity: .5;
  width: 110px;
  height: 110px;
  left: -18px;
  top: -18px;
}

/* ------------------------------------------------------------
   Milestones — quiet rows with amber spine when open
   ------------------------------------------------------------ */
body.rd2 .rd-acc-list {
  margin: 0;
  max-width: 900px;
}

body.rd2 .rd-acc {
  position: relative;
  border-radius: 18px;
  border-color: var(--w-line);
  box-shadow: none;
}

body.rd2 .rd-acc::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 99px;
  background: var(--w-amber);
  opacity: 0;
  transition: opacity .25s ease;
}

body.rd2 .rd-acc.is-open {
  border-color: #d8cbb6;
  box-shadow: 0 26px 46px -40px rgba(15, 34, 51, .9);
}

body.rd2 .rd-acc.is-open::before {
  opacity: 1;
}

body.rd2 .rd-acc__head {
  padding: 20px 26px;
}

body.rd2 .rd-acc__head:hover {
  background: #fdfbf7;
}

body.rd2 .rd-acc__head h2 {
  font-size: 1.03rem;
  letter-spacing: -.01em;
}

body.rd2 .rd-acc__head .fa-chevron-down {
  background: var(--w-bg-2);
  color: var(--w-ink);
}

body.rd2 .rd-acc.is-open .rd-acc__head .fa-chevron-down {
  background: var(--w-amber);
  color: #12202e;
}

body.rd2 .rd-acc__body>div {
  border-top-color: #f0e9de;
  padding: 4px 26px 26px;
}

body.rd2 .rd-acc__body li::before {
  background: var(--w-amber);
}

/* ------------------------------------------------------------
   CTA — sand panel so the dark footer keeps its weight
   ------------------------------------------------------------ */
body.rd2 .rd-cta {
  background: var(--w-bg);
}

body.rd2 .rd-cta__panel {
  background: var(--w-bg-2);
  border: 1px solid var(--w-line);
  border-radius: 32px;
  box-shadow: 0 40px 70px -60px rgba(15, 34, 51, .6);
  color: var(--w-ink-2);
}

body.rd2 .rd-cta__panel::before {
  background-image: radial-gradient(rgba(15, 34, 51, .14) 1px, transparent 1px);
  opacity: .5;
  -webkit-mask-image: linear-gradient(120deg, transparent 40%, #000 100%);
  mask-image: linear-gradient(120deg, transparent 40%, #000 100%);
}

body.rd2 .rd-cta h3 {
  color: var(--w-ink);
}

body.rd2 .rd-cta__phone {
  color: var(--w-ink);
  letter-spacing: -.02em;
}

body.rd2 .rd-cta h4 {
  color: var(--w-ink);
}

body.rd2 .rd-cta__sub {
  color: #5c7183;
}

body.rd2 .rd-cta__form form {
  background: #fff;
  border-color: var(--w-line);
  padding: 7px;
  border-radius: 16px;
  backdrop-filter: none;
}

body.rd2 .rd-cta__form input[type="email"] {
  background: #fff;
  color: var(--w-ink);
}

body.rd2 .rd-cta__form input[type="email"]:focus {
  outline: 2px solid rgba(15, 34, 51, .35);
}

body.rd2 .rd-cta__form button {
  background: var(--w-ink);
  color: #fff;
  border-radius: 11px;
}

body.rd2 .rd-cta__form button:hover {
  background: var(--w-amber);
  color: #12202e;
}

/* ------------------------------------------------------------
   Footer + back-to-top
   ------------------------------------------------------------ */
body.rd2 #footer {
  background:
    radial-gradient(700px 300px at 10% 0%, rgba(242, 169, 0, .1), transparent 62%),
    radial-gradient(600px 300px at 92% 0%, rgba(0, 86, 179, .16), transparent 62%),
    #0c1c2b;
  color: #a9bccd;
}

body.rd2 #footer .bg-gray-800\/60 {
  background: rgba(255, 255, 255, .05);
  border-radius: 18px;
}

body.rd2 #footer .bg-gradient-to-r {
  background-image: linear-gradient(90deg, #f2a900, rgba(242, 169, 0, .35));
}

body.rd2 #footer .bg-primary\/20 {
  background-color: rgba(242, 169, 0, .16);
}

body.rd2 #footer .text-blue-300 {
  color: #f6c65a;
}

body.rd2 #footer .fa-map-marker-alt,
body.rd2 #footer .fa-phone-alt,
body.rd2 #footer .fa-envelope {
  color: #f6c65a;
}

body.rd2 #back-to-top {
  background: var(--w-ink);
  box-shadow: 0 14px 26px -12px rgba(15, 34, 51, .9);
}

body.rd2 #back-to-top:hover {
  background: #17334b;
}

/* ============================================================
   Decorative 3D depth layer
   Fixed behind the transparent light sections; the hero and
   footer are opaque so they keep their own treatment.
   ============================================================ */
.rd3d {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(58% 46% at 12% 4%, rgba(242, 169, 0, .1), transparent 72%),
    radial-gradient(52% 44% at 90% 26%, rgba(0, 86, 179, .08), transparent 72%),
    var(--w-bg);
}

.rd3d__orb {
  position: absolute;
  border-radius: 50%;
}

.rd3d__orb--a {
  width: 54vw;
  height: 54vw;
  left: -16vw;
  top: 3vh;
  background: radial-gradient(circle at 40% 36%, rgba(255, 198, 82, .34), rgba(242, 169, 0, .1) 52%, transparent 72%);
  animation: rd3dDrift 26s ease-in-out infinite alternate;
}

.rd3d__orb--b {
  width: 46vw;
  height: 46vw;
  right: -12vw;
  bottom: 4vh;
  background: radial-gradient(circle at 46% 42%, rgba(86, 160, 255, .34), rgba(0, 86, 179, .09) 54%, transparent 74%);
  animation: rd3dDrift 34s ease-in-out infinite alternate-reverse;
}

/* orbiting gradient ring, tilted in 3D */
.rd3d__ring {
  position: absolute;
  left: -7vw;
  top: 34vh;
  width: clamp(190px, 22vw, 330px);
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: .3;
  filter: blur(2px);
  background: conic-gradient(from 0deg,
      rgba(242, 169, 0, .62),
      rgba(0, 86, 179, .42) 38%,
      rgba(242, 169, 0, 0) 66%,
      rgba(242, 169, 0, .62));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 15px), #000 calc(100% - 14px));
  animation: rd3dOrbit 26s linear infinite;
  will-change: transform;
}

/* perspective grid floor */
.rd3d__grid {
  position: absolute;
  left: -30%;
  right: -30%;
  bottom: 4vh;
  height: 62vh;
  background-image:
    linear-gradient(to right, rgba(15, 34, 51, .18) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 34, 51, .18) 1px, transparent 1px);
  background-size: 72px 72px;
  transform: perspective(520px) rotateX(70deg);
  transform-origin: bottom center;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .28) 44%, transparent 78%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .28) 44%, transparent 78%);
  opacity: .6;
}

@keyframes rd3dDrift {
  from {
    transform: translate3d(0, 0, 0) scale(1);
  }

  to {
    transform: translate3d(4vw, -3vh, 0) scale(1.08);
  }
}

@keyframes rd3dOrbit {
  from {
    transform: rotate3d(1, .6, .2, 56deg) rotateZ(0deg);
  }

  to {
    transform: rotate3d(1, .6, .2, 56deg) rotateZ(360deg);
  }
}

/* cards get real perspective on hover */
body.rd2 .rd-svc-grid {
  perspective: 1400px;
}

body.rd2 .rd-svc {
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), box-shadow .35s ease, border-color .35s ease;
}

body.rd2 .rd-svc:hover {
  transform: translateY(-6px) rotateX(2.4deg) rotateY(-2.4deg);
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 1024px) {
  body.rd2 .rd-about__grid {
    grid-template-columns: 1fr;
  }

  .rd3d__grid {
    display: none;
  }

}

@media (max-width: 767px) {
  .rd3d__ring {
    display: none;
  }


  .rd3d__orb--a,
  .rd3d__orb--b {
    opacity: .7;
  }
}

@media (max-width: 640px) {
  body.rd2 .rd-svc {
    padding: 26px 22px 28px;
  }

  body.rd2 .rd-svc__num {
    top: 20px;
    right: 20px;
  }

  body.rd2 .rd-acc__head {
    padding: 18px 20px;
  }

  body.rd2 .rd-acc__body>div {
    padding: 4px 20px 22px;
  }

  body.rd2 .rd-cta__panel {
    border-radius: 24px;
  }
}

/* ============================================================
   Shared chrome — loaded on every page, not just the homepage
   ============================================================ */

/* Top bar wears the ink/amber palette too */
body.rd2 #top-bar {
  background: linear-gradient(90deg, #0b1a29, #14293e 62%, #0c1c2b);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}

body.rd2 #top-bar i {
  color: #f6c65a;
}

body.rd2 #header.is-scrolled {
  background: rgba(251, 247, 242, .97);
  backdrop-filter: saturate(150%) blur(14px);
  box-shadow: 0 20px 42px -34px rgba(15, 34, 51, .95);
}

/* nav rhythm — hand-written because the project ships a pre-compiled
   Tailwind build that does not contain the newer spacing utilities */
body.rd2 #header .rd-nav {
  gap: 14px;
}

@media (min-width: 1280px) {
  body.rd2 #header .rd-nav {
    gap: 26px;
  }
}

/* 1024-1279px: the full nav plus two CTAs is wider than the header.
   Use the compact menu there instead (Registration and Appointment
   are both inside it). No Tailwind build needed. */
@media (min-width: 1024px) and (max-width: 1279px) {
  body.rd2 #header .rd-nav {
    display: none;
  }

  body.rd2 #header #rd-burger {
    display: block;
  }

  body.rd2 #header #mobile-menu:not(.hidden) {
    display: block;
    padding-bottom: 18px;
  }
}

/* footer bottom links */
body.rd2 #footer .rd-foot-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
}

@media (min-width: 768px) {
  body.rd2 #footer .rd-foot-links {
    justify-content: flex-end;
    padding-right: 64px;
  }
}

/* current-section link stays underlined */
body.rd2 #header nav > .hidden.lg\:flex > a.rd-navlink.is-active::after,
body.rd2 #header nav .group > a.is-active::after {
  transform: scaleX(1);
}

body.rd2 #header nav > .hidden.lg\:flex > a.rd-navlink.is-active,
body.rd2 #header nav .group > a.is-active {
  color: var(--w-ink);
}

body.rd2 #mobile-menu a.is-active {
  color: var(--w-ink);
  box-shadow: inset 3px 0 0 var(--w-amber);
}

body.rd2 #mobile-menu .bg-primary {
  background-color: var(--w-ink);
  background-image: none;
  border-radius: 999px;
}

/* ------------------------------------------------------------
   Registration button (header + mobile menu + footer)
   Sits in its own slot so the generic nav-link rules skip it.
   ------------------------------------------------------------ */
.rd-reg-slot {
  display: inline-flex;
  align-items: center;
}

body.rd2 .rd-nav-reg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1px solid rgba(15, 34, 51, .16);
  background: #fff;
  color: var(--w-ink);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .9rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1;
  box-shadow: 0 12px 24px -20px rgba(15, 34, 51, .85);
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease,
    border-color .25s ease, color .25s ease;
}

body.rd2 .rd-nav-reg i {
  font-size: .8rem;
  color: var(--w-amber-deep);
  transition: color .25s ease;
}

body.rd2 .rd-nav-reg:hover {
  transform: translateY(-2px);
  background: var(--w-amber);
  border-color: var(--w-amber);
  color: #12202e;
  box-shadow: 0 20px 32px -20px rgba(169, 115, 0, .95);
}

body.rd2 .rd-nav-reg:hover i {
  color: #12202e;
}

body.rd2 .rd-nav-reg--block {
  justify-content: center;
  width: 100%;
  margin-top: 18px;
  padding: 14px 22px;
}

body.rd2 #footer .rd-foot-reg {
  color: #f6c65a;
  font-weight: 600;
}

body.rd2 #footer .rd-foot-reg:hover {
  color: #fff;
}

/* ============================================================
   Depth layer — richer version, still one aria-hidden element
   ============================================================ */
.rd3d {
  inset: -24px;
  transform: translate3d(calc(var(--rd-px, 0) * 26px), calc(var(--rd-py, 0) * 20px), 0);
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
  will-change: transform;
}

/* slow holographic mesh turning behind everything */
.rd3d__mesh {
  position: absolute;
  top: -22vh;
  left: 50%;
  width: 104vw;
  height: 104vh;
  margin-left: -52vw;
  background: conic-gradient(from 214deg at 50% 50%,
      rgba(242, 169, 0, .18),
      rgba(0, 86, 179, .12) 26%,
      rgba(122, 86, 214, .1) 50%,
      rgba(15, 143, 131, .1) 72%,
      rgba(242, 169, 0, .18));
  filter: blur(64px);
  opacity: .45;
  animation: rd3dSpin 78s linear infinite;
}

@keyframes rd3dSpin {
  to {
    transform: rotate(360deg);
  }
}

/* angled light shaft, the strongest depth cue in the set */
.rd3d__beam {
  position: absolute;
  top: -12%;
  left: 4%;
  width: 46vw;
  height: 148%;
  background: linear-gradient(92deg, transparent, rgba(255, 255, 255, .62) 46%, transparent);
  filter: blur(30px);
  mix-blend-mode: soft-light;
  animation: rd3dBeam 26s ease-in-out infinite alternate;
}

@keyframes rd3dBeam {
  from {
    opacity: .3;
    transform: rotate(12deg) translateX(-2vw);
  }

  to {
    opacity: .6;
    transform: rotate(17deg) translateX(3vw);
  }
}

/* ============================================================
   Scroll reveals — progressive enhancement only.
   Without JS nothing is ever hidden; html.rd-nomotion is the
   escape hatch if the observer setup throws.
   ============================================================ */
html.rd-js .body-inner > section:not(.rd-hero),
html.rd-js .body-inner > div[style*="background-image"] {
  transition: opacity .75s ease, transform .75s cubic-bezier(.2, .7, .3, 1);
}

html.rd-js .body-inner > section:not(.rd-hero):not(.rd-in),
html.rd-js .body-inner > div[style*="background-image"]:not(.rd-in) {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
}

html.rd-nomotion .body-inner > section,
html.rd-nomotion .body-inner > div[style*="background-image"] {
  opacity: 1 !important;
  transform: none !important;
}

@media (prefers-reduced-motion: reduce) {

  html.rd-js .body-inner > section,
  html.rd-js .body-inner > div[style*="background-image"] {
    opacity: 1 !important;
    transform: none !important;
  }

  .rd3d__mesh,
  .rd3d__beam,
  .rd3d__ring,
  .rd3d__orb {
    animation: none !important;
  }
}

/* ============================================================
   "Explore Our Other Services" band — every page, above footer
   ============================================================ */
.rd-net {
  position: relative;
  overflow: hidden;
  padding: clamp(58px, 6.4vw, 92px) 0 clamp(56px, 6vw, 84px);
  background:
    radial-gradient(760px 320px at 90% -12%, rgba(242, 169, 0, .17), transparent 66%),
    radial-gradient(680px 320px at 4% 118%, rgba(0, 86, 179, .12), transparent 64%),
    var(--w-bg-2);
  border-top: 1px solid var(--w-line);
  color: var(--w-ink-2);
}

.rd-net__glow {
  position: absolute;
  left: 50%;
  top: -170px;
  width: 640px;
  height: 340px;
  margin-left: -320px;
  background: radial-gradient(circle, rgba(242, 169, 0, .24), transparent 68%);
  filter: blur(28px);
  pointer-events: none;
}

.rd-net__inner {
  position: relative;
}

.rd-net__head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 660px;
}

.rd-net__eyebrow {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--w-amber-deep);
}

.rd-net__title {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  color: var(--w-ink);
  margin: 0;
}

.rd-net__lead {
  margin: 14px 0 0;
  max-width: 58ch;
  line-height: 1.78;
  color: #4a6274;
}

.rd-net__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(212px, 1fr));
  gap: 14px;
  margin-top: clamp(26px, 3.4vw, 42px);
  perspective: 1200px;
}

.rd-net__card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 20px 20px;
  border-radius: 20px;
  background: #fff;
  color: var(--w-ink);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--w-line), 0 24px 40px -36px rgba(15, 34, 51, .7);
  transform-style: preserve-3d;
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s ease;
}

.rd-net__card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--net-tone, var(--w-amber));
  transform: scaleY(.32);
  transform-origin: top;
  opacity: .75;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1), opacity .3s ease;
}

.rd-net__card::after {
  content: "";
  position: absolute;
  right: -46px;
  top: -46px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--net-soft, rgba(242, 169, 0, .16)), transparent 70%);
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}

.rd-net__card:hover {
  transform: translateY(-7px) rotateX(4deg) rotateY(-4deg);
  box-shadow: inset 0 0 0 1px rgba(15, 34, 51, .1), 0 38px 58px -34px rgba(15, 34, 51, .72);
}

.rd-net__card:hover::before {
  transform: scaleY(1);
  opacity: 1;
}

.rd-net__card:hover::after {
  opacity: 1;
}

.rd-net__card--amber {
  --net-tone: #f2a900;
  --net-soft: rgba(242, 169, 0, .2);
  --net-ink: #8a5c00;
}

.rd-net__card--blue {
  --net-tone: #0056b3;
  --net-soft: rgba(0, 86, 179, .16);
  --net-ink: #00458f;
}

.rd-net__card--teal {
  --net-tone: #0f8f83;
  --net-soft: rgba(15, 143, 131, .18);
  --net-ink: #0a6b62;
}

.rd-net__card--violet {
  --net-tone: #6b4fd8;
  --net-soft: rgba(107, 79, 216, .17);
  --net-ink: #5238b5;
}

.rd-net__card--coral {
  --net-tone: #e0563f;
  --net-soft: rgba(224, 86, 63, .17);
  --net-ink: #b33f2b;
}

/* Brand mark: real logo when the file exists, monogram otherwise. */
.rd-net__logo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 48px;
  max-width: 100%;
}

.rd-net__logo .rd-net__mark {
  display: none;
}

.rd-net__logo.is-fallback .rd-net__mark {
  display: grid;
}

.rd-net__img {
  display: block;
  height: 34px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
}

.rd-net__logo--tall .rd-net__img {
  height: 44px;
}

.rd-net__card:hover .rd-net__img {
  transform: translateY(-1px) scale(1.02);
}

.rd-net__mark {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border-radius: 14px;
  background: var(--net-soft, rgba(242, 169, 0, .18));
  color: var(--net-ink, #8a5c00);
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: .92rem;
  font-weight: 800;
  letter-spacing: .02em;
  box-shadow: inset 0 0 0 1px rgba(15, 34, 51, .05);
}

.rd-net__text {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding-right: 18px;
}

.rd-net__name {
  font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
  font-size: 1.02rem;
  line-height: 1.25;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--w-ink);
}

.rd-net__url {
  font-size: .78rem;
  letter-spacing: .01em;
  color: #74889a;
}

.rd-net__arrow {
  position: absolute;
  top: 24px;
  right: 20px;
  z-index: 1;
  font-size: .74rem;
  color: #9dafbd;
  transform: translate3d(0, 0, 6px);
  transition: color .3s ease, transform .3s ease;
}

.rd-net__card:hover .rd-net__arrow {
  color: var(--net-tone, var(--w-amber));
  transform: translate3d(2px, -2px, 6px);
}

@media (max-width: 767px) {
  .rd3d__beam {
    display: none;
  }

  .rd-net__grid {
    gap: 12px;
  }

  .rd-net__lead {
    margin-top: 12px;
  }

  body.rd2 .rd-nav-reg {
    padding: 11px 18px;
    font-size: .86rem;
  }
}