@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Inter:wght@300;400;500;600;700&display=swap");
:root {
  --bg: #070909;
  --bg2: #0b0e0d;
  --panel: #101311;
  --gold: #ddae55;
  --gold2: #f1cf83;
  --white: #f5f1e8;
  --muted: #aaa9a2;
  --line: rgba(221, 174, 85, 0.22);
  --max: 1240px;
}
* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: Inter, Arial, sans-serif;
  line-height: 1.65;
}
body:before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -10;
  pointer-events: none;
  background: radial-gradient(
      circle at 75% 10%,
      rgba(221, 174, 85, 0.055),
      transparent 26%
    ),
    linear-gradient(rgba(255, 255, 255, 0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.012) 1px, transparent 1px);
  background-size: auto, 56px 56px, 56px 56px;
}
a {
  color: inherit;
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
}
.container {
  width: min(var(--max), calc(100% - 48px));
  margin: auto;
}
.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.navbar {
  height: 82px;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(5, 7, 7, 0.94);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(221, 174, 85, 0.14);
}
.nav {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img {
    height: 50px;
    object-fit: contain;
}
.brand strong {
  font: 600 17px Cinzel, serif;
  letter-spacing: 0.14em;
}
.brand small {
  display: block;
  color: #858680;
  font-size: 8px;
  letter-spacing: 0.3em;
}
.menu {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.menu > a:not(.btn) {
  padding: 31px 0;
  position: relative;
}
.menu > a:not(.btn):after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 19px;
  height: 1px;
  background: var(--gold);
  transition: 0.25s;
}
.menu > a:hover:after,
.menu > a.active:after {
  right: 0;
}
.menu > a:hover,
.menu > a.active {
  color: var(--gold2);
}
.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  color: white;
  padding: 8px 11px;
}

/* ========================================
   Sticky Header
======================================== */

.navbar {
    width: 100%;
    position: relative;
    z-index: 9999;
    transition:
        background-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.navbar.is-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 99999;
    background: rgba(5, 7, 7, 0.94);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);

    animation: stickyHeader 0.35s ease;
}

@keyframes stickyHeader {
    from {
        transform: translateY(-100%);
    }

    to {
        transform: translateY(0);
    }
}

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  min-height: 48px;
  padding: 0 21px;
  border: 1px solid var(--gold);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  transition: 0.25s;
}
.btn i,
.text-link i {
  font-style: normal;
  font-size: 16px;
}
.btn:hover,
.btn.fill {
  background: var(--gold);
  color: #0a0b0b;
}
.btn.fill:hover {
  background: var(--gold2);
  border-color: var(--gold2);
}




h1,
h2,
h3 {
  font-family: Cinzel, serif;
}
.hero {
  height: min(800px, calc(100vh - 82px));
  min-height: 620px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 53%;
  z-index: -3;
  filter: saturate(0.9) contrast(1.08);
}

.hero-inner {
  height: 100%;
  display: flex;
  align-items: center;
}
.hero-copy {
  width: min(700px, 65%);
  padding-bottom: 20px;
}
.hero h1 {
  font-size: clamp(46px, 5.3vw, 78px);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin: 15px 0 24px;
  text-shadow: 0 5px 28px rgba(0, 0, 0, 0.45);
}
.hero h1 span,
.section-head h2 span,
.purpose h2 span,
.journey h2 span,
.network h2 span {
  color: var(--gold2);
}
.hero p {
  max-width: 620px;
  color: #d0cec6;
  font-size: 17px;
  line-height: 1.75;
}
.actions {
    display: flex;
    gap: 13px;
    margin-top: 0;
    position: absolute;
    bottom: 0;
    margin-bottom: 80px;
}
.metrics-wrap {
  position: relative;
  margin-top: 30px;
  z-index: 5;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(11, 14, 13, 0.96);
  border: 1px solid var(--line);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.metrics > div {
  padding: 25px 28px;
  text-align: center;
  border-right: 1px solid var(--line);
}
.metrics > div:last-child {
  border: 0;
}
.metrics strong {
  display: block;
  color: var(--gold2);
  font: 600 29px Cinzel, serif;
}
.metrics span {
  display: block;
  margin: 5px auto 0;
  max-width: 150px;
  color: #999;
  font-size: 10px;
  line-height: 1.45;
  text-transform: uppercase;
  letter-spacing: 0.09em;
}
.path,
.signals,
.journey,
.network,
.cta,
.purpose {
  padding: 105px 0;
}
.section-head.center {
  text-align: center;
  max-width: 800px;
  margin: auto;
}
.section-head h2, .purpose h2, .journey h2, .network h2 {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(48px, 4.2vw, 72px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: uppercase;
}
.section-head p,
.purpose-copy > p,
.journey-copy > p,
.network-grid > div > p {
  color: #b5b4ad;
  font-size: 16px;
  max-width: 720px;
}
.path {
  padding-top: 125px;
}
.path-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-top: 55px;
  position: relative;
}
.path-grid:before {
  content: "";
  position: absolute;
  top: 57px;
  left: 7%;
  right: 7%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    var(--gold),
    transparent
  );
}
.path-item {
  text-align: center;
  position: relative;
  padding: 0 7px;
}
.path-item b {
  display: block;
  color: #62645f;
  font-size: 10px;
  letter-spacing: 0.12em;
  margin-bottom: 11px;
}
.path-icon {
  width: 64px;
  height: 64px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: auto;
  background: #0b0e0d;
  color: var(--gold2);
  font-size: 25px;
  box-shadow: 0 0 26px rgba(221, 174, 85, 0.08);
  position: relative;
  z-index: 2;
}
.path-item h3 {
  font: 600 14px Inter, sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin: 15px 0 2px;
}
.path-item p {
  margin: 0;
  color: #858680;
  font-size: 11px;
}
.purpose {
  background: linear-gradient(180deg, #090c0b, #070909);
}
.purpose-grid {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  gap: 75px;
  align-items: center;
}
.visual-card {
  position: relative;
}
.visual-card > img {
  width: 100%;
  aspect-ratio: 1.25/1;
  object-fit: cover;
  border: 1px solid var(--line);
  filter: saturate(0.8);
}
.visual-note {
  position: absolute;
  right: -25px;
  bottom: -25px;
  width: 290px;
  padding: 30px;
  background: rgba(8, 10, 9, 0.96);
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.visual-note small {
  color: var(--gold);
  letter-spacing: 0.2em;
}
.visual-note strong {
  display: block;
  font: 500 21px/1.55 Cinzel, serif;
  margin-top: 12px;
}
.visual-note em {
  font-style: normal;
  color: var(--gold2);
}
.mini-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 30px 0;
}
.mini-grid div {
  border: 1px solid var(--line);
  padding: 18px;
  background: #0b0e0d;
}
.mini-grid b {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold2);
}
.mini-grid span {
  display: block;
  color: #8f908b;
  font-size: 11px;
  line-height: 1.5;
  margin-top: 7px;
}
.text-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--gold2);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-weight: 700;
  border-bottom: 1px solid var(--gold);
  padding-bottom: 5px;
}
.signals {
  border-top: 1px solid rgba(255, 255, 255, 0.04);
}
.signals .section-head {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 70px;
  align-items: end;
}
.signals .section-head p {
  margin-bottom: 25px;
}
.signal-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 45px;
}
.signal-grid article {
  min-height: 245px;
  padding: 30px;
  background: linear-gradient(145deg, #101311, #090b0a);
  border: 1px solid rgba(221, 174, 85, 0.16);
  position: relative;
  overflow: hidden;
  transition: 0.25s;
}
.signal-grid article:after {
  content: "";
  position: absolute;
  width: 160px;
  height: 160px;
  border: 1px solid rgba(221, 174, 85, 0.09);
  border-radius: 50%;
  right: -80px;
  bottom: -80px;
}
.signal-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(221, 174, 85, 0.45);
}
.signal-grid article > span {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.16em;
}
.signal-grid h3 {
  font-size: 21px;
  margin: 38px 0 12px;
}
.signal-grid p {
  color: #999;
  font-size: 13px;
  max-width: 300px;
}
.journey {
  background: #0a0d0c;
}
.journey-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 75px;
  align-items: center;
}
.journey-list {
  margin-top: 35px;
}
.journey-list > div {
  display: grid;
  grid-template-columns: 45px 1fr;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid rgba(221, 174, 85, 0.17);
}
.journey-list b {
  color: var(--gold);
  font-size: 11px;
}
.journey-list span {
  color: #8e8f89;
  font-size: 12px;
}
.journey-list strong {
  display: block;
  color: #e7e2d7;
  font-size: 13px;
  margin-bottom: 3px;
}
.journey-images {
  position: relative;
  padding: 0 0 65px 50px;
}
.main-img {
  width: 100%;
  border: 1px solid var(--line);
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.35);
}
.float-img {
  position: absolute;
  width: 46%;
  left: 0;
  bottom: 0;
  border: 6px solid #0a0d0c;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}
.network-grid {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  gap: 75px;
  align-items: center;
}
.network-art {
  position: relative;
}
.network-art:before {
  content: "";
  position: absolute;
  inset: -14px 14px 14px -14px;
  border: 1px solid var(--line);
  z-index: -1;
}
.network-art img {
  width: 100%;
  border: 1px solid rgba(221, 174, 85, 0.15);
}
.network .btn {
  margin-top: 20px;
}
.cta {
  padding-top: 40px;
}
.cta-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 50px 55px;
  border: 1px solid var(--line);
  background: radial-gradient(
      circle at 85% 0%,
      rgba(221, 174, 85, 0.12),
      transparent 30%
    ),
    #0c0f0e;
}
.cta h2 {
  font: 600 clamp(28px, 3.5vw, 44px) Cinzel, serif;
  margin: 8px 0;
}
.cta p {
  margin: 0;
  color: #9d9e98;
}
.footer-row {
  min-height: 110px;
  border-top: 1px solid rgba(221, 174, 85, 0.14);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;
  color: #777;
  font-size: 11px;
}
.footer-brand img {
  width: 34px;
  height: 34px;
}
.footer-brand strong {
  font-size: 13px;
}
/* inner pages */
.page-hero {
  position: relative;
  isolation: isolate;
  padding: 105px 0 85px;
  overflow: hidden;
  background: #080a09;
}
.page-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: url("../images/1.png") center 48% / cover no-repeat;
  opacity: 0.4;
}
.page-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
      90deg,
      rgba(7, 9, 9, 0.98),
      rgba(7, 9, 9, 0.7) 55%,
      rgba(7, 9, 9, 0.28)
    ),
    linear-gradient(0deg, #070909, transparent 55%);
}
.page-hero h1 {
  font: 600 clamp(42px, 6vw, 70px) / 1.04 Cinzel, serif;
  margin: 10px 0;
}
.page-hero p {
  max-width: 650px;
  color: #bbb;
}
.section {
  padding: 90px 0;
}
.section-title {
  font: 600 clamp(34px, 4.3vw, 56px) / 1.08 Cinzel, serif;
  margin: 12px 0 20px;
}
.section-title span {
  color: var(--gold2);
}
.lead {
  color: #b2b1aa;
  max-width: 760px;
}
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 65px;
  align-items: center;
}
.frame img {
  width: 100%;
  border: 1px solid var(--line);
}
.pillars,
.ecosystem-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 35px;
}
.card,
.eco {
  padding: 28px;
  border: 1px solid var(--line);
  background: #0c0f0e;
}
.card h3,
.eco h3 {
  font-size: 19px;
}
.card p,
.eco p {
  color: #999;
  font-size: 13px;
}
.num,
.eco b {
  color: var(--gold);
  font-size: 11px;
  letter-spacing: 0.12em;
}
.showcase {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 35px;
}
.showcase figure {
  margin: 0;
  border: 1px solid var(--line);
  overflow: hidden;
}
.showcase img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: 0.3s;
}
.showcase figure:hover img {
  transform: scale(1.02);
}
.contact {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 65px;
  align-items: start;
}
.contact-list {
  margin-top: 25px;
}
.contact-list div {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  color: #aaa;
  font-size: 13px;
}
form {
  padding: 26px;
  border: 1px solid var(--line);
  background: #0c0f0e;
}
.full {
  grid-column: 1/-1;
}
input,
select,
textarea {
  width: 100%;
  border: 1px solid #2a2e2b;
  background: #090c0b;
  color: #eee;
  font: 13px Inter, sans-serif;
  outline: none;
  transition: 0.2s;
}
input,
select {
  padding: 0 14px;
}
textarea {
  height: 125px;
  min-height: 125px;
  padding: 14px;
  resize: vertical;
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(221, 174, 85, 0.06);
}
form .btn {
  height: 50px;
  cursor: pointer;
}
@media (max-width: 980px) {
  .menu {
    display: none;
    position: absolute;
    top: 82px;
    left: 0;
    right: 0;
    background: #080a09;
    padding: 22px 24px;
    flex-direction: column;
    align-items: flex-start;
    border-bottom: 1px solid var(--line);
  }
  .menu.open {
    display: flex;
  }
  .menu > a:not(.btn) {
    padding: 7px 0;
  }
  .menu > a:not(.btn):after {
    bottom: 0;
  }
  .nav-toggle {
    display: block;
  }
  .hero-copy {
    width: 75%;
  }
  .path-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 0;
  }
  .path-grid:before {
    display: none;
  }
  .purpose-grid,
  .journey-grid,
  .network-grid,
  .split,
  .contact {
    grid-template-columns: 1fr;
    gap: 45px;
  }
  .visual-card {
    max-width: 700px;
  }
  .visual-note {
    right: 20px;
  }
  .signals .section-head {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .signal-grid,
  .pillars,
  .ecosystem-grid {
    grid-template-columns: 1fr 1fr;
  }
  .journey-images {
    max-width: 760px;
  }
  .cta-box {
    padding: 40px;
  }
  .footer-row {
    flex-wrap: wrap;
  }
  .footer-brand {
    width: 100%;
  }
}
@media (max-width: 650px) {
  .container {
    width: min(var(--max), calc(100% - 28px));
  }
  .navbar {
    height: 72px;
  }
  .menu {
    top: 72px;
  }
  .hero {
    height: auto;
    min-height: 620px;
  }
  .hero-bg {
    object-position: 62% center;
  }
  .hero:before {
    background: linear-gradient(
        90deg,
        rgba(5, 7, 7, 0.98),
        rgba(5, 7, 7, 0.78) 70%,
        rgba(5, 7, 7, 0.48)
      ),
      linear-gradient(0deg, #070909, transparent 40%);
  }
  .hero-copy {
    width: 100%;
    padding: 80px 0 100px;
  }
  .hero h1 {
    font-size: 43px;
  }
  .hero p {
    font-size: 15px;
  }
  .actions {
    flex-direction: column;
    align-items: flex-start;
  }
  .metrics {
    grid-template-columns: 1fr 1fr;
  }
  .metrics > div:nth-child(2) {
    border-right: 0;
  }
  .metrics > div {
    padding: 20px 12px;
  }
  .metrics strong {
    font-size: 24px;
  }
  .path,
  .signals,
  .journey,
  .network,
  .cta,
  .purpose {
    padding: 72px 0;
  }
  .path {
    padding-top: 100px;
  }
  .path-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 0;
  }
  .purpose-grid {
    gap: 55px;
  }
  .visual-note {
    position: relative;
    right: auto;
    bottom: auto;
    width: calc(100% - 28px);
    margin: -35px auto 0;
  }
  .mini-grid {
    grid-template-columns: 1fr;
  }
  .signal-grid,
  .pillars,
  .ecosystem-grid,
  .showcase {
    grid-template-columns: 1fr;
  }
  .journey-images {
    padding: 0 0 50px 25px;
  }
  .float-img {
    width: 55%;
  }
  .network-grid {
    gap: 45px;
  }
  .cta-box {
    padding: 32px 24px;
    flex-direction: column;
    align-items: flex-start;
  }
  .footer-row {
    padding: 30px 0;
    min-height: 0;
    flex-direction: column;
    align-items: flex-start;
  }
  form {
    grid-template-columns: 1fr;
    padding: 16px;
  }
  .full {
    grid-column: auto;
  }
  .page-hero {
    padding: 80px 0 60px;
  }
  .section {
    padding: 70px 0;
  }
}

/* =========================================
   ASPEN TEAM SECTION
========================================= */

.team-section {
  position: relative;
  overflow: hidden;
  padding: 110px 0 85px;
  background: radial-gradient(
      circle at 88% 5%,
      rgba(205, 158, 67, 0.09),
      transparent 30%
    ),
    #070908;
}

/* Large decorative text */

.team-section::before {
  content: "OUR TEAM";

  position: absolute;
  top: 25px;
  right: -10px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(90px, 12vw, 190px);
  font-weight: 700;
  line-height: 1;

  color: rgba(213, 169, 79, 0.035);

  white-space: nowrap;
  pointer-events: none;
}

.team-section .container {
  position: relative;
  z-index: 2;
}

/* =========================================
   SECTION HEADING
========================================= */

.team-heading {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  align-items: end;
  gap: 80px;

  margin-bottom: 55px;
}

.team-heading .eyebrow {
  margin-bottom: 14px;
}

.team-heading h2 {
  margin: 0;

  max-width: 650px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(42px, 4vw, 66px);
  font-weight: 500;
  line-height: 1.03;

  color: #f4f0e8;
}

.team-heading h2 span {
  color: #d9aa4e;
}

.team-heading > p {
  max-width: 540px;

  margin: 0 0 7px auto;

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

  font-size: 15px;
  line-height: 1.8;
}

/* =========================================
   5 COLUMN TEAM GRID
========================================= */

.team-grid {
  display: grid;

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

  gap: 18px;
}

/* =========================================
   TEAM CARD
========================================= */

.team-card {
  position: relative;

  min-width: 0;

  background: #0b0e0c;

  border: 1px solid rgba(215, 170, 78, 0.18);

  transition: transform 0.35s ease, border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.team-card:hover {
  transform: translateY(-7px);

  border-color: rgba(215, 170, 78, 0.6);

  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.35), 0 0 25px rgba(215, 170, 78, 0.05);
}

/* =========================================
   IMAGE
========================================= */

.team-image {
  position: relative;

  height: 330px;

  overflow: hidden;

  background: #111411;
}

.team-image::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    to bottom,
    transparent 50%,
    rgba(6, 8, 7, 0.72) 100%
  );

  pointer-events: none;
}

.team-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;
  object-position: center top;

  filter: grayscale(15%);

  transition: transform 0.6s ease, filter 0.5s ease;
}

.team-card:hover .team-image img {
  transform: scale(1.055);

  filter: grayscale(0%);
}

/* =========================================
   TEAM NUMBER
========================================= */

.team-number {
  position: absolute;

  top: 15px;
  left: 15px;

  z-index: 3;

  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #e0b258;

  background: rgba(6, 8, 7, 0.82);

  border: 1px solid rgba(218, 170, 74, 0.55);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 1px;

  backdrop-filter: blur(7px);
}

/* =========================================
   LINKEDIN
========================================= */

.team-linkedin {
  position: absolute;

  right: 15px;
  bottom: 15px;

  z-index: 4;

  width: 38px;
  height: 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #070908;

  background: #dbae53;

  border: 1px solid #dbae53;

  text-decoration: none;

  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: 800;

  transition: 0.3s ease;
}

.team-linkedin:hover {
  color: #dbae53;

  background: #080a09;
}

/* =========================================
   MEMBER INFORMATION
========================================= */

.team-info {
  position: relative;

  padding: 23px 20px 25px;

  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.team-info::before {
  content: "";

  position: absolute;

  left: 20px;
  top: 0;

  width: 42px;
  height: 1px;

  background: #d9aa4e;
}

.team-info h3 {
  margin: 0 0 9px;

  color: #f2eee6;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 21px;
  font-weight: 500;

  line-height: 1.25;
}

.team-role {
  display: block;

  color: #d9aa4e;

  font-size: 10px;
  font-weight: 700;

  line-height: 1.5;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

/* =========================================
   TEAM BOTTOM
========================================= */

.team-bottom {
  display: grid;

  grid-template-columns:
    minmax(220px, 0.8fr)
    minmax(300px, 1.3fr)
    auto;

  align-items: center;

  gap: 50px;

  margin-top: 55px;

  padding-top: 32px;

  border-top: 1px solid rgba(217, 170, 78, 0.25);
}

.team-bottom-title {
  display: flex;

  align-items: center;

  gap: 18px;
}

.team-bottom-title > span {
  display: block;

  width: 50px;
  height: 2px;

  flex-shrink: 0;

  background: #d9aa4e;
}

.team-bottom-title p {
  margin: 0;

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

  font-size: 10px;
  font-weight: 700;

  line-height: 1.6;

  letter-spacing: 0.22em;
}

.team-bottom-text {
  margin: 0;

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

  font-size: 14px;

  line-height: 1.6;
}

.team-bottom-text strong {
  display: block;

  color: #d9aa4e;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 18px;
  font-weight: 500;
}

/* Button */

.team-bottom-btn {
  min-width: 180px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 20px;

  padding: 17px 24px;

  color: #f2eee6;

  border: 1px solid #c99a42;

  text-decoration: none;

  text-transform: uppercase;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 0.15em;

  transition: 0.3s ease;
}

.team-bottom-btn span {
  color: #d9aa4e;

  font-size: 17px;
}

.team-bottom-btn:hover {
  color: #080a09;

  background: #d9aa4e;
}

.team-bottom-btn:hover span {
  color: #080a09;
}

/* =========================================
   RESPONSIVE
========================================= */

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

  .team-image {
    height: 390px;
  }
}

@media (max-width: 900px) {
  .team-section {
    padding: 85px 0 70px;
  }

  .team-heading {
    grid-template-columns: 1fr;

    gap: 22px;
  }

  .team-heading > p {
    margin-left: 0;
  }

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

  .team-image {
    height: 420px;
  }

  .team-bottom {
    grid-template-columns: 1fr;

    gap: 20px;
  }

  .team-bottom-btn {
    width: max-content;
  }
}

@media (max-width: 600px) {
  .team-section {
    padding: 70px 0 60px;
  }

  .team-heading {
    margin-bottom: 35px;
  }

  .team-heading h2 {
    font-size: 40px;
  }

  .team-grid {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .team-image {
    height: 440px;
  }

  .team-info {
    padding: 22px;
  }

  .team-info h3 {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .team-image {
    height: 370px;
  }
}

/* =====================================================
   LOCATIONS
===================================================== */

.locations-section {
  position: relative;
  padding: 100px 0 105px;
  overflow: hidden;

  background: radial-gradient(
      circle at 50% 0%,
      rgba(215, 170, 78, 0.06),
      transparent 32%
    ),
    #080a09;
}

/* subtle vertical lines */

.locations-section::before {
  content: "";
  position: absolute;
  inset: 0;

  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.025) 1px,
    transparent 1px
  );

  background-size: 25% 100%;

  pointer-events: none;
}

.locations-section .container {
  position: relative;
  z-index: 2;
}

/* ==========================
   HEADING
========================== */

.locations-heading {
  max-width: 720px;
  margin: 0 auto 60px;
  text-align: center;
}

.locations-heading .eyebrow {
  margin-bottom: 12px;
}

.locations-heading h2 {
  margin: 0;

  color: #f2eee7;

  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(40px, 4vw, 60px);
  font-weight: 500;
  line-height: 1.08;
}

.locations-heading h2 span {
  color: #d9aa4e;
}

.locations-heading p {
  max-width: 600px;

  margin: 18px auto 0;

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

  font-size: 14px;
  line-height: 1.75;
}

/* ==========================
   4 COLUMNS
========================== */

.locations-grid {
  display: grid;

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

  gap: 34px;
}

/* ==========================
   LOCATION
========================== */

.location-item {
  position: relative;

  display: grid;

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

  gap: 18px;

  align-items: start;

  min-width: 0;
}

/* vertical divider */

.location-item:not(:last-child)::after {
  content: "";

  position: absolute;

  top: 0;
  right: -17px;

  width: 1px;
  height: 100%;

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(217, 170, 78, 0.18),
    transparent
  );
}

/* ==========================
   IMAGE
========================== */

.location-image {
  position: relative;

  width: 115px;
  height: 115px;

  overflow: hidden;

  border-radius: 3px;

  background: #111;
}

.location-image::after {
  content: "";

  position: absolute;
  inset: 0;

  border: 1px solid rgba(217, 170, 78, 0.18);

  pointer-events: none;
}

.location-image img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.location-item:hover .location-image img {
  transform: scale(1.06);
}

/* ==========================
   CONTENT
========================== */

.location-content {
  min-width: 0;
}

.location-no {
  display: block;

  margin-bottom: 8px;

  color: #d9aa4e;

  font-size: 9px;
  font-weight: 700;

  letter-spacing: 0.16em;

  text-transform: uppercase;
}

.location-content h3 {
  margin: 0 0 9px;

  color: #f3f0e9;

  font-family: inherit;

  font-size: 17px;
  font-weight: 600;

  line-height: 1.35;
}

.location-content p {
  margin: 0;

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

  font-size: 12px;
  line-height: 1.75;
}

/* small gold line */

.location-content::after {
  content: "";

  display: block;

  width: 28px;
  height: 1px;

  margin-top: 15px;

  background: #d9aa4e;

  transition: width 0.3s ease;
}

.location-item:hover .location-content::after {
  width: 55px;
}

/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1200px) {
  .locations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 45px 50px;
  }

  .location-item {
    grid-template-columns: 135px 1fr;
  }

  .location-image {
    width: 135px;
    height: 135px;
  }

  .location-item::after {
    display: none;
  }
}

@media (max-width: 700px) {
  .locations-section {
    padding: 75px 0;
  }

  .locations-heading {
    margin-bottom: 45px;
  }

  .locations-heading h2 {
    font-size: 39px;
  }

  .locations-grid {
    grid-template-columns: 1fr;

    gap: 35px;
  }

  .location-item {
    grid-template-columns: 120px 1fr;

    padding-bottom: 30px;

    border-bottom: 1px solid rgba(217, 170, 78, 0.12);
  }

  .location-image {
    width: 120px;
    height: 120px;
  }
}

@media (max-width: 450px) {
  .location-item {
    grid-template-columns: 95px 1fr;

    gap: 15px;
  }

  .location-image {
    width: 95px;
    height: 105px;
  }

  .location-content h3 {
    font-size: 16px;
  }

  .location-content p {
    font-size: 11px;
    line-height: 1.65;
  }
}


/* =====================================================
   ASPEN GROWTH PATHWAYS
===================================================== */

.aspen-pathways {
    position: relative;
    padding: 120px 0;
    background:
        radial-gradient(
            circle at 80% 20%,
            rgba(201, 151, 85, 0.07),
            transparent 32%
        ),
        #070707;
    overflow: hidden;
    color: #fff;
}


/* Decorative Circles */

.aspen-pathways::before {
    content: "";
    position: absolute;
    width: 900px;
    height: 900px;
    right: -350px;
    top: -420px;
    border: 1px solid rgba(201, 151, 85, 0.16);
    border-radius: 50%;
    pointer-events: none;
}

.aspen-pathways::after {
    content: "";
    position: absolute;
    width: 650px;
    height: 650px;
    left: -450px;
    bottom: -350px;
    border: 1px solid rgba(201, 151, 85, 0.10);
    border-radius: 50%;
    pointer-events: none;
}


/* Container */

.aspen-pathways .container {
    position: relative;
    z-index: 2;
}


/* =====================================================
   HEADING
===================================================== */

.aspen-pathways-heading {
    margin-bottom: 65px;
    text-align: center;
}

.aspen-pathways-heading .eyebrow {
    position: relative;
    display: inline-block;
    margin-bottom: 24px;
    padding-bottom: 14px;
    color: #c99755;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 5px;
    text-transform: uppercase;
}

.aspen-pathways-heading .eyebrow::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 55px;
    height: 1px;
    background: #c99755;
}

.aspen-pathways-heading h2 {
    margin: 0;
    color: #f6f3ed;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(44px, 5.2vw, 76px);
    line-height: 1.02;
    font-weight: 400;
    letter-spacing: -2.5px;
}

.aspen-pathways-heading h2 span {
    display: block;
    margin-top: 5px;
    color: #c99755;
}

.aspen-pathways-heading > p {
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.58);
    font-size: 17px;
    line-height: 1.7;
}


/* =====================================================
   GRID
===================================================== */

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


/* =====================================================
   CARD
===================================================== */

.aspen-pathway-card {
    position: relative;
    min-height: 360px;
    padding: 38px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.025),
            rgba(255, 255, 255, 0.005)
        );

    border: 1px solid rgba(201, 151, 85, 0.28);
    border-radius: 4px;

    transition:
        transform 0.4s ease,
        border-color 0.4s ease,
        background 0.4s ease,
        box-shadow 0.4s ease;
}

.aspen-pathway-card::before {
    content: "";
    position: absolute;
    width: 260px;
    height: 260px;
    left: -120px;
    top: -120px;
    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(201, 151, 85, 0.10),
            transparent 70%
        );

    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}


/* Number */

.pathway-number {
    position: absolute;
    right: 28px;
    top: 18px;

    color: transparent;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 80px;
    font-weight: 400;
    line-height: 1;

    -webkit-text-stroke: 1px rgba(201, 151, 85, 0.22);

    transition:
        transform 0.4s ease,
        -webkit-text-stroke-color 0.4s ease;
}


/* Icon */

.pathway-icon {
    position: absolute;
    left: 38px;
    top: 42px;

    width: 62px;
    height: 62px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #c99755;
    font-size: 52px;
}

.pathway-icon i,
.pathway-icon svg {
    position: relative;
    z-index: 2;

    width: 52px;
    height: 52px;

    fill: currentColor;
    color: currentColor;

    transition: transform 0.4s ease;
}


/* Accent Line */

.pathway-line {
    display: block;
    width: 42px;
    height: 2px;
    margin-bottom: 21px;
    background: #c99755;
    transition: width 0.4s ease;
}


/* Title */

.aspen-pathway-card h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 13px;

    color: #f8f5ef;

    font-family: Georgia, "Times New Roman", serif;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 400;

    letter-spacing: 2.5px;
    text-transform: uppercase;
}


/* Description */

.aspen-pathway-card p {
    position: relative;
    z-index: 2;

    max-width: 310px;

    margin: 0;
    padding-right: 48px;

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

    font-size: 15px;
    line-height: 1.65;

    transition: color 0.4s ease;
}


/* Arrow */

.pathway-arrow {
    position: absolute;
    z-index: 3;

    right: 30px;
    bottom: 31px;

    width: 48px;
    height: 48px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #c99755;
    border-radius: 50%;

    color: #c99755;

    font-size: 21px;

    transition:
        background-color 0.35s ease,
        color 0.35s ease,
        transform 0.35s ease;
}


/* =====================================================
   HOVER
===================================================== */

.aspen-pathway-card:hover {
    transform: translateY(-6px);

    border-color: rgba(201, 151, 85, 0.75);

    background:
        linear-gradient(
            145deg,
            rgba(201, 151, 85, 0.08),
            rgba(255, 255, 255, 0.015)
        );

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.35);
}

.aspen-pathway-card:hover::before {
    opacity: 1;
}

.aspen-pathway-card:hover .pathway-icon i,
.aspen-pathway-card:hover .pathway-icon svg {
    transform: translateY(-4px) scale(1.05);
}

.aspen-pathway-card:hover .pathway-line {
    width: 75px;
}

.aspen-pathway-card:hover .pathway-number {
    transform: translateY(-4px);
    -webkit-text-stroke-color: rgba(201, 151, 85, 0.45);
}

.aspen-pathway-card:hover p {
    color: rgba(255, 255, 255, 0.72);
}

.aspen-pathway-card:hover .pathway-arrow {
    background: #c99755;
    color: #070707;
    transform: translateX(3px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1024px) {

    .aspen-pathways {
        padding: 95px 0;
    }

    .aspen-pathways-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .aspen-pathways-heading {
        margin-bottom: 50px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .aspen-pathways {
        padding: 75px 0;
    }

    .aspen-pathways-heading {
        margin-bottom: 40px;
    }

    .aspen-pathways-heading .eyebrow {
        font-size: 10px;
        letter-spacing: 3px;
    }

    .aspen-pathways-heading h2 {
        font-size: 42px;
        line-height: 1.08;
        letter-spacing: -1.5px;
    }

    .aspen-pathways-heading > p {
        margin-top: 22px;
        font-size: 15px;
    }

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

    .aspen-pathway-card {
        min-height: 310px;
        padding: 30px;
    }

    .pathway-number {
        right: 22px;
        top: 18px;
        font-size: 65px;
    }

    .pathway-icon {
        left: 30px;
        top: 34px;
        width: 52px;
        height: 52px;
        font-size: 44px;
    }

    .pathway-icon i,
    .pathway-icon svg {
        width: 44px;
        height: 44px;
    }

    .aspen-pathway-card h3 {
        font-size: 19px;
    }

    .aspen-pathway-card p {
        max-width: 280px;
        padding-right: 42px;
        font-size: 14px;
    }

    .pathway-arrow {
        right: 24px;
        bottom: 26px;
        width: 43px;
        height: 43px;
    }

}










/* =========================================================
   ASPEN BUSINESS JOURNEY
   LEFT ROCKET ROADMAP + MAIN LAYOUT
========================================================= */

.aspen-journey-page {
  --aspen-gold: #f5bd4f;
  --aspen-gold-light: #ffe08a;
  --aspen-dark: #050b10;
  --aspen-panel: rgba(5, 12, 17, 0.94);
  --aspen-border: rgba(245, 189, 79, 0.55);
  --aspen-text: #f7f4ed;
  --aspen-muted: #aeb4b9;

  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding: 45px 0 80px;

  color: var(--aspen-text);

  background: radial-gradient(
      circle at 88% 5%,
      rgba(255, 170, 45, 0.2),
      transparent 25%
    ),
    radial-gradient(circle at 10% 55%, rgba(28, 72, 105, 0.2), transparent 32%),
    linear-gradient(180deg, #061421 0%, #061019 45%, #03070b 100%);
}

/* Optional background artwork */

.aspen-journey-background {
  position: absolute;
  inset: 0;

  background-image: linear-gradient(
      90deg,
      rgba(2, 8, 13, 0.08),
      rgba(2, 8, 13, 0.22)
    ),
    url("../images/aspen-business-journey-bg.png");

  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;

  opacity: 0.72;

  pointer-events: none;
}

/* dark overlay */

.aspen-journey-page::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(1, 7, 12, 0.05),
    rgba(1, 7, 12, 0.22) 45%,
    rgba(1, 7, 12, 0.65) 100%
  );

  pointer-events: none;
}

/* =========================================================
   MAIN PAGE LAYOUT
========================================================= */

.journey-layout {
  position: relative;
  z-index: 5;

  width: min(1240px, calc(100% - 50px));
  margin: 0 auto;

  display: grid;

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

  gap: 55px;

  align-items: start;
}

/* =========================================================
   RIGHT MAIN
========================================================= */

.journey-main {
  min-width: 0;
}

/* =========================================================
   PAGE HEADING
========================================================= */

.journey-heading {
  max-width: 950px;
  margin-bottom: 32px;
}

.journey-heading .eyebrow {
  display: block;

  margin-bottom: 10px;

  color: var(--aspen-gold);

  font-size: 14px;
  font-weight: 700;

  letter-spacing: 5px;

  text-transform: uppercase;
}

.journey-heading h1 {
  margin: 0;

  color: #fff;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(48px, 5vw, 78px);

  line-height: 0.96;

  font-weight: 400;

  letter-spacing: -2px;
}

.journey-heading h1 strong {
  display: block;

  color: var(--aspen-gold);

  font-weight: 400;
}

.journey-heading > p {
  max-width: 800px;

  margin: 14px 0 0;

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

  font-size: 17px;
  line-height: 1.55;
}

/* =========================================================
   LEFT ROADMAP
========================================================= */

.journey-roadmap {
  position: relative;

  min-height: 1300px;

  padding-top: 70px;
}

/* =========================================================
   VERTICAL GOLD LINE
========================================================= */

.roadmap-line {
  position: absolute;

  left: 56px;
  top: 60px;
  bottom: 60px;

  width: 2px;

  background: linear-gradient(
    180deg,
    transparent,
    #ffdb72 5%,
    #f4ad2d 50%,
    #ffe991 95%,
    transparent
  );

  box-shadow: 0 0 6px #ffbd3f, 0 0 15px rgba(255, 181, 49, 0.85),
    0 0 35px rgba(255, 166, 24, 0.35);

  z-index: 1;
}

/* Light nodes */

.roadmap-line::before,
.roadmap-line::after {
  content: "";

  position: absolute;
  left: 50%;

  width: 10px;
  height: 10px;

  transform: translateX(-50%);

  background: #fff3ae;

  border-radius: 50%;

  box-shadow: 0 0 5px #fff, 0 0 12px #ffc445, 0 0 25px #ff9d00;
}

.roadmap-line::before {
  top: 3%;
}

.roadmap-line::after {
  bottom: 3%;
}

/* =========================================================
   ROADMAP ITEM
========================================================= */

.roadmap-item {
  position: relative;
  z-index: 3;

  min-height: 180px;

  display: grid;

  grid-template-columns: 115px 1fr;

  align-items: center;
}

/* Add glowing dot between stages */

.roadmap-item:not(.roadmap-build)::after {
  content: "";

  position: absolute;

  left: 51px;
  bottom: -5px;

  width: 12px;
  height: 12px;

  border-radius: 50%;

  background: #fff2b0;

  box-shadow: 0 0 6px #fff, 0 0 13px #ffc242, 0 0 28px rgba(255, 166, 0, 0.9);
}

/* =========================================================
   CIRCLE
========================================================= */

.roadmap-circle {
  position: relative;
  z-index: 5;

  width: 76px;
  height: 76px;

  margin-left: 19px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--aspen-gold);

  background: radial-gradient(circle, #071017 55%, #020507 100%);

  border: 2px solid #ffca4e;

  border-radius: 50%;

  font-size: 15px;
  font-weight: 700;

  box-shadow: 0 0 7px rgba(255, 255, 255, 0.6),
    0 0 17px rgba(255, 191, 55, 0.75), 0 0 38px rgba(255, 154, 0, 0.25);
}

/* inner ring */

.roadmap-circle::after {
  content: "";

  position: absolute;
  inset: 5px;

  border: 1px solid rgba(255, 202, 78, 0.22);

  border-radius: 50%;
}

/* =========================================================
   ROADMAP TEXT
========================================================= */

.roadmap-item > div:last-child:not(.rocket-wrap) {
  padding-left: 2px;
}

.roadmap-item > div:last-child > span,
.roadmap-content > span {
  display: block;

  margin-bottom: 3px;

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

  font-size: 13px;
}

.roadmap-item h3 {
  margin: 0 0 5px;

  color: #fff;

  font-family: Arial, sans-serif;

  font-size: 20px;
  line-height: 1;

  font-weight: 700;
}

.roadmap-item p {
  max-width: 150px;

  margin: 0;

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

  font-size: 14px;
  line-height: 1.45;
}

/* =========================================================
   ACTIVE BUILD AREA
========================================================= */

/* =========================================
   MOVING ROCKET
========================================= */

.journey-roadmap {
    position: relative;
}


/* Rocket wrapper */

.moving-rocket {
    position: absolute;

    /*
     * roadmap-line যদি left:56px হয়,
     * rocket-এর center সেই line-এর উপর থাকবে।
     */
    left: 56px;
    top: 0;

    width: 80px;
    height: 150px;

    transform: translate(-50%, -50%);

    display: flex;
    align-items: center;
    justify-content: center;

    z-index: 30;

    pointer-events: none;

    transition:
        top 0.85s cubic-bezier(.22, 1, .36, 1);
}


/* =========================================
   ROCKET
========================================= */

.moving-rocket .rocket {
    position: relative;

    width: 50px;
    height: 105px;

    filter:
        drop-shadow(
            0 0 8px rgba(255, 194, 65, .9)
        )
        drop-shadow(
            0 0 20px rgba(255, 147, 0, .55)
        );
}


/* Body */

.moving-rocket .rocket-body {
    position: absolute;

    left: 9px;
    top: 0;

    width: 32px;
    height: 78px;

    background:
        linear-gradient(
            90deg,
            #4d555b 0%,
            #e6eaec 25%,
            #ffffff 48%,
            #899196 70%,
            #3c4348 100%
        );

    border-radius:
        50% 50% 20% 20% / 35% 35% 10% 10%;

    clip-path:
        polygon(
            50% 0,
            82% 27%,
            100% 80%,
            73% 94%,
            27% 94%,
            0 80%,
            18% 27%
        );
}


/* Rocket window */

.moving-rocket .rocket-window {
    position: absolute;

    left: 17px;
    top: 28px;

    width: 16px;
    height: 16px;

    z-index: 5;

    background:
        radial-gradient(
            circle at 35% 30%,
            #74a7bc,
            #06151d 65%
        );

    border: 2px solid #18242b;

    border-radius: 50%;

    box-shadow:
        0 0 0 1px #b9c1c5;
}


/* Rocket fins */

.moving-rocket .rocket-body::after {
    content: "";

    position: absolute;

    left: -7px;
    bottom: 2px;

    width: 46px;
    height: 24px;

    z-index: -1;

    background:
        linear-gradient(
            90deg,
            #b9bec1,
            #525a60,
            #e6e7e7
        );

    clip-path:
        polygon(
            15% 0,
            35% 48%,
            65% 48%,
            85% 0,
            100% 100%,
            65% 80%,
            35% 80%,
            0 100%
        );
}


/* =========================================
   FIRE
========================================= */

.moving-rocket .rocket-fire {
    position: absolute;

    left: 14px;
    top: 72px;

    width: 22px;
    height: 75px;

    z-index: -2;

    background:
        linear-gradient(
            180deg,
            #fff 0%,
            #fff8ad 10%,
            #ffd73f 27%,
            #ff9700 50%,
            #ff4c00 72%,
            transparent 100%
        );

    clip-path:
        polygon(
            50% 0,
            78% 18%,
            65% 35%,
            100% 55%,
            63% 60%,
            76% 100%,
            50% 78%,
            22% 100%,
            37% 60%,
            0 55%,
            35% 35%,
            22% 18%
        );

    filter:
        drop-shadow(
            0 10px 8px #ff9200
        );

    animation:
        aspenRocketFire .15s
        ease-in-out
        infinite alternate;
}


@keyframes aspenRocketFire {

    from {
        transform:
            scaleY(.90)
            scaleX(.92);
    }

    to {
        transform:
            scaleY(1.15)
            scaleX(1.06);
    }

}


/* =========================================
   ROCKET GLOW
========================================= */

.moving-rocket::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 180px;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 230, 145, .40),
            rgba(255, 170, 30, .18) 35%,
            transparent 70%
        );

    filter: blur(8px);

    z-index: -5;

    animation:
        rocketGlow 1.8s
        ease-in-out
        infinite;
}


@keyframes rocketGlow {

    0%,
    100% {
        opacity: .65;
    }

    50% {
        opacity: 1;
    }

}


/* =========================================
   ACTIVE ROADMAP ITEM
========================================= */

.roadmap-item {
    transition:
        background .4s ease,
        border-color .4s ease,
        opacity .4s ease;
}


.roadmap-item.active {

    background:
        linear-gradient(
            90deg,
            rgba(246, 189, 74, .02),
            rgba(246, 189, 74, .13),
            rgba(246, 189, 74, .03)
        );

    border-top:
        1px solid rgba(246, 189, 74, .30);

    border-bottom:
        1px solid rgba(246, 189, 74, .30);
}


/* active stage number */

.roadmap-item.active
.roadmap-content > span {

    color: #f6bd4a;
}


/* active title */

.roadmap-item.active
.roadmap-content h3 {

    color: #f6bd4a;

    text-shadow:
        0 0 15px
        rgba(246, 189, 74, .30);
}


/* =========================================
   YOU ARE HERE
========================================= */

.you-are-here {
    display: none;

    width: max-content;

    margin-top: 12px;

    padding:
        9px 14px;

    color: #111;

    background:
        linear-gradient(
            135deg,
            #ffe789,
            #f6b337
        );

    border-radius: 6px;

    font-size: 12px;

    font-weight: 700;

    box-shadow:
        0 7px 20px
        rgba(246, 179, 55, .25);
}


.roadmap-item.active
.you-are-here {

    display: inline-flex;
}


/* =========================================
   ACTIVE CIRCLE
========================================= */

.roadmap-item.active
.roadmap-circle {

    border-color: #ffe078;

    color: #ffd25d;

    box-shadow:
        0 0 8px #fff0a8,
        0 0 20px rgba(255, 193, 56, .85),
        0 0 40px rgba(255, 151, 0, .35);
}
/* =========================================================
   YOU ARE HERE
========================================================= */

.you-are-here {
  display: inline-flex;

  margin-top: 12px;
  padding: 9px 14px;

  color: #15100a;

  background: linear-gradient(135deg, #ffe891, #f4ad32);

  border-radius: 6px;

  font-size: 12px;
  font-weight: 700;

  box-shadow: 0 8px 25px rgba(246, 177, 49, 0.25);
}

/* =========================================================
   ROCKET
========================================================= */

.rocket-wrap {
  position: relative;

  width: 112px;
  height: 220px;

  display: flex;
  align-items: center;
  justify-content: center;

  z-index: 10;
}

/* large rocket glow */

.rocket-wrap::before {
  content: "";

  position: absolute;

  width: 100px;
  height: 190px;

  border-radius: 50%;

  background: radial-gradient(
    ellipse,
    rgba(255, 237, 163, 0.45) 0%,
    rgba(255, 181, 39, 0.22) 30%,
    rgba(255, 129, 0, 0.06) 55%,
    transparent 75%
  );

  filter: blur(5px);

  animation: aspenRocketGlow 2s ease-in-out infinite;
}

@keyframes aspenRocketGlow {
  0%,
  100% {
    opacity: 0.75;
    transform: scale(0.95);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }
}

/* Rocket itself */

.rocket {
  position: relative;

  width: 55px;
  height: 120px;

  z-index: 5;

  filter: drop-shadow(0 0 10px rgba(255, 192, 60, 0.8));
}

/* main rocket body */

.rocket-body {
  position: absolute;

  left: 11px;
  top: 5px;

  width: 34px;
  height: 92px;

  background: linear-gradient(
    90deg,
    #4e555b 0%,
    #e8edf0 28%,
    #777f85 50%,
    #f2f4f4 72%,
    #333a40 100%
  );

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

  border-radius: 50% 50% 22% 22% / 38% 38% 12% 12%;

  clip-path: polygon(
    50% 0,
    82% 24%,
    100% 80%,
    72% 94%,
    28% 94%,
    0 80%,
    18% 24%
  );
}

/* rocket nose highlight */

.rocket-body::before {
  content: "";

  position: absolute;

  left: 50%;
  top: 2px;

  transform: translateX(-50%);

  width: 2px;
  height: 73px;

  background: rgba(255, 255, 255, 0.35);
}

/* rocket fins */

.rocket-body::after {
  content: "";

  position: absolute;

  left: -8px;
  bottom: 4px;

  width: 48px;
  height: 25px;

  background: linear-gradient(90deg, #cfcfcf, #52585c, #ddd);

  clip-path: polygon(
    15% 0,
    35% 50%,
    65% 50%,
    85% 0,
    100% 100%,
    65% 80%,
    35% 80%,
    0 100%
  );

  z-index: -1;
}

/* window */

.rocket-window {
  position: absolute;

  z-index: 8;

  left: 19px;
  top: 33px;

  width: 18px;
  height: 18px;

  background: radial-gradient(circle at 35% 35%, #5487a1, #071722 65%);

  border: 2px solid #20292e;

  border-radius: 50%;

  box-shadow: 0 0 0 1px #b7b9b8, inset 0 0 7px #000;
}

/* =========================================================
   ROCKET FIRE
========================================================= */

.rocket-fire {
  position: absolute;

  left: 16px;
  top: 91px;

  width: 25px;
  height: 105px;

  z-index: -2;

  background: linear-gradient(
    180deg,
    #ffffff 0%,
    #fff9b4 10%,
    #ffd646 25%,
    #ff9500 48%,
    #ff4b00 68%,
    transparent 100%
  );

  clip-path: polygon(
    50% 0,
    82% 15%,
    67% 35%,
    100% 55%,
    62% 60%,
    78% 100%,
    50% 76%,
    20% 100%,
    36% 60%,
    0 55%,
    33% 35%,
    18% 15%
  );

  filter: drop-shadow(0 10px 9px #ff9200);

  animation: aspenRocketFire 0.16s ease-in-out infinite alternate;
}

@keyframes aspenRocketFire {
  from {
    transform: scaleY(0.92) scaleX(0.9);

    opacity: 0.85;
  }

  to {
    transform: scaleY(1.1) scaleX(1.05);

    opacity: 1;
  }
}

/* extra exhaust */

.rocket::after {
  content: "";

  position: absolute;

  left: 5px;
  top: 115px;

  width: 48px;
  height: 90px;

  background: radial-gradient(
    ellipse at top,
    rgba(255, 255, 255, 0.9),
    rgba(255, 205, 66, 0.65) 20%,
    rgba(255, 120, 0, 0.25) 48%,
    transparent 72%
  );

  filter: blur(9px);

  z-index: -4;
}

/* =========================================================
   FORM PANEL
========================================================= */

.journey-form-panel {
  position: relative;

  padding: 30px;

  background: linear-gradient(
    145deg,
    rgba(13, 20, 24, 0.97),
    rgba(3, 9, 13, 0.98)
  );

  border: 1px solid rgba(245, 189, 79, 0.75);

  border-radius: 20px;

  box-shadow: 0 30px 100px rgba(0, 0, 0, 0.55),
    inset 0 1px rgba(255, 255, 255, 0.04);
}

/* =========================================================
   STAGE HEADER
========================================================= */

.stage-header {
  display: flex;
  align-items: center;

  gap: 22px;

  padding-bottom: 22px;

  border-bottom: 1px solid rgba(245, 189, 79, 0.25);
}

.stage-header .stage-icon {
  width: 88px;
  height: 88px;

  flex: 0 0 88px;

  display: flex;
  align-items: center;
  justify-content: center;

  color: var(--aspen-gold);

  border: 1px solid var(--aspen-gold);

  border-radius: 50%;

  font-size: 38px;

  box-shadow: 0 0 25px rgba(245, 189, 79, 0.18);
}

.stage-header > div:last-child > span {
  color: var(--aspen-gold);

  font-size: 13px;
  font-weight: 700;

  letter-spacing: 3px;
}

.stage-header h2 {
  margin: 3px 0 2px;

  color: #fff;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 46px;

  line-height: 1;

  font-weight: 400;
}

.stage-header p {
  margin: 0;

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

  font-size: 16px;
}

/* =========================================================
   PROGRESS
========================================================= */

.journey-progress {
  display: flex;
  align-items: center;

  padding: 20px 10px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.progress-step {
  display: flex;
  align-items: center;

  gap: 10px;

  color: #a5aaae;
}

.progress-step > span {
  width: 40px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid #7b8186;

  border-radius: 50%;
}

.progress-step strong {
  font-size: 13px;
  font-weight: 500;
}

.progress-step.active {
  color: var(--aspen-gold);
}

.progress-step.active > span {
  color: #111;

  background: linear-gradient(135deg, #ffe68e, #f3ac30);

  border-color: var(--aspen-gold);

  box-shadow: 0 0 18px rgba(245, 189, 79, 0.25);
}

.progress-step.completed > span {
  color: #111;

  background: var(--aspen-gold);

  border-color: var(--aspen-gold);
}

.journey-progress > i {
  flex: 1;

  height: 1px;

  margin: 0 18px;

  background: rgba(255, 255, 255, 0.2);
}

/* =========================================================
   FORM STEP
========================================================= */

.form-step {
  display: none;

  animation: aspenFormIn 0.35s ease;
}

.form-step.active {
  display: block;
}

@keyframes aspenFormIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }

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

/* =========================================================
   QUESTIONS
========================================================= */

.form-question {
  padding: 23px 8px;

  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.form-question > h3 {
  margin: 0 0 16px;

  color: #fff;

  font-size: 14px;

  font-weight: 500;
}

.form-question h3 em,
.field-box label em {
  color: #ef4444;

  font-style: normal;
}

.form-question h3 small {
  color: #92989d;

  font-weight: 400;
}

/* =========================================================
   BUSINESS OPTIONS
========================================================= */

.business-options {
  display: grid;

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

  gap: 9px;
}

.business-options input {
  display: none;
}

.business-options label {
  cursor: pointer;
}

.business-options label > span {
  min-height: 88px;

  padding: 12px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  color: #ddd;

  background: #0b141a;

  border: 1px solid #394249;

  border-radius: 7px;

  font-size: 12px;

  transition: 0.25s;
}

.business-options b {
  color: var(--aspen-gold);

  font-size: 28px;
}

.business-options input:checked + span {
  color: #fff;

  border-color: var(--aspen-gold);

  background: linear-gradient(
    135deg,
    rgba(245, 189, 79, 0.18),
    rgba(245, 189, 79, 0.03)
  );

  box-shadow: inset 0 0 20px rgba(245, 189, 79, 0.05),
    0 0 18px rgba(245, 189, 79, 0.08);
}

/* =========================================================
   STAGE OPTIONS
========================================================= */

.stage-options {
  display: flex;
  flex-wrap: wrap;

  gap: 7px;
}

.stage-options input {
  display: none;
}

.stage-options span {
  display: block;

  padding: 13px 14px;

  cursor: pointer;

  color: #c6cace;

  background: #0b141a;

  border: 1px solid #394249;

  border-radius: 6px;

  font-size: 11px;
}

.stage-options input:checked + span {
  color: #111;

  border-color: var(--aspen-gold);

  background: linear-gradient(135deg, #ffe38a, #f2ae35);
}

/* =========================================================
   SUPPORT CHECKBOXES
========================================================= */

.support-grid {
  display: grid;

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

  gap: 13px 45px;
}

.support-grid label {
  display: flex;
  align-items: center;

  gap: 10px;

  cursor: pointer;

  color: #ddd;

  font-size: 13px;
}

.support-grid input {
  display: none;
}

.support-grid label > span {
  width: 20px;
  height: 20px;

  position: relative;

  flex: 0 0 20px;

  border: 1px solid #b4b8bb;

  border-radius: 4px;
}

.support-grid input:checked + span {
  background: var(--aspen-gold);

  border-color: var(--aspen-gold);
}

.support-grid input:checked + span::after {
  content: "✓";

  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #111;

  font-size: 12px;
  font-weight: 800;
}

/* =========================================================
   MESSAGE
========================================================= */

.message-switch {
  display: flex;
}

.message-switch button {
  min-height: 44px;

  padding: 0 22px;

  cursor: pointer;

  color: #ddd;

  background: #0d161d;

  border: 1px solid #3b444a;
}

.message-switch button.active {
  color: #111;

  border-color: var(--aspen-gold);

  background: linear-gradient(135deg, #ffe38b, #f5b139);
}

.message-content {
  display: none;

  position: relative;
}

.message-content.active {
    display: block;
    margin-top: 10px;
}

.message-content textarea,
.field-box textarea {
    width: 100%;
    min-height: 120px;
    padding: 15px;
    color: #eee;
    outline: none;
    resize: vertical;
    background: #0c151c;
    border: 1px solid #3a444b;
    border-radius: 0 7px 7px 7px;
    margin-top: 10px;
}

.character-counter {
  position: absolute;

  right: 12px;
  bottom: 10px;

  color: #90969b;
}

/* =========================================================
   AUDIO
========================================================= */

.audio-recorder {
  min-height: 95px;

  padding: 15px;

  display: flex;
  align-items: center;

  gap: 15px;

  background: #0b141a;

  border: 1px solid #3b444b;

  border-radius: 7px;
}

.record-audio {
  width: 55px;
  height: 55px;

  flex: 0 0 55px;

  cursor: pointer;

  color: #111;

  background: var(--aspen-gold);

  border: none;

  border-radius: 50%;

  font-size: 22px;
}

.audio-recorder > div {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.audio-recorder small {
  color: #92989d;
}

.audio-recorder time {
  margin-left: auto;
}

/* =========================================================
   UPLOAD
========================================================= */

.journey-upload {
  min-height: 90px;

  padding: 16px 18px;

  display: flex;
  align-items: center;

  gap: 18px;

  cursor: pointer;

  border: 1px dashed #6c747a;

  border-radius: 7px;
}

.journey-upload:hover {
  border-color: var(--aspen-gold);
}

.journey-upload input {
  display: none;
}

.journey-upload > b {
  color: #aeb5ba;

  font-size: 35px;
}

.journey-upload > span {
  display: flex;
  flex-direction: column;

  gap: 4px;
}

.journey-upload strong {
  color: #d6d8da;

  font-size: 12px;

  font-weight: 400;
}

.journey-upload small {
  color: #898f94;
}

.journey-upload > i {
  width: 30px;
  height: 30px;

  margin-left: auto;

  display: flex;
  align-items: center;
  justify-content: center;

  color: #ddd;

  border: 1px solid #7d858b;

  border-radius: 5px;

  font-style: normal;
}

/* =========================================================
   STEP 2 / STEP 3
========================================================= */

.step-title {
  padding: 22px 8px;
}

.step-title h3 {
  margin: 0 0 5px;

  color: #fff;

  font-family: Georgia, "Times New Roman", serif;

  font-size: 29px;
}

.step-title p {
  max-width: 700px;

  margin: 0;

  color: #aeb4b9;

  line-height: 1.5;
}

.field-grid {
  display: grid;

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

  gap: 10px;
}

.field-box,
.contact-block {
  padding: 16px;

  background: rgba(12, 21, 28, 0.8);

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

  border-radius: 8px;
}

.field-box label {
  display: block;

  margin-bottom: 9px;

  color: #e6e6e6;

  font-size: 12px;
}

.field-box input,
.field-box select {
  width: 100%;
  height: 48px;

  padding: 0 13px;

  color: #eee;

  outline: none;

  background: #101920;

  border: 1px solid #3a444b;

  border-radius: 6px;
}

.field-box select option {
  color: #fff;
  background: #101920;
}

.field-full {
  margin-top: 10px;
}

.contact-block {
  margin-bottom: 12px;
}

.contact-block h4 {
  margin: 0 0 15px;

  color: #fff;
}

/* =========================================================
   BUTTONS
========================================================= */

.form-buttons {
  padding-top: 23px;

  display: flex;

  justify-content: space-between;

  gap: 20px;
}

.journey-back,
.journey-next {
  min-height: 58px;

  min-width: 230px;

  padding: 12px 25px;

  cursor: pointer;

  border-radius: 7px;

  font-size: 14px;

  font-weight: 600;
}

.journey-back {
  color: var(--aspen-gold);

  background: transparent;

  border: 1px solid var(--aspen-gold);
}

.journey-next {
  margin-left: auto;

  color: #111;

  background: linear-gradient(135deg, #ffe58c, #f4ae33);

  border: 1px solid var(--aspen-gold);

  box-shadow: 0 10px 25px rgba(245, 189, 79, 0.14);
}

.journey-next:hover {
  transform: translateY(-2px);

  box-shadow: 0 14px 30px rgba(245, 189, 79, 0.25);
}

.journey-privacy {
  color: #979da2;

  font-size: 11px;

  text-align: right;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {
  .journey-layout {
    grid-template-columns: 220px minmax(0, 1fr);

    gap: 30px;
  }

  .roadmap-item {
    grid-template-columns: 100px 1fr;
  }

  .roadmap-item h3 {
    font-size: 17px;
  }

  .roadmap-item p {
    font-size: 12px;
  }

  .business-options {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {
  .aspen-journey-page {
    padding: 30px 0 50px;
  }

  .journey-layout {
    width: calc(100% - 24px);

    display: block;
  }

  /* Heading first */

  .journey-main {
    display: flex;
    flex-direction: column;
  }

  .journey-heading {
    order: 1;
  }

  .journey-form-panel {
    order: 2;

    padding: 15px;

    border-radius: 13px;
  }

  /* Hide full roadmap on small screen */

  .journey-roadmap {
    min-height: 0;

    margin-bottom: 25px;

    padding: 0;

    display: flex;

    overflow-x: auto;

    gap: 10px;
  }

  .roadmap-line {
    display: none;
  }

  .roadmap-item {
    min-width: 130px;
    min-height: 120px;

    display: block;

    padding: 10px;

    text-align: center;

    border: 1px solid rgba(245, 189, 79, 0.15);

    border-radius: 8px;

    background: rgba(5, 12, 17, 0.75);
  }

  .roadmap-item::after {
    display: none;
  }

  .roadmap-circle {
    width: 55px;
    height: 55px;

    margin: 0 auto 10px;
  }

  .roadmap-item p {
    margin: auto;
  }

  .roadmap-build {
    min-width: 150px;
    min-height: 180px;
  }

  .rocket-wrap {
    width: 100%;
    height: 105px;
  }

  .rocket {
    transform: scale(0.65);
  }

  .roadmap-content {
    padding: 0 !important;
  }

  /* Main heading */

  .journey-heading h1 {
    font-size: 40px;

    letter-spacing: -1px;
  }

  .journey-heading .eyebrow {
    font-size: 10px;

    letter-spacing: 3px;
  }

  .journey-heading > p {
    font-size: 14px;
  }

  /* Stage header */

  .stage-header .stage-icon {
    width: 65px;
    height: 65px;

    flex-basis: 65px;

    font-size: 28px;
  }

  .stage-header h2 {
    font-size: 34px;
  }

  .stage-header p {
    font-size: 12px;
  }

  /* Progress */

  .journey-progress {
    overflow-x: auto;
  }

  .progress-step {
    flex-direction: column;

    min-width: 70px;

    text-align: center;
  }

  .progress-step strong {
    font-size: 10px;
  }

  .journey-progress > i {
    min-width: 25px;

    margin: 0 5px;
  }

  /* Form */

  .business-options,
  .field-grid {
    grid-template-columns: 1fr 1fr;
  }

  .support-grid {
    grid-template-columns: 1fr;
  }

  .stage-options {
    display: grid;

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

  .message-switch button {
    flex: 1;

    padding: 10px;

    font-size: 10px;
  }

  .form-buttons {
    flex-direction: column-reverse;
  }

  .journey-back,
  .journey-next {
    width: 100%;

    min-width: 0;

    margin: 0;
  }
}

/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
  .business-options,
  .field-grid,
  .stage-options {
    grid-template-columns: 1fr;
  }

  .journey-heading h1 {
    font-size: 34px;
  }
}

.stage-header.stage-changing .stage-icon,
.stage-header.stage-changing > div:last-child {
    animation: stageHeaderChange .45s ease;
}

@keyframes stageHeaderChange {

    0% {
        opacity: .25;
        transform: translateY(8px);
    }

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

}


/* =====================================================
   WORK SHOWCASE
===================================================== */

.work-showcase {
    --gold: #c59a3c;
    --gold-light: #e7c76d;
    --dark: #11100d;
    --text: #1a1a1a;
    --avs-gold: #d5a348;
    --avs-gold-light: #f0c66d;
    --avs-bg: #080a08;
    padding: 100px 0;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, rgba(112, 73, 19, .12), transparent 38%), linear-gradient(110deg, #060806, #0c0c08 50%, #130e07);
    font-family: Arial, Helvetica, sans-serif;
}


.work-container {
    width: min(1420px, 100%);
    margin: 0 auto;
}


/* =====================================================
   HEADING
===================================================== */

.work-heading {
    text-align: center;
    margin-bottom: 20px;
}


.work-eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 12px;

    margin-bottom: 3px;

    color: #876a2e;

    font-size: 16px;
    font-weight: 700;

    letter-spacing: .5px;
}


.work-eyebrow span {
    width: 42px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--gold)
        );
}


.work-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}


.work-heading h2 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(48px, 4.2vw, 72px);
    font-weight: 900;
    line-height: .98;
    letter-spacing: -.035em;
    text-transform: uppercase;
    width: 1040px;
    margin: 0 auto;
}


.work-heading h2 strong {
    color: var(--gold);

    font-weight: 800;
}


.work-heading p {
    margin: 7px 0 0;
    color: #fff;
    font-size: 19px;
    letter-spacing: .4px;
}


/* =====================================================
   FILTER
===================================================== */

.work-filters {
    max-width: 1080px;

    margin: 0 auto 14px;

    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 10px;
}


.work-filter {
    min-height: 38px;

    padding: 8px 12px;

    cursor: pointer;

    color: #37404a;

    background: #f3f3f3;

    border: none;

    border-radius: 10px;

    font-size: 11px;
    font-weight: 600;

    transition: .25s ease;
}


.work-filter:hover {
    background: #ebe5d7;
}


.work-filter.active {
    color: #fff;

    background:
        linear-gradient(
            135deg,
            #342912,
            #0c0b08
        );

    box-shadow:
        inset 0 0 15px rgba(198,154,60,.25);
}


/* =====================================================
   SLIDER
===================================================== */

.work-slider {
    position: relative;
}


.work-slides {
    position: relative;

    min-height: 310px;

    overflow: hidden;

    border-radius: 10px;

    box-shadow:
        0 12px 40px rgba(0,0,0,.08);
}


/* =====================================================
   SLIDE
===================================================== */

.work-slide {
    display: none;

    grid-template-columns:
        31% 69%;

    min-height: 310px;

    opacity: 0;
}


.work-slide.active {
    display: grid;

    opacity: 1;

    animation:
        workSlideIn .55s ease;
}


@keyframes workSlideIn {

    from {
        opacity: 0;
        transform: translateX(15px);
    }

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

}


/* =====================================================
   LEFT PANEL
===================================================== */

.work-info {
    min-height: 310px;

    padding: 18px 35px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            135deg,
            #fffdf8,
            #f9f3e7
        );

    text-align: center;
}


.work-logo {
    min-height: 105px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 6px;
}


.work-logo h3 {
    margin: 0;

    color: #222;

    font-size: 23px;
    line-height: .9;

    font-weight: 400;

    text-align: left;
}


.work-logo h3 strong {
    color: #177ab4;
}


/* demo AC logo */

.demo-logo {
    position: relative;

    width: 70px;
    height: 80px;
}


.demo-logo::before {
    content: "";

    position: absolute;

    width: 26px;
    height: 65px;

    left: 22px;
    top: 0;

    background: #1684bc;

    transform: skew(-27deg);
}


.demo-logo::after {
    content: "";

    position: absolute;

    width: 45px;
    height: 30px;

    right: 0;
    top: 24px;

    background: #8dc63f;

    transform: rotate(52deg) skew(-12deg);
}


.demo-logo b {
    position: absolute;

    left: 0;
    bottom: 0;

    color: #1684bc;

    font-size: 18px;
}


.text-company-logo {
    color: #b58b32;

    font-size: 24px;
    font-weight: 800;

    letter-spacing: 4px;
}


.work-description {
    max-width: 330px;

    margin: 2px auto 12px;

    color: #4c4c4c;

    font-size: 15px;

    line-height: 1.3;
}


/* =====================================================
   CASE STUDY BUTTON
===================================================== */

.case-study-btn {
    min-width: 200px;

    min-height: 38px;

    padding: 8px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    color: #1a1a1a;

    background:
        linear-gradient(
            90deg,
            #eed77b,
            #d5aa42
        );

    border-radius: 30px;

    text-decoration: none;

    font-size: 11px;
    font-weight: 800;

    transition: .25s ease;
}


.case-study-btn span {
    font-size: 18px;
}


.case-study-btn:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 20px rgba(180,139,49,.25);
}


/* =====================================================
   STATS
===================================================== */

.work-stats {
    width: 100%;

    margin-top: 16px;

    display: grid;

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


.work-stats > div {
    position: relative;

    padding: 0 8px;
}


.work-stats > div:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 5px;

    width: 1px;
    height: 37px;

    background: #d8d3c9;
}


.work-stats strong {
    display: block;

    color: #111;

    font-size: 21px;
}


.work-stats span {
    display: block;

    margin-top: 2px;

    color: #67717b;

    font-size: 11px;
}


/* =====================================================
   RIGHT IMAGE
===================================================== */

.work-visual {
    position: relative;

    min-height: 310px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background-size: cover;
    background-position: center;
}

/* 
.visual-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(7,8,8,.98) 0%,
            rgba(8,9,9,.87) 28%,
            rgba(8,8,8,.48) 55%,
            rgba(0,0,0,.05) 100%
        );
} */


.visual-content {
    position: relative;

    z-index: 2;

    width: 100%;

    padding: 25px 50px;

    color: #fff;
}


.visual-eyebrow {
    max-width: 360px;

    display: flex;
    align-items: center;

    gap: 12px;

    color: #e3bd58;

    font-size: 11px;
    font-weight: 700;
}


.visual-eyebrow span {
    width: 45px;
    height: 1px;

    background: #c39839;
}


.visual-content h3 {
    margin: 10px 0 3px;

    color: #fff;

    font-size: clamp(25px, 2.5vw, 40px);

    line-height: 1;

    font-weight: 800;
}


.visual-content > p {
    margin: 0;

    color: rgba(255,255,255,.86);

    font-size: 19px;

    line-height: 1.25;
}


/* =====================================================
   FEATURES
===================================================== */

.visual-features {
    max-width: 530px;

    margin-top: 25px;

    display: grid;

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


.visual-features > div {
    position: relative;

    padding: 0 14px;

    text-align: center;
}


.visual-features > div:first-child {
    padding-left: 0;
}


.visual-features > div:not(:last-child)::after {
    content: "";

    position: absolute;

    right: 0;
    top: 5px;

    width: 1px;
    height: 65px;

    background:
        rgba(255,255,255,.16);
}


.feature-icon {
    min-height: 37px;

    display: block;

    color: #e3b947;

    font-size: 32px;

    line-height: 1;
}


.visual-features b {
    display: block;

    margin-top: 7px;

    color: #fff;

    font-size: 11px;
    line-height: 1.1;

    font-weight: 500;
}


/* =====================================================
   ARROWS
===================================================== */

.work-arrow {
    position: absolute;

    z-index: 20;

    top: 50%;

    width: 48px;
    height: 48px;

    transform: translateY(-50%);

    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;

    color: #111;

    background: #fff;

    border: none;

    border-radius: 50%;

    box-shadow:
        0 4px 20px rgba(0,0,0,.12);

    font-size: 35px;

    line-height: 1;

    transition: .2s ease;
}


.work-arrow:hover {
    color: #b88927;

    transform:
        translateY(-50%)
        scale(1.06);
}


.work-prev {
    left: -25px;
}


.work-next {
    right: -25px;
}


/* =====================================================
   DOTS
===================================================== */

.work-dots {
    margin-top: 14px;

    display: flex;
    justify-content: center;

    gap: 10px;
}


.work-dot {
    width: 13px;
    height: 13px;

    padding: 0;

    cursor: pointer;

    background: #ddd;

    border: none;

    border-radius: 50%;

    transition: .25s ease;
}


.work-dot.active {
    background:
        linear-gradient(
            135deg,
            #e0bd62,
            #9c6e10
        );

    transform: scale(1.15);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1050px) {

    .work-filters {
        display: flex;
        overflow-x: auto;
    }

    .work-filter {
        min-width: 140px;
    }

    .work-slide {
        grid-template-columns:
            38% 62%;
    }

    .visual-content {
        padding: 25px 30px;
    }

    .visual-content > p {
        font-size: 16px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .work-showcase {
        padding:
            35px 15px 45px;
    }

    .work-heading h2 {
        font-size: 36px;
    }

    .work-heading p {
        font-size: 15px;
    }

    .work-eyebrow {
        font-size: 12px;
    }


    .work-slide.active {
        display: block;
    }


    .work-info {
        min-height: auto;

        padding: 30px 20px;
    }


    .work-visual {
        min-height: 400px;
    }


    .visual-content {
        padding: 30px 22px;
    }


    .visual-content h3 {
        font-size: 29px;
    }


    .visual-content > p {
        font-size: 15px;
    }


    .visual-features {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 25px 0;
    }


    .visual-features > div:nth-child(2)::after {
        display: none;
    }


    .work-prev {
        left: -10px;
    }


    .work-next {
        right: -10px;
    }


    .work-arrow {
        width: 42px;
        height: 42px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 480px) {

    .work-heading h2 {
        font-size: 31px;
    }


    .work-stats strong {
        font-size: 17px;
    }


    .work-stats span {
        font-size: 9px;
    }


    .visual-features {
        grid-template-columns:
            1fr 1fr;
    }

}

/* =====================================================
   ASPEN - JUST START SECTION
===================================================== */

.aspen-start-section {
    --aspen-gold: #b38a32;
    --aspen-gold-light: #d5ad52;
    --aspen-black: #070707;
    width: 100%;
    min-height: 540px;
    display: grid;
    grid-template-columns: 53% 47%;
    overflow: hidden;
    padding: 50px 0px;
    background: radial-gradient(circle at 50% 20%, rgba(112, 73, 19, .12), transparent 38%), linear-gradient(110deg, #060806, #0c0c08 50%, #130e07);
    font-family: Arial, Helvetica, sans-serif;
}


/* =====================================================
   LEFT CONTENT
===================================================== */

.aspen-start-content {
    position: relative;
    z-index: 5;
    min-height: 540px;
    display: flex;
    align-items: center;
    justify-content: center;
}


/*
 * Creates the diagonal edge
 * exactly between content/image.
 */

.aspen-start-content::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    right: -105px;
    width: 210px;
    height: 100%;
    transform: skewX(-10deg);
    transform-origin: top;
}


.aspen-start-inner {
    width: min(600px, 82%);

    margin-left: auto;
    margin-right: 70px;

    text-align: center;
}


/* =====================================================
   EYEBROW
===================================================== */

.aspen-start-eyebrow {
    color: var(--aspen-gold);

    font-size: 20px;
    line-height: 1.2;

    font-weight: 700;

    letter-spacing: -.2px;
}


/* decorative gold lines */

.aspen-start-lines {
    height: 30px;

    margin: 7px 0 3px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 7px;
}


.aspen-start-lines::before,
.aspen-start-lines::after {
    content: "";

    width: 40px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(179, 138, 50, .35)
        );
}


.aspen-start-lines::after {
    background:
        linear-gradient(
            90deg,
            rgba(179, 138, 50, .35),
            transparent
        );
}


.aspen-start-lines span {
    display: block;

    width: 17px;
    height: 2px;

    background: var(--aspen-gold);

    border-radius: 5px;
}


/* =====================================================
   TITLE
===================================================== */

.aspen-start-title {
    margin: 0;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(55px, 5.2vw, 83px);
    line-height: .95;
    font-weight: 900;
    letter-spacing: -4px;
}


.aspen-start-title span {
    color: var(--aspen-gold);

    background:
        linear-gradient(
            90deg,
            #85621e,
            #c89c3e,
            #987225
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


/* =====================================================
   DESCRIPTION
===================================================== */

.aspen-start-description {
    max-width: 560px;
    margin: 27px auto 32px;
    color: #fff;
    font-size: 24px;
    line-height: 1.45;
    font-weight: 400;
    letter-spacing: -.3px;
}


/* =====================================================
   BUTTON
===================================================== */

.aspen-start-btn {
    width: 305px;
    max-width: 100%;

    min-height: 68px;

    padding: 0 32px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 35px;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #15130e,
            #050504
        );

    border:
        2px solid
        var(--aspen-gold);

    border-radius: 4px;

    text-decoration: none;

    box-shadow:
        0 5px 15px
        rgba(0, 0, 0, .12);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        background .25s ease;
}


.aspen-start-btn span {
    font-size: 17px;

    font-weight: 800;

    letter-spacing: .2px;
}


.aspen-start-btn i {
    color: var(--aspen-gold-light);

    font-size: 28px;

    line-height: 1;

    font-style: normal;

    transition: transform .25s ease;
}


.aspen-start-btn:hover {
    color: #fff;

    transform: translateY(-3px);

    background:
        linear-gradient(
            135deg,
            #211b0e,
            #080705
        );

    box-shadow:
        0 12px 30px
        rgba(0, 0, 0, .18);
}


.aspen-start-btn:hover i {
    transform: translateX(6px);
}


/* =====================================================
   RIGHT IMAGE
===================================================== */

.aspen-start-visual {
    position: relative;

    min-height: 540px;

    overflow: hidden;

    background: #111;
}


.aspen-start-visual img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1.2s
        cubic-bezier(.2,.6,.3,1);
}


/* subtle cinematic overlay */

.aspen-start-visual::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.10),
            transparent 25%,
            transparent 75%,
            rgba(0,0,0,.08)
        );
}


.aspen-start-section:hover
.aspen-start-visual img {
    transform: scale(1.025);
}


/* =====================================================
   SUBTLE LEFT BACKGROUND SHAPES
===================================================== */

.aspen-start-content::before {
    content: "";

    position: absolute;

    left: -90px;
    bottom: -130px;

    width: 330px;
    height: 330px;

    transform: rotate(45deg);

    background:
        linear-gradient(
            135deg,
            rgba(201, 164, 88, .10),
            rgba(201, 164, 88, .01)
        );

    pointer-events: none;
}


/* =====================================================
   LAPTOP
===================================================== */

@media (max-width: 1200px) {

    .aspen-start-section {
        grid-template-columns:
            52% 48%;
    }


    .aspen-start-inner {
        width: 85%;

        margin-right: 35px;
    }


    .aspen-start-description {
        font-size: 20px;
    }


    .aspen-start-content::after {
        right: -75px;

        width: 150px;
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .aspen-start-section {
        grid-template-columns:
            1fr;

        min-height: auto;
    }


    .aspen-start-content {
        min-height: auto;

        padding: 70px 25px;
    }


    .aspen-start-content::after {
        display: none;
    }


    .aspen-start-inner {
        width: min(650px, 100%);

        margin: 0 auto;
    }


    .aspen-start-title {
        font-size: 65px;
    }


    .aspen-start-description {
        max-width: 600px;

        font-size: 20px;
    }


    .aspen-start-visual {
        min-height: 500px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .aspen-start-content {
        padding:
            55px 20px 60px;
    }


    .aspen-start-eyebrow {
        font-size: 16px;
    }


    .aspen-start-title {
        font-size: 47px;

        letter-spacing: -2px;
    }


    .aspen-start-description {
        margin:
            22px auto 27px;

        font-size: 17px;

        line-height: 1.5;
    }


    .aspen-start-btn {
        width: 250px;

        min-height: 60px;

        gap: 25px;
    }


    .aspen-start-btn span {
        font-size: 15px;
    }


    .aspen-start-visual {
        min-height: 380px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 400px) {

    .aspen-start-title {
        font-size: 40px;
    }


    .aspen-start-description {
        font-size: 16px;
    }


    .aspen-start-visual {
        min-height: 320px;
    }

}

/* =====================================================
   ASPEN LEGACY CTA
===================================================== */

.aspen-legacy-cta {
    --gold: #d5a442;
    --gold-light: #f0c56a;
    --black: #050504;

    position: relative;

    width: 100%;
    min-height: 790px;

    display: flex;
    align-items: center;
    justify-content: center;

    overflow: hidden;

    background: #050504;

    isolation: isolate;
    padding: 50px 0px;
}


/* =====================================================
   BACKGROUND
===================================================== */

.legacy-bg {
    position: absolute;

    inset: 0;

    z-index: -5;

    background-image:
        url("../images/aspen-legacy-mountain.jpg");

    background-repeat: no-repeat;

    background-size: cover;

    background-position: center right;

    transform: scale(1.01);

    transition:
        transform 2s
        cubic-bezier(.2,.6,.3,1);
}


/* =====================================================
   DARK OVERLAY
===================================================== */

.legacy-overlay {
    position: absolute;

    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            90deg,

            rgba(3,3,2,.97) 0%,

            rgba(4,4,3,.90) 25%,

            rgba(5,5,4,.74) 48%,

            rgba(5,5,4,.37) 72%,

            rgba(3,3,2,.20) 100%
        );
}


/* bottom cinematic fade */

.legacy-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,

            rgba(0,0,0,.08) 0%,

            transparent 35%,

            rgba(0,0,0,.30) 75%,

            rgba(0,0,0,.82) 100%
        );
}


/* =====================================================
   LION WATERMARK
===================================================== */

.legacy-lion {
    position: absolute;

    z-index: -2;

    left: -30px;

    top: 50%;

    width: 440px;

    transform: translateY(-50%);

    opacity: .11;

    pointer-events: none;
}


.legacy-lion img {
    display: block;

    width: 100%;
    height: auto;

    filter:
        sepia(1)
        saturate(.65)
        brightness(.65);
}


/* =====================================================
   CONTENT
===================================================== */

.legacy-container {
    position: relative;

    z-index: 5;

    width: min(1000px, 90%);

    margin: 0 auto;

    text-align: center;

    transform: translateY(-5px);
}


/* =====================================================
   EYEBROW
===================================================== */

.legacy-eyebrow {
    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 8px;

    color: var(--gold-light);

    text-transform: uppercase;

    letter-spacing: 7px;
}


.legacy-eyebrow span,
.legacy-eyebrow strong {
    display: block;

    font-size: 17px;

    line-height: 1.2;

    font-weight: 500;
}


.legacy-eyebrow strong {
    font-weight: 500;
}


/* =====================================================
   DIVIDER
===================================================== */

.legacy-divider {
    margin: 28px auto 35px;

    display: flex;

    justify-content: center;

    align-items: center;

    gap: 14px;
}


.legacy-divider i {
    display: block;

    width: 120px;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(218,169,68,.8)
        );
}


.legacy-divider i:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(218,169,68,.8),
            transparent
        );
}


.legacy-divider b {
    display: block;

    width: 14px;
    height: 14px;

    background:
        linear-gradient(
            135deg,
            #f2cc72,
            #ad7422
        );

    transform: rotate(45deg);

    box-shadow:
        0 0 15px
        rgba(222,171,64,.35);
}


/* =====================================================
   HEADING
===================================================== */

.legacy-title {
    margin: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

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

    font-size:
        clamp(50px, 5.5vw, 83px);

    line-height: 1.02;

    font-weight: 900;

    letter-spacing: -2px;

    text-transform: uppercase;
}


.legacy-title > span {
    display: block;
}


.legacy-white {
    color: #fff;

    text-shadow:
        0 3px 18px
        rgba(0,0,0,.35);
}


.legacy-gold {
    margin-top: 5px;

    background:
        linear-gradient(
            90deg,

            #9c671e 0%,

            #e1ad47 25%,

            #f2c66c 50%,

            #d49631 75%,

            #95601c 100%
        );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(
            0 3px 10px
            rgba(0,0,0,.3)
        );
}


/* =====================================================
   DESCRIPTION
===================================================== */

.legacy-description {
    margin:
        30px auto 32px;

    max-width: 760px;

    color:
        rgba(255,255,255,.92);

    font-size: 25px;

    line-height: 1.35;

    font-weight: 400;

    letter-spacing: -.3px;

    text-shadow:
        0 2px 10px
        rgba(0,0,0,.55);
}


/* =====================================================
   CTA BUTTON
===================================================== */

.legacy-button {
    width: 325px;

    max-width: 100%;

    min-height: 68px;

    padding: 0 30px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 35px;

    color: var(--gold-light);

    background:
        rgba(5,5,4,.50);

    border:
        2px solid
        var(--gold-light);

    border-radius: 2px;

    text-decoration: none;

    box-shadow:
        inset 0 0 20px
        rgba(213,164,66,.03),

        0 0 15px
        rgba(0,0,0,.3);

    backdrop-filter: blur(3px);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.legacy-button span {
    font-size: 18px;

    font-weight: 800;

    letter-spacing: .3px;
}


.legacy-button i {
    color: var(--gold);

    font-size: 27px;

    font-style: normal;

    line-height: 1;

    transition:
        transform .3s ease;
}


.legacy-button:hover {
    color: #080705;

    background:
        linear-gradient(
            135deg,
            #f0c86d,
            #b67c25
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 35px
        rgba(197,145,45,.25);
}


.legacy-button:hover i {
    color: #080705;

    transform:
        translateX(7px);
}


/* =====================================================
   HOVER BACKGROUND
===================================================== */

.aspen-legacy-cta:hover
.legacy-bg {
    transform: scale(1.035);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 991px) {

    .aspen-legacy-cta {
        min-height: 680px;
    }


    .legacy-bg {
        background-position:
            65% center;
    }


    .legacy-lion {
        width: 330px;

        left: -70px;
    }


    .legacy-title {
        font-size:
            clamp(45px, 7vw, 65px);
    }


    .legacy-description {
        font-size: 21px;
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 767px) {

    .aspen-legacy-cta {
        min-height: 620px;

        padding:
            70px 18px;
    }


    .legacy-container {
        width: 100%;
    }


    .legacy-bg {
        background-position:
            68% center;
    }


    .legacy-overlay {
        background:
            rgba(3,3,2,.68);
    }


    .legacy-lion {
        width: 260px;

        left: -100px;

        opacity: .08;
    }


    .legacy-eyebrow {
        letter-spacing: 4px;
    }


    .legacy-eyebrow span,
    .legacy-eyebrow strong {
        font-size: 12px;
    }


    .legacy-divider {
        margin:
            22px auto 27px;
    }


    .legacy-divider i {
        width: 70px;
    }


    .legacy-title {
        font-size:
            clamp(38px, 10vw, 52px);

        letter-spacing: -1px;
    }


    .legacy-description {
        margin:
            25px auto 30px;

        font-size: 18px;
    }


    .legacy-description br {
        display: none;
    }


    .legacy-button {
        width: 270px;

        min-height: 61px;
    }


    .legacy-button span {
        font-size: 15px;
    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 420px) {

    .aspen-legacy-cta {
        min-height: 570px;
    }


    .legacy-title {
        font-size: 37px;
    }


    .legacy-description {
        font-size: 16px;
    }


    .legacy-button {
        width: 240px;
    }

}

/* =========================================================
   ASPEN DNA CTA
========================================================= */

.aspen-dna-cta {
    --dna-gold: #d9a84e;
    --dna-light-gold: #f0ca76;
    width: 100%;
    min-height: 510px;
    display: flex;
    align-items: center;
    overflow: hidden;
    background: #050604;
    padding: 150px 0px;
}


/* =========================================================
   BACKGROUND
========================================================= */

.dna-bg {
    position: absolute;
    inset: 0;
    z-index: -5;

    background-image:
        url("../images/aspen-dna-background.jpg");

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center right;

    transition:
        transform 1.8s cubic-bezier(.2,.6,.3,1);
}


/* =========================================================
   OVERLAY
========================================================= */

.dna-overlay {
    position: absolute;
    inset: 0;
    z-index: -4;

    background:
        linear-gradient(
            90deg,
            rgba(2,4,3,.98) 0%,
            rgba(2,4,3,.96) 17%,
            rgba(3,5,4,.90) 31%,
            rgba(4,5,4,.72) 43%,
            rgba(4,4,3,.28) 62%,
            rgba(0,0,0,.05) 100%
        );
}


.dna-overlay::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.10) 0%,
            transparent 45%,
            rgba(0,0,0,.18) 100%
        );
}


/* =========================================================
   LION WATERMARK
========================================================= */

.dna-lion {
    position: absolute;

    z-index: -2;

    top: 50%;
    left: -65px;

    width: 310px;

    transform: translateY(-50%);

    opacity: .11;

    pointer-events: none;
}


.dna-lion img {
    width: 100%;
    height: auto;

    display: block;

    filter:
        sepia(1)
        saturate(.8)
        brightness(.7);
}


/* =========================================================
   CONTAINER
========================================================= */

.dna-container {
    position: relative;

    z-index: 5;

    width: min(1120px, calc(100% - 40px));

    margin: 0 auto;
}


/* =========================================================
   CONTENT
========================================================= */

.dna-content {
    width: 650px;
    max-width: 60%;
}


/* =========================================================
   KICKER
========================================================= */

.dna-kicker {
    margin-bottom: 17px;

    display: flex;
    align-items: center;

    gap: 18px;
}


.dna-kicker span {
    color: #d6b16a;

    font-size: 21px;
    font-weight: 400;

    letter-spacing: .2px;
}


.dna-kicker i {
    display: block;

    width: 130px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--dna-gold),
            rgba(217,168,78,.1)
        );
}


/* =========================================================
   TITLE
========================================================= */

.dna-title {
    margin: 0;

    display: flex;
    flex-direction: column;

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

    font-size: clamp(42px, 4vw, 61px);

    line-height: .98;

    font-weight: 900;

    letter-spacing: -2px;

    text-transform: uppercase;
}


.dna-title span {
    display: block;
}


.dna-white {
    color: #fff;

    text-shadow:
        0 3px 20px
        rgba(0,0,0,.45);
}


.dna-gold {
    margin-top: 7px;

    background:
        linear-gradient(
            90deg,
            #9b661d 0%,
            #e5ae4d 30%,
            #f2c66c 52%,
            #ca8c2e 78%,
            #9c651e 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(
            0 3px 12px
            rgba(0,0,0,.35)
        );
}


/* =========================================================
   DESCRIPTION
========================================================= */

.dna-description {
    margin-top: 22px;
}


.dna-description p {
    margin: 0;

    color: rgba(255,255,255,.90);

    font-size: 22px;
    line-height: 1.45;

    font-weight: 400;
}


.dna-description strong {
    display: block;

    margin-top: 1px;

    color: #e3ad50;

    font-size: 22px;
    line-height: 1.4;

    font-weight: 700;
}


/* =========================================================
   BUTTON
========================================================= */

.dna-button {
    width: 305px;
    max-width: 100%;

    min-height: 58px;

    margin-top: 20px;

    padding: 0 28px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 20px;

    color: var(--dna-light-gold);

    background:
        rgba(5,6,4,.38);

    border:
        2px solid var(--dna-light-gold);

    text-decoration: none;

    box-shadow:
        inset 0 0 20px
        rgba(215,167,73,.025);

    backdrop-filter: blur(2px);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.dna-button span {
    font-size: 18px;

    font-weight: 800;

    letter-spacing: .2px;
}


.dna-button i {
    color: var(--dna-gold);

    font-size: 23px;
    line-height: 1;

    font-style: normal;

    transition:
        transform .3s ease;
}


/* BUTTON HOVER */

.dna-button:hover {
    color: #080705;

    background:
        linear-gradient(
            135deg,
            #efc76d,
            #b87d27
        );

    transform: translateY(-3px);

    box-shadow:
        0 12px 35px
        rgba(204,150,47,.20);
}


.dna-button:hover i {
    color: #080705;

    transform: translateX(7px);
}


/* =========================================================
   BACKGROUND HOVER
========================================================= */

.aspen-dna-cta:hover .dna-bg {
    transform: scale(1.025);
}


/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width: 1400px) {

    .dna-container {
        width: 1120px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .aspen-dna-cta {
        min-height: 500px;
    }


    .dna-bg {
        background-position: 62% center;
    }


    .dna-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,4,3,.98) 0%,
                rgba(2,4,3,.94) 30%,
                rgba(2,4,3,.74) 55%,
                rgba(0,0,0,.25) 100%
            );
    }


    .dna-content {
        max-width: 70%;
    }


    .dna-title {
        font-size: 45px;
    }


    .dna-description p,
    .dna-description strong {
        font-size: 19px;
    }


    .dna-lion {
        width: 250px;
        left: -80px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .aspen-dna-cta {
        min-height: 580px;

        padding:
            65px 0;
    }


    .dna-bg {
        background-position:
            65% center;
    }


    .dna-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(2,3,2,.94),
                rgba(2,3,2,.72)
            );
    }


    .dna-container {
        width:
            calc(100% - 40px);
    }


    .dna-content {
        width: 100%;
        max-width: 100%;

        text-align: center;
    }


    .dna-kicker {
        justify-content: center;
    }


    .dna-kicker span {
        font-size: 17px;
    }


    .dna-kicker i {
        width: 80px;
    }


    .dna-title {
        font-size:
            clamp(36px, 10vw, 48px);

        line-height: 1.03;

        letter-spacing: -1px;
    }


    .dna-description {
        margin-top: 25px;
    }


    .dna-description p,
    .dna-description strong {
        font-size: 17px;
    }


    .dna-button {
        width: 270px;

        min-height: 58px;

        margin-top: 27px;
    }


    .dna-button span {
        font-size: 16px;
    }


    .dna-lion {
        width: 260px;

        left: -120px;

        opacity: .07;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 430px) {

    .aspen-dna-cta {
        min-height: 540px;
    }


    .dna-title {
        font-size: 35px;
    }


    .dna-kicker i {
        width: 55px;
    }


    .dna-description p,
    .dna-description strong {
        font-size: 16px;
    }


    .dna-button {
        width: 245px;
    }

}

/* =========================================================
   ASPEN BUSINESS GROWTH SECTION
========================================================= */

.aspen-growth-section {
    --ags-gold: #d8a84d;
    --ags-light-gold: #f3ca72;
    --ags-dark: #060807;
    width: 100%;
    min-height: 540px;
    overflow: hidden;
    background: #050706;
    font-family: Arial, Helvetica, sans-serif;
    padding: 150px 0;
}


/* =========================================================
   BACKGROUND
========================================================= */

.ags-background {

    position: absolute;

    inset: 0;

    z-index: -5;

    background-image:
        url("../images/aspen-growth-journey.jpg");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center center;

    transition:
        transform 2s
        cubic-bezier(.2,.6,.3,1);
}


.aspen-growth-section:hover
.ags-background {

    transform: scale(1.015);

}


/* =========================================================
   OVERLAY
========================================================= */

.ags-overlay {

    position: absolute;

    inset: 0;

    z-index: -4;

    pointer-events: none;

    background:

        linear-gradient(
            180deg,
            rgba(2,5,6,.15) 0%,
            rgba(2,4,4,.04) 45%,
            rgba(1,3,2,.20) 100%
        ),

        linear-gradient(
            90deg,
            rgba(0,3,4,.20),
            transparent 30%,
            transparent 75%,
            rgba(0,0,0,.05)
        );
}


/* =========================================================
   CONTAINER
========================================================= */

.ags-container {

    position: relative;

    z-index: 5;

    width: min(
        1500px,
        calc(100% - 40px)
    );

    min-height: 540px;

    margin: 0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.ags-heading {

    position: absolute;

    z-index: 10;

    top: 48px;

    left: 50%;

    width: 850px;

    max-width: 62%;

    transform:
        translateX(-50%);

    text-align: center;

}


.ags-heading h2 {
    margin: 0;
    display: flex;
    flex-direction: column;
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}


.ags-heading h2 span {

    display: block;

    color: #fff;

    text-shadow:
        0 3px 15px
        rgba(0,0,0,.45);

}


.ags-heading h2 strong {

    display: block;

    margin-top: 5px;

    font-weight: 900;

    background:
        linear-gradient(
            90deg,

            #a36d22,

            #e0aa48,

            #f3c66c,

            #c9882c,

            #a66d20
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    -webkit-text-fill-color:
        transparent;

}


/* =========================================================
   SUB HEADING
========================================================= */

.ags-heading p {

    margin:
        8px 0 14px;

    color:
        rgba(255,255,255,.91);

    font-size: 19px;

    line-height: 1.4;

    font-weight: 400;

}


/* =========================================================
   BUTTON
========================================================= */

.ags-button {

    min-width: 345px;

    min-height: 52px;

    padding:
        0 30px;

    display:
        inline-flex;

    align-items: center;

    justify-content: center;

    gap: 22px;

    color:
        var(--ags-light-gold);

    background:
        rgba(5,7,6,.70);

    border:
        2px solid
        var(--ags-light-gold);

    border-radius: 3px;

    text-decoration: none;

    font-size: 15px;

    font-weight: 800;

    letter-spacing: 1px;

    box-shadow:

        inset 0 0 18px
        rgba(225,175,72,.04),

        0 0 15px
        rgba(0,0,0,.25);

    transition:
        .3s ease;

}


.ags-button span {

    font-size: 24px;

    font-weight: 400;

    transition:
        transform .3s ease;

}


.ags-button:hover {

    color: #070706;

    background:
        linear-gradient(
            135deg,
            #f0c66a,
            #b87c27
        );

    transform:
        translateY(-2px);

    box-shadow:
        0 10px 30px
        rgba(205,151,48,.22);

}


.ags-button:hover span {

    transform:
        translateX(7px);

}


/* =========================================================
   COMMON STAT BOX
========================================================= */

.ags-stat {

    position: absolute;

    z-index: 8;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            rgba(5,8,7,.93),
            rgba(10,10,7,.80)
        );

    border:
        1px solid
        rgba(215,165,69,.72);

    border-radius: 5px;

    box-shadow:

        0 8px 25px
        rgba(0,0,0,.35),

        inset 0 0 15px
        rgba(215,165,69,.025);

    backdrop-filter:
        blur(5px);

}


.ags-stat strong {

    display: block;

    color:
        var(--ags-light-gold);

    font-size: 24px;

    line-height: 1;

    font-weight: 900;

}


.ags-stat p {

    margin:
        7px 0 1px;

    color:
        rgba(255,255,255,.90);

    font-size: 11px;

    line-height: 1.3;

    font-weight: 600;

}


.ags-stat small {

    display: block;

    color:
        rgba(255,255,255,.80);

    font-size: 9px;

    line-height: 1.2;

}


/* =========================================================
   ICON + CONTENT
========================================================= */

.ags-stat-row {

    display: flex;

    align-items: flex-start;

    gap: 12px;

}


.ags-icon {

    flex: 0 0 auto;

    color:
        var(--ags-light-gold);

    font-size: 31px;

    line-height: 1;

}


/* =========================================================
   CONNECTOR
========================================================= */

.ags-connector {

    position: absolute;

    left: 50%;

    top: 100%;

    width: 1px;

    height: 28px;

    background:
        linear-gradient(
            180deg,
            var(--ags-light-gold),
            rgba(241,194,98,.3)
        );

}


.ags-connector::after {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -5px;

    width: 9px;

    height: 9px;

    transform:
        translateX(-50%);

    background:
        #fff4c6;

    border-radius: 50%;

    box-shadow:

        0 0 8px #ffc85b,

        0 0 18px
        rgba(255,185,57,.8);

}


/* =========================================================
   STAT 01
========================================================= */

.ags-stat-01 {

    top: 55px;

    left: 10px;

    width: 230px;

    padding:
        15px 25px 18px;

    background:
        rgba(5,7,7,.45);

}


.ags-stat-01 strong {

    font-size: 38px;

}


.ags-stat-01 p {

    font-size: 12px;

}


.ags-stat-01
.ags-connector {

    left: 0;

    top: 100%;

    height: 55px;

}


/* =========================================================
   STAT 02
========================================================= */

.ags-stat-02 {

    left: 31%;

    bottom: 128px;

    width: 160px;

    padding:
        12px 14px;

}


/* =========================================================
   STAT 03
========================================================= */

.ags-stat-03 {

    left: 47%;

    bottom: 93px;

    width: 170px;

    padding:
        12px 14px;

}


/* =========================================================
   STAT 04
========================================================= */

.ags-stat-04 {

    left: 62%;

    bottom: 72px;

    width: 185px;

    padding:
        12px 14px;

}


/* =========================================================
   STAT 05
========================================================= */

.ags-stat-05 {

    right: 6%;

    bottom: 125px;

    width: 185px;

    padding:
        12px 14px;

}


/* =========================================================
   DESKTOP SMALL
========================================================= */

@media (max-width: 1250px) {

    .ags-heading {

        top: 40px;

        max-width: 68%;

    }


    .ags-heading h2 {

        font-size: 42px;

    }


    .ags-stat-01 {

        width: 195px;

    }


    .ags-stat-02 {

        left: 29%;

    }


    .ags-stat-03 {

        left: 45%;

    }


    .ags-stat-04 {

        left: 61%;

    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .aspen-growth-section {

        min-height: auto;

        padding:
            70px 0 450px;

    }


    .ags-container {

        min-height: auto;

    }


    .ags-heading {

        position: relative;

        top: auto;

        left: auto;

        width: 100%;

        max-width: 100%;

        transform: none;

        padding:
            0 20px;

    }


    .ags-heading h2 {

        font-size:
            clamp(36px, 7vw, 52px);

    }


    .ags-stat-01 {

        top: 280px;

        left: 3%;

    }


    .ags-stat-02 {

        left: 26%;

        bottom: auto;

        top: 400px;

    }


    .ags-stat-03 {

        left: 46%;

        bottom: auto;

        top: 430px;

    }


    .ags-stat-04 {

        left: 66%;

        bottom: auto;

        top: 450px;

    }


    .ags-stat-05 {

        right: 3%;

        bottom: auto;

        top: 310px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .aspen-growth-section {

        padding:
            60px 0;

    }


    .ags-background {

        background-position:
            center center;

    }


    .ags-overlay {

        background:
            rgba(2,4,4,.48);

    }


    .ags-container {

        width:
            calc(100% - 30px);

        display: flex;

        flex-direction: column;

        gap: 15px;

    }


    .ags-heading {

        margin-bottom: 25px;

        padding: 0;

    }


    .ags-heading h2 {

        font-size:
            clamp(32px, 9vw, 45px);

        line-height: 1;

    }


    .ags-heading p {

        font-size: 16px;

    }


    .ags-button {

        min-width: 0;

        width: 100%;

        max-width: 330px;

        font-size: 13px;

    }


    /*
     * Mobile cards become normal flow
     */

    .ags-stat {

        position: relative;

        top: auto !important;

        left: auto !important;

        right: auto !important;

        bottom: auto !important;

        width: 100%;

        padding:
            18px 20px;

    }


    .ags-stat-01 strong {

        font-size: 30px;

    }


    .ags-stat-row {

        align-items: center;

    }


    .ags-stat p {

        font-size: 12px;

    }


    .ags-stat small {

        font-size: 10px;

    }


    .ags-connector {

        display: none;

    }

}



/* =========================================================
   ASPEN COMMERCE / SOURCING SECTION
========================================================= */

.aspen-commerce-solutions {
    --acs-gold: #e0ad4f;
    --acs-gold-light: #f3cc72;

    position: relative;
    width: 100%;

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

    min-height: 540px;

    overflow: hidden;

    background: #050505;

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


/* =========================================================
   PANEL
========================================================= */

.acs-panel {
    position: relative;
    min-width: 0;
    min-height: 540px;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    padding: 100px 0;
}

/* center divider */

.acs-panel:first-child {
    border-right: 1px solid rgba(224, 173, 79, .32);
}


/* =========================================================
   BACKGROUND
========================================================= */

.acs-bg {
    position: absolute;

    inset: 0;

    z-index: -5;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    transition:
        transform 1.4s cubic-bezier(.2,.6,.3,1);
}


/* LEFT IMAGE */

.acs-sell .acs-bg {
    background-image:
        url("../images/aspen-sell-products.jpg");

    background-position: center;
}


/* RIGHT IMAGE */

.acs-source .acs-bg {
    background-image:
        url("../images/aspen-product-sourcing.jpg");

    background-position: center;
}


/* image hover */

.acs-panel:hover .acs-bg {
    transform: scale(1.035);
}


/* =========================================================
   DARK OVERLAY
========================================================= */

.acs-overlay {
    position: absolute;

    inset: 0;

    z-index: -4;

    background:
        linear-gradient(
            90deg,

            rgba(3,5,4,.97) 0%,
            rgba(3,5,4,.92) 24%,
            rgba(3,5,4,.73) 48%,
            rgba(3,5,4,.28) 76%,
            rgba(3,5,4,.08) 100%
        );
}


/* bottom darkness */

.acs-overlay::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,

            rgba(0,0,0,.08) 0%,
            transparent 50%,
            rgba(0,0,0,.45) 100%
        );
}


/* =========================================================
   CONTENT
========================================================= */

.acs-content {
    position: relative;

    z-index: 5;

    width: 470px;
    max-width: 68%;

    margin-left: 9%;

    color: #fff;
}


/* =========================================================
   HEADING
========================================================= */

.acs-title {
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}


.acs-title > span {
    display: block;

    color: #fff;

    text-shadow:
        0 3px 15px
        rgba(0,0,0,.4);
}


.acs-title > strong {
    display: block;

    margin-top: 4px;

    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #a87022 0%,
            #e6ae4e 30%,
            #f1c56d 55%,
            #ca8d30 100%
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;

    filter:
        drop-shadow(
            0 3px 10px
            rgba(0,0,0,.25)
        );
}


/* =========================================================
   SUBTITLE
========================================================= */

.acs-subtitle {
    margin:
        14px 0 22px;

    color:
        rgba(255,255,255,.88);

    font-size: 27px;

    line-height: 1.2;

    font-weight: 300;
}


/* =========================================================
   FEATURES
========================================================= */

.acs-features {
    margin-top: 23px;

    display: flex;
    flex-direction: column;

    gap: 16px;
}


.acs-feature {
    display: flex;

    align-items: center;

    gap: 18px;
}


.acs-icon {
    flex: 0 0 42px;

    width: 42px;
    height: 42px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        var(--acs-gold-light);
}


.acs-icon span {
    font-size: 34px;

    line-height: 1;

    font-weight: 500;

    text-shadow:
        0 0 12px
        rgba(230,177,77,.15);
}


.acs-feature p {
    margin: 0;

    color:
        rgba(255,255,255,.94);

    font-size: 17px;

    line-height: 1.2;

    font-weight: 400;
}


/* =========================================================
   BUTTON
========================================================= */

.acs-btn {
    width: 330px;

    max-width: 100%;

    min-height: 57px;

    margin-top: 27px;

    padding:
        0 25px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 24px;

    color:
        var(--acs-gold-light);

    background:
        rgba(7,8,6,.62);

    border:
        2px solid
        var(--acs-gold-light);

    border-radius: 3px;

    text-decoration: none;

    box-shadow:
        0 0 12px
        rgba(224,173,79,.30),

        inset 0 0 12px
        rgba(224,173,79,.05);

    backdrop-filter: blur(3px);

    transition:
        color .3s ease,
        background .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.acs-btn span {
    font-size: 14px;

    font-weight: 800;

    letter-spacing: .7px;

    white-space: nowrap;
}


.acs-btn i {
    color:
        var(--acs-gold-light);

    font-size: 24px;

    line-height: 1;

    font-style: normal;

    transition:
        transform .3s ease;
}


.acs-btn:hover {
    color: #080706;

    background:
        linear-gradient(
            135deg,
            #f0c76d,
            #b97e28
        );

    transform:
        translateY(-3px);

    box-shadow:
        0 10px 30px
        rgba(218,163,59,.25);
}


.acs-btn:hover i {
    color: #080706;

    transform:
        translateX(7px);
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (min-width: 1600px) {

    .acs-content {
        width: 520px;

        margin-left: 9%;
    }

}


/* =========================================================
   SMALL DESKTOP
========================================================= */

@media (max-width: 1200px) {

    .aspen-commerce-solutions,
    .acs-panel {
        min-height: 500px;
    }


    .acs-content {
        max-width: 78%;

        margin-left: 7%;
    }


    .acs-title {
        font-size: 40px;
    }


    .acs-subtitle {
        font-size: 23px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 991px) {

    .aspen-commerce-solutions {
        grid-template-columns: 1fr;
    }


    .acs-panel {
        min-height: 570px;
    }


    .acs-panel:first-child {
        border-right: 0;

        border-bottom:
            1px solid
            rgba(224,173,79,.3);
    }


    .acs-content {
        width: 520px;

        max-width: 75%;

        margin-left: 8%;
    }


    .acs-title {
        font-size:
            clamp(42px, 7vw, 55px);
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .acs-panel {
        min-height: 550px;

        align-items: flex-end;

        padding:
            60px 20px 45px;
    }


    .acs-content {
        width: 100%;

        max-width: 100%;

        margin: 0;
    }


    .acs-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(3,5,4,.94),
                rgba(3,5,4,.60)
            );
    }


    .acs-title {
        font-size: 37px;

        letter-spacing: -1px;
    }


    .acs-subtitle {
        font-size: 21px;
    }


    .acs-features {
        gap: 13px;
    }


    .acs-feature {
        gap: 12px;
    }


    .acs-icon {
        flex-basis: 35px;

        width: 35px;
        height: 35px;
    }


    .acs-icon span {
        font-size: 27px;
    }


    .acs-feature p {
        font-size: 15px;
    }


    .acs-btn {
        width: 100%;

        max-width: 330px;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    .acs-title {
        font-size: 32px;
    }


    .acs-panel {
        min-height: 520px;
    }


    .acs-btn span {
        font-size: 12px;
    }

}





/* =========================================================
   ASPEN VIDEO SHOWCASE
========================================================= */

.aspen-video-showcase {
    --avs-gold: #d5a348;
    --avs-gold-light: #f0c66d;
    --avs-bg: #080a08;
    padding: 100px 25px;
    overflow: hidden;
    background: radial-gradient(circle at 50% 20%, rgba(112, 73, 19, .12), transparent 38%), linear-gradient(110deg, #060806, #0c0c08 50%, #130e07);
    font-family: Arial, Helvetica, sans-serif;
}


.aspen-video-showcase::before {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.32),
            transparent 20%,
            transparent 80%,
            rgba(0,0,0,.30)
        );
}


.avs-container {
    position: relative;

    z-index: 2;

    width: min(1410px, calc(100% - 70px));

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.avs-heading {
    text-align: center;
}


.avs-eyebrow {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 14px;

    margin-bottom: 10px;
}


.avs-eyebrow span {
    width: 75px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--avs-gold)
        );
}


.avs-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--avs-gold),
            transparent
        );
}


.avs-eyebrow p {
    margin: 0;

    color: var(--avs-gold-light);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;
}


.avs-heading h2 {
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}


.avs-heading h2 strong {
    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #a66c20,
            #e2ac4c,
            #f1c76e,
            #c6892e
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.avs-subtitle {
    margin: 10px 0 0;

    color: rgba(255,255,255,.75);

    font-size: 17px;

    line-height: 1.4;
}


/* =========================================================
   FILTERS
========================================================= */

.avs-filters {
    margin: 32px auto 28px;

    display: grid;

    grid-template-columns: repeat(6, 1fr);

    gap: 17px;

    max-width: 1080px;
}


.avs-filter {
    min-height: 42px;

    padding: 8px 15px;

    color: rgba(255,255,255,.85);

    background: rgba(9,12,10,.65);

    border: 1px solid rgba(255,255,255,.14);

    border-radius: 5px;

    font-size: 13px;

    cursor: pointer;

    transition: .3s ease;
}


.avs-filter:hover {
    color: var(--avs-gold-light);

    border-color: rgba(216,167,73,.5);
}


.avs-filter.active {
    color: #161108;

    font-weight: 700;

    border-color: var(--avs-gold);

    background:
        linear-gradient(
            135deg,
            #f1cf80,
            #d99b38
        );

    box-shadow:
        0 4px 18px rgba(214,158,55,.18);
}


/* =========================================================
   SLIDER
========================================================= */

.avs-slider-wrap {
    position: relative;
}


.avs-grid {
    display: grid;

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

    gap: 18px;
}


/* =========================================================
   CARD
========================================================= */

.avs-card {
    min-width: 0;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(12,15,13,.97),
            rgba(7,10,8,.96)
        );

    border: 1px solid rgba(255,255,255,.12);

    border-radius: 6px;

    transition:
        transform .3s ease,
        border-color .3s ease,
        box-shadow .3s ease;
}


.avs-card:hover {
    transform: translateY(-5px);

    border-color: rgba(218,167,72,.5);

    box-shadow:
        0 15px 35px rgba(0,0,0,.30);
}


/* =========================================================
   THUMBNAIL
========================================================= */

.avs-thumbnail {
    position: relative;

    height: 185px;

    overflow: hidden;

    background: #111;
}


.avs-thumbnail img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform .6s ease;
}


.avs-card:hover .avs-thumbnail img {
    transform: scale(1.06);
}


.avs-thumbnail::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.35)
        );
}


/* =========================================================
   PLAY BUTTON
========================================================= */

.avs-play {
    position: absolute;

    z-index: 5;

    top: 50%;
    left: 50%;

    width: 55px;
    height: 55px;

    transform: translate(-50%, -50%);

    display: flex;

    align-items: center;
    justify-content: center;

    padding-left: 4px;

    color: #fff;

    background: rgba(3,6,5,.58);

    border: 2px solid rgba(255,255,255,.92);

    border-radius: 50%;

    font-size: 19px;

    cursor: pointer;

    backdrop-filter: blur(4px);

    transition: .3s ease;
}


.avs-play:hover {
    color: #090704;

    background: var(--avs-gold-light);

    border-color: var(--avs-gold-light);

    transform:
        translate(-50%, -50%)
        scale(1.08);
}


/* =========================================================
   DURATION
========================================================= */

.avs-duration {
    position: absolute;

    z-index: 5;

    right: 10px;
    bottom: 10px;

    padding: 4px 7px;

    color: #fff;

    background: rgba(3,5,4,.82);

    border-radius: 5px;

    font-size: 11px;

    font-weight: 700;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.avs-card-content {
    padding: 14px 15px 15px;
}


.avs-card-content h3 {
    margin: 0 0 7px;

    color: #fff;

    font-size: 16px;

    line-height: 1.25;

    font-weight: 700;
}


.avs-card-content p {
    min-height: 42px;

    margin: 0;

    color: rgba(255,255,255,.64);

    font-size: 14px;

    line-height: 1.45;
}


/* =========================================================
   CATEGORY
========================================================= */

.avs-category {
    margin-top: 15px;

    display: flex;

    align-items: center;

    gap: 12px;

    color: var(--avs-gold-light);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 2px;
}


.avs-category i {
    width: 30px;
    height: 2px;

    display: block;

    background: var(--avs-gold-light);
}


/* =========================================================
   ARROWS
========================================================= */

.avs-arrow {
    position: absolute;

    z-index: 20;

    top: 43%;

    width: 44px;
    height: 44px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    background: rgba(6,9,7,.75);

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 50%;

    font-size: 30px;

    line-height: 1;

    cursor: pointer;

    backdrop-filter: blur(5px);

    transition: .3s ease;
}


.avs-prev {
    left: -65px;
}


.avs-next {
    right: -65px;
}


.avs-arrow:hover {
    color: #090704;

    background: var(--avs-gold-light);

    border-color: var(--avs-gold-light);
}


/* =========================================================
   BOTTOM CTA
========================================================= */

.avs-bottom {
    margin-top: 27px;

    text-align: center;
}


.avs-more {
    min-width: 280px;

    min-height: 52px;

    padding: 0 27px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 20px;

    color: var(--avs-gold-light);

    background: rgba(6,8,6,.65);

    border: 2px solid var(--avs-gold-light);

    border-radius: 3px;

    text-decoration: none;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 1px;

    transition: .3s ease;
}


.avs-more span {
    font-size: 22px;

    transition: transform .3s ease;
}


.avs-more:hover {
    color: #080705;

    background:
        linear-gradient(
            135deg,
            #f0c76e,
            #bd8128
        );

    transform: translateY(-3px);
}


.avs-more:hover span {
    transform: translateX(6px);
}


/* =========================================================
   MODAL
========================================================= */

.avs-modal {
    position: fixed;

    z-index: 99999;

    inset: 0;

    display: none;

    align-items: center;
    justify-content: center;

    padding: 25px;
}


.avs-modal.active {
    display: flex;
}


.avs-modal-overlay {
    position: absolute;

    inset: 0;

    background: rgba(0,0,0,.90);

    backdrop-filter: blur(8px);
}


.avs-modal-box {
    position: relative;

    z-index: 5;

    width: min(1000px, 95vw);
}


.avs-modal-close {
    position: absolute;

    z-index: 10;

    top: -45px;
    right: 0;

    width: 38px;
    height: 38px;

    color: #fff;

    background: transparent;

    border: 1px solid rgba(255,255,255,.4);

    border-radius: 50%;

    font-size: 25px;

    cursor: pointer;
}


.avs-video-frame {
    position: relative;

    padding-top: 56.25%;

    overflow: hidden;

    background: #000;

    border:
        1px solid
        rgba(217,166,70,.6);
}


.avs-video-frame iframe {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    border: 0;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .avs-container {
        width: calc(100% - 40px);
    }

    .avs-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .avs-filters {
        grid-template-columns: repeat(3, 1fr);
    }

    .avs-arrow {
        display: none;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .aspen-video-showcase {
        padding: 55px 0 45px;
    }

    .avs-container {
        width: calc(100% - 30px);
    }

    .avs-eyebrow span {
        width: 30px;
    }

    .avs-eyebrow p {
        font-size: 9px;
        letter-spacing: 2px;
    }

    .avs-heading h2 {
        font-size: 34px;
        line-height: 1.05;
    }

    .avs-heading h2 strong {
        display: block;
    }

    .avs-subtitle {
        font-size: 15px;
    }

    .avs-filters {
        margin-top: 25px;

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

        gap: 8px;
    }

    .avs-filter {
        font-size: 11px;
    }

    .avs-grid {
        grid-template-columns: 1fr;
    }

    .avs-thumbnail {
        height: 220px;
    }

    .avs-card-content h3 {
        font-size: 17px;
    }

    .avs-card-content p {
        min-height: auto;
    }

    .avs-more {
        width: 100%;
        max-width: 300px;
    }

}




/* =========================================================
   ASPEN TESTIMONIALS
========================================================= */

.aspen-testimonials {
    --ast-gold: #d7a346;
    --ast-light-gold: #f1c86e;
    --ast-bg: #060806;
    padding: 100px 34px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(ellipse at 50% 15%, rgba(117, 78, 20, .15), transparent 45%), radial-gradient(ellipse at 50% 100%, rgba(123, 75, 18, .14), transparent 45%), #060806;
    font-family: Arial, Helvetica, sans-serif;
}


/* =========================================================
   DECORATIVE GLOW
========================================================= */

.aspen-testimonials::before {
    content: "";

    position: absolute;

    width: 120%;
    height: 480px;

    left: -10%;
    top: -300px;

    border: 1px solid rgba(211, 155, 61, .55);

    border-radius: 50%;

    pointer-events: none;

    box-shadow:
        0 0 30px rgba(203, 145, 49, .05);
}


.aspen-testimonials::after {
    content: "";

    position: absolute;

    width: 120%;
    height: 450px;

    left: -10%;
    bottom: -350px;

    border: 1px solid rgba(211, 155, 61, .45);

    border-radius: 50%;

    pointer-events: none;
}


.ast-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(100px);

    opacity: .11;

    background: #d99d39;

    pointer-events: none;
}


.ast-glow-left {
    left: -180px;
    bottom: -100px;
}


.ast-glow-right {
    right: -180px;
    top: -100px;
}


/* =========================================================
   CONTAINER
========================================================= */

.ast-container {
    position: relative;

    z-index: 3;

    width: min(1420px, calc(100% - 70px));

    margin: 0 auto;
}


/* =========================================================
   HEADING
========================================================= */

.ast-heading {
    text-align: center;

    margin-bottom: 28px;
}


.ast-eyebrow {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-bottom: 8px;
}


.ast-eyebrow span {
    width: 75px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            var(--ast-gold)
        );
}


.ast-eyebrow span:last-child {
    background:
        linear-gradient(
            90deg,
            var(--ast-gold),
            transparent
        );
}


.ast-eyebrow p {
    margin: 0;

    color: var(--ast-light-gold);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 4px;
}


.ast-heading h2 {
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.ast-heading h2 strong {
    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #b07826,
            #e1aa4a,
            #f2c96d,
            #c68a2d
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.ast-heading-text {
    margin: 9px 0 0;

    color: rgba(255,255,255,.75);

    font-size: 16px;

    line-height: 1.4;
}


/* =========================================================
   SLIDER
========================================================= */

.ast-slider-wrapper {
    position: relative;
}


.ast-slider {
    display: grid;

    grid-template-columns: repeat(5, 1fr);

    gap: 15px;

    overflow: hidden;

    scroll-behavior: smooth;
}


/* =========================================================
   TESTIMONIAL CARD
========================================================= */

.ast-card {
    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(215, 163, 70, .35);

    border-radius: 8px;

    background:
        linear-gradient(
            145deg,
            rgba(10, 13, 11, .98),
            rgba(5, 8, 6, .98)
        );

    box-shadow:
        0 12px 30px
        rgba(0,0,0,.20);

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.ast-card:hover {
    transform: translateY(-6px);

    border-color:
        rgba(232, 181, 83, .75);

    box-shadow:
        0 18px 40px
        rgba(0,0,0,.32);
}


/* =========================================================
   IMAGE
========================================================= */

.ast-card-image {
  position: relative;
}


.ast-card-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(4,7,5,.72) 100%
        );
}


.ast-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.ast-card:hover
.ast-card-image img {
    transform: scale(1.06);
}


/* =========================================================
   CARD BODY
========================================================= */

.ast-card-body {
    position: relative;

    min-height: 160px;

    padding:
        18px 18px 15px;
}


.ast-quote {
    position: absolute;

    left: 15px;
    top: -27px;

    z-index: 4;

    color:
        var(--ast-light-gold);

    font-family: Georgia, serif;

    font-size: 54px;

    line-height: 1;

    font-weight: 700;

    text-shadow:
        0 0 15px
        rgba(225, 169, 69, .25);
}


/* =========================================================
   STARS
========================================================= */

.ast-stars {
    margin-bottom: 7px;

    color:
        var(--ast-light-gold);

    font-size: 14px;

    letter-spacing: 2px;
}


/* =========================================================
   REVIEW
========================================================= */

.ast-review {
    min-height: 66px;

    margin: 0;

    color:
        rgba(255,255,255,.79);

    font-size: 12px;

    line-height: 1.35;
}


/* =========================================================
   CLIENT
========================================================= */

.ast-client {
    margin-top: 12px;

    display: flex;

    align-items: center;

    gap: 10px;
}


.ast-avatar {
    flex: 0 0 34px;
    width: 34px;
    height: 34px !important;
    object-fit: cover;
    border-radius: 50% !important;
    border: 1px solid rgba(226, 174, 76, .45) !important;
}


.ast-client-info {
    min-width: 0;

    flex: 1;

    display: flex;

    flex-direction: column;
}


.ast-client-info strong {
    color: #fff;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 700;
}


.ast-client-info span {
    margin-top: 2px;

    color:
        rgba(255,255,255,.53);

    font-size: 10px;
}


.ast-flag {
    flex: 0 0 auto;

    font-size: 21px;

    line-height: 1;
}


/* =========================================================
   NAVIGATION
========================================================= */

.ast-nav {
    position: absolute;

    z-index: 20;

    top: 47%;

    width: 43px;
    height: 43px;

    display: flex;

    justify-content: center;
    align-items: center;

    color: #fff;

    background:
        rgba(5,8,6,.85);

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 50%;

    font-size: 28px;

    cursor: pointer;

    backdrop-filter: blur(5px);

    transition: .3s ease;
}


.ast-prev {
    left: -62px;
}


.ast-next {
    right: -62px;
}


.ast-nav:hover {
    color: #090705;

    background:
        var(--ast-light-gold);

    border-color:
        var(--ast-light-gold);

    transform: scale(1.07);
}


/* =========================================================
   REVIEW CTA
========================================================= */

.ast-review-cta {
    width: 85%;

    margin:
        27px auto 0;

    min-height: 135px;

    padding:
        25px 45px;

    display: grid;

    grid-template-columns:
        1.35fr 1px 1fr;

    align-items: center;

    gap: 42px;

    border:
        1px solid
        rgba(214, 160, 63, .65);

    border-radius: 10px;

    background:
        linear-gradient(
            105deg,
            rgba(16,17,12,.96),
            rgba(10,12,9,.98) 55%,
            rgba(35,25,11,.88)
        );

    box-shadow:
        0 15px 50px
        rgba(0,0,0,.28);
}


/* =========================================================
   CTA LEFT
========================================================= */

.ast-cta-left {
    display: flex;

    align-items: center;

    gap: 30px;
}


.ast-review-icon {
    flex: 0 0 85px;

    width: 85px;
    height: 72px;

    position: relative;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        3px solid
        var(--ast-light-gold);

    border-radius: 7px;

    color:
        var(--ast-light-gold);
}


.ast-review-icon::after {
    content: "";

    position: absolute;

    left: 10px;
    bottom: -14px;

    width: 20px;
    height: 20px;

    background:
        #0e100c;

    border-left:
        3px solid
        var(--ast-light-gold);

    border-bottom:
        3px solid
        var(--ast-light-gold);

    transform:
        skewY(-35deg);
}


.ast-review-icon span {
    position: relative;

    z-index: 3;

    font-size: 45px;

    line-height: 1;
}


.ast-cta-eyebrow {
    margin-bottom: 5px;

    color:
        var(--ast-light-gold);

    font-size: 10px;

    font-weight: 700;

    letter-spacing: 3px;
}


.ast-cta-content h3 {
    margin: 0;

    color: #fff;

    font-size: 31px;

    line-height: 1;

    font-weight: 800;
}


.ast-cta-content h3 strong {
    color:
        var(--ast-light-gold);

    font-weight: 800;
}


.ast-cta-content p {
    max-width: 480px;

    margin:
        9px 0 0;

    color:
        rgba(255,255,255,.65);

    font-size: 12px;

    line-height: 1.4;
}


/* =========================================================
   DIVIDER
========================================================= */

.ast-cta-divider {
    width: 1px;

    height: 90px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(211,164,74,.42),
            transparent
        );
}


/* =========================================================
   CTA RIGHT
========================================================= */

.ast-cta-right {
    text-align: center;
}


.ast-submit-btn {
    width: 100%;

    min-height: 50px;

    padding:
        0 25px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 22px;

    color: #171006;

    background:
        linear-gradient(
            135deg,
            #f3d17e 0%,
            #efb84f 55%,
            #d99a34 100%
        );

    border:
        1px solid
        #f0c66c;

    border-radius: 5px;

    text-decoration: none;

    box-shadow:
        0 5px 20px
        rgba(216,158,52,.18);

    transition:
        transform .3s ease,
        box-shadow .3s ease;
}


.ast-submit-btn span {
    font-size: 13px;

    font-weight: 800;

    letter-spacing: .5px;
}


.ast-submit-btn i {
    font-size: 22px;

    font-style: normal;

    transition:
        transform .3s ease;
}


.ast-submit-btn:hover {
    transform: translateY(-3px);

    box-shadow:
        0 10px 30px
        rgba(216,158,52,.30);
}


.ast-submit-btn:hover i {
    transform:
        translateX(6px);
}


.ast-cta-right p {
    margin:
        10px 0 0;

    color:
        rgba(255,255,255,.50);

    font-size: 10px;
}


/* =========================================================
   LAPTOP
========================================================= */

@media (max-width: 1300px) {

    .ast-container {
        width:
            calc(100% - 50px);
    }


    .ast-slider {
        grid-template-columns:
            repeat(4, minmax(250px, 1fr));

        overflow-x: auto;

        scrollbar-width: none;
    }


    .ast-slider::-webkit-scrollbar {
        display: none;
    }


    .ast-card {
        min-width: 260px;
    }


    .ast-nav {
        display: none;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .ast-slider {
        grid-template-columns: none;

        grid-auto-flow: column;

        grid-auto-columns: 48%;
    }


    .ast-review-cta {
        width: 100%;

        grid-template-columns: 1fr;

        gap: 25px;

        padding: 30px;
    }


    .ast-cta-divider {
        width: 100%;
        height: 1px;

        background:
            linear-gradient(
                90deg,
                transparent,
                rgba(211,164,74,.45),
                transparent
            );
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 600px) {

    .aspen-testimonials {
        padding:
            55px 0 45px;
    }


    .ast-container {
        width:
            calc(100% - 30px);
    }


    .ast-eyebrow {
        gap: 8px;
    }


    .ast-eyebrow span {
        width: 30px;
    }


    .ast-eyebrow p {
        font-size: 9px;

        letter-spacing: 2px;
    }


    .ast-heading h2 {
        font-size: 34px;

        line-height: 1.05;
    }


    .ast-heading h2 strong {
        display: block;
    }


    .ast-heading-text {
        font-size: 14px;
    }


    .ast-slider {
        grid-auto-columns: 88%;

        gap: 12px;

        overflow-x: auto;

        scroll-snap-type: x mandatory;
    }


    .ast-card {
        min-width: 0;

        scroll-snap-align: start;
    }


    .ast-card-image {
        height: 150px;
    }


    .ast-card-body {
        padding:
            20px 18px;
    }


    .ast-review {
        min-height: auto;

        font-size: 13px;
    }


    /* CTA */

    .ast-review-cta {
        margin-top: 30px;

        padding:
            28px 20px;
    }


    .ast-cta-left {
        flex-direction: column;

        text-align: center;

        gap: 22px;
    }


    .ast-cta-content h3 {
        font-size: 27px;
    }


    .ast-cta-content p {
        font-size: 12px;
    }


    .ast-submit-btn {
        width: 100%;
    }

}


/* =========================================================
   ASPEN FOUNDERS
========================================================= */

.aspen-founders {
    --af-gold: #d6a34a;
    --af-gold-light: #efc66e;
    --af-dark: #050706;
    padding: 100px 35px;
    overflow: hidden;
    color: #fff;
    background: radial-gradient(circle at 45% 20%, rgba(147, 98, 25, .12), transparent 35%), linear-gradient(110deg, #040706 0%, #090a07 55%, #050605 100%);
    font-family: Arial, Helvetica, sans-serif;
}


.af-container {
    width: min(1480px, calc(100% - 70px));

    margin: 0 auto;
}


/* =========================================================
   MAIN GRID
========================================================= */

.af-main {
    position: relative;

    display: grid;

    grid-template-columns:
        minmax(300px, .95fr)
        minmax(520px, 1.5fr)
        minmax(330px, .9fr);

    min-height: 410px;
}


/* =========================================================
   LEFT INTRO
========================================================= */

.af-intro {
    position: relative;

    z-index: 10;

    padding:
        30px 0 25px;

    display: flex;

    flex-direction: column;

    justify-content: center;
}


.af-eyebrow {
    display: flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 15px;
}


.af-eyebrow span {
    color: var(--af-gold-light);

    font-size: 12px;

    font-weight: 700;

    letter-spacing: 5px;
}


.af-eyebrow i {
    width: 80px;

    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--af-gold),
            transparent
        );
}


/* HEADING */

.af-intro h2 {
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}


.af-intro h2 strong {
    display: block;

    margin-top: 5px;

    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #ae7424,
            #e0a947,
            #f0c76b,
            #b87c28
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.af-description {
    max-width: 455px;

    margin:
        19px 0 0;

    color:
        rgba(255,255,255,.72);

    font-size: 16px;

    line-height: 1.45;
}


/* =========================================================
   VALUES
========================================================= */

.af-values {
    max-width: 500px;

    margin-top: 30px;

    display: grid;

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

    gap: 10px;
}


.af-value {
    position: relative;

    min-width: 0;

    padding-right: 10px;

    border-right:
        1px solid
        rgba(255,255,255,.13);
}


.af-value:last-child {
    border-right: 0;
}


.af-value-icon {
    margin-bottom: 9px;

    color:
        var(--af-gold-light);

    font-size: 33px;

    line-height: 1;
}


.af-value span {
    color:
        rgba(255,255,255,.86);

    font-size: 12px;

    line-height: 1.25;
}


/* =========================================================
   TEAM VISUAL
========================================================= */

.af-team-visual {
    position: relative;

    min-height: 410px;

    overflow: hidden;
}


.af-team-visual img {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position:
        center bottom;
}


.af-team-gradient {
    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            #050706 0%,
            rgba(5,7,6,.80) 7%,
            rgba(5,7,6,.15) 25%,
            transparent 50%,
            rgba(5,7,6,.12) 80%,
            #050706 100%
        ),

        linear-gradient(
            180deg,
            transparent 55%,
            rgba(5,7,6,.95) 100%
        );
}


/* =========================================================
   PROFILE PANEL
========================================================= */

.af-profile-panel {
    position: relative;

    margin:
        0 0 0 20px;

    min-height: 390px;

    overflow: hidden;

    border:
        1px solid
        rgba(215,163,74,.65);

    border-radius: 15px;

    background:
        linear-gradient(
            150deg,
            rgba(18,19,15,.98),
            rgba(6,8,7,.98)
        );

    box-shadow:
        0 20px 60px
        rgba(0,0,0,.30);
}


/* CLOSE */

.af-profile-close {
    position: absolute;

    z-index: 20;

    top: 13px;
    right: 17px;

    color:
        rgba(255,255,255,.88);

    background: transparent;

    border: 0;

    font-size: 30px;

    font-weight: 200;

    cursor: pointer;
}


/* =========================================================
   PROFILE PHOTO
========================================================= */

.af-profile-photo {
    height: 185px;

    position: relative;

    overflow: hidden;
}


.af-profile-photo::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(7,8,6,.96) 100%
        );
}


.af-profile-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center 20%;
}


/* =========================================================
   PROFILE CONTENT
========================================================= */

.af-profile-content {
    position: relative;

    z-index: 4;

    margin-top: -18px;

    padding:
        0 25px 20px;
}


.af-profile-content h3 {
    margin: 0;

    color: #fff;

    font-size: 24px;

    line-height: 1.1;

    font-weight: 800;
}


.af-profile-role {
    margin-top: 5px;

    color:
        var(--af-gold-light);

    font-size: 15px;
}


/* =========================================================
   LINKEDIN
========================================================= */

.af-linkedin {
    width: fit-content;

    margin-top: 13px;

    min-height: 37px;

    padding:
        0 13px;

    display: inline-flex;

    align-items: center;

    gap: 9px;

    color: #fff;

    border:
        1px solid
        rgba(217,166,71,.75);

    border-radius: 5px;

    text-decoration: none;

    font-size: 11px;

    transition: .3s ease;
}


.af-linkedin-icon {
    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #080a08;

    background: #fff;

    border-radius: 2px;

    font-size: 11px;

    font-weight: 800;
}


.af-linkedin i {
    margin-left: 6px;

    color:
        var(--af-gold-light);

    font-size: 17px;

    font-style: normal;

    transition:
        transform .3s ease;
}


.af-linkedin:hover {
    color: #080706;

    background:
        var(--af-gold-light);
}


.af-linkedin:hover
.af-linkedin-icon {
    background: #080706;

    color:
        var(--af-gold-light);
}


.af-linkedin:hover i {
    color: #080706;

    transform:
        translateX(4px);
}


/* =========================================================
   BIO
========================================================= */

.af-profile-line {
    height: 1px;

    margin: 12px 0;

    background:
        linear-gradient(
            90deg,
            rgba(216,165,70,.40),
            rgba(255,255,255,.10),
            transparent
        );
}


.af-profile-content > p {
    margin: 0;

    color:
        rgba(255,255,255,.68);

    font-size: 11px;

    line-height: 1.4;
}


/* =========================================================
   SKILLS
========================================================= */

.af-skills {
    margin-top: 13px;

    display: flex;

    flex-wrap: wrap;

    gap: 7px;
}


.af-skills span {
    padding:
        6px 11px;

    color:
        rgba(255,255,255,.78);

    border:
        1px solid
        rgba(255,255,255,.15);

    border-radius: 20px;

    font-size: 9px;
}


/* =========================================================
   FOUNDERS NAV
========================================================= */

.af-founders-nav {
    position: relative;

    z-index: 20;

    width: calc(100% - 390px);

    margin-top: -2px;

    padding:
        20px 55px 0;

    border-top:
        1px solid
        rgba(213,163,72,.24);
}


.af-founder-list {
    display: grid;

    grid-template-columns:
        repeat(5, 1fr);

    gap: 30px;
}


/* =========================================================
   FOUNDER BUTTON
========================================================= */

.af-founder {
    padding: 0;

    color: #fff;

    background: transparent;

    border: 0;

    text-align: center;

    cursor: pointer;
}


.af-founder-photo {
    position: relative;

    width: 92px;
    height: 92px;

    margin:
        0 auto 9px;

    display: block;

    padding: 3px;

    border:
        1px solid
        rgba(214,163,70,.55);

    border-radius: 50%;

    transition:
        .35s ease;
}


.af-founder-photo::before {
    content: "";

    position: absolute;

    inset: -8px;

    opacity: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(229,177,78,.28),
            transparent 67%
        );

    transition:
        opacity .35s ease;
}


.af-founder-photo img {
    position: relative;

    z-index: 2;

    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    border-radius: 50%;
}


.af-founder strong {
    display: block;

    color: #fff;

    font-size: 13px;

    line-height: 1.2;
}


.af-founder small {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.58);

    font-size: 10px;
}


/* ACTIVE */

.af-founder.active
.af-founder-photo {
    border-color:
        var(--af-gold-light);

    box-shadow:
        0 0 23px
        rgba(222,169,68,.32);
}


.af-founder.active
.af-founder-photo::before {
    opacity: 1;
}


.af-founder:hover
.af-founder-photo {
    transform:
        translateY(-4px);

    border-color:
        var(--af-gold-light);
}


/* =========================================================
   ARROWS
========================================================= */

.af-arrow {
    position: absolute;

    z-index: 20;

    top: 50%;

    width: 45px;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    background:
        rgba(5,8,6,.85);

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 50%;

    font-size: 28px;

    cursor: pointer;

    transform:
        translateY(-50%);

    transition:
        .3s ease;
}


.af-prev {
    left: 0;
}


.af-next {
    right: 0;
}


.af-arrow:hover {
    color: #080706;

    background:
        var(--af-gold-light);

    border-color:
        var(--af-gold-light);
}


/* =========================================================
   PROFILE CHANGE ANIMATION
========================================================= */

.af-profile-panel.af-changing
.af-profile-photo img,

.af-profile-panel.af-changing
.af-profile-content {
    transform:
        translateY(5px);
}


.af-profile-photo img,
.af-profile-content {
    transition:
        opacity .25s ease,
        transform .25s ease;
}


/* =========================================================
   RESPONSIVE - LAPTOP
========================================================= */

@media (max-width: 1300px) {

    .af-main {
        grid-template-columns:
            .9fr 1.25fr .85fr;
    }


    .af-intro h2 {
        font-size: 46px;
    }


    .af-values {
        grid-template-columns:
            repeat(2, 1fr);
    }


    .af-profile-content {
        padding-left: 18px;
        padding-right: 18px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

    .af-container {
        width:
            calc(100% - 40px);
    }


    .af-main {
        grid-template-columns:
            1fr 1fr;
    }


    .af-intro {
        padding-right: 30px;
    }


    .af-team-visual {
        min-height: 430px;
    }


    .af-profile-panel {
        grid-column:
            1 / -1;

        width: 100%;

        max-width: 700px;

        margin:
            30px auto 0;
    }


    .af-profile-photo {
        height: 300px;
    }


    .af-founders-nav {
        width: 100%;

        margin-top: 30px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 700px) {

    .aspen-founders {
        padding:
            50px 0;
    }


    .af-container {
        width:
            calc(100% - 30px);
    }


    .af-main {
        display: block;
    }


    .af-intro {
        padding:
            0 0 30px;
    }


    .af-intro h2 {
        font-size: 43px;
    }


    .af-description {
        font-size: 14px;
    }


    .af-values {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }


    .af-team-visual {
        min-height: 380px;

        margin:
            0 -15px;
    }


    .af-profile-panel {
        margin-top: 20px;

        min-height: 0;
    }


    .af-profile-photo {
        height: 260px;
    }


    .af-profile-content {
        padding:
            0 20px 25px;
    }


    /* NAV */

    .af-founders-nav {
        margin-top: 30px;

        padding:
            20px 0 0;
    }


    .af-founder-list {
        display: flex;

        gap: 18px;

        overflow-x: auto;

        padding:
            5px 5px 15px;

        scroll-snap-type:
            x mandatory;

        scrollbar-width: none;
    }


    .af-founder-list::-webkit-scrollbar {
        display: none;
    }


    .af-founder {
        flex:
            0 0 125px;

        scroll-snap-align:
            start;
    }


    .af-founder-photo {
        width: 80px;
        height: 80px;
    }


    .af-arrow {
        display: none;
    }

}


/* =========================================================
   ASPEN APPRECIATIONS
========================================================= */

.aspen-appreciations {
    --ap-gold: #d6a246;
    --ap-light-gold: #f0c66c;
    --ap-dark: #050706;
    overflow: hidden;
    padding: 100px 0;
    color: #fff;
    background: radial-gradient(circle at 75% 0%, rgba(154, 103, 30, .20), transparent 32%), linear-gradient(110deg, #050706 0%, #090a07 55%, #080806 100%);
    font-family: Arial, Helvetica, sans-serif;
}


/* AMBIENT GLOW */

.aspen-appreciations::before {
    content: "";

    position: absolute;

    width: 700px;
    height: 400px;

    right: -150px;
    top: -230px;

    border-radius: 50%;

    background:
        rgba(209, 147, 50, .12);

    filter: blur(90px);

    pointer-events: none;
}


.ap-container {
    position: relative;

    z-index: 2;

    width: min(1460px, calc(100% - 70px));

    margin: 0 auto;
}


/* =========================================================
   TOP
========================================================= */

.ap-top {
    display: grid;

    grid-template-columns:
        minmax(0, 1.7fr)
        minmax(300px, .8fr);

    align-items: center;

    gap: 60px;

    margin-bottom: 20px;
}


/* EYEBROW */

.ap-eyebrow {
    display: flex;

    align-items: center;

    gap: 13px;

    margin-bottom: 8px;
}


.ap-eyebrow span {
    color:
        var(--ap-light-gold);

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 5px;
}


.ap-eyebrow i {
    display: block;

    width: 130px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--ap-gold),
            transparent
        );
}


/* HEADING */

.ap-heading h2 {
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.ap-heading h2 strong {
    color:
        var(--ap-light-gold);

    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #b97e2a,
            #efbf60,
            #d89c3b
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.ap-heading > p {
    max-width: 800px;

    margin: 9px 0 0;

    color:
        rgba(255,255,255,.68);

    font-size: 16px;

    line-height: 1.35;
}


/* =========================================================
   TOP QUOTE
========================================================= */

.ap-top-quote {
    display: grid;

    grid-template-columns:
        95px 1px 1fr;

    align-items: center;

    gap: 24px;
}


.ap-laurel {
    color:
        var(--ap-light-gold);

    font-family: Georgia, serif;

    font-size: 70px;

    line-height: 1;

    text-align: center;

    transform:
        rotate(-20deg);

    text-shadow:
        0 0 20px
        rgba(218,162,67,.22);
}


.ap-vertical-line {
    width: 1px;

    height: 90px;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--ap-gold),
            transparent
        );
}


.ap-top-quote p {
    margin: 0;

    color:
        var(--ap-light-gold);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    font-style: italic;

    line-height: 1.35;
}


/* =========================================================
   SLIDER
========================================================= */

.ap-slider-wrap {
    position: relative;
}


.ap-slider {
    display: grid;

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

    gap: 14px;

    scroll-behavior: smooth;
}


/* =========================================================
   CARD
========================================================= */

.ap-card {
    position: relative;

    min-width: 0;

    overflow: hidden;

    border:
        1px solid
        rgba(213,160,66,.45);

    border-radius: 12px;

    background:
        linear-gradient(
            150deg,
            rgba(13,15,12,.98),
            rgba(5,7,6,.99)
        );

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.ap-card:hover {
    transform:
        translateY(-6px);

    border-color:
        rgba(238,190,98,.85);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.35);
}


/* IMAGE */

.ap-image {
  position: relative;
}


.ap-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            rgba(5,7,6,.98) 100%
        );
}


.ap-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.ap-card:hover
.ap-image img {
    transform:
        scale(1.06);
}


/* =========================================================
   CARD CONTENT
========================================================= */

.ap-card-content {
    position: relative;

    min-height: 195px;

    margin-top: -15px;

    padding:
        18px 20px 17px;
}


.ap-quote {
    display: block;

    height: 27px;

    color:
        var(--ap-light-gold);

    font-family:
        Georgia,
        serif;

    font-size: 58px;

    line-height: .8;

    font-weight: 700;

    text-shadow:
        0 0 16px
        rgba(228,173,70,.20);
}


.ap-message {
    min-height: 72px;

    margin:
        4px 0 12px;

    color:
        rgba(255,255,255,.79);

    font-size: 12px;

    line-height: 1.4;
}


/* PERSON */

.ap-person {
    padding-top: 11px;

    border-top:
        1px solid
        rgba(255,255,255,.10);
}


.ap-person h3 {
    margin: 0;

    color:
        var(--ap-light-gold);

    font-size: 13px;

    font-weight: 700;
}


.ap-person span {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.65);

    font-size: 10px;
}


/* =========================================================
   COMPANY
========================================================= */

.ap-company {
    height: 32px;

    margin-top: 8px;

    display: flex;

    align-items: center;

    gap: 7px;
}



.ap-company strong {
    color:
        rgba(255,255,255,.88);

    font-size: 13px;

    font-weight: 500;
}


/* =========================================================
   ARROWS
========================================================= */

.ap-arrow {
    position: absolute;

    z-index: 20;

    top: 43%;

    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    color: #fff;

    background:
        rgba(5,7,6,.88);

    border:
        1px solid
        rgba(255,255,255,.25);

    border-radius: 50%;

    font-size: 28px;

    cursor: pointer;

    backdrop-filter:
        blur(5px);

    transition:
        .3s ease;
}


.ap-prev {
    left: -57px;
}


.ap-next {
    right: -57px;
}


.ap-arrow:hover {
    color: #080706;

    background:
        var(--ap-light-gold);

    border-color:
        var(--ap-light-gold);

    box-shadow:
        0 0 22px
        rgba(223,168,69,.28);
}


/* =========================================================
   COMPANY STRIP
========================================================= */

.ap-companies {
    position: relative;

    margin-top: 25px;

    padding:
        0 0 23px;
}


.ap-company-title {
    display: grid;

    grid-template-columns:
        1fr auto 1fr;

    align-items: center;

    gap: 18px;
}


.ap-company-title span {
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(220,165,67,.75)
        );
}


.ap-company-title span:last-child {
    background:
        linear-gradient(
            90deg,
            rgba(220,165,67,.75),
            transparent
        );
}


.ap-company-title p {
    margin: 0;

    color:
        var(--ap-light-gold);

    font-size: 9px;

    font-weight: 600;

    letter-spacing: 5px;
}


/* LOGOS */

.ap-logo-list {
    margin-top: 17px;

    display: flex;

    align-items: center;
    justify-content: space-around;

    gap: 30px;
}


.ap-logo-list img {
    max-width: 125px;

    max-height: 36px;

    object-fit: contain;

    filter:
        grayscale(1)
        brightness(1.6);

    opacity: .72;

    transition:
        .3s ease;
}


.ap-logo-list img:hover {
    filter:
        grayscale(0)
        brightness(1);

    opacity: 1;

    transform:
        translateY(-3px);
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1250px) {

    .ap-slider {
        grid-template-columns: none;

        grid-auto-flow: column;

        grid-auto-columns: 270px;

        overflow-x: auto;

        scrollbar-width: none;
    }


    .ap-slider::-webkit-scrollbar {
        display: none;
    }


    .ap-prev {
        left: -20px;
    }


    .ap-next {
        right: -20px;
    }

}


@media (max-width: 900px) {

    .ap-top {
        grid-template-columns: 1fr;

        gap: 30px;
    }


    .ap-top-quote {
        max-width: 480px;
    }


    .ap-logo-list {
        justify-content:
            flex-start;

        overflow-x: auto;

        padding-bottom: 10px;
    }


    .ap-logo-list img {
        flex:
            0 0 110px;
    }

}


@media (max-width: 600px) {

    .aspen-appreciations {
        padding-top: 50px;
    }


    .ap-container {
        width:
            calc(100% - 30px);
    }


    .ap-eyebrow span {
        font-size: 9px;

        letter-spacing: 3px;
    }


    .ap-eyebrow i {
        width: 60px;
    }


    .ap-heading h2 {
        font-size: 35px;

        line-height: 1.05;
    }


    .ap-heading h2 strong {
        display: block;

        margin-top: 4px;
    }


    .ap-heading > p {
        font-size: 14px;
    }


    .ap-top-quote {
        grid-template-columns:
            65px 1px 1fr;

        gap: 15px;
    }


    .ap-laurel {
        font-size: 50px;
    }


    .ap-top-quote p {
        font-size: 14px;
    }


    .ap-slider {
        grid-auto-columns: 87%;

        scroll-snap-type:
            x mandatory;
    }


    .ap-card {
        scroll-snap-align:
            start;
    }


    .ap-image {
        height: 180px;
    }


    .ap-message {
        min-height: auto;

        font-size: 13px;
    }


    .ap-arrow {
        display: none;
    }


    .ap-company-title {
        gap: 10px;
    }


    .ap-company-title p {
        white-space: nowrap;

        letter-spacing: 3px;
    }

}



/* =====================================================
   ASPEN GLOBAL PRESENCE
===================================================== */

.aspen-global-presence {
    --gold: #d7a13c;
    --gold-light: #f0bd58;
    --black: #030708;
    --card-bg: #070b0c;
    overflow: hidden;
    padding: 100px 55px;
    color: #fff;
    background: radial-gradient(circle at 75% 0%, rgba(184, 123, 30, 0.10), transparent 32%), linear-gradient(120deg, #020607 0%, #04090b 55%, #030607 100%);
    font-family: Arial, Helvetica, sans-serif;
}


/* GOLD GLOW */

.aspen-global-presence::after {
    content: "";

    position: absolute;

    left: -150px;
    bottom: 70px;

    width: 500px;
    height: 2px;

    background:
        linear-gradient(
            90deg,
            transparent,
            #ffbd46,
            transparent
        );

    box-shadow:
        0 0 35px #ffae2d;

    opacity: .8;
}


/* =====================================================
   CONTAINER
===================================================== */

.agp-container {
    position: relative;
    z-index: 2;

    width: min(1480px, calc(100% - 80px));

    margin: 0 auto;
}


/* =====================================================
   TOP
===================================================== */

.agp-top {
    display: grid;

    grid-template-columns:
        minmax(400px, .8fr)
        minmax(650px, 1.7fr);

    align-items: center;

    gap: 30px;

    min-height: 235px;
}


/* =====================================================
   INTRO
===================================================== */

.agp-eyebrow {
    display: flex;

    align-items: center;

    gap: 15px;

    margin-bottom: 12px;
}


.agp-eyebrow span {
    color: var(--gold-light);

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 6px;
}


.agp-eyebrow i {
    display: block;

    width: 140px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}


.agp-intro h2 {
    max-width: 600px;
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}


.agp-intro h2 strong {
    display: block;

    margin-top: 4px;

    color: var(--gold-light);

    font-weight: 900;

    background:
        linear-gradient(
            90deg,
            #e4ad4b,
            #f1c269,
            #c9872d
        );

    -webkit-background-clip: text;
    background-clip: text;

    -webkit-text-fill-color: transparent;
}


.agp-intro > p {
    max-width: 590px;

    margin: 15px 0 0;

    color: rgba(255, 255, 255, .72);

    font-size: 17px;

    line-height: 1.35;
}


/* =====================================================
   MAP
===================================================== */

.agp-map {
    position: relative;

    min-height: 280px;
}


.agp-map-image {
    width: 100%;
    height: 280px;

    display: block;

    object-fit: contain;

    opacity: .9;
}


/* =====================================================
   MAP LOCATIONS
===================================================== */

.agp-map-location {
    position: absolute;

    z-index: 4;
}


.agp-dot {
    position: absolute;

    width: 14px;
    height: 14px;

    border-radius: 50%;

    background: #fff5c6;

    border:
        3px solid
        #d99e38;

    box-shadow:
        0 0 7px #fff,
        0 0 16px #ffb638,
        0 0 28px rgba(255, 174, 44, .75);
}


.agp-map-label {
    position: absolute;

    display: flex;

    align-items: center;

    gap: 7px;

    padding: 7px 12px;

    white-space: nowrap;

    color: #fff;

    background:
        rgba(3, 7, 8, .92);

    border:
        1px solid
        rgba(211, 157, 59, .55);

    border-radius: 5px;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: .5px;

    box-shadow:
        0 5px 15px
        rgba(0,0,0,.35);
}


.agp-map-label span {
    font-size: 17px;
}


/* POSITIONS */

.agp-map-location.usa {
    left: 18%;
    top: 30%;
}

.agp-map-location.usa .agp-map-label {
    left: 20px;
    top: 15px;
}


.agp-map-location.spain {
    left: 50%;
    top: 28%;
}

.agp-map-location.spain .agp-map-label {
    left: 10px;
    bottom: 15px;
}


.agp-map-location.dubai {
    left: 61%;
    top: 54%;
}

.agp-map-location.dubai .agp-map-label {
    left: 15px;
    top: 12px;
}


.agp-map-location.dhaka {
    left: 79%;
    top: 36%;
}

.agp-map-location.dhaka .agp-map-label {
    left: 16px;
    top: -10px;
}


.agp-map-location.malaysia {
    left: 74%;
    top: 68%;
}

.agp-map-location.malaysia .agp-map-label {
    left: 15px;
    top: 8px;
}


/* =====================================================
   CARDS
===================================================== */

.agp-location-grid {
    display: grid;

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

    gap: 14px;

    margin-top: 10px;
}


.agp-card {
    position: relative;

    overflow: hidden;

    border:
        1px solid
        rgba(213, 159, 61, .42);

    border-radius: 10px;

    background:
        linear-gradient(
            150deg,
            #080d0e,
            #050808
        );

    transition:
        transform .35s ease,
        border-color .35s ease,
        box-shadow .35s ease;
}


.agp-card:hover {
    transform:
        translateY(-7px);

    border-color:
        rgba(237, 185, 88, .9);

    box-shadow:
        0 20px 45px
        rgba(0,0,0,.4),
        0 0 25px
        rgba(209, 149, 45, .08);
}


/* =====================================================
   CARD IMAGE
===================================================== */

.agp-card-image {
    position: relative;

    height: 165px;

    overflow: hidden;
}


.agp-card-image::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(5, 9, 9, .95) 100%
        );
}


.agp-card-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition:
        transform .6s ease;
}


.agp-card:hover
.agp-card-image img {
    transform:
        scale(1.07);
}


/* =====================================================
   CARD CONTENT
===================================================== */

.agp-card-content {
    padding:
        12px 20px 18px;
}


.agp-card-content h3 {
    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 6px;

    margin:
        0 0 14px;

    color:
        rgba(255,255,255,.85);

    font-size: 15px;

    font-weight: 400;
}


.agp-card-content h3 span {
    margin-right: 3px;

    font-size: 21px;
}


.agp-card-content h3 strong {
    color:
        var(--gold-light);

    font-weight: 800;
}


/* =====================================================
   ADDRESS
===================================================== */

.agp-address {
    display: flex;

    align-items: flex-start;

    gap: 12px;

    min-height: 53px;
}


.agp-pin {
    position: relative;

    width: 15px;
    height: 20px;

    flex: 0 0 15px;

    margin-top: 3px;

    color: transparent;

    border-radius:
        10px 10px 10px 0;

    background: #fff;

    transform:
        rotate(-45deg);
}


.agp-pin::after {
    content: "";

    position: absolute;

    width: 5px;
    height: 5px;

    left: 5px;
    top: 5px;

    border-radius: 50%;

    background: #0a0d0d;
}


.agp-address p {
    margin: 0;

    color:
        rgba(255,255,255,.76);

    font-size: 12px;

    line-height: 1.4;
}


/* =====================================================
   BUTTON
===================================================== */

.agp-button {
    width: 160px;

    min-height: 37px;

    margin:
        10px auto 0;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 18px;

    color: #fff;

    text-decoration: none;

    border:
        1px solid
        rgba(224, 169, 67, .72);

    border-radius: 7px;

    font-size: 12px;

    transition:
        .3s ease;
}


.agp-button i {
    color:
        var(--gold-light);

    font-size: 18px;

    font-style: normal;

    transition:
        transform .3s ease;
}


.agp-button:hover {
    color: #090805;

    background:
        linear-gradient(
            90deg,
            #c88c31,
            #f3c866
        );

    box-shadow:
        0 0 20px
        rgba(224, 168, 61, .22);
}


.agp-button:hover i {
    color: #090805;

    transform:
        translateX(5px);
}


/* =====================================================
   TABLET
===================================================== */

@media (max-width: 1200px) {

    .agp-top {
        grid-template-columns:
            1fr 1.2fr;
    }


    .agp-location-grid {
        grid-template-columns:
            repeat(3, 1fr);
    }

}


/* =====================================================
   MOBILE / TABLET
===================================================== */

@media (max-width: 900px) {

    .agp-container {
        width:
            calc(100% - 40px);
    }


    .agp-top {
        grid-template-columns:
            1fr;
    }


    .agp-map {
        min-height: 300px;
    }


    .agp-map-image {
        height: 300px;
    }


    .agp-location-grid {
        grid-template-columns:
            repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    .aspen-global-presence {
        padding:
            50px 0 40px;
    }


    .agp-container {
        width:
            calc(100% - 30px);
    }


    .agp-eyebrow span {
        font-size: 9px;

        letter-spacing: 4px;
    }


    .agp-eyebrow i {
        width: 80px;
    }


    .agp-intro h2 {
        font-size: 36px;

        line-height: 1.02;
    }


    .agp-intro > p {
        font-size: 14px;
    }


    .agp-map {
        min-height: 230px;

        margin-top: 10px;
    }


    .agp-map-image {
        height: 230px;
    }


    /*
     * Map labels become crowded on small screens.
     * Hide labels but keep glowing points.
     */

    .agp-map-label {
        display: none;
    }


    .agp-location-grid {
        grid-template-columns:
            1fr;

        gap: 18px;
    }


    .agp-card-image {
        height: 220px;
    }


    .agp-card-content {
        padding:
            15px 20px 20px;
    }


    .agp-button {
        width: 100%;
    }

}



/* ========================================================
   ASPEN FOOTER
======================================================== */

.aspen-footer {
    --gold: #d8a54b;
    --gold-light: #efc16c;
    --dark: #020708;
    --text: rgba(255,255,255,.78);

    position: relative;
    overflow: hidden;

    padding: 30px 0 0;

    color: #fff;

    background:
        radial-gradient(
            circle at 85% 15%,
            rgba(158,105,30,.12),
            transparent 28%
        ),
        linear-gradient(
            115deg,
            #020708 0%,
            #030809 50%,
            #020606 100%
        );

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


/* ========================================================
   WORLD MAP BACKGROUND
======================================================== */

.footer-world-map {
    position: absolute;

    width: 650px;
    height: 350px;

    right: -40px;
    top: -40px;

    opacity: .25;

    background-image:
        url("../images/aspen-world-map-footer.png");

    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;

    filter:
        sepia(1)
        saturate(.7);

    pointer-events: none;
}


/* ========================================================
   CONTAINER
======================================================== */

.footer-container {
    position: relative;
    z-index: 2;

    width: min(1480px, calc(100% - 70px));

    margin: auto;
}


/* ========================================================
   MAIN GRID
======================================================== */

.footer-main {
    display: grid;

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

    gap: 55px;
}


/* ========================================================
   BRAND
======================================================== */

.footer-brand {
    position: relative;

    min-height: 500px;

    padding-bottom: 150px;
}


.footer-logo {
    display: inline-block;
}


.footer-logo img {
    display: block;

    width: 220px;
    height: auto;

    object-fit: contain;
}


.footer-tagline {
    margin-top: 12px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 17px;

    font-style: italic;
}


.footer-description {
    max-width: 370px;

    margin: 16px 0 0;

    color: var(--text);

    font-size: 15px;

    line-height: 1.45;
}


/* ========================================================
   VALUES
======================================================== */

.footer-values {
    display: grid;

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

    margin-top: 25px;
}


.footer-value {
    min-height: 72px;

    padding: 0 12px;

    text-align: center;

    border-right:
        1px solid
        rgba(255,255,255,.20);
}


.footer-value:first-child {
    padding-left: 0;
}


.footer-value:last-child {
    border-right: 0;
}


.value-icon {
    margin-bottom: 7px;

    color: var(--gold-light);

    font-size: 27px;
}


.footer-value span {
    display: block;

    color:
        rgba(255,255,255,.82);

    font-size: 11px;

    line-height: 1.25;
}


/* ========================================================
   MOUNTAIN
======================================================== */

.footer-mountain {
    position: absolute;

    left: -35px;
    right: -20px;
    bottom: 0;

    height: 160px;
}


.footer-mountain::after {
    content: "";

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            180deg,
            transparent 40%,
            #020708 100%
        );
}


.footer-mountain img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    object-position: center bottom;
}


/* ========================================================
   LINKS
======================================================== */

.footer-right {
    min-width: 0;
}


.footer-links-grid {
    display: grid;

    grid-template-columns:
        .9fr 1fr .9fr 1.25fr;

    gap: 50px;
}


.footer-column h3,
.footer-social h3,
.footer-newsletter h3 {
    display: flex;

    align-items: center;

    gap: 14px;

    margin: 0 0 15px;

    color: var(--gold-light);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;

    font-weight: 500;
}


.footer-column h3 span,
.footer-social h3 span,
.footer-newsletter h3 span {
    flex: 1;

    height: 1px;

    background:
        linear-gradient(
            90deg,
            rgba(213,159,68,.7),
            transparent
        );
}


.footer-column ul {
    margin: 0;
    padding: 0;

    list-style: none;
}


.footer-column li {
    margin: 0;
    padding: 0;
}


.footer-column li a {
    min-height: 31px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    color:
        rgba(255,255,255,.80);

    text-decoration: none;

    font-size: 13px;

    transition:
        color .25s ease,
        padding-left .25s ease;
}


.footer-column li a i {
    color: var(--gold);

    font-size: 17px;
    font-style: normal;

    transition:
        transform .25s ease;
}


.footer-column li a:hover {
    padding-left: 4px;

    color: var(--gold-light);
}


.footer-column li a:hover i {
    transform:
        translateX(4px);
}


/* ========================================================
   LOCATION LIST
======================================================== */

.footer-locations li a {
    min-height: 43px;

    border-bottom:
        1px solid
        rgba(255,255,255,.08);
}


.location-name {
    display: flex;

    align-items: center;

    gap: 12px;
}


.location-name .flag {
    width: 39px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    font-size: 26px;
}


/* ========================================================
   MIDDLE
======================================================== */

.footer-middle {
    display: grid;

    grid-template-columns:
        minmax(0, 1fr)
        1px
        minmax(380px, .95fr);

    gap: 42px;

    margin-top: 40px;
}


.footer-middle-divider {
    width: 1px;

    min-height: 120px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(238,189,95,.75),
            transparent
        );
}


/* ========================================================
   SOCIAL
======================================================== */

.social-list {
    display: flex;

    align-items: center;

    gap: 14px;
}


.social-list a {
    width: 43px;
    height: 43px;

    display: flex;

    align-items: center;
    justify-content: center;

    border:
        1px solid
        rgba(226,171,73,.75);

    border-radius: 50%;

    color: #fff;

    text-decoration: none;

    font-size: 17px;

    font-weight: 600;

    transition: .3s ease;
}


.social-list a:hover {
    color: #070706;

    background:
        linear-gradient(
            135deg,
            #e8ae4b,
            #f5d083
        );

    border-color:
        transparent;

    transform:
        translateY(-4px);

    box-shadow:
        0 5px 20px
        rgba(213,156,54,.25);
}


.footer-social > p {
    margin: 14px 0 0;

    color:
        rgba(255,255,255,.72);

    font-size: 13px;
}


/* ========================================================
   NEWSLETTER
======================================================== */

.footer-newsletter > p {
    max-width: 450px;

    margin: -4px 0 13px;

    color:
        rgba(255,255,255,.72);

    font-size: 14px;

    line-height: 1.4;
}


.newsletter-form {
    display: grid;
    grid-template-columns: 1fr auto;
    max-width: 500px;
    overflow: hidden;
    border: 1px solid rgba(225, 174, 79, .70);
    border-radius: 7px;
    background: rgba(255, 255, 255, .02);
    padding: 0;
}

.newsletter-form input {
    width: 100%;
    padding: 0 18px;
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
    font-family: inherit;
    font-size: 12px;
    height: 40px;
}


.newsletter-form input::placeholder {
    color:
        rgba(255,255,255,.55);
}


.newsletter-form button {
    min-width: 155px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 17px;
    color: #070706;
    background: linear-gradient(90deg, #b97d29, #f0bd60);
    border: 0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}


.newsletter-form button i {
    font-size: 18px;

    font-style: normal;

    transition:
        transform .25s ease;
}


.newsletter-form button:hover i {
    transform:
        translateX(5px);
}


/* ========================================================
   BOTTOM
======================================================== */

.footer-bottom {
    min-height: 67px;

    margin-top: 35px;

    display: grid;

    grid-template-columns:
        1fr auto 200px;

    align-items: center;

    gap: 30px;

    border-top:
        1px solid
        rgba(214,159,61,.55);
}


.footer-copyright {
    color:
        rgba(255,255,255,.65);

    font-size: 12px;
}


.footer-legal {
    display: flex;

    align-items: center;

    gap: 12px;
}


.footer-legal a {
    color:
        rgba(255,255,255,.55);

    text-decoration: none;

    font-size: 11px;

    transition:
        color .25s ease;
}


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


.footer-legal > span {
    width: 1px;
    height: 15px;

    background:
        rgba(255,255,255,.35);
}


.footer-language {
    display: flex;

    align-items: center;
    justify-content: center;

    gap: 9px;

    color:
        rgba(255,255,255,.7);

    font-size: 12px;
}


.footer-language > span {
    font-size: 20px;
}


.footer-language i {
    color:
        var(--gold);

    font-style: normal;
}


/* ========================================================
   BACK TO TOP
======================================================== */

.footer-back-top {
    position: absolute;

    right: 25px;
    bottom: 10px;

    width: 75px;

    padding: 0;

    color:
        rgba(255,255,255,.72);

    background: transparent;

    border: 0;

    cursor: pointer;
}


.footer-back-top > span {
    width: 50px;
    height: 50px;

    margin: 0 auto 8px;

    display: flex;

    align-items: center;
    justify-content: center;

    color:
        var(--gold-light);

    border:
        1px solid
        var(--gold-light);

    border-radius: 50%;

    font-size: 23px;

    transition:
        .3s ease;
}


.footer-back-top small {
    font-size: 10px;
}


.footer-back-top:hover > span {
    color: #070706;

    background:
        var(--gold-light);

    transform:
        translateY(-5px);
}


/* ========================================================
   RESPONSIVE
======================================================== */

@media (max-width: 1250px) {

    .footer-main {
        grid-template-columns:
            300px minmax(0, 1fr);

        gap: 35px;
    }

    .footer-links-grid {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 35px;
    }

    .footer-brand {
        min-height: 570px;
    }

}


@media (max-width: 900px) {

    .footer-container {
        width:
            calc(100% - 40px);
    }

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

    .footer-brand {
        min-height: auto;

        padding-bottom: 0;
    }

    .footer-mountain {
        position: relative;

        left: auto;
        right: auto;
        bottom: auto;

        margin-top: 25px;
    }

    .footer-middle {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-middle-divider {
        display: none;
    }

    .footer-bottom {
        grid-template-columns: 1fr;

        gap: 15px;

        padding: 25px 0 90px;

        text-align: center;
    }

    .footer-legal {
        justify-content: center;
    }

    .footer-back-top {
        right: 20px;
        bottom: 20px;
    }

}


@media (max-width: 600px) {

    .aspen-footer {
        padding-top: 45px;
    }

    .footer-container {
        width:
            calc(100% - 30px);
    }

    .footer-logo img {
        width: 190px;
    }

    .footer-description {
        font-size: 14px;
    }

    .footer-values {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px 0;
    }

    .footer-value:nth-child(2) {
        border-right: 0;
    }

    .footer-links-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-column h3,
    .footer-social h3,
    .footer-newsletter h3 {
        font-size: 18px;
    }

    .social-list {
        flex-wrap: wrap;
    }

    .newsletter-form {
        grid-template-columns: 1fr;
    }

    .newsletter-form input {
        height: 48px;
    }

    .newsletter-form button {
        width: 100%;
    }

    .footer-legal {
        flex-wrap: wrap;
    }

    .footer-world-map {
        width: 450px;

        right: -180px;

        opacity: .12;
    }

}


/* =====================================================
   ASPEN CONTACT SECTION
===================================================== */

.aspen-contact-section {
    --gold: #dba847;
    --gold-light: #ffc95d;
    --dark: #030708;
    --panel: rgba(4, 10, 12, .94);
    --border: rgba(224, 169, 69, .72);
    --input: rgba(14, 23, 27, .92);
    --input-border: rgba(255, 255, 255, .17);
    --text: rgba(255, 255, 255, .78);
    position: relative;
    overflow: hidden;
    min-height: 760px;
    padding: 0px 0px 100px 0px;
    color: #fff;
    background: linear-gradient(90deg, rgba(0, 5, 7, .97) 0%, rgba(0, 5, 7, .75) 32%, rgba(0, 5, 7, .35) 52%, rgba(0, 5, 7, .78) 100%), url(assets/images/contact-background.jpg) center / cover no-repeat;
    font-family: Arial, Helvetica, sans-serif;
}

.aspen-contact-overlay {
    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        radial-gradient(
            circle at 70% 40%,
            rgba(213, 150, 45, .10),
            transparent 32%
        );
}

.aspen-contact-container {
    position: relative;
    z-index: 2;

    width: min(1500px, calc(100% - 60px));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(580px, .92fr);

    gap: 70px;
}


/* =====================================================
   LEFT HEADING
===================================================== */

.contact-heading {
    padding-top: 6px;
}

.contact-eyebrow {
    display: flex;
    align-items: center;

    gap: 15px;

    margin-bottom: 8px;
}

.contact-eyebrow span {
    color: var(--gold-light);

    font-size: 15px;
    font-weight: 600;

    letter-spacing: 2px;
}

.contact-eyebrow i {
    display: block;

    width: 170px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.contact-heading h1 {
    max-width: 650px;

    margin: 0;

    color: #fff;

    font-size: clamp(44px, 4vw, 66px);
    font-weight: 800;

    line-height: .96;

    letter-spacing: -2px;
}

.contact-heading h1 span {
    display: block;

    color: var(--gold-light);
}

.contact-heading p {
    max-width: 670px;

    margin: 15px 0 0;

    color: rgba(255, 255, 255, .86);

    font-size: 17px;
    line-height: 1.35;
}


/* =====================================================
   COUNTRY TABS
===================================================== */

.country-tabs {
    display: grid;

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

    gap: 8px;

    margin-top: 17px;
}

.country-tab {
    min-height: 65px;

    padding: 7px 5px;

    display: flex;

    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 2px;

    color: #fff;

    border:
        1px solid
        rgba(219, 168, 71, .60);

    border-radius: 6px;

    background:
        rgba(4, 10, 12, .72);

    cursor: pointer;

    transition:
        .25s ease;
}

.country-tab .flag {
    font-size: 26px;
    line-height: 1;
}

.country-tab .globe {
    color: var(--gold-light);

    font-size: 29px;
}

.country-tab > span:last-child {
    font-size: 12px;
}

.country-tab:hover,
.country-tab.active {
    border-color:
        var(--gold-light);

    background:
        linear-gradient(
            180deg,
            rgba(68, 46, 12, .75),
            rgba(6, 11, 12, .88)
        );

    box-shadow:
        0 0 18px
        rgba(229, 169, 61, .13);
}


/* =====================================================
   OFFICE
===================================================== */

.office-showcase {
    display: grid;

    grid-template-columns:
        1.05fr 1.2fr;

    gap: 10px;

    margin-top: 9px;
}

.office-image {
    height: 175px;

    overflow: hidden;

    border:
        1px solid
        rgba(221, 168, 66, .55);

    border-radius: 7px;
}

.office-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}

.office-details {
    min-height: 175px;

    padding: 10px 16px;

    border:
        1px solid
        rgba(221, 168, 66, .65);

    border-radius: 7px;

    background:
        rgba(3, 9, 10, .88);
}

.office-title {
    display: flex;
    align-items: center;

    gap: 12px;
}

.office-flag {
    font-size: 29px;
}

.office-title small,
.office-title strong {
    display: block;
}

.office-title small {
    color: var(--gold-light);

    font-size: 11px;

    letter-spacing: 1.6px;
}

.office-title strong {
    margin-top: 2px;

    color: var(--gold-light);

    font-size: 14px;

    letter-spacing: 1px;
}

.office-contact-list {
    margin: 8px 0 0;
    padding: 0;

    list-style: none;
}

.office-contact-list li {
    display: flex;

    gap: 11px;

    margin: 6px 0;

    color: rgba(255, 255, 255, .84);

    font-size: 12px;

    line-height: 1.25;
}

.office-contact-list a {
    color: inherit;

    text-decoration: none;
}

.office-icon {
    min-width: 17px;

    color: var(--gold-light);

    font-size: 17px;
}


/* =====================================================
   MAP
===================================================== */

.contact-map-area {
    display: grid;

    grid-template-columns:
        minmax(0, 1.5fr)
        minmax(180px, .6fr);

    align-items: center;

    gap: 22px;

    margin-top: 15px;
}

.contact-world-map {
    height: 165px;
}

.contact-world-map img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: contain;
    object-position: left center;
}

.map-message {
    min-height: 105px;

    display: flex;
    align-items: center;

    gap: 24px;
}

.map-message > span {
    width: 1px;
    height: 105px;

    display: block;

    background:
        linear-gradient(
            180deg,
            transparent,
            var(--gold-light),
            transparent
        );
}

.map-message p {
    margin: 0;

    color: rgba(255, 255, 255, .80);

    font-size: 15px;

    line-height: 1.4;

    letter-spacing: 1.7px;
}


/* =====================================================
   FORM PANEL
===================================================== */

.aspen-contact-right {
    padding-top: 0;
}

.aspen-contact-form {
    padding: 18px 22px 15px;

    border:
        1px solid
        var(--border);

    border-radius: 17px;

    background:
        linear-gradient(
            145deg,
            rgba(6, 12, 14, .97),
            rgba(2, 7, 8, .94)
        );

    box-shadow:
        0 25px 80px
        rgba(0, 0, 0, .45);
}


/* =====================================================
   FORM HEADING
===================================================== */

.form-title {
    display: flex;
    align-items: center;

    gap: 12px;
}

.mail-icon {
    color: var(--gold-light);

    font-size: 26px;
}

.form-title h2 {
    margin: 0;

    color: var(--gold-light);

    font-size: 17px;
    font-weight: 600;

    letter-spacing: 1.5px;
}

.heading-line {
    width: 160px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}

.form-heading p {
    margin: 4px 0 12px;

    color:
        rgba(255, 255, 255, .72);

    font-size: 12px;
}


/* =====================================================
   FORM GRID
===================================================== */

.form-grid {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 12px;

    margin-bottom: 8px;
}

.form-field label {
    display: block;

    margin-bottom: 4px;

    color:
        rgba(255, 255, 255, .90);

    font-size: 11px;
}

.form-field label > span {
    color: #ff8b45;
}


/* =====================================================
   INPUT
===================================================== */

.input-wrap {
    position: relative;

    display: flex;
    align-items: center;

    min-height: 37px;

    border:
        1px solid
        var(--input-border);

    border-radius: 5px;

    background:
        var(--input);
}

.input-icon {
    width: 39px;

    flex-shrink: 0;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        rgba(255, 255, 255, .70);

    font-size: 16px;
}

.input-wrap input,
.input-wrap select {
    width: 100%;
    height: 37px;

    padding: 0 12px 0 0;

    color: #fff;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;

    font-size: 11px;
}

.input-wrap select {
    cursor: pointer;
}

.input-wrap option,
.country-code option {
    color: #fff;

    background: #0b1114;
}

.input-wrap input::placeholder {
    color:
        rgba(255, 255, 255, .40);
}


/* =====================================================
   APPOINTMENT
===================================================== */

.appointment-button {
    width: 100%;
    height: 43px;

    padding: 0 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    color: #fff;

    border:
        1px solid
        var(--gold);

    border-radius: 7px;

    background:
        rgba(12, 17, 18, .9);

    cursor: pointer;
}

.appointment-button > span {
    color: var(--gold-light);

    font-size: 20px;
}

.appointment-button small {
    color:
        rgba(255, 255, 255, .72);

    font-size: 10px;
}

.appointment-button i {
    margin-left: auto;

    color: #fff;

    font-size: 20px;

    font-style: normal;
}


/* =====================================================
   PHONE
===================================================== */

.phone-input {
    display: grid;

    grid-template-columns:
        108px 1fr;

    height: 37px;

    overflow: hidden;

    border:
        1px solid
        var(--input-border);

    border-radius: 5px;

    background:
        var(--input);
}

.country-code {
    padding: 0 8px;

    color: #fff;

    border: 0;
    border-right:
        1px solid
        var(--input-border);

    outline: 0;

    background:
        rgba(15, 24, 27, .95);

    font-size: 11px;
}

.phone-number {
    display: flex;

    align-items: center;
}

.phone-number > span {
    width: 34px;

    text-align: center;

    color:
        rgba(255, 255, 255, .65);
}

.phone-number input {
    width: 100%;
    height: 35px;

    padding-right: 8px;

    color: #fff;

    border: 0;
    outline: 0;

    background: transparent;

    font-size: 11px;
}

.phone-number input::placeholder {
    color:
        rgba(255, 255, 255, .4);
}


/* WhatsApp */

.whatsapp-option {
    margin-top: 5px;

    display: flex !important;

    align-items: center;

    gap: 7px;
}

.whatsapp-option input {
    width: 15px;
    height: 15px;

    accent-color: #3b86ff;
}

.whatsapp-option .whatsapp-icon {
    color: #18d46b;

    font-size: 18px;
}

.whatsapp-option > span {
    color:
        rgba(255, 255, 255, .78) !important;

    font-size: 10px;
}

.whatsapp-option i {
    color:
        rgba(255, 255, 255, .75);

    font-size: 11px;

    font-style: normal;
}


/* =====================================================
   TEXTAREA
===================================================== */

.full-field {
    margin-top: 8px;
}

.textarea-wrap {
    position: relative;

    border:
        1px solid
        var(--input-border);

    border-radius: 5px;

    background:
        var(--input);
}

.textarea-icon {
    position: absolute;

    left: 12px;
    top: 12px;

    color:
        rgba(255, 255, 255, .65);
}

.textarea-wrap textarea {
    width: 100%;
    height: 55px;

    resize: none;

    padding:
        12px 45px 20px 38px;

    color: #fff;

    border: 0;
    outline: 0;

    background: transparent;

    font-family: inherit;

    font-size: 11px;
}

.textarea-wrap textarea::placeholder {
    color:
        rgba(255, 255, 255, .4);
}

.character-count {
    position: absolute;

    right: 10px;
    bottom: 6px;

    color:
        rgba(255, 255, 255, .55);

    font-size: 9px;
}


/* =====================================================
   FILE
===================================================== */

.attachment-label {
    display: flex !important;

    align-items: center;

    gap: 6px;
}

.attachment-label small {
    color:
        rgba(255, 255, 255, .55);
}

.file-upload {
    min-height: 47px;

    display: flex !important;

    align-items: center;
    justify-content: center;

    gap: 10px;

    padding: 7px 15px;

    border:
        1px dashed
        rgba(255, 255, 255, .28);

    border-radius: 6px;

    cursor: pointer;
}

.file-upload input {
    display: none;
}

.upload-icon {
    color:
        rgba(255, 255, 255, .70) !important;

    font-size: 20px;
}

.upload-content {
    color:
        rgba(255, 255, 255, .75) !important;

    text-align: center;
}

.upload-content strong {
    display: block;

    font-size: 10px;

    font-weight: 400;
}

.upload-content small {
    display: block;

    margin-top: 2px;

    color:
        rgba(255, 255, 255, .46);

    font-size: 8px;
}


/* =====================================================
   PRIVACY
===================================================== */

.privacy-checkbox {
    margin: 9px 0 !important;

    display: flex !important;

    align-items: center;

    gap: 8px;
}

.privacy-checkbox input {
    width: 17px;
    height: 17px;

    accent-color:
        var(--gold);
}

.privacy-checkbox > span {
    color:
        rgba(255, 255, 255, .70) !important;

    font-size: 10px !important;
}

.privacy-checkbox a {
    color:
        var(--gold-light);
}

.privacy-checkbox b {
    color: #ff7447;
}


/* =====================================================
   SUBMIT
===================================================== */

.contact-submit {
    width: 100%;
    height: 45px;

    display: flex;

    align-items: center;
    justify-content: center;

    gap: 35px;

    color: #080705;

    border: 0;
    border-radius: 5px;

    background:
        linear-gradient(
            90deg,
            #d79832,
            #ffd16c,
            #efb44c
        );

    box-shadow:
        0 0 20px
        rgba(221, 163, 61, .13);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

.contact-submit i {
    font-size: 21px;

    font-style: normal;

    transition:
        transform .25s ease;
}

.contact-submit:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 8px 30px
        rgba(221, 163, 61, .28);
}

.contact-submit:hover i {
    transform:
        translateX(6px);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1250px) {

    .aspen-contact-container {
        grid-template-columns:
            1fr 1fr;

        gap: 30px;
    }

    .contact-heading h1 {
        font-size: 50px;
    }

}


@media (max-width: 1000px) {

    .aspen-contact-section {
        min-height: auto;
    }

    .aspen-contact-container {
        grid-template-columns: 1fr;

        max-width: 850px;
    }

    .aspen-contact-right {
        margin-top: 20px;
    }

}


@media (max-width: 700px) {

    .aspen-contact-container {
        width:
            calc(100% - 30px);
    }

    .contact-heading h1 {
        font-size: 40px;

        letter-spacing: -1px;
    }

    .contact-heading p {
        font-size: 15px;
    }

    .country-tabs {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .office-showcase {
        grid-template-columns: 1fr;
    }

    .office-image {
        height: 230px;
    }

    .contact-map-area {
        grid-template-columns: 1fr;
    }

    .map-message {
        display: none;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .aspen-contact-form {
        padding: 18px 15px;
    }

}


@media (max-width: 450px) {

    .country-tabs {
        grid-template-columns:
            repeat(2, 1fr);
    }

    .contact-heading h1 {
        font-size: 35px;
    }

    .phone-input {
        grid-template-columns:
            100px 1fr;
    }

}

/* ======================================================
   APPOINTMENT MODAL
====================================================== */

.aspen-appointment-modal {
    --gold: #e5ab3c;
    --gold-light: #ffd06a;
    --dark: #03090b;
    --panel: #071014;
    --border: rgba(224, 169, 62, .65);

    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 25px;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.aspen-appointment-modal.active {
    opacity: 1;
    visibility: visible;
}


/* OVERLAY */

.appointment-modal-overlay {
    position: absolute;
    inset: 0;

    background:
        rgba(0, 0, 0, .82);

    backdrop-filter: blur(7px);
}


/* ======================================================
   MODAL
====================================================== */

.appointment-modal-box {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: 430px;

    max-height: calc(100vh - 40px);

    overflow-y: auto;

    padding: 22px;

    color: #fff;

    border:
        1px solid
        rgba(232, 177, 71, .75);

    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            #050b0d 0%,
            #030708 100%
        );

    box-shadow:
        0 0 0 1px rgba(255,255,255,.02),
        0 30px 100px rgba(0,0,0,.75),
        0 0 40px rgba(219,158,48,.08);

    transform:
        translateY(25px)
        scale(.96);

    transition:
        transform .35s ease;

    scrollbar-width: thin;
    scrollbar-color:
        #c78e32
        #071014;
}

.aspen-appointment-modal.active
.appointment-modal-box {
    transform:
        translateY(0)
        scale(1);
}


/* ======================================================
   CLOSE
====================================================== */

.appointment-close {
    position: absolute;

    right: 13px;
    top: 10px;

    width: 32px;
    height: 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    color:
        rgba(255,255,255,.75);

    background: transparent;

    border: 0;

    font-size: 26px;

    cursor: pointer;

    transition: .25s;
}

.appointment-close:hover {
    color:
        var(--gold-light);

    transform:
        rotate(90deg);
}


/* ======================================================
   HEADER
====================================================== */

.appointment-modal-header {
    padding-right: 35px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 20px;
}

.appointment-modal-title {
    display: flex;
    align-items: center;

    gap: 10px;
}

.appointment-calendar-icon {
    color:
        var(--gold-light);

    font-size: 23px;
}

.appointment-modal-title h3 {
    margin: 0;

    color:
        var(--gold-light);

    font-size: 16px;
    font-weight: 600;
}

.appointment-modal-title h3 small {
    color:
        rgba(255,255,255,.75);

    font-size: 11px;
    font-weight: 400;
}

.appointment-description {
    margin:
        9px 0 14px;

    color:
        rgba(255,255,255,.63);

    font-size: 11px;
}


/* ======================================================
   TOGGLE
====================================================== */

.appointment-switch {
    position: relative;

    width: 44px;
    height: 23px;

    flex-shrink: 0;
}

.appointment-switch input {
    display: none;
}

.appointment-slider {
    position: absolute;
    inset: 0;

    border-radius: 30px;

    background:
        #30383b;

    cursor: pointer;

    transition:
        .25s ease;
}

.appointment-slider::before {
    content: "";

    position: absolute;

    width: 17px;
    height: 17px;

    left: 3px;
    top: 3px;

    border-radius: 50%;

    background: #fff;

    transition:
        .25s ease;
}

.appointment-switch
input:checked +
.appointment-slider {
    background:
        linear-gradient(
            90deg,
            #d4942d,
            #ffc75e
        );
}

.appointment-switch
input:checked +
.appointment-slider::before {
    transform:
        translateX(21px);
}


/* ======================================================
   BLOCK
====================================================== */

.appointment-block {
    margin-top: 14px;
}

.appointment-label {
    display: block;

    margin-bottom: 7px;

    color:
        rgba(255,255,255,.88);

    font-size: 11px;
}

.appointment-label small {
    color:
        rgba(255,255,255,.50);

    font-size: 9px;
}


/* ======================================================
   MEETING TYPES
====================================================== */

.meeting-types {
    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;
}

.meeting-type {
    min-height: 44px;

    padding: 0 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    color:
        rgba(255,255,255,.75);

    border:
        1px solid
        rgba(255,255,255,.14);

    border-radius: 5px;

    background:
        #091115;

    font-size: 10px;

    cursor: pointer;

    transition:
        .25s ease;
}

.meeting-icon {
    color:
        var(--gold-light);

    font-size: 19px;
}

.meeting-type:hover,
.meeting-type.active {
    color:
        var(--gold-light);

    border-color:
        var(--gold);

    background:
        linear-gradient(
            145deg,
            rgba(72,49,12,.6),
            #091012
        );

    box-shadow:
        inset 0 0 15px
        rgba(225,166,58,.05);
}


/* ======================================================
   CALENDAR
====================================================== */

.appointment-calendar {
    padding:
        11px 13px 13px;

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 7px;

    background:
        linear-gradient(
            145deg,
            #081115,
            #060d10
        );
}

.calendar-header {
    height: 32px;

    display: grid;

    grid-template-columns:
        30px 1fr 30px;

    align-items: center;

    margin-bottom: 4px;
}

.calendar-header strong {
    text-align: center;

    color:
        rgba(255,255,255,.9);

    font-size: 12px;
}

.calendar-nav {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #fff;

    border: 0;

    background: transparent;

    font-size: 22px;

    cursor: pointer;
}

.calendar-nav:hover {
    color:
        var(--gold-light);
}


/* WEEK */

.calendar-weekdays,
.calendar-days {
    display: grid;

    grid-template-columns:
        repeat(7, 1fr);

    gap: 3px;
}

.calendar-weekdays span {
    padding: 6px 0;

    color:
        rgba(255,255,255,.43);

    text-align: center;

    font-size: 9px;
}

.calendar-day {
    aspect-ratio: 1;

    max-height: 37px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin: auto;

    width: 100%;

    color:
        rgba(255,255,255,.70);

    border: 0;
    border-radius: 50%;

    background: transparent;

    font-size: 9px;

    cursor: pointer;

    transition: .2s ease;
}

.calendar-day:not(.disabled):hover {
    color: #080705;

    background:
        #e3a943;
}

.calendar-day.active {
    color: #080705;

    font-weight: 700;

    background:
        linear-gradient(
            135deg,
            #ffd26d,
            #d8922c
        );

    box-shadow:
        0 0 15px
        rgba(234,174,61,.45);
}

.calendar-day.disabled {
    color:
        rgba(255,255,255,.16);

    cursor: default;
}

.calendar-empty {
    pointer-events: none;
}


/* ======================================================
   TIMES
====================================================== */

.appointment-times {
    display: grid;

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

    gap: 7px;
}

.appointment-times button {
    height: 37px;

    color:
        rgba(255,255,255,.72);

    border:
        1px solid
        rgba(255,255,255,.12);

    border-radius: 5px;

    background:
        #091115;

    font-size: 9px;

    cursor: pointer;

    transition:
        .2s ease;
}

.appointment-times button:hover,
.appointment-times button.active {
    color: #080705;

    border-color:
        var(--gold-light);

    background:
        linear-gradient(
            135deg,
            #ffd26d,
            #e49e36
        );

    box-shadow:
        0 0 16px
        rgba(231,169,57,.20);
}


/* ======================================================
   SUMMARY
====================================================== */

.appointment-summary {
    margin-top: 15px;

    padding: 10px 12px;

    display: none;
    align-items: center;

    gap: 10px;

    border:
        1px solid
        rgba(223,164,57,.35);

    border-radius: 6px;

    background:
        rgba(224,164,57,.06);
}

.appointment-summary.show {
    display: flex;
}

.appointment-summary > span {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #070706;

    border-radius: 50%;

    background:
        var(--gold-light);
}

.appointment-summary small,
.appointment-summary strong {
    display: block;
}

.appointment-summary small {
    margin-bottom: 2px;

    color:
        rgba(255,255,255,.45);

    font-size: 8px;
}

.appointment-summary strong {
    color: #fff;

    font-size: 10px;
}


/* ======================================================
   ACTIONS
====================================================== */

.appointment-actions {
    display: grid;

    grid-template-columns:
        .65fr 1.35fr;

    gap: 8px;

    margin-top: 15px;
}

.appointment-cancel,
.appointment-confirm {
    height: 42px;

    border-radius: 5px;

    cursor: pointer;
}

.appointment-cancel {
    color:
        rgba(255,255,255,.75);

    border:
        1px solid
        rgba(255,255,255,.18);

    background:
        #091115;
}

.appointment-confirm {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 15px;

    color: #080705;

    border: 0;

    background:
        linear-gradient(
            90deg,
            #d99832,
            #ffd16c
        );

    font-weight: 700;
}

.appointment-confirm span {
    font-size: 18px;

    transition:
        transform .2s ease;
}

.appointment-confirm:hover span {
    transform:
        translateX(5px);
}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width: 520px) {

    .aspen-appointment-modal {
        padding: 10px;
    }

    .appointment-modal-box {
        max-height:
            calc(100vh - 20px);

        padding:
            20px 15px;

        border-radius: 12px;
    }

    .meeting-types {
        grid-template-columns: 1fr;
    }

    .appointment-times {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .appointment-actions {
        grid-template-columns: 1fr;
    }

}


/* =========================================================
   ASPEN INVESTMENT SECTION
========================================================= */

.aspen-invest-section {
    --gold: #e7ad42;
    --gold-light: #ffd36e;
    --dark: #030708;
    display: flex;
    align-items: center;
    padding: 120px 30px;
    overflow: hidden;
    background: #020607;
    color: #fff;
}


/* =========================================================
   BACKGROUND
========================================================= */

.aspen-invest-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.aspen-invest-bg img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}

.aspen-invest-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    background:
        linear-gradient(
            90deg,
            rgba(0, 4, 5, .98) 0%,
            rgba(0, 4, 5, .90) 26%,
            rgba(0, 4, 5, .48) 48%,
            rgba(0, 4, 5, .05) 70%,
            rgba(0, 4, 5, .12) 100%
        );
}

.aspen-invest-section .container {
    position: relative;
    z-index: 3;

    width: min(100% - 60px, 1440px);
    margin: 0 auto;
}


/* =========================================================
   MAIN
========================================================= */

.aspen-invest-main {
    min-height: 490px;

    display: flex;
    align-items: center;
}

.aspen-invest-content {
    width: 50%;
    max-width: 650px;
}


/* =========================================================
   EYEBROW
========================================================= */

.aspen-invest-eyebrow {
    display: flex;
    align-items: center;

    gap: 18px;

    margin-bottom: 12px;
}

.aspen-invest-eyebrow span {
    color: var(--gold-light);

    font-size: 15px;
    font-weight: 500;

    letter-spacing: 3px;
}

.aspen-invest-eyebrow i {
    width: 150px;
    height: 1px;

    display: block;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            transparent
        );
}


/* =========================================================
   HEADING
========================================================= */
.aspen-invest-content h2 {
    color: #fff;
    margin: 0;
    display: flex;
    flex-direction: column;
    font-family: Arial, Helvetica, sans-serif;
    font-size: clamp(42px, 4vw, 61px);
    line-height: .98;
    font-weight: 900;
    letter-spacing: -2px;
    text-transform: uppercase;
}

.aspen-invest-content h2 span {
    color: var(--gold-light);

    background:
        linear-gradient(
            90deg,
            #e3a63a,
            #ffda78
        );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.aspen-invest-description {
    max-width: 620px;

    margin:
        20px 0 25px;

    color:
        rgba(255,255,255,.82);

    font-size: 17px;
    line-height: 1.45;
}


/* =========================================================
   FEATURES
========================================================= */

.aspen-invest-features {
    display: grid;

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

    max-width: 630px;

    margin:
        10px 0 25px;
}

.aspen-invest-feature {
    min-height: 85px;

    padding: 0 18px;

    border-right:
        1px solid
        rgba(218,164,59,.25);
}

.aspen-invest-feature:first-child {
    padding-left: 0;
}

.aspen-invest-feature:last-child {
    border-right: 0;
}

.feature-icon {
    width: 38px;
    height: 38px;

    margin-bottom: 7px;

    color:
        var(--gold-light);
}

.feature-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.aspen-invest-feature span {
    color:
        rgba(255,255,255,.9);

    font-size: 13px;
    line-height: 1.25;
}


/* =========================================================
   BUTTON
========================================================= */

.aspen-invest-btn {
    width: 290px;
    min-height: 54px;

    padding: 0 25px;

    display: inline-flex;
    align-items: center;

    gap: 17px;

    color: #080704;

    text-decoration: none;

    border:
        1px solid
        #f4c75f;

    border-radius: 6px;

    background:
        linear-gradient(
            100deg,
            #efb847 0%,
            #ffe087 50%,
            #efb442 100%
        );

    box-shadow:
        0 0 20px
        rgba(225,165,53,.22);

    transition:
        .3s ease;
}

.aspen-invest-btn:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 8px 30px
        rgba(232,171,56,.35);
}

.aspen-invest-btn strong {
    font-size: 17px;
    font-weight: 700;
}

.btn-send-icon {
    width: 25px;
    height: 25px;
}

.btn-send-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: #080704;
    stroke-width: 1.8;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.btn-arrow {
    margin-left: auto;

    font-size: 28px;

    transition:
        transform .25s ease;
}

.aspen-invest-btn:hover
.btn-arrow {
    transform:
        translateX(6px);
}


/* =========================================================
   BOTTOM BAR
========================================================= */

.aspen-invest-bottom {
    min-height: 90px;

    display: grid;

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

    align-items: center;

    padding: 12px 15px;

    border:
        1px solid
        rgba(237,181,69,.80);

    border-radius: 13px;

    background:
        linear-gradient(
            90deg,
            rgba(4,10,11,.96),
            rgba(9,9,7,.93),
            rgba(4,9,10,.96)
        );

    box-shadow:
        0 0 25px
        rgba(213,153,42,.10);

    backdrop-filter:
        blur(8px);
}


/* =========================================================
   BOTTOM ITEM
========================================================= */

.invest-bottom-item {
    min-height: 58px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 22px;

    padding: 0 30px;

    border-right:
        1px solid
        rgba(228,174,65,.35);
}

.invest-bottom-item:last-child {
    border-right: 0;
}

.bottom-icon {
    width: 48px;
    height: 48px;

    flex-shrink: 0;

    color:
        var(--gold-light);
}

.bottom-icon svg {
    width: 100%;
    height: 100%;

    fill: none;

    stroke: currentColor;
    stroke-width: 3;

    stroke-linecap: round;
    stroke-linejoin: round;
}

.invest-bottom-item small,
.invest-bottom-item strong {
    display: block;

    letter-spacing: 2px;
}

.invest-bottom-item small {
    margin-bottom: 5px;

    color:
        rgba(255,255,255,.72);

    font-size: 12px;
    font-weight: 400;
}

.invest-bottom-item strong {
    color:
        rgba(255,255,255,.88);

    font-size: 13px;
    font-weight: 500;
}


/* =========================================================
   LARGE SCREEN
========================================================= */

@media (min-width: 1500px) {

    .aspen-invest-section {
        min-height: 690px;
    }

    .aspen-invest-content {
        max-width: 700px;
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .aspen-invest-content {
        width: 65%;
    }

    .aspen-invest-overlay {
        background:
            linear-gradient(
                90deg,
                rgba(0,4,5,.98),
                rgba(0,4,5,.86) 55%,
                rgba(0,4,5,.35)
            );
    }

    .aspen-invest-features {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 20px;
    }

    .aspen-invest-feature {
        border-right: 0;

        padding: 0;
    }

    .aspen-invest-bottom {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 10px;
    }

    .invest-bottom-item:nth-child(2) {
        border-right: 0;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .aspen-invest-section {
        min-height: auto;

        padding:
            70px 0 25px;
    }

    .aspen-invest-section .container {
        width:
            min(100% - 30px, 1440px);
    }

    .aspen-invest-bg img {
        object-position:
            65% center;
    }

    .aspen-invest-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0,4,5,.92),
                rgba(0,4,5,.93)
            );
    }

    .aspen-invest-main {
        min-height: auto;
    }

    .aspen-invest-content {
        width: 100%;
    }

    .aspen-invest-eyebrow span {
        font-size: 11px;

        letter-spacing: 2px;
    }

    .aspen-invest-eyebrow i {
        width: 60px;
    }

    .aspen-invest-content h2 {
        font-size: 48px;
    }

    .aspen-invest-description {
        font-size: 15px;
    }

    .aspen-invest-features {
        grid-template-columns:
            repeat(2, 1fr);

        gap: 25px 15px;
    }

    .aspen-invest-btn {
        width: 100%;

        justify-content: center;
    }

    .aspen-invest-bottom {
        margin-top: 45px;

        grid-template-columns: 1fr;

        padding: 10px 20px;
    }

    .invest-bottom-item {
        justify-content: flex-start;

        padding: 15px;

        border-right: 0;

        border-bottom:
            1px solid
            rgba(228,174,65,.20);
    }

    .invest-bottom-item:last-child {
        border-bottom: 0;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .aspen-invest-content h2 {
        font-size: 41px;
    }

    .aspen-invest-features {
        grid-template-columns:
            1fr 1fr;
    }

    .feature-icon {
        width: 32px;
        height: 32px;
    }

    .aspen-invest-feature span {
        font-size: 12px;
    }

}
/* =========================================================
   ASPEN GLOBAL DESIGN SYSTEM — CONSOLIDATION LAYER
   Keeps legacy section markup intact while unifying spacing,
   surfaces, typography, buttons, motion and responsive behavior.
========================================================= */
:root {
  --aspen-bg: #060909;
  --aspen-surface: #0b0f0e;
  --aspen-surface-2: #111513;
  --aspen-gold: #ddae55;
  --aspen-gold-bright: #f1cf83;
  --aspen-text: #f5f1e8;
  --aspen-muted: #aaa9a2;
  --aspen-border: rgba(221,174,85,.22);
  --aspen-radius: 18px;
  --aspen-shadow: 0 24px 70px rgba(0,0,0,.36);
  --aspen-section-space: clamp(72px, 7vw, 112px);
  --aspen-transition: .28s cubic-bezier(.2,.7,.2,1);
}

body { overflow-x: hidden; background: var(--aspen-bg); }
main { overflow: clip; }

/* Shared rhythm across the custom homepage sections. */
.work-showcase,
.aspen-start-section,
.aspen-legacy-cta,
.aspen-dna-cta,
.aspen-growth-section,
.aspen-commerce-solutions,
.aspen-invest-section,
.aspen-video-showcase,
.aspen-testimonials,
.aspen-founders,
.aspen-appreciations,
.aspen-global-presence {
  position: relative;
  isolation: isolate;
}

/* Consistent focus states and motion. */
a, button, input, select, textarea { transition: border-color var(--aspen-transition), background-color var(--aspen-transition), color var(--aspen-transition), box-shadow var(--aspen-transition), transform var(--aspen-transition), opacity var(--aspen-transition); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--aspen-gold-bright);
  outline-offset: 3px;
}

/* Normalize CTA feel without changing section-specific layouts. */
.case-study-btn,
.aspen-start-btn,
.legacy-button,
.dna-button,
.ags-button,
.acs-btn,
.aspen-invest-btn,
.agp-button {
  border-radius: 4px;
  letter-spacing: .08em;
  font-weight: 700;
}
.case-study-btn:hover,
.aspen-start-btn:hover,
.legacy-button:hover,
.dna-button:hover,
.ags-button:hover,
.acs-btn:hover,
.aspen-invest-btn:hover,
.agp-button:hover { transform: translateY(-2px); }

/* Cards/images use the same premium edge language. */
.work-slide,
.agp-card {
  box-shadow: var(--aspen-shadow);
}
.work-visual,
.agp-card,
.agp-card-image,
.agp-card-image img { overflow: hidden; }
.agp-card-image img,
.work-visual { transition: transform .65s cubic-bezier(.2,.7,.2,1), filter .4s ease; }
.agp-card:hover .agp-card-image img { transform: scale(1.035); }

/* More consistent section transitions on long homepage. */
.aspen-legacy-cta::after,
.aspen-dna-cta::after,
.aspen-growth-section::after,
.aspen-invest-section::after,
.aspen-video-showcase::after,
.aspen-testimonials::after,
.aspen-founders::after,
.aspen-appreciations::after,
.aspen-global-presence::after {
  content: "";
  position: absolute;
  left: 5%; right: 5%; bottom: 0;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(221,174,85,.28), transparent);
}

/* Prevent long labels from causing horizontal overflow. */
.work-showcase *, .aspen-growth-section *, .aspen-commerce-solutions *,
.aspen-video-showcase *, .aspen-testimonials *, .aspen-founders *,
.aspen-appreciations *, .aspen-global-presence * { min-width: 0; }

@media (max-width: 1024px) {
  .container { width: min(var(--max), calc(100% - 36px)); }
}

@media (max-width: 767px) {
  .container { width: calc(100% - 28px); }
  .work-showcase,
  .aspen-video-showcase,
  .aspen-testimonials,
  .aspen-founders,
  .aspen-appreciations,
  .aspen-global-presence { scroll-margin-top: 82px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}


/* ==========================================================
   ASPEN - BUILD YOUR STORY
========================================================== */

.aspen-build-story {
    --gold: #e6b44f;
    --gold-light: #ffd875;
    --white: #ffffff;

    position: relative;

    width: 100%;
    min-height: 850px;

    display: flex;
    align-items: center;

    overflow: hidden;

    background: #030605;
}


/* ==========================================================
   BACKGROUND
========================================================== */

.aspen-build-story__bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.aspen-build-story__bg img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center center;
}


/* ==========================================================
   OVERLAY
========================================================== */

.aspen-build-story__overlay {
    position: absolute;
    inset: 0;
    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .35) 0%,
            rgba(0, 0, 0, .20) 43%,
            rgba(0, 0, 0, .03) 72%,
            rgba(0, 0, 0, .02) 100%
        );
}


/* ==========================================================
   CONTAINER
========================================================== */

.aspen-build-story__container {
    position: relative;
    z-index: 3;

    width: min(1500px, calc(100% - 80px));

    margin: 0 auto;
}


/* ==========================================================
   CONTENT
========================================================== */

.aspen-build-story__content {
    width: 720px;
    max-width: 55%;

    margin-left: 17%;

    text-align: center;
}


/* ==========================================================
   EYEBROW
========================================================== */

.aspen-build-story__eyebrow {
    display: flex;
    flex-direction: column;

    gap: 8px;

    margin-bottom: 28px;

    color: var(--gold-light);

    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;

    letter-spacing: .35em;
}


/* ==========================================================
   DECORATIVE LINE
========================================================== */

.aspen-build-story__divider {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 14px;

    margin: 0 auto 43px;
}


.aspen-build-story__divider span {
    width: 125px;
    height: 1px;

    background: linear-gradient(
        90deg,
        transparent,
        rgba(236, 188, 89, .9)
    );
}


.aspen-build-story__divider span:last-child {
    background: linear-gradient(
        90deg,
        rgba(236, 188, 89, .9),
        transparent
    );
}


.aspen-build-story__divider i {
    display: block;

    width: 14px;
    height: 14px;

    background: var(--gold-light);

    transform: rotate(45deg);

    box-shadow:
        0 0 14px rgba(239, 184, 69, .35);
}


/* ==========================================================
   HEADING
========================================================== */

.aspen-build-story__title {
    margin: 0;

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

    font-size: clamp(48px, 4.2vw, 72px);
    font-weight: 900;

    line-height: .98;

    letter-spacing: -.035em;

    text-transform: uppercase;
}


.aspen-build-story__title span {
    display: block;
}


.aspen-build-story__title .white {
    color: var(--white);
}


.aspen-build-story__title .gold {
    margin-top: 8px;

    color: var(--gold);

    background: linear-gradient(
        90deg,
        #d99b35,
        #ffd875,
        #d99b35
    );

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.aspen-build-story__description {
    margin: 28px 0 0;

    color: rgba(255, 255, 255, .94);

    font-size: 20px;
    font-weight: 400;

    line-height: 1.5;

    letter-spacing: -.01em;
}


/* ==========================================================
   BUTTON
========================================================== */

.aspen-build-story__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 25px;

    min-width: 260px;

    margin-top: 30px;
    padding: 17px 32px;

    color: var(--gold-light);

    border: 1px solid var(--gold);
    border-radius: 3px;

    background: rgba(5, 7, 6, .72);

    font-size: 15px;
    font-weight: 700;

    letter-spacing: .08em;

    text-decoration: none;

    backdrop-filter: blur(7px);

    transition:
        background .3s ease,
        color .3s ease,
        transform .3s ease,
        box-shadow .3s ease;
}


.aspen-build-story__button span {
    font-size: 24px;

    transition: transform .3s ease;
}


.aspen-build-story__button:hover {
    color: #050505;

    background: var(--gold-light);

    transform: translateY(-2px);

    box-shadow:
        0 10px 35px rgba(221, 166, 63, .22);
}


.aspen-build-story__button:hover span {
    transform: translateX(5px);
}


/* ==========================================================
   LAPTOP
========================================================== */

@media (max-width: 1300px) {

    .aspen-build-story {
        min-height: 700px;
    }

    .aspen-build-story__content {
        width: 620px;
        margin-left: 14%;
    }

    .aspen-build-story__title {
        font-size: 52px;
    }

}


/* ==========================================================
   TABLET
========================================================== */

@media (max-width: 1024px) {

    .aspen-build-story {
        min-height: 650px;
    }

    .aspen-build-story__container {
        width: calc(100% - 50px);
    }

    .aspen-build-story__content {
        width: 600px;
        max-width: 70%;

        margin-left: 5%;
    }

    .aspen-build-story__title {
        font-size: 45px;
    }

    .aspen-build-story__eyebrow {
        font-size: 13px;
    }

    .aspen-build-story__description {
        font-size: 17px;
    }

}


/* ==========================================================
   MOBILE
========================================================== */

@media (max-width: 767px) {

    .aspen-build-story {
        min-height: 650px;

        align-items: flex-start;

        padding-top: 70px;
    }

    .aspen-build-story__bg img {
        object-position: 65% center;
    }


    /*
     * Stronger dark area behind text on mobile
     */

    .aspen-build-story__overlay {
        background:
            linear-gradient(
                180deg,
                rgba(0, 0, 0, .78) 0%,
                rgba(0, 0, 0, .58) 50%,
                rgba(0, 0, 0, .15) 100%
            );
    }


    .aspen-build-story__container {
        width: calc(100% - 30px);
    }


    .aspen-build-story__content {
        width: 100%;
        max-width: 100%;

        margin-left: 0;
    }


    .aspen-build-story__eyebrow {
        gap: 6px;

        margin-bottom: 20px;

        font-size: 10px;

        letter-spacing: .25em;
    }


    .aspen-build-story__divider {
        margin-bottom: 28px;
    }


    .aspen-build-story__divider span {
        width: 70px;
    }


    .aspen-build-story__divider i {
        width: 10px;
        height: 10px;
    }


    .aspen-build-story__title {
        font-size: clamp(36px, 10vw, 48px);

        line-height: 1.02;
    }


    .aspen-build-story__description {
        margin-top: 20px;

        padding: 0 10px;

        font-size: 15px;
    }


    .aspen-build-story__description br {
        display: none;
    }


    .aspen-build-story__button {
        min-width: 210px;

        margin-top: 24px;

        padding: 14px 25px;

        font-size: 13px;
    }

}