.about-hero {

  grid-template-columns: minmax(0, 0.95fr) minmax(420px, 1.05fr);

  align-items: center;

  min-height: 720px;

  background: #092746;

}

.about-hero::after {

  content: "";

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  z-index: -2;

  width: 48%;

  background:

    linear-gradient(90deg, #092746 0%, rgba(9, 39, 70, 0.08) 40%),

    url("../images/hero.jpg") center / cover;

  clip-path: polygon(13% 0, 100% 0, 100% 100%, 0 100%);

}

.about-hero-copy {

  max-width: 760px;

}

.about-hero h1 {

  font-size: clamp(48px, 5.8vw, 88px);

  line-height: 0.98;

  letter-spacing: -3.5px;

}

.about-hero-mark {

  align-self: end;

  justify-self: end;

  margin: 0 -2vw -35px 0;

  padding: 0;

  border: 0;

  text-align: right;

}

.about-hero-mark span {

  color: rgba(255, 255, 255, 0.32);

  mix-blend-mode: overlay;

}

.company-story {

  position: relative;

  grid-template-columns: minmax(150px, 0.28fr) minmax(0, 1.72fr);

  background:

    linear-gradient(90deg, #e7ebed 0 25%, transparent 25%),

    #f8f7f2;

}

.story-index {

  border-color: rgba(13, 39, 72, 0.5);

}

.story-lead {

  max-width: 980px;

  font-size: clamp(30px, 3.5vw, 53px);

  letter-spacing: -1.5px;

}

.company-name {

  position: relative;

  display: inline;

  color: #0b3158;

  font-weight: 400;

  background: linear-gradient(90deg, #0b3158, #326c8d, #0b3158);

  background-size: 220% 100%;

  -webkit-background-clip: text;

  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: company-name-sheen 7s ease-in-out infinite;

}

.company-identity {

  position: relative;

  display: block;

  max-width: 940px;

  margin-bottom: 34px;

  padding: 28px 42px 34px;

  overflow: hidden;

  background:

    radial-gradient(circle at 92% 20%, rgba(189, 213, 74, 0.3), transparent 24%),

    linear-gradient(115deg, #dfe8ec, rgba(236, 241, 241, 0.28));

}

.company-identity::after {

  content: "AKV";

  position: absolute;

  right: 22px;

  bottom: -30px;

  color: rgba(11, 49, 88, 0.055);

  font-family: Georgia, serif;

  font-size: clamp(88px, 12vw, 170px);

  line-height: 1;

  pointer-events: none;

}

.company-identity small {

  position: relative;

  z-index: 1;

  display: block;

  margin-bottom: 15px;

  color: #6f7e89;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 2px;

  text-transform: uppercase;

}

.company-identity .company-name {

  position: relative;

  z-index: 1;

  display: block;

  font-size: 1.08em;

  line-height: 0.98;

}

.company-identity em {

  position: relative;

  z-index: 1;

  display: block;

  margin-top: 9px;

  color: #91a52a;

  font-size: 0.55em;

  font-style: italic;

  line-height: 1;

  letter-spacing: 0;

}

.company-description {

  display: block;

  max-width: 900px;

}

.credential-intro h2,

.leadership-heading h2,

.location-copy h2 {

  font-size: clamp(36px, 4vw, 60px);

  letter-spacing: -2px;

}

.story-columns p:first-child {

  transform: translateY(38px);

}

.credentials {

  min-height: 600px;

  padding-top: clamp(65px, 7vw, 100px);

  padding-bottom: clamp(65px, 7vw, 100px);

  background:

    radial-gradient(circle at 15% 100%, rgba(94, 179, 199, 0.28), transparent 35%),

    radial-gradient(circle at 100% 0%, rgba(189, 213, 74, 0.2), transparent 34%),

    #091f38;

}

.credentials::before,

.credentials::after {

  content: "";

  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(2px);

}

.credentials::before {

  top: -110px;

  right: 12%;

  width: 330px;

  height: 330px;

  background: radial-gradient(circle, rgba(113, 190, 211, 0.2), transparent 68%);

  animation: credential-glow-one 12s ease-in-out infinite alternate;

}

.credentials::after {

  bottom: -140px;

  left: 22%;

  width: 390px;

  height: 390px;

  background: radial-gradient(circle, rgba(189, 213, 74, 0.16), transparent 68%);

  animation: credential-glow-two 15s ease-in-out infinite alternate;

}

.credential-intro {

  width: 46%;

  margin-bottom: 18px;

}

.credential-line {

  position: relative;

  display: block;

  z-index: 1;

  height: 310px;

  border: 0;

}

.credential-line > div {

  position: absolute;

  display: flex;

  flex-direction: column;

  justify-content: center;

  width: clamp(205px, 18vw, 285px);

  aspect-ratio: 1;

  min-height: 0;

  padding: 34px;

  border: 1px solid rgba(255, 255, 255, 0.28);

  border-radius: 50%;

  text-align: center;

  backdrop-filter: blur(7px);

  box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.025);

  will-change: transform;

}

.credential-line > div:first-child {

  left: 2%;

  bottom: -25px;

  padding: 34px;

  background: rgba(87, 161, 187, 0.18);

  animation: credential-float-one 8s ease-in-out infinite alternate;

}

.credential-line > div:nth-child(2) {

  left: 35%;

  bottom: 58px;

  background: rgba(255, 255, 255, 0.05);

  animation: credential-float-two 9.5s ease-in-out infinite alternate;

}

.credential-line > div:last-child {

  right: 2%;

  bottom: -8px;

  border-right: 1px solid rgba(255, 255, 255, 0.28);

  background: rgba(189, 213, 74, 0.12);

  animation: credential-float-three 8.8s ease-in-out infinite alternate;

}

.credential-line b {

  font-size: clamp(36px, 3.5vw, 54px);

}

.credential-line p {

  margin: 16px auto 8px;

  font-size: 14px;

}

@keyframes company-name-sheen {

  0%,

  100% {

    background-position: 100% 50%;

  }

  50% {

    background-position: 0% 50%;

  }

}

@keyframes credential-glow-one {

  to {

    transform: translate3d(-80px, 65px, 0) scale(1.18);

  }

}

@keyframes credential-glow-two {

  to {

    transform: translate3d(95px, -55px, 0) scale(0.88);

  }

}

@keyframes credential-float-one {

  to {

    transform: translate3d(18px, -15px, 0) rotate(2deg);

  }

}

@keyframes credential-float-two {

  to {

    transform: translate3d(-12px, 18px, 0) rotate(-2deg);

  }

}

@keyframes credential-float-three {

  to {

    transform: translate3d(-20px, -12px, 0) rotate(1.5deg);

  }

}

.leadership {

  background: #f4f3ee;

}

.leadership-heading {

  grid-template-columns: minmax(0, 0.85fr) minmax(260px, 0.35fr);

}

.team-list {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 0 46px;

  border-top: 1px solid rgba(13, 39, 72, 0.3);

}

.team-list article {

  position: relative;

  display: grid;

  grid-template-columns: 55px minmax(0, 1fr);

  gap: 10px 22px;

  align-content: center;

  min-height: 170px;

  padding: 34px 24px 34px 0;

  border-top: 0;

  border-bottom: 1px solid rgba(13, 39, 72, 0.3);

  overflow: hidden;

  transition:

    padding-left 0.4s cubic-bezier(0.16, 1, 0.3, 1),

    background 0.35s ease;

}

.team-list article:nth-child(n) {

  margin-top: 0;

  margin-left: 0;

}

.team-list article:first-child {

  grid-column: 1 / -1;

  grid-template-columns: 80px minmax(280px, 0.85fr) minmax(0, 1.15fr);

  min-height: 210px;

  padding: 45px 52px;

  border-bottom: 0;

  background:

    radial-gradient(circle at 90% 20%, rgba(189, 213, 74, 0.18), transparent 28%),

    #0c2d50;

  color: #fff;

}

.team-list article::before {

  content: "";

  position: absolute;

  top: 0;

  bottom: 0;

  left: 0;

  width: 3px;

  background: #bdd54a;

  transform: scaleY(0);

  transform-origin: bottom;

  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);

}

.team-list article:first-child::after {

  content: "LEADERSHIP";

  position: absolute;

  right: 32px;

  bottom: -10px;

  color: rgba(255, 255, 255, 0.055);

  font-family: Georgia, serif;

  font-size: clamp(68px, 9vw, 135px);

  letter-spacing: -5px;

  pointer-events: none;

}

.team-list h3 {

  align-self: center;

  font-size: clamp(24px, 2.2vw, 34px);

  transition: transform 0.35s ease;

}

.team-list p {

  grid-column: 2;

  align-self: start;

  color: #687887;

  transition: color 0.35s ease, transform 0.35s ease;

}

.team-list article:first-child p {

  grid-column: 3;

  align-self: center;

  color: #bdd54a;

}

.team-list article:first-child span {

  color: #bdd54a;

}

.team-list article:hover {

  padding-left: 20px;

  background: rgba(255, 255, 255, 0.55);

}

.team-list article:first-child:hover {

  padding-left: 65px;

  background:

    radial-gradient(circle at 82% 35%, rgba(189, 213, 74, 0.24), transparent 30%),

    #10385f;

}

.team-list article:hover::before {

  transform: scaleY(1);

}

.team-list article:hover h3,

.team-list article:hover p {

  transform: translateX(5px);

}

.team-list {

  position: relative;

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 0 34px;

  padding-top: 0;

  border-top: 0;

}

.team-list::before {

  content: "";

  position: absolute;

  top: 245px;

  right: 11.5%;

  left: 11.5%;

  height: 1px;

  background: linear-gradient(90deg, transparent, rgba(13, 39, 72, 0.3) 8%, rgba(13, 39, 72, 0.3) 92%, transparent);

}

.team-list article,

.team-list article:first-child {

  display: block;

  min-height: 0;

  padding: 36px 0 30px;

  overflow: visible;

  border: 0;

  border-top: 1px solid rgba(13, 39, 72, 0.25);

  background: transparent;

  color: #0d2748;

  text-align: left;

}

.team-list article:first-child {

  position: relative;

  grid-column: 1 / -1;

  justify-self: center;

  width: min(620px, 70%);

  margin-bottom: 95px;

  padding: 36px 0 42px;

  border-top: 0;

  border-bottom: 1px solid rgba(13, 39, 72, 0.28);

  text-align: center;

}

.team-list article:first-child::before {

  top: auto;

  bottom: -96px;

  left: 50%;

  width: 1px;

  height: 95px;

  background: rgba(13, 39, 72, 0.3);

  transform: none;

}

.team-list article:first-child::after {

  content: "DIRECTOR";

  position: static;

  display: block;

  margin-top: 22px;

  color: #91a52a;

  font-family: Arial, Helvetica, sans-serif;

  font-size: 9px;

  font-weight: 800;

  letter-spacing: 3px;

}

.team-list article:not(:first-child)::before {

  top: -5px;

  bottom: auto;

  left: 50%;

  width: 9px;

  height: 9px;

  border-radius: 50%;

  background: #bdd54a;

  transform: translateX(-50%);

}

.team-list span,

.team-list article:first-child span {

  display: block;

  margin-bottom: 30px;

  color: #91a52a;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 1.5px;

}

.team-list h3 {

  min-height: 76px;

  font-size: clamp(24px, 2vw, 32px);

  line-height: 1.08;

}

.team-list article:first-child h3 {

  min-height: 0;

  font-size: clamp(36px, 4vw, 58px);

}

.team-list p,

.team-list article:first-child p {

  display: block;

  margin-top: 18px;

  color: #687887;

  font-size: 10px;

  line-height: 1.55;

  letter-spacing: 1.2px;

}

.team-list article:hover,

.team-list article:first-child:hover {

  padding-left: 0;

  background: transparent;

}

.team-list article:hover h3 {

  color: #315f7d;

  transform: translateY(-5px);

}

.team-list article:hover p {

  transform: none;

}

.company-promise {

  background:

    linear-gradient(110deg, rgba(9, 39, 70, 0.98), rgba(32, 78, 112, 0.9)),

    url("../images/workforce.jpg") center / cover;

  color: #fff;

  text-align: left;

}

.company-promise blockquote {

  margin-left: 0;

  font-size: clamp(34px, 5vw, 70px);

  letter-spacing: -2px;

}

.office-location {

  position: relative;

  display: block;

  min-height: 680px;

  padding: 0;

  background: #dce3e8;

}

.map-frame {

  position: absolute;

  inset: 0;

  min-height: 0;

}

.location-copy {

  position: absolute;

  top: 50%;

  left: 7vw;

  z-index: 2;

  width: min(420px, 42vw);

  padding: 48px;

  background: rgba(250, 249, 245, 0.94);

  box-shadow: 0 28px 80px rgba(7, 27, 49, 0.2);

  transform: translateY(-50%);

  backdrop-filter: blur(14px);

}

@media (max-width: 900px) {

  .about-hero {

    grid-template-columns: 1fr;

  }

  .about-hero::after {

    width: 70%;

    opacity: 0.45;

  }

  .company-story {

    background: #f8f7f2;

  }

  .credential-intro {

    width: 100%;

  }

  .credential-line {

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 18px;

    height: auto;

  }

  .credential-line > div,

  .credential-line > div:first-child,

  .credential-line > div:nth-child(2),

  .credential-line > div:last-child {

    position: relative;

    inset: auto;

    width: auto;

    padding: 28px 20px;

    animation: none;

  }

}

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

  .company-name,

  .credentials::before,

  .credentials::after,

  .credential-line > div {

    animation: none;

  }

}

@media (max-width: 650px) {

  .credential-line {

    grid-template-columns: 1fr;

  }

  .credential-line > div,

  .credential-line > div:first-child,

  .credential-line > div:nth-child(2),

  .credential-line > div:last-child {

    width: min(290px, 100%);

    margin: 0 auto;

  }

  .team-list {

    grid-template-columns: 1fr;

  }

  .team-list article {

    grid-template-columns: 38px minmax(0, 1fr);

    gap: 8px 16px;

    min-height: 0;

    padding: 23px 0;

  }

  .team-list article:first-child {

    grid-column: auto;

    grid-template-columns: 38px minmax(0, 1fr);

    min-height: 180px;

    padding: 34px 28px;

  }

  .team-list article:first-child p {

    grid-column: 2;

  }

  .team-list p {

    grid-column: 2;

  }

  .location-copy {

    top: auto;

    right: 22px;

    bottom: 22px;

    left: 22px;

    width: auto;

    padding: 32px;

    transform: none;

  }

}

@media (max-width: 850px) {

  .team-list {

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 0 28px;

  }

  .team-list::before {

    display: none;

  }

  .team-list article:first-child {

    grid-column: 1 / -1;

    width: 100%;

    margin-bottom: 30px;

  }

  .team-list article:first-child::before {

    display: none;

  }

  .team-list article:not(:first-child)::before {

    display: none;

  }

}

@media (max-width: 580px) {

  .company-identity {

    padding: 24px;

  }

  .company-identity .company-name {

    font-size: 0.92em;

  }

  .team-list {

    grid-template-columns: 1fr;

  }

  .team-list article,

  .team-list article:first-child {

    width: 100%;

    margin: 0;

    padding: 28px 0;

    border-top: 1px solid rgba(13, 39, 72, 0.25);

    border-bottom: 0;

    text-align: left;

  }

  .team-list article:first-child::after {

    text-align: left;

  }

  .team-list h3,

  .team-list article:first-child h3 {

    min-height: 0;

    font-size: 29px;

  }

}

/* Ambient motion for every About page section */

.about-hero::after {

  transform-origin: center;

  animation: about-hero-breathe 14s ease-in-out infinite alternate;

}

.company-story {

  background:

    linear-gradient(90deg, rgba(222, 229, 233, 0.88) 0 25%, transparent 25%),

    radial-gradient(circle at 82% 15%, rgba(89, 161, 190, 0.14), transparent 27%),

    radial-gradient(circle at 34% 88%, rgba(189, 213, 74, 0.13), transparent 24%),

    #f8f7f2;

  background-size: auto, 135% 135%, 145% 145%, auto;

  animation: company-story-ambient 16s ease-in-out infinite alternate;

}

.company-story::after {

  content: "";

  position: absolute;

  right: -110px;

  bottom: -150px;

  width: 340px;

  height: 340px;

  border: 1px solid rgba(13, 39, 72, 0.08);

  border-radius: 50%;

  box-shadow: 0 0 0 48px rgba(89, 161, 190, 0.025);

  pointer-events: none;

  animation: about-outline-drift 13s ease-in-out infinite alternate;

}

.leadership {

  position: relative;

  isolation: isolate;

  overflow: hidden;

  background:

    radial-gradient(circle at 5% 18%, rgba(189, 213, 74, 0.14), transparent 24%),

    radial-gradient(circle at 94% 80%, rgba(90, 163, 190, 0.14), transparent 28%),

    #f4f3ee;

  background-size: 135% 135%, 145% 145%, auto;

  animation: leadership-ambient 18s ease-in-out infinite alternate;

}

.leadership::before {

  content: "";

  position: absolute;

  top: 24%;

  left: -180px;

  z-index: -1;

  width: 410px;

  height: 410px;

  border: 1px solid rgba(13, 39, 72, 0.07);

  border-radius: 50%;

  box-shadow:

    0 0 0 54px rgba(189, 213, 74, 0.025),

    0 0 0 112px rgba(49, 95, 125, 0.018);

  animation: leadership-orbit 15s ease-in-out infinite alternate;

}

.leadership::after {

  content: "TEAM";

  position: absolute;

  right: -35px;

  bottom: 40px;

  z-index: -1;

  color: rgba(13, 39, 72, 0.028);

  font-family: Georgia, serif;

  font-size: clamp(130px, 22vw, 330px);

  line-height: 0.7;

  pointer-events: none;

  animation: team-word-drift 14s ease-in-out infinite alternate;

}

.company-promise {

  background-size: 100% 100%, 108% 108%;

  animation: promise-background-drift 16s ease-in-out infinite alternate;

}

.map-frame iframe {

  transform: scale(1.01);

  transform-origin: center;

  animation: map-depth-breathe 15s ease-in-out infinite alternate;

}

@media (min-width: 651px) {

  .location-copy {

    animation: location-panel-float 8s ease-in-out infinite alternate;

  }

}

@keyframes about-hero-breathe {

  to {

    transform: scale(1.035) translate3d(-8px, 4px, 0);

  }

}

@keyframes company-story-ambient {

  0% {

    background-position: 0 0, 100% 0%, 15% 100%, 0 0;

  }

  100% {

    background-position: 0 0, 72% 22%, 42% 74%, 0 0;

  }

}

@keyframes about-outline-drift {

  to {

    transform: translate3d(-55px, -40px, 0) scale(1.08);

  }

}

@keyframes leadership-ambient {

  0% {

    background-position: 0% 0%, 100% 100%, 0 0;

  }

  100% {

    background-position: 24% 18%, 72% 68%, 0 0;

  }

}

@keyframes leadership-orbit {

  to {

    transform: translate3d(70px, 45px, 0) scale(1.08);

  }

}

@keyframes team-word-drift {

  to {

    transform: translate3d(-45px, -24px, 0);

  }

}

@keyframes promise-background-drift {

  to {

    background-position: 0 0, 54% 46%;

    background-size: 100% 100%, 114% 114%;

  }

}

@keyframes map-depth-breathe {

  to {

    transform: scale(1.035);

    filter: saturate(0.78) contrast(1.03);

  }

}

@keyframes location-panel-float {

  to {

    box-shadow: 0 38px 95px rgba(7, 27, 49, 0.26);

    transform: translateY(calc(-50% - 8px));

  }

}

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

  .about-hero::after,

  .company-story,

  .company-story::after,

  .leadership,

  .leadership::before,

  .leadership::after,

  .company-promise,

  .map-frame iframe,

  .location-copy {

    animation: none;

  }

}