/* Display the supplied artwork intact. Only its outer blank background is hidden. */
:root {
  --brand-dark: #1c2627;
  --brand-light: #f7f4ed;
}
.brand-home { display: inline-block; flex: 0 0 auto; }
.brand-art {
  display: block;
  position: relative;
  width: 100%;
  aspect-ratio: 2.4;
  overflow: hidden;
}
.brand-art-light { background: var(--brand-dark); }
.brand-art-dark { background: var(--brand-light); }
.brand-art img,
.hero .brand-art img {
  display: block;
  position: absolute;
  width: 150%;
  max-width: none;
  height: auto;
  top: 50%;
  left: -25%;
  right: auto;
  bottom: auto;
  transform: translateY(-50%);
  object-fit: contain;
}
.nav {
  position: relative;
  background: var(--brand-dark);
  padding-top: 16px;
  padding-bottom: 16px;
}
.header-brand { width: 176px; }
.navlinks { gap: 22px; }
.hero {
  min-height: max(650px, calc(100svh - 106px));
  align-items: end;
}
.hero > .hero-image { object-position: 65% center; }
.hero:after {
  background: linear-gradient(90deg, rgba(9,18,18,.48), rgba(9,18,18,.08) 65%, transparent),
              linear-gradient(0deg, rgba(9,18,18,.48), transparent 65%);
}
.hero-inner { padding-top: 52px; padding-bottom: 52px; }
.hero-copy {
  width: min(580px, 100%);
  background: transparent;
  padding: 0;
}
.hero .hero-brand {
  width: min(450px, 100%);
  margin: 0 0 16px;
  line-height: 0;
}
.hero-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: hidden;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,.18));
}
.hero-copy > p { text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.hero .hero-location {
  margin: 0 0 22px;
  font-size: 10px;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #fff;
}
.hero-copy > p:not(.hero-location) {
  margin: 0;
  font-size: clamp(17px, 1.6vw, 21px);
  line-height: 1.65;
}
.hero-copy .buttonrow { margin-top: 26px; }
.hero-copy .button:hover { background: var(--brand-light); color: var(--brand-dark); }
.footer { background: var(--brand-light); padding: 38px 0; }
.footer-inner { align-items: center; }
.footer-brand { width: 230px; }
.footer-identity .small { margin: 14px 0 0; }

@media (max-width: 850px) {
  .navlinks { top: 100%; background: var(--brand-dark); }
  .hero { min-height: 720px; }
}
@media (max-width: 550px) {
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .header-brand { width: 156px; }
  .hero { min-height: 740px; }
  .hero > .hero-image { object-position: 62% center; }
  .hero-inner { padding-top: 280px; padding-bottom: 36px; }
  .hero-copy { padding: 0; }
  .hero .hero-brand { margin-bottom: 12px; }
  .hero .hero-location { font-size: 9px; margin-bottom: 18px; letter-spacing: .15em; }
  .hero-copy .buttonrow { gap: 10px; }
  .hero-copy .button { padding: 14px 17px; }
  .footer-brand { width: 210px; }
}