/* Plote Properties site styles, matching ploteproperties.com; see docs/build-brief.md.
   Plain CSS, mobile first. Breakpoints follow the old site: 768 (one column
   below), 992 (the menu becomes a button below), and 1200. */

:root {
  --green: #146844;
  --green-deep: #0d422b;
  --green-hover: #0d452d;
  --green-border: #085c38;
  --green-border-hover: #01361f;
  --green-text: #0d7347;
  --green-tint: #e8f2ec;
  --band-overlay: rgba(9, 52, 33, .78);
  --link: #2b7bb9;
  --link-strong: #1f5a87;
  --text: #000;
  --heading: #333;
  --muted: #555;
  --chip: #f3f3f3;
  --card-fill: #f6f6f6;
  --footer: #f2f2f2;
  --required: #c02b0a;
  --focus: #1f5a87;
  --font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --content: 1300px;
  --gutter: 20px;
  --header-height: 64px;
}

/* The header's height: the logo (a 4.05 : 1 image) and 10px above and below. */
@media (min-width: 993px) {
  :root { --header-height: calc(clamp(240px, 26vw, 360px) / 4.05 + 20px); }
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + 10px);
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: #fff;
  color: var(--text);
  font: 500 1rem/1.45 var(--font);
}

body.is-locked { overflow: hidden; }

img, video, iframe { max-width: 100%; }
img, video { height: auto; }

h1, h2, h3 { margin: 0; line-height: 1.25; }
p { margin: 0 0 1em; }
a { color: var(--link); }

button, input, select, textarea { font: inherit; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }

[hidden] { display: none !important; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* A phone number in running text: a link with a 44px target, not just a line of text. */
.touch-link { display: inline-flex; align-items: center; min-height: 44px; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 1000;
  padding: 12px 18px;
  background: #fff;
  color: var(--green-deep);
  font-weight: 700;
}

.skip-link:focus { left: 8px; }

/* The page's sections stack, except that "half" sections (contact details and
   the contact form) that sit together share a row on wide screens. */
main { display: flex; flex: 1 0 auto; flex-wrap: wrap; align-content: flex-start; }
main > * { flex: 0 0 100%; min-width: 0; }

/* Buttons */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: 12px 24px;
  background: var(--green);
  color: #fff;
  border: 1px solid var(--green-border);
  border-radius: 4px;
  font: 600 1rem/1.2 var(--font);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover { background: var(--green-deep); border-color: var(--green-border-hover); color: #fff; }

.button--block { display: flex; width: 100%; }

.button--hero { padding: 20px 50px; border: 0; border-radius: 0; }

.button--white { background: #fff; color: var(--green); border: 2px solid var(--chip); }
.button--white:hover { background: var(--chip); color: var(--green-deep); border-color: var(--green); }

.button--outline { background: #fff; color: var(--green); border: 2px solid var(--green); }
.button--outline:hover { background: var(--green-tint); color: var(--green-deep); border-color: var(--green-deep); }

.button--search { padding: 10px 22px; background: #fff; color: #000; border: 1px solid var(--link-strong); font-weight: 500; }
.button--search:hover { background: var(--chip); color: #000; border-color: var(--link-strong); }

.button--menu { padding: 10px 16px; border: 0; border-radius: 0; font-size: clamp(.9375rem, 1.4vw, 1.25rem); }
.button--menu:hover { background: var(--green-hover); }

@media (min-width: 769px) {
  .button--hero { padding: 20px 60px; }
}

/* Header: floats over a page's opening photo, and is solid on any other page */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fff;
  color: #1a1a1a;
  box-shadow: 0 1px 0 #e3e3e3;
  --header-fg: #1a1a1a;
}

.site-header--overlay {
  margin-bottom: calc(var(--header-height) * -1);
  background: transparent;
  box-shadow: none;
  color: #fff;
  transition: background-color .4s ease-in-out;
  --header-fg: #fff;
  --focus: #fff;
}

.site-header--overlay[data-scrolled] { background: rgba(0, 0, 0, .73); }

/* With scripts off nothing can tell that the page has scrolled, so the bar stays dark. */
@media (scripting: none) {
  .site-header--overlay { background: rgba(0, 0, 0, .73); }
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px clamp(16px, 3.5vw, 50px);
}

.site-logo { display: block; margin-right: auto; padding-block: 6px; line-height: 0; }
.site-logo img { display: block; width: 130px; height: auto; transition: width .4s ease-in-out; }

.site-header__icons { display: flex; gap: 6px; }

.icon-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--green);
  color: #fff;
  border-radius: 50%;
}

.icon-link:hover { background: var(--green-deep); }

.site-nav { display: none; }

.site-nav__list { display: flex; align-items: center; gap: 5px; margin: 0; padding: 0; list-style: none; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 44px;
  padding: 10px;
  background: none;
  border: 0;
  color: var(--header-fg);
  font: 600 clamp(.9375rem, 1.4vw, 1.25rem)/1.2 var(--font);
  text-decoration: none;
  cursor: pointer;
}

.site-nav__link:hover { text-decoration: underline; text-underline-offset: 6px; }
.site-nav__link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }

.site-nav__dropdown { position: relative; }
.site-nav__trigger .icon { transition: transform .2s; }
.site-nav__dropdown[data-open] .site-nav__trigger .icon { transform: rotate(180deg); }

.site-nav__menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  min-width: 270px;
  margin: 0;
  padding: 0;
  background: var(--green);
  list-style: none;
  animation: nav-fade .3s ease-out;
  --focus: #fff;
}

.site-nav__menu a {
  display: block;
  padding: 15px;
  border-bottom: 1px solid var(--green-deep);
  color: #fff;
  font: 500 1.125rem/1.3 var(--font);
  text-decoration: none;
}

.site-nav__menu li:last-child a { border-bottom: 0; }
.site-nav__menu a:hover, .site-nav__menu a[aria-current="page"] { background: var(--green-deep); }

.site-nav__dropdown[data-open] > .site-nav__menu { display: block; }

/* Escape or a second click shuts a menu the pointer is holding open, until the pointer leaves (data-dismissed). */
@media (hover: hover) {
  .site-nav__dropdown:not([data-dismissed]):hover > .site-nav__menu { display: block; }
}

/* Without scripts, keyboard focus opens the dropdown. */
@media (scripting: none) {
  .site-nav__dropdown:focus-within > .site-nav__menu { display: block; }
}

@keyframes nav-fade { from { opacity: 0; } to { opacity: 1; } }

/* The phone menu is a <details> element: it opens without scripts, and its panel slides in over the page. */

.site-menu__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  color: var(--header-fg);
  list-style: none;
  cursor: pointer;
}

.site-menu__toggle::-webkit-details-marker { display: none; }
.site-menu__close { display: none; }
.site-menu[open] .site-menu__open { display: none; }
.site-menu[open] .site-menu__close { display: inline-flex; }

.site-menu[open] > .site-menu__toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 3;
  color: #fff;
  --focus: #fff;
}

.site-menu__backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(0, 0, 0, .5); }

.site-menu__panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  width: min(300px, 85vw);
  padding: 64px 10px 24px;
  overflow-y: auto;
  background: var(--green);
  color: #fff;
  --focus: #fff;
}

.site-menu__list, .site-menu__sublist { margin: 0; padding: 0; list-style: none; }
.site-menu__sublist { margin-left: 14px; }

.site-menu__list a, .site-menu__group {
  display: block;
  margin: 0;
  padding: 12px 10px;
  color: #fff;
  font: 600 1.25rem/1.25 var(--font);
  text-decoration: none;
}

.site-menu__sublist a { border-bottom: 1px solid var(--green-deep); font-size: 1.125rem; font-weight: 500; }
.site-menu__sublist li:last-child a { border-bottom: 0; }
.site-menu__list a:hover, .site-menu__list a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.site-menu__list .button--menu { justify-content: flex-start; padding: 12px 10px; background: transparent; border: 0; font-size: 1.25rem; text-align: left; }

@media (min-width: 993px) {
  .site-nav { display: block; }
  .site-menu { display: none; }

  .site-header__icons { margin-left: 20px; }
  .site-logo { padding-block: 0; }
  .site-logo img { width: clamp(240px, 26vw, 360px); }
  .site-header--overlay[data-scrolled] .site-logo img { width: clamp(180px, 17vw, 243px); }
}

/* Just above the phone menu's breakpoint the links need the room the margins would take. */
@media (min-width: 993px) and (max-width: 1099px) {
  .site-header__inner { padding-inline: 16px; }
  .site-header__icons { margin-left: 0; }
}

/* Openings: the photo (or video) behind the page's title */

.page-hero, .home-hero, .listing-hero {
  position: relative;
  isolation: isolate;
  background: #222;
  color: #fff;
  text-align: center;
  --focus: #fff;
}

.page-hero__media, .home-hero__media, .listing-hero__media, .tile__media, .band__media, .stats__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.page-hero::before, .home-hero::before, .listing-hero::before, .tile::before, .band::before, .stats::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
}

.page-hero { padding: 50px var(--gutter); }
.page-hero--first { padding-top: clamp(100px, 12vw, 150px); padding-bottom: clamp(30px, 4vw, 50px); }
.page-hero::before { background: rgba(0, 0, 0, .66); }
.page-hero__inner { max-width: var(--content); margin: 0 auto; }

.page-hero h1 {
  font: 900 clamp(1.5rem, 4vw, 3.625rem)/1.2 var(--font);
  text-transform: uppercase;
}

.page-hero p { max-width: 1100px; margin: 1.1em auto 0; font-size: clamp(1rem, 1.6vw, 1.375rem); }

.video-toggle {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: .45em;
  min-height: 44px;
  padding: 8px 14px;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .65);
  border-radius: 22px;
  font: 600 .875rem/1 var(--font);
  cursor: pointer;
  --focus: #fff;
}

.video-toggle:hover { background: rgba(0, 0, 0, .75); }
.page-hero:has(.video-toggle) { padding-bottom: 84px; }
.video-toggle .icon--play { display: none; }
.video-toggle[data-paused] .icon--play { display: inline; }
.video-toggle[data-paused] .icon--pause { display: none; }

/* The home page's opening: the statement sits on the right, so the building shows on the left. */

.home-hero { padding: 50px var(--gutter) 60px; }
.home-hero--first { padding-top: 110px; }
.home-hero__media { object-position: 0% 0%; }
/* The old site's wash, plus a soft one across the top, so the header's white links read over a bright sky. */
.home-hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, 0) 150px),
    linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, .27) 100%);
}
.home-hero__inner { max-width: var(--content); margin: 0 auto; display: flex; justify-content: flex-end; }
.home-hero__text { width: 100%; }

.home-hero__eyebrow {
  margin: 0 0 .35em;
  font: 900 clamp(1.94rem, 4.8vw, 4.31rem)/.9 var(--font);
  text-transform: uppercase;
}

.home-hero h1 { margin: 0 0 1.3em; font: 600 clamp(1rem, 2.2vw, 1.5rem)/1.4 var(--font); }

@media (min-width: 769px) {
  .home-hero--first { padding-top: clamp(220px, 24.3vw, 350px); }
  .home-hero__media { object-position: 50% 20%; }
  .home-hero__text { width: 54.46%; text-align: left; }
}

/* For Lease / For Sale tiles */

.tiles { position: relative; padding: 20px var(--gutter) 0; }
.tiles__list { max-width: var(--content); margin: 0 auto; padding: 0; list-style: none; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }

.tile {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  padding: 40px 30px;
  background: #333;
  border-bottom: 10px solid var(--green);
  color: #fff;
  text-align: center;
  --focus: #fff;
}

.tile::before { background: rgba(0, 0, 0, .4); }

.tile__heading {
  margin: 0 0 20px;
  font: 900 clamp(2.125rem, 4.5vw, 4.06rem)/1.2 var(--font);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.tile__badge { position: absolute; right: 0; bottom: 0; width: clamp(64px, 7vw, 100px); height: auto; }

@media (min-width: 769px) {
  .home-hero + .tiles { margin-top: -20px; padding-top: 0; }
  .tiles__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tile { align-items: flex-start; padding: 50px; text-align: left; }
}

/* Search panels, on the home page and beside the listings */

.search-panel { padding: 20px; background: var(--green); color: #fff; --focus: #fff; }
.search-panel--side { background: linear-gradient(0deg, var(--green-deep), var(--green)); }

.search-panel__head { display: flex; align-items: center; gap: 20px; margin-bottom: 20px; }
.search-panel__icon { flex: none; width: 100px; height: auto; }
.search-panel__title { font: 700 1.5rem/1.4 var(--font); text-transform: uppercase; }
.search-panel--side .search-panel__title { font-size: 1.375rem; }
.search-panel__count { margin: 20px 20px 4px; font-weight: 700; }

.filters { padding: 0 20px; }
.filters__fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.filters__legend { padding: 0; margin-bottom: 8px; font-weight: 700; }
.filters__field { margin: 0 0 14px; }
.filters__field label { display: block; margin-bottom: 2px; font-weight: 700; }

.filters select {
  appearance: none;
  width: 100%;
  min-height: 44px;
  padding: 8px 28px 8px 4px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 14px;
  color: #fff;
  border: 0;
  border-bottom: 1px solid rgba(255, 255, 255, .5);
  border-radius: 0;
  font-size: .875rem;
  font-weight: 600;
}

/* iOS Safari zooms into a field whose text is under 16px. */
@media (max-width: 768px) {
  .filters select { font-size: 1rem; }
}

.filters select:disabled { opacity: .65; }
.filters select option,
.filters select optgroup { background: #fff; color: #000; }
.filters .button { margin-bottom: 4px; }
.filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0 20px; }
.filters__clear { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 4px; color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.filters__clear:hover { text-decoration-thickness: 2px; }

.search-panel__actions { display: grid; gap: 14px; margin-top: 30px; }

/* Available properties (home): the search panel and one property, or the results */

.available { padding: 50px var(--gutter); }
.available__inner { max-width: var(--content); margin: 0 auto; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.available__count { margin: 0 0 14px; font-weight: 700; }

/* The search's matches load into these frames as visitors choose. A search
   that takes a moment dims the old matches until the new ones land; a quick
   one never dims them. */
.available__results turbo-frame,
.browse__results turbo-frame { display: block; transition: opacity 150ms ease; }
.available__results turbo-frame[busy],
.browse__results turbo-frame[busy] { opacity: .5; transition-delay: 200ms; }
.available__empty { margin: 0; padding: 20px; background: var(--card-fill); border: 1px solid #000; }

@media (min-width: 993px) {
  .available__inner { grid-template-columns: 30.62% minmax(0, 1fr); align-items: start; }
}

/* Property cards */

.listing-grid { margin: 0; padding: 0; list-style: none; display: grid; gap: 2rem 2%; grid-template-columns: minmax(0, 1fr); }
.listing-grid > li { display: flex; }

.listing-card {
  position: relative;
  display: flex;
  flex: 1;
  flex-direction: column;
  background: #fff;
  box-shadow: 2px 4px 15px #e7e7e7;
  container-type: inline-size;
}

.listing-card__photo { display: block; width: 100%; height: 250px; object-fit: cover; }
.listing-card__photo--empty { background: #e4e6e5; }
.listing-card__body { flex: 1; padding: 20px; }
.listing-card__title { margin: 0 0 4px; color: var(--heading); font: 700 1.0625rem/1.3 var(--font); }
.listing-card__link { color: inherit; text-decoration: none; }
.listing-card__link::after { content: ""; position: absolute; inset: 0; }
.listing-card__link:hover { text-decoration: underline; }

/* The link's ring would only circle the title, so the whole card shows it, where the browser can tell. */
@supports selector(:has(*)) {
  .listing-card__link:focus-visible { outline: 0; }
  .listing-card:has(.listing-card__link:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
}

.listing-card__facts { display: flex; justify-content: space-between; gap: 16px; color: var(--heading); font-weight: 600; }
.listing-card__facts p { margin: 0; }
.listing-card__where { flex: 1 1 auto; min-width: 0; }
.listing-card__size { flex: 0 1 11em; text-align: right; color: var(--muted); }
.listing-card__price { color: var(--heading); font-weight: 700; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; }
.chips li { padding: 3px 8px; background: var(--chip); border-radius: 3px; color: #000; font-size: .9375rem; font-weight: 700; }

/* A narrow card (a phone, or two across on a tablet) stacks the place above the price and size. */
@container (max-width: 430px) {
  .listing-card__facts { flex-direction: column; gap: 10px; }
  .listing-card__where, .listing-card__size { flex: none; }
  .listing-card__size { text-align: left; }
}

.listing-card--result, .listing-card--featured { background: var(--card-fill); border: 1px solid #000; box-shadow: none; }
.listing-card--result .listing-card__photo { height: 330px; }
.listing-card--featured .listing-card__photo { height: clamp(260px, 36vw, 530px); }
.listing-card--result .listing-card__title, .listing-card--featured .listing-card__title { font-size: 1.5rem; }

@media (min-width: 769px) {
  .listing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Property listing pages: the search panel beside the cards */

.browse { padding: 50px var(--gutter); }
.browse__inner { max-width: var(--content); margin: 0 auto; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); }
.browse__side { display: flex; flex-direction: column; gap: 20px; }
.browse__help { position: relative; margin: 20px 0 0; padding-left: 30px; color: var(--heading); }

.browse__help::before {
  content: "";
  position: absolute;
  left: 8px;
  top: .5em;
  border-left: 8px solid #a8a8a8;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.browse__empty { margin: 0; padding: 20px; background: var(--card-fill); }

@media (min-width: 993px) {
  .browse__inner { grid-template-columns: minmax(230px, 22%) minmax(0, 1fr); gap: 35px; align-items: start; }
}

/* Green bands: the services band over video, and the projects on solid green */

.band {
  position: relative;
  isolation: isolate;
  padding: 50px var(--gutter);
  background: var(--green-deep);
  color: #fff;
  --focus: #fff;
}

.band::before { background: var(--band-overlay); }
.band__inner { max-width: var(--content); margin: 0 auto; text-align: center; }

.band__heading {
  margin-bottom: 1.5em;
  font: 900 clamp(1.125rem, 2.4vw, 2.19rem)/1.3 var(--font);
  text-transform: uppercase;
}

.band__cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 25px; grid-template-columns: minmax(0, 1fr); }
.band__card { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 10px; color: #fff; text-decoration: none; }
.band__icon { width: 150px; height: 140px; object-fit: contain; }
.band__caption { font: 900 clamp(1.125rem, 1.7vw, 1.5rem)/1.35 var(--font); }
a.band__card:hover .band__caption { text-decoration: underline; }

@media (max-width: 768px) {
  .band:has(.video-toggle) { padding-bottom: 84px; }
}

@media (min-width: 769px) {
  .band { padding-block: 105px 130px; }
  .band__heading { margin-bottom: 87px; }
  .band__card { gap: 40px; }
  .band__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* A green panel of text beside a photo (photo first on phones) */

.feature-panel { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--green); color: #fff; --focus: #fff; }
.feature-panel__photo { position: relative; order: -1; min-height: 300px; }
.feature-panel__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.feature-panel__text { padding: 50px var(--gutter); }

.feature-panel :is(h1, h2) {
  margin-bottom: 1em;
  font: 800 clamp(1.125rem, 2.1vw, 1.875rem)/1.3 var(--font);
  text-align: center;
  text-transform: uppercase;
}

.feature-panel p:last-child { margin-bottom: 0; }
.feature-panel a:not(.button), .projects a:not(.button) { color: #fff; text-decoration: underline; }

@media (min-width: 769px) {
  .feature-panel:not(.feature-panel--plain) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-panel__photo { order: 0; }
  .feature-panel__text { padding: 80px 50px 80px 100px; }
}

@media (min-width: 1201px) {
  .feature-panel__text { padding-left: 150px; }
}

/* Photo carousel */

.carousel { padding: 20px var(--gutter); --focus: #1f5a87; }
.carousel__inner { max-width: var(--content); margin: 0 auto; }
.carousel__heading { margin-bottom: .8em; font: 800 clamp(1.25rem, 2.1vw, 1.875rem)/1.3 var(--font); color: var(--green); }
.carousel__frame { position: relative; }

.carousel__track {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel__track::-webkit-scrollbar { display: none; }
/* Snapping waits while the carousel controller glides a track to a slide. */
.carousel__track[data-gliding], .gallery__track[data-gliding] { scroll-snap-type: none; }
.carousel__slide { flex: 0 0 100%; scroll-snap-align: start; }
.carousel__link { display: block; overflow: hidden; background: #ddd; }
.carousel__image { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .3s; }
.carousel__link:hover .carousel__image { transform: scale(1.05); }

.carousel__button {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-top: -22px;
  padding: 0;
  background: #fff;
  color: var(--link-strong);
  border: 1px solid #c9c9c9;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  cursor: pointer;
}

.carousel__button--previous { left: 8px; }
.carousel__button--next { right: 8px; }
.carousel__button[aria-disabled="true"] { opacity: .45; cursor: default; }

@media (min-width: 769px) {
  .carousel__slide { flex-basis: calc((100% - 20px) / 2); }
}

@media (min-width: 993px) {
  .carousel__slide { flex-basis: calc((100% - 40px) / 3); }
}

/* About: text beside a video, numbers, project photos, statements, logos */

.history { padding: 50px var(--gutter); }
.history__inner { max-width: var(--content); margin: 0 auto; display: grid; gap: 30px; grid-template-columns: minmax(0, 1fr); align-items: start; }

.history :is(h1, h2) { margin-bottom: .8em; color: var(--green); font: 800 clamp(1.125rem, 2vw, 1.8125rem)/1.3 var(--font); }
.history__media video, .history__media img { display: block; width: 100%; background: #000; }
.history__media video { aspect-ratio: 16 / 9; }

@media (min-width: 769px) {
  .history:not(.history--text-only) .history__inner { grid-template-columns: 55.02fr 44.98fr; gap: 40px; }
}

.stats { position: relative; isolation: isolate; padding: 50px var(--gutter); background: #9a9d9b; }
.stats::before { background: rgba(165, 167, 166, .78); }
.stats__list { max-width: var(--content); margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px 40px; text-align: center; }
.stat { flex: 0 1 100%; display: flex; flex-direction: column; gap: 6px; }
.stat__value { color: var(--green-deep); font: 600 clamp(1.75rem, 3.3vw, 3rem)/1.2 var(--font); }
.stat__label { color: #1a1a1a; font: 600 clamp(1.125rem, 1.7vw, 1.5rem)/1.3 var(--font); }

@media (min-width: 480px) {
  .stat { flex-basis: calc((100% - 40px) / 2); }
}

@media (min-width: 769px) {
  .stats { padding-block: 30px; }
}

@media (min-width: 900px) {
  .stat { flex-basis: calc((100% - 120px) / 4); }
}

.projects { padding: 50px var(--gutter); background: var(--green); color: #fff; text-align: center; --focus: #fff; }
.projects__inner { max-width: 1358px; margin: 0 auto; }
.projects :is(h1, h2) { font: 800 clamp(1.25rem, 2.1vw, 1.875rem)/1.3 var(--font); }
.projects p { max-width: 1000px; margin: 1em auto 0; }
.projects__grid { margin: 30px 0 0; padding: 0; list-style: none; display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); }
.projects__grid img { display: block; width: 100%; aspect-ratio: 10 / 7; object-fit: cover; }

@media (min-width: 769px) {
  .projects { padding-block: 30px; }
  .projects__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.statement, .logos { color: var(--green-text); }
.statement { padding: 50px 20px 20px; }
.statement__inner, .logos__inner { max-width: var(--content); margin: 0 auto; }
.statement :is(h1, h2), .logos :is(h1, h2) { margin-bottom: .6em; font: 800 clamp(1.25rem, 2.1vw, 1.875rem)/1.3 var(--font); }

.logos { padding: 20px var(--gutter) 50px; }
.logos__intro { margin-bottom: 30px; }
.logos__intro p:last-child { margin-bottom: 0; }
.logos__grid { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px 60px; }
.logos__grid li { flex: 0 1 calc(25% - 45px); min-width: 140px; max-width: 300px; text-align: center; }
.logos__link { display: flex; align-items: center; justify-content: center; min-height: 44px; }
.logos__grid img { display: block; width: 100%; max-height: 170px; margin: 0 auto; object-fit: contain; }
.logos__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 40px 0 0; }

@media (min-width: 993px) {
  .statement { padding: 80px 50px 20px 100px; }
  .logos { padding: 0 50px 80px 100px; }
}

/* Contact: the details beside the form */

.contact-details, .contact-form-section { padding: 50px var(--gutter) 20px; }
.contact-details__inner, .contact-form-section__inner { max-width: 610px; margin: 0 auto; }

.contact-details h2, .contact-details h1, .contact-form-section h2, .contact-form-section h1 {
  margin-bottom: 1em;
  color: var(--heading);
  font: 700 1.5rem/1.3 var(--font);
}

.contact-details__address { margin-bottom: 1.6em; }
.contact-details__address a { font-weight: 500; text-decoration: none; }
.contact-details__address a:hover { text-decoration: underline; }
.contact-details__map { display: block; width: 100%; height: clamp(320px, 80vw, 500px); margin-top: 30px; border: 0; }

@media (min-width: 769px) {
  main > .half { flex: 1 1 50%; }
  main > .contact-details { padding-left: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter))); padding-right: 30px; }
  main > .contact-form-section { padding-left: 30px; padding-right: max(var(--gutter), calc((100% - var(--content)) / 2 + var(--gutter))); }
}

/* Forms (the contact form's fields) */

.contact-form .form-row { display: grid; gap: 0 12px; grid-template-columns: minmax(0, 1fr); }
.form-field { margin: 0 0 20px; }
.form-field label { display: block; margin-bottom: 6px; color: #1a1a1a; font-weight: 700; }

.form-field input, .form-field select, .form-field textarea {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 14px 15px;
  background: #fff;
  color: #1a1a1a;
  border: 1px solid #1a1a1a;
  border-radius: 3px;
  box-shadow: 0 1px 4px rgba(18, 25, 97, .08);
  font-weight: 500;
}

.form-field textarea { min-height: 130px; resize: vertical; }
.form-field--error input, .form-field--error select, .form-field--error textarea { border: 2px solid var(--required); }
.form-hint { margin: 0 0 8px; }
.form-count { margin: 6px 0 0; font-size: .9375rem; }
.form-error { margin: 6px 0 0; color: var(--required); font-size: .9375rem; font-weight: 600; }
.form-errors { margin: 0 0 20px; padding: 14px 18px; border: 2px solid var(--required); color: #7d1c06; font-weight: 600; }
.form-errors p { margin: 0 0 .4em; }
.form-errors ul { margin: 0; padding-left: 1.2em; }
.form-success { margin: 0 0 20px; padding: 14px 18px; background: var(--green-tint); border: 2px solid var(--green); color: var(--green-deep); font-weight: 600; }

/* The field's asterisk is hidden from screen readers, which hear "required". Sighted visitors see the old form's "(Required)". */
.form-required { color: var(--required); font-size: 0; font-weight: 500; }
.form-required::after { content: "(Required)"; font-size: 1rem; }

.form-actions { margin-top: 10px; }
.form-submit { font-size: 1.125rem; }

.form-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (min-width: 481px) {
  .contact-form .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Plain text pages and notices */

.text-section { padding: 50px var(--gutter); }
.text-section__inner { max-width: 800px; margin: 0 auto; }
.text-section h2, .text-section h3 { margin: 1.6em 0 .5em; font: 700 1.25rem/1.3 var(--font); }
.text-section__inner > h1:first-child, .text-section__inner > h2:first-child { margin: 0 0 .7em; color: var(--green); font: 800 clamp(1.5rem, 3vw, 2.25rem)/1.2 var(--font); }
.text-section p, .text-section li { line-height: 1.6; }
.text-section ul, .text-section ol { padding-left: 1.4em; }

.notice-page { padding: 80px var(--gutter) 100px; text-align: center; }
.notice-page__inner { max-width: 620px; margin: 0 auto; }
.notice-page h1 { margin-bottom: .6em; color: var(--heading); font: 800 clamp(1.5rem, 3.5vw, 2.25rem)/1.2 var(--font); }
.notice-page p { margin-bottom: 1.6em; }

.preview-banner {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 300;
  margin: 0;
  padding: 12px var(--gutter);
  background: #ffd54a;
  color: #1a1a1a;
  font-weight: 700;
  text-align: center;
}

body:has(.preview-banner) { padding-bottom: 56px; }

/* Listing pages */

.listing-hero { padding: 100px var(--gutter) 60px; background-color: #222; }
.listing-hero::before {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .45) 0, rgba(0, 0, 0, 0) 150px),
    rgba(10, 0, 0, .5);
}

.listing-hero h1 {
  max-width: 1100px;
  margin: 0 auto;
  font: 800 clamp(1.75rem, 3.5vw, 3.125rem)/1.2 var(--font);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .45);
  text-transform: uppercase;
}

.listing-hero__tagline { margin: 1em 0 0; font-size: 1.25rem; font-weight: 600; }

@media (min-width: 769px) {
  .listing-hero { padding: 150px var(--gutter); }
}

.listing { padding: 20px var(--gutter) 60px; }

.listing__inner {
  max-width: var(--content);
  margin: 0 auto;
  display: grid;
  gap: 30px;
  grid-template-areas: "gallery" "info" "map";
  grid-template-columns: minmax(0, 1fr);
}

.gallery { grid-area: gallery; min-width: 0; }
.listing__info { grid-area: info; min-width: 0; }
.listing__map { grid-area: map; min-width: 0; }

@media (min-width: 769px) {
  .listing { padding-top: 40px; }
  .listing__inner { gap: 20px 40px; grid-template-areas: "gallery info" "map info"; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; }
}

.gallery__stage { overflow: hidden; background: #eee; border-radius: 4px; }
.gallery__track { display: flex; margin: 0; padding: 0; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; scrollbar-width: none; }
.gallery__track::-webkit-scrollbar { display: none; }
.gallery__slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; }
.gallery__link { display: block; }
.gallery__image { display: block; width: 100%; aspect-ratio: 590 / 450; object-fit: cover; }

.gallery__nav { display: flex; align-items: center; gap: 4px; margin-top: 12px; }

.gallery__arrow {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: none;
  border: 0;
  color: #000;
  cursor: pointer;
}

.gallery__arrow[aria-disabled="true"] { color: #b5b5b5; cursor: default; }

.gallery__thumbs {
  position: relative;
  flex: 1;
  display: flex;
  gap: 10px;
  min-width: 0;
  margin: 0;
  padding: 4px;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: none;
}

.gallery__thumbs::-webkit-scrollbar { display: none; }

/* Without scripts the arrow buttons don't exist, so the photo strips keep a thin scrollbar to drag. */
@media (scripting: none) {
  .carousel__track, .gallery__track, .gallery__thumbs { scrollbar-width: thin; }
  .carousel__track::-webkit-scrollbar, .gallery__track::-webkit-scrollbar, .gallery__thumbs::-webkit-scrollbar { display: block; height: 8px; }
}
.gallery__thumbs li { flex: none; }

.gallery__thumb {
  display: block;
  width: 70px;
  height: 70px;
  overflow: hidden;
  border: 2px solid #ddd;
  border-radius: 6px;
}

.gallery__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery__thumb:hover, .gallery__thumb[aria-current="true"] { border-color: #0073e6; }

@media (min-width: 769px) {
  .gallery__thumb { width: 100px; height: 100px; }
}

@media (min-width: 1201px) {
  .gallery__thumb { width: 124px; height: 124px; }
}

.quick-facts h2 { margin-bottom: .3em; font: 700 1rem/1.4 var(--font); }
.quick-facts ul { margin: 0; padding-left: 1.5em; list-style: circle; }
.quick-facts li { margin: 0 0 .65em; }
.quick-facts a { overflow-wrap: anywhere; }

.listing-details { margin-top: 28px; }
.listing-details h3 { margin: 1.5em 0 .6em; font: 700 1.125rem/1.3 var(--font); }
.listing-details > .visually-hidden + h3 { margin-top: 0; }
.listing-details p { margin: 1em 0; }
.listing-details ul { margin: 0 0 1em; padding-left: 1.6em; }
.listing-details li { margin: .55em 0; font-weight: 600; }
.listing-details ul ul { margin: .45em 0 0; list-style: circle; }

/* The first list, under Property Details, has a green check for each point. */
.listing-details > ul:first-of-type { padding-left: 0; list-style: none; }
.listing-details > ul:first-of-type > li { position: relative; padding-left: 32px; font-weight: 500; }

.listing-details > ul:first-of-type > li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .2em;
  width: 1.15em;
  height: 1.15em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23146844'/%3E%3Cpath d='M7 12.5l3.2 3.2L17 9' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.listing-details > ul:first-of-type ul { padding-left: 1.2em; }
.listing-details > ul:first-of-type ul li { font-weight: 500; }

.listing-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 0; }

.listing-contact { margin-top: 28px; }
.listing-contact h2 { margin-bottom: .6em; font: 700 1.25rem/1.3 var(--font); }
.listing-contact p { margin: 0 0 .8em; }

.listing__map iframe { display: block; width: 100%; height: 415px; border: 0; border-radius: 4px; }

/* The photo viewer */

.lightbox {
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0;
  color: #fff;
  --focus: #fff;
}

.lightbox::backdrop { background: rgba(0, 0, 0, .9); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox__figure { margin: 0; max-width: min(92vw, 1400px); }
.lightbox__image { display: block; max-width: 100%; max-height: 80dvh; margin: 0 auto; object-fit: contain; }
.lightbox__caption { margin: 10px 0 0; text-align: center; font-size: .9375rem; }
.lightbox__count { position: absolute; right: 0; bottom: 14px; left: 0; margin: 0; text-align: center; font-size: .9375rem; font-weight: 600; }

.lightbox__button {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 50%;
  cursor: pointer;
}

.lightbox__button:hover { background: rgba(0, 0, 0, .8); }
.lightbox__button--close { top: 16px; right: 16px; }
.lightbox__button--previous { top: 50%; left: 12px; margin-top: -24px; }
.lightbox__button--next { top: 50%; right: 12px; margin-top: -24px; }

/* Footer */

.site-footer { padding: 10px; background: var(--footer); }
.site-footer__inner { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: center; }
.site-footer a { color: var(--link-strong); }
.site-footer__logo { display: block; width: min(360px, 100%); height: auto; margin: 10px 0 16px; }
.site-footer__line { display: flex; align-items: center; gap: 10px; margin: 0; }
.site-footer__line .icon { flex: none; color: var(--link); }
.site-footer__line a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer hr { margin: 14px 0 18px; border: 0; border-top: 1px solid var(--green); }
.site-footer__legal { margin: 0; font-weight: 600; }
.site-footer__links { display: flex; gap: 16px; margin: 6px 0 0; padding: 0; list-style: none; }
.site-footer__links a { display: inline-flex; align-items: center; min-height: 44px; }
.site-footer__disclaimer p { margin: 0; }

@media (min-width: 769px) {
  .site-footer__inner { grid-template-columns: 41.59% minmax(0, 1fr); }
  .site-footer__disclaimer { padding-left: clamp(20px, 14vw, 200px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}