/* ========================================================
   Vetra Residences — styles.css
   ======================================================== */

:root {
  /* Three inks: white for headings, mid grey for labels, light grey for captions. */
  --bg:          #000000;
  --text:        #FFFFFF;
  --text-muted:  #666666;
  --text-soft:   #999999;
  --border:      rgba(255, 255, 255, 0.16);

  /* Font families. Italiana and Rozha One ship a single weight each, so their
     rules stay at 400 — asking for 500 only gets a synthesised bold.
     --font-logo    : the VETRA monogram, nothing else
     --font-display : headings, the hero wordmark, the statistics
     --font-body    : body copy and UI */
  --font-logo:    "Rozha One", "Times New Roman", serif;
  --font-display: "SaolDisplay-Regular";
  --font-serif:   "Playfair Display", "Times New Roman", serif;
  --font-body:    "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;
  --space-7: 64px;
  --space-8: 96px;
  --space-9: 128px;

  --max-w: 1360px;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4 { margin: 0; font-weight: 400; line-height: 1.1;}


/* ============ NAV ============ */
.hero {
  position: relative;
  min-height: 100vh;
  padding: var(--space-4) clamp(20px, 4vw, 56px) clamp(var(--space-3), 2.5vh, var(--space-5));
  color: #fff;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #000 url("images/hero.jpg") center 55%/cover no-repeat;
}
/* Background video (desktop) — falls back to the poster/image on mobile */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 55%;
  z-index: 0;
}
/* Darkening + bottom black band, layered over the video/image */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,0,0,0.30) 0%,
    rgba(0,0,0,0.04) 18%,
    rgba(0,0,0,0) 42%,
    rgba(0,0,0,0) 70%,
    rgba(0,0,0,0.35) 85%,
    rgba(0,0,0,0.80) 94%,
    #000 99%,
    #000 100%);
}
.hero__intro,
.hero__wordmark {
  position: relative;
  z-index: 2;
}
/* Above the hero copy, not level with it: the open mobile panel has to cover
   the heading and blur it. At an equal z-index the later element in the
   document wins, which put the panel underneath the text. */
.hero > .nav {
  position: relative;
  z-index: 4;
}

.nav {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--text);
}
.nav__logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
}
.nav__logo-name {
  font-family: var(--font-logo);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Nudged with position, not transform: the reveal resets transform to none. */
  position: relative;
  left: -12px;
}
.nav__logo-sub {
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-top: 6px;
  color: var(--text);
}
.nav__menu {
  display: none;
  align-items: center;
  gap: clamp(24px, 3vw, 48px);
  font-size: 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 400;
}
.nav__menu a { opacity: 0.9; transition: opacity .2s; }
.nav__menu a:hover { opacity: 0.6; }

.nav__toggle {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}
/* Whole pixels: a fractional height lands each bar on a different sub-pixel
   boundary, so on a 1x screen they render at visibly different weights. */
.nav__toggle span { width: 24px; height: 2px; background: #fff; }

/* ============ HERO CONTENT ============ */
.hero__intro {
  align-self: flex-end;
  width: 100%;
  max-width: 440px;
  margin-top: clamp(var(--space-6), 9vh, var(--space-9));
  text-align: left;
}
.hero__heading {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.12;
  letter-spacing: 0.005em;
  margin: 0 0 var(--space-4);
}
.hero__text {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.75;
  color: var(--text);
  text-align: justify;
  margin: 0;
}

/* Big wordmark at the bottom */
.hero__wordmark {
  margin-top: auto;
  align-self: flex-start;   /* hug left, shrink to the word's width */
  display: flex;
  flex-direction: column;
  line-height: 0.8;
}
.hero__wordmark-name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(4.5rem, 22vw, 20rem);
  line-height: 0.82;
  letter-spacing: -0.01em;
  color: #fff;
}
.hero__wordmark-sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.7rem, 1.4vw, 1.05rem);
  letter-spacing: clamp(0.3em, 1.2vw, 0.7em);
  text-transform: uppercase;
  color: var(--text);
  margin-top: var(--space-3);
  align-self: stretch;      /* span the word's width... */
  text-align: center;       /* ...so RESIDENCES sits centered under "Vetra" */
  padding-left: clamp(0.3em, 1.2vw, 0.7em); /* optical centering vs letter-spacing */
}

/* ============ Mobile nav (toggle) ============
   Confined below the desktop breakpoint on purpose: .is-open outranks the
   desktop rule on specificity, so without the query an open panel would
   survive a window being widened past 1024px. */
@media (max-width: 991.98px) {
  .nav__menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    /* A thin veil, so the hero reads through it blurred. Anything heavier
       than roughly 40% opacity hides the blur entirely and the panel just
       looks like a solid block. */
    background: rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(22px) saturate(1.3);
    backdrop-filter: blur(22px) saturate(1.3);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    padding: var(--space-5);
    gap: var(--space-4);
    z-index: 5;
  }
  /* No blur support: fall back to an opaque tint or the links go unreadable. */
  @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .nav__menu.is-open { background: rgba(0, 0, 0, 0.92); }
  }
}

/* ---------- Shared primitives ---------- */
.eyebrow {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ============ THE PROPERTY ============ */
.property {
  background: var(--bg);
  padding: var(--space-8) clamp(20px, 5vw, 64px) var(--space-9);
  overflow: hidden;
}
.property__head {
  text-align: center;
  /* The heading dips over the top of the gallery, so it needs its own layer.
     The overlap itself is a desktop-only pull-up (see the 1024px block). */
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-4);
}
.property__head .eyebrow { margin-bottom: var(--space-4); }
.property__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.6vw, 100px);
  line-height: 1;
  letter-spacing: 0.005em;
  margin: 0;
}

/* Carousel */
.carousel {
  position: relative;
  margin: 0 auto;
}
.carousel__viewport {
  overflow: hidden;
  width: 100%;
}
.carousel__track {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 2.2vw, 32px);
}
.carousel__slide {
  flex: 0 0 auto;
  width: clamp(300px, 40vw, 620px);
  opacity: 0.4;
  filter: brightness(0.65);
  transition: opacity .5s ease, filter .5s ease, width .5s ease;
}
.carousel__slide img {
  width: 100%;
  height: clamp(320px, 48vh, 520px);
  object-fit: cover;
}
.carousel__slide.is-active {
  width: clamp(300px, 31vw, 480px);
  opacity: 1;
  filter: none;
}
.carousel__slide.is-active img {
  height: clamp(420px, 62vh, 680px);
}

/* The arrows sit below the gallery, level with the caption, hard against the
   page margins — not vertically centred on the photographs. */
.carousel__arrow {
  position: absolute;
  top: auto;
  bottom: -130px;
  z-index: 2;
  /* A square target; the arrow itself keeps its own proportions inside it. */
  width: clamp(56px, 6.6vw, 100px);
  height: clamp(56px, 6.6vw, 100px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  transition: color .2s ease, transform .25s ease;
}
/* flex: none, or the flex context shrinks the drawing below the square's width. */
.carousel__arrow svg { width: 100%; height: auto; display: block; flex: none; }
.carousel__arrow:hover { color: var(--text); }
.carousel__arrow--prev { left: clamp(4px, 3vw, 40px); }
.carousel__arrow--next { right: clamp(4px, 3vw, 40px); }
.carousel__arrow--prev:hover { transform: translateX(-4px); }
.carousel__arrow--next:hover { transform: translateX(4px); }

.property__caption {
  max-width: 23em;
  margin: var(--space-5) auto 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
}

/* Spec list */
.property__specs {
  max-width: var(--max-w);
  margin: var(--space-9) auto 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 clamp(40px, 8vw, 120px);
}
.spec-list li {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--text-muted);
  font-family: var(--font-body);
  font-size: 0.98rem;
  font-weight: 400;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* ============ THE CONCEPT ============ */
.concept {
  position: relative;
  min-height: 100vh;
  padding: var(--space-8) clamp(20px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: var(--space-7);
  color: #fff;
  background:
    linear-gradient(180deg, rgba(0,0,0,0.35) 0%, rgba(0,0,0,0.05) 30%, rgba(0,0,0,0.35) 100%),
    url("images/concept.jpg") center/cover no-repeat;
}
.concept__copy { max-width: 480px; }
.concept__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 3vw + 0.4rem, 2.6rem);
  line-height: 1.1;
  margin: var(--space-3) 0 var(--space-4);
}
.concept__text {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  text-align: justify;
  margin: 0;
}

.concept__stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7) var(--space-5);
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 1;
  color: #fff;
  margin: 0 0 var(--space-2);
  white-space: nowrap;
}
.stat__unit {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--text-soft);
  margin-left: 8px;
  vertical-align: baseline;
}
.stat__unit--top { vertical-align: 0.9em; }
.stat__label {
  font-family: var(--font-body);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
}

/* ============ DEVELOPER / ARCHITECT ============ */
/* The black band below the two panels is part of the layout, not a gap: the
   booking photograph starts well clear of them. */
.firms {
  background: var(--bg);
  padding-bottom: var(--space-8);
}
.firms__banner {
  height: clamp(240px, 46vh, 540px);
  background: url("images/about.jpg") center 38%/cover no-repeat;
}
.firms__grid {
  display: grid;
  grid-template-columns: 1fr;
}
.firm {
  padding: clamp(32px, 4vw, 56px) clamp(20px, 5vw, 64px);
}
.firm--architect { background: #191919; }
/* These two labels run smaller than the section labels elsewhere, which share
   the .eyebrow rule. */
.firm .eyebrow { font-size: 16px; }
.firm__name {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2rem, 4vw, 60px);
  line-height: 1.06;
  margin: var(--space-3) 0 var(--space-4);
}
.firm__text {
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.7;
  color: var(--text-soft);
  margin: 0;
  /* In px, not ch: a ch is tied to the body font, so the same number would mean
     a different column width if the family or size changed. */
  /* max-width: 390px; */
}
/* Shown whole, never cropped: the image keeps its own proportion and sets the
   height of the band, and the two panels stretch to match it. */
/* .firms__photo img {
  width: 100%;
  height: auto;
} */
.firms__photo {
  background-image: url(images/architect.jpg);
  background-position: center center;
  background-size: cover;
  min-height: 600px;
}

/* ============ BOOK A VIEWING ============ */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.booking {
  padding: clamp(48px, 9vh, 120px) clamp(20px, 5vw, 64px) clamp(64px, 11vh, 150px);
  background: url("images/contact.jpg") center/cover no-repeat;
}
.booking__inner { max-width: 760px; margin: 0 auto; }
.booking__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.1rem, 4vw, 3.4rem);
  color: #fff;
  margin: 0 0 var(--space-5);
}
.booking__form { display: grid; gap: clamp(10px, 1.2vw, 16px); }
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 1.2vw, 16px);
}
.field {
  display: flex;
  align-items: center;
  background: #EEEBE3;
  min-height: 60px;
  padding: 0 22px;
}
.field input,
.field select {
  border: 0;
  background: transparent;
  width: 100%;
  height: 100%;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  appearance: none;
  -webkit-appearance: none;
}
.field input::placeholder { color: var(--text-muted); opacity: 1; }
.field input:focus,
.field select:focus { outline: none; }
.field--select { position: relative; }
.field select {
  color: var(--text-muted);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%232A2A2A' stroke-width='1.4'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px;
  padding-right: 24px;
}
.field select:valid { color: var(--text-muted); }
.booking__actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.booking__success { margin: 0; font-size: 0.85rem; color: #EEEBE3; }
.btn-outline {
  border: 1px solid var(--text);
  color: var(--text);
  background: transparent;
  padding: 15px 44px;
  font-family: var(--font-body);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-outline:hover { background: #fff; color: #111; border-color: #fff; }

/* ============ IMAGE STRIP ============ */
.strip {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  background: var(--bg);
  /* Inset to the same page margin as the footer, not bled to the edges. */
  padding: 0 clamp(20px, 6.35vw, 96px);
}
.strip img {
  width: 100%;
  height: clamp(300px, 56vh, 620px);
  object-fit: cover;
}

/* ============ FOOTER ============ */
.footer {
  background: var(--bg);
  padding: clamp(48px, 7vw, 100px) clamp(20px, 6.35vw, 96px);
}
.footer__inner {
  max-width: var(--max-w);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  text-align: center;
}
.footer__logo {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  color: var(--text-muted);
}
/* Same lockup as the header — 50px monogram, same tracking — in grey. */
.footer__logo-name {
  font-family: var(--font-logo);
  font-size: 50px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  /* Nudged with position, not transform: the reveal resets transform to none. */
  position: relative;
  left: -12px;
}
.footer__logo-sub {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  margin-top: 6px;
}
.footer__socials {
  display: flex;
  gap: 20px;
  align-items: center;
}
.footer__socials a {
  color: var(--text-muted);
  transition: color .2s ease;
  display: inline-flex;
}
.footer__socials a:hover { color: var(--text); }
.footer__address {
  font-style: normal;
  font-size: 16px;
  line-height: 20px;
  color: var(--text-soft);
}
.footer__address strong {
  font-weight: 800;
  display: block;
  color: var(--text);
}
/* Fixed size rather than padding: the pill is a set 168x40 in the layout. */
.footer__maps {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 168px;
  height: 40px;
  border: 2px solid var(--text-muted);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: border-color .2s ease, color .2s ease;
}
.footer__maps:hover { border-color: rgba(255,255,255,0.5); color: var(--text); }
.footer__phone-label {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-soft);
}
.footer__phone-num {
  font-family: var(--font-serif);
  font-size: 16px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-soft);
  letter-spacing: 0.02em;
}

/* ============ REVEAL ON LOAD / SCROLL ============ */
@media (prefers-reduced-motion: no-preference) {
  .anim .nav__logo,
  .anim .nav__menu,
  .anim .nav__toggle,
  .anim .hero__intro,
  .anim .hero__wordmark,
  .anim .property__head,
  .anim .carousel,
  .anim .property__caption,
  .anim .property__specs,
  .anim .concept__copy,
  .anim .concept__stats .stat,
  .anim .firm,
  .anim .firms__photo,
  .anim .booking__title,
  .anim .booking__form,
  .anim .strip img {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1s cubic-bezier(0.22, 0.61, 0.36, 1),
                transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
    will-change: opacity, transform;
  }
  .anim .is-visible {
    opacity: 1 !important;
    transform: none !important;
  }

  /* Hero: elements slide in from the sides */
  .anim .nav__logo      { transform: translateX(-40px); }
  .anim .nav__menu,
  .anim .nav__toggle    { transform: translateX(40px); }
  .anim .hero__intro    { transform: translateX(64px); }
  .anim .hero__wordmark { transform: translateX(-64px); }
}

/* ============================
   BREAKPOINTS
   ============================ */

/* Tablet ≥ 768px */
@media (min-width: 768px) {
  .property__specs { grid-template-columns: 1fr 1fr; }
  .strip { grid-template-columns: repeat(3, 1fr); }
}

/* Desktop ≥ 1024px */
@media (min-width: 992px) {
  .nav__menu { display: flex; }
  .nav__toggle { display: none; }

  /* Pull the gallery up so the second line of the heading crosses the top of
     the photographs. Only from this width: on a phone the smaller heading
     would sit on the pictures instead of grazing them. */
  .property__head { margin-bottom: -100px; }

  .hero__intro {
    max-width: 490px;
    margin-right: clamp(0px, 2.8vw, 56px);
    margin-top: clamp(var(--space-7), 12vh, var(--space-9));
  }

  /* Concept — copy bottom-left, stats scattered over the right */
  .concept { display: block; }
  .concept__copy {
    position: absolute;
    left: clamp(20px, 5vw, 64px);
    bottom: clamp(48px, 9vh, 110px);
    max-width: 560px;
  }
  .concept__stats { display: block; }
  .concept__stats .stat { position: absolute; margin: 0; }
  .stat--terraces { top: 48%; left: 72%; }
  .stat--buildup  { top: 64%; left: 47%; }
  .stat--glass    { top: 64%; left: 78%; }
  .stat--smart    { top: 81%; left: 54%; }

  /* Developer / Architect — three columns.
     The row height is set here on purpose: left to itself the photograph keeps
     its natural proportion and drags the whole band taller than the copy needs,
     leaving dead space at the foot of the panels. Fixing the row crops the
     photograph instead. Don't go below ~550px or the longer paragraph spills. */
  .firms__grid {
    grid-template-columns: 1fr 1fr 0.85fr;
    align-items: stretch;
  }
  .firms { padding-bottom: 300px; }
  /* A shallow band: the copy sits near the top and the panels stay short, which
     also shortens the photograph stretched alongside them. */
  .firm { padding: 44px clamp(28px, 3vw, 56px); }
  .firm--developer { padding-left: clamp(20px, 5vw, 64px); }

  /* Footer — single row */
  .footer__inner {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: clamp(20px, 3vw, 56px);
    text-align: left;
  }
  .footer__address { text-align: left; flex-shrink: 0; }
  .footer__phone { text-align: right; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ============ PHONE REFINEMENTS ============
   Touch areas and minimum type sizes. The hit area is grown with a pseudo
   element so nothing moves; only the sizes that fell below 13px are raised. */
@media (max-width: 767.98px) {
  .footer__socials a,
  .footer__phone-num,
  .footer__logo,
  .footer__maps,
  .carousel__arrow { position: relative; }

  /* Both arrows below the photograph, one at each end. Back in the flow they
     would follow the markup, where "previous" precedes the viewport and "next"
     follows it — one above the photograph and one below. Wrapping the row and
     giving the viewport the whole first line puts the pair together underneath,
     and space-between pushes them out to the margins. */
  .carousel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
  }
  .carousel__viewport {
    order: 1;
    flex: 0 0 100%;
  }
  .carousel__arrow {
    order: 2;
    /* Clears the offsets that placed them beside the photographs. */
    inset: auto;
    margin-top: 28px;
  }
  .footer__socials a::after,
  .footer__phone-num::after,
  .footer__logo::after,
  .footer__maps::after,
  .carousel__arrow::after {
    content: "";
    position: absolute;
    inset: -16px;
  }
  .nav__toggle { padding: 14px 10px; box-sizing: content-box; }

  .eyebrow { font-size: 13px; }
  .footer__maps { font-size: 13px; }
  /* Lettering under the wordmarks: decorative, but 9px is unreadable. */
  .nav__logo-sub,
  .footer__logo-sub { font-size: 11px; }
  .hero__wordmark-sub { font-size: 12px; }
  .nav__menu a { font-size: 13px; }
  .stat__label { font-size: 13px; }
}

/* Mobile */
@media (max-width: 575.98px) {
  /* One column. The figures carry white-space: nowrap and a bare 1fr track will
     not shrink below that, so on a narrow screen the pair of columns pushes the
     document wider than the window. Two columns still fit from 576px up. */
  .concept__stats { grid-template-columns: minmax(0, 1fr); }
}