/* ============ tokens ============ */
:root {
  --background: #ffffff;
  --foreground: #111111;
  --ink: #0a0a0a;
  --muted: #8d8d8d;
  --subtle: #b6b6b6;
  --line: #e6e5e2;
  --surface: #f1f0ee;
  --surface-2: #e3e2df;
  --accent: #b15f2c;
  --accent-from: #cf8047;
  --accent-to: #97501f;
  --radius-pill: 9999px;
  --radius-card: 2rem;
  --radius-card-sm: 1.25rem;
  --radius-control: .875rem;
  --text-watermark: 13rem;
  --container-shell: 88rem;
  --ease-spring: cubic-bezier(.16, 1, .3, 1);
  --ease-spring-soft: cubic-bezier(.22, 1, .36, 1);
  --ease-out-cubic: cubic-bezier(.215, .61, .355, 1);
  --ease-out-quart: cubic-bezier(.165, .84, .44, 1);
  --ease-hover: cubic-bezier(.2, .8, .2, 1);
}

/* ============ reset / base ============ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0
}

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased
}

@media (max-width:1920px) {
  html {
    font-size: 0.833333vw
  }
}

@media (max-width:1440px) {
  html {
    font-size: 1.111111vw
  }
}

@media (max-width:1024px) {
  html {
    font-size: 1.5625vw
  }
}

@media (max-width:640px) {
  html {
    font-size: 4.444444vw
  }
}

body {
  background: #ffffff;
  color: #111111;
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer
}

ul {
  list-style: none
}

img {
  display: block
}

[hidden] {
  display: none !important
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

:focus-visible {
  outline: 2px solid #31D67B;
  outline-offset: 2px
}

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

.shell {
  max-width: 88rem;
  margin-inline: auto
}

.ic {
  width: 1em;
  height: 1em;
  display: inline-block;
  vertical-align: -.125em;
  flex: none
}

/* skip link */
.skip {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.skip:focus {
  position: fixed;
  left: 1rem;
  top: 1rem;
  z-index: 60;
  width: auto;
  height: auto;
  clip: auto;
  border-radius: .875rem;
  background: #0a0a0a;
  padding: .5rem 1rem;
  font-size: .875rem;
  color: #fff
}

/* ============ reveal primitives ============ */
.rv {
  opacity: 0;
  transform: translateY(var(--ty, 16px)) scale(var(--sc, 0.98));
  filter: blur(8px);
  will-change: transform, opacity, filter;
  transition: opacity 1s var(--ease-spring), transform 1s var(--ease-spring), filter 1.2s var(--ease-spring);
  transition-delay: var(--delay, 0ms)
}

.rv.in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0px);
}

.rv.wm {
  --ty: 20px
}

.rv.wm.in {
  opacity: .4
}

.lines .lr {
  display: block;
  overflow: hidden
}

.lines .lr-i {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform .9s var(--ease-out-cubic), opacity .9s var(--ease-out-cubic);
  transition-delay: calc(var(--delay, 0ms) + var(--d, 0ms))
}

.lines.in .lr-i {
  transform: none;
  opacity: 1
}

.words .wi {
  display: inline-block;
  transform: translateY(24px);
  opacity: 0;
  transition: transform .7s var(--ease-out-quart), opacity .7s var(--ease-out-quart);
  transition-delay: calc(var(--delay, 0ms) + var(--d, 0ms))
}

.words.in .wi {
  transform: none;
  opacity: 1
}

.words .muted {
  color: #8d8d8d
}

/* ============ shared components ============ */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .875rem;
  font-weight: 500
}

.eyebrow .dot,
.eyebrow.dark .dot,
.eyebrow.light .dot {
  width: .375rem;
  height: .375rem;
  border-radius: 9999px;
  flex: none;
  background: #31D67B !important;
  box-shadow: 0 0 8px rgba(49, 214, 123, 0.6) !important;
}

.pill {
  display: inline-block
}

.pill .pill-in {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  border-radius: 9999px;
  font-size: .875rem;
  font-weight: 500;
  transition: transform .35s var(--ease-hover)
}

.pill.arrow .pill-in {
  padding: .375rem .375rem .375rem 1.5rem
}

.pill.noarrow .pill-in {
  padding: .875rem 1.75rem
}

.pill.dark .pill-in {
  background: var(--ink);
  color: #fff
}

.pill.light .pill-in {
  background: var(--surface);
  color: #111
}

.pill.outline .pill-in {
  border: 1px solid var(--line);
  background: transparent;
  color: #111
}

.pill .badge {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  font-size: 1rem;
  flex: none
}

.pill.dark .badge {
  background: #fff;
  color: var(--ink)
}

.pill.light .badge,
.pill.outline .badge {
  background: var(--ink);
  color: #fff
}

.pill .badge .ic {
  transition: transform .35s var(--ease-hover)
}

@media (hover:hover) {
  .pill:hover .pill-in {
    transform: scale(1.04)
  }

  .pill:hover .badge .ic {
    transform: translate(var(--ax, 3px), var(--ay, 0px))
  }
}

.tag {
  display: inline-flex;
  border: 1px solid;
  border-radius: 9999px;
  padding: .5rem 1rem;
  font-size: .875rem
}

.tag.light {
  border-color: rgba(255, 255, 255, .25);
  color: #fff
}

.al {
  display: inline-flex
}

.al span {
  display: inline-block;
  opacity: .65;
  transition: transform .35s var(--ease-hover), opacity .35s var(--ease-hover)
}

@media (hover:hover) {
  .al:hover span {
    transform: translateX(var(--tx, 4px));
    opacity: 1
  }
}



/* ============ header ============ */
.hdr {
  position: absolute;
  inset-inline: 0;
  top: 0;
  z-index: 50;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity .7s var(--ease-spring-soft), transform .7s var(--ease-spring-soft);
  transition-delay: 150ms;
  color: #fff;
}

.hdr.in {
  opacity: 1;
  transform: none
}

.hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: 1.25rem
}

.brand .brand-in {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -.01em;
  transition: transform .35s var(--ease-hover)
}

.brand .ic {
  font-size: 1.25rem;
  color: var(--accent)
}

.nav-brand-logo {
  height: 20px;
  width: auto;
  object-fit: contain;
  transition: filter 0.4s ease;
}

@media (hover:hover) {
  .brand:hover .brand-in {
    transform: scale(1.04)
  }
}

.hdr-nav {
  display: none
}

.hdr-nav ul {
  display: flex;
  gap: 2rem;
  font-size: .875rem;
  font-weight: 500
}

.nav-link span {
  display: inline-block;
  opacity: .8;
  transition: transform .35s var(--ease-hover), opacity .35s var(--ease-hover)
}

.nav-link .caret {
  font-size: .75rem;
  opacity: .6;
  margin-left: .125rem
}

@media (hover:hover) {
  .nav-link:hover span {
    transform: translateY(-2px);
    opacity: 1
  }
}

.hdr-right {
  display: flex;
  align-items: center;
  gap: .75rem
}

.clock-chip {
  display: none;
  align-items: center;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: .875rem;
  padding: .5rem .75rem;
  gap: .75rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .7)
}

.clock-chip .lbl {
  color: rgba(255, 255, 255, .45)
}

.clock-chip .time {
  min-width: 3.5rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  color: #fff
}

.clock-chip .sep {
  color: rgba(255, 255, 255, .3)
}

.clock-chip .date {
  font-weight: 500
}

.menu-btn {
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: .875rem;
  transition: background .3s;
  color: #fff
}

.menu-btn .menu-btn-in {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  transition: transform .35s var(--ease-hover)
}

.menu-btn .ic {
  font-size: .875rem
}

.menu-word {
  display: none
}

@media (hover:hover) {
  .menu-btn:hover {
    background: rgba(255, 255, 255, .15)
  }

  .menu-btn:hover .menu-btn-in {
    transform: scale(1.05)
  }
}

/* ============ hero ============ */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: 0 0 2rem 2rem;
  background: #0a0a0a;
  color: #fff
}

.liquid {
  position: absolute;
  inset: 0;
  z-index: 0
}

.liquid-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

.liquid canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none
}

.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 10, 10, .6), transparent, rgba(10, 10, 10, .6))
}

.hero .rv {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(8px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), filter 0.7s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}

.hero .rv.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hero-wm.rv.wm.in {
  opacity: 0.4;
}

.hero-wm {
  pointer-events: none;
  position: absolute;
  inset-inline: 0;
  bottom: 7rem;
  z-index: 1;
  text-align: center;
  user-select: none;
  font-weight: 700;
  line-height: 1;
  font-size: 13rem;
  color: rgba(255, 255, 255, .03)
}

.hero-grid {
  position: relative;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding: 7rem 1.25rem 5rem
}

.hero-left {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  align-items: flex-start
}

.hero-h1 {
  max-width: 18ch;
  font-size: 2.25rem;
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.02em
}

.rating {
  display: flex;
  align-items: center;
  gap: .75rem
}

.rating .stars {
  color: var(--accent);
  font-size: 1rem;
  display: inline-flex;
  gap: .125rem
}

.rating-t {
  font-size: .875rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .7)
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem
}

.hero .pill.outline .pill-in {
  border-color: rgba(255, 255, 255, .3);
  color: #fff
}

@media (hover:hover) {
  .hero .pill.outline:hover .pill-in {
    background: rgba(255, 255, 255, .05)
  }
}

.hero-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem
}

.hero-card {
  width: 100%;
  max-width: 24rem;
  border-radius: 1.25rem;
  background: rgba(17, 17, 17, .5);
  padding: .5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px)
}

.hc-row {
  display: flex;
  gap: .5rem;
  cursor: pointer;
  border-radius: .875rem
}

.hc-tile {
  aspect-ratio: 1;
  width: 6rem;
  display: grid;
  place-items: center;
  border-radius: .875rem;
  background: rgba(255, 255, 255, .1);
  font-size: 1.875rem;
  color: #fff;
  flex: none
}

.hc-tile .ic {
  color: var(--accent-from)
}

.hc-panel {
  flex: 1;
  border-radius: .875rem;
  background: rgba(255, 255, 255, .05);
  padding: .75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-width: 0
}

.hc-slot {
  position: relative;
  min-height: 3.25rem
}

.ci {
  position: absolute;
  inset: 0;
  transition: transform .45s var(--ease-spring), opacity .45s var(--ease-spring)
}

.ci.from-up {
  transform: translateY(-14px);
  opacity: 0
}

.ci.from-down {
  transform: translateY(14px);
  opacity: 0
}

.ci.out-up {
  transform: translateY(-14px);
  opacity: 0
}

.ci.out-down {
  transform: translateY(14px);
  opacity: 0
}

.ci-cap {
  font-size: .65rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .5)
}

.ci-title {
  max-width: 8rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.35;
  color: #fff
}

.hc-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem
}

.hc-dots {
  display: flex;
  gap: .25rem
}

.hc-dot {
  height: .25rem;
  border-radius: 9999px;
  width: .375rem;
  background: rgba(255, 255, 255, .2);
  transition: all .3s
}

.hc-dot.active {
  width: 1rem;
  background: rgba(255, 255, 255, .8)
}

.hc-btns {
  display: flex;
  gap: .375rem
}

.hc-btn {
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .7);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .1);
  font-size: .875rem;
  transition: color .3s, background .3s
}

.hc-btn.prev .ic {
  transform: rotate(180deg)
}

@media (hover:hover) {
  .hc-btn:hover {
    color: #fff;
    background: rgba(255, 255, 255, .2)
  }
}

.partners {
  width: 100%;
  max-width: 24rem
}

.partners-label {
  margin-bottom: .75rem;
  font-size: .75rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .5);
  text-align: left
}

.partners-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: 1rem;
  row-gap: .75rem
}

.partner {
  display: flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .7);
  opacity: .7;
  transition: transform .35s var(--ease-hover), opacity .35s var(--ease-hover)
}

.partner .ic {
  font-size: .875rem;
  color: rgba(255, 255, 255, .4)
}

@media (hover:hover) {
  .partner:hover {
    transform: translateY(-2px);
    opacity: 1
  }
}

.status {
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.25rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .6)
}

.status-mid {
  display: none
}

.status-r {
  display: inline-flex;
  gap: .5rem
}

/* ============ about ============ */
.about {
  background: #fff
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 3rem;
  padding: 5rem 1.25rem
}

.about-left {
  position: relative;
  min-height: 14rem
}

.about-globe {
  position: absolute;
  left: -1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12rem;
  color: rgba(17, 17, 17, .1)
}

.about-left .eyebrow {
  position: relative
}

.about-note {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .875rem;
  color: rgba(17, 17, 17, .7)
}

.about-note .ic {
  font-size: 1.5rem;
  color: #111
}

.about-note-t {
  max-width: 14rem;
  display: inline-block
}

.about-right {
  display: flex;
  flex-direction: column;
  gap: 2.5rem
}

.about-h2 {
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -.01em
}

.about-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  border-top: 1px solid #e6e5e2;
  padding-top: 1.5rem
}

.about-find {
  font-size: .875rem;
  color: rgba(17, 17, 17, .45);
  margin-bottom: .625rem
}

.socials {
  display: flex;
  gap: .5rem
}

.soc {
  width: 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  font-size: .875rem;
  background: var(--surface);
  color: rgba(17, 17, 17, .7)
}

.soc .ic {
  transition: transform .35s var(--ease-hover)
}

.soc-x {
  background: var(--accent);
  color: #fff
}

@media (hover:hover) {
  .soc:hover .ic {
    transform: scale(1.18)
  }
}

/* ============ create band ============ */
.band {
  background: #fff
}

.band-list {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 2.5rem 1.25rem
}

.band-list li {
  flex: 1
}

.tile {
  display: grid;
  place-items: center;
  height: 6rem;
  border-radius: 9999px;
  font-size: 1.875rem;
  font-weight: 500;
  transition: transform .4s var(--ease-hover)
}

.t-light {
  background: var(--surface);
  color: #111
}

.t-accent {
  background: linear-gradient(to bottom right, #cf8047, #97501f);
  color: #fff
}

.t-dark {
  background: var(--ink);
  color: #fff;
  font-size: 2.25rem
}

.t-ghost {
  background: rgba(241, 240, 238, .6);
  color: rgba(17, 17, 17, .35)
}

@media (hover:hover) {
  .tile:hover {
    transform: scale(1.03)
  }
}

/* ============ portfolio ============ */
.works {
  background: #fff
}

.works-in {
  padding: 2.5rem 1.25rem 5rem
}

.works-head {
  text-align: center
}

.works-head .eyebrow {
  border: 1px solid #e6e5e2;
  border-radius: 9999px;
  padding: .375rem 1rem
}

.works-h2 {
  width: fit-content;
  margin: 1.25rem auto 3rem;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem
}

.work-card {
  position: relative;
  min-height: 22rem;
  overflow: hidden;
  border-radius: 2rem;
  background: var(--ink);
  padding: 1.5rem;
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .05);
  transition: transform .5s var(--ease-spring);
  display: block;
  height: 100%
}

.wk-meta {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .45)
}

.wk-badge {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: rgba(255, 255, 255, .1);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .15);
  font-size: 1rem;
  transition: transform .45s var(--ease-spring);
  flex: none
}

.wk-wm {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none
}

.wk-wm .ic {
  font-size: 4.5rem;
  color: rgba(255, 255, 255, .9)
}

.wk-wm .reg {
  font-size: .75rem;
  color: rgba(255, 255, 255, .6);
  vertical-align: top
}

.wk-bottom {
  position: absolute;
  inset-inline: 1.5rem;
  bottom: 1.5rem;
  z-index: 2
}

.wk-bottom h3 {
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.wk-bottom p {
  margin-top: .5rem;
  max-width: 28rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55)
}

.wk-tags {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem
}

@media (hover:hover) {
  .work-card:hover {
    transform: translateY(-8px) scale(1.012)
  }

  .work-card:hover .wk-badge {
    transform: rotate(45deg) scale(1.08)
  }
}

/* ============ services ============ */
.services {
  background: #fff
}

.services-in {
  padding: 5rem 1.25rem
}

.services-h2 {
  margin: 1.25rem 0 3rem;
  max-width: 16ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.svc-list li {
  border-top: 1px solid #e6e5e2
}

.svc-list li:first-child {
  border-top: none
}

.svc-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  border-radius: 1.25rem;
  padding: 1.5rem;
  width: 100%;
  text-align: left;
  transition: background .4s var(--ease-hover), padding .4s var(--ease-hover)
}

.svc-i {
  width: 1.75rem;
  font-size: .875rem;
  font-weight: 500;
  color: rgba(17, 17, 17, .4);
  flex: none
}

.svc-row h3 {
  flex: 1;
  font-size: 1.5rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.svc-d {
  display: none;
  max-width: 20rem;
  font-size: .875rem;
  color: rgba(17, 17, 17, .55)
}

.svc-badge {
  width: 2.5rem;
  height: 2.5rem;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--ink);
  color: #fff;
  flex: none;
  transition: transform .4s var(--ease-hover)
}

@media (hover:hover) {
  .svc-row:hover {
    background: rgba(241, 240, 238, 1);
    padding-left: 2rem;
    padding-right: 1.25rem
  }

  .svc-row:hover .svc-badge {
    transform: translateX(5px)
  }
}

/* ============ stats ============ */
.stats {
  background: #fff
}

.stats-in {
  padding: 0 1.25rem 5rem
}

.stats-panel {
  border-radius: 2rem;
  background: var(--ink);
  padding: 3rem 1.5rem;
  color: #fff
}

.stats-h2 {
  margin-top: 1rem;
  max-width: 20ch;
  font-size: 1.875rem;
  font-weight: 500;
  letter-spacing: -.01em
}

.stats-grid {
  margin-top: 3.5rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: 2rem;
  row-gap: 3rem
}

.stat-v {
  font-size: 3rem;
  font-weight: 600;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums
}

.stat-l {
  margin-top: .75rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55)
}

/* ============ footer ============ */
.footer {
  position: relative;
  overflow: hidden;
  border-radius: 2rem 2rem 0 0;
  background: var(--ink);
  color: #fff
}

.footer-in {
  position: relative;
  z-index: 10;
  padding: 5rem 1.25rem 2.5rem
}

.footer-cta {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  padding-bottom: 4rem;
  align-items: flex-start
}

.footer-h2 {
  max-width: 16ch;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding-block: 4rem
}

.fcol-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.125rem;
  font-weight: 600
}

.fcol-brand .ic {
  font-size: 1.25rem;
  color: var(--accent-from)
}

.fcol-tag {
  margin-top: 1rem;
  max-width: 20rem;
  font-size: .875rem;
  color: rgba(255, 255, 255, .55)
}

.fcol-t {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .4);
  margin-bottom: 1.25rem
}

.fcol ul {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  font-size: .875rem
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding-top: 2rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .45)
}

.legal-links {
  display: flex;
  gap: 1.5rem
}

.legal-links .al span {
  opacity: .7;
  --tx: 3px
}

.footer-wm {
  position: absolute;
  inset-inline: 0;
  bottom: -1.5rem;
  z-index: 0;
  text-align: center;
  pointer-events: none;
  user-select: none;
  font-weight: 700;
  line-height: 1;
  font-size: 13rem;
  color: rgba(255, 255, 255, .05)
}

/* ============ nav menu overlay ============ */
.menu {
  position: fixed;
  inset: 0;
  z-index: 115;
  display: flex;
  flex-direction: column;
  background: var(--ink);
  color: #fff;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s ease, visibility 0s .35s
}

.menu.open {
  opacity: 1;
  visibility: visible;
  transition: opacity .35s ease
}

.menu-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem;
  width: 100%
}

.menu-brand {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: 1.125rem;
  font-weight: 600
}

.menu-brand .ic {
  font-size: 1.25rem;
  color: var(--accent-from)
}

.menu-close {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: .875rem;
  padding: .5rem 1rem;
  font-size: .75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: rgba(255, 255, 255, .7);
  transition: border-color .3s, color .3s
}

.menu-close .ic {
  font-size: .875rem
}

@media (hover:hover) {
  .menu-close:hover {
    border-color: rgba(255, 255, 255, .4);
    color: #fff
  }
}

.menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  padding-inline: 1.25rem
}

.menu-nav ul {
  display: flex;
  flex-direction: column;
  gap: .25rem
}

.mi {
  transform: translateY(1rem);
  opacity: 0;
  transition: transform .5s ease-out, opacity .5s ease-out;
  transition-delay: 0ms
}

.menu.open .mi {
  transform: none;
  opacity: 1;
  transition-delay: var(--sd, 0ms)
}

.mi-btn {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  padding-block: .5rem;
  text-align: left;
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -.02em;
  width: 100%
}

.mi-i {
  font-size: 1rem;
  font-weight: 400;
  color: rgba(255, 255, 255, .3);
  transition: color .3s
}

.mi-l {
  color: rgba(255, 255, 255, .7);
  transition: color .3s
}

@media (hover:hover) {
  .mi-btn:hover .mi-i {
    color: var(--accent-from)
  }

  .mi-btn:hover .mi-l {
    color: #fff
  }
}

.menu-bottom {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.5rem 1.25rem;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .025em;
  color: rgba(255, 255, 255, .45);
  width: 100%
}

.menu-cta {
  color: rgba(255, 255, 255, .7);
  text-transform: uppercase;
  letter-spacing: .025em;
  font-size: .75rem;
  text-align: left;
  transition: color .3s
}

@media (hover:hover) {
  .menu-cta:hover {
    color: #fff;
    text-decoration: underline
  }
}

/* ============ workspace panel ============ */
.workspace-overlay {
  position: fixed;
  inset: 0;
  z-index: 110;
  background: rgba(3, 7, 5, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s cubic-bezier(.22, 1, .36, 1), visibility 0s 0.7s;
}

.workspace-overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s cubic-bezier(.22, 1, .36, 1);
}

.workspace-panel {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 42%;
  max-width: 640px;
  min-width: 400px;
  background: #0A0A0A;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -10px 0 40px rgba(49, 214, 123, 0.05);
  border-radius: 24px 0 0 24px;
  padding: 96px 48px 32px;
  transform: translateX(100%);
  transition: transform 0.7s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
}

@media (max-width: 768px) {
  .workspace-panel {
    width: 100%;
    min-width: unset;
    border-radius: 0;
    padding: 80px 24px 32px;
    border-left: none;
  }
}

.workspace-overlay.open .workspace-panel {
  transform: translateX(0);
}

.workspace-overlay.closing .workspace-panel {
  transform: translateX(100%);
}

.ws-close {
  position: absolute;
  top: 96px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s;
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.05);
  z-index: 2;
  opacity: 0;
  transition: opacity 0.5s ease, background 0.3s, color 0.3s;
}

@media (max-width: 768px) {
  .ws-close {
    top: 80px;
    right: 16px;
  }
}

.workspace-overlay.open .ws-close {
  opacity: 1;
  transition-delay: 500ms;
}

.ws-close:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.15);
}

.ws-head {
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-right: 56px;
}

.ws-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  gap: 8px;
}

.ws-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #31D67B;
  box-shadow: 0 0 10px #31D67B;
}

.ws-h2 {
  font-size: 1.75rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: #fff;
}

.ws-desc {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-top: 4px;
}

.ws-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.ws-fields-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 600px) {
  .ws-fields-group {
    grid-template-columns: 1fr;
  }
}

.ws-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ws-cap {
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}

.ws-input,
.ws-select,
.ws-textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 12px 16px;
  font-family: inherit;
  font-size: 15px;
  color: #fff;
  outline: none;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.ws-textarea {
  resize: vertical;
}

.ws-select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 16px;
  padding-right: 48px;
  cursor: pointer;
}

.ws-select option {
  background: #0A0A0A;
  color: #fff;
}

.ws-input:focus,
.ws-select:focus,
.ws-textarea:focus {
  border-color: #31D67B;
  background: rgba(49, 214, 123, 0.05);
  box-shadow: 0 0 0 1px rgba(49, 214, 123, 0.5), 0 0 24px rgba(49, 214, 123, 0.15);
}

.ws-bottom {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 8px;
}

.ws-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: #fff;
  color: #000;
  border: none;
  border-radius: 99px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.ws-btn-primary:hover {
  background: #31D67B;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(49, 214, 123, 0.2);
}

.ws-btn-primary .ic {
  width: 16px;
  height: 16px;
}

.ws-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 99px;
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s;
}

.ws-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* Stagger animations for fields */
.ws-anim {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.workspace-overlay.open .ws-anim {
  opacity: 1;
  transform: translateY(0);
}

.workspace-overlay.open .ws-fields-group:nth-child(1) {
  transition-delay: 200ms;
}

.workspace-overlay.open .ws-anim:nth-child(2) {
  transition-delay: 280ms;
}

.workspace-overlay.open .ws-anim:nth-child(3) {
  transition-delay: 360ms;
}

.workspace-overlay.open .ws-anim:nth-child(4) {
  transition-delay: 440ms;
}

.workspace-overlay.open .ws-anim:nth-child(5) {
  transition-delay: 520ms;
}

.ws-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-block: 4rem;
  gap: 16px;
}

.ws-badge {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(49, 214, 123, 0.1);
  color: #31D67B;
  font-size: 28px;
  margin-bottom: 8px;
}

.ws-success h2 {
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.ws-success p {
  max-width: 36ch;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 16px;
}

/* ============ breakpoints ============ */
@media (min-width:640px) {
  .hdr-in {
    padding: 1.5rem 2rem
  }

  .menu-word {
    display: inline
  }

  .hero-grid {
    padding: 7rem 2rem 5rem
  }

  .hero-h1 {
    font-size: 3rem
  }

  .status {
    padding: 1.25rem 2rem
  }

  .status-mid {
    display: inline
  }

  .about-grid {
    padding: 5rem 2rem
  }

  .about-globe {
    font-size: 16rem
  }

  .about-h2 {
    font-size: 1.875rem
  }

  .band-list {
    flex-direction: row;
    gap: 1rem;
    padding: 2.5rem 2rem
  }

  .tile {
    height: 10rem;
    font-size: 2.25rem
  }

  .t-dark {
    font-size: 3rem
  }

  .works-in {
    padding: 2.5rem 2rem 5rem
  }

  .works-h2 {
    font-size: 3rem
  }

  .work-card {
    min-height: 26rem;
    padding: 2rem
  }

  .wk-bottom {
    inset-inline: 2rem;
    bottom: 2rem
  }

  .wk-bottom h3 {
    font-size: 1.875rem
  }

  .services-in {
    padding: 5rem 2rem
  }

  .services-h2 {
    margin-bottom: 3.5rem;
    font-size: 3rem
  }

  .svc-row {
    gap: 1.5rem;
    padding-block: 2rem
  }

  .svc-i {
    width: 2.5rem
  }

  .svc-row h3 {
    font-size: 1.875rem
  }

  .svc-badge {
    width: 3rem;
    height: 3rem
  }

  .stats-in {
    padding: 0 2rem 5rem
  }

  .stats-panel {
    padding: 4rem 2rem
  }

  .stat-v {
    font-size: 3.75rem
  }

  .footer-in {
    padding: 5rem 2rem 2.5rem
  }

  .footer-h2 {
    font-size: 3rem
  }

  .footer-legal {
    flex-direction: row
  }

  .menu-top {
    padding: 1.5rem 2rem
  }

  .menu-nav {
    padding-inline: 2rem
  }

  .mi-btn {
    font-size: 3.75rem
  }

  .menu-bottom {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1.5rem 2rem
  }

  .modal {
    align-items: center
  }

  .modal-panel {
    padding: 2rem
  }

  .m-h2 {
    font-size: 1.875rem
  }

  .ldr-brand {
    font-size: 1.875rem
  }
}

@media (min-width:768px) {
  .clock-chip {
    display: flex
  }

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

  .svc-row h3 {
    font-size: 2.25rem
  }

  .stats-panel {
    padding-inline: 4rem
  }

  .stats-h2 {
    font-size: 2.25rem
  }

  .stat-v {
    font-size: 4.5rem
  }

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

  .footer-h2 {
    font-size: 3.75rem
  }
}

@media (min-width:1024px) {
  .hdr-nav {
    display: block
  }

  .hero-grid {
    display: grid;
    min-height: 100lvh;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
    padding: 9rem 2rem 7rem
  }

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

  .hero-right {
    grid-column: span 5;
    align-items: flex-end
  }

  .hero-card {
    width: 19rem
  }

  .partners {
    width: 19rem
  }

  .partners-label {
    text-align: right
  }

  .about-grid {
    grid-template-columns: 1fr 1fr;
    padding-block: 7rem
  }

  .about-left {
    min-height: 20rem
  }

  .about-globe {
    left: -1.5rem;
    font-size: 20rem
  }

  .works-in {
    padding-bottom: 7rem
  }

  .services-in {
    padding-block: 7rem
  }

  .svc-d {
    display: block
  }

  .stats-in {
    padding-bottom: 7rem
  }

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

  .footer-in {
    padding-top: 6rem
  }

  .footer-cta {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between
  }

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

/* Premium About Section Overrides (Celestial Orbit System) */
.about-arc {
  background: transparent !important;
  color: #ffffff;
  position: relative;
  height: 450vh;
  /* Scroll height for progressive orbits reveal */
  border-radius: 44px 44px 0 0 !important;
  margin-top: -36px !important;
  z-index: 10;
}

.about-arc::before {
  content: "" !important;
  display: block !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px;
  background-color: #F8FAF8 !important;
  z-index: 1;
  pointer-events: none;
}

.arc-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  border-radius: 44px 44px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 -24px 60px rgba(0, 0, 0, 0.4);
}

.arc-sticky::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 35%;
  background: linear-gradient(to bottom, transparent 0%, #060B08 100%);
  pointer-events: none;
  z-index: 3;
}

#arc-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: block;
  z-index: 1;
}

.arc-editorial-container {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 0;
}

.arc-header {
  width: 100%;
  max-width: 680px;
  pointer-events: auto;
}

.arc-header .editorial-title {
  font-size: clamp(2.5rem, 4.5vw, 3.75rem) !important;
  margin-bottom: 0.75rem !important;
}

.arc-header .editorial-subtitle {
  font-size: clamp(1rem, 1.5vw, 1.2rem) !important;
  line-height: 1.5 !important;
}

.arc-editorial-narratives {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.arc-editorial-step {
  position: absolute;
  width: clamp(320px, 24vw, 420px);
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px) scale(0.98);
  pointer-events: auto;
  transition: none;
  /* Controlled by GSAP */

  /* Transparent emerald glass cube styling */
  background: rgba(6, 20, 14, 0.4);
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(49, 214, 123, 0.15) !important;
  border-radius: 18px !important;
  /* Medium from design system */
  padding: 2.25rem !important;
  box-shadow:
    0 30px 60px rgba(0, 0, 0, 0.4),
    inset 0 0 25px rgba(49, 214, 123, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Steps absolute positioning around viewport */
.arc-editorial-step.step-1 {
  bottom: 12%;
  left: 2%;
}

.arc-editorial-step.step-2 {
  top: 15%;
  right: 2%;
}

.arc-editorial-step.step-3 {
  bottom: 12%;
  right: 2%;
}

.arc-editorial-step.step-4 {
  top: 15%;
  left: 2%;
}

.arc-label {
  font-size: 0.75rem;
  letter-spacing: 0.25em;
  color: var(--text-muted);
  font-weight: 700;
  display: block;
  margin-bottom: 0.75rem;
}

.arc-h2 {
  font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
  font-weight: 800 !important;
  color: var(--text-primary) !important;
  margin: 0 0 0.5rem 0 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.1 !important;
}

.arc-h3 {
  font-size: clamp(1.1rem, 2vw, 1.35rem) !important;
  font-weight: 500 !important;
  color: var(--text-secondary) !important;
  margin: 0 0 1rem 0 !important;
  line-height: 1.35 !important;
}

.arc-p {
  color: var(--text-muted) !important;
  font-size: 0.95rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
}

.highlight-green {
  color: var(--primary-green) !important;
  font-weight: 600;
}

@media (max-width: 1024px) {
  .about-arc {
    height: auto !important;
  }

  .arc-sticky {
    position: relative !important;
    height: auto !important;
    overflow: visible !important;
    display: block !important;
    padding: 4rem 0 !important;
  }

  #arc-canvas {
    position: sticky !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    margin-bottom: -100vh !important; /* Pull content up over the sticky canvas */
    z-index: 1 !important;
  }

  .arc-editorial-container {
    height: auto !important;
    pointer-events: auto !important;
    padding: 0 !important;
  }

  .arc-editorial-narratives {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    gap: 4rem;
  }

  .arc-editorial-step {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    width: 100% !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
  }
}

/* ============ UNIFIED DARK CANVAS (The Arc → Footer) ============ */
.dark-canvas {
  --bg-primary: #000000;
  --bg-secondary: #0A0A0A;
  --surface-section: #0F0F0F;
  --surface-card: #141414;
  --glass-layer: rgba(255, 255, 255, 0.04);
  --primary-green: #31D67B;
  --secondary-green: #5BEA9A;
  --highlight-green: #8FFFC5;
  --text-primary: #F6F8F7;
  --text-secondary: #B2BBB6;
  --text-muted: #6E7A73;
  --border-color: rgba(255, 255, 255, 0.08);
  --divider-color: rgba(255, 255, 255, 0.05);

  position: relative;
  background-color: #000000;

  /* Subtle ambient green glow — fixed to viewport but scoped to this canvas */
  background-image:
    radial-gradient(ellipse 70% 50% at 50% 60%, rgba(8, 50, 28, 0.55) 0%, transparent 100%),
    radial-gradient(ellipse 50% 40% at 50% 55%, rgba(15, 75, 40, 0.3) 0%, transparent 100%);
  background-attachment: fixed;
  background-position: center bottom;
  background-repeat: no-repeat;

  color: var(--text-primary);
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Premium Selected Work Section (Exhibition/Museum aesthetic) */
.selected-work-section {
  background: transparent !important;
  color: var(--text-primary) !important;
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important;
  padding: 4rem 0 3rem 0 !important;
  position: relative;
  z-index: 2;
  overflow: hidden;
}

.selected-work-section::before {
  display: none;
}

.works-container {
  max-width: 1320px !important;
  margin: 0 auto;
  padding: 0 2rem;
}

.works-editorial-intro {
  margin: 0 auto 3rem auto;
  max-width: 800px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.works-editorial-intro .eyebrow {
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary-green) !important;
  background: rgba(49, 214, 123, 0.08) !important;
  border: 1px solid rgba(49, 214, 123, 0.2) !important;
  padding: 0.4rem 1rem;
  border-radius: 99px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.works-editorial-intro .eyebrow .dot {
  background: var(--primary-green);
  box-shadow: 0 0 6px rgba(49, 214, 123, 0.6);
}

.editorial-title {
  font-size: clamp(3rem, 5vw, 4.5rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  color: var(--text-primary) !important;
  line-height: 1.05 !important;
  margin: 0 0 1.5rem 0 !important;
}

.editorial-subtitle {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  margin: 0 !important;
  font-weight: 400 !important;
  max-width: 65ch;
}

/* Featured Project (Loyalyse) - Full Width */
.featured-project-container {
  width: 100%;
  margin-bottom: 3rem;
}

.featured-project-card {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 3rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 26px !important;
  padding: 2.25rem !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
  position: relative;
  height: 420px !important;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.project-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 26px !important;
  padding: 1.75rem !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.project-card:hover,
.featured-project-card:hover {
  transform: translateY(-6px) scale(1.008) !important;
  border-color: rgba(49, 214, 123, 0.28) !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.45),
    inset 0 0 20px rgba(255, 255, 255, 0.02),
    0 0 30px rgba(49, 214, 123, 0.04) !important;
}

/* Cursor Spotlight */
.card-spotlight {
  position: absolute;
  width: 350px;
  height: 350px;
  background: radial-gradient(circle, rgba(49, 214, 123, 0.07) 0%, rgba(49, 214, 123, 0) 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
  z-index: 2;
}

.project-card:hover .card-spotlight,
.featured-project-card:hover .card-spotlight {
  opacity: 1;
}

.featured-project-card .project-image-wrapper {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  height: 100%;
  width: 100%;
}

.image-glow {
  position: absolute;
  inset: -20px;
  background: radial-gradient(circle at 50% 50%, rgba(49, 214, 123, 0.15), transparent 75%);
  opacity: 0;
  z-index: 1;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1), transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.featured-project-card:hover .image-glow {
  opacity: 1;
  transform: scale(1.1);
}

.featured-badge {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  z-index: 10;
  background: rgba(49, 214, 123, 0.12);
  border: 1px solid rgba(49, 214, 123, 0.25);
  color: var(--primary-green);
  font-family: monospace;
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  padding: 0.4rem 0.9rem;
  border-radius: 99px;
  text-transform: uppercase;
  font-weight: 600;
}

.featured-arrow-btn {
  position: absolute;
  top: 2rem;
  right: 2rem;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border-color);
  display: grid;
  place-items: center;
  z-index: 10;
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  color: var(--text-primary);
}

.featured-project-card:hover .featured-arrow-btn {
  border-color: rgba(49, 214, 123, 0.25);
  background: rgba(49, 214, 123, 0.05);
  color: var(--primary-green);
  transform: rotate(15deg);
}

/* 2x2 Asymmetrical Masonry Grid */
.projects-editorial-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.5rem;
  row-gap: 2.5rem;
}

.grid-project-card-wrapper {
  width: 100%;
}

.more-projects-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.9rem 2.25rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-primary) !important;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.more-projects-btn:hover {
  border-color: rgba(49, 214, 123, 0.35) !important;
  background: rgba(49, 214, 123, 0.08) !important;
  color: var(--primary-green) !important;
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 15px 35px rgba(49, 214, 123, 0.15);
}

.more-projects-btn .arrow {
  transition: transform 0.3s ease;
}

.more-projects-btn:hover .arrow {
  transform: translateX(4px);
}

/* Masonry offsets reset to 0 to align them next to each other */
.offset-right {
  margin-top: 0rem;
}

.offset-left-2 {
  margin-top: 0rem;
}

.offset-right-2 {
  margin-top: 0rem;
}

.project-card {
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 28px !important;
  padding: 2.25rem !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  text-decoration: none !important;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: rgba(49, 214, 123, 0.25) !important;
  box-shadow: 0 35px 70px rgba(0, 0, 0, 0.45),
    inset 0 0 30px rgba(255, 255, 255, 0.02),
    0 0 35px rgba(49, 214, 123, 0.02) !important;
}

.project-card .project-image-wrapper {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  aspect-ratio: 16/10;
  width: 100%;
  margin-bottom: 1.5rem;
}

.project-cover-float {
  width: 100%;
  height: 100%;
  animation: float-slow 10s ease-in-out infinite alternate;
}

@keyframes float-slow {
  0% {
    transform: translateY(-4px) rotate(0deg);
  }

  100% {
    transform: translateY(4px) rotate(0.1deg);
  }
}

.project-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-cover,
.featured-project-card:hover .project-cover {
  transform: scale(1.035) !important;
}

.logo-wrapper {
  position: absolute;
  top: 1.15rem;
  left: 1.15rem;
  width: 3rem;
  height: 3rem;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  display: grid;
  place-items: center;
  z-index: 10;
  padding: 0.6rem;
}

.project-logo {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* Card Typography */
.project-info {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.project-category {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.6rem;
  display: block;
  transition: opacity 0.4s ease;
}

.project-card:hover .project-category,
.featured-project-card:hover .project-category {
  opacity: 0.75;
}

.project-name {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  color: var(--text-primary) !important;
  margin: 0 0 0.6rem 0 !important;
  line-height: 1.2 !important;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}

.project-card:hover .project-name,
.featured-project-card:hover .project-name {
  transform: translateY(-3px);
  color: var(--text-primary) !important;
  /* brightens */
}

.project-desc {
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
  color: var(--text-secondary) !important;
  margin: 0 0 1.5rem 0 !important;
}

.project-cta {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  transition: color 0.4s ease;
}

.project-cta .arrow {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-cta .arrow,
.featured-project-card:hover .project-cta .arrow {
  transform: translateX(8px) rotate(15deg);
}

.project-card:hover .project-cta,
.featured-project-card:hover .project-cta {
  color: var(--primary-green) !important;
  /* green accent appears */
}

/* Featured Bottom Layout */
.featured-bottom-left {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: auto;
}

.featured-pills {
  display: flex;
  gap: 0.75rem;
}

.feat-pill {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--secondary-green);
  background: rgba(49, 214, 123, 0.08);
  border: 1px solid rgba(49, 214, 123, 0.2);
  padding: 0.35rem 0.8rem;
  border-radius: 99px;
  letter-spacing: 0.05em;
}

@media (prefers-reduced-motion: reduce) {
  .project-cover-float {
    animation: none !important;
  }

  .project-cover {
    transform: none !important;
  }

  .project-card:hover {
    transform: none !important;
  }

  .project-card:hover .project-cover {
    transform: none !important;
  }

  .project-card:hover .project-name {
    transform: none !important;
  }

  .project-card:hover .project-cta .arrow {
    transform: none !important;
  }
}

@media (max-width: 1024px) {
  .layer-app {
    left: 10px;
    transform: scale(0.8) !important;
  }

  .layer-analytics {
    right: 10px;
    transform: scale(0.8) !important;
  }

  .layer-scanner {
    left: 50%;
    transform: translateX(-50%) scale(0.8) !important;
  }

  /* ============ Premium Design System Overrides (Post-Hero) ============ */
  .about-arc,
  .showcase-section,
  .selected-work-section,
  .works,
  .how-i-build-section,
  .services,
  .process,
  .testimonials,
  .faq,
  footer,
  .menu,
  .modal {
    font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --bg-primary: #060B08;
    --bg-secondary: #0B120E;
    --surface-section: #111916;
    --surface-card: #151E1A;
    --glass-layer: rgba(255, 255, 255, 0.04);
    --primary-green: #31D67B;
    --secondary-green: #5BEA9A;
    --highlight-green: #8FFFC5;
    --text-primary: #F6F8F7;
    --text-secondary: #B2BBB6;
    --text-muted: #6E7A73;
    --border-color: rgba(255, 255, 255, 0.08);
    --divider-color: rgba(255, 255, 255, 0.05);

    background-color: var(--bg-primary) !important;
    color: var(--text-primary) !important;
    transition: background-color 0.4s ease, color 0.4s ease;
  }

  /* Background noise, radial glow Atmosphere */
  .about-arc,
  .showcase-section,
  .selected-work-section,
  .works,
  .how-i-build-section,
  .services,
  .process,
  .testimonials,
  .faq,
  footer {
    position: relative;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E") !important;
    background-blend-mode: overlay;
    opacity: 0.99;
    /* hack to trigger new stacking context for blend mode */
  }

  /* Section specifics */
  .about-arc {
    background: transparent !important;
    padding: 160px 0 !important;
  }

  .about-arc::before {
    display: none !important;
  }

  .showcase-section {
    background: linear-gradient(180deg, var(--bg-primary) 0%, var(--bg-secondary) 100%) !important;
    padding: 160px 0 !important;
  }

  .showcase-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 80% 80%, rgba(49, 214, 123, 0.05), transparent 70%);
    pointer-events: none;
  }

  .works {
    background-color: var(--bg-primary) !important;
    padding: 160px 0 !important;
  }

  .how-i-build-section {
    background-color: var(--bg-primary) !important;
    padding: 60px 0 160px 0 !important;
  }

  .services {
    background-color: var(--surface-section) !important;
    padding: 160px 0 !important;
  }

  .process {
    background-color: var(--surface-section) !important;
    padding: 160px 0 !important;
    border-top: 1px solid var(--divider-color);
  }

  .testimonials {
    background-color: var(--bg-secondary) !important;
    padding: 160px 0 !important;
  }

  .faq {
    background-color: var(--bg-secondary) !important;
    padding: 160px 0 !important;
    border-top: 1px solid var(--divider-color);
  }

  footer {
    background-color: var(--bg-primary) !important;
    padding: 160px 0 80px 0 !important;
  }

  /* Headers, labels, text styling globally in post-hero */
  .about-arc h2,
  .showcase-section h2,
  .works h2,
  .how-i-build-section h2,
  .services h2,
  .process h2,
  .testimonials h2,
  .faq h2,
  footer h2 {
    font-size: 3rem;
    font-weight: 800;
    letter-spacing: -0.03em !important;
    color: var(--text-primary) !important;
  }

  .about-arc p,
  .showcase-section p,
  .works p,
  .how-i-build-section p,
  .services p,
  .process p,
  .testimonials p,
  .faq p,
  footer p {
    color: var(--text-secondary) !important;
    font-size: 1.125rem;
    line-height: 1.8;
  }

  .eyebrow.dark {
    color: var(--secondary-green) !important;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.25em !important;
    font-weight: 600;
  }

  .eyebrow.dark .dot {
    background: var(--primary-green) !important;
  }

  .arc-highlight {
    color: var(--highlight-green) !important;
  }

  /* Cards (World-class specs) */
  .work-card,
  .process div.rv,
  .testimonials div.rv,
  .faq-list details {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 28px !important;
    padding: 2.5rem !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.6s cubic-bezier(.16, 1, .3, 1), box-shadow 0.6s cubic-bezier(.16, 1, .3, 1), border-color 0.6s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .work-card:hover,
  .process div.rv:hover,
  .testimonials div.rv:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(49, 214, 123, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(49, 214, 123, 0.25) !important;
  }

  /* Work card content adjustments */
  .work-card .wk-meta {
    color: var(--text-muted) !important;
  }

  .work-card .wk-badge {
    border: 1px solid var(--border-color) !important;
    background: var(--glass-layer) !important;
    color: var(--text-primary) !important;
  }

  .work-card h3 {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    margin-bottom: 0.5rem;
    color: var(--text-primary) !important;
  }

  .work-card p {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
  }

  .work-card .tag.light {
    background: var(--glass-layer) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--secondary-green) !important;
    border-radius: 99px;
  }

  /* Services styling: minimalist rows with micro interactions */
  .svc-row {
    border-bottom: 1px solid var(--divider-color) !important;
    padding: 2.5rem 0 !important;
    transition: all 0.4s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .svc-row:hover {
    padding-left: 1.5rem !important;
    border-bottom-color: var(--primary-green) !important;
  }

  .svc-row h3 {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em;
    color: var(--text-primary) !important;
  }

  .svc-row .svc-i {
    color: var(--text-muted) !important;
    font-family: monospace;
  }

  .svc-row:hover .svc-i {
    color: var(--primary-green) !important;
  }

  .svc-row .svc-d {
    color: var(--text-secondary) !important;
  }

  .svc-row .svc-badge {
    border-color: var(--border-color) !important;
    background: var(--glass-layer) !important;
    color: var(--text-primary) !important;
  }

  .svc-row:hover .svc-badge {
    background: var(--primary-green) !important;
    color: var(--bg-primary) !important;
    border-color: var(--primary-green) !important;
  }

  /* Process section details override */
  .process div.rv h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 1rem;
  }

  .process div.rv p {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
  }

  /* Testimonials section details override */
  .testimonials div.rv p {
    color: var(--text-primary) !important;
    font-size: 1.125rem !important;
    margin-bottom: 1.5rem !important;
  }

  .testimonials div.rv div p {
    color: var(--text-muted) !important;
    font-size: 0.875rem !important;
  }

  .testimonials div.rv div p:first-child {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
  }

  /* FAQ accordion card design */
  .faq-list details {
    margin-bottom: 1.5rem !important;
    padding: 1.5rem 2rem !important;
    border-radius: 20px !important;
    border: 1px solid var(--border-color) !important;
    box-shadow: none !important;
  }

  .faq-list details summary {
    color: var(--text-primary) !important;
    font-weight: 600 !important;
    font-size: 1.125rem;
  }

  .faq-list details p {
    color: var(--text-secondary) !important;
    margin-top: 1rem;
    font-size: 1rem !important;
  }

  /* Buttons / Pills overhaul */
  .pill {
    font-family: inherit;
    border-radius: 99px !important;
    transition: all 0.4s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .pill.outline {
    background: var(--glass-layer) !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-primary) !important;
  }

  .pill.outline:hover {
    background: var(--text-primary) !important;
    color: var(--bg-primary) !important;
    border-color: var(--text-primary) !important;
    transform: translateY(-2px);
  }

  .pill.light {
    background: var(--primary-green) !important;
    color: var(--bg-primary) !important;
    border: 1px solid var(--primary-green) !important;
    font-weight: 600;
  }

  .pill.light:hover {
    background: var(--highlight-green) !important;
    border-color: var(--highlight-green) !important;
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(49, 214, 123, 0.4);
  }

  /* Footer tweaks */
  .footer-cta h2 {
    font-size: 4rem !important;
    letter-spacing: -0.04em !important;
    margin-bottom: 2.5rem;
  }

  .fcol-brand {
    color: var(--text-primary) !important;
    font-weight: 700;
  }

  .fcol-tag {
    color: var(--text-muted) !important;
    font-size: 0.95rem !important;
  }

  .fcol-t {
    color: var(--secondary-green) !important;
    font-size: 0.875rem !important;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
  }

  .fcol ul li a {
    color: var(--text-secondary) !important;
  }

  .fcol ul li a:hover {
    color: var(--primary-green) !important;
  }

  .footer-legal {
    border-top: 1px solid var(--divider-color) !important;
    color: var(--text-muted) !important;
  }

  .footer-wm {
    color: rgba(255, 255, 255, 0.01) !important;
  }

  /* Philosophy Section specific styling */
  .philosophy {
    background-color: var(--bg-secondary) !important;
    padding: 160px 0 !important;
    position: relative;
  }

  .philosophy::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(49, 214, 123, 0.04), transparent 70%);
    pointer-events: none;
  }

  .philosophy-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 3rem;
  }

  .philosophy-card {
    background: var(--surface-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 28px !important;
    padding: 2.5rem !important;
    backdrop-filter: blur(24px);
    -webkit-backdrop-filter: blur(24px);
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
    transition: transform 0.6s cubic-bezier(.16, 1, .3, 1), box-shadow 0.6s cubic-bezier(.16, 1, .3, 1), border-color 0.6s cubic-bezier(.16, 1, .3, 1) !important;
  }

  .philosophy-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4), 0 0 20px rgba(49, 214, 123, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(49, 214, 123, 0.25) !important;
  }

  .philosophy-card h3 {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    margin-bottom: 1rem;
  }

  .philosophy-card p {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    line-height: 1.6;
  }

  /* Scroll Reveals Translate primitive defaults */
  .rv {
    --ty: 32px !important;
  }

  /* Mobile overrides for Selected Work Section */
  .selected-work-section {
    padding: 8rem 0 !important;
  }

  .works-editorial-intro {
    margin-bottom: 4rem !important;
  }

  .featured-project-card {
    grid-template-columns: 1fr !important;
    height: auto !important;
    gap: 2rem !important;
    padding: 1.75rem !important;
  }

  .projects-editorial-grid {
    grid-template-columns: 1fr !important;
    row-gap: 3rem !important;
    column-gap: 0 !important;
  }

  .offset-right,
  .offset-left-2,
  .offset-right-2 {
    margin-top: 0 !important;
  }

  .project-card {
    padding: 1.75rem !important;
  }

  .project-card .project-image-wrapper {
    margin-bottom: 1.25rem !important;
  }
}

/* ============ HOW I BUILD SECTION ============ */
.how-i-build-section {
  position: relative;
  background: transparent !important;
  color: var(--text-primary, #F6F8F7) !important;
  padding: 60px 0 80px 0 !important;
  overflow: hidden;
  opacity: 1 !important;
}

.how-i-build-section::before {
  display: none;
}

.hib-container {
  position: relative;
  z-index: 2;
  /* Blur reveal state for content */
  opacity: 0;
  transform: translateY(40px);
  filter: blur(10px);
  transition: opacity 1.2s cubic-bezier(.22, 1, .36, 1),
    transform 1.2s cubic-bezier(.22, 1, .36, 1),
    filter 1.2s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform, filter;
}

.how-i-build-section.in .hib-container,
.hib-container.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

.hib-header {
  margin-bottom: 5rem;
}

/* Journey Track & SVG */
.hib-journey {
  position: relative;
  width: 100%;
  min-height: 480px;
  margin-top: 2rem;
}

.hib-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}

.hib-svg-desktop {
  display: block;
}

.hib-svg-mobile {
  display: none;
}

.hib-path-bg {
  stroke-dasharray: 6 6;
  opacity: 0.6;
}

.hib-path-main {
  stroke-dasharray: 2000;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.5s cubic-bezier(.22, 1, .36, 1);
}

.hib-pulse-dot {
  transition: opacity 0.3s ease;
}

/* Slow down electricity pulse when node hovered */
.hib-journey.is-hovered .hib-pulse-dot animateMotion {
  animation-play-state: paused;
}

/* 6 Stages Grid */
.hib-stages-list {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  height: 440px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.hib-stage-item {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 0 0.5rem;
}

/* Stage Placement Alternating */
.hib-stage-top {
  padding-top: 1rem;
}

.hib-stage-bottom {
  padding-bottom: 1rem;
  flex-direction: column-reverse;
}

/* Node Anchors positioning on Desktop Curve */
.hib-stage-1 .hib-node {
  top: 30%;
}

.hib-stage-2 .hib-node {
  top: 66%;
}

.hib-stage-3 .hib-node {
  top: 30%;
}

.hib-stage-4 .hib-node {
  top: 66%;
}

.hib-stage-5 .hib-node {
  top: 30%;
}

.hib-stage-6 .hib-node {
  top: 66%;
}

/* Stage Card Content */
.hib-stage-card {
  max-width: 170px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.7s cubic-bezier(.16, 1, .3, 1), transform 0.7s cubic-bezier(.16, 1, .3, 1);
}

.hib-stage-item.in .hib-stage-card,
.how-i-build-section.in .hib-stage-card {
  opacity: 1;
  transform: translateY(0);
}

.hib-stage-1 .hib-stage-card {
  transition-delay: 100ms;
}

.hib-stage-2 .hib-stage-card {
  transition-delay: 180ms;
}

.hib-stage-3 .hib-stage-card {
  transition-delay: 260ms;
}

.hib-stage-4 .hib-stage-card {
  transition-delay: 340ms;
}

.hib-stage-5 .hib-stage-card {
  transition-delay: 420ms;
}

.hib-stage-6 .hib-stage-card {
  transition-delay: 500ms;
}

.hib-stage-num {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--primary-green, #31D67B);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
}

.hib-stage-title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #F6F8F7) !important;
  letter-spacing: -0.01em !important;
  margin-bottom: 0.5rem !important;
  transition: color 0.3s ease;
}

.hib-stage-desc {
  font-size: 0.875rem !important;
  color: var(--text-secondary, #B2BBB6) !important;
  line-height: 1.5 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Glowing Node Element */
.hib-node {
  position: absolute;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(-50%);
  z-index: 5;
}

.hib-node-core {
  width: 10px;
  height: 10px;
  background: #F6F8F7;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(49, 214, 123, 0.6);
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1),
    background-color 0.35s ease,
    box-shadow 0.35s ease;
}

.hib-node-aura {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 214, 123, 0.7) 0%, rgba(49, 214, 123, 0) 70%);
  opacity: 0.4;
  transform: scale(0.7);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

/* Node Hover & Focus States */
.hib-node:hover .hib-node-core,
.hib-node:focus-visible .hib-node-core {
  transform: scale(1.4);
  background: var(--highlight-green, #8FFFC5);
  box-shadow: 0 0 18px rgba(49, 214, 123, 0.95);
}

.hib-node:hover .hib-node-aura,
.hib-node:focus-visible .hib-node-aura {
  opacity: 1;
  transform: scale(1.5);
}

.hib-stage-item:hover .hib-stage-title {
  color: var(--primary-green, #31D67B) !important;
}

.hib-node:focus-visible {
  outline: 2px solid var(--primary-green, #31D67B);
  outline-offset: 4px;
  border-radius: 50%;
}

/* Responsive Breakpoints */
@media (max-width: 1024px) {
  .how-i-build-section {
    padding: 120px 0 !important;
  }

  .hib-stage-title {
    font-size: 1.1rem !important;
  }

  .hib-stage-desc {
    font-size: 0.8125rem !important;
  }

  .hib-stage-card {
    max-width: 140px;
  }
}

@media (max-width: 768px) {
  .how-i-build-section {
    padding: 90px 0 !important;
  }

  .hib-header {
    margin-bottom: 3rem;
  }

  .hib-journey {
    min-height: 1050px;
  }

  .hib-svg-desktop {
    display: none;
  }

  .hib-svg-mobile {
    display: block;
  }

  .hib-stages-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 1000px;
    padding: 20px 0;
  }

  .hib-stage-item {
    flex-direction: row !important;
    height: auto;
    text-align: left;
    padding: 0;
  }

  /* Alternating left and right layout on mobile vertical curve */
  .hib-stage-1,
  .hib-stage-3,
  .hib-stage-5 {
    flex-direction: row-reverse !important;
    text-align: right;
    justify-content: flex-end;
    padding-right: 55%;
  }

  .hib-stage-1 .hib-node {
    left: 25%;
    top: auto;
  }

  .hib-stage-3 .hib-node {
    left: 25%;
    top: auto;
  }

  .hib-stage-5 .hib-node {
    left: 25%;
    top: auto;
  }

  .hib-stage-2,
  .hib-stage-4,
  .hib-stage-6 {
    justify-content: flex-start;
    padding-left: 55%;
  }

  .hib-stage-2 .hib-node {
    left: 75%;
    top: auto;
  }

  .hib-stage-4 .hib-node {
    left: 75%;
    top: auto;
  }

  .hib-stage-6 .hib-node {
    left: 75%;
    top: auto;
  }

  .hib-stage-card {
    max-width: 100%;
  }
}

/* Accessibility: Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .how-i-build-section {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .hib-stage-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hib-pulse-dot {
    display: none !important;
  }
}

/* ============ CAPABILITIES SECTION (GLOW CARDS SYSTEM - LIGHT SURFACE & GREEN ACCENT) ============ */

.capabilities-section {
  position: relative;
  background-color: #F8FAF8 !important;
  color: #0A0A0A !important;
  padding: 140px 0 160px 0 !important;
  border-radius: 0 !important;
  overflow: hidden;
  z-index: 5;
}

.capabilities-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 30%, rgba(49, 214, 123, 0.09), transparent 70%);
  pointer-events: none;
}

.cap-container {
  position: relative;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 2rem;
  z-index: 2;
}

/* Section Intro */
.cap-intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 5rem auto;
}

.cap-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #1b8a4d;
  margin-bottom: 1.25rem;
}

.cap-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #31D67B;
  box-shadow: 0 0 10px rgba(49, 214, 123, 0.8);
}

.cap-title {
  font-size: clamp(3.25rem, 6vw, 4.75rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.05 !important;
  color: #0A0A0A !important;
  margin: 0 0 1.25rem 0 !important;
}

.cap-description {
  font-size: 1.25rem !important;
  color: #555555 !important;
  line-height: 1.6 !important;
  font-weight: 400 !important;
  max-width: 580px;
  margin: 0 auto;
}

/* Glow Cards Grid */
.glow-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  width: 100%;
}

/* Glow Card Component Engine (Light Surface + Green Glow) */
.glow-card[data-glow] {
  --border-size: 2px;
  --spotlight-size: 280px;
  --radius: 24px;
  --base: 130;
  --spread: 220;
  --hue: calc(var(--base) + (var(--xp, 0) * var(--spread)));

  position: relative;
  border-radius: var(--radius);
  background-color: rgba(255, 255, 255, 0.9);
  border: var(--border-size) solid rgba(0, 0, 0, 0.07);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0;
  box-shadow: 0 16px 36px -10px rgba(0, 0, 0, 0.06), 0 2px 8px rgba(49, 214, 123, 0.04);
  touch-action: none;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 0.4s ease,
    border-color 0.4s ease;

  /* Pointer Spotlight Background Gradient */
  background-image: radial-gradient(var(--spotlight-size) var(--spotlight-size) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      rgba(49, 214, 123, 0.14), transparent 100%);
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position: 50% 50%;
}

/* Glow Card Border Masks */
.glow-card[data-glow]::before,
.glow-card[data-glow]::after {
  pointer-events: none;
  content: "";
  position: absolute;
  inset: calc(var(--border-size) * -1);
  border: var(--border-size) solid transparent;
  border-radius: var(--radius);
  background-attachment: fixed;
  background-size: calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* Primary Spotlight Green Glow Border */
.glow-card[data-glow]::before {
  background-image: radial-gradient(calc(var(--spotlight-size) * 0.85) calc(var(--spotlight-size) * 0.85) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      rgba(49, 214, 123, 0.85), transparent 100%);
  filter: brightness(1.2);
}

/* Secondary Core White Spotlight Border */
.glow-card[data-glow]::after {
  background-image: radial-gradient(calc(var(--spotlight-size) * 0.45) calc(var(--spotlight-size) * 0.45) at calc(var(--x, 0) * 1px) calc(var(--y, 0) * 1px),
      rgba(255, 255, 255, 0.95), transparent 100%);
}

.glow-card[data-glow]>div[data-glow] {
  position: absolute;
  inset: 0;
  will-change: filter;
  border-radius: var(--radius);
  pointer-events: none;
}

.glow-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.1), 0 0 24px rgba(49, 214, 123, 0.2);
  border-color: rgba(49, 214, 123, 0.3);
}

/* Glow Card Emoji Showcase Top Half */
.glow-card-emoji-box {
  position: relative;
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(49, 214, 123, 0.08) 0%, rgba(49, 214, 123, 0.02) 100%);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.glow-card-emoji {
  font-size: 3.75rem;
  line-height: 1;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  filter: drop-shadow(0 8px 16px rgba(49, 214, 123, 0.25));
}

.glow-card:hover .glow-card-emoji {
  transform: scale(1.18) rotate(4deg);
  filter: drop-shadow(0 12px 20px rgba(49, 214, 123, 0.4));
}

.glow-card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #1b8a4d;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(49, 214, 123, 0.25);
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  backdrop-filter: blur(8px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

/* Glow Card Body Half */
.glow-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex-grow: 1;
  background: #ffffff;
}

.glow-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.glow-card-title {
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  color: #0A0A0A !important;
  letter-spacing: -0.02em !important;
  margin: 0 !important;
  transition: color 0.3s ease;
}

.glow-card-desc {
  font-size: 0.9375rem !important;
  color: #555555 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

.glow-card-arrow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #111;
  background: rgba(0, 0, 0, 0.02);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
    color 0.35s ease,
    border-color 0.35s ease,
    background-color 0.35s ease;
}

.glow-card:hover .glow-card-title {
  color: #1b8a4d !important;
}

.glow-card:hover .glow-card-arrow-btn {
  transform: rotate(15deg) scale(1.1);
  color: #31D67B;
  border-color: rgba(49, 214, 123, 0.6);
  background-color: rgba(49, 214, 123, 0.1);
}

/* Scroll Reveals */
.cap-rv {
  opacity: 0;
  transform: translateY(30px);
  filter: blur(6px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.cap-rv.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* Responsive Rules */
@media (max-width: 1200px) {
  .glow-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .capabilities-section {
    padding: 90px 0 !important;
  }

  .glow-cards-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .cap-title {
    font-size: 2.75rem !important;
  }

  .glow-card-media {
    height: 200px;
  }
}

/* ============ WHAT I BELIEVE SECTION (ANIMATED EDITORIAL THREAD EXPERIENCE) ============ */
.what-i-believe-section {
  position: relative;
  background: transparent !important;
  color: var(--text-primary, #F6F8F7) !important;
  padding: 80px 0 160px 0 !important;
  overflow: hidden;
  z-index: 2;
}

.what-i-believe-section::before {
  display: none;
}

.wib-bg-grain {
  position: absolute;
  inset: 0;
  opacity: 0.02;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  pointer-events: none;
}

/* SVG Thread Overlay */
.wib-thread-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.wib-thread-bg {
  stroke-dasharray: none;
  opacity: 0.8;
}

.wib-thread-main {
  stroke-dasharray: 2600;
  stroke-dashoffset: 2600;
  transition: stroke-dashoffset 0.1s linear;
  will-change: stroke-dashoffset;
}

.wib-container {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
  z-index: 2;
}

/* Intro Label & Dot */
.wib-intro {
  margin-bottom: 5rem;
}

.wib-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--secondary-green, #5BEA9A);
}

.wib-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--primary-green, #31D67B);
  box-shadow: 0 0 10px rgba(49, 214, 123, 0.8);
  animation: wibPulse 7s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes wibPulse {

  0%,
  90%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 10px rgba(49, 214, 123, 0.8);
  }

  95% {
    transform: scale(1.6);
    box-shadow: 0 0 18px rgba(49, 214, 123, 1);
  }
}

/* Statements Layout & Text Reveal Mechanism */
.wib-statement-wrapper {
  margin-bottom: 14rem;
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.08;
  filter: blur(8px);
  transform: translateY(30px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, filter, transform;
}

.wib-statement-wrapper:last-child {
  margin-bottom: 4rem;
}

.wib-statement-wrapper.active {
  opacity: 1 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

.wib-statement-wrapper.past {
  opacity: 0.35 !important;
  filter: blur(0) !important;
  transform: translateY(0) !important;
}

.wib-statement-text {
  font-size: clamp(2.5rem, 5vw, 4.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.15 !important;
  color: var(--text-primary, #F6F8F7) !important;
  margin: 0 !important;
  max-width: 860px;
}

/* Stacked Sequence Statement 4 (Build. Learn. Improve. Repeat.) */
.wib-stacked-sequence {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.wib-stacked-sequence span {
  display: block;
  opacity: 0.2;
  transform: translateY(12px);
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.wib-statement-wrapper.active .wib-stacked-sequence span:nth-child(1) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.1s;
}

.wib-statement-wrapper.active .wib-stacked-sequence span:nth-child(2) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.wib-statement-wrapper.active .wib-stacked-sequence span:nth-child(3) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

.wib-statement-wrapper.active .wib-stacked-sequence span:nth-child(4) {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.7s;
  color: var(--primary-green, #31D67B);
}

/* Prefers Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .wib-thread-main {
    stroke-dashoffset: 0 !important;
  }

  .wib-statement-wrapper {
    opacity: 1 !important;
    filter: none !important;
    transform: none !important;
  }

  .wib-stacked-sequence span {
    opacity: 1 !important;
    transform: none !important;
  }
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .what-i-believe-section {
    padding: 110px 0 140px 0 !important;
  }

  .wib-intro {
    margin-bottom: 3.5rem;
  }

  .wib-statement-wrapper {
    margin-bottom: 8rem;
    min-height: 140px;
  }

  .wib-statement-text {
    font-size: clamp(2.1rem, 7vw, 2.75rem) !important;
  }
}

/* ============ TOOLS SECTION (ANIMATED BEAMS INTEGRATION HUB) ============ */
.tools-section {
  position: relative;
  background: transparent !important;
  color: var(--text-primary, #F6F8F7) !important;
  padding: 60px 0 80px 0 !important;
  overflow: hidden;
  z-index: 2;
}

.animated-beam-box {
  position: relative;
  width: 100%;
  max-width: 980px;
  height: 380px;
  margin: 0 auto;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  overflow: hidden;
}

.beam-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.beam-path-bg {
  stroke: rgba(255, 255, 255, 0.09);
  stroke-width: 2;
  stroke-linecap: round;
}

.beam-path-pulse {
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 140 320;
  animation: beamFlow 3.5s linear infinite;
  filter: url(#beam-glow-filter);
}

@keyframes beamFlow {
  from {
    stroke-dashoffset: 460;
  }

  to {
    stroke-dashoffset: -460;
  }
}

.beam-nodes-grid.diamond-grid {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 900px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
}

.beam-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.beam-col-inner-left,
.beam-col-inner-right {
  gap: 4.5rem;
}

.node-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: #ffffff !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease !important;
  cursor: pointer;
}

.node-circle:hover {
  transform: scale(1.14) !important;
  box-shadow: 0 0 35px rgba(49, 214, 123, 0.65), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}

.node-hub {
  width: 108px;
  height: 108px;
  border: 3.5px solid #31D67B !important;
  box-shadow: 0 0 55px rgba(49, 214, 123, 0.6), inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  animation: hubPulse 4s ease-in-out infinite alternate;
  padding: 0 !important;
  overflow: hidden !important;
  background: #000000 !important;
}

.tool-icon-img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  pointer-events: none;
}

.user-avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  border-radius: 50%;
}

@keyframes hubPulse {
  0% {
    box-shadow: 0 0 35px rgba(49, 214, 123, 0.4);
  }

  100% {
    box-shadow: 0 0 65px rgba(49, 214, 123, 0.75);
  }
}

@media (max-width: 900px) {
  .animated-beam-box {
    height: 380px;
  }

  .node-circle {
    width: 52px;
    height: 52px;
  }

  .node-hub {
    width: 84px;
    height: 84px;
  }

  .beam-nodes-grid.orbital-grid {
    gap: 0.75rem;
  }
}

@media (max-width: 600px) {
  .tools-section {
    padding: 50px 0 50px 0 !important;
  }

  .animated-beam-box {
    height: 340px;
    padding: 0.25rem;
  }

  .node-circle {
    width: 42px;
    height: 42px;
  }

  .node-hub {
    width: 72px;
    height: 72px;
  }

  .beam-col {
    gap: 1.25rem;
  }
}

/* ============ EXPERTISE MARQUEE COMPONENT ============ */
.expertise-section {
  margin-top: 2.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.expertise-header {
  margin-bottom: 2.25rem;
  text-align: center;
}

.expertise-label {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
}

.expertise-marquee-container {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

.expertise-marquee-row {
  width: 100%;
  overflow: hidden;
  display: flex;
  user-select: none;
}

.marquee-track {
  display: flex;
  width: max-content;
  align-items: center;
  will-change: transform;
}

.marquee-row-left .marquee-track {
  animation: marqueeLeft 38s linear infinite;
}

.marquee-row-right .marquee-track {
  animation: marqueeRight 38s linear infinite;
}

.expertise-marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

.marquee-group {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.skill-item {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 22px;
  font-weight: 550;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  transition: color 250ms cubic-bezier(0.16, 1, 0.3, 1), transform 250ms cubic-bezier(0.16, 1, 0.3, 1), opacity 250ms cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
  display: inline-block;
}

.skill-item:hover {
  color: #31D67B !important;
  opacity: 1 !important;
  transform: scale(1.03);
}

.skill-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #31D67B;
  margin: 0 50px;
  flex-shrink: 0;
  box-shadow: 0 0 8px rgba(49, 214, 123, 0.6);
  pointer-events: none;
}

@keyframes marqueeLeft {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translate3d(-50%, 0, 0);
  }

  100% {
    transform: translate3d(0, 0, 0);
  }
}

@media (max-width: 1024px) {
  .expertise-section {
    margin-top: 4rem;
  }

  .skill-item {
    font-size: 18px;
  }

  .skill-dot {
    margin: 0 35px;
  }
}

@media (max-width: 768px) {
  .expertise-section {
    margin-top: 3rem;
  }

  .expertise-marquee-container {
    gap: 1.25rem;
  }

  .skill-item {
    font-size: 16px;
  }

  .skill-dot {
    width: 4px;
    height: 4px;
    margin: 0 25px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .marquee-track {
    animation: none !important;
    width: 100% !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.25rem !important;
    padding: 1rem 0 !important;
  }

  .marquee-group[aria-hidden="true"] {
    display: none !important;
  }

  .expertise-marquee-container {
    mask-image: none !important;
    -webkit-mask-image: none !important;
    overflow: visible !important;
    width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ============ VOICES SECTION (EDITORIAL TESTIMONIALS) ============ */
.voices-section {
  position: relative;
  background: transparent !important;
  color: var(--text-primary, #F6F8F7) !important;
  min-height: 75vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 90px 0 !important;
  overflow: hidden;
  z-index: 2;
  outline: none;
}

.bg-quote-mark {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -58%);
  font-family: 'Inter', Georgia, serif;
  font-size: clamp(140px, 20vw, 260px);
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, 0.025);
  pointer-events: none;
  user-select: none;
  z-index: 1;
}

.voices-container {
  position: relative;
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}

.voices-intro {
  margin-bottom: 3.5rem;
  text-align: center;
}

.voice-display-area {
  position: relative;
  width: 100%;
  max-width: 760px;
  min-height: 260px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.voice-slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;
  transform: translateY(24px);
  filter: blur(8px);
  pointer-events: none;
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 800ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.voice-slide.exiting {
  opacity: 0;
  transform: translateY(-20px);
  filter: blur(6px);
  pointer-events: none;
}

.voice-slide.active {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
  transition-delay: 100ms;
}

.voice-quote {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(20px, 2.5vw, 30px);
  font-weight: 450;
  line-height: 1.52;
  letter-spacing: -0.015em;
  color: rgba(255, 255, 255, 0.92);
  margin-bottom: 2.25rem;
  max-width: 740px;
}

.thread-wrapper {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.thread-text {
  position: relative;
  z-index: 1;
  color: #FFFFFF;
}

.green-thread-svg {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 12px;
  pointer-events: none;
  overflow: visible;
}

.thread-path {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 850ms cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: 450ms;
}

.voice-slide.active .thread-path {
  stroke-dashoffset: 0;
}

.voice-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.voice-author {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
}

.voice-role {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.45);
}

/* Horizontal Navigation Dots (Centered Below Quote) */
.voices-nav-dots {
  position: relative;
  right: auto;
  top: auto;
  transform: none;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  margin-top: 2.75rem;
  z-index: 10;
}

.voice-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.22);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: all 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.voice-dot:hover {
  background-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.2);
}

.voice-dot.active {
  width: 26px;
  height: 8px;
  border-radius: 999px;
  background-color: #31D67B;
  box-shadow: 0 0 12px rgba(49, 214, 123, 0.65);
}

@media (max-width: 1024px) {
  .voices-section {
    padding: 70px 0 !important;
    min-height: 65vh;
  }

  .voice-quote {
    font-size: clamp(18px, 2.8vw, 24px);
  }
}

@media (max-width: 768px) {
  .voices-section {
    padding: 60px 0 !important;
    min-height: 60vh;
  }

  .voice-quote {
    font-size: clamp(16px, 4.2vw, 22px);
    margin-bottom: 1.75rem;
  }

  .voice-author {
    font-size: 15px;
  }

  .voice-role {
    font-size: 13px;
  }

  .thread-wrapper {
    white-space: normal;
  }

  .voices-nav-dots {
    margin-top: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .voice-slide {
    transition: opacity 300ms ease !important;
    transform: none !important;
    filter: none !important;
  }

  .thread-path {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }
}

/* ============ FINAL CTA SECTION ============ */
.final-cta-section {
  position: relative;
  background: transparent !important;
  /* Seamless background transition */
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 140px 0 100px;
  overflow: hidden;
}

.cta-ambient-glow {
  position: absolute;
  bottom: 10%;
  right: 10%;
  width: 800px;
  height: 800px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(49, 214, 123, 0.04) 0%, transparent 65%);
  pointer-events: none;
  filter: blur(80px);
  z-index: 1;
}

.final-cta-container {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5rem;
  max-width: 1500px;
  margin: 0 auto;
  padding: 0 3rem;
  width: 100%;
}

/* The Card Box matching Work section style */
.cta-card-box {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 3rem;
  align-items: center;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 26px !important;
  padding: 3rem 4.5rem !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  position: relative;
  z-index: 2;
}

.cta-left-col {
  grid-column: 1 / 9;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 850px;
}

.cta-right-col {
  grid-column: 9 / 13;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  perspective: 1000px;
}

/* Status label */
.cta-status-label {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2rem;
}

/* Centered Bottom Row */
.cta-bottom-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  position: relative;
  z-index: 2;
}

.cta-bottom-row .cta-links-row {
  justify-content: center !important;
  margin-bottom: 2.25rem !important;
}

.cta-bottom-row .cta-copyright {
  margin-bottom: 0 !important;
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #31D67B;
  box-shadow: 0 0 8px rgba(49, 214, 123, 0.7);
  animation: cta-pulse 2.8s ease-in-out infinite;
}

@keyframes cta-pulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 8px rgba(49, 214, 123, 0.7);
  }

  50% {
    opacity: 0.55;
    box-shadow: 0 0 4px rgba(49, 214, 123, 0.3);
  }
}

/* Headline - Responsive to prevent wrapping */
.cta-headline {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: clamp(52px, 5.5vw, 72px);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  margin-bottom: 2rem;
  max-width: 1050px;
}

/* Supporting paragraph */
.cta-supporting-text {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.52);
  max-width: 580px;
  margin-bottom: 3rem;
}

/* Buttons row */
.cta-buttons-row {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 0;
}

/* Blueprint Wrapper */
.blueprint-wrapper {
  position: relative;
  width: 100%;
  max-width: 380px;
  transform-style: preserve-3d;
  transition: transform 0.3s ease-out;
}

.blueprint-svg {
  width: 100%;
  height: auto;
  overflow: visible;
  display: block;
}

/* Blueprint Lines (Guide) */
.bp-line-bg {
  stroke: rgba(255, 255, 255, 0.05);
  stroke-width: 1.2px;
  fill: none;
  transition: stroke 0.3s, stroke-width 0.3s;
}

.bp-line-bg.highlighted {
  stroke: rgba(49, 214, 123, 0.35);
  stroke-width: 1.8px;
}

/* Blueprint Pulse Lines (Animated) */
.bp-line-pulse {
  stroke: #31D67B;
  stroke-width: 1.5px;
  stroke-linecap: round;
  fill: none;
  opacity: 0;
  stroke-dasharray: 40 220;
  stroke-dashoffset: 260;
}

/* Staggered Animations */
.bp-line-pulse.p-seq-1 {
  animation: bpPulseFlow 5s infinite linear;
  animation-delay: 0s;
}

.bp-line-pulse.p-seq-2 {
  animation: bpPulseFlow 5s infinite linear;
  animation-delay: 0.7s;
}

.bp-line-pulse.p-seq-3 {
  animation: bpPulseFlow 5s infinite linear;
  animation-delay: 1.4s;
}

.bp-line-pulse.p-seq-4 {
  animation: bpPulseFlow 5s infinite linear;
  animation-delay: 2.1s;
}

.bp-line-pulse.p-seq-5 {
  animation: bpPulseFlow 5s infinite linear;
  animation-delay: 2.8s;
}

.bp-line-pulse.p-seq-6 {
  animation: bpPulseFlow 5s infinite linear;
  animation-delay: 3.5s;
}

@keyframes bpPulseFlow {
  0% {
    stroke-dashoffset: 260;
    opacity: 0;
  }

  4% {
    opacity: 1;
  }

  20% {
    opacity: 1;
  }

  25% {
    stroke-dashoffset: 0;
    opacity: 0;
  }

  100% {
    stroke-dashoffset: 0;
    opacity: 0;
  }
}

/* Nodes Styling */
.bp-node {
  cursor: pointer;
  pointer-events: all;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transform-box: fill-box;
  transform-origin: center;
}

.node-glow {
  fill: #31D67B;
  opacity: 0;
  transition: opacity 0.3s ease, r 0.3s ease;
}

.bp-node.large:hover .node-glow {
  opacity: 0.12;
  r: 24px;
}

.bp-node.small:hover .node-glow {
  opacity: 0.15;
  r: 18px;
}

.node-base {
  fill: #060B08;
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1px;
  transition: fill 0.3s, stroke 0.3s, stroke-width 0.3s, r 0.3s;
}

.bp-node:hover .node-base {
  fill: #31D67B;
  stroke: #31D67B;
  stroke-width: 1.5px;
}

.bp-node.large:hover .node-base {
  r: 9px;
}

.bp-node.small:hover .node-base {
  r: 5px;
}

.node-hover-trigger {
  fill: transparent;
  stroke: none;
}

.bp-text {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 8px;
  font-weight: 500;
  fill: rgba(255, 255, 255, 0.35);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  transition: fill 0.3s, font-weight 0.3s;
}

.bp-node:hover .bp-text {
  fill: #ffffff;
  font-weight: 600;
}

/* Breathing Animation on Nodes */
.bp-node {
  animation: bpNodeBreathe 4s ease-in-out infinite;
}

.bp-node:nth-child(even) {
  animation-delay: 2s;
}

@keyframes bpNodeBreathe {

  0%,
  100% {
    opacity: 0.9;
  }

  50% {
    opacity: 1;
  }
}

/* Tooltip Styling */
.bp-tooltip {
  position: absolute;
  background: rgba(10, 16, 12, 0.96);
  border: 1px solid rgba(49, 214, 123, 0.18);
  border-radius: 8px;
  padding: 12px 16px;
  width: 240px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 15px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 100;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

.bp-tooltip-title {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #31D67B;
  margin-bottom: 4px;
  text-transform: uppercase;
}

.bp-tooltip-desc {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 11px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.7);
}

.bp-tooltip.visible {
  opacity: 1;
  transform: translate(-50%, 0);
}


/* Shared button base */
.cta-btn-primary,
.cta-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 52px;
  padding: 0 30px;
  border-radius: 999px;
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  outline: none;
  border: none;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
    box-shadow 300ms cubic-bezier(0.16, 1, 0.3, 1),
    background-color 250ms ease,
    border-color 250ms ease,
    color 250ms ease;
}

.cta-btn-primary svg,
.cta-btn-secondary svg {
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-btn-primary:hover svg,
.cta-btn-secondary:hover svg {
  transform: translate(2px, -2px);
}

/* Primary */
.cta-btn-primary {
  background: #31D67B;
  color: #060B08;
}

.cta-btn-primary:hover {
  transform: translateY(-4px);
  background: #2bc470;
  box-shadow: 0 12px 32px rgba(49, 214, 123, 0.4);
  filter: brightness(1.05);
}

.cta-btn-primary:active {
  transform: translateY(0) scale(0.98);
}

/* Secondary */
.cta-btn-secondary {
  background: transparent;
  color: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(255, 255, 255, 0.16);
}

.cta-btn-secondary:hover {
  transform: translateY(-2px);
  color: #31D67B;
  border-color: rgba(49, 214, 123, 0.4);
  box-shadow: 0 6px 22px rgba(49, 214, 123, 0.1);
}

.cta-btn-secondary:active {
  transform: translateY(0) scale(0.98);
}

/* Contact links */
.cta-links-row {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 4rem;
}

.cta-contact-link {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
  position: relative;
  padding: 2px 0;
  transition: color 250ms ease;
}

.cta-contact-link::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: #31D67B;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cta-contact-link:hover {
  color: #FFFFFF;
}

.cta-contact-link:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

.cta-dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(49, 214, 123, 0.5);
  flex-shrink: 0;
}

/* Copyright */
.cta-copyright {
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.22);
  letter-spacing: 0.02em;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .final-cta-section {
    padding: 100px 0 80px;
  }

  .final-cta-container {
    padding: 0 1.5rem;
  }

  .cta-card-box {
    grid-template-columns: 1fr;
    row-gap: 4rem;
    padding: 2.5rem !important;
    text-align: left;
  }

  .cta-left-col {
    grid-column: 1;
    width: 100%;
    max-width: 100%;
  }

  .cta-right-col {
    grid-column: 1;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2rem;
  }

  .cta-headline {
    font-size: clamp(42px, 8vw, 64px);
    line-height: 0.95;
  }

  .cta-ambient-glow {
    width: 350px;
    height: 350px;
  }
}

@media (max-width: 768px) {
  .final-cta-section {
    padding: 80px 0 60px;
    min-height: auto;
  }

  .cta-headline {
    font-size: 42px;
  }

  .cta-supporting-text {
    font-size: 15px;
    margin-bottom: 2.5rem;
  }

  .cta-buttons-row {
    flex-direction: column;
    width: 100%;
    max-width: 300px;
    gap: 0.85rem;
    margin-bottom: 0;
  }

  .cta-btn-primary,
  .cta-btn-secondary {
    width: 100%;
    justify-content: center;
  }

  .cta-links-row {
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 3rem;
  }

  .blueprint-wrapper {
    max-width: 320px;
  }
}

/* ---- Accessibility ---- */
@media (prefers-reduced-motion: reduce) {

  .cta-btn-primary,
  .cta-btn-secondary,
  .cta-contact-link::after {
    transition: none !important;
  }

  .status-dot {
    animation: none !important;
  }
}

/* ==========================================================================
   EDITORIAL HERO REDESIGN
   ========================================================================== */

/* --- Header Redesign --- */
.editorial-hdr {
  position: fixed !important;
  inset-inline: 0 !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: transparent !important;
  border-bottom: 1px solid transparent !important;
  transition: background-color 0.4s ease, border-color 0.4s ease, backdrop-filter 0.4s ease !important;
}

.editorial-hdr.scrolled {
  background-color: rgba(6, 11, 8, 0.75) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

.editorial-hdr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 3rem;
  max-width: 1440px;
  margin: 0 auto;
  transition: padding 0.4s ease !important;
}

.editorial-hdr.scrolled .editorial-hdr-in {
  padding: 0.9rem 3rem;
}

.editorial-brand {
  flex-shrink: 0;
}

.editorial-nav {
  display: block !important;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.editorial-nav ul {
  display: inline-flex;
  gap: 2.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.editorial-nav .nav-link {
  font-family: inherit;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.editorial-nav .nav-link span {
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.55);
  opacity: 1;
  position: relative;
  transition: color 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.editorial-nav .nav-link span::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 0;
  height: 1px;
  background: #31D67B;
  transition: width 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover:hover) {
  .editorial-nav .nav-link:hover span {
    color: #fff;
    transform: none;
  }

  .editorial-nav .nav-link:hover span::after {
    width: 100%;
  }
}

.editorial-hdr-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Header CTA — same style as footer .cta-btn-secondary, scaled for nav */

.hdr-cta-btn.cta-btn-secondary {
  height: 40px;
  padding: 0 22px;
  font-size: 13px;
}

.editorial-menu-btn {
  display: none;
}

/* --- Hero Section --- */
.editorial-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: #060B08 !important;
  overflow: hidden;

  .hero-stats {
    gap: 1.75rem;
    margin-top: 2.25rem;
    flex-wrap: wrap;
  }
}


/* Hero stats styling */
.hero-stats {
  display: flex;
  gap: 2.5rem;
  margin-top: 3rem;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.stat-val-wrap {
  display: flex;
  align-items: baseline;
}

.stat-num {
  font-size: 2.25rem;
  font-weight: 800;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff 45%, #b5c0b9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

.stat-plus {
  font-size: 1.75rem;
  font-weight: 700;
  color: #31D67B;
  margin-left: 0.1rem;
  line-height: 1;
}

.stat-lbl {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.45);
  font-weight: 500;
  max-width: 130px;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .hero-stats {
    gap: 1.75rem;
    margin-top: 2.25rem;
    flex-wrap: wrap;
  }

  .stat-num {
    font-size: 1.75rem;
  }

  .stat-plus {
    font-size: 1.35rem;
  }
}


.editorial-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml,%3Csvg viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="n"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="4" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23n)" opacity="0.03"/%3E%3C/svg%3E');
  pointer-events: none;
  z-index: 5;
}

/* Portrait image sits as background, offset right */
.editorial-liquid {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 0 !important;
  pointer-events: auto;
}

.editorial-liquid .liquid-base,
.editorial-liquid canvas {
  object-position: 65% center !important;
}

/* Cinematic vignette — fades image into darkness on left side for text */
.editorial-hero>.vignette {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    /* Left-to-right: solid dark to transparent — this is the key mask */
    linear-gradient(to right,
      #060B08 0%,
      rgba(6, 11, 8, 0.95) 20%,
      rgba(6, 11, 8, 0.7) 35%,
      rgba(6, 11, 8, 0.3) 50%,
      transparent 65%),
    /* Top vignette */
    linear-gradient(to bottom,
      rgba(6, 11, 8, 0.5) 0%,
      transparent 25%),
    /* Bottom vignette */
    linear-gradient(to top,
      rgba(6, 11, 8, 0.6) 0%,
      transparent 30%);
}

/* Soft green bloom behind portrait */
.hero-bloom {
  position: absolute;
  width: 700px;
  height: 700px;
  background: radial-gradient(circle, rgba(49, 214, 123, 0.05) 0%, transparent 65%);
  top: 50%;
  right: 15%;
  transform: translateY(-50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* --- 12-Column Grid --- */
.hero-grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: 1.5rem;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 3rem;
  min-height: 100vh;
  align-items: center;
  position: relative;
  z-index: 10;
}

.hero-left-col {
  grid-column: 1 / 7;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8rem 0 6rem;
}

.hero-right-col {
  grid-column: 8 / 13;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  align-self: end;
  padding-bottom: 3.5rem;
  min-height: 0;
}

/* --- Left Column Elements --- */
.status-dot-txt {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: 2.5rem;
}

.status-dot {
  width: 6px;
  height: 6px;
  background: #31D67B;
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(49, 214, 123, 0.5);
  animation: statusPulse 3s ease-in-out infinite;
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 1;
    box-shadow: 0 0 6px rgba(49, 214, 123, 0.5);
  }

  50% {
    opacity: 0.6;
    box-shadow: 0 0 12px rgba(49, 214, 123, 0.3);
  }
}

.hero-display {
  font-size: clamp(2.3rem, 4.8vw, 4.8rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.03em;
  background: linear-gradient(180deg, #ffffff 45%, #b5c0b9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  margin: 0 0 1.75rem -3px;
  /* Optical alignment */
}

/* Underline thread drawing trigger for hero */
.hero-display.in .thread-path {
  stroke-dashoffset: 0;
  transition-delay: 950ms;
}

.hero-display .thread-text {
  color: transparent;
  background: inherit;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.45);
  max-width: 460px;
  margin-bottom: 2.5rem;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

/* Primary green CTA */
.pill.primary .pill-in {
  background: #31D67B;
  color: #060B08;
  border: 1px solid #31D67B;
  font-weight: 600;
  font-size: 0.875rem;
  padding: 0.75rem 1.75rem;
  border-radius: 999px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}

@media (hover:hover) {
  .pill.primary:hover .pill-in {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px -8px rgba(49, 214, 123, 0.35);
  }
}

/* Text button with arrow */
.text-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: rgba(255, 255, 255, 0.65);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  transition: color 0.35s;
}

.text-btn .ic {
  width: 15px;
  height: 15px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover:hover) {
  .text-btn:hover {
    color: #31D67B;
  }

  .text-btn:hover .ic {
    transform: translateX(4px);
  }
}

/* --- Museum Label (Project List) --- */
.museum-label {
  background: transparent;
  z-index: 10;
  width: 200px;
  position: relative;
}

.ml-title {
  font-size: 0.5625rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: rgba(255, 255, 255, 0.3);
  margin-bottom: 1rem;
}

.ml-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.ml-list a {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  gap: 0.625rem;
  transition: color 0.3s;
  text-decoration: none;
}

.ml-indicator {
  width: 0;
  height: 1px;
  background: #31D67B;
  transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s;
  opacity: 0;
}

@media (hover:hover) {
  .ml-list a:hover {
    color: #fff;
  }

  .ml-list a:hover .ml-indicator {
    width: 12px;
    opacity: 1;
  }
}

/* --- Reveal animation overrides for editorial hero --- */
.editorial-hero .rv {
  opacity: 0;
  transform: translateY(24px);
  filter: blur(6px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--delay, 0ms);
}

.editorial-hero .rv.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* --- Responsive --- */
@media (max-width: 1024px) {

  .editorial-nav,
  .hdr-cta-btn {
    display: none !important;
  }

  .editorial-menu-btn {
    display: flex !important;
  }

  .editorial-hdr-in {
    padding: 1rem 1.25rem;
  }

  .hero-grid-12 {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 1.25rem;
    min-height: 100vh;
  }

  .hero-left-col {
    padding: 0 0 4rem 0;
    text-align: left;
  }

  .hero-display {
    font-size: 2.5rem;
    margin-left: 0;
  }

  .hero-cta-row {
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
  }

  .hero-right-col {
    display: none;
  }

  .editorial-hero>.vignette {
    background:
      linear-gradient(to top,
        #060B08 0%,
        rgba(6, 11, 8, 0.9) 30%,
        rgba(6, 11, 8, 0.5) 60%,
        transparent 100%),
      linear-gradient(to bottom,
        rgba(6, 11, 8, 0.4) 0%,
        transparent 20%);
  }

  .editorial-liquid .liquid-base,
  .editorial-liquid canvas {
    object-position: center 20% !important;
  }
}

/* ==========================================================================
   LOYALYSE PROJECT PAGE EDITORIAL STYLES
   ========================================================================== */

.loyalyse-page {
  background-color: #060B08;
  color: #F6F8F7;
  font-family: 'Geist Sans', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
  position: relative;
}

/* Narrative Green Thread Overlay (Matching What I Believe System) */
.project-thread-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.project-thread-bg {
  stroke-dasharray: none;
  opacity: 0.8;
}

.project-thread-main {
  stroke-dasharray: 6000;
  stroke-dashoffset: 6000;
  transition: stroke-dashoffset 0.1s linear;
  will-change: stroke-dashoffset;
}

/* --- Section 01: Project Hero --- */
.project-hero {
  position: relative;
  min-height: 100vh;
  padding-top: 9rem;
  padding-bottom: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.project-hero-content {
  position: relative;
  z-index: 5;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}

.project-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #31D67B;
  margin-bottom: 1.5rem;
}

.project-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: #31D67B;
  box-shadow: 0 0 8px rgba(49, 214, 123, 0.8);
}

.project-title {
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 0.95;
  margin-bottom: 1.25rem;
  background: linear-gradient(180deg, #ffffff 50%, #a3b0a7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.project-subtitle {
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  font-weight: 500;
  color: #E2E8E4;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 2rem;
}

.project-description {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  color: #9EA8A2;
  max-width: 680px;
  line-height: 1.6;
  margin-bottom: 2.5rem;
  font-weight: 400;
}

.project-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 4rem;
  flex-wrap: wrap;
}

.project-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 900px;
}

.project-fact-item {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.project-fact-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.4);
  font-weight: 600;
}

.project-fact-value {
  font-size: 0.95rem;
  color: #E2E8E4;
  font-weight: 500;
  line-height: 1.4;
}

/* Grid Aligned Hero Image Container */
.project-hero-media {
  position: relative;
  max-width: 1320px;
  width: 100%;
  margin: 4rem auto 0 auto;
  padding: 0 2rem;
  z-index: 5;
}

.project-hero-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px -16px rgba(0, 0, 0, 0.6);
  background-color: #0c120e;
}

.project-hero-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* --- Section 02: The Challenge --- */
.project-challenge {
  padding: 10rem 2rem 8rem 2rem;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.project-statement {
  font-size: clamp(2.5rem, 5.5vw, 5.25rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin-bottom: 5rem;
  max-width: 1050px;
  color: #FFFFFF;
}

.project-statement span.dim {
  color: rgba(255, 255, 255, 0.35);
}

.challenge-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3.5rem;
}

.challenge-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.challenge-col-title {
  font-size: 1.35rem;
  font-weight: 600;
  color: #F6F8F7;
  letter-spacing: -0.01em;
}

.challenge-col-desc {
  font-size: 1.05rem;
  color: #9EA8A2;
  line-height: 1.6;
  font-weight: 400;
}

/* --- Section 03: The Shift / The Idea --- */
.project-idea-section {
  padding: 8rem 2rem 10rem 2rem;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.idea-editorial-box {
  max-width: 1100px;
  margin: 0 auto 6rem auto;
  text-align: center;
}

.idea-quote {
  font-size: clamp(2.25rem, 4.8vw, 4.5rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.1;
  color: #FFFFFF;
  margin-bottom: 2rem;
}

.idea-subline {
  font-size: clamp(1.1rem, 1.8vw, 1.4rem);
  color: #31D67B;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.idea-media-container {
  max-width: 1280px;
  margin: 0 auto;
  position: relative;
}

.idea-media-wrap {
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 40px 100px -20px rgba(0, 0, 0, 0.7);
  background-color: #0c120e;
}

.idea-media-wrap img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Section 04: Product Highlights --- */
.project-highlights-section {
  padding: 8rem 2rem;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.highlight-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  margin-bottom: 9rem;
}

.highlight-row.reverse {
  grid-template-columns: 1fr 1fr;
}

.highlight-row.reverse .highlight-media {
  order: 2;
}

.highlight-row.reverse .highlight-content {
  order: 1;
}

.highlight-media {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.5);
  background: #0c120e;
  width: 100%;
}

.highlight-media.mobile-frame {
  max-width: 440px;
  margin: 0 auto;
  border-radius: 28px;
  padding: 1.25rem;
  background: radial-gradient(circle at 50% 50%, rgba(49, 214, 123, 0.08), transparent 75%), #0a100c;
}

.highlight-media.detail-frame {
  aspect-ratio: 4 / 3;
}

.highlight-media.detail-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.highlight-media img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.highlight-media:hover img {
  transform: scale(1.03);
}

.highlight-content {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.highlight-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #31D67B;
  letter-spacing: 0.1em;
}

.highlight-title {
  font-size: clamp(2rem, 3.2vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #FFFFFF;
  line-height: 1.1;
}

.highlight-text {
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  color: #9EA8A2;
  line-height: 1.65;
  font-weight: 400;
}

/* --- Section 05: Built to Scale / Foundations --- */
.project-foundations-section {
  padding: 8rem 2rem 10rem 2rem;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.foundations-header {
  margin-bottom: 5rem;
}

.foundations-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.5rem;
}

.foundation-item {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.foundation-num {
  font-size: 0.85rem;
  font-weight: 700;
  color: #31D67B;
  letter-spacing: 0.1em;
}

.foundation-title {
  font-size: 1.4rem;
  font-weight: 600;
  color: #FFFFFF;
  letter-spacing: -0.01em;
}

.foundation-desc {
  font-size: 1rem;
  color: #9EA8A2;
  line-height: 1.6;
}

/* --- Section 06: Gallery --- */
.project-gallery-section {
  padding: 6rem 2rem 10rem 2rem;
  max-width: 1320px;
  margin: 0 auto;
  position: relative;
  z-index: 5;
}

.gallery-fullwidth {
  width: 100%;
  border-radius: 24px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
  margin-bottom: 3.5rem;
  background-color: #0c120e;
}

.gallery-fullwidth img {
  width: 100%;
  height: auto;
  display: block;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.gallery-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gallery-card-img-wrap {
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0c120e;
  aspect-ratio: 4 / 3;
}

.gallery-card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.gallery-card:hover img {
  transform: scale(1.04);
}

.gallery-caption {
  font-size: 0.85rem;
  font-weight: 500;
  color: #9EA8A2;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* --- Section 07: Closing --- */
.project-closing-section {
  padding: 10rem 2rem 12rem 2rem;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 5;
}

.closing-statement {
  font-size: clamp(2.5rem, 5.5vw, 5.5rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: #FFFFFF;
  margin-bottom: 2rem;
}

.closing-desc {
  font-size: clamp(1.15rem, 1.8vw, 1.4rem);
  color: #9EA8A2;
  max-width: 640px;
  margin: 0 auto 3.5rem auto;
  line-height: 1.6;
}

.closing-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

/* Media Queries for Project Page */
@media (max-width: 1024px) {
  .challenge-columns {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .highlight-row,
  .highlight-row.reverse {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    margin-bottom: 6rem;
  }

  .highlight-row.reverse .highlight-media {
    order: 1;
  }

  .highlight-row.reverse .highlight-content {
    order: 2;
  }

  .foundations-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 3.5rem 2rem;
  }

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .project-hero {
    padding-top: 7rem;
  }

  .foundations-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .project-actions,
  .closing-actions {
    flex-direction: column;
    align-items: stretch;
  }
}

/* ==============================================================
   PROJECTS EXHIBITION REDESIGN
============================================================== */

.exhibition-main {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
  /* Dark canvas */
  color: #F6F8F7;
  padding-bottom: 8rem;
}

/* --- SVG Thread --- */
.exhibition-thread-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /* We'll set the height dynamically in JS based on exhibition-list height, 
     or let it stretch the whole main tag */
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* --- Header --- */
.exhibition-header {
  padding-top: 12rem;
  padding-bottom: 4rem;
  position: relative;
  z-index: 2;
  text-align: center;
}

.exhibition-title {
  font-size: 5rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 2rem 0;
}

.exhibition-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  max-width: 28ch;
  margin: 0 auto;
  line-height: 1.5;
}

/* --- Filter --- */
.exhibition-filter {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  padding-bottom: 6rem;
  position: relative;
  z-index: 2;
}

.filter-btn {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.3s;
  position: relative;
  padding-bottom: 0.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
}

.filter-btn:hover {
  color: #fff;
}

.filter-btn.active {
  color: var(--accent-from);
}

.filter-btn::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent-from);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.filter-btn.active::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* --- Project Exhibition Layout --- */
.exhibition-list {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 12rem;
  padding-bottom: 8rem;
}

.project-exhibition {
  width: 100%;
}

.exhibition-inner {
  display: flex;
  align-items: center;
  gap: 8rem;
}

/* Alternating Layout */
.layout-left .pe-text {
  order: 1;
}

.layout-left .pe-image-wrap {
  order: 2;
}

.layout-right .pe-text {
  order: 2;
}

.layout-right .pe-image-wrap {
  order: 1;
}

/* Text Content */
.pe-text {
  flex: 0 0 35%;
  display: flex;
  flex-direction: column;
}

.pe-category {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent-from);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 1.5rem;
}

.pe-name {
  font-size: 4rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
}

.pe-desc {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.5;
  margin-bottom: 3rem;
  max-width: 90%;
}

.pe-meta {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 3rem;
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  padding-left: 1.5rem;
}

.meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.meta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
}

.meta-value {
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.9);
}

.pe-cta {
  font-size: 1rem;
  font-weight: 500;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  padding-bottom: 0.25rem;
  align-self: flex-start;
  transition: border-color 0.3s;
}

.pe-cta:hover {
  border-color: #fff;
}

/* Image Wrapping & Parallax */
.pe-image-wrap {
  flex: 0 0 55%;
  position: relative;
}

.pe-image-link {
  display: block;
  width: 100%;
  border-radius: 1.5rem;
  overflow: hidden;
  position: relative;
  cursor: none;
  /* Custom cursor */
  transform: translateZ(0);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s ease;
}

.pe-image-link:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px -10px rgba(0, 0, 0, 0.5), 0 0 40px rgba(49, 214, 123, 0.1);
}

.pe-image-parallax {
  width: 100%;
  height: 45rem;
  /* Large cinematic aspect */
  overflow: hidden;
}

.pe-img {
  width: 100%;
  height: 120%;
  /* Scaled for parallax room */
  object-fit: cover;
  transform: translateY(-10%);
  /* Default starting parallax state */
}

/* Custom Cursor */
.pe-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--accent-from);
  color: #000;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.pe-cursor-follower.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* --- Ending Section --- */
.exhibition-ending {
  text-align: center;
  padding-top: 8rem;
  padding-bottom: 4rem;
  position: relative;
  z-index: 2;
}

.ending-h2 {
  font-size: 4rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-bottom: 3rem;
}

.ending-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
}

/* Media Queries */
@media (max-width: 1024px) {
  .exhibition-inner {
    flex-direction: column !important;
    gap: 4rem;
  }

  .pe-text,
  .pe-image-wrap {
    flex: 1 1 100%;
    width: 100%;
  }

  .pe-image-parallax {
    height: 30rem;
  }
}

/* ==============================================================
   AWWWARDS ART DIRECTION REDESIGN
============================================================== */

.aw-main {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--ink);
  color: #F6F8F7;
  padding-bottom: 10vh;
}

/* --- THE OFFSET GREEN THREAD --- */
.aw-thread {
  position: absolute;
  top: 0;
  left: 5vw;
  /* Extreme offset to not break compositions */
  width: 20px;
  height: 100%;
  pointer-events: none;
  z-index: 99;
}

/* --- COMMON ELEMENTS --- */
.aw-img-wrap {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.aw-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.1);
  /* room for parallax */
  display: block;
}

.aw-img-link {
  display: block;
  width: 100%;
  height: 100%;
  cursor: none;
}

.aw-cat {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent-from);
  display: block;
  margin-bottom: 0.5rem;
}

.aw-cta {
  display: inline-block;
  margin-top: 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 0.25rem;
  transition: border-color 0.3s;
}

.aw-cta:hover {
  border-color: #fff;
}

/* --- INTRO --- */
.aw-intro {
  padding: 25vh 10vw;
}

.aw-label {
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 2rem;
}

.aw-title {
  font-size: clamp(4rem, 10vw, 9rem);
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-weight: 600;
  margin-left: -0.5vw;
  /* optically align */
}

/* --- SECTION PADDING --- */
.aw-section {
  position: relative;
  margin-bottom: 25vh;
  width: 100%;
}

/* --- 01. LOYALYSE (Sticky Split 30/70) --- */
.aw-loyalyse {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-left: 15vw;
}

.aw-sticky-col {
  width: 25%;
  position: sticky;
  top: 30vh;
}

.aw-loyalyse .aw-name {
  font-size: clamp(3rem, 5vw, 5rem);
  margin-bottom: 1rem;
  line-height: 1;
}

.aw-meta {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 0.5);
}

.aw-scroll-col {
  width: 60%;
  height: 120vh;
  /* Extra tall to scroll through */
}

.aw-scroll-col .aw-img-link {
  border-radius: 20px 0 0 20px;
}

/* --- 02. VICTUS (Immersive Overlap) --- */
.aw-victus {
  padding: 0 5vw;
  position: relative;
}

.aw-victus .aw-img-wrap {
  width: 100%;
  height: 80vh;
  border-radius: 20px;
}

.aw-massive-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(6rem, 15vw, 15rem);
  font-weight: 700;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
  line-height: 1;
  white-space: nowrap;
}

.aw-victus-meta {
  position: absolute;
  bottom: 2rem;
  left: 7vw;
  color: #fff;
}

/* --- 03. MISS DZ (The Void) --- */
.aw-missdz {
  display: flex;
  align-items: center;
  padding: 0 10vw;
}

.aw-void-left {
  width: 25vw;
  height: 60vh;
}

.aw-void-left .aw-img-wrap {
  border-radius: 20px;
}

.aw-void-right {
  margin-left: auto;
  width: 30vw;
}

.aw-missdz .aw-name {
  font-size: clamp(3rem, 5vw, 5rem);
  margin-bottom: 1rem;
}

.aw-missdz .aw-desc {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
}

/* --- 04. AMAIA (Floating Breakout) --- */
.aw-amaia {
  padding: 10vh 0;
  display: flex;
  justify-content: center;
}

.aw-center-art {
  position: relative;
  width: 40vw;
  height: 70vh;
}

.aw-center-art .aw-img-wrap {
  border-radius: 20px;
}

.aw-floating-text {
  position: absolute;
  bottom: -5vh;
  left: -10vw;
  background: var(--ink);
  padding: 2rem;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.aw-amaia .aw-name {
  font-size: clamp(3rem, 6vw, 6rem);
  line-height: 1;
}

/* --- 05. WIXIA (The Stagger) --- */
.aw-wixia {
  position: relative;
  height: 100vh;
}

.aw-stagger-text {
  position: absolute;
  top: 10vh;
  right: 15vw;
  text-align: right;
}

.aw-wixia .aw-name {
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.aw-stagger-img {
  position: absolute;
  bottom: 0;
  left: 10vw;
  width: 60vw;
  height: 50vh;
}

.aw-stagger-img .aw-img-wrap {
  border-radius: 20px;
}

/* --- 06. ACILE APP (Editorial Crop) --- */
.aw-acile {
  padding: 0 10vw;
}

.aw-thin-img {
  width: 100%;
  height: 35vh;
  /* Extremely thin crop */
}

.aw-thin-img .aw-img-wrap {
  border-radius: 20px;
}

.aw-thin-meta {
  margin-top: -3rem;
  /* overlap slightly */
  margin-left: 5vw;
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
}

.aw-acile .aw-name {
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 600;
  line-height: 0.8;
  mix-blend-mode: difference;
}

.aw-stacked-meta {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

/* --- 07. SIHATI (The Finale) --- */
.aw-sihati {
  display: flex;
  padding: 10vh 10vw;
  gap: 5vw;
  align-items: center;
}

.aw-vertical-title {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.aw-vertical-title h2 {
  font-size: clamp(4rem, 8vw, 8rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0.3);
}

.aw-finale-img {
  flex: 1;
  height: 80vh;
  position: relative;
}

.aw-finale-img .aw-img-wrap {
  border-radius: 20px;
}

.aw-finale-bottom {
  position: absolute;
  bottom: -3vh;
  right: -3vw;
  background: var(--ink);
  padding: 1.5rem 2.5rem;
  border-radius: 20px;
  text-align: right;
}

/* --- CUSTOM CURSOR --- */
.aw-cursor {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--accent-from);
  color: #000;
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 9999px;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.aw-cursor.visible {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

/* --- ENDING --- */
.aw-ending {
  padding: 15vh 10vw;
  text-align: center;
}

.aw-ending h2 {
  font-size: clamp(3rem, 5vw, 5rem);
  margin-bottom: 3rem;
  letter-spacing: -0.02em;
}

.aw-ending-actions {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
}

/* RESPONSIVE FLATTENING */
@media (max-width: 1024px) {
  .aw-loyalyse {
    flex-direction: column;
    padding: 0 5vw;
  }

  .aw-sticky-col {
    position: relative;
    top: 0;
    width: 100%;
    margin-bottom: 2rem;
  }

  .aw-scroll-col {
    width: 100%;
    height: 50vh;
  }

  .aw-scroll-col .aw-img-link {
    border-radius: 20px;
  }

  .aw-missdz {
    flex-direction: column;
  }

  .aw-void-left,
  .aw-void-right {
    width: 100%;
  }

  .aw-void-left {
    height: 40vh;
    margin-bottom: 2rem;
  }

  .aw-amaia .aw-center-art {
    width: 90vw;
  }

  .aw-floating-text {
    left: 5vw;
    bottom: -5vh;
  }

  .aw-wixia {
    height: auto;
  }

  .aw-stagger-text {
    position: relative;
    top: 0;
    right: 0;
    text-align: left;
    padding: 0 5vw 2rem;
  }

  .aw-stagger-img {
    position: relative;
    left: 0;
    width: 100%;
    padding: 0 5vw;
  }

  .aw-sihati {
    flex-direction: column;
  }

  .aw-vertical-title {
    writing-mode: horizontal-tb;
    transform: none;
    margin-bottom: 2rem;
  }
}

/* ============ PROJECTS ARCHIVE PAGE (REDESIGN) ============ */

/* 1. Projects Hero */
.projects-hero {
  position: relative;
  min-height: 45vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 4rem;
  padding-top: 12rem;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

/* Subtle bloom behind hero text */
.projects-hero::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 20%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(49, 214, 123, 0.08) 0%, transparent 60%);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}

.projects-hero-in {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.projects-title {
  font-size: clamp(3rem, 6vw, 6rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
}

.projects-subtitle {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: rgba(255, 255, 255, 0.6);
  max-width: 30ch;
  line-height: 1.4;
}

/* 2. Filter Bar */
.projects-filter-wrap {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 1.5rem 0;
  background: rgba(3, 7, 5, 0.7);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  margin-bottom: 4rem;
}

.projects-filters {
  display: flex;
  gap: 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
  /* Firefox */
}

.projects-filters::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari */
}

.filter-pill {
  padding: 0.75rem 1.5rem;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: pointer;
}

.filter-pill:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.2);
}

.filter-pill.active {
  background: #31D67B;
  color: #000;
  border-color: #31D67B;
}

/* Character for Projects Hero */
.projects-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  mask-image: radial-gradient(circle at 50% 100%, black, transparent 80%);
  -webkit-mask-image: radial-gradient(circle at 50% 100%, black, transparent 80%);
}

.ph-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.ph-eyebrow .status-dot.green {
  width: 6px;
  height: 6px;
  background: #31D67B;
  border-radius: 50%;
  box-shadow: 0 0 10px #31D67B;
}

.text-glow {
  color: #fff;
  text-shadow: 0 0 40px rgba(49, 214, 123, 0.4);
}

.projects-hero::before {
  /* Move bloom slightly */
  top: 60%;
  left: 50%;
  width: 800px;
  height: 800px;
  background: radial-gradient(circle, rgba(49, 214, 123, 0.1) 0%, transparent 70%);
}

/* Reversals for project cards */
.featured-project-card.reversed {
  grid-template-columns: 0.85fr 1.15fr !important;
}

.featured-project-card.reversed .project-image-wrapper {
  order: 2;
}

.featured-project-card.reversed .project-info {
  order: 1;
}

@media (max-width: 1024px) {
  .featured-project-card.reversed {
    grid-template-columns: 1fr !important;
  }

  .featured-project-card.reversed .project-image-wrapper {
    order: 1;
  }

}


/* ==========================================================================
   SERVICES PAGE STYLES
   ========================================================================== */

.services-page {
  background-color: var(--bg-primary, #0a0a0a);
}

/* --- Hero Section --- */
.services-hero {
  position: relative;
  padding-top: 25vh;
  padding-bottom: 15vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
  overflow: hidden;
  text-align: center;
}

.services-hero-content {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  align-items: center;
  width: 100%;
}

.services-hero-text {
  max-width: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.services-hero-title {
  font-size: clamp(3.5rem, 6vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 1.5rem;
  color: #fff;
}

.services-hero-subtitle {
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: #fff;
  margin-bottom: 2rem;
  line-height: 1.3;
}

.services-hero-desc {
  font-size: 1.125rem;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.6;
  margin-bottom: 3rem;
  max-width: 600px;
}

.services-hero-visual {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.services-hero-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  aspect-ratio: 16 / 9;
  width: 100%;
}

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

/* --- Service Sections (Editorial Layouts) --- */
.service-section {
  position: relative;
  padding: 15vh 0;
  z-index: 5;
}

.service-container {
  display: grid;
  gap: 6rem;
  align-items: center;
}

.layout-image-left {
  grid-template-columns: 0.8fr 1.2fr;
}

.layout-content-left {
  grid-template-columns: 1.2fr 0.8fr;
}

.wide-layout {
  grid-template-columns: 1fr 1fr;
}

.alt-spacing {
  gap: 8rem;
}

.service-content {
  position: relative;
  max-width: 600px;
  z-index: 10;
}

.service-label {
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent-green, #31D67B);
  margin-bottom: 1rem;
  display: block;
}

.service-title {
  font-size: clamp(2.5rem, 4vw, 4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  color: #fff;
}

.service-philosophy {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  margin-bottom: 3.5rem;
}

.service-details {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.service-detail-title {
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.4);
  margin-bottom: 1.5rem;
}

.service-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.service-list li {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
  padding-left: 1.5rem;
  position: relative;
}

.service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5rem;
  width: 4px;
  height: 4px;
  background-color: var(--accent-green, #31D67B);
  border-radius: 50%;
  box-shadow: 0 0 8px var(--accent-green, #31D67B);
}

/* --- Featured Project Mini Card --- */
.service-featured {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 1.5rem;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.service-featured:hover {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(49, 214, 123, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(49, 214, 123, 0.05);
}

.service-featured-label {
  display: block;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 1rem;
}

.service-featured-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-decoration: none;
}

.service-featured-img {
  width: 80px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

.service-featured-info h4 {
  font-size: 1.125rem;
  color: #fff;
  margin-bottom: 0.25rem;
}

.service-featured-info .text-btn {
  font-size: 0.875rem;
  padding: 0;
}

/* --- Service Visuals --- */
.service-visual {
  position: relative;
  width: 100%;
  z-index: 1;
}

.service-img-wrap {
  position: relative;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.service-editorial-1 .service-img-wrap,
.service-editorial-2 .service-img-wrap,
.service-editorial-3 .service-img-wrap,
.service-editorial-4 .service-img-wrap {
  aspect-ratio: 16 / 9;
}

.service-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-img-wrap:hover .service-img {
  transform: scale(1.03);
}

/* --- Floating Animations --- */
.float-anim {
  animation: float-soft 14s ease-in-out infinite;
}

.float-anim-alt {
  animation: float-soft-alt 16s ease-in-out infinite;
}

.float-anim-slow {
  animation: float-soft 18s ease-in-out infinite;
}

@keyframes float-soft {

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

  50% {
    transform: translateY(-8px);
  }
}

@keyframes float-soft-alt {

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

  50% {
    transform: translateY(-6px) translateX(4px);
  }
}

/* Responsive */
@media (max-width: 1024px) {
  .services-hero-content {
    gap: 3rem;
  }

  .services-hero-text {
    max-width: 100%;
  }

  .hero-cta-row {
    justify-content: center;
  }

  .services-hero-visual {
    transform: none;
    margin-top: 3rem;
  }

  .service-container {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .layout-image-left .service-visual,
  .layout-content-left .service-visual {
    order: -1;
  }

  .service-editorial-1 .service-img-wrap,
  .service-editorial-2 .service-img-wrap,
  .service-editorial-3 .service-img-wrap,
  .service-editorial-4 .service-img-wrap {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
  }
}

/* ==========================================================================
   REDESIGNED DIGITAL PRODUCTS (PREMIUM EDITORIAL)
   ========================================================================== */

/* --- Services Layout --- */
.service-premium-section {
  position: relative;
  padding: 0;
  margin-bottom: 60vh;
  z-index: 5;
}

.service-premium-section:last-child {
  margin-bottom: 20vh;
}

.premium-layout {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 4rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.premium-visual {
  grid-column: 1 / 7;
  position: sticky;
  top: 20vh;
  z-index: 2;
  height: max-content;
}

.premium-image-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.5s ease;
}

.premium-image-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-glow {
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), inset 0 0 40px rgba(49, 214, 123, 0.05);
  border-radius: 28px;
  pointer-events: none;
  transition: box-shadow 0.5s ease;
}

.premium-image-wrapper:hover {
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}

.premium-image-wrapper:hover img {
  transform: scale(1.02);
}

.premium-image-wrapper:hover .premium-glow {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15), inset 0 0 60px rgba(49, 214, 123, 0.15);
}

.premium-content {
  grid-column: 7 / 13;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 10;
  position: relative;
}

.premium-fade-overlay {
  position: sticky;
  top: 0;
  height: 15vh;
  width: 100%;
  background: linear-gradient(to bottom, var(--bg-primary, #0a0a0a) 0%, transparent 100%);
  z-index: 20;
  pointer-events: none;
  margin-bottom: -15vh;
  /* Prevents overlay from taking up actual space */
}

.premium-header {
  margin-bottom: 3rem;
}

.premium-header.rv {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-header.rv.in {
  transform: none;
  opacity: 1;
}

.premium-number {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--accent-green, #31D67B);
  margin-bottom: 24px;
}

.premium-title {
  font-size: clamp(3.5rem, 5vw, 5rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 2rem;
}

.premium-philosophy {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.7;
  max-width: 560px;
}

/* Premium Cards */
.premium-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.premium-card {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 20px;
  padding: 24px;
  height: 320px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), background 0.5s ease;
  display: flex;
  flex-direction: column;
}

.premium-card.rv {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-card.rv.in {
  transform: none;
  opacity: 1;
}

.premium-card:hover {
  transform: translateY(-6px) !important;
  /* override the .in state */
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.premium-card-title {
  font-size: 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.premium-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.premium-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  cursor: default;
}

.premium-list li .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-green, #31D67B);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
  flex-shrink: 0;
}

.premium-list li .text {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
}

.premium-list li:hover .dot {
  transform: scale(1.5);
  box-shadow: 0 0 8px rgba(49, 214, 123, 0.6);
}

.premium-list li:hover .text {
  transform: translateX(4px);
  color: #fff;
}

/* Divider & Featured Project */
.premium-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.1), transparent);
  margin-bottom: 2.5rem;
}

.premium-divider.rv {
  transform: scaleX(0);
  transform-origin: left;
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-divider.rv.in {
  transform: scaleX(1);
  opacity: 1;
}

.premium-featured-project {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.premium-featured-project.rv {
  transform: translateY(10px);
  opacity: 0;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.premium-featured-project.rv.in {
  transform: none;
  opacity: 1;
}

.project-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.premium-project-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  text-decoration: none;
  padding: 0.75rem;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.01);
  border: 1px solid transparent;
  transition: background 0.4s ease, border-color 0.4s ease;
  width: max-content;
}

.premium-project-row:hover {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.05);
}

.project-thumbnail {
  width: 90px;
  height: 54px;
  border-radius: 6px;
  overflow: hidden;
}

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

.project-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding-right: 1rem;
}

.project-info h4 {
  font-size: 1.125rem;
  color: #fff;
  font-weight: 500;
  margin: 0;
}

.project-info .btn-link {
  font-size: 0.875rem;
  color: var(--accent-green, #31D67B);
  font-weight: 500;
}

/* Responsive constraints */
@media (max-width: 1024px) {
  .master-visual-stack {
    grid-column: 1 / -1;
    position: relative;
    top: 0;
    height: 50vw;
    /* Keeps images somewhat proportional on mobile */
    margin-bottom: 3rem;
  }

  .master-content-stack {
    grid-column: 1 / -1;
  }

  .service-content-block {
    min-height: auto;
    padding: 3rem 0;
  }
}

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

  .premium-card {
    height: auto;
  }
}

@media (max-width: 768px) {
  .service-details {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* ==========================================================================
   AMAIA PROJECT PAGE (EDITORIAL LAYOUT)
   ========================================================================== */

/* Inherit global dark background and text colors for .amaia-page */

.amaia-page .shell {
  padding: 0 8vw;
}

/* Ensure the footer container matches the homepage width */
.amaia-page .shell.final-cta-container {
  padding: 0 3rem;
}

.amaia-page .hdr {
  background: rgba(6, 20, 14, 0.4) !important;
  border-bottom: 1px solid rgba(49, 214, 123, 0.15) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.amaia-page .editorial-hdr-in {
  padding: 0.9rem 3rem !important;
}

.amaia-sec {
  padding: 10vh 0;
  position: relative;
}

/* SECTION 01: HERO */
.amaia-hero {
  padding-top: 20vh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.amaia-hero-img-wrap {
  width: 100%;
  height: 60vh;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  margin-bottom: 6rem;
}

.amaia-hero-img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 30%;
  position: absolute;
  top: -10%;
  left: 0;
}

.amaia-hero-content {
  display: grid;
  grid-template-columns: 4fr 6fr;
  gap: 4rem;
  align-items: start;
}

.amaia-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.6);
  display: block;
  margin-bottom: 1rem;
}

.amaia-title {
  font-size: clamp(3rem, 5vw, 5rem);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.amaia-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 3rem;
  font-weight: 400;
}

.amaia-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.meta-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.meta-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.meta-val {
  font-size: 0.9rem;
  line-height: 1.4;
}

.amaia-statement {
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: 2rem;
}

.amaia-desc {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 480px;
  margin-bottom: 3rem;
}

.amaia-hero-actions {
  display: flex;
  gap: 1rem;
}

.amaia-btn-primary,
.amaia-btn-secondary {
  height: 52px;
  padding: 0 32px;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background 0.3s ease;
  cursor: pointer;
  text-decoration: none;
}

.amaia-btn-primary {
  background: #fff;
  color: #06140e;
  border: none;
}

.amaia-btn-primary:hover {
  transform: translateY(-4px);
  background: #f0f0f0;
}

.amaia-btn-secondary {
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.amaia-btn-secondary:hover {
  border-color: #fff;
}

/* SECTION 02: PHILOSOPHY */
.amaia-philosophy {
  padding: 25vh 0;
  text-align: center;
}

.amaia-philosophy-text {
  font-size: clamp(2rem, 4vw, 4rem);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 900px;
  margin: 0 auto;
}

/* SECTION 03: IDENTITY SYSTEM */
.amaia-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: center;
}

.amaia-split-left {
  border-radius: 28px;
  overflow: hidden;
}

.amaia-img-full {
  width: 100%;
  height: auto;
  display: block;
}

.amaia-h2 {
  font-size: clamp(2.5rem, 4vw, 3.5rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
}

.amaia-p {
  font-size: 1.125rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 3rem;
}

.amaia-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.amaia-pill {
  padding: 12px 24px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 0.9rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.7);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  cursor: default;
}

.amaia-pill:hover {
  background: rgba(49, 214, 123, 0.1);
  border-color: rgba(49, 214, 123, 0.3);
  color: #31D67B;
  transform: scale(1.05);
}

/* SECTION 04: TYPOGRAPHY + COLORS */
.amaia-typo-colors {
  padding: 15vh 0;
}

.amaia-typo-grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4rem;
  margin-bottom: 6rem;
}

.amaia-typo-left {
  margin-top: 10vh;
  border-radius: 28px;
  overflow: hidden;
}

.amaia-typo-right {
  border-radius: 28px;
  overflow: hidden;
}

.amaia-typo-content {
  max-width: 600px;
}

/* SECTION 05: VISUAL LANGUAGE */
.amaia-visual-lang {
  padding: 10vh 0 20vh;
}

.amaia-moodboard {
  width: 100%;
  border-radius: 28px;
  overflow: hidden;
  margin: 4rem 0;
}

.amaia-vl-footer {
  max-width: 600px;
  margin-left: auto;
}

/* SECTION 06: APPLICATIONS (MASONRY) */
.amaia-apps {
  padding: 15vh 0;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 40px;
  margin: 0 2rem;
}

.amaia-masonry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.amaia-masonry-col {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.amaia-masonry-item {
  border-radius: 28px;
  overflow: hidden;
  transform: translateZ(0);
}

.amaia-masonry-item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.amaia-masonry-item:hover img {
  transform: scale(1.03);
}

/* SECTION 07: THE OUTCOME */
.amaia-outcome {
  padding: 20vh 0 0;
}

.amaia-outcome-img {
  width: 100%;
  height: 60vh;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  margin-bottom: 0;
}

.amaia-outcome-img img {
  width: 100%;
  height: 120%;
  object-fit: cover;
  object-position: center 30%;
  position: absolute;
  top: -10%;
  left: 0;
}

.amaia-outcome-content {
  max-width: 600px;
  margin: 0 auto 6rem;
  text-align: center;
}

.amaia-outcome-content .amaia-p {
  margin: 0 auto;
}

/* BOTTOM NAVIGATION */
.amaia-nav {
  padding: 15vh 0;
}

.amaia-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
}

.amaia-nav-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  padding: 4rem 3rem;
  border-radius: 28px;
  text-decoration: none;
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), background 0.4s ease, border-color 0.4s ease;
}

.nav-card-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.5);
}

.nav-card-title {
  font-size: 2rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.nav-card-icon {
  position: absolute;
  top: 4rem;
  right: 3rem;
  color: rgba(255, 255, 255, 0.3);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), color 0.4s ease;
}

.amaia-nav-card:hover {
  transform: translateY(-8px);
  background: rgba(49, 214, 123, 0.1);
  border-color: rgba(49, 214, 123, 0.3);
}

.amaia-nav-card:hover .nav-card-icon {
  color: #31D67B;
}

.amaia-nav-card.prev-card .nav-card-icon svg {
  transform: rotate(180deg);
}

.amaia-nav-card.prev-card:hover .nav-card-icon {
  transform: translateX(-10px) !important;
}

.amaia-nav-card.next-card:hover .nav-card-icon {
  transform: translateX(10px) !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {

  .amaia-hero-content,
  .amaia-split,
  .amaia-typo-grid,
  .amaia-masonry,
  .amaia-nav-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .amaia-hero-img-wrap {
    height: 40vh;
  }

  .amaia-apps {
    margin: 0;
    border-radius: 0;
  }

  .amaia-masonry-col.col-right {
    padding-top: 0 !important;
  }

  .amaia-typo-left {
    margin-top: 0;
  }
}

/* Premium Editorial Constraints */
.editorial-constrain {
  max-width: 75%;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .editorial-constrain {
    max-width: 100%;
  }
}


/* ==========================================================================
   GLOBAL RESPONSIVE OVERRIDES
   ========================================================================== */

/* --- 1. Premium Mobile Menu --- */
@media (max-width: 768px) {
  .menu {
    background: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
  }

  .menu.open .mi {
    opacity: 0;
    transform: translateY(20px);
    animation: menuStagger 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }

  .menu.open li:nth-child(1) .mi {
    animation-delay: 0.1s;
  }

  .menu.open li:nth-child(2) .mi {
    animation-delay: 0.15s;
  }

  .menu.open li:nth-child(3) .mi {
    animation-delay: 0.2s;
  }

  .menu.open li:nth-child(4) .mi {
    animation-delay: 0.25s;
  }

  .menu.open li:nth-child(5) .mi {
    animation-delay: 0.3s;
  }

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

/* --- 2. Grid Stacking --- */
@media (max-width: 1024px) {

  /* Projects grid */
  .premium-cards-grid,
  .projects-grid,
  .amaia-masonry {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .amaia-split {
    flex-direction: column !important;
    gap: 2rem !important;
  }

  .amaia-split>* {
    width: 100% !important;
  }
}

@media (max-width: 768px) {

  /* Force 1-column stack on mobile */
  .premium-cards-grid,
  .projects-grid,
  .amaia-masonry,
  .services-grid {
    grid-template-columns: 1fr !important;
    gap: 2rem !important;
  }

  /* Disable alternating reverse flow on mobile */
  .projects-grid .row.reversed {
    flex-direction: column !important;
  }

  .projects-grid .row {
    flex-direction: column !important;
  }

  /* Editorial constraints reset */
  .editorial-constrain {
    max-width: 100% !important;
    padding-inline: 1rem !important;
  }

  /* Mobile Spacing Reductions */
  .home-section,
  .amaia-section,
  section {
    padding-top: 5rem !important;
    padding-bottom: 5rem !important;
  }

  .shell {
    padding-inline: 1.5rem !important;
  }

  /* Typography Clamps */
  h1,
  h2,
  h3,
  .amaia-hero-title,
  .hero-title,
  .brand-title {
    font-size: clamp(2rem, 7vw, 4rem) !important;
    line-height: 1.1 !important;
  }

  /* Ensure minimum button heights for touch */
  button,
  .cta-btn-primary,
  .cta-btn-secondary,
  .amaia-btn-primary {
    min-height: 48px !important;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    white-space: normal;
  }
  
  /* Stack bottom status bar on mobile */
  .status {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    text-align: center !important;
    padding-bottom: 2.5rem !important;
  }
  
  .status-mid {
    display: block !important;
  }

  /* Move hero text up to avoid face */
  .status-dot-txt,
  .hero-display,
  .hero-desc {
    position: relative;
    top: -15vh;
  }
}

/* --- 3. Hover / Performance --- */
@media (hover: none) and (pointer: coarse) {

  /* Disable hover scales that get stuck on touch */
  .cta-btn-primary:hover,
  .amaia-btn-primary:hover {
    transform: none !important;
    box-shadow: none !important;
    filter: none !important;
  }

  /* Prevent horizontal overflow strictly */
  html,
  body {
    overflow-x: hidden !important;
    width: 100%;
    position: relative;
  }
}