/* ==========================================================================
   Sections — page-specific layouts (mobile first)
   ========================================================================== */

/* Shared: full-width CTA on small screens */
.hero__cta,
.areas__cta {
  width: 100%;
}

.hero__cta .btn-cta__label,
.areas__cta .btn-cta__label {
  width: 72.83%;
}

/* Hero
   ========================================================================== */

.hero {
  --hero-pb: clamp(32px, 26.6px + 1.3752vw, 53px);

  position: relative;
  padding-top: clamp(128px,0px + 9.0373vw, 266px);
  padding-bottom: var(--hero-pb);
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-dark);
}

.hero__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(28.8px, 24.37px + 1.1264vw, 46px);
}

.hero__title {
  font-size: min(var(--fs-h1), 8.2vw);
  font-weight: 500;
  line-height: var(--lh-h1);
  letter-spacing: -0.03em;
}

.hero__lead {
  max-width: 322px;
  margin-top: 10px;
  font-size: var(--fs-lead);
  line-height: var(--lh-lead);
  letter-spacing: -0.02em;
  color: var(--color-muted-inverse);
}

.hero__cta {
  max-width: 420px;
  margin-top: 26px;
}

.hero__stage {
  position: relative;
  margin-top: 24px;
}

.hero__media {
  position: relative;
  aspect-ratio: 357 / 472;
  overflow: hidden;
  border-radius: clamp(22px, 12.48px + 2.4231vw, 59px);
  transform: translateZ(0);
}

.hero__picture,
.hero__picture img {
  width: 100%;
  height: 100%;
}

.hero__picture img {
  object-fit: cover;
}

.hero__mascot {
  position: absolute;
  top: 0;
  right: 1.96%;
  z-index: 1;
  width: 45.66%;
  height: auto;
  margin-top: 27.73%;
  pointer-events: none;
  transform-origin: 50% 100%;
}

.estimate {
  --form-pad: clamp(16px, 11.88px + 1.0478vw, 32px);

  position: relative;
  z-index: 2;
  margin: -60.5% 8px 0;
  padding: clamp(21px, 20.36px + 0.1637vw, 23.5px) var(--form-pad) var(--form-pad);
  color: var(--color-black);
  background-color: var(--color-white);
  border-radius: clamp(21px, 19.71px + 0.3274vw, 26px);
}

.estimate__title {
  font-size: clamp(20px, 16.4px + 0.9168vw, 34px);
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.02em;
}

.estimate__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(15px, 14.1px + 0.2292vw, 18.5px) clamp(16px, 13.94px + 0.5239vw, 24px);
  margin-top: clamp(10px, 6.01px + 1.0151vw, 25.5px);
}

.estimate__submit {
  position: relative;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: clamp(48px, 44.4px + 0.9168vw, 62px);
  margin-top: clamp(16px, 11.88px + 1.0478vw, 32px);
  overflow: hidden;
  font-size: clamp(16px, 14.97px + 0.262vw, 20px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-white);
  background-color: var(--color-accent);
  border-radius: 62px;
  isolation: isolate;
  transition: background-color 0.3s;
}

.estimate__submit::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--color-dark);
  border-radius: inherit;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.6s var(--ease-out);
}

.estimate__submit.is-success {
  background-color: #1f9d55;
}

.estimate__submit.is-loading {
  cursor: progress;
}

.estimate__submit.is-loading::after {
  width: 18px;
  height: 18px;
  content: "";
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: var(--color-white);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.estimate__status {
  margin-top: 12px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

.estimate__status:empty {
  display: none;
}

.estimate__status[data-type="success"] {
  color: #1f9d55;
}

.estimate__status[data-type="error"] {
  color: #d93025;
}

/* Honeypot field — hidden from people, visible to spam bots */
.estimate__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (hover: hover) {
  .estimate__submit:hover::before {
    transform: scaleX(1);
    transform-origin: left;
  }
}

@media (min-width: 768px) {
  .hero__lead {
    max-width: 520px;
  }

  .hero__media {
    aspect-ratio: 16 / 10;
  }

  .hero__mascot {
    right: 3%;
    width: 28%;
    margin-top: 26.5%;
  }

  .estimate {
    max-width: 586px;
    margin: -18% auto 0;
  }
}

@media (min-width: 1024px) {
  .hero__intro {
    align-items: flex-start;
    text-align: left;
  }

  .hero__row {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    align-self: stretch;
    justify-content: space-between;
  }

  .hero__title {
    flex-shrink: 0;
  }

  .hero__lead {
    max-width: 23.4em;
    margin-top: 9px;
    color: rgba(255, 255, 255, 0.8);
  }

  .hero__cta {
    width: 260px;
    margin-top: 32px;
  }

  .hero__cta .btn-cta__label {
    width: 75.77%;
  }

  /* Image and form share one grid cell, so the image always grows to fit the form */
  .hero__stage {
    display: grid;
    margin-top: clamp(40px, 2.82vw, 54px);
  }

  .hero__media {
    grid-area: 1 / 1;
    align-self: stretch;
    min-height: 640px;
    aspect-ratio: 1680 / 873;
  }

  .hero__mascot {
    top: auto;
    right: auto;
    bottom: calc(-1 * var(--hero-pb));
    left: 88.04%;
    z-index: 3;
    width: 20.3%;
    margin-top: 0;
  }

  .estimate {
    grid-area: 1 / 1;
    align-self: end;
    justify-self: end;
    width: clamp(440px, 30.5vw, 586px);
    max-width: none;
    margin: 24px 2.5% clamp(24px, 2.14vw, 41px) 0;
  }

  .estimate__submit {
    font-weight: 500;
  }

  .field__label {
    font-weight: 400;
  }
}

@media (min-width: 1200px) {
  /* The header CTA takes over once the desktop navigation is shown */
  .hero__cta {
    display: none;
  }
}

@media (max-width: 1023px) {
  .field__label {
    font-weight: 500;
  }

  .field__label,
  .estimate__submit-text {
    text-transform: capitalize;
  }
}

/* Why choose us
   ========================================================================== */

.why {
  padding-bottom: clamp(20px, -19.12px + 9.9542vw, 172px);
}

.why__head,
.why__head > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.why__cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: var(--gap-content);
}

.why-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 16px 19px;
  text-align: center;
  background-color: var(--color-surface);
  border-radius: clamp(13px, 9.4px + 0.9168vw, 27px);
}

.why-card__badge {
  --badge-size: clamp(32px, 23.76px + 2.0956vw, 64px);
}

.why-card__badge img {
  width: clamp(16px, 12.91px + 0.7859vw, 28px);
  height: auto;
}

.why-card__title {
  margin-top: 8px;
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.02em;
}

.why-card__text {
  max-width: 11.6em;
  margin-top: 9px;
  font-size: var(--fs-card-text);
  line-height: var(--lh-card-text);
  letter-spacing: -0.02em;
  color: var(--color-muted);
}

.why__media {
  margin-top: 24px;
  aspect-ratio: 357 / 272;
  overflow: hidden;
  border-radius: clamp(19px, 11.79px + 1.8337vw, 47px);
  transform: translateZ(0);
}

.why__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 768px) {
  .why__media {
    aspect-ratio: 16 / 9;
  }
}

@media (min-width: 1200px) {
  .why__head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    text-align: left;
  }

  .why__head > div {
    align-items: flex-start;
    text-align: left;
  }

  .why__desc {
    margin: 0 0 9.5px;
  }

  .why__grid {
    display: grid;
    grid-template-columns: minmax(0, 686fr) minmax(0, 828fr);
    column-gap: 9.88%;
    margin-top: var(--gap-content-split);
  }

  .why__cards {
    grid-template-columns: 1fr;
    gap: clamp(16px, 11.88px + 1.0478vw, 32px);
    margin-top: 0;
  }

  .why-card {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 22px;
    align-items: start;
    padding: clamp(16px, 11.88px + 1.0478vw, 32px);
    padding-bottom: clamp(13px, 9.9px + 0.8vw, 26.5px);
    text-align: left;
  }

  .why-card__body {
    padding-top: 13px;
  }

  .why-card__title {
    margin-top: 0;
  }

  .why-card__text {
    max-width: 424px;
    margin-top: 10.5px;
  }

  .why__media {
    position: relative;
    margin-top: 0;
    aspect-ratio: auto;
  }

  .why__media img {
    position: absolute;
    inset: 0;
  }
}

/* Services
   ========================================================================== */

.services__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(16px, 9.82px + 1.5717vw, 40px) clamp(16px, 13.94px + 0.5239vw, 24px);
  margin-top: var(--gap-content);
}

.service-card {
  padding: clamp(4px, 0.91px + 0.7859vw, 16px);
  padding-bottom: clamp(17px, 14.81px + 0.5566vw, 25.5px);
  background-color: var(--color-surface);
  border-radius: clamp(15px, 10.62px + 1.1133vw, 32px);
}

.service-card__media {
  aspect-ratio: 796 / 441;
  overflow: hidden;
  border-radius: clamp(12px, 8.14px + 0.9823vw, 27px);
  transform: translateZ(0);
}

.service-card__media picture {
  width: 100%;
  height: 100%;
  transition: transform 1s var(--ease-out);
}

.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.service-card__body {
  padding-inline: clamp(6px, 3.43px + 0.6549vw, 16px);
}

.service-card__title {
  margin-top: clamp(12px, 8.91px + 0.7859vw, 24px);
  font-size: clamp(14px, 9.37px + 1.1788vw, 32px);
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.02em;
}

.service-card__text {
  max-width: 442px;
  margin-top: clamp(8.5px, 14.16px - 0.2947vw, 13px);
  font-size: var(--fs-card-text);
  line-height: var(--lh-card-text);
  letter-spacing: -0.02em;
  color: var(--color-muted);
}

@media (hover: hover) {
  .service-card:hover .service-card__media picture {
    transform: scale(1.07);
  }
}

@media (max-width: 767px) {
  .service-card__media {
    aspect-ratio: 163 / 108;
  }
}

/* Work process
   ========================================================================== */

.process__head .section-desc,
.projects__head .section-desc {
  max-width: 441px;
}

@media (max-width: 767px) {
  .process__head .section-desc,
  .projects__head .section-desc {
    max-width: 317px;
  }
}

.process__grid {
  display: grid;
  gap: 16px;
  margin-top: clamp(23px, 11.88px + 2.83vw, 66px);
}

.process-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(16px, 7.76px + 2.0956vw, 48px) 16px clamp(15px, 8.05px + 1.7682vw, 42px);
  text-align: center;
  background-color: var(--color-surface);
  border-radius: clamp(13px, 8.11px + 1.2443vw, 32px);
}

.process-card__badge {
  --badge-size: clamp(32px, 17.59px + 3.6673vw, 88px);
}

.process-card__badge img {
  width: clamp(16px, 11.88px + 1.0478vw, 32px);
  height: auto;
}

.process-card__title {
  margin-top: clamp(8px, 1.82px + 1.5717vw, 32px);
  font-size: var(--fs-card-title);
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.02em;
}

.process-card__text {
  max-width: 16.1em;
  margin-top: 10px;
  font-size: var(--fs-card-text);
  line-height: var(--lh-card-text);
  letter-spacing: -0.02em;
  color: var(--color-muted);
}

.process-card__text--wide {
  max-width: 18.3em;
}

@media (min-width: 768px) {
  .process__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(16px, 13.94px + 0.5239vw, 24px);
  }
}

@media (min-width: 1024px) {
  .process-card__title {
    font-weight: 500;
  }
}

/* Before & after projects
   ========================================================================== */

.projects {
  padding-bottom: clamp(47px, 17.92px + 7.4001vw, 160px);
  overflow: hidden;
  color: var(--color-white);
  background-color: var(--color-dark);
}

.projects__head .section-desc {
  color: var(--color-muted-inverse);
}

.projects__viewport {
  margin-top: var(--gap-content);
}

.projects__track {
  display: flex;
  gap: clamp(24px, 17.82px + 1.5717vw, 48px);
}

.projects__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.projects__controls {
  display: flex;
  gap: clamp(16px, 15.74px + 0.0655vw, 17px);
  justify-content: center;
  margin-top: clamp(40px, 25.59px + 3.6673vw, 96px);
}

@media (min-width: 768px) {
  .projects__slide {
    flex-basis: 83.63%;
  }
}

/* Testimonials
   ========================================================================== */

.testimonials {
  overflow: hidden;
}

.testimonials__head,
.testimonials__row {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.testimonials__rows {
  display: grid;
  gap: clamp(16px, 11.88px + 1.0478vw, 32px);
  margin-top: var(--gap-content-split);
}

.marquee {
  overflow: hidden;
}

.marquee__track {
  display: flex;
  gap: clamp(16px, 13.94px + 0.5239vw, 24px);
  width: max-content;
}

.t-card {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  width: clamp(264px, 178.3px + 21.8075vw, 597px);
  min-height: clamp(216px, 167.36px + 12.3772vw, 405px);
  padding: clamp(16px, 7.76px + 2.0956vw, 48px) clamp(14px, 9.37px + 1.1788vw, 32px) clamp(16px, 10.6px + 1.3752vw, 37px);
  background-color: var(--color-surface);
  border-radius: clamp(13px, 6.31px + 1.7027vw, 39px);
}

.t-card__stars {
  display: flex;
  gap: clamp(4px, 6.51px - 0.131vw, 6px);
}

.t-card__stars img {
  width: clamp(16px, 13.94px + 0.5239vw, 24px);
  height: auto;
}

/* Long reviews are clipped to a few lines; "Read more" opens the full text (reviews.js) */
.t-card__quote {
  --lh: clamp(20px, 16.91px + 0.7859vw, 32px);
  --lines: 5;

  display: grid;
  gap: 0.5em;
  max-width: clamp(218px, 168.33px + 12.639vw, 411px);
  max-height: calc(var(--lh) * var(--lines));
  margin-top: clamp(25px, 23.56px + 0.3667vw, 30.6px);
  overflow: hidden;
  font-size: clamp(14px, 11.43px + 0.6549vw, 24px);
  line-height: var(--lh);
}

.t-card.is-clamped .t-card__quote {
  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--lh)), transparent);
}

.t-card__more {
  display: none;
  align-self: flex-start;
  margin-top: 6px;
  font-size: clamp(13px, 11.97px + 0.262vw, 17px);
  font-weight: 600;
  line-height: 1.4;
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 4px;
  transition: text-decoration-color 0.3s;
}

.t-card.is-clamped .t-card__more {
  display: inline-block;
}

@media (hover: hover) {
  .t-card__more:hover {
    text-decoration-color: currentColor;
  }
}

.t-card__author {
  display: flex;
  gap: clamp(7px, 5.97px + 0.262vw, 11px);
  align-items: center;
  padding-top: 24px;
  margin-top: auto;
}

.t-card__avatar {
  --size: clamp(32px, 24.79px + 1.8337vw, 60px);

  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: var(--size);
  height: var(--size);
  font-size: calc(var(--size) * 0.36);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.02em;
  border-radius: 50%;
}

/* Initial badges, coloured like the review sites they came from */
.t-card__avatar--red { color: var(--color-white); background-color: #d4461c; }
.t-card__avatar--blue { color: var(--color-white); background-color: #1e63c4; }
.t-card__avatar--sand { color: #7a5200; background-color: #fcf1d6; }
.t-card__avatar--sky { color: #2a3b8f; background-color: #e4e9fb; }
.t-card__avatar--teal { color: #0e4f5c; background-color: #ddf1f4; }
.t-card__avatar--lilac { color: #5a2a91; background-color: #eee6fb; }

.t-card__name {
  font-size: clamp(13px, 10.68px + 0.5894vw, 22px);
  font-weight: 600;
  line-height: normal;
  letter-spacing: -0.04em;
}

.t-card__source {
  font-size: clamp(10px, 7.68px + 0.5894vw, 19px);
  line-height: normal;
  letter-spacing: -0.04em;
  color: var(--color-muted);
}

.t-card__mark {
  position: absolute;
  right: clamp(23px, 19.91px + 0.7859vw, 35px);
  bottom: clamp(23px, 19.91px + 0.7859vw, 35px);
  width: clamp(43px, 31.93px + 2.816vw, 86px);
  height: auto;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .testimonials__head {
    align-items: flex-start;
    text-align: left;
  }

  .testimonials__row {
    flex-direction: row;
    gap: 40px;
    align-items: flex-start;
    align-self: stretch;
    justify-content: space-between;
    text-align: left;
  }

  .testimonials__title {
    max-width: 10.15em;
  }

  .testimonials__desc {
    max-width: 460px;
    margin-top: calc(var(--gap-eyebrow) + 9.5px);
    font-family: var(--font-alt);
  }
}

/* Full review dialog
   ========================================================================== */

.review-dialog {
  width: min(640px, calc(100% - 32px));
  max-width: none;
  max-height: min(86vh, 860px);
  padding: 0;
  overflow: visible;
  color: var(--color-black);
  background: none;
  border: 0;
}

.review-dialog::backdrop {
  background-color: rgba(18, 18, 18, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.review-dialog[open] {
  animation: dialog-in 0.5s var(--ease-out);
}

.review-dialog[open]::backdrop {
  animation: fade-in 0.4s ease-out;
}

.review-dialog__panel {
  position: relative;
  max-height: min(86vh, 860px);
  padding: clamp(24px, 17.82px + 1.5717vw, 48px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--color-surface);
  border-radius: clamp(20px, 16.4px + 0.9168vw, 34px);
}

.review-dialog__close {
  position: absolute;
  top: clamp(14px, 11.94px + 0.5239vw, 22px);
  right: clamp(14px, 11.94px + 0.5239vw, 22px);
  width: 44px;
  height: 44px;
  background-color: var(--color-white);
  border-radius: 50%;
  transition: scale 0.3s var(--ease-out), background-color 0.3s;
}

.review-dialog__close::before,
.review-dialog__close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  content: "";
  background-color: var(--color-dark);
  border-radius: 2px;
}

.review-dialog__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.review-dialog__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.review-dialog__close:active {
  scale: 0.9;
}

@media (hover: hover) {
  .review-dialog__close:hover {
    background-color: var(--color-accent);
  }
}

.review-dialog__text {
  display: grid;
  gap: 1em;
  margin-top: 24px;
  font-size: clamp(16px, 14.97px + 0.262vw, 20px);
  line-height: 1.6;
}

.review-dialog__author {
  padding-top: 28px;
  margin-top: 0;
}

html.dialog-open body {
  overflow: hidden;
}

@keyframes dialog-in {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.96);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

/* No JS / reduced motion: rows become swipeable instead of a marquee */
.marquee:not(.is-running) {
  overflow-x: auto;
  scrollbar-width: none;
}

.marquee:not(.is-running)::-webkit-scrollbar {
  display: none;
}

.marquee:not(.is-running) .marquee__track {
  padding-inline: var(--gutter);
}

/* Service areas
   ========================================================================== */

.areas__layout {
  display: grid;
  grid-template-areas:
    "head"
    "zones"
    "map"
    "cta";
}

.areas__head {
  grid-area: head;
  align-items: center;
  text-align: center;
}

.areas__zones {
  grid-area: zones;
  margin-top: 15px;
}

.areas__label {
  font-size: clamp(11px, 8.17px + 0.7204vw, 22px);
  font-weight: 500;
  line-height: 24px;
  color: var(--color-muted);
}

.areas__zones .chips {
  margin-top: clamp(8px, 1.82px + 1.5717vw, 32px);
}

.areas__map {
  position: relative;
  display: grid;
  grid-area: map;
  place-items: center;
  margin-top: 16px;
  aspect-ratio: 357 / 360;
  overflow: hidden;
  background-color: #efefef;
  border-radius: clamp(22px, 17.62px + 1.1133vw, 39px);
  transform: translateZ(0);
}

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

.areas__pin {
  --badge-size: clamp(64px, 57.82px + 1.5717vw, 88px);

  position: relative;
}

.areas__pin::before,
.areas__pin::after {
  position: absolute;
  inset: 0;
  z-index: -1;
  content: "";
  background-color: var(--color-dark);
  border-radius: 50%;
  animation: ripple 2.6s var(--ease-out) infinite;
}

.areas__pin::after {
  animation-delay: 1.3s;
}

.areas__pin img {
  width: 30px;
  height: 30px;
}

.areas__cta {
  grid-area: cta;
  justify-self: center;
  max-width: 420px;
  margin-top: 24px;
}

@media (min-width: 768px) {
  .areas__map {
    aspect-ratio: 16 / 10;
  }
}

@media (min-width: 1024px) {
  .areas__layout {
    grid-template-rows: auto auto 1fr;
    grid-template-columns: minmax(0, 710fr) minmax(0, 828fr);
    grid-template-areas:
      "head map"
      "cta map"
      "zones map";
    column-gap: 8.45%;
  }

  .areas__head {
    align-items: flex-start;
    text-align: left;
  }

  .areas__title {
    max-width: 10.15em;
  }

  .areas__desc {
    max-width: 460px;
  }

  .areas__cta {
    justify-self: start;
    width: 260px;
    margin-top: clamp(32px, 2.63vw, 50.5px);
  }

  .areas__cta .btn-cta__label {
    width: 75.77%;
  }

  .areas__zones {
    align-self: end;
    margin-top: 48px;
  }

  .areas__label {
    font-weight: 400;
    line-height: 32px;
  }

  .areas__map {
    margin-top: 8px;
    aspect-ratio: 828 / 780;
  }
}