/* Gevelrij Makelaars — white, canal-night navy, warm stone, and the gold of gable ornaments.
   Libre Caslon (a type with Dutch roots) for the voice; Instrument Sans for the rest.
   Signature: a row of gables. The hero photo's top edge is cut into ten Amsterdam facades
   (step, neck, plain cornice and bell gables), and the listing photos each take a gable shape. */
@font-face { font-family: "Libre Caslon Display"; src: url("../../fonts/libre-caslon-display/libre-caslon-display-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("../../fonts/instrument-sans/instrument-sans-latin-standard-normal.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }

:root {
  --paper: #FFFFFF; --stone: #EFEBE4; --ink: #10213A; --muted: #4A5568; --line: #DDD8CF; --gold: #7A5A26; --gold-l: #C9A56A;
  --serif: "Libre Caslon Display", "Caslon", Georgia, serif; --sans: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --wrap: 78rem; --gut: clamp(1.1rem, 4vw, 3rem); --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --skyline: polygon(0% 100%, 0% 10%, 1.33% 10%, 1.33% 6.36%, 2.67% 6.36%, 2.67% 2.73%, 4% 2.73%, 4% 0%, 6% 0%, 6% 2.73%, 7.33% 2.73%, 7.33% 6.36%, 8.67% 6.36%, 8.67% 10%, 10% 10%, 10% 8.18%, 12% 8.18%, 12.67% 4.55%, 13.67% 1.82%, 15% 0%, 16.33% 1.82%, 17.33% 4.55%, 18% 8.18%, 20% 8.18%, 20% 11.82%, 30% 11.82%, 30% 6.36%, 31.67% 6.36%, 32.33% 3.64%, 33.67% 0.91%, 35% 0%, 36.33% 0.91%, 37.67% 3.64%, 38.33% 6.36%, 40% 6.36%, 40% 10%, 41.33% 10%, 41.33% 6.36%, 42.67% 6.36%, 42.67% 2.73%, 44% 2.73%, 44% 0%, 46% 0%, 46% 2.73%, 47.33% 2.73%, 47.33% 6.36%, 48.67% 6.36%, 48.67% 10%, 50% 10%, 50% 11.82%, 60% 11.82%, 60% 8.18%, 62% 8.18%, 62.67% 4.55%, 63.67% 1.82%, 65% 0%, 66.33% 1.82%, 67.33% 4.55%, 68% 8.18%, 70% 8.18%, 70% 6.36%, 71.67% 6.36%, 72.33% 3.64%, 73.67% 0.91%, 75% 0%, 76.33% 0.91%, 77.67% 3.64%, 78.33% 6.36%, 80% 6.36%, 80% 10%, 81.33% 10%, 81.33% 6.36%, 82.67% 6.36%, 82.67% 2.73%, 84% 2.73%, 84% 0%, 86% 0%, 86% 2.73%, 87.33% 2.73%, 87.33% 6.36%, 88.67% 6.36%, 88.67% 10%, 90% 10%, 90% 8.18%, 92% 8.18%, 92.67% 4.55%, 93.67% 1.82%, 95% 0%, 96.33% 1.82%, 97.33% 4.55%, 98% 8.18%, 100% 8.18%, 100% 100%);
  --k-bg: #FFFFFF; --k-soft: #F4F1EB; --k-ink: var(--ink); --k-muted: var(--muted); --k-line: var(--line);
  --k-accent: var(--ink); --k-on-accent: #FFFFFF; --k-radius: 0.25rem; --k-font: var(--sans);
}
body { background: var(--paper); color: var(--ink); font: 400 1.0625rem/1.65 var(--sans); }
.gr-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; line-height: 1.05; }
h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); margin-top: 0.7rem; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
a { color: inherit; }
.gr-eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); }
.gr-intro { margin-top: 1rem; color: var(--muted); max-width: 46ch; }
.gr-small { font-size: 0.8125rem; color: var(--muted); }
.gr-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3.1rem; padding: 0 1.6rem; border: 0; border-radius: 0.2rem; background: var(--ink); color: #FFFFFF; font: 600 0.95rem var(--sans); letter-spacing: 0.01em; text-decoration: none; transition: background-color 0.3s, transform 0.2s var(--ease); }
.gr-btn:hover { background: #1D3558; }
.gr-btn:active { transform: scale(0.97); }
.gr-btn--small { min-height: 2.5rem; padding: 0 1.1rem; font-size: 0.875rem; }
.gr-btn--wide { width: 100%; }
.gr-link { font-weight: 600; text-underline-offset: 5px; }

/* header */
.gr-head { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.gr-head__in { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4.4rem; }
.gr-logo { display: inline-flex; align-items: baseline; gap: 0.55rem; font: 400 1.75rem/1 var(--serif); text-decoration: none; }
.gr-logo span { font: 600 0.62rem var(--sans); letter-spacing: 0.28em; text-transform: uppercase; color: var(--gold); }
.gr-nav { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2rem); }
.gr-nav > a:not(.gr-btn) { font-weight: 500; font-size: 0.95rem; text-decoration: none; }
.gr-nav > a:not(.gr-btn):hover { text-decoration: underline; text-underline-offset: 6px; }
.gr-toggle { display: none; }
@media (max-width: 820px) {
  .gr-toggle { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.1rem; border: 1px solid var(--ink); border-radius: 0.2rem; background: transparent; font-weight: 600; }
  .gr-nav { position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 0.5rem var(--gut) 1.5rem; background: var(--paper); border-bottom: 1px solid var(--line); }
  .gr-nav > a:not(.gr-btn) { padding: 0.9rem 0; border-bottom: 1px solid var(--line); font: 400 1.6rem var(--serif); }
  .gr-nav .gr-btn { margin-top: 1.25rem; }
  html:not(.nav-open) .gr-nav { display: none; }
}

/* hero: the photo's top edge is the row of gables */
.gr-hero { position: relative; padding-top: clamp(1.5rem, 4vw, 3rem); }
.gr-hero__img img { width: 100%; height: clamp(26rem, 62vh, 44rem); object-fit: cover; object-position: 50% 60%; clip-path: var(--skyline); }
.gr-hero__panel { position: relative; margin-top: clamp(-11rem, -14vw, -6rem); max-width: 38rem; padding: clamp(1.5rem, 3.5vw, 2.75rem); background: var(--paper); box-shadow: 0 30px 60px -40px rgba(16, 33, 58, 0.45); }
.gr-hero h1 { margin-top: 1rem; font-size: clamp(2.4rem, 5vw, 4.3rem); line-height: 1; }
.gr-hero h1 span { display: block; color: var(--gold); }
.gr-lead { margin-top: 1.25rem; color: var(--muted); font-size: 1.1rem; max-width: 42ch; }
.gr-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; }

/* listings in gable shapes */
.gr-listings { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.gr-sec-head { margin-bottom: 2.5rem; }
.gr-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
.gr-card { position: relative; display: grid; gap: 1rem; text-decoration: none; }
.gr-card img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; transition: transform 0.9s var(--ease); }
.gr-card picture { overflow: hidden; }
.gr-card:hover img { transform: scale(1.03); }
.gr-card--step picture { clip-path: polygon(0 100%, 0 16%, 14% 16%, 14% 10.5%, 28% 10.5%, 28% 5%, 40% 5%, 40% 0, 60% 0, 60% 5%, 72% 5%, 72% 10.5%, 86% 10.5%, 86% 16%, 100% 16%, 100% 100%); }
.gr-card--neck picture { clip-path: polygon(0 100%, 0 14%, 20% 14%, 26% 8%, 32% 3%, 40% 0, 60% 0, 68% 3%, 74% 8%, 80% 14%, 100% 14%, 100% 100%); }
.gr-card--bell picture { clip-path: polygon(0 100%, 0 12%, 12% 12%, 16% 7%, 24% 3%, 34% 0.8%, 50% 0, 66% 0.8%, 76% 3%, 84% 7%, 88% 12%, 100% 12%, 100% 100%); }
.gr-card__tag { position: absolute; top: 18%; left: 1rem; padding: 0.3rem 0.65rem; background: var(--ink); color: #FFFFFF; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; }
.gr-card__tag--dim { background: var(--paper); color: var(--ink); }
.gr-card__body { display: grid; gap: 0.2rem; }
.gr-card__body b { font: 400 1.5rem var(--serif); }
.gr-card__body span { color: var(--muted); font-size: 0.925rem; }
.gr-card__body em { font-style: normal; font-weight: 600; }
@media (max-width: 900px) { .gr-cards { grid-template-columns: 1fr; } .gr-card img { aspect-ratio: 4 / 3; } }

/* one listing in detail, on stone */
.gr-home { background: var(--stone); padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.gr-home__in { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 6vw, 6rem); align-items: center; }
.gr-home__main img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; clip-path: polygon(0 100%, 0 10%, 16% 10%, 16% 6.5%, 30% 6.5%, 30% 3%, 42% 3%, 42% 0, 58% 0, 58% 3%, 70% 3%, 70% 6.5%, 84% 6.5%, 84% 10%, 100% 10%, 100% 100%); }
.gr-home__lead { margin-top: 1.25rem; font-size: 1.15rem; max-width: 44ch; color: var(--muted); }
.gr-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; margin-top: 2rem; border-top: 1px solid var(--ink); }
.gr-specs div { padding-block: 0.8rem; border-bottom: 1px solid #D6CFC2; }
.gr-specs dt { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); }
.gr-specs dd { margin: 0.15rem 0 0; font-weight: 500; }
.gr-home .gr-small { margin-top: 1.25rem; }
@media (max-width: 900px) { .gr-home__in { grid-template-columns: 1fr; } .gr-home__media { max-width: 26rem; } }
@media (max-width: 480px) { .gr-specs { grid-template-columns: 1fr; } }

/* viewing: form and agent */
.gr-view { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 4rem); align-items: start; padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.gr-form { display: grid; gap: 1rem; margin-top: 2rem; }
.gr-view .gr-form { padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--line); background: var(--paper); }
.gr-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.gr-field { display: grid; gap: 0.35rem; min-width: 0; }
.gr-field label { font-size: 0.8rem; font-weight: 600; }
.gr-form input, .gr-form textarea { width: 100%; min-height: 3rem; padding: 0.7rem 0.9rem; border: 1px solid var(--line); border-radius: 0.2rem; background: #FFFFFF; font-size: 1rem; }
.gr-form textarea { resize: vertical; }
.gr-form input::placeholder, .gr-form textarea::placeholder { color: #6B7280; opacity: 1; }
.gr-form input:focus-visible, .gr-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.gr-view__agent .gr-intro { margin-bottom: 1.5rem; }
@media (max-width: 1000px) { .gr-view { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .gr-row { grid-template-columns: 1fr; } }

/* sell: the navy stage */
.gr-sell { background: var(--ink); color: #EEF1F6; padding-block: clamp(4.5rem, 9vw, 7rem); }
.gr-sell .gr-eyebrow { color: var(--gold-l); }
.gr-sell .gr-intro { color: #B8C2D3; }
.gr-sell__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem clamp(2rem, 5vw, 5rem); align-items: end; }
.gr-form--inline { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
.gr-form--inline .gr-field label { color: #D6DCE6; }
.gr-form--inline input { background: #F7F8FA; border-color: #2F4466; color: var(--ink); }
.gr-form--inline .gr-btn { grid-column: 1 / -1; background: var(--gold-l); color: var(--ink); }
.gr-form--inline .gr-btn:hover { background: #D8B77E; }
.gr-sell .kform__done { grid-column: 2; }
@media (max-width: 900px) { .gr-sell__in { grid-template-columns: 1fr; } .gr-sell .kform__done { grid-column: 1; } }
@media (max-width: 480px) { .gr-form--inline { grid-template-columns: 1fr; } }

/* how a sale runs */
.gr-how { padding-block: clamp(4.5rem, 9vw, 7.5rem); }
.gr-steps { counter-reset: s; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; margin-top: 2.5rem; }
.gr-steps li { counter-increment: s; padding-top: 1.25rem; border-top: 1px solid var(--ink); }
.gr-steps li::before { content: counter(s); display: block; font: 400 2.4rem/1 var(--serif); color: var(--gold); margin-bottom: 0.75rem; }
.gr-steps h3 { font-size: 1.4rem; }
.gr-steps p { margin-top: 0.4rem; color: var(--muted); font-size: 0.95rem; }
@media (max-width: 900px) { .gr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .gr-steps { grid-template-columns: 1fr; } }

.gr-foot { background: var(--stone); padding-block: 2.75rem; }
.gr-foot__in { display: grid; gap: 0.5rem; }
.gr-foot p:not(.gr-logo) { color: var(--muted); font-size: 0.9rem; }