.tottem-colombia-concept {
  --color-accent: #b79a72;
  --concept-charcoal: #24211d;
  --concept-ink: #181613;
  --concept-paper: #eadfcd;
  --concept-sepia: #dfcfb5;
  --concept-sepia-deep: #c8b291;
  --concept-line: rgba(226, 210, 184, 0.44);
  --concept-line-dark: rgba(34, 28, 20, 0.3);
  background: var(--concept-charcoal);
  height: 100svh;
  overflow: hidden;
}

.tottem-colombia-concept .site-nav {
  mix-blend-mode: normal;
}

.tottem-colombia-concept main {
  height: 100svh;
  overflow: hidden;
}

.tottem-colombia-concept .nav-links,
.tottem-colombia-concept .menu-toggle,
.tottem-colombia-concept .mobile-menu {
  display: none;
}

.tottem-colombia-concept .site-nav {
  pointer-events: none;
}

.tottem-colombia-concept .brand,
.tottem-colombia-concept .route-lang-switcher {
  pointer-events: auto;
}

.tottem-colombia-concept .nav-links a:hover,
.tottem-colombia-concept .nav-links a:focus-visible {
  color: rgba(238, 231, 220, 0.82);
}

.colombia-gateway {
  background: #171512;
  height: 100svh;
  min-height: 0;
  overflow: clip;
  position: relative;
}

.colombia-gateway::before {
  background:
    linear-gradient(95deg, rgba(16, 14, 12, 0.9) 0%, rgba(17, 15, 13, 0.7) 29%, rgba(17, 15, 13, 0.12) 52%, rgba(17, 15, 13, 0.02) 100%),
    radial-gradient(circle at 69% 43%, rgba(255, 237, 205, 0.22), transparent 28%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.06) 0%, rgba(0, 0, 0, 0.02) 48%, rgba(0, 0, 0, 0.38) 100%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.colombia-gateway::after {
  content: "";
  display: none;
}

.colombia-gateway-media {
  background:
    linear-gradient(90deg, #171512 0%, #171512 24%, rgba(23, 21, 18, 0) 58%),
    #171512;
  inset: 0 0 34svh 0;
  position: absolute;
  z-index: 0;
}

.colombia-gateway-media img {
  filter: saturate(0.98) contrast(1) brightness(1.02);
  height: 100%;
  object-fit: cover;
  object-position: 100% 100%;
  transform: none;
  transform-origin: 100% 100%;
  width: 100%;
}

.colombia-gateway-copy {
  color: var(--concept-paper);
  display: flex;
  flex-direction: column;
  inset: 0 0 34svh;
  justify-content: flex-end;
  max-width: min(48rem, 52vw);
  padding: calc(var(--nav-height) + clamp(3rem, 8vh, 7rem)) 4.1vw clamp(2.5rem, 5.8vh, 4.8rem);
  position: absolute;
  z-index: 3;
}

.colombia-gateway-kicker {
  color: rgba(238, 231, 220, 0.7);
  font-family: var(--font-brand);
  font-size: clamp(0.72rem, 0.85vw, 0.9rem);
  letter-spacing: 0.22em;
  margin: 0 0 clamp(1.3rem, 2.8vh, 2.4rem);
  text-transform: uppercase;
}

@media (min-width: 721px) {
  .colombia-gateway-kicker {
    display: none;
  }
}

.colombia-gateway-title {
  color: rgba(245, 239, 230, 0.94);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3.25rem, 5.25vw, 7.15rem);
  font-weight: 300;
  letter-spacing: -0.058em;
  line-height: 0.94;
  margin: 0 0 clamp(0.95rem, 2vh, 1.55rem);
  max-width: 11.3ch;
  text-shadow: 0 22px 70px rgba(0, 0, 0, 0.42);
}

.colombia-gateway-line {
  border-left: 1px solid rgba(238, 231, 220, 0.4);
  color: rgba(245, 239, 230, 0.86);
  font-size: clamp(1.05rem, 1.38vw, 1.48rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  line-height: 1.45;
  margin: 0;
  max-width: 34rem;
  padding-left: clamp(1rem, 1.6vw, 1.45rem);
  text-shadow: 0 18px 46px rgba(0, 0, 0, 0.36);
}

.colombia-gateway-sub {
  color: rgba(238, 231, 220, 0.7);
  font-size: clamp(0.86rem, 0.94vw, 0.98rem);
  font-family: var(--font-brand);
  letter-spacing: 0.045em;
  line-height: 1.55;
  margin: clamp(1.15rem, 2.1vh, 1.75rem) 0 0;
  max-width: 34rem;
  text-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.colombia-gateway-proof {
  bottom: calc(33svh + clamp(1.2rem, 2.6vw, 2.2rem));
  color: rgba(238, 231, 220, 0.46);
  font-family: var(--font-brand);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  max-width: 17rem;
  position: absolute;
  right: 4.1vw;
  text-transform: uppercase;
  z-index: 3;
}

.colombia-gateway-grid {
  border-top: 1px solid var(--concept-line);
  bottom: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.02fr 0.84fr;
  height: 34svh;
  left: 0;
  min-height: 15.5rem;
  position: absolute;
  right: 0;
  box-shadow: 0 -1px 0 rgba(15, 13, 10, 0.5);
  z-index: 4;
}

.gateway-card,
.gateway-mini-card {
  color: inherit;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}

.gateway-card {
  border-right: 1px solid var(--concept-line);
  display: grid;
  gap: 0.92rem;
  min-height: 100%;
  padding: clamp(1.7rem, 3.3vw, 3.1rem);
}

.gateway-card::before,
.gateway-mini-card::before {
  background: rgba(226, 210, 184, 0.08);
  border: 1px solid rgba(234, 223, 205, 0.26);
  content: "";
  inset: 0;
  opacity: 0;
  position: absolute;
  transform: scale(0.985);
  transition: opacity 420ms ease, transform 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gateway-card:hover::before,
.gateway-card:focus-visible::before,
.gateway-mini-card:hover::before,
.gateway-mini-card:focus-visible::before {
  opacity: 1;
  transform: scale(1);
}

.gateway-card--colombia {
  background:
    linear-gradient(100deg, rgba(232, 221, 202, 0.58), rgba(232, 221, 202, 0.27) 47%, rgba(219, 199, 166, 0.08)),
    url("/images/generated/colombia/gateway/gateway-sketch-paper-v2.webp") center / cover;
  color: #221b13;
}

.gateway-card--international {
  background:
    linear-gradient(100deg, rgba(27, 25, 22, 0.64), rgba(27, 25, 22, 0.48) 48%, rgba(27, 25, 22, 0.3)),
    url("/images/generated/colombia/gateway/gateway-sketch-negative.webp") center / cover;
  color: var(--concept-paper);
}

.gateway-card--colombia,
.gateway-card--international {
  align-content: stretch;
  gap: clamp(0.78rem, 1vw, 1rem);
  grid-template-rows: auto minmax(0, 1fr) auto;
  padding:
    clamp(3.15rem, 4.7vw, 5.1rem)
    clamp(2.1rem, 3.05vw, 3.25rem)
    clamp(1.95rem, 2.75vw, 2.9rem);
}

.gateway-card--contact {
  background:
    radial-gradient(circle at 14% 16%, rgba(255, 248, 232, 0.36), transparent 28%),
    linear-gradient(135deg, rgba(232, 221, 202, 0.48), rgba(198, 176, 143, 0.64)),
    url("/images/generated/colombia/gateway/gateway-sketch-paper-v2.webp") 52% 48% / 122% auto;
  background-blend-mode: normal, normal, multiply;
  color: #28231e;
}

.gateway-card--contact::before {
  background:
    linear-gradient(110deg, rgba(232, 221, 202, 0.1), transparent 36%),
    url("/images/generated/colombia/gateway/gateway-sketch-paper-v2.webp") 66% 46% / 150% auto;
  border: 0;
  mix-blend-mode: multiply;
  opacity: 0.5;
  transform: none;
}

.gateway-card--contact::after {
  background:
    linear-gradient(90deg, rgba(40, 33, 24, 0.45), rgba(40, 33, 24, 0.16) 58%, transparent 58%),
    linear-gradient(132deg, transparent 0 61%, rgba(40, 33, 24, 0.26) 61.2%, transparent 61.8%),
    radial-gradient(ellipse at 90% 78%, rgba(69, 53, 34, 0.22), transparent 34%);
  bottom: clamp(1.25rem, 2vw, 2.1rem);
  content: "";
  height: 1px;
  left: clamp(1.15rem, 2vw, 2rem);
  opacity: 0.75;
  position: absolute;
  right: clamp(1.15rem, 2vw, 2rem);
  transform: translateY(clamp(2.75rem, 4.6vw, 4.7rem));
  transform-origin: left center;
  transition: opacity 360ms ease, transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  z-index: 1;
}

.gateway-card-kicker {
  color: currentColor;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  opacity: 0.52;
  text-transform: uppercase;
}

.gateway-card strong,
.gateway-mini-card span,
.gateway-card--contact strong {
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(2.1rem, 3.5vw, 4.9rem);
  font-weight: 300;
  letter-spacing: -0.05em;
  line-height: 0.92;
  position: relative;
  z-index: 1;
}

.gateway-card-body {
  align-self: start;
  font-size: clamp(0.94rem, 0.96vw, 1.06rem);
  line-height: 1.46;
  max-width: min(27rem, 100%);
  opacity: 0.86;
  position: relative;
  z-index: 1;
}

.gateway-card-action {
  align-self: end;
  display: flex;
  justify-content: flex-end;
  min-height: clamp(1rem, 1.2vw, 1.2rem);
  position: relative;
  z-index: 1;
}

.gateway-card i {
  font-style: normal;
  font-size: 0;
  height: clamp(0.9rem, 1vw, 1.15rem);
  line-height: 1;
  opacity: 0.72;
  position: relative;
  transform: translateX(0);
  transition: transform 360ms cubic-bezier(0.16, 1, 0.3, 1), opacity 260ms ease;
  width: clamp(2.8rem, 4.2vw, 4.2rem);
}

.gateway-card i::before {
  background: currentColor;
  content: "";
  height: 1px;
  left: 0;
  position: absolute;
  top: 50%;
  width: 100%;
}

.gateway-card i::after {
  border-right: 1px solid currentColor;
  border-top: 1px solid currentColor;
  content: "";
  height: clamp(0.62rem, 0.72vw, 0.82rem);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: clamp(0.62rem, 0.72vw, 0.82rem);
}

.gateway-card:hover i,
.gateway-card:focus-visible i {
  opacity: 1;
  transform: translateX(0.45rem);
}

@media (min-width: 721px) {
  .gateway-card--colombia .gateway-card-action,
  .gateway-card--international .gateway-card-action {
    bottom: clamp(1rem, 1.35vw, 1.45rem);
    position: absolute;
    right: clamp(2.1rem, 3.05vw, 3.25rem);
    width: clamp(2.8rem, 4.2vw, 4.2rem);
  }
}

.gateway-card-stack {
  border-right: 1px solid var(--concept-line);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, 1fr);
}

.gateway-mini-card {
  align-items: flex-end;
  border-bottom: 1px solid var(--concept-line);
  border-right: 1px solid var(--concept-line);
  display: flex;
  min-height: 100%;
  padding:
    clamp(1rem, 1.45vw, 1.42rem)
    clamp(1.55rem, 2.35vw, 2.45rem)
    clamp(1rem, 1.55vw, 1.5rem);
}

.gateway-mini-card:nth-child(2n) {
  border-right: 0;
}

.gateway-mini-card--education {
  background:
    linear-gradient(90deg, rgba(21, 18, 15, 0.72), rgba(21, 18, 15, 0.36)),
    url("/images/work/education/san-marcos-pergola-courtyard.webp") center / cover;
}

.gateway-mini-card--churches {
  background:
    linear-gradient(90deg, rgba(21, 18, 15, 0.72), rgba(21, 18, 15, 0.36)),
    url("/images/generated/colombia/churches/catholic-nave-hero.webp") center / cover;
}

.gateway-mini-card--residential {
  background:
    linear-gradient(90deg, rgba(21, 18, 15, 0.68), rgba(21, 18, 15, 0.28)),
    url("/images/work/residential/casa-candela/frame-05.webp") center / cover;
}

.gateway-mini-card--renovations {
  background:
    linear-gradient(90deg, rgba(21, 18, 15, 0.7), rgba(21, 18, 15, 0.34)),
    url("/images/generated/colombia/core/renovation-hero.webp") center / cover;
}

.gateway-mini-card--projects {
  background:
    linear-gradient(90deg, rgba(21, 18, 15, 0.7), rgba(21, 18, 15, 0.3) 48%, rgba(21, 18, 15, 0.46)),
    url("/images/work/residential/fizebad/cover.jpeg") center 54% / cover;
  border-bottom: 0;
  border-right: 0;
  color: rgba(247, 240, 229, 0.94);
  grid-column: 1 / -1;
}

.gateway-mini-card span {
  color: currentColor;
  font-size: clamp(1.28rem, 1.78vw, 2.38rem);
  letter-spacing: -0.045em;
  line-height: 0.96;
  max-width: 8.8ch;
  overflow-wrap: normal;
  text-shadow: 0 12px 36px rgba(0, 0, 0, 0.28);
  text-wrap: balance;
}

.gateway-mini-card--renovations span {
  font-size: clamp(1.08rem, 1.42vw, 1.95rem);
  max-width: 10.8ch;
}

.gateway-mini-card--projects span {
  max-width: 9ch;
  text-shadow: 0 18px 38px rgba(0, 0, 0, 0.44);
}

.gateway-card--contact {
  align-content: stretch;
  gap: clamp(1.35rem, 1.8vw, 2.05rem);
  grid-template-rows: auto auto;
  justify-items: start;
  padding:
    calc(clamp(3.15rem, 4.7vw, 5.1rem) + clamp(0.28rem, 0.34vw, 0.42rem))
    clamp(1.45rem, 2.4vw, 2.4rem)
    clamp(1.55rem, 2.35vw, 2.35rem);
}

.gateway-card--contact strong {
  font-size: clamp(2.2rem, 2.82vw, 3.5rem);
  line-height: 0.94;
  max-width: none;
  overflow-wrap: normal;
  transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
  word-break: normal;
}

.gateway-contact-links {
  align-self: start;
  display: grid;
  gap: 0.72rem 0.92rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.gateway-contact-links a,
.gateway-contact-links span {
  border-top: 1px solid rgba(40, 33, 24, 0.38);
  color: currentColor;
  font-family: var(--font-brand);
  font-size: clamp(0.72rem, 0.78vw, 0.9rem);
  letter-spacing: 0.095em;
  line-height: 1;
  opacity: 0.86;
  padding-top: 0.62rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: border-color 260ms ease, opacity 260ms ease, transform 360ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gateway-contact-links a:hover,
.gateway-contact-links a:focus-visible {
  border-color: rgba(40, 33, 24, 0.74);
  opacity: 1;
  outline: 0;
  transform: translateY(-0.08rem);
}

.gateway-contact-links .is-placeholder {
  opacity: 0.48;
}

.gateway-card--contact:hover::before,
.gateway-card--contact:focus-within::before {
  opacity: 0.64;
}

.gateway-card--contact:hover::after,
.gateway-card--contact:focus-within::after {
  opacity: 1;
  transform: translateY(clamp(2.75rem, 4.6vw, 4.7rem)) scaleX(1.05);
}

.gateway-card--contact:hover strong,
.gateway-card--contact:focus-within strong {
  transform: translateY(-0.12rem);
}

.colombia-concept-manifest {
  background:
    linear-gradient(180deg, rgba(40, 37, 32, 0.98), rgba(50, 47, 42, 0.98)),
    radial-gradient(circle at 72% 10%, rgba(183, 154, 114, 0.22), transparent 30%);
  padding: clamp(5rem, 9vw, 9rem) 6vw;
}

.colombia-manifest-shell {
  display: grid;
  gap: clamp(1.5rem, 5vw, 6rem);
  grid-template-columns: minmax(10rem, 0.35fr) minmax(24rem, 1fr) minmax(18rem, 0.48fr);
  margin: 0 auto;
  max-width: 1500px;
}

.colombia-manifest-shell .section-label {
  color: rgba(238, 231, 220, 0.52);
}

.colombia-manifest-shell h2 {
  color: rgba(245, 239, 230, 0.95);
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(3rem, 6vw, 7.4rem);
  font-weight: 300;
  letter-spacing: -0.06em;
  line-height: 0.92;
  max-width: 12ch;
}

.colombia-manifest-shell p:not(.section-label) {
  align-self: end;
  color: rgba(238, 231, 220, 0.68);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.85;
  max-width: 33rem;
}

.tottem-colombia-concept .work-curation-section {
  background: #302d29;
}

.tottem-colombia-concept .colombia-services {
  background:
    linear-gradient(rgba(235, 228, 216, 0.94), rgba(235, 228, 216, 0.94)),
    linear-gradient(90deg, rgba(54, 53, 52, 0.06) 1px, transparent 1px),
    linear-gradient(0deg, rgba(54, 53, 52, 0.06) 1px, transparent 1px);
}

@media (max-width: 1080px) {
  .colombia-gateway {
    height: 100svh;
  }

  .colombia-gateway-copy {
    max-width: min(42rem, 70vw);
  }

  .colombia-gateway-grid {
    grid-template-columns: 1fr 1fr;
    min-height: auto;
  }

  .gateway-card,
  .gateway-mini-card {
    min-height: 15rem;
  }

  .gateway-card-stack {
    grid-column: span 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(8rem, 1fr));
  }

  .gateway-card--contact {
    grid-column: span 2;
    min-height: 12rem;
  }

  .colombia-gateway-proof {
    display: none;
  }

  .colombia-manifest-shell {
    grid-template-columns: 1fr;
  }

  .colombia-manifest-shell h2 {
    max-width: 13ch;
  }
}

@media (max-width: 720px) {
  .tottem-colombia-concept {
    --nav-height: 72px;
  }

  .colombia-gateway {
    display: block;
    height: 100svh;
    min-height: 0;
  }

  .colombia-gateway-media {
    inset: 0 0 44svh 0;
    position: absolute;
  }

  .colombia-gateway-media img {
    object-fit: cover;
    object-position: 76% 100%;
    transform: none;
    transform-origin: 76% 100%;
  }

  .colombia-gateway::before {
    background:
      linear-gradient(180deg, rgba(16, 14, 12, 0.12), rgba(16, 14, 12, 0.66) 62%, rgba(16, 14, 12, 0.88) 100%),
      linear-gradient(90deg, rgba(16, 14, 12, 0.78), rgba(16, 14, 12, 0.08));
    height: auto;
    inset: 0;
  }

  .colombia-gateway-copy {
    align-self: auto;
    bottom: auto;
    display: flex;
    flex-direction: column;
    height: auto;
    inset: 0 0 44svh;
    justify-content: flex-end;
    justify-self: auto;
    max-width: 100%;
    padding: calc(var(--nav-height) + 0.5rem) 6vw clamp(1.35rem, 4.4vh, 2.5rem);
    position: absolute;
  }

  .colombia-gateway-kicker {
    font-size: 0.68rem;
    margin-bottom: 0.9rem;
  }

  .colombia-gateway-title {
    font-size: clamp(2.6rem, 12.5vw, 4.05rem);
    letter-spacing: -0.058em;
    line-height: 0.9;
    margin-bottom: 0.85rem;
    max-width: 9.6ch;
  }

  .colombia-gateway-line {
    font-size: clamp(0.9rem, 4vw, 1.02rem);
    line-height: 1.45;
    max-width: 18.5rem;
    padding-left: 0.9rem;
  }

  .colombia-gateway-sub {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
    line-height: 1.46;
    margin-top: 0.95rem;
    max-width: 21.5rem;
  }

  .colombia-gateway-grid {
    bottom: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(4, 1fr);
    height: 44svh;
    left: 0;
    min-height: 0;
    position: absolute;
    right: 0;
  }

  .gateway-card,
  .gateway-mini-card {
    border-bottom: 1px solid var(--concept-line);
    border-right: 1px solid var(--concept-line);
    min-height: 0;
    padding: 0.72rem 5.5vw 0.82rem;
  }

  .gateway-card--colombia,
  .gateway-card--international {
    align-content: center;
    gap: 0.28rem;
    grid-template-rows: auto auto;
  }

  .gateway-card:nth-child(even),
  .gateway-mini-card--churches,
  .gateway-card--contact {
    border-right: 0;
  }

  .gateway-card--contact {
    border-bottom: 0;
    grid-column: auto;
    min-height: 0;
    gap: 0.42rem;
    padding: 0.72rem 5vw 0.64rem;
  }

  .gateway-card--contact::after {
    bottom: 0.62rem;
    left: 5vw;
    right: 5vw;
    transform: translateY(2.8rem);
  }

  .gateway-card-stack {
    display: contents;
  }

  .gateway-mini-card {
    min-height: 0;
  }

  .gateway-mini-card--renovations {
    padding-right: 8vw;
  }

  .gateway-mini-card:last-child {
    border-bottom: 1px solid var(--concept-line);
  }

  .gateway-mini-card--projects {
    border-right: 1px solid var(--concept-line);
    grid-column: auto;
  }

  .gateway-card strong,
  .gateway-card--contact strong {
    font-size: clamp(1.42rem, 7.8vw, 2rem);
  }

  .gateway-mini-card span {
    font-size: clamp(1.1rem, 6.1vw, 1.52rem);
  }

  .gateway-mini-card--renovations span {
    font-size: clamp(0.96rem, 5.25vw, 1.28rem);
  }

  .gateway-card--contact strong {
    font-size: clamp(1.46rem, 7.4vw, 1.96rem);
    max-width: 8ch;
  }

  .gateway-card--contact:hover::after,
  .gateway-card--contact:focus-within::after {
    transform: translateY(2.8rem) scaleX(1.04);
  }

  .gateway-contact-links {
    gap: 0.3rem 0.46rem;
    margin-top: 0;
    width: 100%;
  }

  .gateway-contact-links a,
  .gateway-contact-links span {
    font-size: 0.56rem;
    letter-spacing: 0.075em;
    padding-top: 0.28rem;
  }

  .gateway-card-action {
    justify-content: flex-start;
    min-height: 0.72rem;
  }

  .gateway-card i {
    height: 0.72rem;
    width: 2rem;
  }

  .gateway-card-kicker,
  .gateway-card-body {
    display: none;
  }

  .colombia-concept-manifest {
    padding: 4.5rem 6vw;
  }

  .colombia-manifest-shell h2 {
    font-size: clamp(3.2rem, 15vw, 5rem);
    max-width: 9ch;
  }
}

@media (max-width: 380px) {
  .colombia-gateway-title {
    font-size: clamp(3.3rem, 16.5vw, 4.15rem);
  }

  .colombia-gateway-line {
    font-size: clamp(1.8rem, 9.5vw, 2.4rem);
  }

  .colombia-gateway-kicker {
    font-size: 0.6rem;
    margin-bottom: 0.6rem;
  }

  .colombia-gateway-sub {
    font-size: 0.86rem;
  }
}