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

:root {
  --purple: #5B4A9E;
  --magenta: #C94082;
  --coral: #E05B47;
  --orange: #E8813A;
  --gold: #D4A017;
  --teal: #1A9E75;
  --teal-dark: #0F6E56;
  --teal-light: #E1F5EE;
  --dark: #0a0a0a;
  --dark2: #111111;
  --dark3: #1a1a1a;
  --light: #f5f5f7;
  --white: #ffffff;
  --text: #1d1d1f;
  --muted: #6e6e73;
  --border: rgba(0, 0, 0, 0.08);
  --border-dark: rgba(255, 255, 255, 0.09);
  --font-display: 'DM Serif Display', Georgia, serif;
  --font-body: 'DM Sans', sans-serif;
}

html {
  scroll-behavior: smooth
}

/* The hidden attribute must win over any display set by a component rule. */
[hidden] {
  display: none !important
}

body {
  font-family: var(--font-body);
  background: var(--white);
  color: var(--text);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased
}

/* ─── NAV ─── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 48px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.09);
  transition: background 0.3s;
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between
}

.nav-logo {
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0;
}

.nav-logo-bar {
  width: 3px;
  height: 18px;
  border-radius: 2px;
  margin-right: 10px;
  background: linear-gradient(180deg, var(--purple), var(--teal));
}

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

.nav-links a {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted);
  text-decoration: none;
  transition: color 0.2s;
  letter-spacing: 0.01em
}

.nav-links a:hover {
  color: var(--text)
}

.nav-cta {
  background: var(--text);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 20px;
  border-radius: 980px;
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}

.nav-cta:hover {
  opacity: 0.75
}

/* ─── NAV ACCOUNT / AUTH ─── */
.nav-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* No display on the base rule, so the hidden attribute works unaided. */
.nav-account:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 5px 4px 12px;
  border: 0.5px solid var(--border);
  border-radius: 980px;
  background: rgba(0, 0, 0, 0.025);
  max-width: 280px;
}

.nav-account-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--teal);
  flex: none;
}

.nav-account-who {
  font-size: 12.5px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 148px;
}

.nav-authbtn {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  color: var(--text);
  background: var(--white);
  border: 0.5px solid var(--border);
  border-radius: 980px;
  padding: 6px 13px;
  cursor: pointer;
  letter-spacing: 0.01em;
  flex: none;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}

.nav-authbtn:hover {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}

.nav-authbtn:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
}

/* ─── BUTTON LOADING STATE ─── */
/* Any button mid-request carries .is-busy, which appends a spinner after its
   label and blocks re-entry. currentColor, so it works on the dark submit
   button and the light OTP buttons alike. */
.is-busy {
  pointer-events: none;
  opacity: 0.8;
}

.is-busy::after {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  margin-left: 9px;
  vertical-align: -2px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: btnSpin 0.6s linear infinite;
}

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

@media (prefers-reduced-motion: reduce) {
  .is-busy::after { animation: none }
}

/* ─── MANDATORY SITE GATE ─── */
/* The wall shown on arrival. Same visual language as the section gate, but a
   heavier veil, a more deliberate entrance, and no dismiss affordance. */
.gate-overlay.mandatory {
  background: rgba(10, 10, 10, 0.62);
  backdrop-filter: blur(16px) saturate(0.85);
  -webkit-backdrop-filter: blur(16px) saturate(0.85);
  animation: gateVeilIn 0.45s ease both;
}

@keyframes gateVeilIn {
  from { opacity: 0 }
  to   { opacity: 1 }
}

.gate-overlay.mandatory .gate-modal {
  animation: gateWallIn 0.6s cubic-bezier(.2, .85, .25, 1) both;
  animation-delay: 0.1s;
}

@keyframes gateWallIn {
  from { opacity: 0; transform: translateY(30px) scale(0.96) }
  to   { opacity: 1; transform: none }
}

/* There is no leaving, so the affordance that offers it must go. */
.gate-overlay.mandatory .gate-later-btn {
  display: none
}

@media (prefers-reduced-motion: reduce) {
  .gate-overlay.mandatory,
  .gate-overlay.mandatory .gate-modal {
    animation: none
  }
}

/* ─── NOTICE MODAL ─── */
/* Confirmation and error dialogs. Sits above the page but below the gate, so a
   notice can never cover the wall. */
.notice-overlay {
  position: fixed;
  inset: 0;
  z-index: 19000;
  background: rgba(10, 10, 10, 0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: gateVeilIn 0.25s ease both;
}

.notice-modal {
  background: var(--white);
  border-radius: 20px;
  max-width: 400px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35);
  animation: gateIn 0.3s cubic-bezier(.2, .8, .3, 1);
}

.notice-stripe {
  display: flex;
  height: 4px;
}

.notice-stripe span {
  flex: 1;
}

.notice-body {
  padding: 30px 32px 28px;
  text-align: center;
}

.notice-icon {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  font-size: 26px;
  background: rgba(26, 158, 117, 0.12);
  color: var(--teal-dark);
}

.notice-icon.is-error {
  background: rgba(224, 91, 71, 0.12);
  color: var(--coral);
}

.notice-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  color: var(--text);
  margin-bottom: 10px;
}

.notice-text {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 24px;
}

.notice-ok {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--white);
  background: var(--text);
  border: none;
  border-radius: 980px;
  padding: 12px 40px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.notice-ok:hover {
  opacity: 0.8;
}

.notice-ok:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ─── STRIPE ─── */
.stripe {
  display: flex;
  height: 3px;
  width: 100%
}

.stripe span {
  flex: 1
}

/* ─── HERO ─── */
.hero {
  padding: 148px 48px 100px;
  background: var(--white);
  text-align: center;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse 70% 50% at 50% -10%, rgba(91, 74, 158, 0.06) 0%, transparent 70%);
  pointer-events: none;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 28px;
  border: 0.5px solid rgba(26, 158, 117, 0.3);
  padding: 6px 16px;
  border-radius: 980px;
  background: rgba(26, 158, 117, 0.06);
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(52px, 7.5vw, 96px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.04;
  color: var(--text);
  margin-bottom: 28px;
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}

.hero h1 em {
  font-style: italic;
  background: linear-gradient(125deg, var(--purple) 0%, var(--magenta) 40%, var(--teal) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-sub {
  font-size: 19px;
  font-weight: 300;
  color: var(--muted);
  max-width: 580px;
  margin: 0 auto 52px;
  line-height: 1.65;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap
}

.btn-dark {
  background: var(--text);
  color: #fff;
  padding: 14px 30px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: opacity 0.2s;
  letter-spacing: 0.01em;
}

.btn-dark:hover {
  opacity: 0.75
}

.btn-outline {
  background: transparent;
  color: var(--teal);
  padding: 14px 30px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(26, 158, 117, 0.35);
  transition: border-color 0.2s, background 0.2s;
  letter-spacing: 0.01em;
}

.btn-outline:hover {
  border-color: var(--teal);
  background: rgba(26, 158, 117, 0.05)
}

.hero-stats {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 72px;
  border-top: 0.5px solid var(--border);
  border-bottom: 0.5px solid var(--border);
  padding: 36px 0;
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  margin-top: 72px;
}

.hero-stat {
  flex: 1;
  text-align: center;
  position: relative
}

.hero-stat:not(:last-child)::after {
  content: '';
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 0.5px;
  background: var(--border);
}

.hero-stat-num {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.02em;
  display: block;
  margin-bottom: 4px;
}

.hero-stat-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0.05em;
  text-transform: uppercase
}

/* ─── SERVICES OVERVIEW ─── */
.services-section {
  background: var(--light);
  padding: 110px 48px
}

.section-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);
  font-size: clamp(32px, 4vw, 54px);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
  color: var(--text);
  margin-bottom: 16px;
}

.section-sub {
  font-size: 17px;
  font-weight: 300;
  color: var(--muted);
  line-height: 1.65;
  max-width: 520px
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 60px;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
}

.svc-card {
  background: var(--white);
  border-radius: 20px;
  padding: 32px 24px 28px;
  border: 0.5px solid var(--border);
  cursor: pointer;
  transition: transform 0.3s cubic-bezier(.2, .8, .3, 1), box-shadow 0.3s;
  text-decoration: none;
  color: var(--text);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.svc-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.svc-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1)
}

.svc-card:hover::after {
  transform: scaleX(1)
}

.svc-card.c1::after {
  background: var(--teal)
}

.svc-card.c2::after {
  background: var(--purple)
}

.svc-card.c3::after {
  background: var(--gold)
}

.svc-card.c4::after {
  background: var(--coral)
}

.svc-card.c5::after {
  background: var(--magenta)
}

.svc-card.c6::after {
  background: var(--orange)
}

.svc-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.svc-card h3 {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
  line-height: 1.3
}

.svc-card p {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.6;
  flex: 1
}

.svc-learn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 18px;
  text-decoration: none;
  transition: gap 0.2s;
}

.svc-card:hover .svc-learn {
  gap: 8px
}

/* ─── SERVICE DETAIL SECTIONS ─── */
.detail-section {
  padding: 120px 48px;
  position: relative;
  overflow: hidden
}

.detail-section.bg-white {
  background: var(--white)
}

.detail-section.bg-dark {
  background: var(--dark);
  color: #fff
}

.detail-section.bg-dark2 {
  background: var(--dark2);
  color: #fff
}

.detail-section.bg-dark3 {
  background: var(--dark3);
  color: #fff
}

.detail-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 100px;
  align-items: center;
}

.detail-inner.rev {
  direction: rtl
}

.detail-inner.rev>* {
  direction: ltr
}

.detail-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 980px;
  margin-bottom: 22px;
}

.detail-section-title {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.5vw, 48px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}

.detail-body {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.75;
  margin-bottom: 36px;
}

.bg-dark .detail-body,
.bg-dark2 .detail-body,
.bg-dark3 .detail-body {
  color: rgba(255, 255, 255, 0.62)
}

.bg-dark .section-label,
.bg-dark2 .section-label,
.bg-dark3 .section-label {
  color: rgba(255, 255, 255, 0.45)
}

.check-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 40px
}

.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  line-height: 1.55
}

.check-list .ci {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  flex-shrink: 0;
  margin-top: 1px;
  font-weight: 700;
}

.bg-white .check-list li {
  color: var(--text)
}

.bg-dark .check-list li,
.bg-dark2 .check-list li,
.bg-dark3 .check-list li {
  color: rgba(255, 255, 255, 0.8)
}

/* Visual panels */
.vis-panel {
  border-radius: 24px;
  overflow: hidden;
  min-height: 380px;
  position: relative
}

.vis-panel-inner {
  width: 100%;
  height: 100%;
  min-height: 380px;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 36px;
  position: relative;
  overflow: hidden;
}

.vis-bg-icon {
  position: absolute;
  top: 24px;
  right: 24px;
  font-size: 120px;
  opacity: 0.07;
  pointer-events: none;
  line-height: 1;
}

.stat-chips {
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  z-index: 1
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 14px;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 0.5px solid;
  font-size: 14px;
  font-weight: 500;
  width: fit-content;
}

/* ─── RELOCATION (dark bg) ─── */
/* ─── LAND (white bg) ─── */
/* ─── INVESTOR (dark2 bg) ─── */
/* ─── COMMERCIAL (white bg) ─── */
/* ─── RENTAL (dark3 bg) ─── */

/* ─── CONTACT ─── */
.contact-section {
  background: var(--dark);
  padding: 130px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.contact-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 900px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(26, 158, 117, 0.12) 0%, transparent 65%);
  pointer-events: none;
}

.contact-inner {
  max-width: 700px;
  margin: 0 auto;
  position: relative;
  z-index: 1
}

.contact-eyebrow {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 24px;
}

.contact-section h2 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.5vw, 68px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: #fff;
  margin-bottom: 18px;
}

.contact-section p {
  font-size: 18px;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.55);
  margin-bottom: 48px
}

.contact-form {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-form input {
  flex: 1;
  min-width: 200px;
  padding: 14px 22px;
  border-radius: 980px;
  border: 0.5px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
  font-size: 15px;
  font-family: var(--font-body);
  outline: none;
  transition: border-color 0.25s;
}

.contact-form input::placeholder {
  color: rgba(255, 255, 255, 0.3)
}

.contact-form input:focus {
  border-color: var(--teal)
}

.btn-teal {
  background: var(--teal);
  color: #fff;
  padding: 14px 30px;
  border-radius: 980px;
  font-size: 15px;
  font-weight: 600;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  letter-spacing: 0.02em;
  transition: opacity 0.2s;
}

.btn-teal:hover {
  opacity: 0.82
}

.contact-alt {
  margin-top: 32px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.35)
}

.contact-alt a {
  color: rgba(255, 255, 255, 0.55);
  text-decoration: none;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.25)
}

.contact-alt a:hover {
  color: #fff
}

/* ─── FOOTER ─── */
footer {
  background: #000;
  padding: 72px 48px 40px
}

.footer-inner {
  max-width: 1280px;
  margin: 0 auto
}

.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 52px;
  border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 32px;
}

.footer-logo-wrap .logo-text {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 12px;
}

.footer-logo-wrap .logo-bar {
  width: 2px;
  height: 14px;
  border-radius: 2px;
  margin-right: 8px;
  background: linear-gradient(180deg, var(--purple), var(--teal));
  display: inline-block;
}

.footer-stripe {
  display: flex;
  height: 2px;
  width: 80px;
  border-radius: 2px;
  overflow: hidden;
  margin-bottom: 16px
}

.footer-stripe span {
  flex: 1
}

.footer-desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.4);
  line-height: 1.75;
  max-width: 240px
}

.footer-col h4 {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-bottom: 18px
}

.footer-col ul {
  list-style: none
}

.footer-col ul li {
  margin-bottom: 12px
}

.footer-col ul a {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  transition: color 0.2s
}

.footer-col ul a:hover {
  color: #fff
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.25)
}

.footer-bottom a {
  color: rgba(255, 255, 255, 0.3);
  text-decoration: none
}

.footer-bottom a:hover {
  color: rgba(255, 255, 255, 0.6)
}

/* ─── ANIMATIONS ─── */
.fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s cubic-bezier(.2, .8, .3, 1), transform 0.8s cubic-bezier(.2, .8, .3, 1)
}

.fade-up.in {
  opacity: 1;
  transform: translateY(0)
}

.fade-up:nth-child(1) {
  transition-delay: 0s
}

.fade-up:nth-child(2) {
  transition-delay: 0.1s
}

.fade-up:nth-child(3) {
  transition-delay: 0.2s
}

.fade-up:nth-child(4) {
  transition-delay: 0.3s
}

.fade-up:nth-child(5) {
  transition-delay: 0.4s
}

.stagger-1 {
  transition-delay: 0s !important
}

.stagger-2 {
  transition-delay: 0.08s !important
}

.stagger-3 {
  transition-delay: 0.16s !important
}

.stagger-4 {
  transition-delay: 0.24s !important
}

.stagger-5 {
  transition-delay: 0.32s !important
}

/* ─── OUR TEAM ─── */
.team-section {
  padding: 120px 48px;
  position: relative;
  overflow: hidden
}

.team-section.bg-dark {
  background: var(--dark);
  color: #fff
}

.team-section.bg-light {
  background: var(--light)
}

.team-section.bg-white {
  background: var(--white)
}

.team-inner {
  max-width: 1280px;
  margin: 0 auto
}

.team-intro {
  max-width: 640px;
  margin-bottom: 64px
}

.team-tier-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 980px;
  margin-bottom: 22px;
}

.team-grid {
  display: grid;
  gap: 28px
}

.team-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr)
}

.team-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr)
}

.team-grid.cols-5 {
  grid-template-columns: repeat(5, 1fr)
}

.team-card {
  border-radius: 20px;
  padding: 32px 26px 28px;
  border: 0.5px solid var(--border);
  background: var(--white);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(.2, .8, .3, 1), box-shadow 0.3s;
}

.team-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.1)
}

.team-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.team-card:hover::after {
  transform: scaleX(1)
}

.bg-dark .team-card {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.1)
}

.team-card.t1::after {
  background: var(--purple)
}

.team-card.t2::after {
  background: var(--magenta)
}

.team-card.t3::after {
  background: var(--coral)
}

.team-card.t4::after {
  background: var(--orange)
}

.team-card.t5::after {
  background: var(--gold)
}

.team-card.t6::after {
  background: var(--teal)
}

.team-photo {
  width: 76px;
  height: 76px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 0.5px solid var(--border);
  flex-shrink: 0;
}

.bg-dark .team-photo {
  border-color: rgba(255, 255, 255, 0.14)
}

.team-name {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 4px
}

.team-role {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 16px
}

.bg-dark .team-role {
  color: #6FD9B8
}

.team-bio {
  font-size: 13.5px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--muted);
  flex: 1;
  margin-bottom: 18px
}

.bg-dark .team-bio {
  color: rgba(255, 255, 255, 0.55)
}

.team-contact {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 16px;
  border-top: 0.5px solid var(--border);
  font-size: 12.5px;
}

.bg-dark .team-contact {
  border-color: rgba(255, 255, 255, 0.1)
}

.team-contact a {
  color: var(--muted);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 7px;
  transition: color 0.2s
}

.bg-dark .team-contact a {
  color: rgba(255, 255, 255, 0.55)
}

.team-contact a:hover {
  color: var(--teal)
}

.bg-dark .team-contact a:hover {
  color: #6FD9B8
}

.team-contact i {
  font-size: 13px;
  width: 14px;
  text-align: center
}

@media(max-width:1024px) {
  .team-grid.cols-3 {
    grid-template-columns: repeat(3, 1fr)
  }

  .team-grid.cols-4 {
    grid-template-columns: repeat(2, 1fr)
  }

  .team-grid.cols-5 {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media(max-width:768px) {
  .team-section {
    padding: 80px 24px
  }

  .team-grid.cols-3 {
    grid-template-columns: 1fr
  }

  .team-grid.cols-4 {
    grid-template-columns: 1fr
  }

  .team-grid.cols-5 {
    grid-template-columns: 1fr
  }
}

/* ─── GATE / REGISTRATION MODAL ─── */
.gated {
  position: relative
}

.gated-blur {
  filter: blur(14px) saturate(0.7);
  pointer-events: none;
  user-select: none;
  transition: filter 0.4s ease
}

.gate-overlay {
  position: fixed;
  inset: 0;
  z-index: 20000;
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 20px;
  overflow-y: auto;
}

.gate-overlay.open {
  display: flex
}

.gate-modal {
  background: var(--white);
  border-radius: 24px;
  max-width: 560px;
  width: 100%;
  padding: 0;
  position: relative;
  box-shadow: 0 40px 100px rgba(0, 0, 0, 0.35);
  animation: gateIn 0.35s cubic-bezier(.2, .8, .3, 1);
  transition: max-width 0.45s cubic-bezier(.2, .8, .3, 1);
}

/* Padding moved off the modal so the width transition has nothing to fight. */
.gate-stripe {
  margin: 40px 40px 24px;
}

.gate-body {
  padding: 0 40px 32px;
}

.gate-divider {
  display: none;
}

.gate-aside-head {
  display: none;
}

/* ─── SPLIT LAYOUT: login beside register, at the email step only ─── */
.gate-modal.split {
  max-width: 900px;
}

.gate-modal.split .gate-stripe {
  margin: 36px 32px 22px;
}

.gate-modal.split .gate-body {
  display: grid;
  grid-template-columns: 6fr 1px 4fr;
  align-items: stretch;
  padding: 0;
}

/* Register sits first in the layout while staying second in the DOM, so the
   login panel keeps its single set of ids and still works as the standalone
   login view. Order is declared here rather than only at phone width, where
   the same sequence already applied. */
.gate-modal.split .gate-main {
  order: 1;
}

.gate-modal.split .gate-divider {
  order: 2;
}

.gate-modal.split .gate-login-panel {
  order: 3;
}

/* Tinted so the hierarchy reads without hiding the option. */
.gate-modal.split .gate-login-panel {
  display: block;
  background: var(--light);
  padding: 4px 30px 30px;
  border-bottom-right-radius: 24px;
}

.gate-modal.split .gate-divider {
  display: block;
  background: var(--border);
}

.gate-modal.split .gate-main {
  padding: 4px 32px 30px;
}

.gate-modal.split .gate-aside-head {
  display: block;
  margin-bottom: 18px;
}

.gate-aside-eyebrow {
  display: block;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 6px;
}

.gate-aside-head h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  color: var(--text);
  margin: 0 0 4px;
}

.gate-aside-head p {
  font-size: 13px;
  color: var(--muted);
  margin: 0;
}

/* Login sits right there, so the links that lead to it are redundant. */
.gate-modal.split #gateToLoginWrap,
.gate-modal.split #loginToRegisterWrap {
  display: none !important;
}

/* The login column is secondary here, so its button steps back. */
.gate-modal.split .gate-login-panel .gate-submit {
  background: var(--white);
  color: var(--text);
  border: 1px solid var(--border);
}

.gate-modal.split .gate-login-panel .gate-submit:hover {
  background: var(--text);
  color: var(--white);
  border-color: var(--text);
}

@media (max-width: 760px) {
  /* Register goes on top: it is the primary action and the one most visitors
     need. Login follows underneath rather than pushing it below the fold. */
  .gate-modal.split .gate-body {
    grid-template-columns: 1fr;
  }

  .gate-modal.split .gate-main {
    padding: 4px 24px 24px;
  }

  .gate-modal.split .gate-divider {
    height: 1px;
    margin: 0 24px;
  }

  /* Full width when stacked, so both bottom corners meet the modal edge. */
  .gate-modal.split .gate-login-panel {
    padding: 24px;
    border-bottom-left-radius: 24px;
    border-bottom-right-radius: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-modal {
    transition: none;
  }
}

@keyframes gateIn {
  from {
    opacity: 0;
    transform: translateY(16px) scale(0.98)
  }

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

.gate-stripe {
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  display: flex
}

.gate-stripe span {
  flex: 1;
  height: 100%
}

.gate-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
  display: block
}

.gate-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 8px
}

.gate-sub {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 300;
  line-height: 1.6;
  margin-bottom: 24px
}

/* ─── LOGIN PANEL ─── */
/* Deliberately borrows the registration form's own building blocks
   (.gate-form-section / .gate-row / .gate-field / .gate-submit) so the two
   modes read as one system rather than two different forms. */
.gate-login-panel {
  display: none
}

.gate-login-panel.active {
  display: block;
  animation: gateIn 0.28s ease
}

/* ─── PASSWORD RESET PANEL ─── */
.gate-reset-panel {
  display: none
}

.gate-reset-panel.active {
  display: block;
  animation: gateIn 0.28s ease
}

/* Only one of the three reset steps is ever mounted. */
.gate-reset-step {
  display: none
}

.gate-reset-step.active {
  display: block
}

.gate-switch {
  text-align: center;
  font-size: 12px;
  color: var(--muted);
  margin-top: 18px
}

.gate-switch button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--teal-dark);
  text-decoration: underline;
  cursor: pointer
}

.gate-switch button:hover {
  color: var(--text)
}

.gate-form-section {
  margin-bottom: 20px
}

.gate-form-section-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.gate-row {
  display: grid;
  gap: 10px;
  margin-bottom: 10px
}

.gate-row.g2 {
  grid-template-columns: 1fr 1fr
}

.gate-field {
  display: flex;
  flex-direction: column;
  gap: 5px
}

.gate-field label {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--text)
}

.gate-field input,
.gate-field select {
  border: none;
  border-bottom: 1.5px solid var(--border);
  background: transparent;
  padding: 9px 2px;
  font-size: 13.5px;
  font-family: var(--font-body);
  color: var(--text);
  transition: border-color 0.2s;
  outline: none;
}

.gate-field input:focus,
.gate-field select:focus {
  border-bottom-color: var(--teal)
}

.gate-field input.invalid {
  border-bottom-color: var(--coral)
}

.gate-field input.valid {
  border-bottom-color: var(--teal)
}

.gate-field small.err {
  color: var(--coral);
  font-size: 11px;
  display: none
}

.gate-field small.err.show {
  display: block
}

.gate-hint {
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 300
}

/* Still used by the phone section, which returns when SMS_ENABLED is true. */
.gate-otp-row {
  display: flex;
  gap: 8px;
  align-items: flex-end
}

.gate-otp-row .gate-field {
  flex: 1
}

/* ─── EMAIL VERIFICATION STAGES ─── */
.gate-sent-note {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
  margin-bottom: 14px
}

.gate-sent-note strong {
  color: var(--text);
  font-weight: 600
}

.gate-sent-note button {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--teal-dark);
  text-decoration: underline;
  cursor: pointer
}

.gate-sent-note button:hover {
  color: var(--text)
}

/* The code box is the only thing on screen at this stage — give it presence. */
#emailOtp {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 10px;
  text-align: center;
  font-variant-numeric: tabular-nums
}

#emailOtp::placeholder {
  color: var(--border);
  letter-spacing: 10px
}

.gate-inline-btn {
  align-self: end;
  margin-bottom: 6px
}

.gate-otp-btn {
  white-space: nowrap;
  padding: 9px 14px;
  border-radius: 980px;
  border: 1px solid var(--text);
  background: transparent;
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.gate-otp-btn:hover {
  background: var(--text);
  color: #fff
}

.gate-otp-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed
}

.gate-otp-status {
  font-size: 11.5px;
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 5px
}

.gate-otp-status.pending {
  color: var(--gold)
}

.gate-otp-status.verified {
  color: var(--teal)
}

.gate-otp-verify-row {
  display: none;
  gap: 8px;
  margin-top: 10px;
  align-items: flex-end
}

.gate-otp-verify-row.show {
  display: flex
}

.gate-otp-verify-row input {
  max-width: 120px;
  letter-spacing: 4px;
  font-weight: 600
}

.gate-captcha {
  border: 0.5px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px;
  margin: 22px 0;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--light);
}

.gate-captcha-check {
  width: 22px;
  height: 22px;
  border-radius: 5px;
  border: 1.5px solid var(--muted);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
}

.gate-captcha-check.checked {
  background: var(--teal);
  border-color: var(--teal)
}

.gate-captcha-check svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  opacity: 0;
  transition: opacity 0.15s
}

.gate-captcha-check.checked svg {
  opacity: 1
}

.gate-captcha-label {
  font-size: 13px;
  color: var(--text)
}

.gate-captcha-sub {
  font-size: 10.5px;
  color: var(--muted)
}

.gate-captcha-math {
  margin-left: auto;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 8px
}

.gate-captcha-math input {
  width: 48px;
  text-align: center;
  border: none;
  border-bottom: 1.5px solid var(--border);
  padding: 4px;
  font-size: 13px;
  outline: none
}

.gate-submit {
  width: 100%;
  background: var(--text);
  color: #fff;
  border: none;
  padding: 14px;
  border-radius: 980px;
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.gate-submit:disabled {
  background: var(--border);
  color: var(--muted);
  cursor: not-allowed
}

.gate-submit:not(:disabled):hover {
  background: var(--teal-dark)
}

/* ─── STEP FLOW (added: staged registration) ─── */
.gate-step {
  display: none
}

.gate-step.active {
  display: block;
  animation: gateIn 0.28s ease
}

/* Brand stripe doubles as the progress bar: unlit segments fade back */
.gate-stripe span {
  opacity: 0.15;
  transition: opacity 0.35s ease
}

.gate-stripe span.lit {
  opacity: 1
}

.gate-stepcount {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted)
}

.gate-nav {
  display: flex;
  gap: 10px;
  align-items: center
}

.gate-nav .gate-submit {
  flex: 1
}

/* Back sits in the header as an arrow, so the action row holds one clear
   primary button. Taken out of flow when hidden so step 1 has no empty gap
   in front of its step label. */
.gate-header-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px
}

.gate-back-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  background: none;
  border: 0.5px solid var(--border);
  border-radius: 50%;
  color: var(--muted);
  font-size: 15px;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s
}

.gate-back-btn.show {
  display: flex
}

.gate-back-btn:hover {
  border-color: var(--text);
  color: var(--text);
  background: var(--light)
}

.gate-stepcount + .gate-eyebrow,
.gate-header-row + .gate-eyebrow {
  margin-top: 0
}

.gate-later-btn {
  display: block;
  width: 100%;
  background: none;
  border: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 11.5px;
  text-decoration: underline;
  cursor: pointer;
  margin-top: 14px;
  padding: 4px
}

.gate-later-btn:hover {
  color: var(--text)
}

.gate-resend {
  display: none;
  background: none;
  border: none;
  padding: 4px 0 0;
  color: var(--teal-dark);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 500;
  text-decoration: underline;
  cursor: pointer
}

.gate-resend.show {
  display: block
}

.gate-resend:disabled {
  color: var(--muted);
  text-decoration: none;
  cursor: default
}

.gate-welcome-back {
  display: none;
  font-size: 11.5px;
  color: var(--teal-dark);
  background: var(--teal-light);
  border: 0.5px solid rgba(26, 158, 117, 0.25);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  line-height: 1.5
}

.gate-welcome-back.show {
  display: block
}

.gate-legal {
  font-size: 10.5px;
  color: var(--muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5
}

.gate-error-banner {
  display: none;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  color: #B3261E;
  background: rgba(224, 91, 71, 0.08);
  border: 0.5px solid rgba(224, 91, 71, 0.3);
  border-radius: 12px;
  padding: 12px 16px;
  margin-bottom: 18px;
}

.gate-error-banner.show {
  display: flex
}

.gate-captcha-err {
  color: var(--coral);
  font-size: 11px;
  margin-top: 8px;
  display: none
}

.gate-captcha-err.show {
  display: block
}

@media(max-width:600px) {
  .gate-modal {
    padding: 28px 22px 24px
  }

  .gate-row.g2 {
    grid-template-columns: 1fr
  }

}

/* Responsive */
@media(max-width:1024px) {
  .services-grid {
    grid-template-columns: repeat(3, 1fr)
  }

  .detail-inner {
    grid-template-columns: 1fr;
    gap: 48px
  }

  .detail-inner.rev {
    direction: ltr
  }

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

@media(max-width:768px) {
  nav {
    padding: 0 24px
  }

  .nav-links {
    display: none
  }

  .nav-account-who {
    display: none
  }

  .nav-account:not([hidden]) {
    padding-left: 10px
  }

  .hero {
    padding: 120px 24px 72px
  }

  .hero-stats {
    flex-wrap: wrap
  }

  .services-section,
  .detail-section {
    padding: 80px 24px
  }

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

  .contact-section {
    padding: 80px 24px
  }

  footer {
    padding: 60px 24px 32px
  }

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

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

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