/* ================================================================
   LINNEXUS v4 — Dark Navy · Gold Accents · One White Section/Page
   ================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;600;700;800&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&display=swap');

:root {
  --navy: #0B1F3A;
  --navy-mid: #0F2847;
  --navy-deep: #060E1C;
  --navy-card: #0D2240;
  --navy-glass: rgba(11, 31, 58, 0.6);
  --teal: #107C6D;
  --teal-l: #14A090;
  --teal-xl: #3FCFBD;
  --teal-dim: rgba(16, 124, 109, 0.10);
  --teal-b: rgba(16, 124, 109, 0.22);
  --teal-glow: rgba(16, 124, 109, 0.30);
  --gold: #C9A84C;
  --gold-l: #E2C06A;
  --gold-dim: rgba(201, 168, 76, 0.12);
  --gold-b: rgba(201, 168, 76, 0.25);
  /* White section palette */
  --w-bg: #F8FAFB;
  --w-card: #FFFFFF;
  --w-border: #E0EAF2;
  --w-text: #0B1F3A;
  --w-muted: #5A7590;
  /* Typography */
  --d: 'DM Sans', sans-serif;
  --s: 'Syne', sans-serif;
  /* Misc */
  --r: 12px;
  --rl: 20px;
  --rxl: 28px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

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

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--d);
  background: var(--navy);
  color: #fff;
  line-height: 1.65;
  overflow-x: hidden;
  cursor: none
}

/* ── CURSOR ── */
.cur {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translate(-50%, -50%)
}

.cur-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-xl);
  box-shadow: 0 0 10px var(--teal)
}

.cur-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid var(--teal-b);
  top: 0;
  left: 0;
  transition: width .3s var(--ease), height .3s var(--ease), border-color .3s
}

.cur-dot,
.cur-ring {
  position: fixed;
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999
}

/* ── TYPOGRAPHY ── */
h1,
h2,
h3,
h4,
h5 {
  font-family: var(--s);
  line-height: 1.1
}

h1 {
  font-size: clamp(2.1rem, 5vw, 4.4rem);
  font-weight: 800
}

h2 {
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 700
}

h3 {
  font-size: 1.3rem;
  font-weight: 700
}

h4 {
  font-size: 1rem;
  font-weight: 700
}

p {
  font-size: 1rem;
  line-height: 1.8
}

.accent {
  background: linear-gradient(120deg, var(--teal-xl), var(--gold-l));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent
}

.eyebrow {
  font-family: var(--s);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1rem
}

.eyebrow::before {
  content: '';
  width: 24px;
  height: 1.5px;
  flex-shrink: 0
}

.eyebrow.teal {
  color: var(--teal-xl)
}

.eyebrow.teal::before {
  background: var(--teal)
}

.eyebrow.gold {
  color: var(--gold-l)
}

.eyebrow.gold::before {
  background: var(--gold)
}

.eyebrow.w-teal {
  color: var(--teal)
}

.eyebrow.w-teal::before {
  background: var(--teal)
}

.eyebrow.center {
  justify-content: center
}

.eyebrow.center::before {
  display: none
}

/* ── LAYOUT ── */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2.5rem
}

.pad {
  padding: 7rem 0
}

.pad-sm {
  padding: 4.5rem 0
}

.s-head {
  margin-bottom: 3.5rem
}

.s-head.c {
  text-align: center
}

.s-head.c p {
  max-width: 560px;
  margin: .75rem auto 0;
  color: rgba(255, 255, 255, .6)
}

.s-head p {
  margin-top: .75rem;
  max-width: 540px;
  color: rgba(255, 255, 255, .6)
}

/* ─── DARK SECTION (default) ─── */
.sect {
  background: var(--navy)
}

.sect-deep {
  background: var(--navy-deep)
}

.sect-mid {
  background: var(--navy-mid)
}

/* ─── WHITE SECTION ─── */
.sect-white {
  background: var(--w-bg)
}

.sect-white h2,
.sect-white h3,
.sect-white h4 {
  color: var(--w-text)
}

.sect-white p {
  color: var(--w-muted)
}

.sect-white .s-head p {
  color: var(--w-muted)
}

.sect-white .s-head.c p {
  color: var(--w-muted)
}

/* ── NAV ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
  padding: 0 2.5rem;
  transition: all .4s var(--ease)
}

.nav.scrolled {
  background: rgba(6, 14, 28, .92);
  backdrop-filter: blur(28px);
  box-shadow: 0 1px 0 rgba(16, 124, 109, .15), 0 4px 24px rgba(0, 0, 0, .35)
}

.nav-in {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px
}

/* LOGO */
.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none
}

.logo-img {
  height: 28px;
  width: auto;
  transition: transform .4s var(--spring), filter .3s
}

.logo:hover .logo-img {
  transform: scale(1.06) rotate(-3deg)
}

.logo-text {
  font-family: var(--s);
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .95);
  transition: color .3s
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 2.2rem;
  list-style: none
}

.nav-links a {
  font-family: var(--s);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .65);
  text-decoration: none;
  transition: color .3s;
  position: relative;
  padding-bottom: 3px
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease)
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1)
}

.nav-cta {
  background: linear-gradient(135deg, var(--teal), var(--teal-l)) !important;
  color: #fff !important;
  padding: .5rem 1.35rem !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px var(--teal-glow) !important;
  transition: transform .3s var(--spring), box-shadow .3s !important
}

.nav-cta::after {
  display: none !important
}

.nav-cta:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 26px var(--teal-glow) !important;
  color: #fff !important
}

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: none;
  padding: 4px
}

.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, .8);
  transition: all .3s
}

.mob-menu {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(6, 14, 28, .98);
  backdrop-filter: blur(24px);
  padding: 7rem 2.5rem 2rem;
  flex-direction: column
}

.mob-menu.open {
  display: flex
}

.mob-menu ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1.5rem
}

.mob-menu a {
  font-family: var(--s);
  font-size: 1.7rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  transition: color .3s
}

.mob-menu a:hover {
  color: var(--teal-xl)
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--s);
  font-size: .85rem;
  font-weight: 700;
  text-decoration: none;
  border: none;
  cursor: none;
  border-radius: 10px;
  padding: .9rem 2.1rem;
  transition: transform .3s var(--spring), box-shadow .3s, background .3s
}

.btn-teal {
  background: linear-gradient(135deg, var(--teal), var(--teal-l));
  color: #fff;
  box-shadow: 0 4px 18px var(--teal-glow)
}

.btn-teal:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px var(--teal-glow)
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold), var(--gold-l));
  color: var(--navy);
  box-shadow: 0 4px 18px var(--gold-dim)
}

.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(201, 168, 76, .4)
}

.btn-ghost {
  background: rgba(255, 255, 255, .06);
  color: #fff;
  border: 1.5px solid rgba(255, 255, 255, .18);
  backdrop-filter: blur(8px)
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
  transform: translateY(-3px)
}

.btn-outline-w {
  background: transparent;
  color: var(--w-text);
  border: 2px solid var(--w-text)
}

.btn-outline-w:hover {
  background: var(--w-text);
  color: #fff;
  transform: translateY(-3px)
}

.link-arr {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--teal-xl);
  font-family: var(--s);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap .3s, color .3s;
  cursor: none
}

.link-arr:hover {
  gap: .85rem;
  color: var(--gold-l)
}

.link-arr-w {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  color: var(--teal);
  font-family: var(--s);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap .3s, color .3s;
  cursor: none
}

.link-arr-w:hover {
  gap: .85rem;
  color: var(--navy)
}

/* ── HERO ── */
.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10rem 2.5rem 5rem;
  position: relative;
  z-index: 1
}

/* fixed bg layer */
.hero-bg {
  position: fixed;
  inset: 0;
  z-index: -3;
  background: var(--navy-deep)
}

.hero-img-bg {
  position: fixed;
  inset: 0;
  z-index: -2;
  background-image: url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: .07;
  animation: bgDrift 24s ease-in-out infinite alternate
}

@keyframes bgDrift {
  from {
    transform: scale(1)
  }

  to {
    transform: scale(1.05)
  }
}

.hero-grid-lines {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: linear-gradient(rgba(16, 124, 109, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 124, 109, 0.05) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 60% at 50% 40%, black, transparent)
}

.hero-orb-1 {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(16, 124, 109, .18), transparent 65%);
  top: -160px;
  right: -100px;
  filter: blur(80px);
  z-index: -2;
  animation: o1 14s ease-in-out infinite alternate;
  pointer-events: none
}

.hero-orb-2 {
  position: fixed;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 168, 76, .08), transparent 65%);
  bottom: 80px;
  left: -80px;
  filter: blur(100px);
  z-index: -2;
  animation: o2 18s ease-in-out infinite alternate;
  pointer-events: none
}

@keyframes o1 {
  from {
    transform: translate(0, 0)
  }

  to {
    transform: translate(50px, 40px)
  }
}

@keyframes o2 {
  from {
    transform: translate(0, 0)
  }

  to {
    transform: translate(-30px, 30px)
  }
}

#particles {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: var(--s);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--teal-xl);
  border: 1px solid var(--teal-b);
  background: rgba(16, 124, 109, .08);
  padding: .45rem 1.2rem;
  border-radius: 999px;
  margin-bottom: 2rem;
  backdrop-filter: blur(6px);
  animation: badgePop .6s var(--spring) both
}

.badge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-xl);
  box-shadow: 0 0 8px var(--teal-xl);
  animation: blink 2s ease-in-out infinite
}

@keyframes badgePop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(.9)
  }

  to {
    opacity: 1;
    transform: none
  }
}

@keyframes blink {

  0%,
  100% {
    opacity: 1;
    transform: scale(1)
  }

  50% {
    opacity: .5;
    transform: scale(1.5)
  }
}

.hero-title {
  color: #fff;
  margin-bottom: 1.6rem
}

.hero-sub {
  font-size: 1.08rem;
  color: rgba(255, 255, 255, .62);
  margin-bottom: 2.8rem;
  max-width: 480px
}

.hero-btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 3rem
}

.hero-scroll {
  display: flex;
  align-items: center;
  gap: .8rem;
  font-family: var(--s);
  font-size: .65rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .28)
}

.scroll-ln {
  width: 1.5px;
  height: 36px;
  background: linear-gradient(to bottom, var(--teal), transparent);
  animation: scrollLn 2.2s ease-in-out infinite
}

@keyframes scrollLn {

  0%,
  100% {
    opacity: 1;
    transform: scaleY(1)
  }

  50% {
    opacity: .3;
    transform: scaleY(.4)
  }
}

/* Hero visual — photo card */
.hero-card {
  position: relative;
  border-radius: var(--rxl);
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 60px rgba(16, 124, 109, .18);
  animation: cardFloat 7s ease-in-out infinite alternate;
  border: 1px solid rgba(255, 255, 255, .1)
}

.hero-card img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block
}

.hero-card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(6, 14, 28, .9) 0%, transparent 55%);
  padding: 2.2rem 2rem 1.8rem
}

.hero-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rxl);
  pointer-events: none
}

.hero-card-tag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-family: var(--s);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--teal-xl);
  margin-bottom: .55rem
}

.hero-card-tag-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--teal-xl);
  animation: blink 2s ease-in-out infinite
}

.hero-card-title {
  font-family: var(--s);
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.35
}

.hero-chip {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  background: rgba(6, 14, 28, .78);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r);
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .8rem
}

.hstat {
  display: flex;
  flex-direction: column;
  align-items: center
}

.hstat-n {
  font-family: var(--s);
  font-size: 1.5rem;
  font-weight: 800;
  color: #fff;
  line-height: 1
}

.hstat-l {
  font-size: .58rem;
  color: rgba(255, 255, 255, .4);
  text-align: center;
  margin-top: 2px
}

@keyframes cardFloat {
  from {
    transform: translateY(0) rotate(-.6deg)
  }

  to {
    transform: translateY(-16px) rotate(.6deg)
  }
}

/* ── STATS BAND ── */
.stats-band {
  padding: 4.5rem 0;
  background: var(--navy-deep);
  border-top: 1px solid rgba(16, 124, 109, .12);
  border-bottom: 1px solid rgba(16, 124, 109, .12)
}

.stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  text-align: center
}

.stat-n {
  font-family: var(--s);
  font-size: 3.4rem;
  font-weight: 800;
  background: linear-gradient(120deg, #fff, var(--teal-xl));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  display: block;
  margin-bottom: .35rem
}

.stat-l {
  font-family: var(--s);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .4)
}

/* ── SPLIT LAYOUT ── */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center
}

.split-text h2 {
  margin-bottom: 1.2rem
}

.split-text p {
  margin-bottom: 1rem;
  color: rgba(255, 255, 255, .62)
}

/* white section split */
.sect-white .split-text p {
  color: var(--w-muted)
}

/* ── CARDS ── */
/* Dark glass card */
.glass-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rl);
  padding: 1.8rem;
  transition: all .35s var(--ease);
  backdrop-filter: blur(8px)
}

.glass-card:hover {
  background: rgba(255, 255, 255, .08);
  border-color: var(--teal-b);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3), 0 0 30px var(--teal-glow)
}

.glass-card h4 {
  color: #fff;
  margin-bottom: .55rem
}

.glass-card p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .55)
}

/* White card (for white sections) */
.w-card {
  background: #fff;
  border: 1px solid var(--w-border);
  border-radius: var(--rl);
  padding: 2rem;
  box-shadow: 0 4px 20px rgba(11, 31, 58, .08);
  transition: all .4s var(--ease)
}

.w-card:hover {
  box-shadow: 0 14px 42px rgba(11, 31, 58, .14);
  transform: translateY(-6px);
  border-color: rgba(16, 124, 109, .25)
}

.w-card::before {
  content: '';
  display: block;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  margin: -2rem -2rem 1.5rem;
  border-radius: var(--rl) var(--rl) 0 0
}

.w-card h4 {
  color: var(--w-text);
  margin-bottom: .55rem
}

.w-card p {
  font-size: .9rem;
  color: var(--w-muted)
}

/* Pillar card — icon + text row */
.pillar {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  padding: 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  transition: all .3s var(--ease)
}

.pillar:hover {
  background: rgba(16, 124, 109, .12);
  border-color: var(--teal-b);
  transform: translateX(6px)
}

.p-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-b);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s var(--spring)
}

.pillar:hover .p-icon {
  transform: scale(1.12) rotate(-6deg)
}

.pillar h4 {
  color: #fff;
  margin-bottom: .3rem
}

.pillar p {
  font-size: .88rem;
  color: rgba(255, 255, 255, .5)
}

/* Service card */
.svc-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rxl);
  overflow: hidden;
  transition: all .4s var(--ease)
}

.svc-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .4), 0 0 40px var(--teal-glow);
  border-color: var(--teal-b)
}

.svc-img {
  aspect-ratio: 16/10;
  overflow: hidden;
  position: relative
}

.svc-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease)
}

.svc-card:hover .svc-img img {
  transform: scale(1.07)
}

/* bright service image — no overlay unless needed for text */
.svc-body {
  padding: 1.8rem
}

.svc-num {
  font-family: var(--s);
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--teal-xl);
  margin-bottom: .55rem
}

.svc-body h3 {
  color: #fff;
  margin-bottom: .6rem
}

.svc-body p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 1.2rem
}

.svc-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: var(--teal-xl);
  font-family: var(--s);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
  transition: gap .3s, color .3s;
  cursor: none
}

.svc-link:hover {
  gap: .7rem;
  color: var(--gold-l)
}

/* Image styles */
.img-b {
  border-radius: var(--rxl);
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .4)
}

.img-b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease)
}

.img-b:hover img {
  transform: scale(1.04)
}

.img-cap {
  position: relative;
  border-radius: var(--rxl);
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .35)
}

.img-cap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease)
}

.img-cap:hover img {
  transform: scale(1.04)
}

.img-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(6, 14, 28, .75), transparent 70%);
  padding: 1.2rem 1.2rem 1rem
}

.img-label span {
  font-family: var(--s);
  font-size: .72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .9);
  letter-spacing: .06em
}

/* White-section image needs lighter shadow */
.sect-white .img-b {
  box-shadow: 0 12px 40px rgba(11, 31, 58, .15)
}

.sect-white .img-cap {
  box-shadow: 0 8px 30px rgba(11, 31, 58, .12)
}

/* 2-col image grid */
.img-grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 1.2rem
}

.img-col {
  display: flex;
  flex-direction: column;
  gap: 1.2rem
}

/* Image strip */
.img-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden
}

.img-strip-item {
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden
}

.img-strip-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .7s var(--ease)
}

.img-strip-item:hover img {
  transform: scale(1.07)
}

.img-strip-text {
  font-family: var(--s);
  color: #ffffff;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 1px;
  text-shadow: 0 4px 12px rgba(0, 0, 0, 0.9);
  text-align: center;
  width: 100%;
  padding: 0 20px;
  line-height: 1.2;
  display: block;
}

/* Principles */
.principles {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center
}

.prin {
  display: flex;
  align-items: center;
  gap: .65rem;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  padding: .65rem 1.6rem;
  font-family: var(--s);
  font-size: .85rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .65);
  transition: all .35s var(--ease);
  cursor: none
}

.prin:hover {
  background: rgba(16, 124, 109, .18);
  border-color: var(--teal-b);
  color: #fff;
  transform: translateY(-4px);
  box-shadow: 0 8px 24px var(--teal-glow)
}

.prin-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal-xl);
  box-shadow: 0 0 8px var(--teal);
  flex-shrink: 0
}

/* White section principles */
.sect-white .prin {
  background: #fff;
  border-color: var(--w-border);
  color: var(--w-muted);
  box-shadow: 0 2px 8px rgba(11, 31, 58, .07)
}

.sect-white .prin:hover {
  background: rgba(16, 124, 109, .08);
  border-color: rgba(16, 124, 109, .3);
  color: var(--teal)
}

/* Serve grid */
.serve-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem
}

.serve-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  padding: 1rem 1.2rem;
  transition: all .3s var(--ease);
  cursor: none
}

.serve-item:hover {
  background: rgba(16, 124, 109, .14);
  border-color: var(--teal-b);
  transform: scale(1.03)
}

.s-icon {
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-b);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s var(--spring)
}

.serve-item:hover .s-icon {
  transform: scale(1.14) rotate(-5deg)
}

.serve-item span {
  font-family: var(--s);
  font-size: .82rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .65);
  transition: color .3s
}

.serve-item:hover span {
  color: #fff
}

/* Steps (white section) */
.steps {
  display: flex;
  flex-direction: column
}

.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 2.5rem;
  padding: 2.8rem 0;
  border-bottom: 1px solid var(--w-border);
  transition: all .3s var(--ease)
}

.step:last-child {
  border-bottom: none
}

.step:hover {
  padding-left: .6rem
}

.step-num-w {
  width: 62px;
  height: 62px;
  border-radius: var(--r);
  border: 1.5px solid var(--w-border);
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  box-shadow: 0 4px 12px rgba(11, 31, 58, .08);
  transition: all .3s var(--ease)
}

.step:hover .step-num-w {
  border-color: var(--teal);
  background: rgba(16, 124, 109, .06);
  box-shadow: 0 6px 22px rgba(16, 124, 109, .2)
}

.step-n {
  font-family: var(--s);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--teal)
}

.step h3 {
  color: var(--w-text);
  margin-bottom: .65rem;
  font-size: 1.3rem
}

.step p {
  color: var(--w-muted);
  max-width: 560px
}

/* Risk cards */
.risk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem
}

.risk-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rl);
  padding: 2rem;
  transition: all .35s var(--ease)
}

.risk-card:hover {
  border-color: var(--teal-b);
  background: rgba(16, 124, 109, .08);
  transform: translateY(-5px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .25)
}

.risk-card h4 {
  color: #fff;
  margin-bottom: .6rem
}

.risk-card p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5)
}

/* Partnership areas */
.pa-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem
}

.pa-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--r);
  padding: 1.5rem;
  transition: all .3s var(--ease)
}

.pa-item:hover {
  border-color: var(--teal-b);
  background: rgba(16, 124, 109, .08);
  transform: translateY(-4px)
}

.pa-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 8px var(--gold);
  flex-shrink: 0;
  margin-top: .45rem
}

.pa-item h5 {
  color: #fff;
  margin-bottom: .35rem
}

.pa-item p {
  font-size: .875rem;
  color: rgba(255, 255, 255, .5)
}

/* Serve cards (larger, for Partners page) */
.serve-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

.serve-card {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rxl);
  padding: 2.2rem;
  transition: all .4s var(--ease)
}

.serve-card:hover {
  border-color: var(--teal-b);
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .3)
}

.sc-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-b);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: transform .35s var(--spring)
}

.serve-card:hover .sc-icon {
  transform: scale(1.1) rotate(-6deg)
}

.serve-card h4 {
  color: #fff;
  margin-bottom: .55rem
}

.serve-card p {
  font-size: .9rem;
  color: rgba(255, 255, 255, .5)
}

/* Quote */
.quote-box {
  background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: var(--rxl);
  padding: 4rem;
  text-align: center;
  position: relative;
  overflow: hidden
}

.quote-box::before {
  content: '"';
  position: absolute;
  top: -1rem;
  left: 2rem;
  font-family: var(--s);
  font-size: 14rem;
  font-weight: 800;
  color: var(--teal);
  opacity: .06;
  line-height: 1;
  pointer-events: none
}

.quote-box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: var(--rxl);
  background: radial-gradient(ellipse at 50% 100%, rgba(16, 124, 109, .06), transparent 70%);
  pointer-events: none
}

.quote-text {
  font-size: 1.3rem;
  color: rgba(255, 255, 255, .85);
  font-style: italic;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1
}

.quote-by {
  font-family: var(--s);
  font-size: .75rem;
  font-weight: 700;
  color: var(--teal-xl);
  letter-spacing: .14em;
  text-transform: uppercase
}

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 5rem
}

.cd {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.8rem;
  align-items: flex-start
}

.cd-ic {
  width: 46px;
  height: 46px;
  border-radius: 11px;
  background: var(--teal-dim);
  border: 1px solid var(--teal-b);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .3s var(--spring)
}

.cd:hover .cd-ic {
  transform: scale(1.1) rotate(-5deg)
}

.cd-text label {
  font-family: var(--s);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35);
  display: block;
  margin-bottom: .2rem
}

.cd-text a,
.cd-text span {
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  font-size: .95rem;
  transition: color .3s
}

.cd-text a:hover {
  color: var(--teal-xl)
}

.eq-item {
  display: flex;
  align-items: center;
  gap: .8rem;
  padding: .85rem 1rem;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 10px;
  margin-bottom: .6rem;
  cursor: none;
  transition: all .3s
}

.eq-item:hover {
  border-color: var(--teal-b);
  background: rgba(16, 124, 109, .1)
}

.eq-item span {
  font-size: .88rem;
  color: rgba(255, 255, 255, .6)
}

.eq-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-xl);
  flex-shrink: 0
}

.form-wrap {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rxl);
  padding: 3rem;
  position: relative;
  overflow: hidden
}

.form-wrap::before {
  content: '';
  display: block;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold), transparent);
  margin: -3rem -3rem 2.5rem;
  position: relative
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem
}

.fg {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  margin-bottom: 1.2rem
}

.fg label {
  font-family: var(--s);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .35)
}

.fg input,
.fg select,
.fg textarea {
  background: rgba(255, 255, 255, .06);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 10px;
  padding: .9rem 1.1rem;
  color: #fff;
  font-family: var(--d);
  font-size: .95rem;
  transition: all .3s;
  outline: none;
  width: 100%
}

.fg input::placeholder,
.fg textarea::placeholder {
  color: rgba(255, 255, 255, .28)
}

.fg input:focus,
.fg select:focus,
.fg textarea:focus {
  border-color: var(--teal);
  background: rgba(16, 124, 109, .1);
  box-shadow: 0 0 0 3px rgba(16, 124, 109, .15)
}

.fg select {
  cursor: none;
  appearance: none;
  color: rgba(255, 255, 255, .6)
}

.fg select option {
  background: var(--navy-deep);
  color: #fff
}

.fg textarea {
  resize: vertical;
  min-height: 130px
}

.f-sub .btn {
  width: 100%;
  justify-content: center;
  margin-top: .5rem
}

/* CTA Banner */
.cta {
  padding: 7rem 2rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #083C32 0%, var(--teal) 45%, #0A5E52 100%)
}

.cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  opacity: .04
}

.cta-orb {
  position: absolute;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .08), transparent 55%);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none
}

.cta-in {
  position: relative;
  z-index: 1;
  max-width: 640px;
  margin: 0 auto
}

.cta-in h2 {
  color: #fff;
  margin-bottom: 1rem
}

.cta-in p {
  color: rgba(255, 255, 255, .78);
  margin-bottom: 2.8rem;
  font-size: 1.1rem
}

.cta-btns {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-wrap: wrap
}

/* Page Hero */
.phero {
  padding: 11rem 2.5rem 6.5rem;
  position: relative;
  overflow: hidden;
  background: var(--navy-deep)
}

.phero-photo {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .1;
  animation: bgDrift 24s ease-in-out infinite alternate
}

.phero-grad {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(6, 14, 28, .97) 40%, rgba(16, 124, 109, .18))
}

.phero-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(16, 124, 109, .04) 1px, transparent 1px), linear-gradient(90deg, rgba(16, 124, 109, .04) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse at 20% 50%, black 15%, transparent 65%)
}

.phero .wrap {
  position: relative;
  z-index: 3;
  max-width: 780px
}

.phero h1 {
  color: #fff;
  margin-bottom: 1.3rem
}

.phero p {
  color: rgba(255, 255, 255, .65);
  font-size: 1.15rem;
  max-width: 640px
}

/* Tab nav (services) */
.tab-nav {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.tab-btn {
  font-family: var(--s);
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .45);
  background: none;
  border: none;
  cursor: none;
  padding: .9rem 1.4rem;
  position: relative;
  transition: color .3s
}

.tab-btn::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--teal), var(--gold));
  transform: scaleX(0);
  transition: transform .3s var(--ease)
}

.tab-btn.active {
  color: #fff
}

.tab-btn.active::after {
  transform: scaleX(1)
}

.tab-btn:hover {
  color: rgba(255, 255, 255, .8)
}

.tab-panel {
  display: none
}

.tab-panel.active {
  display: block;
  animation: fadeUp .4s var(--ease)
}

.svc-detail {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start
}

.svc-detail h2 {
  color: #fff;
  margin-bottom: 1rem
}

.svc-detail p {
  color: rgba(255, 255, 255, .6);
  margin-bottom: 1rem
}

.feat-box {
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--rxl);
  padding: 2.2rem
}

.feat-box h4 {
  font-family: var(--s);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal-xl);
  margin-bottom: 1.5rem
}

.feat-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .9rem
}

.feat-list li {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  font-size: .9rem;
  color: rgba(255, 255, 255, .58);
  padding-bottom: .9rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06);
  line-height: 1.6
}

.feat-list li:last-child {
  border-bottom: none;
  padding-bottom: 0
}

.feat-list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal-xl);
  flex-shrink: 0;
  margin-top: .55rem;
  box-shadow: 0 0 6px var(--teal)
}

/* Footer */
.footer {
  background: var(--navy-deep);
  padding: 5.5rem 0 0;
  border-top: 1px solid rgba(16, 124, 109, .12)
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3.5rem;
  padding-bottom: 3.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, .06)
}

.footer-brand .logo {
  margin-bottom: .85rem;
  display: inline-flex
}

.f-tag {
  font-family: var(--s);
  font-size: .88rem;
  font-weight: 700;
  color: var(--teal-xl);
  margin-bottom: .6rem
}

.f-desc {
  font-size: .875rem;
  color: rgba(255, 255, 255, .35)
}

.footer-col h5 {
  font-family: var(--s);
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .9);
  margin-bottom: 1.4rem
}

.footer-col ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .7rem
}

.footer-col a {
  font-size: .875rem;
  color: rgba(255, 255, 255, .4);
  text-decoration: none;
  transition: color .3s
}

.footer-col a:hover {
  color: var(--teal-xl)
}

.footer-col li {
  font-size: .875rem;
  color: rgba(255, 255, 255, .4)
}

.footer-bot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.75rem 0;
  gap: 1rem;
  flex-wrap: wrap
}

.footer-bot p {
  font-size: .78rem;
  color: rgba(255, 255, 255, .2)
}

.footer-leg {
  display: flex;
  gap: 1.75rem
}

.footer-leg a {
  font-size: .78rem;
  color: rgba(255, 255, 255, .2);
  text-decoration: none;
  transition: color .3s
}

.footer-leg a:hover {
  color: var(--teal-xl)
}

/* ── ANIMATIONS ── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  animation: fadeUp .8s var(--ease) forwards
}

.d1 {
  animation-delay: .12s
}

.d2 {
  animation-delay: .26s
}

.d3 {
  animation-delay: .4s
}

.d4 {
  animation-delay: .54s
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0)
  }
}

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .75s var(--ease), transform .75s var(--ease)
}

.reveal-l {
  opacity: 0;
  transform: translateX(-26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease)
}

.reveal-r {
  opacity: 0;
  transform: translateX(26px);
  transition: opacity .75s var(--ease), transform .75s var(--ease)
}

.reveal-s {
  opacity: 0;
  transform: scale(.93);
  transition: opacity .75s var(--ease), transform .75s var(--ease)
}

.reveal.on,
.reveal-l.on,
.reveal-r.on,
.reveal-s.on {
  opacity: 1;
  transform: none
}

/* Services grid */
.svc-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

/* ── RESPONSIVE ── */
@media(max-width:1024px) {
  .hero {
    grid-template-columns: 1fr;
    text-align: left;
    min-height: auto;
    padding-top: 8rem
  }

  .hero-sub,
  .hero-btns,
  .hero-scroll {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: auto
  }

  .hero-card {
    display: none
  }

  .split {
    grid-template-columns: 1fr;
    gap: 3rem
  }

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

  .serve-cards {
    grid-template-columns: 1fr 1fr
  }

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

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

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 3rem
  }

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

  .img-strip {
    grid-template-columns: 1fr 1fr
  }

  .risk-cards {
    grid-template-columns: 1fr
  }

  .svc-detail {
    grid-template-columns: 1fr
  }
}

@media(max-width:768px) {

  /* Nav */
  .nav-links {
    display: none
  }

  .hamburger {
    display: flex
  }

  .nav {
    padding: 0 1.25rem
  }

  /* Hero — left-align everything */
  .hero {
    text-align: left;
    padding: 7rem 1.25rem 3rem
  }

  .hero-sub,
  .hero-btns,
  .hero-scroll {
    justify-content: flex-start;
    margin-left: 0;
    margin-right: auto
  }

  .hero-title {
    font-size: 2rem
  }

  .hero-sub {
    font-size: .95rem
  }

  /* Buttons — smaller on mobile */
  .btn {
    font-size: .75rem;
    padding: .7rem 1.4rem
  }

  .hero-btns {
    gap: .6rem
  }

  /* Global spacing */
  .wrap {
    padding: 0 1.25rem
  }

  .pad {
    padding: 3.5rem 0
  }

  .pad-sm {
    padding: 2.5rem 0
  }

  .phero {
    padding: 7rem 1.25rem 3.5rem
  }

  /* Section headings — left-align on mobile */
  .s-head.c {
    text-align: left
  }

  .s-head.c p {
    margin-left: 0
  }

  .eyebrow.center {
    justify-content: flex-start
  }

  /* Service cards — stack vertically */
  .svc-grid {
    grid-template-columns: 1fr
  }

  /* Other grids — single column */
  .serve-cards,
  .serve-grid,
  .pa-grid,
  .risk-cards {
    grid-template-columns: 1fr
  }

  .stats-row {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem
  }

  /* Footer */
  .footer-grid {
    grid-template-columns: 1fr
  }

  .footer-bot {
    flex-direction: column;
    text-align: center
  }

  /* Forms */
  .form-row {
    grid-template-columns: 1fr
  }

  .quote-box {
    padding: 2rem 1.5rem
  }

  .form-wrap {
    padding: 1.5rem 1.25rem
  }

  /* Image strip */
  .img-strip {
    grid-template-columns: 1fr
  }

  .img-strip-text {
    font-size: 22px
  }

  /* Tabs */
  .tab-nav {
    gap: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch
  }

  .tab-btn {
    white-space: nowrap;
    font-size: .7rem;
    padding: .7rem 1rem
  }

  /* Steps */
  .step {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  /* Typography scaling */
  .stat-n {
    font-size: 2.2rem
  }

  h3 {
    font-size: 1.15rem
  }

  p {
    font-size: .92rem
  }

  /* Principles — wrap to 2 cols then 1 */
  .principles {
    gap: .6rem
  }

  .prin {
    font-size: .75rem;
    padding: .5rem 1rem
  }

  .prin i {
    font-size: 18px !important;
    margin-right: 8px !important
  }

  /* Contact details */
  .contact-grid {
    gap: 2rem
  }

  /* Split sections */
  .split {
    gap: 2rem
  }

  /* Mobile menu */
  .mob-menu {
    padding: 6rem 1.25rem 2rem
  }
}

@media(max-width:480px) {

  /* Extra small screens */
  .hero {
    padding: 6.5rem 1rem 2.5rem
  }

  .hero-title {
    font-size: 1.75rem
  }

  .hero-sub {
    font-size: .88rem
  }

  .btn {
    font-size: .7rem;
    padding: .6rem 1.2rem
  }

  .wrap {
    padding: 0 1rem
  }

  .stat-n {
    font-size: 1.8rem
  }

  .stats-row {
    grid-template-columns: 1fr;
    gap: 1rem
  }

  .principles {
    flex-direction: column;
    align-items: stretch
  }

  .prin {
    justify-content: center
  }

  .img-strip-text {
    font-size: 18px
  }

  .phero {
    padding: 6.5rem 1rem 3rem
  }

  .phero h1 {
    font-size: 1.7rem
  }

  .phero p {
    font-size: .9rem
  }
}

/* Mission/Vision grid */
.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem
}

/* Commitments grid */
.commitments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem
}

@media(max-width:1024px) {
  .mv-grid {
    grid-template-columns: 1fr
  }

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

@media(max-width:768px) {
  .commitments-grid {
    grid-template-columns: 1fr
  }
}