/* ==========================================================================
   Page sections: hero / features / map / footer
   ========================================================================== */

.page {
  flex: 1;
  width: 100%;
}

/* ---- hero ---------------------------------------------------------------- */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  width: 100%;
  min-height: 100svh;
  /* A 128-byte blurred copy of the photo, inlined so it costs no request and
     paints with the stylesheet. Without it the page shows its light grey
     background, then the logo, and only then the dark photo. The real image
     sits above this (z-index: -1) and covers it once decoded. */
  background-color: #49604f;
  background-image: url("data:image/webp;base64,UklGRngAAABXRUJQVlA4IGwAAABwBACdASogABIAPwFyrFArJyQisBgIAWAgCWQArDMOhSP7Z0QdgEGRJOLaAADyoVHPCllOVdpJn9kRODGQU7TPuoFYb1q1ZmgQqjov1VeDHddFdbntHMyUYGe/ShAzCSqWgw3JUwgtln8AAAA=");
  background-size: cover;
  background-position: 50% 50%;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
}

.hero__logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75svh;
  max-width: 85%;
  height: auto;
}

/* ---- features ------------------------------------------------------------ */

.features__row {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  gap: var(--space-xl) var(--space-m);
}

@media (max-width: 992px) {
  .features__row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .features__row {
    grid-template-columns: minmax(0, 1fr);
  }
}

.features__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  row-gap: var(--space-xs);
  width: 100%;
}

.features__img {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 50%;
}

/* ---- map ----------------------------------------------------------------- */

.map {
  padding-block-start: 0;
}

.map__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: var(--space-xs);
}

.map__title a {
  text-decoration: underline;
}

.map__embed {
  width: 100%;
}

.map__embed iframe {
  width: 100%;
  height: 45rem;
  border: 0;
}

/* ---- footer -------------------------------------------------------------- */

.site-footer {
  flex-shrink: 0;
  margin-block-start: auto;
  width: 100%;
  padding-block: 0 var(--space-l);
  padding-inline: var(--gutter);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  row-gap: var(--space-m);
}

/* contact card, photo background with a dark overlay */
.contact {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-xl);
  padding: var(--space-xl) var(--space-m) var(--space-m);
  border-radius: var(--radius-l);
  background-color: var(--black);
  color: var(--white);
}

/* Decorative photo behind the card, and behind the darkening overlay. It is an
   <img> rather than a background so it can be lazy-loaded: a CSS background
   always loads with the stylesheet, even this far below the fold. */
.contact__bg,
.social__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.contact::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--black-trans-70);
  pointer-events: none;
}

.contact__info {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: var(--space-xs);
  width: 100%;
}

.contact__heading {
  text-align: center;
}

.contact__label {
  font-size: var(--text-m);
  font-weight: 600;
}

.contact__phone {
  display: flex;
  align-items: center;
  color: var(--white-trans-80);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--line-height-header);
  text-decoration: underline;
}

.contact__phone:hover {
  color: var(--white);
}

.contact__legal {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-evenly;
  gap: var(--space-s);
  width: 100%;
  padding-inline: var(--space-l);
  color: var(--white-trans-80);
  font-size: var(--text-s);
  text-align: center;
}

@media (max-width: 992px) {
  .contact__legal {
    flex-direction: column;
  }
}

.contact__meta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  row-gap: var(--space-s);
  width: 100%;
  color: var(--white-trans-80);
  font-size: var(--text-s);
}

@media (max-width: 768px) {
  .contact__meta {
    flex-direction: column-reverse;
  }
}

.contact__credit:hover {
  color: var(--white);
}

/* social link row */
.social {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-m);
  width: 100%;
  padding-inline-start: 0;
  list-style: none;
}

/* On narrow screens each link takes its own row: the items are width:100%,
   so wrapping is what separates them */
@media (max-width: 767px) {
  .social,
  .social__link {
    flex-wrap: wrap;
  }
}

.social__item {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.social__link {
  position: relative;
  isolation: isolate;
  overflow: clip;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  column-gap: var(--space-xs);
  width: 100%;
  padding: var(--space-m);
  border-radius: var(--radius-l);
  background-color: var(--black);
  color: var(--white-trans-80);
}

.social__link:hover {
  color: var(--white);
}

.social__icon {
  flex: 0 0 auto;
  height: 2.4rem;
  fill: currentColor;
}

.social__icon--facebook  { width: 1.5rem; }
.social__icon--envelope  { width: 2.4rem; }
.social__icon--instagram { width: 2.1rem; }

.social__label {
  /* button label is always a single line, so keep the leading tight */
  font-weight: 500;
  line-height: var(--line-height-header);
}

.contact__copyright,
.contact__credit {
  font-size: var(--text-s);
}