@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&family=Michroma&family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@600;700;800&family=Syne:wght@600;700;800&display=swap');

@font-face {
  font-family: 'Cubest';
  src: url('fonts/Cubest.woff2') format('woff2'),
       url('fonts/Cubest.woff') format('woff'),
       url('fonts/Cubest.ttf') format('truetype'),
       url('sess/fonts/Cubest.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --navy: #071a3d;
  --navy-2: #102b62;
  --blue: #315da7;
  --blue-pale: #e9f1fc;
  --ink: #14233c;
  --muted: #607088;
  --line: #dbe4f0;
  --canvas: #f7f9fc;
  --font: "Manrope", sans-serif
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth;
  height: 100%;
  background-color: #0b1426 !important;
  background: #0b1426 !important
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #0b1426 !important;
  background: #0b1426 !important;
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px
}

main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  width: 100%
}

.container {
  width: 100%;
  max-width: 1600px;
  padding-left: clamp(20px, 4vw, 60px);
  padding-right: clamp(20px, 4vw, 60px);
  margin: 0 auto;
  box-sizing: border-box
}

.site-header {
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  left: 0;
  color: #fff;
  background: linear-gradient(180deg, rgba(3, 13, 32, .8), rgba(3, 13, 32, 0))
}

.site-header:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: rgba(255, 255, 255, .13)
}

.site-header.scrolled {
  position: fixed;
  top: 0;
  background: rgba(4, 16, 39, .94);
  box-shadow: 0 5px 18px rgba(2, 11, 29, .18)
}

.navigation {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 84px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  backdrop-filter: none
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: inherit;
  text-decoration: none;
  line-height: 1;
  font-weight: 700
}

.brand-icon {
  height: 42px;
  width: auto;
  object-fit: contain
}

.brand-text {
  height: 34px;
  width: auto;
  object-fit: contain
}

.brand span {
  font-family: var(--font);
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .18em;
  line-height: 1.15
}

.brand small {
  display: block;
  margin-top: 4px;
  font-family: var(--font);
  font-size: 7px;
  font-weight: 600;
  letter-spacing: .5em;
  text-transform: uppercase;
  opacity: .6
}

.nav-links {
  display: flex;
  gap: 25px;
  margin-left: auto;
  margin-right: 24px
}

.nav-links a {
  color: inherit;
  text-decoration: none;
  font-family: 'Michroma', sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .02em
}

.nav-links a:hover {
  color: #b8d4ff
}

.header-cta,
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 0 26px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all .25s cubic-bezier(.16, 1, .3, 1);
  box-shadow: 0 8px 24px rgba(2, 11, 29, .15)
}

.header-cta {
  min-height: 44px;
  padding: 0 22px;
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  font-family: 'Michroma', sans-serif;
  font-size: 12px;
  letter-spacing: .02em;
  box-shadow: 0 8px 20px rgba(3, 13, 32, .17)
}

.header-cta:hover {
  background: #f0f6ff;
  color: #041027;
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(3, 13, 32, .25)
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(2, 11, 29, .25)
}

.menu-toggle {
  display: none
}

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 805px;
  overflow: hidden;
  color: #fff
}

.hero-media,
.hero-media video,
.hero-overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.hero-media {
  z-index: -1;
  background: #0b1426
}

.hero-media video {
  object-fit: cover;
  object-position: center 48%;
  opacity: .88
}

.hero-overlay {
  background: linear-gradient(90deg, rgba(11, 20, 38, .85) 0%, rgba(11, 20, 38, .5) 45%, rgba(11, 20, 38, .15) 75%), linear-gradient(0deg, rgba(11, 20, 38, .6), transparent 55%)
}

.hero-media:after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -20%;
  background: radial-gradient(circle at 68% 25%, rgba(103, 165, 255, .34), transparent 27%), radial-gradient(circle at 25% 72%, rgba(57, 116, 205, .25), transparent 30%);
  mix-blend-mode: screen;
  pointer-events: none;
  animation: heroLightMove 10s ease-in-out infinite alternate
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: end;
  min-height: 700px;
  padding-top: 145px
}

.hero-copy {
  position: relative;
  max-width: 820px;
  padding-bottom: 90px
}

.hero-grid.hero-grid-simulation {
  grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
  gap: clamp(36px, 6vw, 100px)
}

.hero-grid-simulation .hero-copy {
  max-width: 720px
}

.retirement-simulator {
  align-self: end;
  margin-bottom: 74px;
  padding: 25px;
  border: 1px solid rgba(215, 233, 255, .32);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(14, 42, 91, .88), rgba(5, 22, 53, .8));
  box-shadow: 0 24px 60px rgba(1, 10, 29, .28), inset 0 1px 0 rgba(255, 255, 255, .11);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px)
}

.retirement-simulator.is-highlighted { animation: simulatorHighlight 1.1s ease }

@keyframes simulatorHighlight {
  0%, 100% { box-shadow: 0 24px 60px rgba(1, 10, 29, .28), inset 0 1px 0 rgba(255, 255, 255, .11) }
  45% { box-shadow: 0 0 0 7px rgba(167, 207, 255, .23), 0 28px 68px rgba(1, 10, 29, .42), inset 0 1px 0 rgba(255, 255, 255, .16) }
}

.simulator-heading {
  display: flex;
  align-items: center;
  gap: 12px
}

.simulator-icon {
  display: grid;
  flex: 0 0 auto;
  width: 43px;
  height: 43px;
  place-items: center;
  border: 1px solid rgba(196, 222, 255, .4);
  border-radius: 13px;
  color: #d9ebff;
  background: rgba(144, 190, 255, .14)
}

.simulator-icon svg { width: 23px; height: 23px }

.simulator-heading span:not(.simulator-icon) {
  display: block;
  color: #b5d4fc;
  font-family: 'Michroma', sans-serif;
  font-size: 8px;
  letter-spacing: .1em;
  text-transform: uppercase
}

.simulator-heading h2 {
  margin: 4px 0 0;
  color: #fff;
  font-family: 'Michroma', sans-serif;
  font-size: 18px;
  letter-spacing: -.03em
}

.retirement-simulator>p {
  margin: 17px 0 18px;
  color: #d4e3f7;
  font-size: 12px;
  line-height: 1.55
}

.simulator-form { display: grid; gap: 12px }

.simulator-form label {
  display: grid;
  gap: 6px;
  color: #eff6ff;
  font-size: 10px;
  font-weight: 800
}

.simulator-fields {
  display: grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 10px
}

.simulator-form input,
.simulator-form select {
  width: 100%;
  min-height: 43px;
  padding: 0 11px;
  border: 1px solid rgba(184, 213, 255, .26);
  border-radius: 10px;
  outline: 0;
  color: #fff;
  font: inherit;
  font-size: 12px;
  background: rgba(4, 19, 48, .72);
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease
}

.simulator-form select option { color: #fff; background: #0c285a }
.simulator-form input:focus,
.simulator-form select:focus { border-color: #a4caff; background: rgba(7, 30, 72, .92); box-shadow: 0 0 0 3px rgba(112, 171, 255, .16) }

.simulator-form button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 47px;
  margin-top: 3px;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 999px;
  color: #081938;
  font: 700 12px var(--font);
  cursor: pointer;
  background: linear-gradient(135deg, #fff, #cce2ff);
  box-shadow: 0 10px 23px rgba(1, 12, 36, .28);
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease
}

.simulator-form button:hover { transform: translateY(-2px); background: #fff; box-shadow: 0 15px 28px rgba(1, 12, 36, .36) }
.simulator-form button svg { width: 16px; height: 16px }
.retirement-simulator small { display: block; margin-top: 13px; color: #abc3e5; font-size: 9px; line-height: 1.45 }

.overline {
  margin: 0 0 14px;
  color: #477ccc;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase
}

.hero .overline {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #c3dcff;
  font-family: 'Michroma', sans-serif;
  letter-spacing: .18em;
}

.hero .overline:before {
  content: "";
  width: 31px;
  height: 2px;
  border-radius: 99px;
  background: linear-gradient(90deg, #75a8f0, #c5ddff)
}

.hero h1 {
  max-width: 760px;
  margin: 0;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(38px, 4.4vw, 64px);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-shadow: 0 5px 28px rgba(2, 12, 30, .18)
}

.hero h1 span {
  display: block;
  color: #b8d5ff
}

.hero-copy>p:not(.overline) {
  max-width: 535px;
  margin: 22px 0 0;
  color: #e4ecf9;
  font-size: 17px;
  line-height: 1.65
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px
}

.hero-actions .button {
  position: relative;
  min-height: 57px;
  padding: 0 29px;
  border-radius: 999px;
  color: var(--navy);
  letter-spacing: .005em;
  overflow: hidden;
  isolation: isolate
}

.hero-actions .button span {
  position: relative;
  z-index: 1
}

.hero-actions .button:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -70%;
  bottom: -70%;
  left: -50%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .75), transparent);
  transform: rotate(18deg);
  animation: buttonShine 4.8s ease-in-out infinite
}

.button.primary {
  border: 1px solid rgba(255, 255, 255, .9);
  background: linear-gradient(135deg, #fff 0%, #dbe9ff 100%);
  color: #091b38;
  box-shadow: 0 12px 32px rgba(4, 22, 52, .3), inset 0 1px 0 #fff
}

.button.primary:hover {
  background: linear-gradient(135deg, #fff 0%, #c4dcff 100%);
  border-color: #fff;
  color: #041027;
  box-shadow: 0 18px 40px rgba(4, 22, 52, .4), inset 0 1px 0 #fff
}

.button.ghost {
  border: 1px solid rgba(185, 213, 251, .65);
  color: #fff;
  background: rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px rgba(4, 22, 52, .18), inset 0 1px 0 rgba(255, 255, 255, .3);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.button.ghost:hover {
  border-color: rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .22);
  color: #fff;
  box-shadow: 0 16px 36px rgba(4, 22, 52, .28), inset 0 1px 0 rgba(255, 255, 255, .5)
}

@keyframes heroLightMove {
  0% {
    transform: translate3d(-3%, -2%, 0) scale(.96);
    opacity: .55
  }

  50% {
    opacity: .9
  }

  100% {
    transform: translate3d(5%, 3%, 0) scale(1.06);
    opacity: .68
  }
}

@keyframes buttonShine {

  0%,
  60% {
    left: -55%;
    opacity: 0
  }

  72% {
    opacity: .72
  }

  100% {
    left: 125%;
    opacity: 0
  }
}

.hero-highlights {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: transparent
}

.hero-highlights:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  border-top: 1px solid rgba(255, 255, 255, .25);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  background: linear-gradient(90deg, rgba(3, 15, 36, .68), rgba(11, 32, 67, .42), rgba(3, 15, 36, .6));
  backdrop-filter: blur(9px)
}

.hero-highlights article {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-height: 112px;
  padding: 23px 28px;
  background: transparent
}

.hero-highlights article+article {
  border-left: 1px solid rgba(255, 255, 255, .16)
}

.highlight-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(117, 168, 240, .15);
  color: #a5cbff;
  margin-bottom: 6px;
  flex-shrink: 0
}

.highlight-icon svg {
  display: block
}

.hero-highlights strong {
  font-size: 17px
}

.hero-highlights span {
  color: #cad7ea;
  font-size: 13px;
  line-height: 1.4
}

.section {
  padding: 105px 0
}

.teacher-retirement {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #edf5ff, #f9fbff 48%, #e8f1fe);
  border-top: 1px solid #dce9fa;
  border-bottom: 1px solid #dce9fa
}

.teacher-retirement:before {
  content: "";
  position: absolute;
  width: 520px;
  height: 520px;
  right: -210px;
  top: -300px;
  border: 1px solid rgba(65, 122, 205, .16);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(65, 122, 205, .035), 0 0 0 104px rgba(65, 122, 205, .025)
}

.teacher-retirement .container { position: relative; z-index: 1 }
.retirement-heading { margin-bottom: 46px }

.retirement-overview {
  display: grid;
  grid-template-columns: minmax(280px, .87fr) minmax(0, 1.13fr);
  gap: 18px
}

.retirement-featured {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 390px;
  padding: clamp(30px, 3.5vw, 48px);
  border-radius: 22px;
  color: #fff;
  background: linear-gradient(145deg, #0d316c, #071b40);
  box-shadow: 0 22px 48px rgba(7, 35, 80, .22)
}

.retirement-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 39px;
  height: 25px;
  border: 1px solid currentColor;
  border-radius: 999px;
  color: #82b5ff;
  font-family: 'Michroma', sans-serif;
  font-size: 9px;
  letter-spacing: .08em
}

.retirement-featured h3 {
  max-width: 360px;
  margin: 27px 0 15px;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(25px, 2.4vw, 34px);
  line-height: 1.18;
  letter-spacing: -.04em
}

.retirement-featured p {
  max-width: 430px;
  margin: 0;
  color: #ceddf2;
  font-size: 14px;
  line-height: 1.7
}

.retirement-featured .button { margin-top: auto }
.retirement-featured .button span { margin-left: 5px; font-size: 18px }

.retirement-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px
}

.retirement-points article {
  min-height: 186px;
  padding: 27px 28px;
  border: 1px solid rgba(93, 137, 202, .2);
  border-radius: 19px;
  background: rgba(255, 255, 255, .66);
  box-shadow: 0 10px 26px rgba(47, 89, 149, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease
}

.retirement-points article:hover {
  transform: translateY(-4px);
  border-color: rgba(70, 126, 212, .42);
  box-shadow: 0 18px 34px rgba(47, 89, 149, .11)
}

.retirement-points article:last-child { grid-column: 1 / -1 }
.retirement-points .retirement-number { color: #356ebf }
.retirement-points h3 { margin: 17px 0 9px; color: #102b60; font-size: 17px; letter-spacing: -.02em }
.retirement-points p { margin: 0; color: #526883; font-size: 13px; line-height: 1.58 }

.retirement-note {
  max-width: 880px;
  margin: 22px auto 0;
  color: #617797;
  font-size: 12px;
  line-height: 1.55;
  text-align: center
}

.about {
  background: #fff
}

.about-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 94px;
  align-items: center
}

.about-photo {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  border-radius: 20px;
  background: var(--blue-pale)
}

.about-photo:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: -85px;
  bottom: -95px;
  width: 300px;
  height: 300px;
  border: 40px solid rgba(49, 93, 167, .11);
  border-radius: 50%
}

.about-photo img,
.about-photo video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center
}

.about-photo.fundef-video {
  justify-self: center;
  width: min(100%, 390px);
  min-height: 0;
  aspect-ratio: 9/16;
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(19, 53, 102, .18)
}

.fundef-video:before {
  display: none
}

.fundef-video video {
  position: absolute;
  inset: 0
}

.video-play {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 70px;
  height: 70px;
  padding: 0;
  border: 1.5px solid rgba(255, 255, 255, .9);
  border-radius: 50%;
  background: rgba(7, 26, 61, .14);
  box-shadow: 0 10px 28px rgba(3, 14, 34, .24);
  color: #fff;
  cursor: pointer;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(3px);
  transition: transform .2s ease, background .2s ease, opacity .2s ease
}

.video-play span {
  padding-left: 5px;
  font-size: 25px;
  line-height: 1
}

.video-play:hover {
  background: rgba(49, 93, 167, .36);
  transform: translate(-50%, -50%) scale(1.07)
}

.fundef-video.is-playing .video-play {
  opacity: 0;
  pointer-events: none
}

.section-copy h2,
.section-heading h2,
.practice h2,
.contact h2 {
  margin: 0;
  font-size: clamp(34px, 3.8vw, 54px);
  line-height: 1.09;
  letter-spacing: -.045em
}

.section-copy>p:not(.overline) {
  max-width: 600px;
  margin: 22px 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.75
}

.fundef-about h2 {
  max-width: 660px
}

.fundef-points {
  display: grid;
  gap: 0;
  margin: 32px 0 36px;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line)
}

.fundef-points li {
  position: relative;
  padding: 16px 10px 16px 36px;
  border-bottom: 1px solid var(--line);
  color: #324966;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5
}

.fundef-points li:before {
  content: "✓";
  position: absolute;
  left: 6px;
  top: 16px;
  color: var(--blue);
  font-size: 17px;
  font-weight: 800
}

.fundef-about .button {
  margin-top: 24px;
  margin-bottom: 32px
}

.text-link span {
  font-size: 18px
}

/* ═══════════════════════════════════════════
   TEACHER HEALTH & INSS SECTION
   ═══════════════════════════════════════════ */
.teacher-health {
  background: #f8fbff;
  border-top: 1px solid #e1ecfb;
  border-bottom: 1px solid #e1ecfb
}

.teacher-health-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 84px;
  align-items: center
}

.teacher-health-box {
  margin: 28px 0 20px;
  padding: 26px 30px;
  border-radius: 16px;
  border: 1px solid #bfd3ee;
  border-left: 5px solid var(--blue);
  background: linear-gradient(135deg, #ffffff 0%, #edf4fd 100%);
  box-shadow: 0 12px 30px rgba(27, 68, 126, .07)
}

.teacher-health-box h3 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: 21px;
  letter-spacing: -.02em
}

.teacher-health-box p {
  margin: 0;
  color: #385072;
  font-size: 14.5px;
  line-height: 1.65
}

.teacher-highlight-badge {
  margin-top: 16px;
  padding: 12px 18px;
  border-radius: 12px;
  background: rgba(30, 90, 190, .09);
  border: 1px solid rgba(30, 90, 190, .2);
  color: #174aa4;
  font-weight: 700;
  font-size: 14px;
  line-height: 1.45
}

.teacher-warning {
  margin: 18px 0 26px;
  color: #4a607a;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.6
}

.teacher-health-media {
  position: relative;
  aspect-ratio: 9/16;
  max-width: 390px;
  width: 100%;
  justify-self: center;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(7, 26, 61, .22), 0 0 0 1px rgba(180, 210, 250, .4);
  background: var(--navy)
}

.essence {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #0b1426;
  color: #fff
}

.essence:before {
  content: "";
  position: absolute;
  top: -40px;
  right: -40px;
  width: 440px;
  height: 440px;
  background-image: url('brand_icon_white.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: .09;
  filter: drop-shadow(0 0 35px rgba(117, 166, 236, .35));
  pointer-events: none;
  z-index: 1
}

.essence .container {
  position: relative;
  z-index: 2
}

.essence .overline {
  color: #9fc5ff
}

.essence .section-heading>p {
  color: #c8d8ee
}

.section-heading {
  display: flex;
  justify-content: space-between;
  gap: 55px;
  align-items: end
}

.section-heading>p {
  max-width: 365px;
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.6
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 48px
}

.values-grid article {
  position: relative;
  min-height: 245px;
  padding: 30px;
  border: 1px solid rgba(190, 216, 251, .22);
  border-radius: 16px;
  background: rgba(13, 35, 71, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 16px 36px rgba(2, 11, 29, 0.35), inset 0 1px rgba(255, 255, 255, .12);
  transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease
}

.values-grid article:hover {
  transform: translateY(-5px);
  background: rgba(19, 50, 100, 0.84);
  border-color: rgba(190, 216, 251, .45);
  box-shadow: 0 22px 48px rgba(2, 11, 29, 0.5), inset 0 1px rgba(255, 255, 255, .2)
}

.values-grid span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: rgba(150, 193, 251, .14);
  color: #b9d8ff;
  font-size: 12px;
  font-weight: 800
}

.values-grid span svg {
  display: block;
  width: 22px;
  height: 22px;
}

.values-grid h3 {
  margin: 34px 0 11px;
  color: #fff;
  font-size: 23px;
  letter-spacing: -.035em
}

.values-grid p {
  margin: 0;
  color: #c9d8ed;
  font-size: 14px;
  line-height: 1.65
}

.values-grid article.fundef-featured {
  border-color: #78a9ed;
  background: linear-gradient(135deg, #4c83cf 0%, #27599e 100%);
  box-shadow: 0 18px 38px rgba(1, 12, 34, .25), inset 0 1px rgba(255, 255, 255, .15)
}

.values-grid article.fundef-featured:hover {
  border-color: #a9ccff;
  background: linear-gradient(135deg, #568ed9 0%, #2d62ad 100%)
}

.fundef-featured>span {
  background: #fff;
  color: #245292
}

.fundef-featured small {
  position: absolute;
  top: 34px;
  right: 28px;
  color: #e5f0ff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase
}

.fundef-featured h3 {
  margin-top: 28px
}

.fundef-featured p {
  color: #edf5ff
}

.fundef-featured a {
  display: inline-flex;
  margin-top: 20px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .45)
}

.practice {
  background: #fff
}

.practice-grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 110px;
  align-items: center
}

.practice-copy>p:not(.overline) {
  max-width: 435px;
  margin: 21px 0 27px;
  color: var(--muted);
  line-height: 1.7
}

.button.dark {
  border: 1px solid rgba(190, 216, 251, .25);
  background: linear-gradient(135deg, #0b1d3a 0%, #122c54 100%);
  color: #fff;
  box-shadow: 0 12px 30px rgba(2, 11, 29, .35), inset 0 1px 0 rgba(255, 255, 255, .15)
}

.button.dark:hover {
  background: linear-gradient(135deg, #10274c 0%, #183868 100%);
  border-color: rgba(190, 216, 251, .5);
  color: #fff;
  box-shadow: 0 16px 38px rgba(2, 11, 29, .45)
}

.practice-list {
  border-top: 1px solid var(--line)
}

.practice-list a {
  display: grid;
  grid-template-columns: 45px 1fr 26px;
  align-items: center;
  gap: 14px;
  min-height: 76px;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  transition: .2s ease
}

.practice-list a:hover {
  padding-left: 10px;
  color: var(--blue);
  background: #f4f8ff
}

.practice-list span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #6c91c7;
  font-size: 12px;
  font-weight: 800
}

.practice-list span svg {
  display: block
}

.practice-list strong {
  font-size: 17px
}

.practice-list b {
  font-size: 19px;
  font-weight: 500
}

.practice-list a.fundef-link {
  min-height: 92px;
  margin: 8px 0;
  padding: 0 16px;
  border: 1px solid #bfd3ee;
  border-left: 5px solid var(--blue);
  border-radius: 10px;
  background: linear-gradient(100deg, #eef5ff, #f9fbff);
  box-shadow: 0 12px 25px rgba(27, 68, 126, .09)
}

.practice-list a.fundef-link:hover {
  padding-left: 22px;
  background: #e6f0ff
}

.fundef-link strong {
  font-size: 19px
}

.fundef-link strong small {
  display: inline-flex;
  margin-left: 8px;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 8px;
  letter-spacing: .09em;
  text-transform: uppercase;
  vertical-align: 3px
}

/* ═══════════════════════════════════════════
   ACCORDION GALLERY
   ═══════════════════════════════════════════ */
.gallery-section {
  background: linear-gradient(180deg, #ffffff 0%, #f2f7ff 100%)
}

.accordion-gallery {
  display: flex;
  gap: 12px;
  height: 480px;
  margin-top: 48px;
  border-radius: 20px;
  padding: 8px;
  background: rgba(235, 243, 255, .6);
  border: 1px solid rgba(190, 216, 251, .4);
  box-shadow: inset 0 2px 6px rgba(11, 44, 98, .04)
}

.ag-item {
  position: relative;
  flex: 1;
  background-size: cover;
  background-position: center 30%;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  filter: brightness(.92) contrast(1.02);
  border: 1px solid rgba(255, 255, 255, .6);
  box-shadow: 0 8px 20px rgba(11, 44, 98, .08);
  transition: flex .6s cubic-bezier(.22, 1, .36, 1), filter .4s ease, transform .3s ease, border-color .3s ease, box-shadow .3s ease
}

.ag-item.active {
  flex: 5.2;
  filter: brightness(1) contrast(1.05);
  border-color: rgba(75, 135, 225, .4);
  box-shadow: 0 20px 45px rgba(11, 44, 98, .2)
}

.ag-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(7, 26, 61, .65) 0%, rgba(7, 26, 61, .15) 35%, transparent 60%);
  opacity: .7;
  transition: opacity .4s ease
}

.ag-item.active .ag-overlay {
  opacity: .9
}

.ag-label {
  position: absolute;
  bottom: 24px;
  left: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(7, 26, 61, .85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(160, 205, 255, .35);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  box-shadow: 0 8px 24px rgba(2, 12, 30, .3);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .45s ease .15s, transform .45s ease .15s
}

.ag-item.active .ag-label {
  opacity: 1;
  transform: translateY(0)
}

.ag-item:not(.active):hover {
  filter: brightness(1);
  flex: 1.5;
  border-color: rgba(120, 175, 245, .5)
}

.ag-item:hover {
  transform: scale(1.006)
}

/* Lightbox Modal */
.gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease
}

.gallery-modal.is-open {
  opacity: 1;
  pointer-events: auto
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 16, 39, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px)
}

.modal-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 92vw;
  max-height: 92vh
}

.modal-body {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-height: 85vh
}

.modal-body img {
  max-width: 88vw;
  max-height: 82vh;
  object-fit: contain;
  border-radius: 12px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, .6);
  transform: scale(.92);
  transition: transform .35s cubic-bezier(.22, 1, .36, 1)
}

.gallery-modal.is-open .modal-body img {
  transform: scale(1)
}

.modal-caption {
  margin-top: 14px;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .03em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, .5)
}

.modal-close {
  position: fixed;
  top: 24px;
  right: 28px;
  z-index: 3;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transition: background .2s ease, transform .2s ease;
  display: grid;
  place-items: center
}

.modal-close:hover {
  background: rgba(255, 255, 255, .3);
  transform: scale(1.1)
}

.modal-nav {
  position: fixed;
  top: 50%;
  z-index: 3;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, .15);
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  backdrop-filter: blur(8px);
  transform: translateY(-50%);
  transition: background .2s ease, transform .2s ease;
  display: grid;
  place-items: center
}

.modal-nav:hover {
  background: rgba(255, 255, 255, .3);
  transform: translateY(-50%) scale(1.1)
}

.modal-prev {
  left: 24px
}

.modal-next {
  right: 24px
}

.contact-footer-wrapper {
  margin-top: auto;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: #0b1426 !important;
  background: #0b1426 !important;
  width: 100%;
  padding-bottom: 40px
}

.contact {
  position: relative;
  z-index: 1;
  padding-top: 110px;
  padding-bottom: 70px;
  background: transparent;
  overflow: hidden
}

.gradient-waves-wrapper {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden
}

.gradient-waves-wrapper canvas {
  width: 100%;
  height: 100%;
  display: block
}

.contact-unified-card {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(150, 195, 250, .24);
  background: linear-gradient(135deg, rgba(13, 35, 71, .88) 0%, rgba(19, 46, 88, .8) 50%, rgba(23, 58, 110, .75) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #fff;
  box-shadow: 0 30px 75px rgba(2, 10, 28, .5), inset 0 1px rgba(255, 255, 255, .15)
}

.contact-panel-inner {
  display: grid;
  grid-template-columns: 1fr .85fr;
  min-height: 360px
}

.contact-panel-copy {
  padding: 62px
}

.contact-panel-media {
  position: relative;
  overflow: hidden
}

.contact-panel-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top
}

.contact-cta-block {
  margin-top: 40px;
  padding-top: 32px;
  border-top: 1px solid rgba(150, 195, 250, .2)
}

.contact-cta-block h3 {
  margin: 12px 0 14px;
  color: #fff;
  font-size: 26px;
  letter-spacing: -.03em
}

.contact-cta-block p {
  margin-bottom: 28px;
  color: #c5d8ef;
  line-height: 1.6
}

.contact-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  margin-top: 28px
}

.button.light {
  background: #fff;
  color: #091b38;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow: 0 10px 28px rgba(2, 10, 28, .22), inset 0 1px 0 #fff
}

.button.light:hover {
  background: #eef5ff;
  color: #041027;
  border-color: #fff;
  box-shadow: 0 16px 36px rgba(2, 10, 28, .32)
}

/* ═══════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 1;
  padding: 0;
  background: transparent;
  color: #fff
}

/* Decorative background */
.footer-bg-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden
}

.footer-glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: .12
}

.footer-glow--1 {
  top: -120px;
  right: -80px;
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, #4c83cf, transparent 70%);
  animation: footerGlow1 8s ease-in-out infinite alternate
}

.footer-glow--2 {
  bottom: -60px;
  left: -100px;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, #2d62ad, transparent 70%);
  animation: footerGlow2 10s ease-in-out infinite alternate
}

.footer-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(140, 185, 245, .08)
}

.footer-ring--1 {
  top: 60px;
  right: -40px;
  width: 320px;
  height: 320px
}

.footer-ring--2 {
  bottom: 20px;
  left: 10%;
  width: 220px;
  height: 220px;
  border-color: rgba(140, 185, 245, .05)
}

@keyframes footerGlow1 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: .12
  }

  100% {
    transform: translate(-30px, 20px) scale(1.15);
    opacity: .18
  }
}

@keyframes footerGlow2 {
  0% {
    transform: translate(0, 0) scale(1);
    opacity: .1
  }

  100% {
    transform: translate(20px, -15px) scale(1.1);
    opacity: .15
  }
}

/* CTA Banner */
.footer-cta-banner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 42px;
  padding: 56px 62px;
  border-radius: 20px;
  margin-top: 0;
  border: 1px solid rgba(150, 195, 250, .2);
  background: linear-gradient(135deg, rgba(29, 74, 138, .85) 0%, rgba(43, 95, 168, .75) 50%, rgba(58, 114, 192, .65) 100%);
  box-shadow: 0 24px 60px rgba(2, 10, 28, .4), 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px rgba(255, 255, 255, .15);
  overflow: hidden;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px)
}

.footer-cta-banner:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, .1), transparent 50%), radial-gradient(ellipse at 20% 50%, rgba(117, 168, 240, .15), transparent 60%);
  pointer-events: none
}

.footer-cta-banner:after {
  content: "";
  position: absolute;
  top: -60%;
  right: -12%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 0 0 60px rgba(117, 166, 236, .03);
  pointer-events: none
}

.footer-cta-content {
  position: relative;
  z-index: 1;
  max-width: 560px
}

.footer-cta-content .overline {
  color: #9fc5ff
}

.footer-cta-content h3 {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px);
  line-height: 1.12;
  letter-spacing: -.04em
}

.footer-cta-content>p:not(.overline) {
  margin: 14px 0 0;
  color: #c8ddf5;
  font-size: 15px;
  line-height: 1.7
}

.footer-cta-actions {
  position: relative;
  z-index: 1;
  flex-shrink: 0
}

.footer-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: 0 34px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  background: linear-gradient(135deg, #fff, #dceaff);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 14px 32px rgba(2, 14, 36, .3), inset 0 1px #fff;
  text-decoration: none;
  transition: all .25s ease;
  overflow: hidden;
  isolation: isolate
}

.footer-btn:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -70%;
  bottom: -70%;
  left: -50%;
  width: 36%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .6), transparent);
  transform: rotate(18deg);
  animation: buttonShine 4.8s ease-in-out infinite
}

.footer-btn span,
.footer-btn svg {
  position: relative;
  z-index: 1
}

.footer-btn:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 20px 44px rgba(2, 14, 36, .38), inset 0 1px #fff;
  background: linear-gradient(135deg, #fff, #c9ddfa);
  border-color: #fff
}

.footer-btn svg {
  flex-shrink: 0
}

/* Footer Main Grid */
.footer-main {
  position: relative;
  z-index: 1;
  padding-top: 64px;
  padding-bottom: 24px
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0
}

.footer-col--brand {
  gap: 20px
}

.footer-col--brand .brand {
  color: #fff;
  text-decoration: none
}

.footer-tagline {
  max-width: 300px;
  margin: 0;
  color: #98b5d8;
  font-size: 14px;
  line-height: 1.7
}

/* Footer headings */
.footer-heading {
  display: block;
  margin-bottom: 22px;
  color: #7eaadf;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .18em;
  text-transform: uppercase
}

/* Footer nav links */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: 14px
}

.footer-nav a {
  color: #c5d8ef;
  font-size: 14px;
  font-weight: 400;
  text-decoration: none;
  transition: color .2s ease, padding-left .2s ease
}

.footer-nav a:hover {
  color: #fff;
  padding-left: 6px
}

/* Social icons */
.footer-social-icons {
  display: flex;
  gap: 10px;
  margin-top: 4px
}

.social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  border: 1px solid rgba(150, 195, 250, .2);
  background: rgba(255, 255, 255, .06);
  color: #a8ccf0;
  transition: all .25s ease;
  text-decoration: none
}

.social-icon:hover {
  transform: translateY(-3px);
  border-color: rgba(150, 195, 250, .45);
  background: rgba(255, 255, 255, .14);
  color: #fff;
  box-shadow: 0 8px 22px rgba(2, 14, 36, .3)
}

.social-icon svg {
  display: block
}

/* Footer contact list */
.footer-contact-list {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.footer-contact-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #c5d8ef;
  font-size: 14px;
  text-decoration: none;
  transition: color .2s ease
}

.footer-contact-item:hover {
  color: #fff
}

.footer-contact-item svg {
  flex-shrink: 0;
  color: #7eaadf;
  transition: color .2s ease
}

.footer-contact-item:hover svg {
  color: #b5d4ff
}

/* Footer Bottom Bar */
.footer-bottom {
  position: relative;
  z-index: 1;
  margin-top: 24px;
  border-top: 1px solid rgba(150, 195, 250, .12)
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0 32px 0;
  color: #6b8fb8;
  font-size: 13px
}

.footer-bottom-sep {
  font-style: italic;
  opacity: .7
}

/* ═══════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════ */
@media(max-width:900px) {
  .nav-links {
    gap: 15px
  }

  .header-cta {
    display: none
  }

  .hero-grid {
    grid-template-columns: 1fr
  }

  .values-grid {
    grid-template-columns: repeat(2, 1fr)
  }

  .about-grid,
  .practice-grid {
    gap: 55px
  }

  .section {
    padding: 82px 0
  }

  .contact-panel>div {
    padding: 48px
  }

  .footer-grid {
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 36px
  }

  .footer-col:nth-child(4) {
    grid-column: 1/-1
  }

  .footer-cta-banner {
    padding: 40px 36px;
    flex-wrap: wrap
  }
}

@media(max-width:700px) {
  .container {
    width: min(100% - 32px, 590px)
  }

  .site-header {
    top: 0
  }

  .navigation {
    min-height: 68px;
    padding: 0;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between
  }

  /* Fixed Brand Logo on Mobile - Proportional & Elegant */
  .brand {
    gap: 10px;
    max-width: calc(100% - 54px);
    display: flex;
    align-items: center
  }

  .brand-icon {
    height: 38px;
    width: auto;
    max-width: none;
    object-fit: contain;
    flex-shrink: 0
  }

  .brand-text {
    height: 34px;
    width: auto;
    max-width: calc(100vw - 110px);
    object-fit: contain;
    flex-shrink: 1
  }

  .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    margin-left: auto;
    border: 0;
    border-radius: 10px;
    background: rgba(255, 255, 255, .12);
    padding: 10px;
    cursor: pointer
  }

  .menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform .25s ease, opacity .25s ease
  }

  /* Improved Mobile Dropdown Menu */
  .nav-links {
    position: absolute;
    top: 68px;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    border-radius: 0 0 16px 16px;
    background: rgba(11, 20, 38, 0.98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-top: none;
    color: #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .5)
  }

  .nav-links.open {
    display: flex
  }

  .nav-links a {
    padding: 16px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    color: #e2e8f0;
    font-size: 15px;
    font-weight: 600;
    transition: background .2s ease, color .2s ease
  }

  .nav-links a:last-child {
    border-bottom: none
  }

  .nav-links a:hover,
  .nav-links a:active {
    background: rgba(82, 39, 255, .2);
    color: #8daeff
  }

  .hero {
    min-height: auto;
    padding-bottom: 60px
  }

  .hero-grid {
    display: block;
    min-height: auto;
    padding-top: 110px
  }

  .hero-copy {
    position: relative;
    z-index: 1;
    padding-bottom: 0
  }

  .hero h1 {
    font-size: clamp(28px, 8vw, 40px);
    line-height: 1.15;
    margin-bottom: 20px
  }

  .hero-copy>p:not(.overline) {
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 28px
  }

  .hero-actions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    margin-top: 28px;
    margin-bottom: 28px
  }

  .hero-actions .button {
    width: 100%;
    justify-content: center;
    font-size: 15px;
    min-height: 50px;
    padding: 14px 20px
  }

  .hero-highlights {
    grid-template-columns: 1fr;
    margin-top: 48px;
    gap: 14px
  }

  .hero-highlights article {
    min-height: 0;
    padding: 18px 20px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .05);
    border: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: 8px
  }

  .hero-highlights article+article {
    border-left: 0
  }

  .hero-highlights article:last-child {
    margin-bottom: 0
  }

  .hero-highlights strong {
    font-size: 15px
  }

  .hero-highlights span {
    font-size: 12px
  }

  .section {
    padding: 72px 0
  }

  .about-grid,
  .practice-grid,
  .teacher-health-grid,
  .contact-panel {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .about-photo {
    min-height: 300px
  }

  .section-copy h2,
  .section-heading h2,
  .practice h2,
  .contact h2 {
    font-size: clamp(26px, 7vw, 36px);
    line-height: 1.15;
    margin-bottom: 18px
  }

  .section-heading {
    display: block;
    margin-bottom: 32px
  }

  .section-heading>p,
  .section-copy>p {
    margin-top: 14px;
    margin-bottom: 24px;
    font-size: 15px;
    line-height: 1.65
  }

  .fundef-points {
    margin-top: 28px;
    margin-bottom: 28px;
    display: flex;
    flex-direction: column;
    gap: 16px
  }

  .fundef-about .button {
    margin-top: 28px
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-top: 36px
  }

  .values-grid article {
    min-height: 0;
    padding: 28px 24px;
    border-radius: 16px
  }

  .values-grid h3 {
    margin-top: 24px
  }

  .practice-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    border-top: none;
    margin-top: 24px
  }

  .practice-list a {
    min-height: 80px;
    padding: 16px 18px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 14px;
    background: rgba(255, 255, 255, .04);
    margin-bottom: 0
  }

  .practice-list a.fundef-link {
    min-height: 96px;
    margin: 0 0 4px 0;
    padding: 18px 20px
  }

  .practice-copy .button {
    margin-top: 24px
  }

  .practice-list strong {
    font-size: 15px
  }

  .accordion-gallery {
    flex-direction: column;
    height: 540px;
    gap: 12px;
    margin-top: 36px
  }

  .ag-item {
    filter: grayscale(0)
  }

  .ag-item.active {
    flex: 3
  }

  .ag-label {
    font-size: 14px;
    bottom: 14px;
    left: 14px;
    right: 14px
  }

  .modal-close {
    top: 16px;
    right: 16px;
    width: 44px;
    height: 44px;
    font-size: 26px
  }

  .modal-nav {
    width: 44px;
    height: 44px;
    font-size: 18px
  }

  .modal-prev {
    left: 10px
  }

  .modal-next {
    right: 10px
  }

  .modal-body img {
    max-width: 94vw;
    max-height: 75vh
  }

  .contact {
    padding-top: 0
  }

  .contact-panel-inner {
    grid-template-columns: 1fr;
    gap: 0
  }

  .contact-panel-copy {
    padding: 40px 24px
  }

  .contact-panel-copy h2 {
    margin-bottom: 18px
  }

  .contact-panel-copy p {
    margin-bottom: 28px
  }

  .contact-cta-block {
    margin-top: 36px;
    padding-top: 28px;
    border-top: 1px solid rgba(255, 255, 255, .18)
  }

  .contact-actions-row {
    flex-direction: column;
    gap: 16px;
    margin-top: 28px;
    width: 100%
  }

  .contact-actions-row .button {
    width: 100%;
    justify-content: center;
    min-height: 52px
  }

  .contact-panel-media {
    margin-top: 36px;
    padding-top: 24px;
    border-top: 1px solid rgba(255, 255, 255, .12)
  }

  .contact-panel-media img {
    min-height: 280px;
    max-height: 360px
  }

  .footer-cta-banner {
    margin-bottom: 48px
  }

  .footer-cta-banner-inner {
    flex-direction: column;
    padding: 40px 24px;
    gap: 24px;
    text-align: center
  }

  .footer-cta-content {
    max-width: 100%
  }

  .footer-cta-content h3 {
    font-size: 24px;
    margin-bottom: 12px
  }

  .footer-cta-content p {
    margin-bottom: 24px
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .footer-col:nth-child(4) {
    grid-column: auto
  }

  .footer-main {
    padding-top: 48px;
    padding-bottom: 20px
  }

  .footer-bottom-inner {
    flex-direction: column;
    gap: 12px;
    text-align: center;
    padding: 24px 0
  }

  .hero-overlay {
    background: linear-gradient(90deg, rgba(11, 20, 38, .85), rgba(13, 35, 71, .45)), linear-gradient(0deg, rgba(11, 20, 38, .75), transparent 55%)
  }
}

@media(max-width:420px) {
  .container {
    width: calc(100% - 24px)
  }

  .navigation {
    min-height: 64px
  }

  .brand {
    gap: 8px;
    max-width: calc(100% - 46px)
  }

  .brand-icon {
    height: 34px
  }

  .brand-text {
    height: 30px;
    max-width: calc(100vw - 90px)
  }
}

@media(max-width:360px) {
  .brand-icon {
    height: 30px
  }

  .brand-text {
    height: 26px;
    max-width: calc(100vw - 80px)
  }
}

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

  .hero-media:after,
  .hero-actions .button:before,
  .footer-glow--1,
  .footer-glow--2 {
    animation: none
  }
}

@media (max-width: 1020px) {
  .hero-grid.hero-grid-simulation { grid-template-columns: minmax(0, 1fr) 330px; gap: 28px }
  .retirement-simulator { padding: 20px; }
}

@media (max-width: 760px) {
  .hero-grid.hero-grid-simulation { display: block; }
  .hero-grid-simulation .hero-copy { padding-bottom: 0; }
  .retirement-simulator { margin: 34px 0 0; padding: 21px; }
  .simulator-heading h2 { font-size: 16px; }
  .retirement-overview,
  .retirement-points { grid-template-columns: 1fr; }
  .retirement-points article:last-child { grid-column: auto; }
  .retirement-featured { min-height: 0; }
}

/* Aposentadoria do professor — tratamento visual editorial */
.teacher-retirement {
  isolation: isolate;
  background:
    radial-gradient(circle at 8% 18%, rgba(76, 138, 238, .27), transparent 27rem),
    radial-gradient(circle at 91% 76%, rgba(30, 79, 163, .28), transparent 30rem),
    linear-gradient(135deg, #071632 0%, #0c285a 54%, #071a3d 100%);
  border-color: rgba(169, 205, 255, .15)
}

.teacher-retirement:before {
  z-index: -1;
  top: -245px;
  right: -150px;
  width: 560px;
  height: 560px;
  border-color: rgba(184, 216, 255, .16);
  box-shadow: 0 0 0 58px rgba(159, 202, 255, .035), 0 0 0 116px rgba(159, 202, 255, .022)
}

.teacher-retirement:after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: auto 0 0;
  height: 42%;
  background: linear-gradient(0deg, rgba(2, 12, 31, .34), transparent);
  pointer-events: none
}

.retirement-heading {
  position: relative;
  align-items: center;
  margin-bottom: 52px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(200, 224, 255, .16)
}

.teacher-retirement .overline { color: #a9ccff }

.teacher-retirement .section-heading h2 {
  max-width: 920px;
  color: #f7fbff;
  font-family: 'Michroma', sans-serif;
  font-size: clamp(30px, 3.2vw, 49px);
  line-height: 1.15;
  letter-spacing: -.045em
}

.retirement-heading>p {
  max-width: 355px;
  padding-left: 24px;
  border-left: 2px solid #78abf7;
  color: #c8dcf8;
  font-size: 14px;
  line-height: 1.7
}

.retirement-overview { gap: 20px }

.retirement-featured {
  position: relative;
  min-height: 416px;
  overflow: hidden;
  border: 1px solid rgba(199, 224, 255, .25);
  background: linear-gradient(145deg, rgba(29, 84, 171, .96), rgba(8, 29, 69, .98));
  box-shadow: 0 28px 60px rgba(0, 8, 27, .34), inset 0 1px 0 rgba(255, 255, 255, .13)
}

.retirement-featured:before {
  content: "";
  position: absolute;
  right: -110px;
  bottom: -152px;
  width: 345px;
  height: 345px;
  border: 1px solid rgba(205, 227, 255, .2);
  border-radius: 50%;
  box-shadow: 0 0 0 42px rgba(194, 222, 255, .045), 0 0 0 84px rgba(194, 222, 255, .028)
}

.retirement-featured>* { position: relative; z-index: 1 }

.retirement-number {
  min-width: 44px;
  height: 27px;
  border-color: rgba(172, 210, 255, .7);
  color: #c7e0ff;
  background: rgba(160, 202, 255, .1)
}

.retirement-featured h3 { margin-top: 29px; color: #fff; text-wrap: balance }
.retirement-featured p { color: #d7e6fb }
.retirement-featured .button { min-height: 51px; box-shadow: 0 12px 26px rgba(1, 14, 40, .25) }

.retirement-points { gap: 20px }

.retirement-points article {
  position: relative;
  min-height: 198px;
  overflow: hidden;
  border-color: rgba(194, 219, 255, .2);
  background: linear-gradient(145deg, rgba(24, 64, 132, .55), rgba(10, 32, 75, .7));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 14px 30px rgba(0, 8, 28, .14)
}

.retirement-points article:after {
  content: "";
  position: absolute;
  right: 18px;
  bottom: 0;
  width: 76px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, transparent, #4b9dff 35%, #b7d9ff 72%, transparent);
  box-shadow: 0 0 10px rgba(68, 153, 255, .95), 0 0 22px rgba(68, 153, 255, .52);
  animation: retirementEdgeGlow 2.8s ease-in-out infinite
}

.retirement-points article:before {
  content: "";
  position: absolute;
  z-index: 1;
  right: 20px;
  bottom: -4px;
  width: 9px;
  height: 9px;
  border: 2px solid #d7ecff;
  border-radius: 50%;
  background: #3190ff;
  box-shadow: 0 0 0 4px rgba(49, 144, 255, .17), 0 0 15px rgba(65, 156, 255, 1);
  animation: retirementEdgePoint 2.8s cubic-bezier(.45, .05, .55, .95) infinite
}

.retirement-points article:nth-child(2):before,
.retirement-points article:nth-child(2):after { animation-delay: .62s }
.retirement-points article:nth-child(3):before,
.retirement-points article:nth-child(3):after { animation-delay: 1.24s }

@keyframes retirementEdgeGlow {
  0%, 100% { opacity: .52; transform: scaleX(.62); transform-origin: right; }
  50% { opacity: 1; transform: scaleX(1); transform-origin: right; }
}

@keyframes retirementEdgePoint {
  0%, 12% { opacity: 0; transform: translateX(0) scale(.55); }
  28% { opacity: 1; transform: translateX(0) scale(1); }
  72% { opacity: 1; transform: translateX(-64px) scale(.82); }
  88%, 100% { opacity: 0; transform: translateX(-72px) scale(.5); }
}

.retirement-points article:hover {
  border-color: rgba(169, 207, 255, .52);
  background: linear-gradient(145deg, rgba(33, 82, 163, .72), rgba(12, 40, 92, .84));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 39px rgba(0, 8, 28, .27)
}

.retirement-points .retirement-number { color: #d0e5ff }
.retirement-points h3 { color: #fff; font-size: 18px }
.retirement-points p { color: #c7dbf7; font-size: 13px; line-height: 1.65 }

.retirement-note { max-width: 950px; color: #afc8ea; }

@media (max-width: 760px) {
  .retirement-heading { display: block; margin-bottom: 34px; padding-bottom: 24px; }
  .retirement-heading>p { margin-top: 22px; padding-left: 17px; }
  .retirement-featured { min-height: 390px; }
  .retirement-points article { min-height: 0; }
}

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

  .hero-media:after,
  .hero-actions .button:before,
  .footer-glow--1,
  .footer-glow--2 {
    animation: none
  }
}