:root {
  color-scheme: dark;
  --laframe-bg: #191919;
  --laframe-ink: #f7f3ed;
  --laframe-text: #f0efed;
  --laframe-accent: #c66140;
  --laframe-public-hero-mask-image: url("data:image/svg+xml,%3Csvg%20width%3D%22390%22%20height%3D%22330%22%20viewBox%3D%220%200%20390%20330%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20d%3D%22M390%20300C390%20316.569%20376.569%20330%20360%20330H286C269.431%20330%20256%20316.569%20256%20300V242C256%20225.431%20242.569%20212%20226%20212H164C147.431%20212%20134%20225.431%20134%20242V300C134%20316.569%20120.569%20330%20104%20330H30C13.4315%20330%204.83225e-07%20316.569%200%20300V0H390V300Z%22%20fill%3D%22%23D9D9D9%22%2F%3E%3C%2Fsvg%3E");
  --home-hero-mask-image: var(--laframe-public-hero-mask-image);
  --home-hero-lqip: none;
  --home-hero-middle-lqip: none;
  --home-hero-background-position: center top;
  --home-hero-middle-position: center center;
  --gateway-muted: rgba(240, 239, 237, 0.72);
  --gateway-line: rgba(240, 239, 237, 0.16);
  --gateway-panel: #202020;
  --gateway-panel-strong: #242424;
  --gateway-shadow: 0 18px 48px rgba(0, 0, 0, 0.32);
  --menu-list-color-surface-card: #1f1f1f;
  --menu-list-color-text-primary: hsl(40 12% 93%);
  --menu-list-card-radius: 1.25rem;
  --menu-list-space-1: 0.25rem;
  --menu-list-space-1-5: 0.375rem;
  --menu-list-space-2: 0.5rem;
  --menu-list-space-2-5: 0.625rem;
  --menu-list-space-3: 0.75rem;
  --menu-list-space-4-5: 1.125rem;
  --menu-list-type-line-tight: 1.15;
  --menu-list-type-size-card-title: 1rem;
  --menu-list-card-shadow-mobile:
    0 0.625rem 1.25rem hsl(0 0% 0% / 0.3),
    0 0.125rem 0.5rem hsl(0 0% 0% / 0.18),
    inset 0 0 0 1px hsl(40 12% 93% / 0.06),
    inset 0 1px 0 hsl(0 0% 100% / 0.04);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

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

html,
body {
  min-height: 100%;
  margin: 0;
}

body.branch-gateway-body {
  min-height: 100svh;
  background: var(--laframe-bg);
  color: var(--laframe-ink);
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
  overflow-x: hidden;
}

a {
  color: inherit;
}

img {
  display: block;
  max-width: 100%;
}

.branch-gateway {
  width: min(100%, 520px);
  min-height: 100svh;
  margin-inline: auto;
  background: var(--laframe-bg);
}

.top-bg {
  position: relative;
  isolation: isolate;
  background: var(--laframe-bg);
}

.home-hero {
  position: relative;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  display: block;
  overflow: visible;
  background: none;
}

.home-hero__media {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 390 / 330;
  min-height: 0;
  max-height: none;
  overflow: hidden;
  background-color: var(--laframe-bg);
  background-image: var(--home-hero-lqip, none);
  background-size: cover;
  background-position: var(--home-hero-background-position, center top);
  background-repeat: no-repeat;
  -webkit-mask-image: var(--home-hero-mask-image);
  mask-image: var(--home-hero-mask-image);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center top;
  mask-position: center top;
}

.home-hero__media::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(8, 8, 10, 0.18) 0%,
    rgba(8, 8, 10, 0.28) 100%
  );
}

.home-hero__image,
.home-hero__middle-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  pointer-events: none;
}

.home-hero__image {
  object-position: var(--home-hero-background-position, center top);
}

.home-hero__middle-image {
  object-position: var(--home-hero-middle-position, center center);
}

.home-hero__image--lqip,
.home-hero__middle-image--lqip {
  z-index: 1;
  opacity: 1;
  filter: blur(2px) saturate(0.96);
  transform: translateZ(0);
}

.home-hero__image--full,
.home-hero__middle-image--full {
  z-index: 2;
  opacity: 1;
}

.home-hero__middle-media {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: calc(31.2820512821% - 12px);
  height: calc(35.7575757576% - 6px);
  min-width: 106px;
  min-height: 106px;
  overflow: hidden;
  border-radius: 24px;
  background-color: #171817;
  background-image: var(--home-hero-middle-lqip, none);
  background-size: cover;
  background-position: var(--home-hero-middle-position, center center);
  box-shadow: 0 0 0 8px var(--laframe-bg);
  transform: translateX(-50%);
}

.hero-mobile-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  padding: 0 16px 18px;
  background: var(--laframe-bg);
  color: var(--laframe-text);
}

.hero-mobile-title {
  width: 100%;
  min-height: 1.02em;
  margin: 0;
  padding-top: 20px;
  color: #f0efed;
  font-family: "Avenir Next", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(2rem, 9vw, 2.35rem);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: 0;
  text-align: center;
  text-wrap: balance;
}

.hero__subtitle--mobile {
  width: 100%;
  min-height: calc(1.4em * 3);
  margin: 0;
  color: rgba(240, 239, 237, 0.9);
  font-size: 1.02rem;
  line-height: 1.4;
  letter-spacing: 0;
  text-align: left;
  text-shadow: none;
}

.branch-gateway__selector {
  --home-mobile-section-padding-block: clamp(2rem, 8vw, 2.5rem);
  position: relative;
  z-index: 0;
  width: 100%;
  min-height: 0;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: clamp(18px, 3vw, 28px);
  padding:
    var(--home-mobile-section-padding-block)
    8px
    max(var(--home-mobile-section-padding-block), env(safe-area-inset-bottom));
  background: var(--laframe-bg);
}

.branch-gateway__selector-copy {
  display: grid;
  align-items: center;
  gap: 6px;
  width: min(1300px, calc(100% - 16px));
  margin-inline: auto;
  text-align: center;
}

.branch-gateway__selector-title {
  width: 100%;
  max-width: 100%;
  margin: 0;
  color: #fff;
  font-size: clamp(1.55rem, 7.2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.branch-gateway__selector-subtitle {
  max-width: 100%;
  margin: 0;
  color: #606060;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.55;
  text-wrap: pretty;
}

.branch-gateway__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 14px;
  row-gap: 22px;
  width: min(1300px, calc(100% - 32px));
  margin-inline: auto;
}

.branch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  color: var(--laframe-text);
  text-decoration: none;
  background: var(--menu-list-color-surface-card);
  border: 0;
  border-radius: var(--menu-list-card-radius);
  padding: var(--menu-list-space-1-5);
  box-shadow: var(--menu-list-card-shadow-mobile);
  transform: translateZ(0);
  transition:
    box-shadow 180ms ease,
    transform 180ms ease;
}

.branch-card:focus-visible {
  outline: 2px solid rgba(240, 239, 237, 0.44);
  outline-offset: 3px;
}

.branch-card:active {
  transform: scale(0.985);
}

@media (hover: hover) {
  .branch-card:hover {
    box-shadow: 0 20px 52px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
  }
}

.branch-card__media {
  display: block;
  width: 100%;
  flex: 0 0 auto;
  aspect-ratio: 4 / 5;
  margin-bottom: var(--menu-list-space-2-5);
  overflow: hidden;
  border-radius: 16px;
  background: rgba(240, 239, 237, 0.08);
}

.branch-card__image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: none;
}

.branch-card__body {
  display: grid;
  align-items: start;
  gap: var(--menu-list-space-1);
  min-height: 0;
  margin: 0 var(--menu-list-space-1-5) var(--menu-list-space-2);
  padding: 0;
  text-align: left;
}

.branch-card__label {
  min-width: 0;
  color: var(--menu-list-color-text-primary);
  font-size: var(--menu-list-type-size-card-title);
  font-weight: 700;
  line-height: var(--menu-list-type-line-tight);
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (min-width: 720px) {
  .branch-gateway {
    width: min(100%, 520px);
  }
}