/* Samagra Propmart: home page sections and motion. */
.split {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px,6vw,120px);
  align-items: end
}
.ph {
  background: var(--stone);
  display: flex;
  align-items: flex-end;
  padding: 14px 16px;
  font-size: 10px;
  letter-spacing: .22em;
  color: #5a6378;
  text-transform: uppercase
}
.nav {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3
}
.nav .wrap {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px
}
.wm {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: .32em;
  color: var(--on-dark);
  text-decoration: none
}
.menu {
  display: flex;
  gap: 36px;
  list-style: none;
  margin: 0;
  padding: 0
}
.menu a {
  text-decoration: none;
  color: var(--on-dark);
  font-size: 12px;
  letter-spacing: .18em
}
.menu a:hover {
  border-bottom: 1px solid var(--brass);
  padding-bottom: 4px
}
.nav .btn {
  min-height: 48px;
  padding: 0 22px;
  font-size: 12px
}
.burger {
  display: none;
  width: 44px;
  height: 44px;
  background: 0 0;
  border: 0;
  align-items: center;
  justify-content: center
}
.hero {
  position: relative;
  min-height: min(100vh,920px);
  display: flex;
  align-items: flex-end;
  background: var(--charcoal) center/cover no-repeat
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0
}
.hero .wrap {
  position: relative;
  width: 100%;
  padding-bottom: clamp(48px,9vh,110px);
  z-index: 2
}
.over {
  font-size: 11px;
  letter-spacing: .34em;
  color: var(--on-dark);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 12px
}
.over::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brass)
}
.hero h1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(48px,7.2vw,112px);
  line-height: .96;
  color: var(--on-dark);
  margin: 20px 0 18px;
  max-width: 980px;
  text-wrap: balance
}
.hero .line {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(19px,1.7vw,24px);
  color: var(--on-dark-2);
  margin: 0 0 34px;
  max-width: 560px
}
.ctas {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center
}
.trust {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-bottom: 1px solid var(--line)
}
.trust > div {
  padding: 34px 0;
  text-align: center
}
.trust > div + div {
  border-left: 1px solid var(--line)
}
.trust .n {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(34px,3.4vw,48px);
  color: var(--olive);
  line-height: 1
}
.trust .k {
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--muted);
  margin-top: 8px
}
.statement {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px
}
.rule {
  width: 36px;
  height: 2px;
  background: var(--brass)
}
.statement .h2 {
  font-size: clamp(34px,4.2vw,60px)
}
.projects {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 24px;
  margin-top: 48px
}
.proj .ph {
  aspect-ratio: 4/5;
  position: relative;
  justify-content: space-between
}
.alt {
  position: absolute;
  right: 14px;
  top: 14px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .2em;
  color: var(--ink);
  background: rgba(247,244,239,.92);
  padding: 7px 10px;
  font-variant-numeric: lining-nums
}
.proj .meta {
  margin-top: 18px
}
.proj .nm {
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink);
  margin: 6px 0 10px
}
.places {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 12px;
  margin-top: 44px
}
.places figure {
  margin: 0
}
.places .ph {
  aspect-ratio: 3/2
}
.places figcaption {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin-top: 12px
}
.points {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin-top: 56px;
  border-top: 1px solid var(--line)
}
.points > div {
  padding: 30px 28px 10px 0
}
.points > div + div {
  padding-left: 28px;
  border-left: 1px solid var(--line)
}
.points .t {
  font-family: var(--display);
  font-weight: 500;
  font-size: 30px;
  color: var(--ink);
  margin-bottom: 8px
}
.src {
  font-size: 12px;
  font-style: italic;
  color: var(--muted);
  margin-top: 22px
}
.dark {
  background: var(--charcoal);
  margin-top: var(--gap);
  padding-block: var(--gap)
}
.dark .label {
  color: var(--brass)
}
.dark .h2 {
  color: var(--on-dark)
}
.dark .p {
  color: var(--on-dark-2)
}
.dark .link {
  color: var(--on-dark);
  border-color: var(--brass)
}
.arka {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px,5vw,80px);
  align-items: center
}
.arka img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover
}
.facts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  border-top: 1px solid var(--brass);
  border-bottom: 1px solid var(--charcoal-2);
  margin: 8px 0 6px
}
.facts > div {
  padding: 20px 0
}
.facts .n {
  font-family: var(--display);
  font-weight: 500;
  font-size: 34px;
  color: var(--brass);
  line-height: 1
}
.facts .k {
  font-size: 10px;
  letter-spacing: .24em;
  color: var(--on-dark-3);
  margin-top: 6px
}
.built {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px,6vw,120px);
  align-items: center
}
.built .ph {
  min-height: 460px
}
.latest {
  margin-top: 72px;
  display: grid;
  grid-template-columns: 120px minmax(0,1fr) auto;
  gap: 24px;
  align-items: center;
  padding: 22px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line)
}
.latest .ph {
  height: 90px;
  padding: 0
}
.latest .when {
  font-size: 10px;
  letter-spacing: .26em;
  color: var(--muted);
  display: flex;
  gap: 10px;
  align-items: center
}
.latest .what {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  margin-top: 6px
}
.words {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(32px,6vw,120px);
  align-items: center
}
.words q {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(28px,3vw,44px);
  line-height: 1.25;
  color: var(--olive);
  display: block;
  text-wrap: balance
}
.words .ph {
  min-height: 420px;
  align-items: center;
  justify-content: center;
  gap: 10px
}
.g {
  font-size: 12px;
  letter-spacing: .16em;
  color: var(--muted);
  margin-top: 22px
}
.closing {
  padding-block: var(--gap);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px
}
.closing .h2 {
  font-size: clamp(42px,5vw,72px)
}
footer {
  background: var(--charcoal);
  color: var(--on-dark-2);
  padding: 72px 0 40px;
  font-size: 14px;
  line-height: 1.8
}
.fgrid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 40px
}
footer h3 {
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--brass);
  font-weight: 500;
  margin: 0 0 12px
}
footer a {
  display: block;
  text-decoration: none;
  color: var(--on-dark-2)
}
footer a:hover {
  color: var(--on-dark)
}
.legal {
  border-top: 1px solid var(--charcoal-2);
  margin-top: 48px;
  padding-top: 20px;
  font-size: 12px;
  color: var(--on-dark-3)
}
@media (max-width:900px) {
  .menu,
  .nav .btn {
    display: none
  }
  .burger {
    display: flex
  }
  .nav .wrap {
    height: 76px
  }
  .wm {
    font-size: 20px
  }
  .arka,
  .built,
  .split,
  .words {
    grid-template-columns: 1fr;
    align-items: start
  }
  .projects {
    grid-template-columns: 1fr;
    gap: 40px
  }
  .places {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px
  }
  .places figcaption {
    font-family: var(--sans);
    font-weight: 500;
    font-size: 14px;
    letter-spacing: .02em
  }
  .points {
    grid-template-columns: 1fr
  }
  .points > div,
  .points > div + div {
    padding: 22px 0;
    border-left: 0;
    border-top: 1px solid var(--line)
  }
  .points > div:first-child {
    border-top: 0
  }
  .trust .k {
    font-size: 9px;
    letter-spacing: .2em
  }
  .latest {
    grid-template-columns: 88px minmax(0,1fr)
  }
  .latest .link {
    grid-column: 1/-1
  }
  .built .ph,
  .words .ph {
    min-height: 300px
  }
  .fgrid {
    grid-template-columns: 1fr 1fr
  }
  .hero {
    min-height: 88vh
  }
}
.wm {
  display: inline-flex!important;
  align-items: center;
  gap: 12px;
  letter-spacing: 0!important;
  font-size: inherit
}
.wm svg {
  height: 36px;
  width: auto;
  flex: none
}
.wm .lf {
  fill: var(--leaf)
}
.wt {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1
}
.w1 {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  letter-spacing: .3em;
  margin-right: -.3em;
  color: var(--on-dark)
}
.w2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  font-family: var(--sans);
  font-weight: 500;
  font-size: 8.5px;
  letter-spacing: .5em;
  margin-right: -.5em;
  color: var(--on-dark-2)
}
.w2::after,
.w2::before {
  content: "";
  width: 16px;
  height: 1px;
  background: var(--brass)
}
.w2::after {
  margin-left: -.5em
}
.fwm {
  display: flex!important;
  width: max-content;
  margin-bottom: 18px
}
.fwm svg {
  height: 44px
}
.fwm .w1 {
  font-size: 26px
}
@media (max-width:900px) {
  .wm svg {
    height: 30px
  }
  .w1 {
    font-size: 20px
  }
  .w2 {
    font-size: 7.5px
  }
}
.mclose {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  background: 0 0;
  border: 0;
  color: inherit;
  font: 500 11px var(--sans);
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer
}
.mclose i {
  position: relative;
  width: 18px;
  height: 18px
}
.mclose i::after,
.mclose i::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8.5px;
  width: 18px;
  height: 1.5px;
  background: currentColor;
  transform: rotate(45deg)
}
.mclose i::after {
  transform: rotate(-45deg)
}
.plus {
  margin-left: auto;
  position: relative;
  width: 14px;
  height: 14px
}
.plus::after,
.plus::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6.5px;
  width: 14px;
  height: 1px;
  background: var(--brass);
  transition: transform .3s
}
.plus::after {
  transform: rotate(90deg)
}
.hero {
  overflow: hidden
}
.hbg {
  position: absolute;
  inset: 0;
  background: inherit;
  background-size: cover;
  background-position: center;
  transform-origin: 60% 40%
}
.hcap {
  position: absolute;
  z-index: 2;
  right: var(--pad);
  bottom: calc(clamp(48px,9vh,110px) + 14px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-2)
}
.hcap svg {
  width: 9px;
  height: 9px;
  fill: var(--brass)
}
.cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--on-dark-2);
  text-decoration: none
}
.cue i {
  position: relative;
  display: block;
  width: 1px;
  height: 44px;
  background: rgba(247,244,239,.25);
  overflow: hidden
}
.cue i::after {
  content: "";
  position: absolute;
  left: 0;
  top: -40%;
  width: 1px;
  height: 40%;
  background: var(--brass);
  animation: 2.2s cubic-bezier(.6,0,.4,1) infinite cue
}
@keyframes cue {
  to {
    top: 100%
  }
}
.journey-line {
  margin-top: 56px
}
.journey-line svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible
}
.journey-line .jl-v {
  display: none
}
.jl-base {
  stroke: var(--line);
  stroke-width: 1
}
.jl-draw {
  stroke: var(--olive);
  stroke-width: 1.5;
  fill: none
}
.jl-dot {
  fill: var(--cream);
  stroke: var(--olive);
  stroke-width: 1.5
}
.jl-dot.first {
  fill: var(--olive)
}
.jl-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  fill: var(--ink)
}
.jl-sub {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: .2em;
  fill: var(--muted);
  text-transform: uppercase
}
.jl-time {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .14em;
  fill: var(--olive)
}
.proj .nm {
  transition: color .3s
}
.proj:hover .nm {
  color: var(--olive)
}
.proj .alt {
  transition: transform .35s cubic-bezier(.2,.7,.2,1)
}
.proj:hover .alt {
  transform: translateY(-3px)
}
@media (prefers-reduced-motion:no-preference) {
  @keyframes settle {
    from {
      transform: scale(1.08)
    }
    to {
      transform: scale(1)
    }
  }
  @keyframes drop {
    from {
      transform: translateY(-110%)
    }
    to {
      transform: none
    }
  }
  @keyframes grow {
    from {
      width: 0
    }
  }
  @keyframes rise {
    from {
      transform: translateY(105%)
    }
    to {
      transform: none
    }
  }
  @keyframes up {
    from {
      opacity: 0;
      transform: translateY(14px)
    }
    to {
      opacity: 1;
      transform: none
    }
  }
  @keyframes fade {
    from {
      opacity: 0
    }
    to {
      opacity: 1
    }
  }
}
@media (max-width:900px) {
  .cue,
  .hcap {
    display: none
  }
  .journey-line {
    margin-top: 40px
  }
  .journey-line .jl-h {
    display: none
  }
  .journey-line .jl-v {
    display: block;
    max-width: 360px
  }
}
.alt .pi,
.hcap .pi,
.mm-sub b .pi {
  width: 1.25em;
  height: 1.25em;
  margin-right: 5px;
  vertical-align: -.25em
}
.hcap .pi {
  color: var(--brass);
  width: 16px;
  height: 16px
}
.ar .pi {
  width: 16px;
  height: 16px;
  vertical-align: -3px
}
.words .ph .pi-play {
  width: 22px;
  height: 22px;
  padding: 22px;
  box-sizing: content-box;
  border: 1px solid rgba(90,99,120,.45);
  border-radius: 50%;
  margin-right: 6px;
  transition: background .3s,border-color .3s
}
.words .ph:hover .pi-play {
  background: rgba(247,244,239,.6);
  border-color: #5a6378
}
.fi {
  width: 30px;
  height: 30px;
  color: var(--olive);
  display: block
}
.trust .fi {
  margin: 0 auto 14px;
  width: 26px;
  height: 26px;
  color: var(--brass)
}
.points .fi {
  margin-bottom: 16px
}
.checks {
  list-style: none;
  margin: 4px 0 6px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 0;
  border-top: 1px solid var(--line)
}
.checks li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  color: var(--ink)
}
.checks li:nth-child(odd) {
  padding-right: 16px
}
.checks .fi {
  width: 26px;
  height: 26px
}
.promise {
  list-style: none;
  margin: 6px 0 10px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 40px
}
.promise li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--body)
}
.promise .fi {
  width: 24px;
  height: 24px
}
@media (max-width:900px) {
  .trust .fi {
    width: 22px;
    height: 22px;
    margin-bottom: 10px
  }
  .promise {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px
  }
}
@media (max-width:420px) {
  .checks {
    grid-template-columns: 1fr
  }
  .checks li:nth-child(odd) {
    padding-right: 0
  }
}
@media (max-width:760px) {
  .hero {
    min-height: 100svh
  }
  .hero h1 {
    font-size: 46px;
    line-height: 1.02
  }
  .hero .ctas {
    flex-direction: column;
    align-items: stretch;
    gap: 12px
  }
  .hero .ctas .btn {
    width: 100%;
    justify-content: center
  }
  .trust {
    position: relative;
    z-index: 3;
    margin: -44px 0 0;
    background: var(--cream);
    border: 1px solid var(--line);
    box-shadow: 0 18px 40px -24px rgba(6,15,34,.45)
  }
  .trust > div {
    padding: 22px 4px
  }
  .trust .n {
    font-size: 30px
  }
  .sec-who .statement {
    text-align: left;
    align-items: flex-start
  }
  .sec-who .h2 {
    font-size: 32px
  }
  .sec-proj .split {
    gap: 12px
  }
  .projects {
    display: flex!important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    margin: 32px calc(var(--pad)*-1) 0;
    padding: 0 var(--pad) 4px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
  }
  .projects::-webkit-scrollbar {
    display: none
  }
  .projects .proj {
    flex: 0 0 80%;
    scroll-snap-align: start;
    scroll-margin-left: var(--pad)
  }
  .projects .proj .ph {
    aspect-ratio: 4/5
  }
  .proj .nm {
    font-size: 26px
  }
  .swipe {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 22px;
    font-size: 10.5px;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--muted)
  }
  .sw-bar {
    flex: 1;
    height: 1px;
    background: var(--line);
    position: relative
  }
  .sw-bar i {
    position: absolute;
    left: 0;
    top: -.5px;
    height: 2px;
    width: 33.4%;
    background: var(--olive);
    transition: left .25s
  }
  .sec-why {
    background: var(--sand);
    box-shadow: 0 0 0 100vmax var(--sand);
    clip-path: inset(0 -100vmax);
    margin-top: var(--gap);
    padding-bottom: var(--gap)
  }
  .places {
    display: flex!important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 12px;
    margin: 32px calc(var(--pad)*-1) 0;
    padding: 0 var(--pad);
    scrollbar-width: none
  }
  .places::-webkit-scrollbar {
    display: none
  }
  .places figure {
    flex: 0 0 68%;
    scroll-snap-align: start;
    scroll-margin-left: var(--pad)
  }
  .places .ph {
    aspect-ratio: 3/4
  }
  .places figcaption {
    font-family: var(--display);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: 0
  }
  .points {
    border-top: 0;
    gap: 12px;
    display: grid
  }
  .points > div,
  .points > div + div {
    background: var(--cream);
    border: 0!important;
    padding: 22px 22px 18px!important
  }
  .points .t {
    font-size: 24px
  }
  .arka > *,
  .sec-built .built > *,
  .sec-words .words > * {
    min-width: 0
  }
  .arka img,
  .sec-built .built > .ph,
  .sec-words .words .ph {
    width: calc(100% + var(--pad)*2);
    margin-left: calc(var(--pad)*-1);
    margin-right: 0;
    max-width: none
  }
  .dark {
    padding-top: 0!important
  }
  .arka img {
    aspect-ratio: 4/3
  }
  .arka {
    gap: 28px
  }
  .checks {
    grid-template-columns: 1fr 1fr!important
  }
  .checks li {
    font-size: 14px;
    gap: 10px
  }
  .checks li:nth-child(odd) {
    padding-right: 10px!important
  }
  .latest {
    background: var(--sand);
    border: 0;
    padding: 16px;
    margin-top: 48px
  }
  .sec-words {
    background: var(--sand);
    box-shadow: 0 0 0 100vmax var(--sand);
    clip-path: inset(0 -100vmax);
    margin-top: var(--gap);
    padding-bottom: var(--gap)
  }
  .words q {
    font-size: 30px
  }
  .sec-words .words .ph {
    min-height: 0;
    aspect-ratio: 16/10
  }
  .closing .h2 {
    font-size: 42px
  }
  .promise {
    align-items: flex-start;
    text-align: left;
    background: var(--sand);
    padding: 18px 20px;
    width: 100%
  }
  .closing .btn {
    width: 100%;
    justify-content: center
  }
}
@media (min-width:761px) {
  .swipe {
    display: none
  }
}
@media (prefers-reduced-motion:no-preference) {
  .topo-bg .tp {
    animation-name: tspin;
    animation-timing-function: linear;
    animation-iteration-count: infinite
  }
  @keyframes tspin {
    to {
      transform: rotate(360deg)
    }
  }
  .topo-bg {
    animation: 14s ease-in-out infinite alternate tbreath
  }
  @keyframes tbreath {
    from {
      opacity: .75
    }
    to {
      opacity: 1
    }
  }
}
.ak {
  background: var(--charcoal);
  color: var(--on-dark-2);
  margin-top: var(--gap);
  padding: var(--gap) 0 calc(var(--gap)*.8)
}
.ak-grid {
  display: grid;
  grid-template-columns: minmax(0,7fr) minmax(0,5fr);
  gap: clamp(40px,6vw,96px);
  align-items: center
}
.ak-grid > * {
  min-width: 0
}
.ak-media {
  position: relative;
  padding-bottom: 56px
}
.ak-img {
  display: block;
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover
}
.ak-alt {
  position: absolute;
  left: 16px;
  top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(247,244,239,.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 7px 10px
}
.ak-alt .pi {
  width: 14px;
  height: 14px;
  fill: var(--olive)
}
.ak-inset {
  position: absolute;
  right: -28px;
  bottom: 0;
  width: 38%;
  margin: 0;
  background: var(--charcoal);
  padding: 8px 8px 0;
  box-shadow: 0 20px 40px -20px rgba(0,0,0,.6)
}
.ak-inset-ph {
  aspect-ratio: 4/3;
  background: var(--charcoal-2);
  display: flex;
  align-items: flex-end;
  padding: 10px 12px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--on-dark-3)
}
.ak-inset figcaption {
  padding: 10px 4px 12px;
  font-size: 12px;
  color: var(--on-dark-3)
}
.ak-copy {
  display: flex;
  flex-direction: column;
  gap: 20px
}
.ak .label {
  color: var(--brass)
}
.ak .h2 {
  color: var(--on-dark)
}
.ak .p {
  color: var(--on-dark-2)
}
.ak-facts {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  margin: 6px 0 4px;
  border-top: 1px solid var(--brass)
}
.ak-facts > div {
  padding: 18px 0
}
.ak-facts dt {
  font-family: var(--display);
  font-weight: 500;
  font-size: 36px;
  line-height: 1;
  color: var(--brass)
}
.ak-facts dd {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--on-dark-3)
}
.ak-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 28px;
  margin-top: 6px
}
.ak-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 52px;
  padding: 0 26px;
  background: var(--cream);
  color: var(--charcoal);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none
}
.ak-btn::after {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid var(--brass);
  transition: inset .35s
}
.ak-btn:hover::after {
  inset: 6px
}
.ak-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--on-dark);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--brass)
}
.ak-link .pi {
  width: 16px;
  height: 16px;
  fill: currentColor;
  transition: transform .3s
}
.ak-link:hover .pi {
  transform: translateX(4px)
}
.ak-time {
  list-style: none;
  margin: clamp(56px,7vw,96px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  position: relative
}
.ak-time::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 6px;
  height: 1px;
  background: var(--charcoal-2)
}
.ak-time li {
  position: relative;
  padding: 30px 20px 0 0
}
.ak-time li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--charcoal);
  border: 1px solid var(--brass)
}
.ak-time li.now::before {
  background: var(--brass)
}
.ak-time b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 26px;
  line-height: 1;
  color: var(--on-dark)
}
.ak-time span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--on-dark-3)
}
@media (max-width:900px) {
  .ak {
    padding-top: 0
  }
  .ak-grid {
    grid-template-columns: 1fr;
    gap: 28px
  }
  .ak-media {
    margin: 0 calc(var(--pad)*-1);
    padding-bottom: 70px
  }
  .ak-img {
    aspect-ratio: 4/3
  }
  .ak-inset {
    right: var(--pad);
    width: 46%
  }
  .ak-facts dt {
    font-size: 28px
  }
  .ak-ctas {
    flex-direction: column;
    align-items: stretch
  }
  .ak-btn {
    justify-content: center
  }
  .ak-link {
    align-self: flex-start
  }
  .ak-time {
    grid-template-columns: 1fr;
    margin-top: 48px;
    gap: 0
  }
  .ak-time::before {
    left: 6px;
    right: auto;
    top: 6px;
    bottom: 6px;
    width: 1px;
    height: auto
  }
  .ak-time li {
    padding: 0 0 26px 34px
  }
  .ak-time li:last-child {
    padding-bottom: 0
  }
  .ak-time b {
    font-size: 22px
  }
}
.hero::after {
  z-index: 1;
  background: linear-gradient(to bottom,rgba(6,15,34,.62) 0,rgba(6,15,34,.28) 18%,rgba(6,15,34,0) 34%),linear-gradient(to top,rgba(6,15,34,.86) 0,rgba(6,15,34,.45) 50%,rgba(6,15,34,.2) 100%)!important
}
@media (max-width:760px) {
  .hero::after {
    background: linear-gradient(to bottom,rgba(6,15,34,.55) 0,rgba(6,15,34,.2) 16%,rgba(6,15,34,0) 30%),linear-gradient(to top,rgba(6,15,34,.88) 0,rgba(6,15,34,.5) 45%,rgba(6,15,34,.18) 100%)!important
  }
}
@media (max-width:760px) {
  .sec-who .statement .link {
    align-self: flex-start
  }
}
.rt {
  overflow: visible
}
.rt-ridge {
  fill: var(--sand);
  opacity: .9
}
.rt .jl-base {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.2
}
.rt .jl-draw {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1.6
}
.rt .jl-dot {
  fill: var(--cream);
  stroke: var(--olive);
  stroke-width: 1.6
}
.rt .jl-dot.first {
  fill: var(--olive)
}
.rt-halo {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  opacity: .8
}
.rt-chip {
  fill: var(--cream);
  stroke: var(--line)
}
.rt-ic {
  fill: var(--olive)
}
.rt-seg {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .06em;
  fill: var(--olive)
}
.rt-sub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .06em;
  fill: var(--muted)
}
.rt .jl-name {
  font-size: 24px
}
.rt3 .jl-base {
  stroke: var(--line);
  stroke-width: 1
}
.rt3 .jl-draw {
  fill: none;
  stroke: var(--olive);
  stroke-width: 1
}
.r3-dot {
  fill: var(--cream);
  stroke: var(--olive);
  stroke-width: 1.2
}
.r3-dot.on {
  fill: var(--olive)
}
.r3-seg {
  font-family: var(--display);
  font-style: italic;
  font-size: 17px;
  fill: var(--body)
}
.r3-name {
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  fill: var(--ink)
}
.r3-alt {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: .08em;
  fill: var(--muted)
}
@media (max-width:900px) {
  .journey-line .jl-v {
    max-width: 100%
  }
  .rt .jl-name {
    font-size: 22px
  }
  .r3-seg {
    font-size: 16px
  }
  .r3-name {
    font-size: 22px
  }
}
.built {
  grid-template-columns: minmax(0,6fr) minmax(0,5fr)!important;
  align-items: start!important
}
.bfig {
  margin: 0
}
.bfig .ph {
  min-height: 0!important;
  aspect-ratio: 4/5
}
.bfig figcaption {
  margin-top: 12px;
  font-size: 13px;
  color: var(--muted)
}
.bsteps {
  list-style: none;
  margin: 10px 0 8px;
  padding: 0;
  display: grid;
  gap: 24px
}
.bsteps li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 6px;
  align-items: baseline
}
.bn {
  font-family: var(--display);
  font-weight: 500;
  font-size: 22px;
  color: var(--brass);
  line-height: 1
}
.bsteps b {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.2;
  color: var(--ink)
}
.bsteps li span:not(.bn) {
  display: block;
  margin-top: 4px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--muted)
}
.sec-built .built > div:last-child {
  padding-top: clamp(0px,4vw,56px)
}
@media (max-width:900px) {
  .bfig {
    margin: 0 calc(var(--pad)*-1)
  }
  .bfig .ph {
    aspect-ratio: 4/3
  }
  .bfig figcaption {
    padding: 0 var(--pad)
  }
  .sec-built .built > div:last-child {
    padding-top: 0
  }
  .bsteps {
    gap: 20px
  }
  .bsteps b {
    font-size: 22px
  }
}
.bfig .ph {
  aspect-ratio: 1/1
}
@media (max-width:900px) {
  .built {
    grid-template-columns: 1fr!important;
    gap: 32px!important
  }
  .bfig .ph {
    aspect-ratio: 4/3
  }
}
.closing .link,
.statement .link {
  align-self: center
}
.sec-who {
  position: relative;
  isolation: isolate
}
.topo-bg {
  position: absolute;
  left: 50%;
  top: 50%;
  height: auto;
  aspect-ratio: 4/3;
  z-index: -1;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse at center,#000 30%,transparent 72%);
  mask-image: radial-gradient(ellipse at center,#000 30%,transparent 72%)
}
.topo-bg path {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1;
  vector-effect: non-scaling-stroke
}
.sec-who {
  overflow-x: clip;
  overflow: hidden;
  padding-bottom: 90px;
  margin-bottom: -90px
}
@media (max-width:760px) {
  .topo-bg {
    width: 180vw;
    transform: translate(-50%,-50%)
  }
  .sec-who {
    overflow: hidden
  }
}
.topo-bg .tp {
  transform-origin: 400px 300px;
  transform-box: view-box;
  animation: none!important
}
@media (prefers-reduced-motion:no-preference) {
  .topo-bg {
    animation: 60s ease-in-out infinite alternate tdrift!important
  }
  @keyframes tdrift {
    0% {
      transform: translate(-50%,-50%) rotate(0) scale(1);
      opacity: .8
    }
    50% {
      opacity: 1
    }
    100% {
      transform: translate(-50%,-50%) rotate(14deg) scale(1.06);
      opacity: .85
    }
  }
}
.topo-bg {
  width: min(1100px,130vw);
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center,#000 35%,transparent 100%);
  mask-image: radial-gradient(ellipse 50% 50% at center,#000 35%,transparent 100%);
  animation: none!important;
  transform: translate(-50%,-50%)!important;
  opacity: 1!important;
  -webkit-mask-image: radial-gradient(ellipse 50% 50% at center,rgba(0,0,0,.18) 0%,rgba(0,0,0,.25) 38%,#000 62%,transparent 100%)!important;
  mask-image: radial-gradient(ellipse 50% 50% at center,rgba(0,0,0,.18) 0%,rgba(0,0,0,.25) 38%,#000 62%,transparent 100%)!important
}
.tr-glow {
  fill: none;
  stroke: var(--brass);
  stroke-width: 1.6!important;
  stroke-dasharray: 14 86;
  stroke-linecap: round;
  opacity: .9;
  animation: 9s linear infinite trglow
}
.topo-bg .tr-glow:nth-of-type(2n) {
  animation-duration: 13s;
  animation-direction: reverse
}
@keyframes trglow {
  to {
    stroke-dashoffset: -100
  }
}
.tr-dot {
  fill: var(--leaf)
}
.tr-dot.b {
  fill: var(--brass)
}
@media (prefers-reduced-motion:reduce) {
  .tr-dot,
  .tr-glow {
    display: none
  }
}
.sec-who .statement > * {
  position: relative
}
.sec-who .h2,
.sec-who .label,
.sec-who .link,
.sec-who .p {
  text-shadow: 0 0 18px var(--cream),0 0 6px var(--cream)
}
@media (max-width:760px) {
  .topo-bg {
    -webkit-mask-image: radial-gradient(ellipse 50% 50% at center,rgba(0,0,0,.12) 0%,rgba(0,0,0,.2) 45%,#000 70%,transparent 100%)!important;
    mask-image: radial-gradient(ellipse 50% 50% at center,rgba(0,0,0,.12) 0%,rgba(0,0,0,.2) 45%,#000 70%,transparent 100%)!important;
    left: 92%!important;
    top: 62%!important;
    width: 150vw!important;
    opacity: .85!important
  }
}

/* ===== final round: warm placeholders, sample photos, buttons ===== */
.ph{background:repeating-linear-gradient(135deg,rgba(169,124,69,.28) 0 1px,transparent 1px 14px),#ece6dc;color:#7a6040}
.ph.im{background-color:var(--charcoal);background-position:center;background-size:cover;background-repeat:no-repeat;color:rgba(247,244,239,.85);text-shadow:0 1px 6px rgba(0,0,0,.4);letter-spacing:.06em;text-transform:none;font-size:11px}
.ak-inset-ph{background:repeating-linear-gradient(135deg,rgba(224,181,126,.22) 0 1px,transparent 1px 12px),#0c1a35;color:var(--on-dark-3)}
.proj .ph.im,.places .ph.im{transition:transform 1.1s cubic-bezier(.2,.7,.2,1),clip-path 1.3s cubic-bezier(.65,0,.25,1)}
.proj:hover .ph.im{transform:scale(1.03)}
.proj>.ph,.places figure{overflow:hidden}
.bsteps li{align-items:center}
.bsteps b{font-size:24px}

/* ===== buttons that look like buttons ===== */
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M220.24,132.24l-72,72a6,6,0,0,1-8.48-8.48L201.51,134H40a6,6,0,0,1,0-12H201.51L139.76,60.24a6,6,0,0,1,8.48-8.48l72,72A6,6,0,0,1,220.24,132.24Z'/%3E%3C/svg%3E")}
/* arrow that slides on hover, shared by every button */
main .link::after,.fbtn::before,.gbtn::before,.sbtn::before{content:"";order:2;width:16px;height:16px;flex:none;background:currentColor;-webkit-mask:var(--arrow) center/contain no-repeat;mask:var(--arrow) center/contain no-repeat;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
main .link:hover::after,.fbtn:hover::before,.gbtn:hover::before,.sbtn:hover::before{transform:translateX(4px)}
/* filled buttons: a little depth so they sit above the page */
.fbtn,.gbtn,.sbtn{gap:14px;min-height:56px;transition:background-color .3s,color .3s,border-color .3s,box-shadow .35s,transform .35s cubic-bezier(.2,.7,.2,1)}
.fbtn{box-shadow:0 14px 30px -14px rgba(0,0,0,.55)}
.fbtn:hover{background:#fff;transform:translateY(-2px);box-shadow:0 20px 36px -16px rgba(0,0,0,.6)}
.gbtn{background:rgba(247,244,239,.08);backdrop-filter:blur(6px);border-color:rgba(247,244,239,.85)}
.gbtn:hover{background:var(--cream);color:var(--charcoal);transform:translateY(-2px)}
.sbtn{box-shadow:0 14px 30px -14px rgba(6,17,38,.6)}
.sbtn:hover{transform:translateY(-2px)}
/* secondary buttons (were plain underlined text) */
main .link{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 22px;border:1px solid var(--olive);background:transparent;color:var(--olive);font-size:12px;font-weight:500;letter-spacing:.16em;text-decoration:none;transition:background-color .3s,color .3s,border-color .3s,transform .35s cubic-bezier(.2,.7,.2,1)}
main .link:hover{background:var(--olive);color:var(--on-dark);transform:translateY(-2px)}
.loc .link,.se .link{color:var(--on-dark);border-color:rgba(247,244,239,.7)}
.loc .link:hover,.se .link:hover{background:var(--cream);color:var(--olive);border-color:var(--cream)}
.faq .link{margin-top:6px}
@media (max-width:900px){main .link{min-height:48px}}
/* project cards keep a light text link with an arrow */
main .proj .link{min-height:auto;padding:0 0 4px;border:0;border-bottom:1px solid var(--brass);gap:10px}
main .proj .link:hover{background:none;color:var(--olive);transform:none}
.statement .link{align-self:center}
.latest .link{white-space:nowrap}
/* while a sample photo loads (or if it is blocked) the box shows the dusk illustration */
.ph.im{background-color:#1c2b4a}
/* five projects: two large cards, then three */
@media (min-width:901px){
  .projects{grid-template-columns:repeat(6,minmax(0,1fr))}
  .projects .proj{grid-column:span 2}
  .projects .proj:nth-child(-n+2){grid-column:span 3}
  .projects .proj:nth-child(-n+2) .ph{aspect-ratio:3/2}
}

/* Arka before / today slider */
.ak .ba{position:relative;aspect-ratio:4/3;overflow:hidden;background:#0c1a35;user-select:none;touch-action:pan-y;--x:50%}
.ak .ba-now,.ak .ba-then{position:absolute;inset:0;background:center/cover no-repeat}
.ak .ba-then{clip-path:inset(0 calc(100% - var(--x)) 0 0);background-position:30% 55%}
.ak .ba-tag{position:absolute;bottom:16px;z-index:2;font-size:11px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#f7f4ef;background:rgba(6,15,34,.6);padding:7px 11px;backdrop-filter:blur(4px)}
.ak .ba-l{left:16px;background:var(--brass)}.ak .ba-r{right:16px}
.ak .ba-h{position:absolute;top:0;bottom:0;left:var(--x);z-index:2;width:1px;background:#f7f4ef;pointer-events:none}
.ak .ba-h b{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:48px;height:48px;border-radius:50%;background:#f7f4ef;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 4px rgba(247,244,239,.22)}
.ak .ba-h b::after{content:"";position:absolute;inset:4px;border-radius:50%;border:1px solid var(--brass)}
.ak .ba-h .pi{width:18px;height:18px;color:#0a1a38}
.ak .ba input{position:absolute;inset:0;z-index:3;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ak .ba input:focus-visible~.ba-h b{outline:2px solid var(--brass);outline-offset:3px}
.ak .ak-media.has-ba{padding-bottom:0}
.ak .ak-media.has-ba .ak-alt{z-index:4}
.ak .ba-cap{display:block;margin-top:12px;font-size:12px;color:var(--on-dark-3)}
@media (max-width:900px){.ak .ba-cap{padding:0 var(--pad)}}