/* ==========================================================================
   The Agency Aruba
   Brand tokens from The Agency brand guidelines. Red is Pantone 199C and may
   not be substituted; red type is never set on an Iron background.
   ========================================================================== */

/* The hidden attribute must always win.
   Browsers give [hidden] display: none by default, but that is a browser rule
   and any rule of our own beats it. Set display: flex or grid somewhere and the
   element stays while the script believes it is gone. That went wrong twice: the
   lightbox photo stayed as a transparent layer over the screen and swallowed
   every click, and in the map view the grid of twelve cards stayed under the
   map. */
[hidden] { display: none !important; }

:root {
  --red:        #ED2127;
  --red-shade:  #CC0000;
  --iron:       #000000;
  --ecru:       #F5F1E9;
  --ecru-shade: #EBE3D6;
  --canvas:     #FFFFFF;

  --rule:       #E8E1D6;
  --rule-ecru:  #E2DACC;
  --ink:        #2B2B2B;
  --ink-soft:   #4A443C;
  --muted:      #857C70;
  --muted-soft: #A79C8D;

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  Lato, "Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap:    1248px;
  --gutter:  24px;
  --section: 94px;   /* vertical section spacing, shrinks on narrow screens */
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 16px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: var(--red); text-decoration: none; }
a:hover { color: var(--red-shade); }

h1, h2, h3, h4 { margin: 0; font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; }
p { margin: 0; }

/* ---------- layout ------------------------------------------------------ */

.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section        { padding: var(--section) 0; }
/* A page with little content per section, such as the account: with the usual
   spacing there is more white around it than there is content in it. */
.section--tight { padding: calc(var(--section) * 0.52) 0; }
.section--ecru  { background: var(--ecru); }
.section--shade { background: var(--ecru-shade); }
.section--iron  { background: var(--iron); color: #FFFFFF; }
.section--clip  { position: relative; overflow: hidden; }

.stack  { display: flex; flex-direction: column; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }

/* ---------- type -------------------------------------------------------- */

.eyebrow {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  line-height: 1.4;
}
.eyebrow--sm  { font-size: 11px; letter-spacing: 0.28em; }
.eyebrow--xs  { font-size: 10px; letter-spacing: 0.24em; }
.eyebrow--red { color: var(--red); font-size: 13px; letter-spacing: 0.3em; }
/* On a card it stays small; the proportion is already right there. */
.card .eyebrow--red, .eyebrow--xs.eyebrow--red { font-size: 10px; letter-spacing: 0.24em; }
.eyebrow--sm.eyebrow--red { font-size: 11px; letter-spacing: 0.28em; }
.eyebrow--mut { color: var(--muted-soft); }

.h-display { font-family: var(--serif); font-size: clamp(38px, 5.4vw, 70px); line-height: 1.12; }
.h-section { font-family: var(--serif); font-size: clamp(34px, 3.6vw, 52px); line-height: 1.1; }
.h-sub     { font-family: var(--serif); font-size: clamp(27px, 2.6vw, 36px); line-height: 1.18; }
.h-card    { font-family: var(--serif); font-size: clamp(23px, 1.8vw, 25px); line-height: 1.25; }

/* the italic is an accent on one word in a heading, not on running text */
em { font-style: italic; }

.lede  { font-size: clamp(15px, 1.1vw, 16px); line-height: 1.85; font-weight: 300; color: var(--ink-soft); }
.lede--light { color: rgba(255, 255, 255, 0.78); }

/* light type on black looks thin, so regular there */
.section--iron .lede,
.site-footer  { font-weight: 400; }

.price { font-size: 18px; font-weight: 300; letter-spacing: 0.03em; color: var(--iron); }

/* ---------- links en knoppen -------------------------------------------- */

.cta {
  display: inline-block;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--iron);
  padding-bottom: 7px;
  border-bottom: 1px solid currentColor;
}
.cta:hover      { color: var(--red); }
.cta--light     { color: #FFFFFF; }
.cta--light:hover { color: #FFFFFF; opacity: 0.72; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 46px;
  background: var(--red);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  border: 0;
  cursor: pointer;
}
.btn:hover { background: var(--red-shade); color: #FFFFFF; }

/* ---------- section headings -------------------------------------------- */

.section--tight .section-head { padding-bottom: 24px; }

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid var(--rule);
}
.section--ecru .section-head { border-color: var(--rule-ecru); }
.section-head__title { display: flex; flex-direction: column; gap: 20px; }

/* ---------- watermerk ---------------------------------------------------- */

.mark-wm {
  position: absolute;
  pointer-events: none;
  color: var(--iron);
  opacity: 0.035;
}
.mark-wm--light { color: #FFFFFF; opacity: 0.055; }
.mark-wm svg { width: 100%; height: auto; }

/* ---------- listingkaart ------------------------------------------------- */

.card { display: flex; flex-direction: column; }
/* The card is a link, so without this the title and meta inherit the red. */
.card .h-card { color: var(--iron); transition: color 220ms ease; }
.card:hover .h-card { color: var(--red); }
.card .price { color: var(--iron); }
.card__media { position: relative; overflow: hidden; background: var(--rule-ecru); }
.card__media img { width: 100%; height: 292px; object-fit: cover; }

/* Hover on a listing card: a slow zoom, a scrim coming up and a label sliding
   in from below. Only on devices with a real pointer, because on touch such a
   state otherwise sticks after a tap. */
.card__media img { transition: transform 1100ms cubic-bezier(.16, .84, .26, 1); }

.card__veil {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 42%, rgba(0,0,0,0.58) 100%);
  opacity: 0; transition: opacity 520ms ease;
}
.card__peek {
  position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none;
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px 22px;
  color: #FFFFFF; opacity: 0; transform: translateY(12px);
  transition: opacity 420ms ease 60ms,
              transform 560ms cubic-bezier(.16, .84, .26, 1) 60ms;
}
.card__peek i {
  display: block; height: 1px; width: 0; background: var(--red);
  transition: width 620ms cubic-bezier(.16, .84, .26, 1) 120ms;
}

@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.06); }
  .card:hover .card__veil { opacity: 1; }
  .card:hover .card__peek { opacity: 1; transform: none; }
  .card:hover .card__peek i { width: 46px; }

  /* a silent listing is already scaled up because of the blur */
  .card--blur-css:hover .card__media img { transform: scale(1.22); }
}

.card__flag {
  position: absolute; top: 18px; left: 18px;
  background: rgba(0, 0, 0, 0.42); color: #FFFFFF; padding: 8px 13px;
}
.card__heart { position: absolute; top: 18px; right: 18px; color: #FFFFFF; }
.card__body  { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; flex: 1; }

/* All cards in a row the same height, and the line above the features at the
   same height everywhere.

   Pushing the bottom block down does not work here: that makes the line uneven
   as soon as one card has features and another does not. What shifts is the
   title, which sometimes runs to two lines. So it is given the height of two
   lines, even when only one is needed. */
.card-wrap { height: 100%; }
.card-wrap > .card { height: 100%; }
.card__body .h-card {
  min-height: 2.5em;            /* twee regels bij line-height 1.25 */
  /* If a name runs to three lines it is cut off with an ellipsis. The grid
     stays straight, and a truncated name is visibly too long: that is a hint
     to shorten it in the backend. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card__meta  {
  display: flex; flex-wrap: wrap; gap: 20px;
  margin-top: 10px; padding-top: 16px; border-top: 1px solid var(--rule);
  font-size: 13px; letter-spacing: 0.05em; color: #7A7268;
}
.section--ecru .card__meta { border-color: var(--rule-ecru); }

/* Silent listing. The CSS blur is only the fallback when there is no
   pre-blurred image yet; in production that comes from the server. */
.card--blur-css .card__media img { filter: blur(13px) saturate(0.85); transform: scale(1.16); }
.card--silent .card__veil { background: linear-gradient(180deg, rgba(0,0,0,0) 36%, rgba(0,0,0,0.66) 100%); }
.card--silent .card__lock {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; color: #FFFFFF;
}

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1200px) {
  .site-footer__base { flex-wrap: wrap; justify-content: space-between; }
  .site-footer__base ul { position: static; transform: none; order: 3; }
  .site-footer__credit { order: 2; }
}


@media (max-width: 1100px) {
  :root { --section: 78px; }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
}

@media (max-width: 820px) {
  :root { --section: 64px; }
  .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 24px; }
  .card__media img { height: 232px; }
}

@media (prefers-reduced-motion: reduce) {
  .card__media img, .card__veil, .card__peek, .card__peek i { transition: none; }
  .card:hover .card__media img { transform: none; }
  .card--blur-css:hover .card__media img { transform: scale(1.16); }
}

/* ==========================================================================
   Site chrome
   ========================================================================== */

.site-header { width: 100%; z-index: 20; }
.site-header--over { position: absolute; top: 0; left: 0; color: #FFFFFF; }
.site-header--solid { position: relative; background: var(--canvas); }

.site-header__util {
  display: flex; align-items: center; min-height: 48px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.16);
}
.site-header--solid .site-header__util { background: var(--ecru-shade); border-bottom: 0; }

.site-header__util .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.switches { display: flex; align-items: center; gap: 30px; }
.switch   { display: flex; align-items: center; gap: 12px; }
.switch__label { color: rgba(255, 255, 255, 0.42); }
.site-header--solid .switch__label { color: var(--muted-soft); }
.switch__opt { color: rgba(255, 255, 255, 0.5); }
.site-header--solid .switch__opt { color: var(--muted-soft); }
.switch__opt.is-active { color: currentColor; border-bottom: 1px solid var(--red); padding-bottom: 3px; }
.site-header--over .switch__opt.is-active { color: #FFFFFF; }
.site-header--solid .switch__opt.is-active { color: var(--iron); }
.switch__sep { width: 1px; height: 14px; background: rgba(255, 255, 255, 0.22); }
.switch__opt { cursor: pointer; }
.util__temp { white-space: nowrap; }

/* Currency and units. Both values are in the page, the class on <html> decides
   which of them is visible. Nothing has to be reloaded or converted, and the
   choice survives as the visitor clicks on. */
.when-awg, .when-met { display: none; }
html.is-awg .when-usd { display: none; }
html.is-awg .when-awg { display: inline; }
html.is-metric .when-imp { display: none; }
html.is-metric .when-met { display: inline; }
.site-header--solid .switch__sep { background: #D6CCBC; }

.site-header__bar { display: flex; align-items: center; min-height: 104px; }
/* The edge as a shadow rather than a border, or it eats a pixel of the space
   under the logo and the tile sits unevenly. */
.site-header--solid .site-header__bar { box-shadow: 0 1px 0 var(--rule); }
.site-header__bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }

.logo-tile {
  width: 92px; height: 92px; flex: 0 0 92px;
  background: var(--red); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
}
/* Without this the tile inherits the red hover from a:hover and the wordmark
   turns dark red on red, which is all but invisible. */
.logo-tile { transition: color 180ms ease; }
.logo-tile:hover { color: var(--iron); }
.logo-tile__art { width: 76px; }
.logo-tile__art svg { width: 100%; height: auto; }

.nav { display: flex; align-items: center; gap: 38px; }
.nav__link {
  display: flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase;
  color: currentColor;
}
.site-header--solid .nav__link { color: var(--iron); }
.nav__link:hover { color: var(--red); }

/* Dropdown. The panel hangs off .nav__sub, which itself only fills the space
   below: without that padding there is a gap between link and panel and the
   hover drops as soon as the mouse crosses it. */
.nav__item { position: relative; display: inline-flex; align-items: center; }
.nav__item .nav__link svg { transition: transform 300ms cubic-bezier(0.22, 0.7, 0.3, 1); }

.nav__sub {
  position: absolute; top: 100%; left: -20px; z-index: 60;
  padding-top: 18px;
  opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity 220ms ease,
              transform 300ms cubic-bezier(0.22, 0.7, 0.3, 1),
              visibility 0s linear 300ms;
}
.nav__sub-panel {
  display: block; min-width: 212px;
  background: var(--canvas); border: 1px solid var(--rule);
  padding: 6px 0;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
}
.nav__sub-panel a {
  display: block; padding: 7px 20px;
  font-size: 14.5px; font-weight: 300; line-height: 1.5; letter-spacing: 0.01em;
  color: var(--ink-soft); white-space: nowrap;
  transition: color 200ms ease, background 200ms ease;
}
.nav__sub-panel a:hover { color: var(--red); background: var(--ecru); }

/* A dropdown that explains itself: used on Rent, which leaves the site. */
.nav__sub-panel--note { min-width: 310px; }
.nav__sub-note {
  display: block; padding: 12px 20px 11px;
  border-bottom: 1px solid var(--rule);
  font-size: 13.5px; font-weight: 300; line-height: 1.55;
  color: var(--muted); white-space: normal;
}
.nav-drawer__note {
  display: block; padding: 4px 0 10px;
  font-size: 13.5px; font-weight: 300; line-height: 1.55; color: var(--muted);
}
/* The count behind a type: quiet, right aligned, not italic. */
.nav__sub-panel a { display: flex; align-items: baseline; justify-content: space-between; gap: 26px; }
.nav__sub-panel a i { font-style: normal; font-size: 12.5px; color: var(--muted-soft); }
.nav__sub-panel a:hover i { color: var(--red); }

.nav__item:hover .nav__sub,
.nav__item:focus-within .nav__sub {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.nav__item:hover .nav__link svg,
.nav__item:focus-within .nav__link svg { transform: rotate(180deg); }

/* In the drawer the items sit indented under their main link. */
.nav-drawer__link--sub {
  padding-left: 20px; font-size: 16px; color: var(--muted);
  position: relative;
}
.nav-drawer__link--sub::before {
  content: ''; position: absolute; left: 0; top: 50%;
  width: 10px; height: 1px; background: var(--rule-ecru);
}
.nav__sep { width: 1px; height: 16px; background: rgba(255, 255, 255, 0.26); }
.site-header--solid .nav__sep { background: #D6CCBC; }
.nav__icons { display: flex; align-items: center; gap: 18px; color: currentColor; }
.site-header--solid .nav__icons { color: var(--iron); }

.nav-toggle { display: none; background: 0; border: 0; padding: 0; color: currentColor; cursor: pointer; }

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

.hero { position: relative; min-height: 856px; overflow: hidden; background: #0B0B0B; display: flex; }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
/* Two layers. The top-to-bottom gradient keeps the header and footer readable;
   the ellipse above it darkens only the middle, where the text sits. Without
   that ellipse the bottom line disappeared against the white villa in the photo,
   because the scrim was only ten percent opaque there. The rest of the image
   stays light. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    radial-gradient(64% 42% at 50% 50%,
                    rgba(0, 0, 0, 0.60) 0%,
                    rgba(0, 0, 0, 0.46) 55%,
                    rgba(0, 0, 0, 0) 82%),
    linear-gradient(180deg, rgba(0,0,0,.62) 0%, rgba(0,0,0,.14) 30%,
                                      rgba(0,0,0,.18) 55%, rgba(0,0,0,.68) 100%);
}
.hero__inner {
  position: relative; z-index: 10; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: 200px 0 210px; text-align: center; color: #FFFFFF;
}
.hero__copy { display: flex; flex-direction: column; align-items: center; gap: 30px; }
/* The heading in the hero used the same size as a page title and so ran to
   70px; over a photo that reads as shouting. A notch smaller here and a little
   more leading, so it stays dignified rather than hard. */
.hero .h-display { font-size: clamp(32px, 4vw, 52px); line-height: 1.2; }
.hero__rule-row { display: flex; align-items: center; gap: 22px; }
.hero__rule { width: 54px; height: 1px; background: rgba(255, 255, 255, 0.45); }
.hero h1 { max-width: 940px; color: #FFFFFF; }
/* Weight 300 dissolves against a busy image, however dark you make the scrim.
   A notch heavier and a point larger does read, and stays restrained. */
.hero__lede {
  max-width: 640px;
  color: #FFFFFF;
  font-size: 17px; font-weight: 400; line-height: 1.75;
}
/* A wide, soft shadow catches what the scrim leaves, without giving the type a
   hard edge. */
.hero__copy { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.34), 0 2px 30px rgba(0, 0, 0, 0.5); }

.hero__foot {
  position: absolute; left: 0; right: 0; bottom: 48px; z-index: 10;
}
.hero__controls {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
  min-height: 52px; padding-left: 4px;
}
.tabs { display: flex; align-items: flex-end; gap: 34px; }
.tab {
  font-size: 11px; font-weight: 400; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.68); padding-bottom: 8px;
}
.tab.is-active { color: #FFFFFF; border-bottom: 2px solid var(--red); }

.sound { display: flex; align-items: center; gap: 13px; padding-bottom: 6px; color: #FFFFFF; }
.sound__btn {
  width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.55);
  display: flex; align-items: center; justify-content: center;
  background: 0; color: inherit; cursor: pointer;
}

/* ---------- zoekbalk ----------------------------------------------------- */

.search {
  display: grid; grid-template-columns: 2fr 1fr 1fr 92px;
  min-height: 92px; background: var(--canvas);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.26);
}
.search--flat { box-shadow: 0 14px 38px rgba(0, 0, 0, 0.10); }
.search__field {
  display: flex; flex-direction: column; justify-content: center; gap: 9px;
  padding: 18px 32px; border-right: 1px solid var(--rule); min-width: 0;
}
.search__field:nth-last-child(2) { border-right: 0; }
.search__value {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  font-size: 16px; font-weight: 300; color: var(--iron);
}
.search__value--empty { color: var(--muted-soft); }
.search__submit {
  background: var(--red); color: #FFFFFF; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.search__submit:hover { background: var(--red-shade); }

/* ---------- blocks on the homepage --------------------------------------- */

/* The photo hung at its own aspect ratio from half the screen width: at 1920
   that came to 720 pixels tall and dragged the black half along, with nearly 300
   pixels of emptiness above and below the text. Positioned absolutely it no
   longer counts towards the height, and min-height decides what the section
   becomes. */
.split { display: flex; min-height: 500px; }
.split__copy  { position: relative; width: 50%; display: flex; align-items: center; overflow: hidden; }
.split__inner { position: relative; display: flex; flex-direction: column; gap: 24px; max-width: 660px; padding: 56px 72px 56px 80px; }
.split__media { position: relative; width: 50%; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.banner { position: relative; min-height: 430px; overflow: hidden; background: var(--iron); display: flex; }
.banner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.banner__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.05) 30%, rgba(0,0,0,.74) 100%); }
.banner__body { position: relative; z-index: 2; align-self: flex-end; display: flex; flex-direction: column; gap: 16px; padding: 44px 48px; color: #FFFFFF; }
.banner__body p { max-width: 420px; font-size: 16px; line-height: 1.8; color: rgba(255,255,255,.8); }

.feature { display: grid; grid-template-columns: 1.08fr 1fr; gap: 76px; align-items: center; }
.feature__media img { width: 100%; height: 470px; object-fit: cover; }
.feature__body  { display: flex; flex-direction: column; gap: 24px; }
.feature__body p { max-width: 470px; }

.centered { display: flex; flex-direction: column; align-items: center; gap: 44px; text-align: center; }
.centered .lede { text-align: center; }

/* Virtual staging: before and after stacked, with a handle between them.
   Without javascript this falls back to two photos underneath each other; the
   is-live class is only set by the script. */
.compare { margin: 0; width: 100%; display: flex; flex-direction: column; gap: 16px; }
.compare__frame { position: relative; overflow: hidden; background: var(--ecru-shade); --split: 52%; }
.compare__frame img { display: block; width: 100%; height: 440px; object-fit: cover; }
/* On the homepage it spans the full width of the wrap and may be taller. */
.compare--wide .compare__frame img { height: clamp(340px, 42vw, 580px); }
.compare__before { position: absolute; inset: 0; }
.compare__tag, .compare__handle { display: none; }

/* Only when the script runs do they lie on top of each other. */
.compare.is-live .compare__before {
  clip-path: inset(0 calc(100% - var(--split)) 0 0);
}
.compare.is-live .compare__frame.is-smooth .compare__before {
  transition: clip-path 420ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
.compare.is-live .compare__frame { cursor: col-resize; }

.compare.is-live .compare__tag {
  display: block; position: absolute; top: 18px; z-index: 3;
  padding: 7px 13px; color: #FFFFFF;
  background: rgba(0, 0, 0, 0.42);
  transition: opacity 300ms ease;
}
.compare.is-live .compare__tag--before { left: 18px; }
.compare.is-live .compare__tag--after  { right: 18px; background: var(--red); }

/* Drag all the way to one side and the label that no longer points at anything
   disappears; otherwise "Before" sits above a photo that is gone. */
.compare.is-live .compare__frame[style*="--split: 0%"] .compare__tag--before,
.compare.is-live .compare__frame[style*="--split: 100%"] .compare__tag--after { opacity: 0; }

/* The handle: a thin line over the full height with a round grip. */
.compare.is-live .compare__handle {
  display: block; position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--split); width: 2px; margin-left: -1px;
  padding: 0; border: 0; background: rgba(255, 255, 255, 0.92);
  cursor: col-resize; touch-action: none;
  box-shadow: 0 0 18px rgba(0, 0, 0, 0.3);
}
.compare.is-live .compare__frame.is-smooth .compare__handle {
  transition: left 420ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
.compare.is-live .compare__handle:focus-visible { outline: none; background: var(--red); }

.compare__grip {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: #FFFFFF; color: var(--iron);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 26px rgba(0, 0, 0, 0.28);
  transition: transform 300ms cubic-bezier(0.22, 0.7, 0.3, 1), background 240ms ease, color 240ms ease;
}
.compare.is-live .compare__handle:hover .compare__grip,
.compare.is-live .compare__handle:focus-visible .compare__grip {
  transform: translate(-50%, -50%) scale(1.08);
  background: var(--red); color: #FFFFFF;
}
.compare.is-live .compare__frame.is-dragging .compare__grip {
  transform: translate(-50%, -50%) scale(0.94);
  background: var(--red); color: #FFFFFF;
}
/* While dragging the text must not become selected. */
.compare.is-live .compare__frame.is-dragging { user-select: none; }

@media (max-width: 760px) {
  .compare__frame img { height: 300px; }
  .compare__grip { width: 44px; height: 44px; }
  .compare.is-live .compare__tag { top: 12px; padding: 6px 11px; }
  .compare.is-live .compare__tag--before { left: 12px; }
  .compare.is-live .compare__tag--after  { right: 12px; }
}

.quotes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px; width: 100%; }
.quote  { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; text-align: left; }
.quote__mark { width: 34px; color: var(--red); }
.quote__mark svg { width: 100%; height: auto; }
.quote p { font-family: var(--serif); font-size: 20px; line-height: 1.7; color: #1A1A1A; }

.crosslink { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.crosslink__body { display: flex; flex-direction: column; gap: 12px; }
.crosslink__body p { max-width: 660px; font-size: 16px; line-height: 1.8; color: #5C564E; }
.crosslink__link { display: flex; align-items: center; gap: 16px; color: var(--iron); white-space: nowrap; }

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

.site-footer { position: relative; background: var(--iron); color: #FFFFFF; padding: 78px 0 0; overflow: hidden; }
.site-footer__cols { position: relative; display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 56px; }
.site-footer__brand { display: flex; flex-direction: column; gap: 30px; }
.site-footer__logo { width: 208px; color: #FFFFFF; }
.site-footer__logo svg { width: 100%; height: auto; }
.site-footer address {
  font-style: normal; display: flex; flex-direction: column; gap: 9px;
  font-size: 15px; line-height: 1.9; color: rgba(255, 255, 255, 0.84);
}
/* No underline at rest, one on hover: red plus a thin rule. */
.site-footer address a {
  color: #FFFFFF;
  text-decoration: none;
  transition: color 160ms ease;
}
.site-footer address a:hover {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
}
/* Social icons in the brand red; on black, white is the hover counterpart. */
.site-footer__socials { display: flex; align-items: center; gap: 20px; color: var(--red); }
.site-footer__socials a { color: inherit; transition: color 160ms ease; }
.site-footer__col { display: flex; flex-direction: column; gap: 20px; }
.site-footer__col h2 { font-family: var(--sans); color: rgba(255, 255, 255, 0.6); }
.site-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.site-footer__col a { font-size: 15px; color: rgba(255, 255, 255, 0.92); transition: color 160ms ease; }
.site-footer__base a { text-decoration: none; transition: color 160ms ease; }
.site-footer__base a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.site-footer__col a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Every link in the footer turns red on hover, including the bottom line. */
/* Every link in the footer turns red on hover. The social icons are the
   exception: they are already red, so they go white instead. */
.site-footer a:hover,
.site-footer__col a:hover,
.site-footer address a:hover,
.site-footer__base a:hover { color: var(--red); }
.site-footer__socials a:hover { color: #FFFFFF; }
.site-footer__base {
  position: relative; margin-top: 60px; padding: 28px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  font-size: 14px; color: rgba(255, 255, 255, 0.64);
}
/* The links sit in the true centre of the row, not in the space left over by
   its neighbours, so they stay centred however long the copyright line is. */
.site-footer__base ul { position: absolute; left: 50%; transform: translateX(-50%); }
.site-footer__legal { line-height: 1.55; }
.site-footer__base ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 26px; }
.site-footer__base a { color: inherit; transition: color 160ms ease; }

/* Build credit, right-hand end of the legal row. */
.site-footer__credit {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.40);
  text-decoration: none; white-space: nowrap;
}
.site-footer__credit svg { flex: 0 0 auto; }


/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1100px) {
  .hero { min-height: 680px; }
  .hero__inner { padding: 170px 0 190px; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .feature__media img { height: 360px; }
  .quotes { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 44px; }
}

@media (max-width: 820px) {
  .nav, .nav__sep { display: none; }
  .nav-toggle { display: flex; }
  .logo-tile { width: 64px; height: 64px; flex-basis: 64px; }
  .logo-tile__art { width: 54px; }
  .site-header__bar { min-height: 76px; }

  .hero { min-height: 700px; }
  .hero__inner { padding: 150px 0 200px; }
  .hero__rule { width: 26px; }

  .search { grid-template-columns: minmax(0, 1fr) 58px; min-height: 0; }
  .search__field { border-right: 0; border-bottom: 1px solid var(--rule); padding: 14px 20px; }
  .search__field:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
  .search__submit { grid-row: 1 / -1; grid-column: 2; }

  .split { flex-direction: column-reverse; min-height: 0; }
  .split__copy, .split__media { width: 100%; }
  .split__media { height: 250px; }
  .split__inner { padding: 56px var(--gutter) 64px; max-width: none; }

  .compare { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .compare img { height: 230px; }

  .crosslink { flex-direction: column; align-items: flex-start; gap: 24px; }

  .site-footer__cols { grid-template-columns: 1fr; gap: 40px; }
  .site-footer__base { flex-direction: column; align-items: flex-start; gap: 14px; }
  .site-footer__base ul { position: static; transform: none; gap: 22px; }
}

/* ==========================================================================
   Swipe carousel on narrow screens
   Above the breakpoint it stays an ordinary grid; below it becomes a rail that
   snaps per card. Swiping works without JS, the arrows are extra.
   ========================================================================== */

.rail-nav { display: none; }
.rail-nav__arrows { display: flex; gap: 10px; }
.rail-nav__btn {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: 0; border: 1px solid var(--iron); color: var(--iron); cursor: pointer;
}
.rail-nav__btn[disabled] { border-color: #D6CCBC; color: #BDB2A2; cursor: default; }

@media (max-width: 820px) {
  .rail {
    display: flex;
    gap: 24px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1);
    padding: 0 var(--gutter);
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * {
    flex: 0 0 calc(100vw - var(--gutter) * 2);
    scroll-snap-align: start;
  }
  .rail-nav {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; margin-top: 32px;
  }
  /* the "view all" moves to the line with the arrows */
  .section-head .cta { display: none; }
}

/* ---------- utility bar on narrow screens -------------------------------- */

@media (max-width: 820px) {
  .site-header__util { min-height: 42px; }
  .site-header__util .wrap > .eyebrow { display: none; }
  .switches { flex: 1; justify-content: space-between; gap: 12px; }
  .switch__label, .switch__sep { display: none; }
  .switch { gap: 10px; }
}

/* ==========================================================================
   Corrections on narrow screens, to match the design
   ========================================================================== */

@media (max-width: 820px) {
  /* Without scroll-padding the snap discards the rail's left margin and the
     first card starts at 0 instead of at the gutter width. */
  .rail { scroll-padding-left: var(--gutter); scroll-padding-right: var(--gutter); }

  .banner { min-height: 300px; }
  .banner__body { padding: 30px 28px; }
  .banner__body p { display: none; }

  .feature { gap: 26px; }
  .feature__media img { height: 280px; }

  /* the quotes become one at a time, like the other carousels */
  .quotes {
    display: flex; gap: 24px;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scroll-padding-left: var(--gutter); scroll-padding-right: var(--gutter);
    scrollbar-width: none;
    margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
  }
  .quotes::-webkit-scrollbar { display: none; }
  .quote { flex: 0 0 calc(100vw - var(--gutter) * 2); scroll-snap-align: start; }

  .site-footer__cols { grid-template-columns: 1fr 1fr; gap: 36px 24px; }
  .site-footer__brand { grid-column: 1 / -1; }
}

/* ---------- hero on narrow screens --------------------------------------- */

@media (max-width: 820px) {
  /* smaller heading, or it runs to four lines and collides with the controls */
  .h-display { font-size: clamp(32px, 8.8vw, 40px); }

  .hero__inner { padding: 126px 0 236px; }
  .hero__copy  { gap: 22px; }
  .hero__lede  { font-size: 14px; line-height: 1.8; }

  .hero__foot { bottom: 26px; }
  .hero__controls { min-height: 0; padding-left: 0; margin-bottom: 18px; }
  .tabs { display: none; }               /* the choice sits in the search field itself */
  .sound { padding-bottom: 0; }

  /* one line: search field plus button, as in the design */
  .search { grid-template-columns: minmax(0, 1fr) 58px; min-height: 58px; }
  .search__field { padding: 9px 20px; border-right: 0; border-bottom: 0; }
  .search__field ~ .search__field { display: none; }
  .search__value { font-size: 14px; }
  .search__submit { grid-row: 1; grid-column: 2; }
}

/* ==========================================================================
   Binnenpagina's: overzicht en detail
   ========================================================================== */

.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 300; letter-spacing: 0.04em; color: var(--muted);
}
.breadcrumb a { color: inherit; }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb span[aria-current] { color: var(--iron); }
.breadcrumb .sep { color: #C9C0B2; }

.crumb-bar {
  background: var(--ecru); border-bottom: 1px solid var(--rule);
  min-height: 58px; display: flex; align-items: center;
}
.crumb-bar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.crumb-actions { display: flex; align-items: center; gap: 26px; }
.crumb-action { display: flex; align-items: center; gap: 9px; color: var(--iron); }

.page-head { background: var(--ecru); padding: 72px 0 46px; }
.page-head .wrap { display: flex; flex-direction: column; gap: 20px; }
.page-head p { max-width: 620px; }

/* ---------- filterbalk en resultaten ------------------------------------- */

.search--filters { grid-template-columns: 2fr 1fr 1fr 1fr 92px; }

.results-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
  padding-bottom: 30px; border-bottom: 1px solid var(--rule-ecru);
}
.results-tools { display: flex; align-items: center; gap: 34px; flex-wrap: wrap; }
.results-sort  { display: flex; align-items: center; gap: 11px; color: var(--iron); }
.results-view  { display: flex; align-items: center; gap: 18px; }
.results-view a { color: var(--muted-soft); }
.results-view a.is-active { color: var(--iron); border-bottom: 1px solid var(--red); padding-bottom: 3px; }

.pagination { display: flex; align-items: center; justify-content: center; gap: 30px; margin-top: 62px; }
.pagination a { color: var(--muted-soft); font-size: 12px; letter-spacing: 0.2em; }
.pagination a.is-active { color: var(--iron); border-bottom: 1px solid var(--red); padding-bottom: 5px; }
.pagination .gap { width: 30px; height: 1px; background: #D6CCBC; }

.listings-map { margin-top: 36px; }
.pagination__gap { color: var(--muted-soft); letter-spacing: 0.1em; }
.listings-map .legend { justify-content: flex-end; padding-bottom: 16px; }

/* Grid and Map are buttons, not links; they switch without reloading. */
.results-view { display: flex; align-items: center; gap: 18px; }
.results-view button {
  background: none; border: 0; padding: 0 0 3px; cursor: pointer;
  font-family: var(--sans); color: var(--muted-soft);
  position: relative; transition: color 200ms ease;
}
.results-view button:hover { color: var(--iron); }
.results-view button.is-active { color: var(--iron); }
.results-view button.is-active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--red);
}

.legend { display: flex; gap: 30px; flex-wrap: wrap; }
.legend__item { display: flex; align-items: center; gap: 9px; }
.legend__dot { width: 9px; height: 9px; display: block; }
.legend__icon { display: flex; }

.map { position: relative; overflow: hidden; background: var(--ecru); }
.map--wide { height: 470px; }
/* The map in the map view fills the screen bar a line or so, so you see the
   island in one go without losing the page. */
.map--view { height: clamp(460px, calc(100vh - 230px), 760px); }
.map--tall { height: 420px; }
.map__label {
  position: absolute; left: 20px; bottom: 20px;
  background: var(--canvas); color: var(--iron); padding: 10px 14px;
}

/* ---------- detailpagina ------------------------------------------------- */

.listing-title { background: var(--canvas); padding: 50px 0 38px; }
.listing-title .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; flex-wrap: wrap; }
.listing-title__name { display: flex; flex-direction: column; gap: 14px; }
.listing-title__price { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.listing-title__price b {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(24px, 2.3vw, 32px); line-height: 1;
}

/* Mind the >: only the second line, not the spans inside the b. Those are
   there for the currency switch, and without this boundary they pulled the main
   price back to 13 pixels. */
.listing-title__price > span {
  font-size: 17.5px; font-weight: 300; letter-spacing: 0.03em;
  color: var(--muted); line-height: 1.2;
}

.gallery__main { position: relative; overflow: hidden; background: var(--rule-ecru); }
.gallery__main img { width: 100%; height: 640px; object-fit: cover; }

/* Portrait photos shown whole, on the sand of the house style. Cropping would
   leave only the middle of a tall photo. */
.gallery__main.is-portrait { background: var(--ecru); }
.gallery__main.is-portrait img { object-fit: contain; }
.gallery__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: rgba(0, 0, 0, 0.38); color: #FFFFFF; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.gallery__nav--prev { left: 28px; }
.gallery__nav--next { right: 28px; }
.gallery__count, .gallery__flag {
  position: absolute; bottom: 26px; color: #FFFFFF;
  background: rgba(0, 0, 0, 0.42); padding: 9px 15px;
}
.gallery__count { right: 28px; }
.gallery__flag  { left: 28px; }

/* A pointer to the staging block further down. Top right, clear of the New
   listing flag at bottom left, so they never get in each other's way. */
.gallery__staging {
  position: absolute; top: 26px; right: 28px; z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 15px; color: #FFFFFF;
  background: rgba(0, 0, 0, 0.42);
  transition: background 240ms ease, color 240ms ease;
}
.gallery__staging:hover { background: var(--red); color: #FFFFFF; }

/* The header stays stuck at the top, so the block has to land just below it
   rather than disappear behind it. */
#virtual-staging { scroll-margin-top: 168px; }

/* An anchor link jumped hard downwards; with sixty photos in between you lose
   any sense of where you land. Now it glides there, and the margin keeps the
   target below the fixed header instead of behind it. Anyone who has switched
   motion off in their system simply gets the jump. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

#inquiry, #map { scroll-margin-top: 168px; }
.gallery__thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.gallery__thumbs button { padding: 0; border: 0; background: 0; cursor: pointer; position: relative; overflow: hidden; }
.gallery__thumbs img { width: 100%; height: 140px; object-fit: cover; opacity: 0.74; }
.gallery__thumbs .is-active img { opacity: 1; }
.gallery__thumbs .is-active { border-bottom: 2px solid var(--red); }
.gallery__more {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.52);
  display: flex; align-items: center; justify-content: center; color: #FFFFFF;
}

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 376px; gap: 80px; align-items: start; }
.detail__main { display: flex; flex-direction: column; gap: 46px; }
.detail__aside { display: flex; flex-direction: column; gap: 24px; }

/* The order in the side column is separate from the order in the markup: agent
   at the top, because that is what the page works towards, then video and map.
   On mobile a different order applies, further down this file. */
.detail__aside [data-block="agent"]    { order: 1; }
.detail__aside [data-block="media"]    { order: 2; }
.detail__aside [data-block="map"]      { order: 3; }
.detail__aside [data-block="brochure"] { order: 4; }

.specs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.specs div { display: flex; flex-direction: column; gap: 9px; padding: 26px 0; }
.specs b { font-size: 20px; font-weight: 300; color: var(--iron); }

.prose { display: flex; flex-direction: column; gap: 22px; }

/* The headings inside a description are set in italic. They come out of an
   editor and carry no weight of their own, so the slant is what tells a reader
   that a new part starts. The serif is the same as elsewhere; only the angle
   differs, which keeps it quiet. */
.prose h3, .prose h4 { font-style: italic; }

/* A heading from the editor has no size of its own, so it falls back to what
   the browser hands out, and that ladder is uneven at the bottom: an h4 came
   out exactly as large as the paragraph under it, and lifting it left it within
   a third of a pixel of an h3. Both sizes stay relative, so they still shrink
   on a narrow screen. */
.prose h3 { font-size: 1.3em; }
.prose h4 { font-size: 1.15em; }

/* The column puts the same 22px between every child, so a heading sat as close
   to the paragraph above it as two paragraphs sit to each other and stopped
   reading as a break. This adds to that gap rather than replacing it; a heading
   that opens the text needs nothing. */
.prose h4 { margin-top: 16px; }
.prose h4:first-child { margin-top: 0; }

.media-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
/* Warm beige instead of near black: a black panel beside the ecru card and the
   ecru agent card pulled all the attention to itself, while this is a pointer
   and not the centre of gravity of the page. */
.media-tile {
  position: relative; min-height: 210px;
  background: var(--ecru); color: var(--iron);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
  transition: background 260ms ease;
}
.media-tile--tour { background: var(--ecru-shade); }
.media-tile:hover { background: var(--ecru-shade); }
.media-tile--tour:hover { background: var(--rule-ecru); }

.media-tile__play {
  width: 54px; height: 54px; border-radius: 50%;
  border: 1px solid var(--rule-ecru); background: var(--canvas); color: var(--red);
  display: flex; align-items: center; justify-content: center;
  transition: background 260ms ease, color 260ms ease, transform 300ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
.media-tile:hover .media-tile__play {
  background: var(--red); color: #FFFFFF; transform: scale(1.06);
}

.share-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
  padding: 28px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.share-bar__links { display: flex; align-items: center; gap: 20px; color: var(--iron); }

.agent { background: var(--ecru); padding: 30px; }
.agent__head { display: flex; gap: 18px; align-items: center; }
.agent__photo {
  position: relative; width: 84px; height: 84px; flex: 0 0 84px; overflow: hidden;
  background: var(--rule-ecru); display: flex; align-items: center; justify-content: center;
}
.agent__photo .mark { width: 52px; color: var(--iron); opacity: 0.16; }
.agent__photo .mark svg { width: 100%; height: auto; }
.agent__name { display: flex; flex-direction: column; gap: 7px; }
.agent__name b { font-family: var(--serif); font-weight: 400; font-size: 23px; line-height: 1.2; }
.agent__langs { font-size: 13px; font-weight: 300; letter-spacing: 0.04em; color: var(--muted); }
.agent__contact {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule-ecru);
  font-size: 15px; font-weight: 300; color: var(--ink-soft);
}
.agent .btn { width: 100%; margin-top: 24px; }
/* Een vierkant vak uit een staand portret pakt standaard het midden, en dat is
   de borst: op de detailpagina stond iedereen onthoofd. Het beeld komt nu als
   staande uitsnede binnen en wordt hier naar boven uitgelijnd, zodat het gezicht
   in het vakje valt. */
.agent__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* Het beeldmerk is geen portret: dat moet heel in het vak passen en niet
   bijgesneden worden, anders loopt het woordmerk de rand uit. Het bestand draagt
   zijn eigen rode vlak, dus de achtergrond eronder is alleen de naad. */
.agent-card__photo.is-brand img,
.agent__photo.is-brand img { object-fit: contain; object-position: center; }

/* An agent without a portrait gets the mark in white on Agency red, like the
   tile in the header. That reads as the office rather than as a missing photo,
   which is also true: "Team Aruba" is not a person. */
.agent-card__photo.is-brand,
.agent-profile__photo.is-brand,
.agent__photo.is-brand { background: var(--red); }

.agent-card__photo.is-brand .mark,
.agent-profile__photo.is-brand .mark,
.agent__photo.is-brand .mark { color: #FFFFFF; opacity: 1; }

/* Several agents on one listing: the visitor chooses who to approach. --------
   Without hover (touch screens) everything is simply open; the hover and focus
   rules below only apply where there really is a mouse. */

.agents { display: flex; flex-direction: column; gap: 2px; }
.agents__head { display: flex; flex-direction: column; gap: 7px; padding-bottom: 15px; }
.agents__hint { font-size: 14px; font-weight: 300; color: var(--muted); }

/* Het portret in de keuzelijst was 64 en daarmee te klein om een gezicht aan
   te herkennen. Hij staat nu op dezelfde 84 als het blok eronder, en de ruimte
   daarvoor komt uit de marge boven en onder: de regel blijft even hoog, dus de
   zijkolom verschuift niet. */
.agent--pick { position: relative; padding: 12px 30px 12px 14px; }
.agent--pick .agent__name b { font-size: 20px; transition: color 240ms ease; }
.agent__more { overflow: hidden; }

@media (hover: hover) {
  .agent--pick { cursor: pointer; }
  .agent--pick::before {
    content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
    background: var(--red); transform: scaleY(0); transform-origin: top;
    transition: transform 360ms cubic-bezier(0.22, 0.7, 0.3, 1);
  }
  .agent--pick .agent__more {
    max-height: 0; opacity: 0;
    transition: max-height 400ms cubic-bezier(0.22, 0.7, 0.3, 1), opacity 260ms ease;
  }
  .agent--pick:hover::before,
  .agent--pick:focus-within::before { transform: scaleY(1); }
  .agent--pick:hover .agent__more,
  .agent--pick:focus-within .agent__more { max-height: 280px; opacity: 1; }
  .agent--pick:hover .agent__name b,
  .agent--pick:focus-within .agent__name b { color: var(--red); }
}

/* Features on the detail page: three columns with a heading per group, and a
   thin red rule before every line instead of a bullet. */
.features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 40px; }
.features__group { display: flex; flex-direction: column; gap: 14px; }
.features__group ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.features__group li {
  position: relative; padding-left: 22px;
  font-size: 15px; font-weight: 300; line-height: 1.6; color: var(--ink-soft);
}
.features__group li::before {
  content: ''; position: absolute; left: 0; top: 11px;
  width: 12px; height: 1px; background: var(--red);
}

@media (max-width: 760px) {
  .features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; }
}

/* Select fields in the filter and the sort bar: the same typography as the
   rest, without the operating system's own styling. */
.search__select, .results-sort__select {
  -webkit-appearance: none; appearance: none;
  background: transparent; border: 0; padding: 0; margin: 0;
  width: 100%; cursor: pointer;
  font-family: var(--sans); font-size: 16px; font-weight: 300;
  color: var(--ink); line-height: 1.5;
}
.search__select:focus, .results-sort__select:focus { outline: none; color: var(--red); }
.search__field { position: relative; }

/* The chevron already there belongs to the field, not to the select. */
.search__field::after {
  content: ''; position: absolute; right: 22px; bottom: 20px;
  width: 7px; height: 7px; border-right: 1px solid var(--muted); border-bottom: 1px solid var(--muted);
  transform: rotate(45deg); pointer-events: none;
}
.search__field:first-child::after { display: none; }

.results-sort { display: flex; align-items: center; gap: 12px; }
.results-sort__select {
  width: auto; text-transform: uppercase; letter-spacing: 0.08em;
  font-size: 12.5px; color: var(--iron);
}
.results-sort__select:hover { color: var(--red); }

/* The panel beside the map. Fixed in the top left corner and only changing
   content; a balloon that jumps on every click and covers the map underneath
   reads far more restlessly. */
/* left and top are set by the script, beside the pin it is about; the values
   here are only where it sits before that happens. */
.map-card {
  position: absolute; left: 24px; top: 24px; z-index: 1000;
  width: 310px; max-width: calc(100% - 48px);
  background: var(--canvas);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.16);
  opacity: 0; transform: translateY(10px);
  transition: opacity 240ms ease, transform 320ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
.map-card.is-open { opacity: 1; transform: none; }

.map-card__close {
  position: absolute; right: 10px; top: 10px; z-index: 2;
  width: 30px; height: 30px; border: 0; padding: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.9); color: var(--iron);
  display: flex; align-items: center; justify-content: center;
  transition: background 200ms ease, color 200ms ease;
}
.map-card__close:hover { background: var(--red); color: #FFFFFF; }

.map-card__media { display: block; position: relative; overflow: hidden; background: var(--rule-ecru); }
.map-card__media img { display: block; width: 100%; height: 178px; object-fit: cover; }
.map-card__media--silent img { filter: blur(11px) saturate(0.85); transform: scale(1.18); }

.map-card__body { display: flex; flex-direction: column; gap: 9px; padding: 20px 22px 22px; }
.map-card__name {
  font-family: var(--serif); font-weight: 400; font-size: 21px; line-height: 1.25;
  color: var(--iron); transition: color 200ms ease;
}
.map-card__name:hover { color: var(--red); }
.map-card__price { font-size: 15px; font-weight: 300; color: var(--ink-soft); }
.map-card__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  font-size: 13.5px; font-weight: 300; color: var(--muted);
  padding-top: 11px; border-top: 1px solid var(--rule);
}
.map-card__meta i { width: 3px; height: 3px; background: var(--muted-soft); border-radius: 50%; }
.map-card__go {
  margin-top: 6px; align-self: flex-start;
  font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red); position: relative; padding-bottom: 3px;
}
.map-card__go::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform 320ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
.map-card__go:hover::after { transform: scaleX(1); }

/* On a narrow screen there is no room beside the map; then at the bottom
   across the full width, where a thumb can also dismiss it. */
@media (max-width: 760px) {
  .map-card {
    left: 12px; right: 12px; top: auto; bottom: 12px;
    width: auto; max-width: none;
    display: flex; align-items: stretch;
  }
  .map-card__media { flex: 0 0 116px; }
  .map-card__media img { height: 100%; min-height: 116px; }
  .map-card__body { padding: 14px 16px; gap: 6px; }
  .map-card__name { font-size: 18px; }
  .map-card__meta { display: none; }
}

/* Enlarged photo. The same setup as the map lightbox: a fixed screen, arrows
   on either side and the counter at the bottom. */
.photo-lightbox {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center; gap: 18px;
  padding: 40px 72px;
  background: rgba(0, 0, 0, 0.88);
  opacity: 0; transition: opacity 240ms ease;
}
.photo-lightbox.is-open { opacity: 1; }
.photo-lightbox__frame { margin: 0; max-width: 100%; max-height: 100%; display: flex; }
.photo-lightbox__frame img {
  max-width: 100%; max-height: calc(100vh - 110px);
  width: auto; height: auto; object-fit: contain;
}
.photo-lightbox__frame img.is-obscured { filter: blur(22px) saturate(0.85); transform: scale(1.1); }

.photo-lightbox__nav, .photo-lightbox__close {
  flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.1); color: #FFFFFF;
  display: flex; align-items: center; justify-content: center;
  transition: background 220ms ease, color 220ms ease;
}
.photo-lightbox__nav:hover { background: var(--red); }
.photo-lightbox__close { position: absolute; right: 24px; top: 24px; }
.photo-lightbox__close:hover { background: var(--red); }
.photo-lightbox__close svg { transition: transform 360ms cubic-bezier(0.22, 0.7, 0.3, 1); }
.photo-lightbox__close:hover svg { transform: rotate(180deg); }

/* Bottom bar with the counter and the button for the strip. */
.photo-lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: 20px;
  display: flex; align-items: center; justify-content: center; gap: 26px;
  pointer-events: none;
}
.photo-lightbox__bar > * { pointer-events: auto; }
.photo-lightbox__count { color: rgba(255, 255, 255, 0.72); }

.photo-lightbox__toggle {
  display: inline-flex; align-items: center; gap: 9px;
  background: none; border: 0; padding: 4px 2px; cursor: pointer;
  color: rgba(255, 255, 255, 0.6);
  transition: color 200ms ease;
}
.photo-lightbox__toggle:hover { color: #FFFFFF; }

/* The strip itself. When it is on, the bottom bar moves up with it and the
   photo gets less height, so nothing overlaps. */
.photo-lightbox__thumbs {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 8px; padding: 14px 20px 18px;
  overflow-x: auto; overflow-y: hidden;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.5) 55%);
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity 240ms ease, transform 300ms cubic-bezier(0.22, 0.7, 0.3, 1),
              visibility 0s linear 300ms;
}
.photo-lightbox__thumbs::-webkit-scrollbar { height: 6px; }
.photo-lightbox__thumbs::-webkit-scrollbar-thumb { background: rgba(255,255,255,.28); }

.photo-lightbox.has-thumbs .photo-lightbox__thumbs {
  opacity: 1; visibility: visible; transform: none; transition-delay: 0s;
}
.photo-lightbox.has-thumbs .photo-lightbox__bar { bottom: 112px; }
.photo-lightbox.has-thumbs .photo-lightbox__frame img { max-height: calc(100vh - 230px); }

.photo-lightbox__thumbs button {
  flex: 0 0 auto; width: 104px; height: 70px; padding: 0; border: 0; cursor: pointer;
  background: none; overflow: hidden; position: relative;
  opacity: 0.5; transition: opacity 220ms ease;
}
.photo-lightbox__thumbs button:hover { opacity: 0.85; }
.photo-lightbox__thumbs button.is-active { opacity: 1; }
.photo-lightbox__thumbs button.is-active::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--red);
}
.photo-lightbox__thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-lightbox__thumbs img.is-obscured { filter: blur(6px) saturate(0.85); transform: scale(1.15); }

/* The main photo and the thumbnails are clickable; that may show. */
.gallery__main img, .gallery__thumbs button { cursor: pointer; }

@media (max-width: 760px) {
  .photo-lightbox { padding: 16px; gap: 8px; }
  .photo-lightbox__nav { position: absolute; bottom: 20px; }
  .photo-lightbox__nav--prev { left: 20px; }
  .photo-lightbox__nav--next { right: 20px; }
  .photo-lightbox__frame img { max-height: calc(100vh - 150px); }
  .photo-lightbox__thumbs button { width: 74px; height: 52px; }
  .photo-lightbox.has-thumbs .photo-lightbox__bar { bottom: 94px; }
  .photo-lightbox.has-thumbs .photo-lightbox__frame img { max-height: calc(100vh - 230px); }
  .photo-lightbox__toggle span { display: none; }
}

/* In the side column they sit underneath each other across the full width of
   that column, and a little lower than in the main column; there is less room. */
.media-tiles--aside { display: flex; flex-direction: column; gap: 12px; }
.media-tiles--aside .media-tile { width: 100%; height: 132px; }

/* Share menu in the breadcrumb bar. Unfolds under the button, closes on a
   click beside it or with Escape. */
.share { position: relative; display: inline-flex; }
.share .crumb-action { background: none; border: 0; padding: 0; cursor: pointer; font: inherit; }

.share__panel {
  position: absolute; top: calc(100% + 14px); right: 0; z-index: 70;
  min-width: 192px; padding: 7px 0;
  background: var(--canvas); border: 1px solid var(--rule);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.1);
  display: flex; flex-direction: column;
  opacity: 0; transform: translateY(-6px);
  transition: opacity 180ms ease, transform 240ms cubic-bezier(0.22, 0.7, 0.3, 1);
}
.share.is-open .share__panel { opacity: 1; transform: none; }

.share__panel a, .share__panel button {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; width: 100%;
  background: none; border: 0; cursor: pointer; text-align: left;
  color: var(--ink-soft); transition: color 180ms ease, background 180ms ease;
}
.share__panel a:hover, .share__panel button:hover { color: var(--red); background: var(--ecru); }

/* Brochure under the agent card: quiet, but recognisably clickable. */
.brochure {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 16px; color: var(--ink-soft);
  border: 1px solid var(--rule);
  transition: color 200ms ease, border-color 200ms ease;
}
.brochure:hover { color: var(--red); border-color: var(--red); }

/* On a phone the button is the only action that counts; it may then have the
   full width instead of filling a third on the left. The line with the asterisk
   moves underneath, centred. */
@media (max-width: 760px) {
  .form__submit { flex-direction: column; align-items: stretch; gap: 16px; }
  .form__submit .btn { width: 100%; }
  .form__submit > span { text-align: center; }
}

/* Sixth thumbnail and the features on a phone. */
.gallery__thumb--sixth, .gallery__more--six { display: none; }

@media (max-width: 760px) {
  /* Three by two fills the width neatly; five in a row becomes a strip of
     postage stamps on a phone. */
  .gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gallery__thumbs img { height: 92px; }
  .gallery__thumb--sixth { display: block; }
  .gallery__more--six { display: flex; }
  .gallery__more--five { display: none; }

  /* The number of columns follows the number of features. Measured on a 375
     screen: there are 327 pixels to divide, three columns then come to 109 wide
     and the longest label (BATHROOMS) is 85. With four features a column
     becomes 81 wide and that label falls off; those go two by two.

     No dividers between the columns: only the line above and below the whole
     block, which was already there. */
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .specs:has(> div:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .specs div { padding: 15px 0; gap: 5px; }
  .specs b { font-size: 18px; }
}

/* An article in the Journal: a narrower text column than the rest of the site,
   because long running text reads badly across the full width. */
/* The photo on an article may be large: it is often the only image in the
   piece. Taller than the band elsewhere on the site, and it grows with the
   screen. */
.article-hero { overflow: hidden; background: var(--rule-ecru); }
.article-hero img {
  display: block; width: 100%;
  height: clamp(320px, 44vw, 620px);
  object-fit: cover;
}

.article { display: flex; flex-direction: column; gap: 30px; max-width: 760px; }
.article__lede { font-size: clamp(20px, 1.9vw, 25px); line-height: 1.6; }
.article__body { font-size: 17px; line-height: 1.85; color: var(--ink-soft); }
.article__body h2, .article__body h3 {
  font-family: var(--serif); font-weight: 400; color: var(--iron);
  margin-top: 16px; font-size: 26px; line-height: 1.3;
}
.article__body h3 { font-size: 21px; }
.article__body ul, .article__body ol { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.article__body a { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.article__body img { max-width: 100%; height: auto; }
.article__body blockquote {
  margin: 10px 0; padding-left: 24px; border-left: 2px solid var(--red);
  font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--iron);
}

/* File field with a button of its own. The real field lies over it but is
   invisible, so clicking and tabbing both keep working. */
.upload { position: relative; display: flex; flex-direction: column; gap: 10px; }
.upload__input {
  position: absolute; inset: 0; width: 100%; height: 56px;
  opacity: 0; cursor: pointer; z-index: 2;
}
.upload__face {
  display: inline-flex; align-items: center; gap: 12px;
  align-self: flex-start; min-height: 56px; padding: 0 26px;
  border: 1px solid var(--rule); color: var(--ink-soft);
  transition: color 200ms ease, border-color 200ms ease, background 200ms ease;
}
.upload__input:focus-visible + .upload__face,
.upload:hover .upload__face { color: var(--red); border-color: var(--red); }
.upload.has-file .upload__face { color: var(--iron); border-color: var(--iron); }
.upload__hint { font-size: 13px; font-weight: 300; color: var(--muted-soft); }

/* An overview with no results. Not an empty space, but an explanation plus the
   action that does make sense. */
.empty-state {
  margin-top: 44px; padding: 64px 40px;
  background: var(--ecru); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.empty-state__mark { width: 62px; color: var(--iron); opacity: 0.12; }
.empty-state__mark svg { width: 100%; height: auto; }
.empty-state .lede { max-width: 520px; }
.empty-state .btn { margin-top: 10px; }

/* A footnote under the text of a silent listing: what is not there, and how to
   get it. */
.silent-note {
  margin-top: 22px; padding: 14px 18px;
  border-left: 2px solid var(--red);
  background: var(--ecru);
  font-size: 14px; line-height: 1.6; color: var(--muted);
}

/* The single image on a silent listing. Kept small: it says what you are
   looking at without giving anything away. */
.silent-cover { position: relative; overflow: hidden; background: var(--rule-ecru); }
.silent-cover img { display: block; width: 100%; height: var(--cover-h, 300px); object-fit: cover; }
.silent-cover img.is-obscured { filter: blur(14px) saturate(0.85); transform: scale(1.18); }
.silent-cover__lock {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #FFFFFF; background: rgba(0, 0, 0, 0.26);
}

/* Header image of a page from the backend. */
.page-hero { position: relative; min-height: 380px; display: flex; align-items: flex-end; overflow: hidden; }
.page-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.page-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.12) 0%, rgba(0,0,0,.62) 100%); }
.page-hero__copy { position: relative; padding: 0 0 46px; color: #FFFFFF; }
.page-hero__copy .h-display { color: #FFFFFF; font-size: clamp(38px, 4.2vw, 58px); margin: 10px 0 0; }
.page-hero__copy .lede { max-width: 60ch; margin-top: 14px; }

@media (max-width: 760px) {
  .page-hero { min-height: 280px; }
  .page-hero__copy { padding-bottom: 32px; }
}

/* Image on the right instead of the left, for a row from the backend. */
.feature--flip .feature__media { order: 2; }
.feature--flip .feature__body { order: 1; }

/* Rows inside an existing column, such as under an article: no sections of
   their own, because those would break out of the column. */
.blocks__inline + .blocks__inline { margin-top: 34px; }
.blocks__inline { margin-top: 34px; }

/* ---------- content rows from the backend ----------------------------- */

/* One, two or three columns. On a narrow screen they stack in the order they
   were filled in, so text first and image after. */
.blocks__row { display: grid; gap: 38px; align-items: start; }

/* Every row is its own section, so it can have its own background. Two rows on
   the same colour therefore get twice the section spacing between them, which is
   too much; we bring that down. When the colour does change the band keeps its
   full air, because there it belongs. */
.blocks__band--plain + .blocks__band--plain,
.blocks__band--ecru  + .blocks__band--ecru,
.blocks__band--shade + .blocks__band--shade { padding-top: calc(var(--section) * 0.34); }
.blocks__row--1 { grid-template-columns: minmax(0, 1fr); }

/* Reading width, as a choice on a single-column row: a line of well over a
   hundred characters makes you hunt for the start of every new one. */
.blocks__row--narrow .blocks__text { max-width: 68ch; }
.blocks__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blocks__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }


/* .prose is a flex column with a gap of its own of 22px. Here that came on top
   of the margins of the paragraphs and headings themselves, giving everything
   air twice over. Inside a block the margins steer it, and nothing else. */
.blocks__text { display: block; }

.blocks__text p { margin: 0 0 16px; font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.blocks__text p:empty { display: none; }
.blocks__text p:last-child { margin-bottom: 0; }
/* The editor also offers Heading 1. It gets the same size as a heading within
   the text: the page's real H1 already sits in the header above, and two of that
   size underneath each other reads like a mistake. */
.blocks__text h1,
.blocks__text h2 { font-family: var(--serif, Georgia, serif); font-size: 28px; line-height: 1.2; margin: 0 0 14px; }
.blocks__text h3 { font-size: 19px; margin: 0 0 8px; }
.blocks__text h4 { font-size: 17px; margin: 0 0 8px; }
.blocks__text h5, .blocks__text h6 { font-size: 16px; margin: 0 0 8px; }
.blocks__text h1:not(:first-child), .blocks__text h2:not(:first-child),
.blocks__text h3:not(:first-child), .blocks__text h4:not(:first-child),
.blocks__text h5:not(:first-child), .blocks__text h6:not(:first-child) { margin-top: 28px; }
.blocks__text ul, .blocks__text ol { margin: 0 0 16px; padding-left: 20px; }
.blocks__text li { margin-bottom: 4px; line-height: 1.7; color: var(--ink-soft); }
.blocks__text li > p { margin: 0; }
.blocks__text li > ul, .blocks__text li > ol { margin: 4px 0 0; }
.blocks__text a { color: var(--red); }
.blocks__text blockquote {
  margin: 0 0 18px; padding: 2px 0 2px 20px;
  border-left: 2px solid var(--red);
  font-family: var(--serif, Georgia, serif); font-size: 20px; line-height: 1.5;
}

.blocks__figure { margin: 0; }
.blocks__figure img { display: block; width: 100%; height: auto; }
.blocks__figure figcaption { display: block; margin-top: 10px; }

@media (max-width: 900px) {
  .blocks__row--2, .blocks__row--3 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .blocks__row { margin-bottom: 42px; }
}

/* Running text on the legal pages. A line of eighty characters still reads
   comfortably; the full width of the grid no longer does. */
.prose--narrow { max-width: 68ch; }
.prose--narrow h2 { margin-top: 42px; }
.prose--narrow h2:first-of-type { margin-top: 0; }
.prose--narrow p, .prose--narrow li { font-size: 16px; line-height: 1.75; color: var(--ink-soft); }
.prose--narrow ul { margin: 0 0 18px; padding-left: 20px; }
.prose--narrow li { margin-bottom: 8px; }
.prose--narrow a { color: var(--red); }

.ps-updated { display: block; margin-bottom: 38px; }

/* Radio buttons in a form. */
.field__choices { display: flex; flex-direction: column; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 300; color: var(--ink-soft); cursor: pointer; }
.choice input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--red); }

@media (min-width: 761px) {
  .field__choices { flex-direction: row; gap: 28px; flex-wrap: wrap; }
}

/* The place name under a listing's title. It was 12px and disappeared against
   the name above it. */
.listing-title__name .eyebrow--red { font-size: 14px; letter-spacing: 0.26em; }

/* Status on a listing card. Sold does not belong in the red of a new
   offering. */
.card__flag--sold,
.card__flag--rented,
.card__flag--under-contract { background: var(--ink); color: #FFFFFF; }
.card__flag--sale-in-progress { background: var(--ink-soft); color: #FFFFFF; }

/* ---------- accounts en favorieten ------------------------------------ */

.account-pane { max-width: 620px; }
.account-pane__switch { margin-top: 26px; font-size: 15px; color: var(--muted); }
.account-pane__switch a { color: var(--red); }
.account-signout { margin-top: 22px; }
.account-signout button { background: 0; border: 0; padding: 0; cursor: pointer; font: inherit; }

/* The heart on a card. Outside the link, because a button within a link is not
   valid html. */
.card-wrap { position: relative; }
.card__fav {
  position: absolute; top: 14px; right: 14px; z-index: 2;
  width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.88); color: var(--ink);
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.card__fav:hover { transform: scale(1.08); }
.card__fav.is-on { background: var(--red); color: #FFFFFF; }
.card__fav.is-on svg { fill: currentColor; }

/* And in the top bar of a listing. */
.crumb-action[data-fav] { background: 0; border: 0; cursor: pointer; font: inherit; }
.crumb-action[data-fav].is-on { color: var(--red); }
.crumb-action[data-fav].is-on svg { fill: currentColor; }

/* The counter next to the heart in the header. */
.has-count { position: relative; }
.has-count .count {
  position: absolute; top: -6px; right: -8px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--red); color: #FFFFFF;
  font-size: 10px; line-height: 16px; text-align: center; font-weight: 700;
}

.saved-searches { list-style: none; margin: 24px 0 0; padding: 0; }
.saved-search {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 18px 0; border-top: 1px solid var(--rule-ecru);
}
.saved-search:last-child { border-bottom: 1px solid var(--rule-ecru); }
/* The section head already has a rule of its own; the first line need not add
   a second one twenty pixels below it. */
.saved-search:first-child { border-top: 0; }
.saved-search__name { display: block; font-family: var(--serif); font-size: 19px; color: var(--ink); }
.saved-search__name:hover { color: var(--red); }
.saved-search__remove button { background: 0; border: 0; padding: 0; cursor: pointer; font: inherit; }

.save-search { display: inline-flex; }
.save-search button { background: 0; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; }
.cta--xs { font-size: 11px; letter-spacing: 1.2px; }

/* Consent tick on the left, the bot check on the right. Stacked, the form would
   grow two lines for two things that only need ticking. */
.form__consent {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  /* The form puts 30px between all fields. That space is meant for fields with a
     label above them; this line is a tick beside a Cloudflare box and does not
     need it. */
  margin: -14px 0 -10px;
}
.form__consent .form__check { margin: 0; }
.form__consent .field--turnstile { margin: 0; flex: 0 0 auto; }

@media (max-width: 760px) {
  /* Stacked they need the ordinary spacing again. */
  .form__consent { display: block; margin: 0; }
  .form__consent .field--turnstile { margin-top: 18px; }
}

/* The Turnstile check under a form. */
.field--turnstile { margin: 4px 0 2px; }
.field--turnstile .error { margin-top: 8px; font-size: 14px; color: #B3261E; }

/* The bait field. Not display:none, because some bots skip fields hidden that
   way; like this it is present and invisible. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* A field that was rejected. */
.field--invalid .field__input { border-color: #B3261E; }
.field--invalid > span { color: #B3261E; }

/* The line under a form: confirmation or error. */
.form__note {
  margin: 18px 0 0; padding: 16px 20px;
  font-size: 15px; line-height: 1.6;
  border-left: 2px solid var(--red);
  background: var(--ecru); color: var(--ink);
}
.form__note.is-error { border-left-color: #B3261E; }

/* ---------- formulier ---------------------------------------------------- */

.form { display: flex; flex-direction: column; gap: 30px; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.field { display: flex; flex-direction: column; gap: 10px; }
.field__input {
  min-height: 34px; border: 0; border-bottom: 1px solid #D6CCBC; background: 0;
  font-family: inherit; font-size: 16px; font-weight: 300; color: var(--iron);
  padding: 0 0 6px;
}
.field__input::placeholder { color: var(--muted-soft); }
.field__input:focus { outline: 0; border-bottom-color: var(--red); }
textarea.field__input { min-height: 96px; resize: vertical; }
.form__check { display: flex; align-items: center; gap: 14px; font-size: 15px; font-weight: 300; color: var(--ink-soft); }
.form__check input { width: 17px; height: 17px; flex: 0 0 17px; accent-color: var(--red); }
.form__submit { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.req { color: var(--red); }

.form-section { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 88px; align-items: start; }
.form-section__intro { display: flex; flex-direction: column; gap: 20px; }

/* ---------- responsive --------------------------------------------------- */

@media (max-width: 1100px) {
  /* On mobile the side column falls under the main one, which put the agent right
     at the bottom: after the description, the features, the staging and the share
     buttons. With display: contents both wrappers disappear and their blocks
     become siblings, so the order can be set independently of the markup. The
     agent comes straight after the features, where somebody who has just read
     about the house goes to ask about it. */
  /* align-items: start sits on the base rule for column alignment in the grid.
     In a flex column that same word means something else: shrink to the
     content. That left everything in a narrow strip. */
  .detail { display: flex; flex-direction: column; align-items: stretch; gap: 36px; }
  .detail__main, .detail__aside { display: contents; }

  /* Everything gets a high value first. Without this rule a block I forget to
     label falls back to order 0, which is before everything instead of after;
     exactly what happened when the brochure was added. */
  .detail__main > *, .detail__aside > * { order: 50; }

  /* The image of a silent listing belongs above the specifications, as on a wide
     screen. Zero is intended here, not a forgotten label. */
  .detail [data-block="cover"]    { order: 0; }
  .silent-cover img { height: 220px; }   /* they are no longer side by side here */
  .detail [data-block="specs"]    { order: 1; }
  .detail [data-block="about"]    { order: 2; }
  .detail [data-block="features"] { order: 3; }
  .detail [data-block="agent"]    { order: 4; }
  .detail [data-block="media"]    { order: 5; }
  .detail [data-block="brochure"] { order: 6; }
  .detail [data-block="staging"]  { order: 7; }
  .detail [data-block="map"]      { order: 8; }
  .form-section { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .gallery__main img { height: 460px; }
  .search--filters { grid-template-columns: 1fr 1fr 92px; }
}

@media (max-width: 820px) {
  .specs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specs div { padding: 20px 0; }
  .gallery__main img { height: 300px; }
  .gallery__nav { width: 40px; height: 40px; }
  .gallery__nav--prev { left: 12px; }
  .gallery__nav--next { right: 12px; }
  .gallery__thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .gallery__thumbs img { height: 84px; }
  .media-tiles { grid-template-columns: minmax(0, 1fr); }
  .form__row { grid-template-columns: minmax(0, 1fr); }
  .search--filters { grid-template-columns: minmax(0, 1fr) 58px; }
  .listing-title .wrap { gap: 22px; }
  .listing-title__price { align-items: flex-start; }
  .map--wide { height: 320px; }
  .pagination { gap: 20px; }
}

/* On narrow screens the full breadcrumb is too long beside Save and Share;
   there a single link back is shown. */
.crumb-back { display: none; align-items: center; gap: 10px; color: var(--iron); }
@media (max-width: 820px) {
  .crumb-bar .breadcrumb { display: none; }
  .crumb-back { display: flex; }
  .crumb-actions { gap: 20px; }
}

/* ==========================================================================
   Leaflet
   ========================================================================== */

.map__canvas { width: 100%; height: 100%; background: var(--ecru); }

.leaflet-container {
  font-family: var(--sans);
  font-weight: 300;
}

/* The default OSM tiles are green and yellow, which clashes with ecru and red.
   This filter pulls the map towards the same sand tone as the rest of the site,
   leaving the red markers to do the work.

   Prefer a neutral grey? Replace the line below with:
   grayscale(1) brightness(1.12) contrast(0.82) */
:root { --map-filter: grayscale(1) sepia(0.24) brightness(1.11) contrast(0.86); }
.leaflet-tile-pane { filter: var(--map-filter); }

/* The surface under and beside the tiles. This is what you see where no tile
   has loaded yet and to the left of the coast; ecru-shade was too heavy there. */
.leaflet-container { background: var(--ecru); }

.leaflet-control-zoom {
  border: 0;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.10);
}
.leaflet-control-zoom a {
  width: 40px; height: 40px; line-height: 38px;
  border-radius: 0;
  border-bottom: 1px solid var(--rule);
  background: var(--canvas); color: var(--iron);
  font-weight: 300; font-size: 18px;
}
/* Leaflet rounds the first and last button, and on a touch device it does so
   through .leaflet-touch, which is more specific than a single class. Hence both
   variants are here. */
.leaflet-control-zoom a:first-child,
.leaflet-control-zoom a:last-child,
.leaflet-touch .leaflet-control-zoom a:first-child,
.leaflet-touch .leaflet-control-zoom a:last-child { border-radius: 0; }
.leaflet-touch .leaflet-control-zoom { border: 0; }
.leaflet-control-zoom a:last-child { border-bottom: 0; }
.leaflet-control-zoom a:hover { background: var(--ecru); color: var(--red); }

/* The credit to OpenStreetMap has to stay under their licence, but it does not
   have to lie across the map as a bar. Folded into a mark in the corner that
   opens on hover or keyboard focus. */
.leaflet-control-attribution {
  display: flex; align-items: center; gap: 0;
  background: rgba(255, 255, 255, 0.72);
  color: var(--muted); letter-spacing: 0.02em;
  font-size: 0;                 /* the text itself; the ⓘ below has a size of its own */
  line-height: 16px; height: 16px;
  padding: 0 4px; border-radius: 2px;
  white-space: nowrap; overflow: hidden;
  transition: font-size 160ms ease, gap 160ms ease, background-color 160ms ease;
}
.leaflet-control-attribution::before {
  content: 'i';
  flex: none;
  width: 11px; height: 11px; border-radius: 50%;
  border: 1px solid currentColor;
  font: italic 600 8px/10px Georgia, serif;
  text-align: center;
}
.leaflet-control-attribution:hover,
.leaflet-control-attribution:focus-within {
  background: rgba(255, 255, 255, 0.92);
  font-size: 10px; gap: 5px;
}
.leaflet-control-attribution a { color: var(--muted); }

.map-pin { background: 0; border: 0; transition: transform 200ms ease; transform-origin: 50% 100%; }
.map-pin:hover { transform: scale(1.18); }

.leaflet-popup-content-wrapper {
  border-radius: 0; box-shadow: 0 10px 34px rgba(0, 0, 0, 0.18); padding: 0;
}
.leaflet-popup-content { margin: 0; }
.leaflet-popup-tip { box-shadow: none; }
.map-popup { display: flex; flex-direction: column; gap: 6px; padding: 18px 22px; color: var(--iron); }
.map-popup__place {
  font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--red);
}
.map-popup__name { font-family: var(--serif); font-weight: 400; font-size: 19px; line-height: 1.25; }
.map-popup__price { font-size: 16px; font-weight: 300; color: var(--ink-soft); }
a.map-popup:hover .map-popup__name { color: var(--red); }

/* Cluster bubbles: Leaflet ships them green and yellow, which clashes with the house style. */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large { background: rgba(237, 33, 39, 0.20); }
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background: var(--red);
  color: #FFFFFF;
  font-family: var(--sans);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.04em;
}
.marker-cluster { transition: transform 200ms ease; }
.marker-cluster:hover { transform: scale(1.1); }

/* ==========================================================================
   Silent Listings
   ========================================================================== */

.breadcrumb--light { color: rgba(255, 255, 255, 0.5); }
.breadcrumb--light a { color: inherit; }
.breadcrumb--light a:hover { color: #FFFFFF; }
.breadcrumb--light span[aria-current] { color: #FFFFFF; }
.breadcrumb--light .sep { color: rgba(255, 255, 255, 0.3); }

.silent-hero { position: relative; background: var(--iron); color: #FFFFFF; padding: 88px 0 92px; overflow: hidden; }
.silent-hero .wrap { position: relative; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.silent-hero p { max-width: 620px; }

.points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 72px; }
/* Fewer than three points should not leave two empty columns. */
.points--1 { grid-template-columns: minmax(0, 1fr); max-width: 68ch; }
.points--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.point { display: flex; flex-direction: column; gap: 16px; }
.point__n { font-family: var(--serif); font-size: 22px; color: var(--red); }
.point p { font-size: 16px; line-height: 1.8; color: #5C564E; }

.request { display: grid; grid-template-columns: minmax(0, 1fr) 520px; gap: 80px; align-items: center; }
.request__intro { display: flex; flex-direction: column; gap: 18px; }
.request__intro p { max-width: 520px; }
.request .form { gap: 26px; }
.request .field__input { border-bottom-color: #C9BEAB; }
.request .form__row { gap: 26px; }

@media (max-width: 1100px) {
  .points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px; }
  .request { grid-template-columns: minmax(0, 1fr); gap: 36px; align-items: start; }
}
@media (max-width: 820px) {
  .points { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .silent-hero { padding: 64px 0 68px; }
}

/* ==========================================================================
   Mobiel menu
   ========================================================================== */

.nav-drawer {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0; transition: opacity 240ms ease;
}
.nav-drawer.is-open { opacity: 1; }
.nav-drawer[hidden] { display: none; }

.nav-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px);
  background: var(--canvas);
  display: flex; flex-direction: column;
  padding: var(--gutter) var(--gutter) 40px;
  transform: translateX(100%);
  transition: transform 260ms cubic-bezier(.2, .7, .2, 1);
  overflow-y: auto;
}
.nav-drawer.is-open .nav-drawer__panel { transform: none; }

.nav-drawer__top { display: flex; align-items: center; justify-content: space-between; }
.nav-drawer__close {
  width: 44px; height: 44px; flex: 0 0 44px;
  background: 0; border: 1px solid var(--rule); color: var(--iron); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.nav-drawer__close:hover { border-color: var(--red); color: var(--red); }

.nav-drawer__links { display: flex; flex-direction: column; margin-top: 40px; }
.nav-drawer__foot {
  display: flex; flex-direction: column; margin-top: auto; padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.nav-drawer__link {
  display: flex; align-items: center; gap: 12px;
  min-height: 56px;
  font-family: var(--serif); font-size: 24px; font-weight: 400; color: var(--iron);
  border-bottom: 1px solid var(--rule);
}
.nav-drawer__foot .nav-drawer__link {
  font-family: var(--sans); font-size: 14px; letter-spacing: 0.04em;
  min-height: 48px; border-bottom: 0;
}
.nav-drawer__link:hover { color: var(--red); }
.nav-drawer__link svg { flex: 0 0 auto; }

@media (prefers-reduced-motion: reduce) {
  .nav-drawer, .nav-drawer__panel { transition: none; }
}

/* A silent listing gets an unrecognisably small source; this smooths the blocks. */
.is-obscured { filter: blur(12px) saturate(0.85); transform: scale(1.08); }
.gallery__empty {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--muted-soft);
}

/* ==========================================================================
   Team
   ========================================================================== */

.team-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }

.agent-card { display: flex; flex-direction: column; }
.agent-card__photo {
  position: relative; overflow: hidden; background: var(--rule-ecru);
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
}
.agent-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-card__photo .mark { width: 42%; color: var(--iron); opacity: 0.14; }
.agent-card__photo .mark svg { width: 100%; height: auto; }
.agent-card__body { display: flex; flex-direction: column; gap: 8px; padding-top: 22px; }
.agent-card__name { color: var(--iron); transition: color 220ms ease; }
.agent-card__langs { font-size: 14px; line-height: 1.7; color: var(--muted); }
.agent-card__count { font-size: 13px; letter-spacing: 0.05em; color: var(--muted-soft); }
.agent-card:hover .agent-card__name { color: var(--red); }

/* Portraits hang quietly on the wall and come alive under the mouse: colour
   returns, the image creeps slowly closer and the same scrim with a red rule as
   on a listing card slides up from below. Only where there really is a pointer,
   or the state sticks after a tap. */
@media (hover: hover) {
  .agent-card:hover .card__veil { opacity: 1; }
  .agent-card:hover .card__peek { opacity: 1; transform: none; }
  .agent-card:hover .card__peek i { width: 46px; }

  /* De portretten stonden in rust half ontkleurd en kwamen pas onder de muis
     tot leven. Dat is nu om: ze staan gewoon in kleur, en de hover doet het met
     beweging en met de scrim die van onderen opkomt. Een foto die de klant net
     heeft laten maken hoor je niet half weg te poetsen. */
  .agent-card__photo img {
    transition: transform 1100ms cubic-bezier(0.16, 0.84, 0.26, 1);
  }
  .agent-card:hover .agent-card__photo img { transform: scale(1.055); }

  /* the same movement, smaller, on the agent picker in the side column */
  .agent--pick .agent__photo img {
    transition: transform 900ms cubic-bezier(0.16, 0.84, 0.26, 1);
  }
  .agent--pick:hover .agent__photo img,
  .agent--pick:focus-within .agent__photo img { transform: scale(1.07); }

  /* without a portrait the mark sits in the box; it may make the same move */
  .agent-card__photo .mark, .agent--pick .agent__photo .mark {
    transition: opacity 560ms ease, transform 1000ms cubic-bezier(0.16, 0.84, 0.26, 1);
  }
  .agent-card:hover .agent-card__photo .mark,
  .agent--pick:hover .agent__photo .mark,
  .agent--pick:focus-within .agent__photo .mark { opacity: 0.26; transform: scale(1.06); }
  .agent-card:hover .agent-card__photo.is-brand .mark,
  .agent--pick:hover .agent__photo.is-brand .mark,
  .agent--pick:focus-within .agent__photo.is-brand .mark { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .agent-card__photo img, .agent--pick .agent__photo img { transition: none; }
  .agent-card:hover .agent-card__photo img,
  .agent--pick:hover .agent__photo img { transform: none; }
}

.agent-profile { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 76px; align-items: start; }
.agent-profile__photo { overflow: hidden; background: var(--rule-ecru); aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center; }
.agent-profile__photo img { width: 100%; height: 100%; object-fit: cover; }
.agent-profile__photo .mark { width: 40%; color: var(--iron); opacity: 0.14; }
.agent-profile__photo .mark svg { width: 100%; height: auto; }
.agent-profile__body { display: flex; flex-direction: column; gap: 22px; }
.agent-profile__contact {
  display: flex; flex-wrap: wrap; gap: 14px 40px;
  padding: 24px 0; margin-top: 4px;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.agent-profile__contact a, .agent-profile__contact span {
  display: flex; align-items: center; gap: 11px; color: var(--iron); font-size: 15px; font-weight: 300;
}
.agent-profile__bio { display: flex; flex-direction: column; gap: 18px; }

@media (max-width: 1100px) {
  .team-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
  .agent-profile { grid-template-columns: 320px minmax(0, 1fr); gap: 44px; }
}
@media (max-width: 820px) {
  .team-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .agent-profile { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .agent-profile__photo { max-width: 280px; }
  .agent-profile__contact { flex-direction: column; gap: 12px; }
}

/* ==========================================================================
   About en Contact
   ========================================================================== */

.statement { max-width: 940px; }
.statement p { font-family: var(--serif); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.5; color: var(--iron); }

.contact-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 80px; align-items: start; }
.contact-details { display: flex; flex-direction: column; gap: 34px; }
.contact-block { display: flex; flex-direction: column; gap: 12px; }
.contact-block a, .contact-block span { font-size: 16px; font-weight: 300; line-height: 1.8; color: var(--ink-soft); }
.contact-block a { color: var(--iron); }
.contact-block a:hover { color: var(--red); }

.hours { display: flex; flex-direction: column; gap: 10px; margin: 0; }
.hours div {
  display: flex; justify-content: space-between; gap: 24px;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule);
  font-size: 16px; font-weight: 300; color: var(--ink-soft);
}
.hours div:last-child { border-bottom: 0; }
.hours dt { color: var(--iron); }
.hours dd { margin: 0; }
.hours .is-closed { color: var(--muted-soft); }

@media (max-width: 1100px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
}

/* ==========================================================================
   Buyers en Sellers info
   ========================================================================== */

.steps { display: flex; flex-direction: column; }
.step {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 1fr; gap: 48px;
  padding: 40px 0; border-top: 1px solid var(--rule); align-items: start;
}
.step:last-child { border-bottom: 1px solid var(--rule); }
.section--ecru .step { border-color: var(--rule-ecru); }
.step__n { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--red); }
.step__title { display: flex; flex-direction: column; gap: 10px; }
.step__body { display: flex; flex-direction: column; gap: 14px; }
.step__body p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); }

.callout {
  display: flex; flex-direction: column; gap: 14px;
  padding: 34px 38px; background: var(--ecru-shade);
}
.callout p { font-size: 16px; line-height: 1.85; color: var(--ink-soft); }

.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.fact { display: flex; flex-direction: column; gap: 10px; padding-top: 22px; border-top: 1px solid var(--rule); }
.fact b { font-family: var(--serif); font-weight: 400; font-size: 28px; line-height: 1.2; color: var(--iron); }
.fact span { font-size: 15px; line-height: 1.8; color: var(--ink-soft); }

@media (max-width: 1100px) {
  .step { grid-template-columns: 60px minmax(0, 1fr); gap: 24px; }
  .step__body { grid-column: 2; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}
@media (max-width: 820px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 30px 0; }
  .step__body { grid-column: 1; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .callout { padding: 26px var(--gutter); margin: 0 calc(var(--gutter) * -1); }
}

/* An image band on a text page: breaks the column without stealing attention. */
.band { overflow: hidden; background: var(--rule-ecru); }
.band img { width: 100%; height: 420px; object-fit: cover; }
.band figcaption {
  display: block; padding-top: 14px;
  font-size: 13px; line-height: 1.7; color: var(--muted);
}
figure.band { margin: 0; }

@media (max-width: 820px) {
  .band img { height: 240px; }
}


/* A map across the full page width, tight against the footer. */
.map-fullbleed { display: block; }
.map-fullbleed .map { height: 520px; }
@media (max-width: 820px) { .map-fullbleed .map { height: 340px; } }


/* The same icons on a light background: red, and to Iron on hover, because
   white would disappear there. */
.socials-light { display: flex; align-items: center; gap: 20px; color: var(--red); }
.socials-light a { color: inherit; transition: color 160ms ease; }
.socials-light a:hover { color: var(--iron); }

/* ==========================================================================
   Kaart vergroten
   ========================================================================== */

.map { position: relative; }
.map__expand {
  position: absolute; left: 16px; top: 16px; z-index: 500;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--canvas); color: var(--iron);
  border: 0; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: color 160ms ease, background 160ms ease;
}
.map__expand:hover { background: var(--red); color: #FFFFFF; }

.map-lightbox {
  /* Above Leaflet: it puts its own controls at z-index 1000, so without this the
     buttons of the map underneath poke straight through the overlay. */
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(0, 0, 0, 0.72);
  display: flex; align-items: center; justify-content: center;
  padding: 40px;
  opacity: 0; transition: opacity 240ms ease;
}
.map-lightbox.is-open { opacity: 1; }
.map-lightbox[hidden] { display: none; }

.map-lightbox__frame {
  position: relative;
  width: min(1248px, 100%); height: min(760px, 100%);
  background: var(--ecru);
  transform: scale(.985);
  transition: transform 260ms cubic-bezier(.16, .84, .26, 1);
}
.map-lightbox.is-open .map-lightbox__frame { transform: none; }
.map-lightbox__canvas { width: 100%; height: 100%; }

.map-lightbox__close {
  position: absolute; right: -2px; top: -52px;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  background: 0; border: 1px solid rgba(255, 255, 255, 0.4); color: #FFFFFF;
  cursor: pointer;
  transition: border-color 220ms ease, color 220ms ease, background 220ms ease;
}
.map-lightbox__close svg {
  transition: transform 420ms cubic-bezier(.16, .84, .26, 1);
}
.map-lightbox__close:hover {
  border-color: var(--red); background: var(--red); color: #FFFFFF;
}
.map-lightbox__close:hover svg { transform: rotate(180deg); }

/* The enlarge button of the map underneath has no business being there while
   the lightbox is open. */
body.has-map-lightbox .map__expand { opacity: 0; pointer-events: none; }
.map__expand { transition: color 160ms ease, background 160ms ease, opacity 200ms ease; }

@media (max-width: 820px) {
  .map-lightbox { padding: 20px 16px 16px; }
  .map-lightbox__close { top: -48px; right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-lightbox, .map-lightbox__frame { transition: none; }
}

/* Address as a directions link. The lines stay stacked as in an address block. */
.contact-address { display: flex; flex-direction: column; gap: 2px; color: var(--ink-soft); }
.contact-address:hover { color: var(--red); }
.contact-address__dir {
  display: flex; align-items: center; gap: 12px;
  margin-top: 12px; color: var(--iron);
}
.contact-address:hover .contact-address__dir { color: var(--red); }

/* ---------- 404 ---------------------------------------------------------- */

/* The height subtracts the header, so the block fills the screen without
   adding a second screen height below the footer. */
.nf {
  background: var(--ecru);
  min-height: calc(100vh - 96px);
  display: flex;
  align-items: center;
  padding: 72px 0;
}
.nf__in { display: flex; flex-direction: column; align-items: center; text-align: center; }

/* The digits are image, not text: tight together and as large as the screen
   width allows. At 320 pixels there is still margin left. */
.nf__code {
  font-family: var(--serif);
  font-size: clamp(88px, 17vw, 196px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--iron);
  margin: 18px 0 0;
}
.nf__o { color: var(--red); }

.nf__title { margin-top: 22px; max-width: 26ch; }
.nf__lede  { margin-top: 18px; max-width: 54ch; }

/* The homepage search bar has four columns; here there is one field. */
.nf__search {
  grid-template-columns: minmax(0, 1fr) 92px;
  width: 100%;
  max-width: 560px;
  margin-top: 40px;
  text-align: left;
}

.nf__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px 30px;
  margin-top: 38px;
  padding-top: 30px;
  border-top: 1px solid var(--rule-ecru);
  width: 100%;
  max-width: 760px;
}
.nf__links a {
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
}
.nf__links a:hover { color: var(--red); }

.nf__home { align-self: center; margin-top: 34px; }

@media (max-width: 720px) {
  .nf { min-height: 0; padding: 56px 0 64px; }
  .nf__search { grid-template-columns: minmax(0, 1fr) 72px; min-height: 76px; }
  .nf__links { gap: 12px 22px; }
}

/* ---------- signing in with Google --------------------------------------- */

/* A rule with "or" in it, between the form and the button. The line runs on to
   the left and right, so two pseudo-elements rather than a border. */
.auth-or {
  display: flex;
  align-items: center;
  gap: 18px;
  margin: 30px 0 22px;
  color: var(--muted-soft);
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}
.auth-or::before, .auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--rule);
}

/* Google prescribes how this button may look: their logo in colour, on white or
   on dark grey, with the text beside it. Which is why this is the one element on
   the site that does not follow the house style. */
.auth-google {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  min-height: 56px;
  padding: 0 24px;
  border: 1px solid var(--rule);
  background: #FFFFFF;
  color: var(--ink);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}
.auth-google:hover {
  color: var(--ink);
  border-color: var(--muted-soft);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}
.auth-google svg { flex: 0 0 18px; }

/* The alert tick sits beside Remove; on a narrow screen they stack and the
   whole line becomes a column. */
.saved-search__tools { display: flex; align-items: center; gap: 28px; flex-shrink: 0; }
.saved-search__alert .form__check { font-size: 14px; gap: 10px; white-space: nowrap; }
.saved-search__alert .form__check input { width: 15px; height: 15px; flex: 0 0 15px; }

@media (max-width: 720px) {
  .saved-search { flex-direction: column; align-items: flex-start; gap: 14px; }
  .saved-search__tools { gap: 20px; }
}