/* ==========================================================
   YACF - Yashwant Akshay Charitable Foundation
   Palette: Navy + Royal Blue + Soft Gold (solid colours, no gradients)
   Fonts: Poppins (+ Noto Sans Devanagari for Marathi) | Icons: Font Awesome
   ========================================================== */
:root {
  color-scheme: light;
  --navy: #12284C;
  --blue: #1F5FBF;
  --steel: #3A7CA5;
  --gold: #F2A93B;
  --gold-d: #D98C14;
  --sky: #E8F0FB;
  --bg: #F7F9FC;
  --card: #ffffff;
  --line: #DCE5F2;
  --tx: #1E2A3B;
  --mut: #566579;
  --sh: 0 10px 28px rgba(18, 40, 76, .10);
  --r: 20px;
  --font: Poppins, "Noto Sans Devanagari", system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px
}

body {
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  background: var(--bg);
  color: var(--tx);
  overflow-x: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0)
}

html[lang=en] .m,
html[lang=mr] .e {
  display: none
}

a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

button,
input,
textarea {
  font-family: inherit
}

.w {
  max-width: 1150px;
  margin: 0 auto;
  padding: 0 20px
}

section {
  padding: 80px 0
}

.alt {
  background: var(--sky)
}

h1,
h2,
h3,
h4 {
  line-height: 1.3;
  font-weight: 600
}

h2 {
  font-size: clamp(25px, 3.2vw, 36px);
  color: var(--navy);
  text-align: center
}

h2::after {
  content: "";
  display: block;
  width: 70px;
  height: 4px;
  border-radius: 4px;
  margin: 12px auto 0;
  background: var(--gold)
}

.sub {
  text-align: center;
  color: var(--mut);
  max-width: 680px;
  margin: 10px auto 44px
}

.center {
  text-align: center;
  margin-top: 36px
}

/* ---------- top bar ---------- */
.top {
  background: var(--navy);
  color: #dbe6f7;
  font-size: 13px;
  padding: 7px 0
}

.top .w {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap
}

.top a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 16px;
  transition: .3s
}

.top a i {
  color: var(--gold);
  font-size: 13px
}

.top a:hover {
  color: var(--gold)
}

.top .soc a {
  margin: 0 0 0 16px
}

/* ---------- header / nav ---------- */
header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  box-shadow: 0 2px 14px rgba(18, 40, 76, .10)
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--navy);
  font-size: 14.5px;
  line-height: 1.2
}

.logo span {
  white-space: nowrap
}

.logo img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
  transition: .6s
}

.logo:hover img {
  transform: rotate(360deg)
}

nav {
  display: flex;
  align-items: center;
  font-size: 14px;
  font-weight: 500
}

nav>a,
.dd>a {
  padding: 8px 10px;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  transition: .3s
}

nav>a:hover,
.dd:hover>a {
  background: var(--sky);
  color: var(--blue)
}

nav>a.active,
.dd>a.active {
  background: var(--sky);
  color: var(--blue);
  font-weight: 600;
  box-shadow: inset 0 -3px 0 var(--gold)
}

.dd {
  position: relative
}

.dd>a i {
  font-size: 10px;
  transition: .3s
}

.dd:hover>a i {
  transform: rotate(180deg)
}

.dd ul {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 230px;
  background: #fff;
  list-style: none;
  padding: 8px;
  border-radius: 14px;
  box-shadow: var(--sh);
  border: 1px solid var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .3s
}

.dd:hover ul,
.dd.o ul {
  opacity: 1;
  visibility: visible;
  transform: none
}

.dd li a {
  display: block;
  padding: 9px 14px;
  border-radius: 10px;
  transition: .3s
}

.dd li a:hover {
  background: var(--sky);
  color: var(--blue);
  padding-left: 20px
}

.lang {
  display: flex;
  background: var(--sky);
  border-radius: 30px;
  padding: 3px;
  border: 0;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  margin: 0 6px
}

.lang b {
  padding: 5px 11px;
  border-radius: 30px;
  color: var(--mut);
  transition: .3s
}

html[lang=en] .lang b:first-child,
html[lang=mr] .lang b:last-child {
  background: var(--navy);
  color: #fff
}

.don {
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  padding: 10px 18px;
  border-radius: 30px;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(242, 169, 59, .35);
  transition: .3s
}

.don i {
  transition: .3s
}

.don:hover {
  background: var(--gold-d);
  transform: translateY(-3px)
}

.don:hover i {
  transform: scale(1.25)
}

#menuBtn {
  display: none;
  background: none;
  border: 0;
  color: var(--navy);
  cursor: pointer;
  font-size: 26px;
  width: 44px;
  height: 44px
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  gap: 8px;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  background: var(--blue);
  padding: 12px 26px;
  border-radius: 30px;
  box-shadow: 0 6px 18px rgba(31, 95, 191, .28);
  transition: .3s;
  white-space: nowrap
}

.btn::after {
  content: "";
  position: absolute;
  top: 0;
  left: -70%;
  width: 50%;
  height: 100%;
  background: rgba(255, 255, 255, .35);
  transform: skewX(-20deg);
  transition: .7s
}

.btn:hover {
  transform: translateY(-3px);
  background: var(--navy)
}

.btn:hover::after {
  left: 130%
}

.btn.red,
.btn.gold,
.btn.green {
  background: var(--gold);
  color: var(--navy);
  box-shadow: 0 6px 18px rgba(242, 169, 59, .35)
}

.btn.red:hover,
.btn.gold:hover,
.btn.green:hover {
  background: var(--gold-d);
  color: var(--navy)
}

.btn.line {
  background: #fff;
  color: var(--blue);
  border: 2px solid var(--blue);
  box-shadow: none
}

.btn.line:hover {
  background: var(--blue);
  color: #fff
}

.btn.white {
  background: #fff;
  color: var(--navy)
}

.btn.white:hover {
  background: var(--gold);
  color: var(--navy)
}

.btn.ghost {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, .8);
  box-shadow: none
}

.btn.ghost:hover {
  background: #fff;
  color: var(--navy)
}

/* ---------- home hero slider ---------- */
.hero {
  position: relative;
  height: calc(100vh - 118px);
  min-height: 580px;
  padding: 0;
  overflow: hidden;
  color: var(--navy);
  background: var(--sky)
}

.hero::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  left: -150px;
  top: -140px;
  border-radius: 50%;
  background: rgba(242, 169, 59, .20);
  animation: drift 12s ease-in-out infinite
}

.hero::after {
  content: "";
  position: absolute;
  width: 480px;
  height: 480px;
  right: -170px;
  bottom: -200px;
  border-radius: 50%;
  background: rgba(31, 95, 191, .12);
  animation: drift 14s ease-in-out infinite reverse
}

@keyframes drift {
  50% {
    transform: translate(26px, 20px) scale(1.06)
  }
}

.sl {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1s, visibility 1s
}

.sl.on {
  opacity: 1;
  visibility: visible
}

.sl .w {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  width: 100%
}

.sl h1 {
  font-size: clamp(27px, 4vw, 46px);
  color: var(--navy);
  font-weight: 700;
  transform: translateY(30px);
  opacity: 0;
  transition: 1s .3s
}

.sl p {
  margin: 14px 0 26px;
  font-size: 17px;
  color: var(--mut);
  transform: translateY(30px);
  opacity: 0;
  transition: 1s .5s
}

.sl .btns {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  transform: translateY(30px);
  opacity: 0;
  transition: 1s .7s
}

.sl.on h1,
.sl.on p,
.sl.on .btns {
  transform: none;
  opacity: 1
}

.pic {
  margin: 0;
  width: 100%;
  max-width: 520px;
  justify-self: center;
  aspect-ratio: 4/3;
  border-radius: 28px;
  overflow: hidden;
  border: 6px solid #fff;
  outline: 3px solid var(--gold);
  background: #fff;
  box-shadow: 0 22px 46px rgba(18, 40, 76, .22);
  transform: scale(.92) translateX(40px);
  opacity: 0;
  transition: 1s .3s
}

.sl.on .pic {
  transform: none;
  opacity: 1
}

.pic img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.pic img.fb {
  object-fit: contain;
  padding: 8px
}

.hero .tag {
  position: absolute;
  bottom: 58px;
  left: 0;
  right: 0;
  z-index: 2;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  color: var(--navy);
  padding: 0 20px
}

.dots {
  position: absolute;
  bottom: 22px;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  gap: 10px
}

.dots button {
  width: 12px;
  height: 12px;
  border-radius: 9px;
  border: 0;
  padding: 0;
  background: rgba(18, 40, 76, .25);
  cursor: pointer;
  transition: .3s
}

.dots button.on {
  background: var(--gold);
  width: 34px
}

.arr {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: var(--navy);
  box-shadow: var(--sh);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .3s
}

.arr:hover {
  background: var(--navy);
  color: #fff
}

.arr.prev {
  left: 14px
}

.arr.prev i {
  transform: rotate(90deg)
}

.arr.next {
  right: 14px
}

.arr.next i {
  transform: rotate(-90deg)
}

/* ---------- inner page hero banner (all pages except index) ---------- */
.pg {
  position: relative;
  overflow: hidden;
  padding: 70px 0 62px;
  text-align: center;
  background: var(--navy);
  color: #fff
}

.pg::before {
  content: "";
  position: absolute;
  width: 300px;
  height: 300px;
  right: -90px;
  top: -110px;
  border-radius: 50%;
  border: 36px solid rgba(242, 169, 59, .22);
  animation: drift 10s ease-in-out infinite
}

.pg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--gold)
}

.pg .w {
  position: relative;
  z-index: 1
}

.pg .w::before {
  content: "";
  position: absolute;
  left: -60px;
  bottom: -40px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: rgba(31, 95, 191, .45);
  z-index: -1;
  animation: drift 13s ease-in-out infinite reverse
}

.pg h1 {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 700;
  color: #fff;
  animation: up .8s both
}

.pg h1::after {
  content: "";
  display: block;
  width: 64px;
  height: 4px;
  border-radius: 4px;
  background: var(--gold);
  margin: 14px auto 0
}

.pg p {
  color: #cfdcf2;
  margin-top: 12px;
  animation: up .8s .15s both
}

.crumb {
  display: inline-flex;
  gap: 8px;
  font-size: 14px;
  color: #cfdcf2;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
  animation: up .8s .3s both
}

.crumb span {
  color: #fff
}

.crumb a {
  color: var(--gold);
  font-weight: 500
}

.crumb a:hover {
  text-decoration: underline
}

@keyframes up {
  from {
    opacity: 0;
    transform: translateY(24px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* ---------- about / mission ---------- */
.ab {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 44px;
  align-items: center
}

.ab img {
  width: 100%;
  max-width: 340px;
  margin: auto;
  animation: fl 6s ease-in-out infinite
}

.ab h2 {
  text-align: left
}

.ab h2::after {
  margin-left: 0
}

.ab p {
  color: var(--mut);
  margin-top: 14px
}

.ab .btn {
  margin-top: 20px
}

.badge {
  display: inline-block;
  background: var(--sky);
  color: var(--blue);
  font-weight: 600;
  font-size: 13px;
  padding: 4px 14px;
  border-radius: 30px;
  margin-bottom: 8px
}

.mv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 44px
}

@keyframes fl {
  50% {
    transform: translateY(-14px)
  }
}

/* ---------- stats ---------- */
.stats {
  background: var(--blue);
  color: #dbe8fb;
  padding: 48px 0
}

.stats .w {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center
}

.stats .w>div {
  padding: 14px;
  border-radius: 16px;
  transition: .4s
}

.stats .w>div:hover {
  background: rgba(255, 255, 255, .14);
  transform: translateY(-6px)
}

.stats b {
  display: block;
  font-size: 46px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2
}

.stats .w>div:nth-child(2) b {
  color: var(--gold)
}

/* ---------- cards ---------- */
.cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px
}

.cards>.card {
  flex: 0 1 calc((100% - 48px) / 3)
}

.card {
  --c: var(--blue);
  background: var(--card);
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--sh);
  border: 1px solid var(--line);
  border-top: 5px solid var(--c);
  transition: .4s
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 18px 40px rgba(18, 40, 76, .18)
}

.ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--c, var(--blue));
  color: #fff;
  font-size: 26px;
  margin-bottom: 14px;
  transition: .5s
}

.card:hover .ic {
  transform: rotate(-8deg) scale(1.1);
  border-radius: 50%
}

.card h3 {
  color: var(--navy);
  margin-bottom: 8px
}

.card ul {
  padding-left: 18px;
  color: var(--mut);
  font-size: 14.5px
}

.card li {
  transition: .3s
}

.card li:hover {
  color: var(--blue);
  transform: translateX(6px)
}

.card p {
  color: var(--mut)
}

.more {
  display: inline-flex;
  gap: 6px;
  margin-top: 14px;
  font-weight: 600;
  font-size: 14px;
  color: var(--blue)
}

.more:hover {
  text-decoration: underline
}

.price {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 8px;
  display: inline-block;
  transition: .3s
}

.card:hover .price {
  transform: scale(1.08)
}

.note {
  margin: 36px auto 0;
  max-width: 820px;
  background: #FFF8EB;
  border-radius: 16px;
  padding: 22px;
  border: 2px dashed var(--gold);
  text-align: center;
  box-shadow: var(--sh)
}

.proj {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 26px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 6px solid var(--c, var(--blue));
  border-radius: var(--r);
  padding: 28px;
  box-shadow: var(--sh);
  margin-bottom: 24px
}

.proj .ic {
  width: 90px;
  height: 90px;
  border-radius: 24px;
  margin: 0;
  font-size: 38px
}

.proj h3 {
  color: var(--navy);
  font-size: 22px;
  margin-bottom: 8px
}

.proj ul {
  padding-left: 20px;
  color: var(--mut)
}

.proj li {
  margin: 4px 0
}

/* ---------- transparency ---------- */
.tr {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px
}

.tr div {
  background: var(--card);
  padding: 18px;
  border-radius: 14px;
  box-shadow: var(--sh);
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--gold);
  word-break: break-word;
  transition: .35s
}

.tr div:hover {
  transform: translateY(-8px);
  border-bottom-color: var(--blue)
}

.tr small {
  display: block;
  color: var(--mut)
}

.tr b {
  color: var(--navy)
}

/* ---------- team (new design: arch banner + ringed round photo) ---------- */
.team {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 34px;
  padding-top: 8px
}

.member {
  position: relative;
  flex: 0 1 300px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--sh);
  overflow: hidden;
  text-align: center;
  padding-bottom: 28px;
  transition: transform .45s, box-shadow .45s, border-color .45s
}

.member::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 128px;
  background: var(--navy);
  border-radius: 0 0 50% 50% / 0 0 38px 38px;
  transition: height .5s, background .5s
}

.member::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  right: -36px;
  top: -44px;
  border-radius: 50%;
  border: 20px solid rgba(242, 169, 59, .28);
  animation: drift 9s ease-in-out infinite
}

.member:hover {
  transform: translateY(-12px);
  box-shadow: 0 22px 44px rgba(18, 40, 76, .22);
  border-color: var(--gold)
}

.member:hover::before {
  height: 150px;
  background: var(--blue)
}

.member .ph {
  position: relative;
  z-index: 1;
  width: 178px;
  height: 178px;
  margin: 38px auto 0;
  border-radius: 50%;
  background: #fff
}

.member .ph::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 3px dashed var(--gold);
  animation: spin 18s linear infinite
}

.member:hover .ph::before {
  animation-duration: 5s;
  border-color: var(--navy)
}

.member .ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 50%;
  border: 6px solid #fff;
  box-shadow: 0 8px 22px rgba(18, 40, 76, .22);
  transition: transform .6s
}

.member:hover .ph img {
  transform: scale(1.08)
}

.member .in {
  position: relative;
  z-index: 1;
  padding: 24px 16px 0
}

.member h3 {
  color: var(--navy);
  font-size: 19px;
  transition: color .3s
}

.member:hover h3 {
  color: var(--blue)
}

.role {
  display: inline-block;
  margin-top: 10px;
  padding: 5px 20px;
  border-radius: 30px;
  font-weight: 600;
  font-size: 13.5px;
  color: #fff;
  background: var(--blue);
  transition: transform .35s, box-shadow .35s
}

.member:hover .role {
  transform: scale(1.1);
  box-shadow: 0 8px 18px rgba(18, 40, 76, .25)
}

.role.r1 {
  background: var(--navy)
}

.role.r2 {
  background: var(--blue)
}

.role.r3 {
  background: var(--steel)
}

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

/* ---------- gallery ---------- */
.gal {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px
}

.gal figure {
  margin: 0;
  aspect-ratio: 4/3;
  border-radius: 16px;
  overflow: hidden;
  background: var(--sky);
  border: 1px solid var(--line);
  transition: .4s
}

.gal figure:hover {
  transform: scale(1.04) rotate(-.6deg);
  box-shadow: var(--sh)
}

.gal img {
  width: 100%;
  height: 100%;
  object-fit: cover
}

.gal img.fb {
  object-fit: contain;
  padding: 14px;
  background: #fff
}

/* ---------- contact + map ---------- */
.ct {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 30px;
  align-items: start
}

.cl,
.cf {
  border-radius: 22px;
  box-shadow: var(--sh);
  background: var(--card);
  border: 1px solid var(--line)
}

.cl {
  padding: 26px
}

.cf {
  padding: 32px
}

.cl h3,
.cf h3 {
  font-size: 22px;
  color: var(--navy);
  margin-bottom: 10px;
  display: flex;
  gap: 10px;
  align-items: center
}

.cl h3 i {
  color: var(--gold)
}

.cf h3 {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 2px solid var(--gold)
}

.ri {
  display: flex;
  gap: 14px;
  padding: 13px 0;
  border-top: 1px solid var(--line);
  transition: .3s
}

.ri:hover {
  transform: translateX(8px)
}

.ri>i {
  color: var(--blue);
  flex: none;
  margin-top: 6px;
  width: 22px;
  text-align: center;
  font-size: 18px
}

.ri a:hover {
  color: var(--blue);
  text-decoration: underline
}

.fg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px
}

.fg label {
  font-size: 14px;
  font-weight: 500;
  display: grid;
  gap: 6px
}

.fw {
  grid-column: 1 / -1
}

input,
textarea {
  width: 100%;
  padding: 13px 16px;
  border-radius: 12px;
  border: 1.5px solid #c9d6ea;
  font: inherit;
  background: #fff;
  color: var(--tx);
  transition: .3s
}

input:hover,
textarea:hover {
  border-color: var(--blue)
}

input:focus,
textarea:focus {
  outline: 2px solid var(--gold);
  border-color: var(--gold)
}

.sb {
  width: 100%;
  margin-top: 20px;
  padding: 15px
}

.mp {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  aspect-ratio: 16/9;
  border-radius: 22px;
  overflow: hidden;
  border: 6px solid #fff;
  box-shadow: var(--sh);
  background: var(--sky)
}

.mp iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0
}

.om {
  position: absolute;
  top: 12px;
  left: 12px;
  background: #fff;
  color: var(--blue);
  font-weight: 600;
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 3px 10px #0003;
  transition: .3s
}

.om:hover {
  background: var(--navy);
  color: #fff
}

/* ---------- CTA band ---------- */
.cta {
  background: var(--navy);
  text-align: center;
  padding: 64px 0;
  color: #fff
}

.cta h2 {
  color: #fff;
  margin-bottom: 8px
}

.cta p {
  color: #cfdcf2;
  max-width: 640px;
  margin: 14px auto 24px
}

.cta .btn.red {
  background: var(--gold);
  color: var(--navy)
}

/* ---------- footer (compact, solid navy) ---------- */
footer {
  position: relative;
  margin-top: 0;
  background: var(--navy);
  color: #cfdcf2;
  border-top: 4px solid var(--gold);
  padding: 38px 0 0;
  font-size: 14.5px
}

.fc {
  display: grid;
  grid-template-columns: 1.25fr 1.45fr 1.2fr 1.35fr;
  gap: 28px
}

.flogo {
  display: flex;
  gap: 12px;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  color: #fff;
  line-height: 1.25
}

.flogo img {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 3px solid #fff;
  object-fit: cover;
  transition: .6s
}

.flogo:hover img {
  transform: rotate(360deg)
}

.fb p {
  margin: 12px 0 0;
  color: #b9c9e3;
  font-size: 13.5px;
  line-height: 1.55
}

.so {
  display: flex;
  gap: 8px;
  margin: 14px 0 0;
  flex-wrap: wrap;
  align-items: center
}

.so a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .10);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  transition: .3s
}

.so a:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-4px)
}

.so a.don-sm {
  width: auto;
  border-radius: 30px;
  padding: 0 14px;
  display: inline-flex;
  gap: 6px;
  background: var(--gold);
  color: var(--navy);
  font-weight: 600;
  font-size: 13px
}

.so a.don-sm i {
  transition: .3s
}

.so a.don-sm:hover {
  background: #fff
}

.so a.don-sm:hover i {
  transform: scale(1.3)
}

footer h4 {
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  margin-bottom: 14px;
  position: relative;
  padding-bottom: 8px
}

footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
  transition: width .4s
}

.fcol:hover h4::after {
  width: 64px
}

footer ul {
  list-style: none;
  padding: 0
}

.fl li {
  margin-bottom: 7px
}

.fl.two {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 14px
}

.fl li a {
  display: inline-flex;
  align-items: baseline;
  transition: .3s
}

.fl li a::before {
  content: "\203A";
  color: var(--gold);
  font-weight: 700;
  margin-right: 8px;
  transition: .3s
}

.fl li a:hover {
  color: var(--gold);
  transform: translateX(5px)
}

.fl li a.active {
  color: var(--gold);
  font-weight: 600
}

.fct li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 9px;
  line-height: 1.45
}

.fct li>i {
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(242, 169, 59, .16);
  color: var(--gold);
  font-size: 13px;
  transition: .3s
}

.fct li:hover>i {
  background: var(--gold);
  color: var(--navy);
  transform: scale(1.12)
}

.fct li>span,
.fct li>a {
  padding-top: 4px;
  word-break: break-word
}

.fct a:hover {
  color: var(--gold)
}

.cp {
  margin-top: 26px;
  padding: 14px 20px;
  text-align: center;
  font-size: 12.5px;
  color: #9fb3d4;
  border-top: 1px solid rgba(255, 255, 255, .12)
}

/* ---------- floating buttons ---------- */
.fab {
  position: fixed;
  right: 18px;
  z-index: 40;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 24px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: .35s
}

.fab:hover {
  transform: translateY(-6px) scale(1.1)
}

.fab.wa {
  bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  background: var(--blue);
  animation: pl 2.2s infinite
}

#toTop {
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  background: var(--gold);
  color: var(--navy);
  font-size: 20px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px)
}

#toTop.s {
  opacity: 1;
  visibility: visible;
  transform: none
}

#toTop.s:hover {
  transform: translateY(-6px) scale(1.1)
}

@keyframes pl {
  0% {
    box-shadow: 0 0 0 0 rgba(31, 95, 191, .5)
  }

  100% {
    box-shadow: 0 0 0 20px rgba(31, 95, 191, 0)
  }
}

/* ---------- reveal ---------- */
.js .rv {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity .9s, transform .9s
}

.js .rv.in {
  opacity: 1;
  transform: none
}

.js .fc> :nth-child(2) {
  transition-delay: .1s
}

.js .fc> :nth-child(3) {
  transition-delay: .2s
}

.js .fc> :nth-child(4) {
  transition-delay: .3s
}

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  #menuBtn {
    display: block
  }

  .top .soc {
    display: none
  }

  nav {
    position: absolute;
    top: 76px;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
    padding: 16px;
    background: #fff;
    box-shadow: 0 10px 20px rgba(0, 0, 0, .1);
    max-height: 80vh;
    overflow: auto;
    border-top: 1px solid var(--line)
  }

  nav.o {
    display: flex
  }

  nav>a,
  .dd>a {
    justify-content: center;
    padding: 10px 18px;
    font-size: 15px
  }

  .dd {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center
  }

  .dd ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    display: none;
    text-align: center;
    min-width: 0;
    width: 100%
  }

  .dd.o ul {
    display: block
  }

  .dd.o>a i {
    transform: rotate(180deg)
  }

  .lang,
  .don {
    align-self: center;
    margin: 6px 0
  }

  .sl .w,
  .ab,
  .ct,
  .mv {
    grid-template-columns: 1fr
  }

  .sl .w,
  .ab {
    text-align: center
  }

  .sl .btns {
    justify-content: center
  }

  .pic {
    order: -1;
    max-width: 380px
  }

  .hero {
    height: auto;
    min-height: 0
  }

  .hero .slides {
    display: grid
  }

  .sl {
    position: relative;
    grid-area: 1 / 1;
    padding: 36px 0 110px
  }

  .ab h2 {
    text-align: center
  }

  .ab h2::after {
    margin: 12px auto 0
  }

  .stats .w {
    grid-template-columns: 1fr 1fr
  }

  .cards>.card {
    flex-basis: calc((100% - 24px) / 2)
  }

  .arr {
    display: none
  }

  .proj {
    grid-template-columns: 1fr;
    text-align: center
  }

  .proj .ic {
    margin: 0 auto
  }

  .proj ul {
    text-align: left
  }

  .fc {
    grid-template-columns: 1fr 1fr;
    gap: 26px 24px
  }

  .fb {
    grid-column: 1 / -1;
    text-align: center
  }

  .flogo,
  .so {
    justify-content: center
  }
}

@media (max-width: 640px) {
  section {
    padding: 56px 0
  }

  .pg {
    padding: 52px 0 46px
  }

  .cards>.card {
    flex-basis: 100%
  }

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

  .mp {
    aspect-ratio: 4/3
  }

  .hero .tag {
    bottom: 44px;
    font-size: 13px
  }

  .logo {
    font-size: 13px
  }

  .logo img {
    width: 46px;
    height: 46px
  }

  .stats b {
    font-size: 38px
  }

  /* compact footer on phones */
  footer {
    padding-top: 28px;
    font-size: 14px
  }

  .fc {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .fcol:nth-of-type(1),
  .fcol {
    text-align: left
  }

  .fl.two {
    grid-template-columns: 1fr 1fr
  }

  .fcol:nth-child(3) .fl {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 14px
  }

  .fcol:nth-child(3) .fl li:last-child {
    grid-column: 1 / -1
  }

  .fct {
    display: grid;
    grid-template-columns: 1fr;
  }

  footer h4 {
    margin-bottom: 8px;
    font-size: 15px
  }

  .fb p {
    display: none
  }

  .so {
    margin-top: 10px
  }

  .fl li {
    margin-bottom: 3px
  }

  .fct li {
    margin-bottom: 5px
  }

  .fct li>i {
    width: 26px;
    height: 26px;
    font-size: 12px
  }

  .cp {
    margin-top: 18px;
    font-size: 11.5px;
    padding: 12px 16px
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none !important;
    transition: none !important
  }

  html {
    scroll-behavior: auto
  }
}

/* ---------- news clippings in gallery (new) ---------- */
.gal.news {
  grid-template-columns: repeat(auto-fit, minmax(280px, 420px));
  justify-content: center
}

.gal.news figure {
  aspect-ratio: auto;
  background: #fff
}

.gal.news img {
  height: auto;
  object-fit: contain;
  display: block
}

/* ---------- photo lightbox (new) ---------- */
.lb {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(10, 20, 40, .92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 56px 16px 24px
}

.lb[hidden] {
  display: none
}

.lb img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, .5)
}

.lbx {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top, 0px));
  right: 14px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  color: var(--navy);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center
}

.lbx:hover {
  background: var(--gold)
}

body.lbo {
  overflow: hidden
}

/* ==========================================================
   v2 additions: centered card icons, gallery marquee,
   more animation + hover effects
   ========================================================== */

/* card icon centered */
.card .ic {
  margin: 0 auto 16px
}

/* ---------- index gallery marquee (left -> right) ---------- */
.marq {
  position: relative;
  overflow: hidden;
  padding: 10px 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent)
}

.marq .track {
  display: flex;
  width: max-content;
  animation: marqR 45s linear infinite
}

.marq:hover .track {
  animation-play-state: paused
}

.marq figure {
  margin: 0 8px;
  flex: none;
  width: 300px;
  aspect-ratio: 4/3;
  border-radius: 18px;
  overflow: hidden;
  border: 4px solid #fff;
  box-shadow: var(--sh);
  background: var(--sky);
  position: relative;
  transition: transform .45s, box-shadow .45s, border-color .45s
}

.marq figure::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 30px;
  color: #fff;
  background: rgba(18, 40, 76, .45);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none
}

.marq figure:hover {
  transform: translateY(-8px) scale(1.05);
  border-color: var(--gold);
  box-shadow: 0 18px 38px rgba(18, 40, 76, .28)
}

.marq figure:hover::after {
  opacity: 1
}

.marq img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  cursor: zoom-in;
  transition: transform .6s
}

.marq figure:hover img {
  transform: scale(1.12)
}

@keyframes marqR {
  from {
    transform: translateX(-50%)
  }

  to {
    transform: translateX(0)
  }
}

/* ---------- scroll progress bar ---------- */
.prog {
  position: fixed;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  z-index: 9998;
  background: var(--gold);
  transform-origin: left;
  transform: scaleX(0)
}

/* ---------- reveal variants + stagger (delay is set from JS) ---------- */
.js .cards .rv {
  transform: translateY(50px) scale(.94)
}

.js .team .rv {
  transform: translateY(50px) scale(.9)
}

.js .tr .rv,
.js .tr>div {
  transform: translateY(30px)
}

.js .gal figure.rv {
  transform: scale(.88) translateY(20px)
}

.js .mv .rv:first-child {
  transform: translateX(-60px)
}

.js .mv .rv:last-child {
  transform: translateX(60px)
}

.js .ab.rv>div {
  transform: none
}

.js .rv.in,
.js .cards .rv.in,
.js .team .rv.in,
.js .tr .rv.in,
.js .gal figure.rv.in,
.js .mv .rv.in {
  transform: none
}

main {
  overflow-x: clip
}

@media (max-width: 900px) {

  .js .mv .rv:first-child,
  .js .mv .rv:last-child {
    transform: translateY(40px)
  }
}

/* after reveal finishes, give hover transitions their quick timing back */
.js .rv.done {
  transition: transform .4s, box-shadow .4s, border-color .4s, background .4s, color .3s
}

/* headings: underline draws itself */
h2::after {
  transition: width .8s .2s
}

h2.rv:not(.in)::after {
  width: 0
}

.sub.rv {
  transition-delay: .15s
}

/* ---------- icon animations ---------- */
.ic i {
  display: inline-block;
  animation: bob 3.2s ease-in-out infinite
}

.card:hover .ic i,
.proj:hover .ic i {
  animation: wig .7s
}

@keyframes bob {
  50% {
    transform: translateY(-4px)
  }
}

@keyframes wig {
  25% {
    transform: rotate(-18deg) scale(1.15)
  }

  60% {
    transform: rotate(14deg) scale(1.15)
  }
}

.card .ic {
  box-shadow: 0 10px 22px rgba(18, 40, 76, .18)
}

.card:hover .ic {
  box-shadow: 0 0 0 8px rgba(242, 169, 59, .25), 0 10px 22px rgba(18, 40, 76, .2)
}

/* card: shine sweep on hover */
.card {
  position: relative;
  overflow: hidden
}

.card::after {
  content: "";
  position: absolute;
  top: 0;
  left: -80%;
  width: 45%;
  height: 100%;
  background: rgba(255, 255, 255, .45);
  transform: skewX(-20deg);
  transition: left .8s;
  pointer-events: none
}

.card:hover::after {
  left: 140%
}

.proj {
  transition: transform .4s, box-shadow .4s
}

.proj:hover {
  transform: translateX(8px);
  box-shadow: 0 18px 40px rgba(18, 40, 76, .18)
}

/* ---------- decorative drifting shapes in tinted sections ---------- */
.alt {
  position: relative;
  overflow: hidden
}

.alt::before {
  content: "";
  position: absolute;
  width: 260px;
  height: 260px;
  left: -90px;
  top: 40px;
  border-radius: 50%;
  border: 30px solid rgba(242, 169, 59, .16);
  animation: drift 11s ease-in-out infinite
}

.alt::after {
  content: "";
  position: absolute;
  width: 220px;
  height: 220px;
  right: -70px;
  bottom: 30px;
  border-radius: 50%;
  background: rgba(31, 95, 191, .08);
  animation: drift 13s ease-in-out infinite reverse
}

.alt>.w {
  position: relative;
  z-index: 1
}

.cta {
  position: relative;
  overflow: hidden
}

.cta::before,
.cta::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  animation: drift 10s ease-in-out infinite
}

.cta::before {
  width: 240px;
  height: 240px;
  left: -80px;
  top: -90px;
  border: 30px solid rgba(242, 169, 59, .2)
}

.cta::after {
  width: 200px;
  height: 200px;
  right: -60px;
  bottom: -80px;
  background: rgba(31, 95, 191, .4)
}

.cta .w {
  position: relative;
  z-index: 1
}

/* ---------- more hover effects ---------- */
.don {
  animation: glow 2.6s infinite
}

.don:hover {
  animation: none
}

@keyframes glow {
  0% {
    box-shadow: 0 0 0 0 rgba(242, 169, 59, .55)
  }

  70%,
  100% {
    box-shadow: 0 0 0 14px rgba(242, 169, 59, 0)
  }
}

nav>a:not(.don) {
  position: relative
}

nav>a:not(.don)::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 0;
  height: 3px;
  border-radius: 3px;
  background: var(--gold);
  transform: translateX(-50%);
  transition: width .35s
}

nav>a:not(.don):hover::after {
  width: 55%
}

.pic {
  transition: 1s .3s, box-shadow .4s
}

.sl.on .pic:hover {
  transform: scale(1.03) rotate(-1deg);
  box-shadow: 0 28px 56px rgba(18, 40, 76, .3)
}

.pic img {
  transition: transform .7s
}

.pic:hover img {
  transform: scale(1.08)
}

.ab img {
  transition: filter .4s
}

.ab img:hover {
  filter: drop-shadow(0 12px 22px rgba(18, 40, 76, .3))
}

.gal img {
  transition: transform .6s
}

.gal figure:hover img {
  transform: scale(1.1)
}

.gal figure {
  transition: transform .4s, box-shadow .4s, border-color .4s
}

.gal figure:hover {
  border-color: var(--gold)
}

.badge {
  transition: .3s
}

.badge:hover {
  background: var(--gold);
  color: var(--navy);
  transform: translateY(-2px)
}

.more {
  transition: .3s
}

.more:hover {
  gap: 12px
}

.note {
  transition: .4s
}

.note:hover {
  transform: translateY(-6px) rotate(-.4deg)
}

.cl,
.cf {
  transition: .4s
}

.cl:hover,
.cf:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(18, 40, 76, .16)
}

.mp {
  transition: .4s
}

.mp:hover {
  transform: scale(1.01);
  box-shadow: 0 18px 40px rgba(18, 40, 76, .2)
}

.stats b {
  transition: transform .4s
}

.stats .w>div:hover b {
  transform: scale(1.12)
}

.lb img {
  animation: zoomIn .35s
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(.85)
  }
}

@media (max-width: 640px) {
  .marq figure {
    width: 230px
  }

  .member .ph {
    width: 160px;
    height: 160px
  }
}


/* ==========================================================
   v3: inner-page design upgrade (about, work, transparency,
   csr, gallery, contact, team) + extra hover effects
   ========================================================== */

/* ---------- inner banner: dotted pattern + wave edge ---------- */
.pg {
  background-color: var(--navy);
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1.5px, transparent 1.5px);
  background-size: 26px 26px
}

.pg::after {
  height: 6px;
  background: var(--gold)
}

.pg h1 {
  letter-spacing: .3px
}

.crumb {
  background: rgba(255, 255, 255, .08);
  padding: 6px 18px;
  border-radius: 30px;
  transition: .3s
}

.crumb:hover {
  background: rgba(255, 255, 255, .16)
}

/* ---------- about: framed logo + focus chips ---------- */
.ab>img {
  position: relative;
  padding: 14px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 6px var(--sky), 0 0 0 9px var(--gold), var(--sh);
  max-width: 300px;
  aspect-ratio: 1;
  object-fit: contain
}

.ab>img:hover {
  box-shadow: 0 0 0 6px var(--sky), 0 0 0 12px var(--gold), 0 20px 40px rgba(18, 40, 76, .25)
}

.mv .card {
  text-align: center
}

.mv .card .ic {
  margin: 0 auto 16px
}

.chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin-top: 8px
}

.chip {
  --c: var(--blue);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-bottom: 4px solid var(--c);
  border-radius: 40px;
  padding: 10px 22px 10px 12px;
  font-weight: 600;
  color: var(--navy);
  box-shadow: var(--sh);
  transition: transform .35s, background .35s, color .35s
}

.chip i {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--c);
  color: #fff;
  font-size: 16px;
  transition: transform .5s
}

.chip:hover {
  transform: translateY(-8px);
  background: var(--navy);
  color: #fff
}

.chip:hover i {
  transform: rotate(360deg) scale(1.1)
}

/* ---------- work page: numbered, richer project rows ---------- */
main {
  counter-reset: pj
}

.proj {
  position: relative;
  overflow: hidden;
  counter-increment: pj;
  background: var(--card);
  transition: transform .4s, box-shadow .4s, background .4s
}

.proj::after {
  content: "0" counter(pj);
  position: absolute;
  right: 22px;
  top: -6px;
  font-size: 96px;
  font-weight: 800;
  line-height: 1;
  color: var(--c, var(--blue));
  opacity: .07;
  transition: opacity .4s, transform .5s;
  pointer-events: none
}

.proj:hover {
  background: #FCFDFF
}

.proj:hover::after {
  opacity: .16;
  transform: scale(1.1) translateX(-6px)
}

.proj .ic {
  box-shadow: 0 0 0 7px rgba(18, 40, 76, .06), 0 10px 22px rgba(18, 40, 76, .18);
  transition: transform .5s, border-radius .5s, box-shadow .5s
}

.proj:hover .ic {
  transform: rotate(-8deg) scale(1.08);
  border-radius: 50%;
  box-shadow: 0 0 0 9px rgba(242, 169, 59, .28), 0 10px 22px rgba(18, 40, 76, .2)
}

.proj ul {
  list-style: none;
  padding: 0
}

.proj li {
  position: relative;
  padding-left: 26px;
  transition: transform .3s, color .3s
}

.proj li::before {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 0;
  font-size: 14px;
  color: var(--c, var(--blue));
  transition: transform .3s
}

.proj li:hover {
  transform: translateX(8px);
  color: var(--blue)
}

.proj li:hover::before {
  transform: scale(1.3)
}

.proj h3 {
  position: relative;
  display: inline-block
}

.proj h3::after {
  content: "";
  display: block;
  height: 3px;
  width: 36px;
  border-radius: 3px;
  background: var(--c, var(--blue));
  margin-top: 4px;
  transition: width .4s
}

.proj:hover h3::after {
  width: 100%
}

/* ---------- transparency tiles: icon badge + hover fill ---------- */
.tr div {
  position: relative;
  padding: 22px 18px 18px;
  overflow: hidden
}

.tr div::before {
  content: "\f2c2";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 14px;
  top: 14px;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: var(--sky);
  color: var(--blue);
  font-size: 16px;
  transition: .4s
}

.tr div:nth-child(2)::before {
  content: "\f15c"
}

.tr div:nth-child(3)::before {
  content: "\f2c2"
}

.tr div:nth-child(4)::before {
  content: "\f0e3"
}

.tr div:nth-child(5)::before {
  content: "\f4c0"
}

.tr div:nth-child(6)::before {
  content: "\f0ac"
}

.tr div:nth-child(7)::before {
  content: "\f1c0"
}

.tr div:nth-child(8)::before {
  content: "\f19c"
}

.tr div:hover {
  box-shadow: 0 18px 38px rgba(18, 40, 76, .18)
}

.tr div:hover::before {
  background: var(--gold);
  color: var(--navy);
  transform: rotate(360deg) scale(1.1)
}

.tr small {
  padding-right: 48px
}

/* ---------- section subtitle + generic polish ---------- */
.sub {
  position: relative
}

.alt .card,
.card {
  background-image: linear-gradient(180deg, rgba(232, 240, 251, .45), transparent 90px)
}

.cl .ri:first-of-type {
  border-top: 0
}

.ri>i {
  transition: .3s;
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 50%;
  background: var(--sky);
  margin-top: 0
}

.ri:hover>i {
  background: var(--gold);
  color: var(--navy);
  transform: rotate(360deg)
}

/* gallery page: tiles get a caption-style overlay icon on hover */
.gal figure {
  position: relative
}

.gal:not(.news) figure::after {
  content: "\f00e";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 28px;
  color: #fff;
  background: rgba(18, 40, 76, .42);
  opacity: 0;
  transition: opacity .35s;
  pointer-events: none
}

.gal:not(.news) figure:hover::after {
  opacity: 1
}

/* footer links/icons hover */
.fcol li,
.fb p {
  transition: .3s
}

.flogo {
  transition: .3s
}

.flogo:hover {
  transform: translateX(4px)
}

/* ---------- responsive fixes for new pieces ---------- */
@media (max-width: 1180px) {
  .ab>img {
    max-width: 240px
  }

  .proj::after {
    font-size: 72px
  }
}

@media (max-width: 640px) {
  .chip {
    width: 100%;
    justify-content: flex-start
  }

  .proj {
    padding: 22px 18px
  }

  .proj::after {
    font-size: 60px;
    right: 12px
  }

  .proj li {
    text-align: left
  }

  .tr {
    grid-template-columns: 1fr 1fr;
    gap: 12px
  }

  .tr div {
    padding: 18px 14px 14px
  }

  .tr div::before {
    display: none
  }

  .tr small {
    padding-right: 0
  }

  .member {
    flex-basis: 100%;
    max-width: 320px
  }
}