/* =====================================================
   HEZAL CONCLUSION — 2026 PREMIUM GLASS DESIGN SYSTEM
   Navy #071B3A | Deep #041329 | Gold #C9952E | BG #F5F7FB
   ===================================================== */
:root {
  --navy: #071B3A;
  --navy-deep: #041329;
  --navy-soft: #0B2450;
  --navy-glass: rgba(7, 17, 32, 0.58);
  --gold: #C9952E;
  --gold-light: #E3B65A;
  --gold-soft: rgba(201, 149, 46, .18);
  --bg: #F5F7FB;
  --white: #FFFFFF;
  --text: #14213D;
  --muted: #697386;
  --muted-soft: #B3BCD0;
  --border: rgba(7, 27, 58, .10);
  --glass: rgba(255, 255, 255, .68);
  --glass-border: rgba(255, 255, 255, .62);
  --shadow-soft: 0 20px 60px rgba(7, 27, 58, .08);
  --shadow-lift: 0 26px 70px rgba(7, 27, 58, .14);
  --font-head: "Manrope", sans-serif;
  --font-body: "Manrope", sans-serif;
  --trans: all .35s cubic-bezier(.22, .61, .36, 1);
}

/* ---------- Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

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

a {
  text-decoration: none;
  color: inherit;
  transition: var(--trans)
}

ul {
  list-style: none
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-head);
  color: var(--navy);
  line-height: 1.22
}

button {
  font-family: var(--font-body)
}

::selection {
  background: var(--gold);
  color: #fff
}

:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 10px 0;
  z-index: 2000
}

.skip-link:focus {
  left: 0
}

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 26px
}

.section {
  padding: 40px 0
}

/* ---------- Glass system ---------- */
.glass-card {
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  border-radius: 24px
}

/* ---------- Decor ---------- */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none
}

.orb-navy {
  background: rgba(7, 27, 58, .15)
}

.orb-gold {
  background: rgba(201, 149, 46, .17)
}

.hero-ring {
  position: absolute;
  border: 1px solid rgba(7, 27, 58, .07);
  border-radius: 50%;
  pointer-events: none
}

/* ---------- Typography helpers ---------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--gold)
}

.eyebrow::before {
  content: "";
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), var(--gold-light))
}

.gold-text {
  color: var(--gold)
}

.sec-head {
  margin-bottom: 30px;
}

.sec-head.center {
  margin-left: auto;
  margin-right: auto;
  text-align: center
}

.sec-head.center .eyebrow::after {
  content: "";
  width: 34px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-light), var(--gold))
}

.sec-title {
  font-size: clamp(26px, 2.5vw, 36px);
  font-weight: 700;
  margin-top: 14px
}

.sec-sub {
  color: var(--muted);
  margin-top: 16px;
  font-size: 16px
}

.sec-sub.left {
  margin-left: 0
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font: 700 14.5px/1 var(--font-body);
  letter-spacing: .2px;
  border-radius: 14px;
  padding: 17px 30px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: var(--trans)
}

.btn i {
  transition: transform .3s ease
}

.btn:hover i {
  transform: translateX(5px)
}

.btn-primary {
  background: linear-gradient(135deg, var(--navy-soft), var(--navy-deep));
  color: #fff;
  box-shadow: 0 14px 34px rgba(7, 27, 58, .25)
}

.btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(7, 27, 58, .32);
  color: #fff
}

.btn-gold {
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  box-shadow: 0 14px 34px rgba(201, 149, 46, .35)
}

.btn-gold:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(201, 149, 46, .45);
  color: #fff
}

.btn-ghost {
  background: rgba(255, 255, 255, .62);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-color: rgba(7, 27, 58, .14);
  color: var(--navy)
}

.btn-ghost:hover {
  border-color: var(--gold);
  color: var(--gold);
  transform: translateY(-3px)
}

.btn-sm {
  padding: 12px 22px;
  font-size: 13.5px;
  border-radius: 12px
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  padding: 24px 0 0;
  transition: padding .35s ease
}

.site-header.scrolled {
  padding: 14px 0 0
}

.glass-nav {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 20px;
  background: rgba(7, 17, 32, .42);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 24px;
  box-shadow: 0 22px 56px rgba(3, 12, 25, .24);
  padding: 5px 18px;
  transition: var(--trans)
}

.site-header.scrolled .glass-nav {
  box-shadow: 0 26px 70px rgba(3, 12, 25, .32);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: rgba(7, 17, 32, .62)
}

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

.brand-logo {
  width: 140px;
  height: auto;
  object-fit: contain;
  flex: none;
  display: block
}

.brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1.25;
  display: none
}

.brand-name {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: #fff;
  letter-spacing: .4px
}

.brand-sub {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 2.6px;
  text-transform: uppercase;
  color: var(--gold-light)
}

.nav-list {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 2px
}

.nav-list>li {
  position: relative
}

.nav-list>li>a {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 15px;
  font-weight: 700;
  font-size: 14px;
  color: rgba(255, 255, 255, .86);
  position: relative
}

.nav-list>li>a::after {
  content: "";
  position: absolute;
  left: 15px;
  bottom: 5px;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold);
  transition: width .3s ease
}

.nav-list>li>a:hover {
  color: #fff
}

.nav-list>li>a:hover::after,
.nav-list>li>a.active::after {
  width: calc(100% - 30px)
}

.nav-list>li>a.active {
  color: var(--gold-light)
}

.drop-btn i {
  font-size: 10px;
  transition: transform .3s
}

.has-drop.open .drop-btn i {
  transform: rotate(180deg)
}

.drop-menu {
  position: absolute;
  top: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 12px);
  min-width: 240px;
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  border-radius: 16px;
  box-shadow: var(--shadow-lift);
  padding: 10px;
  opacity: 0;
  visibility: hidden;
  transition: var(--trans);
  z-index: 900
}

.has-drop:hover .drop-menu,
.has-drop.open .drop-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0)
}

.drop-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text)
}

.drop-menu a i {
  color: var(--gold);
  width: 16px;
  text-align: center
}

.drop-menu a:hover {
  background: rgba(201, 149, 46, .10);
  color: var(--gold)
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: flex-end;
  display: none;
}

.nav-cta {
  display: none;
  margin-top: 28px
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 46px;
  height: 44px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(7, 27, 58, .12);
  border-radius: 12px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--trans);
  position: relative;
  z-index: 11111;
}

.nav-toggle span {
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: var(--trans)
}

.nav-toggle.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg)
}

.nav-toggle.open span:nth-child(2) {
  opacity: 0
}

.nav-toggle.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg)
}

body.menu-open {
  overflow: hidden
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 150px 0 30px;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(201, 149, 46, .18), transparent 26%), radial-gradient(circle at bottom right, rgba(99, 146, 255, .14), transparent 30%), linear-gradient(135deg, #071b39 0%, #0a244b 42%, #0f1d38 100%)
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none
}

.hero-orb-1 {
  top: -180px;
  right: -120px;
  width: 500px;
  height: 500px;
  background: rgba(201, 149, 46, .12)
}

.hero-orb-2 {
  bottom: -220px;
  left: -150px;
  width: 460px;
  height: 460px;
  background: rgba(93, 168, 255, .14)
}

.hero-ring {
  top: -210px;
  left: -180px;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, .12)
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.12fr .88fr;
  gap: 64px;
  align-items: center;
  position: relative
}

.hero-content {
  position: relative;
  z-index: 2
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 12px 28px rgba(7, 27, 58, .18);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #dfeaff
}

.badge-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  box-shadow: 0 0 0 5px rgba(201, 149, 46, .16)
}

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

.eyebrow::before {
  background: linear-gradient(90deg, var(--gold-light), var(--gold))
}

.hero-title {
  font-size: clamp(28px, 2.8vw, 45px);
  font-weight: 800;
  margin: 20px 0 18px;
  line-height: 1.04;
  color: #fff;
  letter-spacing: -.05em
}

.hero-lead {
  color: rgba(225, 233, 247, .82);
  font-size: 16.5px;
  max-width: 580px;
  margin-bottom: 30px
}

.hero-cta {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px
}

.hero-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 28px 0 22px
}

.metric-pill {
  min-width: 140px;
  padding: 16px 18px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .12);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px)
}

.metric-pill strong {
  display: block;
  font-family: var(--font-head);
  font-size: 24px;
  color: #fff;
  line-height: 1.1
}

.metric-pill span {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted-soft)
}

.hero-trust {
  display: flex;
  gap: 22px;
  flex-wrap: wrap
}

.hero-trust li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  font-weight: 700;
  color: rgba(227, 234, 247, .88)
}

.hero-trust i {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(201, 149, 46, .18);
  color: var(--gold-light);
  display: grid;
  place-items: center;
  font-size: 9px;
  flex: none
}

.hero-visual {
  position: relative;
  z-index: 1
}

.hero-frame {
  position: relative;
  border-radius: 30px;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04));
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 32px 80px rgba(2, 10, 22, .28)
}

.hero-frame::before {
  content: "";
  position: absolute;
  inset: 20px auto auto 20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 149, 46, .28), transparent 62%);
  pointer-events: none
}

.hero-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, .12)
}

.float-card {
  position: absolute;
  display: flex;
  flex-direction: column;
  background: rgba(11, 19, 33, .72);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  padding: 16px 20px;
  box-shadow: 0 22px 52px rgba(2, 10, 22, .28);
  animation: float 6s ease-in-out infinite
}

.float-card strong {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1
}

.float-card span {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  color: #dfe9ff
}

.fc-1 {
  top: 40px;
  left: -30px
}

.fc-2 {
  bottom: 68px;
  right: -22px;
  animation-delay: 1.4s
}

.fc-3 {
  top: -18px;
  right: 48px;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  animation-delay: .7s
}

.fc-3 span {
  color: #fff;
  font-size: 12.5px
}

.fc-icon {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  flex: none
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0)
  }

  50% {
    transform: translateY(-12px)
  }
}

/* ---------- Trust strip ---------- */
.trust-section {
  position: relative;
  z-index: 6;
  margin-top: -42px
}

.trust-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border-radius: 26px;
  padding: 26px 28px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .46));
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 24px 70px rgba(9, 22, 42, .12)
}

.trust-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2.8px;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 128px;
  line-height: 1.7
}

.t-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .32);
  border: 1px solid rgba(7, 27, 58, .04)
}

.t-stat+.t-stat {
  border-left: 1px solid rgba(7, 27, 58, .08);
  padding-left: 22px
}

.t-num {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1
}

.t-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted)
}

/* ---------- Services ---------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 26px
}

.span-7 {
  grid-column: span 7
}

.span-5 {
  grid-column: span 5
}

.service-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 26px;
  padding: 46px 42px;
  overflow: hidden;
  transition: var(--trans)
}

.service-card.glass {
  background: var(--glass);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft)
}

.service-card.feature {
  background: linear-gradient(150deg, var(--navy-soft) 0%, var(--navy-deep) 85%);
  box-shadow: 0 30px 80px rgba(4, 19, 41, .35)
}

.service-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 149, 46, .55);
  box-shadow: var(--shadow-lift)
}

.svc-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 6px
}

.svc-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--gold);
  background: rgba(201, 149, 46, .12);
  border: 1px solid rgba(201, 149, 46, .35);
  transition: var(--trans)
}

.feature .svc-icon {
  color: var(--gold-light);
  background: rgba(227, 182, 90, .14);
  border-color: rgba(227, 182, 90, .4)
}

.service-card:hover .svc-icon {
  transform: rotate(-8deg) scale(1.06);
  background: var(--gold);
  border-color: var(--gold);
  color: #fff
}

.service-num {
  font-family: var(--font-head);
  font-size: 56px;
  font-weight: 700;
  line-height: 1;
  color: rgba(7, 27, 58, .10)
}

.feature .service-num {
  color: rgba(255, 255, 255, .14)
}

.service-card h3 {
  font-size: 24px
}

.feature h3 {
  color: #fff
}

.service-card p {
  color: var(--muted);
  font-size: 15px
}

.feature p {
  color: #B9C4DA
}

.svc-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 14px;
  color: var(--navy);
  padding-top: 10px
}

.svc-link i {
  transition: transform .3s
}

.feature .svc-link {
  color: var(--gold-light)
}

.service-card:hover .svc-link i {
  transform: translateX(6px)
}

.svc-accent {
  position: absolute;
  right: -46px;
  bottom: -46px;
  width: 250px;
  height: 170px;
  object-fit: cover;
  border-radius: 22px;
  opacity: .25;
  filter: saturate(.85);
  transition: var(--trans);
  pointer-events: none
}

.service-card:hover .svc-accent {
  opacity: .45
}

/* ---------- Why choose ---------- */
.why-section {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(245, 247, 251, .9));
}

.why-grid {
  display: grid;
  /* grid-template-columns:.95fr 1.05fr; */
  gap: 34px;
  align-items: center
}

.why-left .sec-sub {
  margin-bottom: 22px
}

.why-highlight {
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
  padding: 14px 18px;
  border-radius: 18px;
  border: 1px solid rgba(7, 27, 58, .08);
  background: linear-gradient(135deg, rgba(255, 255, 255, .84), rgba(246, 240, 225, .7));
  box-shadow: 0 18px 42px rgba(7, 27, 58, .06);
  margin: 18px 0 20px
}

.why-highlight strong {
  display: block;
  font-family: var(--font-head);
  font-size: 32px;
  line-height: 1;
  color: var(--navy)
}

.why-highlight span {
  display: block;
  font-size: 11px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 800
}

.why-highlight-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 18px;
  box-shadow: 0 12px 24px rgba(201, 149, 46, .25)
}

.why-frame {
  position: relative;
  border-radius: 30px;
  padding: 12px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .45));
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 28px 80px rgba(7, 27, 58, .12)
}

.why-frame img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  border-radius: 22px;
  transition: transform .8s ease
}

.why-frame:hover img {
  transform: scale(1.03)
}

.why-badge {
  position: absolute;
  left: 26px;
  bottom: 26px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-radius: 16px;
  font-weight: 800;
  font-size: 13px;
  color: var(--navy);
  background: rgba(255, 255, 255, .72);
  border: 1px solid rgba(255, 255, 255, .58);
  box-shadow: 0 18px 40px rgba(7, 27, 58, .08)
}

.wb-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 13px;
  flex: none
}

.why-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px
}

.why-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px 18px;
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, .52));
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 18px 44px rgba(7, 27, 58, .06);
  transition: var(--trans)
}

.why-item:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 149, 46, .55);
  box-shadow: 0 28px 56px rgba(7, 27, 58, .10)
}

.why-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38px;
  height: 38px;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  box-shadow: 0 10px 22px rgba(201, 149, 46, .28);
  display: none
}

.why-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  display: grid;
  place-items: center;
  font-size: 18px;
  color: var(--navy);
  transition: var(--trans);
  flex: none
}

.why-item:hover .why-icon {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-light)
}

.why-copy {
  flex: 1
}

.why-item h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800;
  margin-bottom: 6px
}

.why-item p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.7
}

/* ---------- Process ---------- */
.process-section {
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(245, 247, 251, 0))
}

.process-track {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 34px;
  position: relative;
  padding-top: 10px
}

.process-line {
  position: absolute;
  top: 54px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: rgba(7, 27, 58, .08);
  border-radius: 2px
}

.process-progress {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--gold), var(--gold-light));
  border-radius: 2px;
  transition: width 1.8s cubic-bezier(.22, .61, .36, 1) .2s
}

.process-track.in .process-progress {
  width: 100%
}

.process-step {
  text-align: center;
  position: relative;
  z-index: 1
}

.step-node {
  width: 88px;
  height: 88px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft);
  display: grid;
  place-items: center;
  font-size: 27px;
  color: var(--navy);
  position: relative;
  transition: var(--trans)
}

.process-step:hover .step-node {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-light);
  transform: translateY(-6px)
}

.step-num {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
  display: grid;
  place-items: center;
  border: 3px solid var(--bg)
}

.process-step h3 {
  font-size: 21px
}

.process-step p {
  font-size: 14px;
  color: var(--muted);
  margin-top: 8px;
  max-width: 220px;
  margin-left: auto;
  margin-right: auto
}

/* ---------- Featured CTA ---------- */
.cta-feature {
  position: relative;
  border-radius: 40px;
  padding: 36px 35px;
  background: linear-gradient(135deg, rgba(9, 28, 50, .96) 0%, rgba(7, 17, 32, .98) 45%, rgba(11, 27, 58, .96) 100%);
  overflow: hidden;
  box-shadow: 0 42px 110px rgba(4, 19, 41, .42);
  border: 1px solid rgba(255, 255, 255, .08)
}

.cta-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(201, 149, 46, .16), transparent 28%, transparent 72%, rgba(201, 149, 46, .14));
  pointer-events: none
}

.cta-feature::after {
  content: "";
  position: absolute;
  right: -120px;
  top: -120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201, 149, 46, .22), transparent 60%);
  pointer-events: none
}

.cta-copy {
  position: relative;
  z-index: 2;
  max-width: 640px
}

.cta-copy h2 {
  color: #fff;
  font-size: clamp(28px, 3.4vw, 42px);
  font-weight: 700
}

.cta-copy p {
  color: #B9C4DA;
  margin: 18px 0 34px;
  font-size: 16px
}

.mission-feature {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  align-items: center;
  gap: 30px;
}

.mission-copy {
  max-width: 760px;
  position: relative
}

.mission-copy .eyebrow {
  margin-bottom: 14px;
  padding: 10px 16px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(201, 149, 46, .26);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04)
}

.mission-copy h2 {
  max-width: 760px;
  line-height: 1.15;
  letter-spacing: -.04em
}

.mission-points {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin: 0 0 26px
}

.mission-points span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  font-size: 13px;
  font-weight: 700;
  color: #eef3ff
}

.mission-points i {
  color: var(--gold-light);
  font-size: 11px
}

.mission-panel {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 18px;
  justify-items: end
}

.mission-panel-box {
  width: min(100%, 245px);
  padding: 22px 20px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 20px 50px rgba(2, 10, 22, .18);
  transform: translateY(0);
  transition: var(--trans)
}

.mission-panel-box:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 149, 46, .45);
  box-shadow: 0 28px 60px rgba(2, 10, 22, .24)
}

.mission-panel-box.highlight {
  background: linear-gradient(135deg, rgba(201, 149, 46, .18), rgba(255, 255, 255, .06));
  border-color: rgba(201, 149, 46, .36)
}

.mission-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--muted-soft);
  margin-bottom: 10px
}

.mission-panel-box strong {
  display: block;
  color: #fff;
  font-size: 15px;
  line-height: 1.35;
  font-family: var(--font-body)
}

.cta-rings {
  position: absolute;
  right: -110px;
  top: 50%;
  transform: translateY(-50%);
  width: 460px;
  height: 460px;
  z-index: 1
}

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

.r1 {
  inset: 0;
  border: 1px solid rgba(227, 182, 90, .35)
}

.r2 {
  inset: 62px;
  border: 1px solid rgba(255, 255, 255, .12)
}

.r3 {
  inset: 132px;
  border: 1px solid rgba(227, 182, 90, .55);
  box-shadow: 0 0 90px rgba(201, 149, 46, .35), inset 0 0 60px rgba(201, 149, 46, .18)
}

/* ---------- Testimonials ---------- */
.testi-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items: stretch
}

.testi-feature {
  position: relative;
  padding: 54px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  transition: opacity .26s ease, transform .26s ease
}

.testi-feature.switch {
  opacity: .25;
  transform: translateY(8px)
}

.tf-quote {
  font-size: 46px;
  color: var(--gold);
  opacity: .9;
  margin-bottom: 20px
}

.tf-text {
  font-family: var(--font-head);
  font-style: italic;
  font-size: 21px;
  line-height: 1.75;
  color: var(--navy);
  margin-bottom: 30px
}

.tf-person {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: auto
}

.tf-img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gold)
}

.tf-name {
  display: block;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 800;
  color: var(--navy)
}

.tf-role {
  font-size: 13px;
  color: var(--muted)
}

.testi-side {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px
}

.testi-previews {
  display: flex;
  flex-direction: column;
  gap: 16px
}

.testi-preview {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  border-radius: 18px;
  padding: 19px 22px;
  cursor: pointer;
  transition: var(--trans);
  box-shadow: var(--shadow-soft)
}

.testi-preview:hover {
  transform: translateY(-4px);
  border-color: rgba(201, 149, 46, .5)
}

.testi-preview img {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  object-fit: cover;
  flex: none
}

.testi-preview strong {
  display: block;
  font-size: 14.5px;
  color: var(--navy)
}

.testi-preview small {
  font-size: 12.5px;
  color: var(--muted)
}

.testi-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding-top: 6px
}

.dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 0;
  background: rgba(7, 27, 58, .16);
  cursor: pointer;
  transition: var(--trans);
  padding: 0
}

.dot.active {
  width: 28px;
  border-radius: 8px;
  background: var(--gold)
}

/* ---------- Final CTA ---------- */
.cta-final {
  position: relative;
  padding: 70px 0;
  text-align: center;
  background-image: linear-gradient(rgba(4, 19, 41, .92), rgba(4, 19, 41, .84)), url("../assets/images/cta-handshake.jpg");
  background-size: cover;
  background-position: center
}

.cta-final h2 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 44px)
}

.cta-final p {
  color: #C4CDDF;
  margin: 14px 0 34px;
  font-size: 16px
}

/* ---------- Footer ---------- */
.footer {
  background: var(--navy-deep);
  color: #A9B4C9;
  border-radius: 36px 36px 0 0;
  margin-top: -26px;
  position: relative;
  z-index: 5;
  padding-top: 40px
}

.footer-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, .08)
}

.footer-cta h3 {
  color: #fff;
  font-size: clamp(24px, 2.6vw, 32px)
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr .7fr .8fr .9fr;
  gap: 50px;
  padding: 58px 0
}

.footer .brand-name {
  color: #fff
}

.footer-desc {
  margin: 20px 0 24px;
  font-size: 14.5px
}

.footer-social {
  display: flex;
  gap: 10px
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  place-items: center;
  color: #C4CDDF;
  transition: var(--trans)
}

.footer-social a:hover {
  background: var(--gold);
  border-color: var(--gold);
  color: #fff;
  transform: translateY(-3px)
}

.footer-title {
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 24px;
  position: relative;
  padding-bottom: 12px
}

.footer-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  background: var(--gold)
}

.footer-links li {
  margin-bottom: 12px
}

.footer-links a {
  font-size: 14.5px;
  color: #A9B4C9
}

.footer-links a:hover {
  color: var(--gold-light);
  padding-left: 6px
}

.footer-contact li {
  display: flex;
  gap: 12px;
  margin-bottom: 14px;
  font-size: 14.5px
}

.footer-contact i {
  color: var(--gold);
  margin-top: 5px
}

.footer-contact a:hover {
  color: var(--gold-light)
}

.footer-bottom {
  border-top: 1px solid rgba(201, 149, 46, .4);
  padding: 22px 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 13.5px
}

.footer-bottom p {
  margin: 0
}

.footer-legal {
  display: flex;
  gap: 26px
}

.footer-legal a:hover {
  color: var(--gold-light)
}

/* ---------- Inner page hero ---------- */
.page-hero {
  position: relative;
  padding: 105px 0 20px;
  overflow: hidden;
  background: radial-gradient(circle at top left, rgba(201, 149, 46, .18), transparent 26%), radial-gradient(circle at bottom right, rgba(99, 146, 255, .12), transparent 28%), linear-gradient(135deg, #071b39 0%, #0a244b 42%, #0f1d38 100%);
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px);
  background-size: 58px 58px;
  pointer-events: none
}

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

.ph-orb-1 {
  top: -180px;
  right: -120px;
  width: 500px;
  height: 500px;
  background: rgba(201, 149, 46, .12)
}

.ph-orb-2 {
  bottom: -220px;
  left: -150px;
  width: 460px;
  height: 460px;
  background: rgba(93, 168, 255, .14)
}

.ph-ring {
  top: -210px;
  right: 16%;
  width: 600px;
  height: 600px;
  border: 1px solid rgba(255, 255, 255, .12)
}

.page-title {
  font-size: clamp(28px, 2.6vw, 38px);
  font-weight: 800;
  max-width: 820px;
  margin-top: 18px;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -.05em
}

.page-sub {
  color: rgba(225, 233, 247, .82);
  font-size: 17px;
  max-width: 640px;
  margin-top: 18px
}

.crumbs {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  font-size: 13.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .7)
}

.crumbs a {
  color: rgba(255, 255, 255, .8)
}

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

.crumbs .sep {
  color: var(--gold-light)
}

.crumbs .current {
  color: #fff;
  font-weight: 800
}

.page-hero .eyebrow {
  color: var(--gold-light)
}

.page-hero .eyebrow::before {
  background: linear-gradient(90deg, var(--gold-light), var(--gold))
}

/* ---------- About ---------- */
.intro-grid {
  display: grid;
  grid-template-columns: 1fr 1.05fr;
  gap: 70px;
  align-items: center
}

.intro-visual {
  position: relative;
  z-index: 1
}

.intro-frame {
  border-radius: 30px;
  padding: 14px;
  background: rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: var(--shadow-lift)
}

.intro-frame img {
  width: 100%;
  height: 540px;
  object-fit: cover;
  border-radius: 22px
}

.float-stat {
  position: absolute;
  left: -24px;
  bottom: 48px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 26px;
  border-radius: 18px;
  animation: float 7s ease-in-out infinite
}

.float-stat strong {
  font-family: var(--font-head);
  font-size: 30px;
  font-weight: 700;
  color: var(--gold);
  line-height: 1
}

.float-stat span {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy)
}

.intro-text {
  color: var(--muted);
  margin-bottom: 16px
}

.intro-copy .btn {
  margin-top: 16px
}

.mv-section {
  background: linear-gradient(180deg, rgb(255 255 255), rgb(233 236 241))
}

.mv-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px
}

.mv-card {
  position: relative;
  border-radius: 30px;
  padding: 56px 50px;
  overflow: hidden;
  min-height: 340px;
  transition: var(--trans)
}

.mv-card:hover {
  transform: translateY(-8px)
}

.mv-card.navy {
  background: linear-gradient(150deg, var(--navy-soft), var(--navy-deep));
  color: #C6CFE0;
  box-shadow: 0 30px 80px rgba(4, 19, 41, .3)
}

.mv-card.navy h3 {
  color: #fff
}

.mv-num {
  position: absolute;
  top: 16px;
  right: 30px;
  font-family: var(--font-head);
  font-size: 110px;
  font-weight: 700;
  line-height: 1;
  color: rgba(7, 27, 58, .06)
}

.mv-card.navy .mv-num {
  color: rgba(255, 255, 255, .07)
}

.mv-icon {
  width: 62px;
  height: 62px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  font-size: 23px;
  margin-bottom: 24px;
  background: rgba(201, 149, 46, .14);
  color: var(--gold);
  border: 1px solid rgba(201, 149, 46, .4)
}

.mv-card.navy .mv-icon {
  color: var(--gold-light)
}

.mv-icon.outline {
  background: transparent;
  border: 1.5px solid var(--gold)
}

.mv-card h3 {
  font-size: 26px;
  margin-bottom: 12px
}

.mv-card p {
  font-size: 16px;
  line-height: 1.8
}

.services-portfolio {
  display: grid;
  gap: 26px;
  align-items: stretch
}

.service-stack {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 18px
}

.service-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 18px;
  border-radius: 24px;
  transition: var(--trans);
  min-height: 180px
}

.service-item:hover {
  transform: translateY(-6px);
  border-color: rgba(201, 149, 46, .5);
  box-shadow: var(--shadow-lift)
}

.service-icon {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: grid;
  place-items: center;
  font-size: 20px;
  color: var(--gold);
  background: rgba(201, 149, 46, .12);
  border: 1px solid rgba(201, 149, 46, .35);
  flex: none;
  transition: var(--trans)
}

.service-item:hover .service-icon {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--gold-light)
}

.service-item h3 {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 800;
  color: var(--navy);
  margin-top: 0
}

.about-choose-us {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(245, 247, 251, .9));
}

.about-choose-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
  align-items: stretch
}

.about-choose-card {
  position: relative;
  padding: 30px 20px 24px;
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .62));
  border: 1px solid rgba(255, 255, 255, .8);
  box-shadow: 0 20px 52px rgba(7, 27, 58, .07);
  transition: var(--trans);
  text-align: center;
  overflow: hidden
}

.about-choose-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at top center, rgba(201, 149, 46, .10), transparent 50%);
  pointer-events: none
}

.about-choose-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 26px 60px rgba(7, 27, 58, .12);
  border-color: rgba(201, 149, 46, .45)
}

.about-choose-icon {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin: 0 auto 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  box-shadow: 0 12px 28px rgba(201, 149, 46, .25);
  font-size: 22px
}

.about-choose-card h3 {
  position: relative;
  z-index: 1;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 800;
  color: var(--navy)
}

.about-cta {
  position: relative;
  padding: 110px 0;
  text-align: center;
  background-image: linear-gradient(rgba(4, 19, 41, .92), rgba(4, 19, 41, .86)), url("../assets/images/mission-team.jpg");
  background-size: cover;
  background-position: center
}

.about-cta h2 {
  color: #fff;
  font-size: clamp(28px, 3.6vw, 44px)
}

.about-cta p {
  color: #C4CDDF;
  margin: 14px 0 34px
}

/* ---------- Contact ---------- */
.info-section {
  padding-top: 20px
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px
}

.info-card {
  border-radius: 24px;
  padding: 42px 30px;
  text-align: center;
  transition: var(--trans)
}

.info-card:hover {
  transform: translateY(-8px);
  border-color: rgba(201, 149, 46, .5);
  box-shadow: var(--shadow-lift)
}

.info-icon {
  width: 62px;
  height: 62px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  font-size: 21px;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 26px rgba(201, 149, 46, .35)
}

.info-card h3 {
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 800
}

.info-card p {
  color: var(--muted);
  font-size: 14.5px;
  margin-top: 8px
}

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

.contact-grid {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items: stretch
}

.form-panel {
  border-radius: 30px;
  padding: 30px 35px
}

.panel-title {
  font-size: 28px;
  margin-bottom: 30px
}

.form-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px
}

.form-field {
  position: relative;
  margin-bottom: 18px
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(7, 27, 58, .12);
  border-radius: 16px;
  padding: 26px 18px 9px;
  font: 500 15px var(--font-body);
  color: var(--text);
  transition: var(--trans);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px)
}

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

.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23697386' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 18px center
}

.form-field label {
  position: absolute;
  left: 18px;
  top: 17px;
  color: var(--muted);
  font-size: 15px;
  pointer-events: none;
  transition: var(--trans)
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(201, 149, 46, .12)
}

.form-field input:focus+label,
.form-field input:not(:placeholder-shown)+label,
.form-field textarea:focus+label,
.form-field textarea:not(:placeholder-shown)+label,
.select-field label {
  top: 16px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--navy)
}

.file-field {
  padding: 0;
  border: 1px solid rgba(7, 27, 58, .12);
  border-radius: 16px;
  background: rgba(255, 255, 255, .6);
  overflow: hidden;
  transition: var(--trans)
}

.file-field input[type="file"] {
  width: 100%;
  min-height: 76px;
  padding: 18px 16px 12px;
  border: none;
  background: transparent;
  border-radius: 0;
  display: block;
  cursor: pointer;
  box-shadow: none
}

.file-field input[type="file"]::-webkit-file-upload-button {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: linear-gradient(135deg, var(--gold-light), var(--gold));
  color: #fff;
  padding: 10px 16px;
  border-radius: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 10px 20px rgba(201, 149, 46, .2)
}

.file-field label {
  position: absolute;
  left: 16px;
  top: 12px;
  display: block;
  transform: none
}

.file-field .file-hint {
  display: block;
  padding: 0 16px 12px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4
}

.form-field .err {
  display: none;
  font-size: 12.5px;
  font-weight: 600;
  color: #C43D3D;
  margin-top: 7px
}

.form-field.invalid .err {
  display: block
}

.form-field.invalid input,
.form-field.invalid select,
.form-field.invalid textarea {
  border-color: #C43D3D;
  box-shadow: 0 0 0 4px rgba(196, 61, 61, .10)
}

.form-error {
  display: none;
  margin: 0 0 16px;
  padding: 12px 14px;
  color: #8B1E1E;
  background: rgba(196, 61, 61, .08);
  border: 1px solid rgba(196, 61, 61, .28);
  border-radius: 8px;
  font-size: 14px;
  line-height: 1.45
}

.form-error:not([hidden]) {
  display: block
}

.form-success {
  display: none;
  text-align: center;
  padding: 70px 24px
}

.form-success.show {
  display: block;
  animation: fadeUp .5s ease
}

.fs-icon {
  width: 76px;
  height: 76px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: rgba(201, 149, 46, .14);
  color: var(--gold);
  font-size: 34px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(201, 149, 46, .4)
}

.form-success h3 {
  font-size: 26px;
  margin-bottom: 10px
}

.form-success p {
  color: var(--muted)
}

@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px)
  }

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

.side-panel {
  position: relative;
  overflow: hidden;
  border-radius: 30px;
  background: linear-gradient(160deg, var(--navy-soft), var(--navy-deep));
  color: #C6CFE0;
  padding: 48px;
  box-shadow: 0 30px 80px rgba(4, 19, 41, .3)
}

.side-panel h3 {
  color: #fff;
  font-size: 27px
}

.side-panel>p {
  margin: 14px 0 30px;
  font-size: 15px
}

.side-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin-bottom: 24px
}

.side-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  border: 1px solid rgba(227, 182, 90, .5);
  background: rgba(227, 182, 90, .12);
  color: var(--gold-light);
  display: grid;
  place-items: center;
  font-size: 16px;
  flex: none
}

.side-list strong {
  display: block;
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: .4px;
  margin-bottom: 2px
}

.side-list a,
.side-list span {
  font-size: 14px;
  color: #C4CDDF
}

.side-list a:hover {
  color: var(--gold-light)
}

.side-art {
  position: absolute;
  right: -70px;
  bottom: -70px;
  width: 240px;
  height: 240px;
  opacity: .55;
  pointer-events: none
}

.map-frame {
  border-radius: 26px;
  padding: 12px;
  background: rgba(255, 255, 255, .6);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow-soft)
}

.map-frame iframe {
  width: 100%;
  height: 440px;
  border: 0;
  border-radius: 18px;
  display: block
}

/* ---------- Reveal ---------- */
.reveal {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .8s ease
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0)
}


input#resume {
  margin-top: 24px;
}

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important
  }

  .reveal {
    opacity: 1;
    transform: none
  }
}