/* MFC Invests design system.
   Extracted from myfirstcorner.com (Wix theme) 2026-08-04:
   ink #121212, brand red #d70404 (logo; site used #d00303/#e01010),
   grey ramp f6f6f6/e2e2e2/b0b0b0/979797/727272/444444,
   type: Wix Madefor Display (700 headings) / Madefor Text (body) / Poppins (labels),
   patterns: dark chrome, red uppercase eyebrows, ghost buttons, frosted panels. */

:root {
  --champagne: #d8b871;   /* brass and bronze, for the concierge page's accents */
  --ink: #121212;
  --ink-soft: #1c1c1c;
  --paper: #ffffff;
  --red: #d70404;
  --red-deep: #d00303;
  --red-hover: #e01010;
  --grey-50: #f6f6f6;
  --grey-200: #e2e2e2;
  --grey-300: #d8d8d8;
  --grey-400: #b0b0b0;
  --grey-500: #979797;
  --grey-600: #727272;
  --grey-700: #565656;
  --grey-800: #444444;

  --font-display: 'Wix Madefor Display', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-text: 'Wix Madefor Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-accent: 'Poppins', var(--font-text);
  --font-nav: 'Barlow Condensed', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --fs-hero: clamp(2.1rem, 4.6vw, 3rem);
  --fs-h1: clamp(1.9rem, 3.6vw, 2.5rem);
  --fs-h2: clamp(1.6rem, 2.8vw, 2.125rem);
  --fs-h3: clamp(1.25rem, 2vw, 1.625rem);
  --fs-h4: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-tiny: 0.8125rem;

  --container: 1290px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(3.5rem, 8vw, 6rem);
  --radius: 8px;
  --radius-lg: 20px;
  --shadow: 0 10px 30px rgba(18, 18, 18, 0.10);
  --header-h: 76px;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.15; margin: 0 0 0.6em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--red); color: #fff; padding: 0.75rem 1.25rem; z-index: 200; font-weight: 700; }
.skip-link:focus { left: 0; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); }
.section--tight { padding-block: calc(var(--section) * 0.6); }
.surface-dark { background: var(--ink); color: #fff; }
.surface-grey { background: var(--grey-50); }

/* ---------- type patterns ---------- */
.eyebrow {
  font-family: var(--font-accent);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 0.75rem;
}
.surface-dark .eyebrow--ghost { color: rgba(255, 255, 255, 0.85); }
.surface-dark .eyebrow, .page-dark .hero .eyebrow, .page-dark--full .eyebrow,
.imgsection .eyebrow, .tilesec .eyebrow { color: #ff6a6a; }
.lede { font-size: 1.0625rem; color: var(--grey-600); max-width: 62ch; }
.surface-dark .lede { color: var(--grey-400); }
.section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 2rem; margin-bottom: 2.25rem; }
.section-head h2 { margin-bottom: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.55em;
  font-family: var(--font-text); font-weight: 700; font-size: 0.8125rem;
  letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none;
  border-radius: var(--radius); padding: 0.9em 1.7em; border: 1px solid transparent;
  cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.btn .arrow { transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(4px); }
.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-hover); }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.75); }
.btn-ghost:hover { border-color: #fff; background: rgba(255, 255, 255, 0.08); }
.btn-ghost--ink { color: var(--ink); border-color: var(--ink); }
.btn-ghost--ink:hover { background: var(--ink); color: #fff; }
.btn-quiet { background: transparent; color: var(--red); padding-inline: 0; }

/* ---------- header ---------- */
.site-header {
  background: var(--ink); color: #fff;
  position: sticky; top: 0; z-index: 100;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.site-header__bar { display: flex; align-items: center; gap: 1.5rem; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 0.8rem; text-decoration: none; color: #fff; }
.brand__mark { width: 46px; height: 30px; flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: 0.16em; }
.brand__sub { font-family: var(--font-accent); font-weight: 500; font-size: 0.5rem; letter-spacing: 0.42em; color: #ff6a6a; text-transform: uppercase; }
.site-nav { margin-left: auto; }
.site-nav ul { list-style: none; display: flex; gap: 1.6rem; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; font-size: 0.9375rem; font-weight: 500; color: rgba(255, 255, 255, 0.92); padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: #fff; border-bottom-color: var(--red); }
.header-cta { display: flex; align-items: center; gap: 0.75rem; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: var(--radius); background: #fff; color: var(--red); }
.nav-toggle { display: none; }
.nav-toggle-label { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
  display: block; width: 24px; height: 2px; background: #fff; position: relative; transition: transform 0.2s ease;
}
.nav-toggle-label span::before { content: ""; position: absolute; top: -7px; }
.nav-toggle-label span::after { content: ""; position: absolute; top: 7px; }
@media (max-width: 1080px) {
  .site-nav { position: fixed; inset: var(--header-h) 0 auto 0; background: var(--ink); padding: 1rem var(--gutter) 2rem; display: none; border-bottom: 1px solid rgba(255,255,255,0.1); max-height: calc(100vh - var(--header-h)); overflow: auto; }
  .site-nav ul { flex-direction: column; gap: 0.25rem; }
  .site-nav a { display: block; padding: 0.8rem 0; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,0.07); }
  .nav-toggle-label { display: inline-flex; margin-left: auto; }
  .nav-toggle:checked ~ .site-nav { display: block; }
  .header-cta .btn { display: none; }
}

/* ---------- hero ---------- */
.hero { position: relative; color: #fff; background: var(--ink); overflow: hidden; }
.hero__media, .hero__media img, .hero__media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,0.55) 0%, rgba(18,18,18,0.35) 45%, rgba(18,18,18,0.72) 100%); }
.hero__inner { position: relative; z-index: 1; padding-block: clamp(5rem, 14vw, 9.5rem); max-width: 720px; }
.hero__inner h1 { font-size: var(--fs-hero); margin-bottom: 1.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 1.75rem; }
.hero--page { min-height: 320px; display: flex; align-items: flex-end; }

/* frosted stat card */
.frost {
  background: rgba(255, 255, 255, 0.82); color: var(--ink);
  border-radius: var(--radius-lg); box-shadow: var(--shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
@supports not (backdrop-filter: blur(10px)) { .frost { background: rgba(255, 255, 255, 0.94); } }

/* ---------- cards ---------- */
.grid { display: grid; gap: 1.5rem; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1080px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid--4, .grid--3, .grid--2 { grid-template-columns: 1fr; } }

.card {
  background: var(--paper); border: none; border-radius: 18px;
  box-shadow: 0 6px 24px rgba(18, 18, 18, 0.10);
  overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: var(--ink);
}
.card__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey-50); position: relative; }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease-in-out; }
.card:hover .card__media img, .card:focus-visible .card__media img { transform: scale(1.05); }
.card__tag {
  position: absolute; top: 0.9rem; left: 0.9rem; z-index: 1;
  background: var(--red); color: #fff; font-family: var(--font-accent); font-weight: 500;
  font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.35em 0.9em; border-radius: 4px;
}
.card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.card__title { font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; line-height: 1.3; margin: 0; }
.card__meta { color: var(--grey-600); font-size: var(--fs-small); }
.card__price { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; color: var(--red-deep); margin-top: auto; }
.card__price small { font-family: var(--font-text); font-weight: 400; font-size: 0.8125rem; color: var(--grey-600); }
.card__specs { display: flex; gap: 1.1rem; color: var(--grey-700); font-size: var(--fs-tiny); border-top: 1px solid var(--grey-200); padding-top: 0.8rem; }
.surface-dark .card { background: var(--paper); color: var(--ink); }

/* outlined label tiles (LIST WITH US pattern) */
.tile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius); color: #fff; text-decoration: none; background: var(--ink); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.65; transition: transform 0.3s ease; }
.tile:hover img { transform: scale(1.04); }
.tile--red::before { content: ""; position: absolute; inset: 0; background: rgba(215, 4, 4, 0.55); }
.tile__label { position: relative; z-index: 1; border: 1px solid rgba(255,255,255,0.9); padding: 0.9rem 2rem; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: 0.04em; text-transform: uppercase; background: rgba(18,18,18,0.25); }

/* ---------- key facts / spec strip ---------- */
.key-facts { border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 1.5rem; background: var(--grey-50); }
.key-facts dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem 2rem; margin: 0; }
.key-facts dt { font-family: var(--font-accent); font-weight: 500; font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--grey-700); }
.key-facts dd { margin: 0.15rem 0 0; font-weight: 700; font-size: 1.0625rem; }
.spec-strip { display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; padding: 1rem 1.4rem; }
.spec { display: flex; align-items: center; gap: 0.6rem; font-size: var(--fs-small); }
.spec svg { color: var(--red); width: 26px; height: 26px; }
.spec strong { font-size: 1.05rem; }

/* ---------- breadcrumbs ---------- */
.breadcrumbs { font-size: var(--fs-tiny); color: var(--grey-600); padding-block: 0.9rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--grey-400); }
.breadcrumbs a { color: var(--grey-600); text-decoration: none; }
.breadcrumbs a:hover { color: var(--red); }

/* ---------- article / prose ---------- */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 1.5rem; margin-top: 1.9em; }
.prose h3 { font-size: 1.2rem; margin-top: 1.6em; }
.prose img { border-radius: var(--radius); margin-block: 1.5em; }
.prose blockquote { border-left: 3px solid var(--red); margin: 1.5em 0; padding: 0.4em 0 0.4em 1.2em; color: var(--grey-700); font-style: italic; }
.prose a { color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: 2px; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }
.prose th, .prose td { border: 1px solid var(--grey-200); padding: 0.6em 0.8em; text-align: left; }
.prose th { background: var(--grey-50); font-family: var(--font-display); }
.table-wrap { overflow-x: auto; }
.article-head { max-width: 760px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; color: var(--grey-600); font-size: var(--fs-small); margin-bottom: 1.4rem; }

/* answer-first block */
.answer-first { font-size: 1.125rem; line-height: 1.65; color: var(--ink); border-left: 3px solid var(--red); padding-left: 1.1rem; margin-bottom: 1.8rem; }

/* ---------- FAQ ---------- */
.faq details { border-bottom: 1px solid var(--grey-200); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.1rem 0; font-family: var(--font-display); font-weight: 700; font-size: 1.0625rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 1.4rem; font-weight: 400; flex: none; }
.faq details[open] summary::after { content: "–"; }
.faq .faq__a { padding: 0 0 1.2rem; color: var(--grey-700); max-width: 70ch; }

/* ---------- gallery ---------- */
.gallery { display: grid; gap: 0.6rem; grid-template-columns: repeat(4, 1fr); }
.gallery a { display: block; border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; background: var(--grey-50); }
.gallery a img { width: 100%; height: 100%; object-fit: cover; }
.gallery a:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 700px) { .gallery { grid-template-columns: repeat(2, 1fr); } }
.gallery--strip { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.6rem; }
.gallery--strip a { flex: 0 0 78%; scroll-snap-align: start; }

/* ---------- forms ---------- */
.form { display: grid; gap: 1rem; max-width: 560px; }
.form label { font-weight: 700; font-size: var(--fs-small); display: block; margin-bottom: 0.35rem; }
.form input, .form select, .form textarea {
  width: 100%; font: inherit; padding: 0.8em 1em; border: 1px solid var(--grey-300); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.form input:focus, .form select:focus, .form textarea:focus { border-color: var(--red); outline: 2px solid rgba(215, 4, 4, 0.18); }
.hp { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.form-note { font-size: var(--fs-tiny); color: var(--grey-600); }

/* ---------- footer ---------- */
.site-footer { background: var(--ink); color: rgba(255,255,255,0.85); margin-top: var(--section); }
/* Pages that end on a dark surface butt straight up against the footer;
   the gap is breathing room after a light page, and reads as a white band here. */
/* Only for pages that are dark all the way down. On a page that merely
   has a dark hero, a dark main leaves the body copy black on black. */
.page-dark--full .site-footer { margin-top: 0; }
.page-dark--full main { background: var(--ink); }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-block: 3.5rem; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }
.footer-h { font-family: var(--font-display); font-weight: 700; color: #fff; font-size: 1.0625rem; margin-bottom: 1rem; }
.footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: var(--fs-small); }
.footer-legal { border-top: 1px solid rgba(255,255,255,0.12); padding-block: 1.4rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; font-size: var(--fs-tiny); color: var(--grey-500); }
.footer-legal ul { list-style: none; display: flex; flex-wrap: wrap; gap: 1.4rem; margin: 0; padding: 0; }
.footer-disclosure { font-size: var(--fs-tiny); color: var(--grey-500); padding-bottom: 2rem; max-width: 90ch; }
.social-row { display: flex; gap: 0.7rem; margin-top: 1.2rem; }
.social-row a { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,0.1); align-items: center; justify-content: center; }
.social-row a:hover { background: var(--red); }
.social-row svg { width: 16px; height: 16px; fill: #fff; }

/* branded chat icons (never text links) */
.chat-icons { display: inline-flex; gap: 0.55rem; vertical-align: middle; }
.chat-icon { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; }
.chat-icon svg { width: 20px; height: 20px; }
.chat-icon--wa { background: #25d366; }
.chat-icon--tg { background: #229ed9; }
.chat-icon:hover { filter: brightness(1.08); }

/* ---------- misc ---------- */
.pagination { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 2.5rem; }
.pagination a, .pagination span { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--grey-200); border-radius: var(--radius); text-decoration: none; font-size: var(--fs-small); padding-inline: 0.7rem; }
.pagination a:hover { border-color: var(--red); color: var(--red); }
.pagination .is-current { background: var(--ink); color: #fff; border-color: var(--ink); }
.chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chip { display: inline-block; border: 1px solid var(--grey-300); border-radius: 100px; padding: 0.35em 1em; font-size: var(--fs-tiny); text-decoration: none; color: var(--grey-700); }
.chip:hover, .chip.is-active { border-color: var(--red); color: var(--red); }
.notice { background: var(--grey-50); border: 1px solid var(--grey-200); border-radius: var(--radius); padding: 1rem 1.25rem; font-size: var(--fs-small); color: var(--grey-700); }
.badge-impression { position: absolute; bottom: 0.9rem; right: 0.9rem; z-index: 1; background: rgba(18,18,18,0.72); color: #fff; font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.3em 0.8em; border-radius: 4px; }
.map-figure img { border: 1px solid var(--grey-200); border-radius: var(--radius); }
.toc-inline { font-size: var(--fs-small); color: var(--grey-600); }

@media print { .site-header, .site-footer, .hero__actions { display: none; } }

/* ---------- social rail (myfirstcorner pattern) ---------- */
.social-rail { position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 90; display: none; flex-direction: column; gap: 0.55rem; }
@media (min-width: 1200px) { .social-rail { display: flex; } }
.social-rail a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 2px 10px rgba(18,18,18,0.18); }
.social-rail a:hover { background: var(--red); color: #fff; }
.social-rail svg { width: 15px; height: 15px; fill: currentColor; }
.chat-icon--sm { width: 34px; height: 34px; }
.chat-icon--sm svg { width: 17px; height: 17px; }
@media (max-width: 560px) { .site-header .chat-icon--sm { display: none; } }

/* ---------- property card: exact myfirstcorner.com format ---------- */
.pcard[hidden] { display: none; }
.pcard { position: relative; display: block; overflow: hidden; border-radius: 14px; background: #fff; aspect-ratio: 10 / 11; text-decoration: none; color: #fff; box-shadow: 0 6px 22px rgba(18,18,18,0.10); }
.pcard__media { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--grey-50); }
.pcard__media img, .pcard__media picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pcard__media img { transition: transform 0.5s ease, opacity 0.4s ease; }
.pcard:hover .pcard__media img, .pcard:focus-visible .pcard__media img { transform: scale(1.55); opacity: 0.5; }
/* The mark sits in the bottom-right and runs off the right edge, so it reads as
   a watermark the card is cropping rather than a logo placed on a photo.
   Anchored to the right and bottom rather than centred, so the crop stays put
   whatever shape the card is. */
.pcard__mark { position: absolute; right: -5%; bottom: 5%; z-index: 1; width: 73%; fill: var(--red); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.pcard:hover .pcard__mark, .pcard:focus-visible .pcard__mark { opacity: 0.16; }
.pcard__over { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 1.1rem 1.15rem 1.15rem; background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,0.62) 60%); transition: opacity 0.28s ease; }
.pcard__price { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: 1.65rem; line-height: 1.1; }
.pcard__bar { display: block; width: 2.2rem; height: 3px; background: var(--red); margin: 0.35rem 0 0.4rem; }
.pcard__loc { margin: 0; font-size: 0.8125rem; line-height: 1.35; }
.pcard__pill { position: absolute; right: 0.9rem; bottom: 1rem; z-index: 3; background: #fff; color: var(--ink); font-size: 0.75rem; padding: 0.4em 1em; border-radius: 6px; transition: opacity 0.28s ease; }
.pcard__detail { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 1.25rem 1.3rem 1.35rem; color: var(--ink); opacity: 0; transition: opacity 0.3s ease; }
.pcard:hover .pcard__over, .pcard:hover .pcard__pill, .pcard:focus-visible .pcard__over, .pcard:focus-visible .pcard__pill { opacity: 0; }
.pcard:hover .pcard__detail, .pcard:focus-visible .pcard__detail { opacity: 1; }
.pcard__icons { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin: 0.85rem 0 0; font-size: 0.8125rem; }
.pcard__icons span { display: inline-flex; align-items: center; gap: 0.4rem; }
.pcard__icons svg { width: 22px; height: 22px; color: var(--red); }
@media (hover: none) { .pcard__detail { display: none; } }
@media (prefers-reduced-motion: reduce) { .pcard__media img { transition: opacity 0.2s ease; } .pcard:hover .pcard__media img { transform: none; } }

/* ---------- MFC action tiles (alternating red / grayscale) ---------- */
/* The tiles sat edge to edge while every section around them was inset, which
   read as a break in the page rather than a full-bleed choice. Now they line up
   with the content column, with the same hairline gap the source uses. */
.tilesec { position: relative; overflow: hidden; background: var(--ink); padding-block: clamp(1rem, 2.4vw, 1.9rem); }
.tilesec__bg { position: absolute; inset: 0; }
.tilesec__bg img, .tilesec__bg picture { width: 100%; height: 100%; object-fit: cover; }
.tilesec__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.775); }
.tilesec .tilegrid { position: relative; z-index: 2; }
.tilegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
@media (max-width: 900px) { .tilegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tilegrid { grid-template-columns: 1fr; } }
/* The label grows past its own tile on hover, overlapping the neighbours. That
   is the whole effect, so the tile cannot clip its children: the photograph
   gets its own clipping wrapper instead, and the hovered tile is lifted above
   the others so the label is not cut by the one beside it. */
.mtile { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 36 / 25; text-decoration: none; background: var(--ink); }
.mtile:hover, .mtile:focus-within { z-index: 3; }
.mtile__media { position: absolute; inset: 0; overflow: hidden; }
.mtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: transform 0.5s ease; }
.mtile::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.35); transition: background 0.3s ease; pointer-events: none; }
.mtile--red::after { background: rgba(215, 4, 4, 0.62); }
.mtile:hover img { transform: scale(1.06); }
.mtile:hover::after { background: rgba(215, 4, 4, 0.72); }
.mtile__label { position: relative; z-index: 2; width: 72%; box-sizing: border-box; border: 1px solid rgba(255,255,255,0.95); color: #fff; padding: 0.85rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 1.6vw, 1.3rem); letter-spacing: 0.05em; text-transform: uppercase; text-align: center; white-space: nowrap; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.mtile:hover .mtile__label, .mtile:focus-visible .mtile__label { transform: scaleX(1.7); }
/* Counter-scale the text so only the box stretches, not the lettering. */
.mtile__label span { display: inline-block; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); }
.mtile:hover .mtile__label span, .mtile:focus-visible .mtile__label span { transform: scaleX(0.588); }

/* ---------- home hero slider ---------- */
.slider { position: relative; }
.slider__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.slider__track::-webkit-scrollbar { display: none; }
.slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; min-height: 0; }
.slider__btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; background: rgba(18,18,18,0.35); border: 1px solid rgba(255,255,255,0.6); color: #fff; cursor: pointer; border-radius: 50%; }
.slider__btn:hover { background: var(--red); border-color: var(--red); }
.slider__btn--prev { left: clamp(0.5rem, 2vw, 1.5rem); }
@media (min-width: 1200px) { .slider__btn--prev { left: 74px; } }
.slider__btn--next { right: clamp(0.5rem, 2vw, 1.5rem); }
.slider__dots { position: absolute; left: 0; right: 0; bottom: 0.35rem; z-index: 5; display: flex; justify-content: center; gap: 0.35rem; }
.slider__dots button { width: 26px; height: 26px; border: 0; background: none; cursor: pointer; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.slider__dots button::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: width 0.2s ease, background 0.2s ease; }
.slider__dots button[aria-current="true"]::before { background: var(--red); width: 24px; border-radius: 5px; }

/* ---------- home contact card (Available Now panel) ---------- */
.contactcard { background: var(--ink-soft); border-radius: 14px; overflow: hidden; }
.contactcard__head { background: var(--red); color: #fff; padding: 1.3rem 1.4rem; display: flex; align-items: center; gap: 0.9rem; }
.contactcard__head svg.mark { width: 54px; height: 34px; flex: none; }
.contactcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: 0; }
.contactcard__body { padding: 1.4rem; color: #fff; }
.contactcard__body .form input, .contactcard__body .form textarea, .contactcard__body .form select { border-radius: 8px; }
.contactcard__row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; font-size: 0.9375rem; }
.contactcard__row svg { width: 20px; height: 20px; color: var(--red); flex: none; }
.contactcard__row a { color: #fff; }

.hero-slider .slide { flex: 0 0 100%; }
.hero-slider .hero { min-height: clamp(430px, 62vh, 640px); display: flex; align-items: flex-end; }
.hero-slider .hero__inner { padding-block: clamp(3rem, 8vw, 5rem) 1.5rem; }
.hero__h { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-hero); line-height: 1.15; margin: 0 0 1.25rem; }

/* ---------- dropdown navigation (MFC structure) ---------- */
.site-nav { margin-inline: auto; }
.site-nav .has-sub { position: relative; }
.site-nav .has-sub > a { display: inline-flex; align-items: center; gap: 0.35rem; }
.site-nav .caret { width: 14px; height: 14px; }
.site-nav .subnav { position: absolute; top: 100%; left: -1rem; min-width: 232px; background: var(--ink); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 0.5rem 0; flex-direction: column; gap: 0 !important; display: none; box-shadow: 0 18px 40px rgba(0,0,0,0.35); }
.site-nav .has-sub:hover > .subnav, .site-nav .has-sub:focus-within > .subnav { display: flex; }
.site-nav .subnav a { display: block; padding: 0.55rem 1.15rem; font-size: 0.9rem; border-bottom: 0; white-space: nowrap; }
.site-nav .subnav a:hover { color: #fff; background: rgba(255,255,255,0.07); border-bottom-color: transparent; }
@media (max-width: 1080px) {
  .site-nav { margin-inline: 0; }
  .site-nav .subnav { position: static; display: flex; border: 0; box-shadow: none; padding: 0 0 0.5rem 1rem; background: none; min-width: 0; }
  .site-nav .caret { display: none; }
}

/* ---------- full-bleed image sections (why invest / where we work) ---------- */
.imgsection { position: relative; overflow: hidden; color: #fff; background: var(--ink); }
.imgsection__bg { position: absolute; inset: 0; }
.imgsection__bg img, .imgsection__bg picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.imgsection__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.72); }
.imgsection__inner { position: relative; z-index: 1; text-align: center; }
.imgsection__inner .lede { margin-inline: auto; color: rgba(255,255,255,0.9); }
.statgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 1080px) { .statgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 700px) { .statgrid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .statgrid { grid-template-columns: 1fr; } }
.statcard { background: rgba(255,255,255,0.9); color: var(--ink); border-radius: 16px; padding: 1.6rem 1.2rem; text-align: center; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.statcard svg { width: 55px; height: 55px; margin: 0 auto 1rem; color: var(--ink); display: block; }
.statcard p { margin: 0; font-size: 0.9375rem; line-height: 1.6; }

/* ---------- subscribe panel ---------- */
.subscribe { background: #fff; color: var(--ink); border-radius: 12px; padding: 2rem; }
.subscribe .form { max-width: none; }
.btn-dark { background: var(--ink); color: #fff; width: 100%; justify-content: center; }
.btn-dark:hover { background: var(--red); }

/* ---------- market cards (where we work) ---------- */
.marketgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
@media (max-width: 1080px) { .marketgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .marketgrid { grid-template-columns: 1fr; } }
.marketcard { display: block; text-decoration: none; color: #fff; }
.marketcard__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.marketcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.marketcard:hover .marketcard__media img { transform: scale(1.06); }
.marketcard__body { display: block; border: 1px solid rgba(255,255,255,0.55); border-top: 0; padding: 1.1rem 1.1rem 1.3rem; text-align: center; background: rgba(18,18,18,0.35); }
.marketcard__body strong { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; margin-bottom: 0.5rem; }
.marketcard__body span { font-size: 0.875rem; color: rgba(255,255,255,0.88); }

/* ---------- article card, MFC field-guide format ---------- */
.acard { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 18px rgba(18,18,18,0.09); }
.acard__media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--grey-50); }
.acard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.acard:hover .acard__media img { transform: scale(1.05); }
.acard__body { padding: 1.2rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.acard__read { margin: 0; font-size: 0.8125rem; color: var(--grey-600); }
.acard__cat { margin: 0; font-size: 0.8125rem; color: var(--red-deep); }
.acard__title { margin: 0.2rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.25; }

/* imported MFC vector icons keep their own aspect ratio */
.statcard--tall { padding: 2.2rem 1.6rem; }
.statcard--tall svg { width: 64px; height: 64px; }
.statcard--tall h3 { font-size: 1.3rem; margin: 0 0 0.7rem; }
.spec svg { width: 30px; height: 26px; }
.pcard__icons svg { width: 24px; height: 20px; }
.statcard svg [fill="none"] { fill: none; }

/* ---------- editorial article layout ---------- */
.catrail { background: var(--paper); border-bottom: 1px solid var(--grey-200); }
.catrail__inner { display: flex; gap: 1.75rem; overflow-x: auto; padding-block: 1.05rem; scrollbar-width: none; }
.catrail__inner::-webkit-scrollbar { display: none; }
.catrail a { white-space: nowrap; text-decoration: none; font-size: 0.9375rem; color: var(--grey-700); padding-bottom: 0.3rem; border-bottom: 2px solid transparent; }
.catrail a:hover { color: var(--ink); }
.catrail a[aria-current="true"] { color: var(--ink); font-weight: 700; border-bottom-color: var(--red); }

.article { --measure: 43rem; }
.article__head, .article__body { max-width: var(--measure); margin-inline: auto; padding-inline: var(--gutter); }
.article__head { padding-top: clamp(2rem, 5vw, 3.25rem); }
.article__head h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); line-height: 1.12; letter-spacing: -0.015em; margin-bottom: 0.7rem; }
.article__standfirst { font-size: 1.1875rem; line-height: 1.55; color: var(--grey-700); margin: 0 0 1.6rem; }
.byline { display: flex; align-items: center; gap: 0.8rem; padding-bottom: 1.6rem; border-bottom: 1px solid var(--grey-200); }
.byline__avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--ink); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; flex: none; }
.byline__meta { display: flex; flex-direction: column; font-size: 0.875rem; color: var(--grey-600); line-height: 1.4; }
.byline__name { color: var(--ink); font-weight: 700; }
.article__hero { margin: 2rem auto 2.4rem; max-width: 61rem; padding-inline: var(--gutter); }
.article__hero img, .article__hero picture { width: 100%; border-radius: 12px; }

.prose--article { max-width: none; font-size: 1.0625rem; line-height: 1.78; color: #23231f; }
.prose--article > p:first-of-type { font-size: 1.1875rem; line-height: 1.65; color: var(--ink); }
.prose--article h2 { font-size: clamp(1.4rem, 2.4vw, 1.75rem); line-height: 1.25; margin: 2.6em 0 0.7em; letter-spacing: -0.01em; }
.prose--article h2::after { content: ""; display: block; width: 2.2rem; height: 3px; background: var(--red); margin-top: 0.6rem; }
.prose--article h3 { font-size: 1.2rem; margin: 2em 0 0.6em; }
.prose--article h4 { font-size: 1.0625rem; margin: 1.8em 0 0.5em; color: var(--grey-800); }
.prose--article p { margin: 0 0 1.35em; }
.prose--article ul, .prose--article ol { margin: 0 0 1.5em; padding-left: 1.3em; }
.prose--article li { margin-bottom: 0.55em; padding-left: 0.2em; }
.prose--article li::marker { color: var(--red); }
.prose--article strong { color: var(--ink); }
.prose--article blockquote { border-left: 3px solid var(--red); background: var(--grey-50); border-radius: 0 8px 8px 0; margin: 2em 0; padding: 1.2em 1.4em; font-style: normal; font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.prose--article blockquote p:last-child { margin-bottom: 0; }
.prose--article figure, .prose--article img { margin: 2.2em 0; border-radius: 10px; }
.prose--article figcaption { font-size: 0.8125rem; color: var(--grey-600); margin-top: 0.6rem; text-align: center; }
.prose--article hr { border: 0; border-top: 1px solid var(--grey-200); margin: 2.6em 0; }
.prose--article a { color: var(--red-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose--article table { font-size: 0.9375rem; margin: 2em 0; }
.prose--article th { background: var(--ink); color: #fff; font-family: var(--font-display); }
.prose--article td, .prose--article th { padding: 0.7em 0.9em; }
.prose--article tbody tr:nth-child(even) { background: var(--grey-50); }

.article__foot { border-top: 1px solid var(--grey-200); margin-top: 2.8rem; padding-top: 1.6rem; }
.article__updated { font-size: 0.875rem; color: var(--grey-600); }
.article__tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.sharerow { display: flex; align-items: center; gap: 0.7rem; font-size: 0.8125rem; color: var(--grey-600); }
.sharerow a { display: inline-flex; width: 34px; height: 34px; border-radius: 50%; background: var(--grey-50); color: var(--grey-800); align-items: center; justify-content: center; }
.sharerow a:hover { background: var(--red); color: #fff; }
.sharerow svg { width: 16px; height: 16px; }
.deskcta { margin: 3rem 0 1rem; padding: 2rem; background: var(--grey-50); border-radius: 12px; border-left: 4px solid var(--red); }
.deskcta h2 { font-size: 1.35rem; margin: 0 0 0.5rem; }
.deskcta p { color: var(--grey-700); margin-bottom: 1.2rem; }

/* ---------- listing page, myfirstcorner.com layout ---------- */
.lhead { background: var(--grey-50); padding-block: clamp(1.8rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.4rem); }
.lhead__inner { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; justify-content: space-between; }
.lhead__main { flex: 1 1 26rem; min-width: 0; }
.lhead h1 { font-size: clamp(1.75rem, 3.6vw, 2.6rem); line-height: 1.14; margin: 0 0 0.7rem; }
.lhead__loc { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 1.0625rem; color: var(--ink); }
.lhead__loc svg { width: 22px; height: 22px; color: var(--red); flex: none; }
.lhead__price { border-left: 3px solid var(--red); padding-left: 1.1rem; flex: 0 0 auto; }
.lhead__tag { margin: 0; font-family: var(--font-accent); font-weight: 500; font-size: 0.8125rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); }
.lhead__amount { margin: 0.1rem 0 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(2rem, 4vw, 2.9rem); line-height: 1; }
.lhead__amount sup { font-size: 0.5em; top: -0.7em; font-weight: 700; }
.lhead__sub { margin: 0.2rem 0 0; font-size: 0.9375rem; color: var(--grey-600); }

.lgal { position: relative; background: var(--grey-50); }
.lgal__track { display: flex; gap: 3px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.lgal__track::-webkit-scrollbar { display: none; }
.lgal__frame { flex: 0 0 34%; scroll-snap-align: start; aspect-ratio: 4 / 3; overflow: hidden; display: block; background: var(--grey-200); cursor: zoom-in; }
@media (max-width: 900px) { .lgal__frame { flex-basis: 62%; } }
@media (max-width: 560px) { .lgal__frame { flex-basis: 88%; } }
.lgal__frame img, .lgal__frame picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.lgal__frame:hover img { transform: scale(1.04); }
.lgal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 46px; height: 46px; border-radius: 50%; border: 0; background: rgba(18,18,18,0.72); color: #fff; cursor: pointer; font-size: 1.1rem; }
.lgal__nav:hover { background: var(--red); }
.lgal__nav--prev { left: 1rem; }
.lgal__nav--next { right: 1rem; }
@media (min-width: 1200px) { .lgal__nav--prev { left: 74px; } }
.lgal__count { margin: 0; padding: 0.6rem var(--gutter); font-size: var(--fs-tiny); color: var(--grey-600); background: var(--grey-50); }

.lstrip { background: var(--grey-200); }
.lstrip__inner { display: flex; flex-wrap: wrap; }
.lstrip__cell { padding: 1rem 1.6rem; font-size: 0.9375rem; border-right: 1px solid rgba(18,18,18,0.14); }
.lstrip__cell:last-child { border-right: 0; }
.lstrip__k { color: var(--grey-700); }

.lbody { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); gap: 3rem; padding-block: clamp(2.2rem, 5vw, 3.4rem); align-items: start; }
@media (max-width: 980px) { .lbody { grid-template-columns: 1fr; } }
.lbody__main h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 2.2rem 0 1rem; }
.lbody__main > h2:first-child { margin-top: 0; }
.lfeatures { color: var(--grey-700); }
.lref { margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--grey-200); font-size: var(--fs-tiny); color: var(--grey-600); }
.lplan { display: block; cursor: zoom-in; }
.lplan img { border-radius: 8px; }

.iconbox { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--grey-200); border-radius: 10px; background: var(--grey-50); margin: 2rem 0; }
@media (max-width: 640px) { .iconbox { grid-template-columns: repeat(2, 1fr); } }
.iconbox__cell { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 1.4rem 0.8rem; text-align: center; border-right: 1px solid var(--grey-200); font-size: 0.9375rem; color: var(--grey-700); }
.iconbox__cell:last-child { border-right: 0; }
.iconbox__cell svg { width: 40px; height: 34px; color: var(--ink); }
.iconbox__cell strong { color: var(--ink); }

.specbox { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 2rem; border: 1px solid var(--grey-200); border-radius: 10px; background: var(--grey-50); padding: 1.4rem 1.6rem; }
@media (max-width: 640px) { .specbox { grid-template-columns: 1fr; } }
.specbox__row { display: flex; align-items: center; gap: 0.7rem; margin: 0; font-size: 0.9375rem; color: var(--grey-700); }
.specbox__row svg { width: 26px; height: 22px; color: var(--ink); flex: none; }
.specbox__row strong { color: var(--ink); }

.lcard { border-radius: 12px; overflow: hidden; position: sticky; top: calc(var(--header-h) + 1rem); }
.lcard__head { background: var(--red); color: #fff; padding: 1.4rem; display: flex; align-items: center; gap: 1rem; }
.lcard__head .mark { width: 58px; height: 36px; flex: none; }
.lcard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; margin: 0 0 0.4rem; }
.lcard__body { background: var(--grey-50); padding: 1.4rem; }
.lcard__row { display: flex; align-items: center; gap: 0.6rem; margin: 0 0 0.6rem; font-size: 0.9375rem; }
.lcard__row svg { width: 22px; height: 20px; color: var(--red); flex: none; }
.lcard__h { font-size: 1.2rem; margin: 1.3rem 0 0.9rem; }
.lcard__send { width: 100%; justify-content: center; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 300; background: rgba(12,12,12,0.94); display: flex; align-items: center; justify-content: center; gap: 1rem; padding: clamp(1rem, 4vw, 3rem); }
.lightbox[hidden] { display: none; }
.lightbox__stage { margin: 0; max-width: min(1200px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 0.8rem; }
.lightbox__stage img { max-width: 100%; max-height: 82vh; width: auto; height: auto; object-fit: contain; border-radius: 4px; }
.lightbox__caption { color: rgba(255,255,255,0.75); font-size: var(--fs-small); }
.lightbox__close { position: absolute; top: 1rem; right: 1.2rem; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font-size: 1.7rem; line-height: 1; cursor: pointer; }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--red); border-color: var(--red); }
.lightbox__nav { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: transparent; color: #fff; font-size: 1.3rem; cursor: pointer; }
@media (max-width: 620px) { .lightbox__nav { position: absolute; bottom: 1.2rem; } .lightbox__nav--prev { left: 22%; } .lightbox__nav--next { right: 22%; } }

/* listing body extras shared by projects and beachfront */
.lnote { font-size: var(--fs-tiny); color: var(--grey-600); margin: 0 0 1.6rem; }
.lnotice { margin-top: 1.8rem; }
.lbullets { margin: 0 0 1.6rem; padding-left: 1.2em; }
.lbullets li { margin-bottom: 0.5em; }
.lbullets li::marker { color: var(--red); }
.lbody__main .lede { font-size: 1.125rem; color: var(--grey-700); margin-bottom: 1.4rem; max-width: none; }

/* ---------- home hero, myfirstcorner.com format ---------- */
/* A contained band, not a full-bleed hero: 1360x450 on a 1440 viewport, sitting
   on the dark page with the page gutter either side. */
.mhero { --mhero-inset: clamp(1.25rem, 6vw, 5.4rem); --mhero-pad: clamp(0.75rem, 5.2vw, 4.7rem); position: relative; background: var(--ink); padding: 0 var(--mhero-pad); }
.mhero__track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mhero__track::-webkit-scrollbar { display: none; }
.mhero__slide { position: relative; flex: 0 0 100%; scroll-snap-align: start; height: 455px; overflow: hidden; }
@media (max-width: 900px) { .mhero__slide { height: 400px; } }
@media (max-width: 560px) { .mhero__slide { height: 460px; } }
.mhero__media { position: absolute; inset: 0; }
.mhero__media img, .mhero__media picture { width: 100%; height: 100%; object-fit: cover; }
.mhero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(18,18,18,0.52) 0%, rgba(18,18,18,0.28) 46%, rgba(18,18,18,0.05) 72%); }
.mhero__copy { position: absolute; left: var(--mhero-inset); top: 50%; transform: translateY(-58%); z-index: 2; max-width: min(46rem, 62%); color: #fff; }
@media (max-width: 700px) { .mhero__copy { max-width: none; right: 1.25rem; transform: translateY(-72%); } }
.mhero .eyebrow { text-shadow: 0 1px 3px rgba(0,0,0,0.55); }
.mhero__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.4vw, 2.75rem); line-height: 1.14; margin: 0 0 1.6rem; color: #fff; }
.mhero__actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin: 0; }
.mhero__specs { position: absolute; right: var(--mhero-inset); bottom: 0; z-index: 2; display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 1.7rem); min-width: min(552px, 100%); padding: clamp(1.1rem, 2.7vw, 2.4rem) clamp(1.2rem, 2.6vw, 2.4rem); border-radius: 14px 14px 0 0; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--ink); }
@supports not (backdrop-filter: blur(6px)) { .mhero__specs { background: rgba(255,255,255,0.9); } }
@media (max-width: 700px) { .mhero__specs { left: 0; right: 0; min-width: 0; justify-content: space-between; gap: 0.6rem; padding-inline: 1.1rem; } }
.mhero__spec { display: flex; flex-direction: column; align-items: center; gap: 0.55rem; font-size: 0.875rem; white-space: nowrap; text-align: center; }
.mhero__spec svg { width: 36px; height: 28px; color: var(--red); }
.mhero__price { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.5rem); line-height: 1; margin-left: auto; }
.mhero__price sup { font-size: 0.5em; top: -0.75em; }
.mhero__price small { display: block; margin-top: 0.15rem; font-family: var(--font-text); font-weight: 400; font-size: 0.9rem; line-height: 1; color: var(--grey-600); }
/* plain glyph arrows sitting on the image edges, as on the source site */
.mhero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; border: 0; background: none; color: #fff; font-size: 1.9rem; line-height: 1; cursor: pointer; padding: 0.4rem 0.6rem; opacity: 0.85; }
.mhero__nav:hover { opacity: 1; color: var(--red); }
.mhero__nav--prev { left: calc(var(--mhero-pad) + 7px); }
.mhero__nav--next { right: calc(var(--mhero-pad) + 7px); }
@media (max-width: 700px) { .mhero__nav { top: 34%; font-size: 1.5rem; } .mhero__nav--prev { left: 0.4rem; } .mhero__nav--next { right: 0.4rem; } }
.slider__dots[hidden] { display: none; }


/* ---------------------------------------------------------------- services
   list-with-us, concierge and the office page, rebuilt against the measured
   source: dark surfaces, a short title band, and a contained content column. */

/* Shared: the short dark band the title sits in, and the dark page it opens. */
.cpage { background: var(--ink); color: #f6f6f6; }
.cband { position: relative; display: grid; place-items: center; min-height: 120px; overflow: hidden; }
.cband__media { position: absolute; inset: 0; }
.cband__media img, .cband__media picture { width: 100%; height: 100%; object-fit: cover; }
.cband__media::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.62); }
.cband__title { position: relative; z-index: 2; margin: 0; padding: 1.4rem 1rem; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4vw, 2.6rem); letter-spacing: 0.02em; color: #fff; text-align: center; }
.cpage__inner { padding-block: clamp(1.5rem, 3.4vw, 2.6rem); }

.ghostbtn { display: inline-block; margin-top: 1.4rem; padding: 0.72em 1.6em; border: 1px solid rgba(216,184,113,0.5); border-radius: 8px; color: #fff; font-size: var(--fs-small); text-decoration: none; transition: background 0.2s ease, border-color 0.2s ease; }
.ghostbtn:hover { background: rgba(216,184,113,0.12); border-color: var(--champagne); color: #fff; }

/* --- concierge: intro and closing panels, then the rollups --------------- */
.cpanel { border: 1px solid rgba(216,184,113,0.20); border-radius: 15px; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.015) 100%); padding: clamp(1.6rem, 4vw, 2.8rem) clamp(1.1rem, 3vw, 2.2rem); text-align: center; }
.cpanel--close { margin-top: clamp(1.5rem, 3vw, 2.2rem); }
.cpanel__kicker { margin: 0 0 0.7rem; font-size: var(--fs-tiny); letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); }
.cpanel__claim { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.1vw, 1.875rem); line-height: 1.3; margin: 0; color: #f6f6f6; }
.cpanel__claim--sm { font-size: clamp(1.1rem, 2.3vw, 1.35rem); }
.cpanel__sub { margin: 0.85rem auto 0; max-width: 56ch; color: rgba(246,246,246,0.72); }

.crolls__h { position: relative; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; margin: clamp(1.8rem, 3.6vw, 2.6rem) 0 1.3rem; padding-bottom: 0.8rem; color: #f6f6f6; }
.crolls__h::after { content: ""; position: absolute; left: 0; bottom: 0; width: 3.2rem; height: 2px; background: var(--champagne); }
.crolls { display: grid; gap: 1.15rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 720px) { .crolls { grid-template-columns: 1fr; } }
.croll { border: 1px solid rgba(216,184,113,0.22); border-radius: 15px; background: linear-gradient(180deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%); overflow: hidden; transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease; }
.croll:hover, .croll[open] { border-color: rgba(216,184,113,0.42); background: linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 100%); }
.croll--wide { grid-column: 1 / -1; }
.croll__head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.15rem 1.35rem; cursor: pointer; list-style: none; }
.croll__head::-webkit-details-marker { display: none; }
.croll__icon { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(216,184,113,0.28); border-radius: 10px; background: rgba(0,0,0,0.28); transition: border-color 0.25s ease; }
.croll:hover .croll__icon, .croll[open] .croll__icon { border-color: rgba(216,184,113,0.55); }
.croll__icon img, .croll__icon picture { width: 28px; height: 28px; object-fit: contain; filter: brightness(1.9) contrast(1.15); }
.croll__icon svg { width: 24px; height: 24px; color: var(--champagne); }
.croll__text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.croll__title { font-weight: 700; font-size: 0.95rem; color: #f6f6f6; }
.croll__line { font-size: var(--fs-small); color: rgba(246,246,246,0.66); }
.croll__count { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--champagne); }
.croll__chev { width: 11px; height: 8px; transition: transform 0.25s ease; }
.croll[open] .croll__chev { transform: rotate(180deg); }
.croll__list { margin: 0; padding: 0 1.15rem 1.15rem; list-style: none; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.croll__list li { font-size: var(--fs-tiny); line-height: 1.3; padding: 0.38rem 0.8rem; border: 1px solid rgba(216,184,113,0.24); border-radius: 999px; background: rgba(0,0,0,0.18); color: rgba(246,246,246,0.88); }

/* Before and after, as a wipe. */
.cwipe { position: relative; border-radius: 15px; overflow: hidden; line-height: 0; }
.cwipe img { display: block; width: 100%; height: clamp(260px, 52vw, 760px); object-fit: cover; }
.cwipe__top { position: absolute; inset: 0; width: 72%; overflow: hidden; }
.cwipe__top img { width: 100vw; max-width: none; }
.cwipe__tag { position: absolute; top: 0; z-index: 3; padding: 0.55em 1.4em; font-size: var(--fs-tiny); letter-spacing: 0.12em; }
.cwipe__tag--before { left: 0; background: #fff; color: var(--ink); }
.cwipe__tag--after { right: 0; background: #4a2f27; color: #fff; }
.cwipe__range { position: absolute; inset: auto 0 0 0; z-index: 4; width: 100%; margin: 0; opacity: 0; height: 100%; cursor: ew-resize; }
.cwipe__handle { position: absolute; top: 0; bottom: 0; left: 72%; z-index: 3; width: 2px; background: rgba(255,255,255,0.9); pointer-events: none; }

/* --- list-with-us: copy left, one property right ------------------------- */
.lwu { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--ink); color: #f6f6f6; }
@media (max-width: 860px) { .lwu { grid-template-columns: 1fr; } }
.lwu__copy { padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.6rem); padding-left: clamp(1.25rem, 7vw, 6.5rem); align-self: center; }
.lwu__eyebrow { color: var(--red); margin: 0 0 1rem; }
.lwu__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2rem); letter-spacing: 0.01em; margin: 0 0 1.4rem; color: #fff; }
.lwu__p { margin: 0 0 1.1rem; max-width: 52ch; color: rgba(246,246,246,0.78); }
.lwu__talk { font-family: var(--font-display); font-size: 1.05rem; margin: 2rem 0 0.9rem; color: #fff; }
.lwu__chat { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.chatpill { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.6rem 1.2rem 0.6rem 0.6rem; border-radius: 999px; background: rgba(255,255,255,0.10); color: #fff; font-size: var(--fs-small); text-decoration: none; transition: background 0.2s ease; }
.chatpill:hover { background: rgba(255,255,255,0.18); }
.chatpill__mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: #fff; }
.chatpill__mark svg { width: 18px; height: 18px; }
.chatpill__mark--wa { background: #25d366; }
.chatpill__mark--tg { background: #229ed9; }
.lwu__shot { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; min-height: 320px; }
.lwu__shot img, .lwu__shot picture { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lwu__plate { position: absolute; left: 0; bottom: 0; z-index: 2; padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 2.5vw, 1.8rem); background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,0.72) 70%); width: 100%; }
.lwu__pname { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.1rem, 2.4vw, 1.55rem); margin: 0; color: #fff; }
.lwu__pname::after { content: ""; display: block; width: 2.6rem; height: 3px; margin-top: 0.4rem; background: var(--red); }
.lwu__ploc { margin: 0.45rem 0 0; font-size: var(--fs-tiny); letter-spacing: 0.1em; color: rgba(255,255,255,0.84); }
.lwu__enquire { position: absolute; right: clamp(1rem, 2.5vw, 1.8rem); bottom: clamp(1.4rem, 3vw, 2.2rem); z-index: 3; padding: 0.8em 1.8em; border-radius: 999px; background: rgba(18,18,18,0.82); font-size: var(--fs-small); letter-spacing: 0.06em; }
.lwu__shot:hover .lwu__enquire { background: var(--red); }

/* --- office -------------------------------------------------------------- */
.ofc, .brief, .omap { position: relative; overflow: hidden; }
.ofc__bg, .brief__bg, .omap__bg { position: absolute; inset: 0; }
.ofc__bg img, .brief__bg img, .omap__bg img,
.ofc__bg picture, .brief__bg picture, .omap__bg picture { width: 100%; height: 100%; object-fit: cover; }
.ofc__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.86); }
.brief__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.90); }
.omap__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.78); }
.ofc__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; padding-block: clamp(2.2rem, 5vw, 4.5rem); }
@media (max-width: 860px) { .ofc__inner { grid-template-columns: 1fr; } }
.ofc__eyebrow { color: var(--red); margin: 0 0 0.9rem; }
.ofc__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.7rem, 4.2vw, 2.9rem); line-height: 1.1; margin: 0; color: #fff; }
.ofc__rule { display: block; width: 9rem; height: 3px; margin: 1.1rem 0 1.6rem; background: var(--red); }
.ofc__p { margin: 0 0 1.1rem; max-width: 54ch; color: rgba(246,246,246,0.78); }
.ofc__label { display: flex; align-items: center; gap: 0.65rem; margin: 1.8rem 0 0.5rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; color: #fff; }
.ofc__label svg { width: 26px; height: 26px; color: var(--red); }
.ofc__address { margin: 0; padding-left: 2.3rem; font-size: var(--fs-small); color: rgba(246,246,246,0.78); }
.ofc__services { margin: 0; padding-left: 3.4rem; color: rgba(246,246,246,0.88); }
.ofc__services li { margin-bottom: 0.3rem; }
.ofc__hours { margin: 1rem 0 0; padding-left: 2.3rem; font-size: var(--fs-tiny); color: rgba(246,246,246,0.58); }
.ofc__shot { margin: 0; border-radius: 4px; overflow: hidden; }
.ofc__shot img, .ofc__shot picture { display: block; width: 100%; height: clamp(300px, 56vw, 760px); object-fit: cover; }

.brief__inner { position: relative; z-index: 2; padding-block: clamp(2.2rem, 5vw, 4rem); }
.brief__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.2vw, 2.1rem); text-align: center; margin: 0 0 1.8rem; color: #fff; }
.brief__form { max-width: 640px; margin: 0 auto; padding: clamp(1.1rem, 3vw, 1.9rem); border-radius: 10px; background: rgba(58,58,58,0.92); }
.brief__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 560px) { .brief__row { grid-template-columns: 1fr; } }
.brief__form input[type="text"], .brief__form input:not([type]), .brief__form input[type="email"], .brief__form input[type="tel"] { width: 100%; padding: 0.75rem 0.9rem; border: 0; border-radius: 6px; background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-small); }
.brief__field { margin: 1.1rem 0 0; padding: 0; border: 0; }
.brief__field > label, .brief__field legend { display: block; padding: 0; margin-bottom: 0.5rem; font-size: var(--fs-small); color: rgba(246,246,246,0.82); }
.brief__chips { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span { display: inline-block; padding: 0.6rem 1.1rem; border-radius: 6px; background: #fff; color: var(--ink); font-size: var(--fs-small); cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }
.chip input:checked + span { background: var(--red); color: #fff; }
.chip input:focus-visible + span { outline: 2px solid #fff; outline-offset: 2px; }
.brief__send { display: block; width: 100%; margin-top: 1.5rem; }

.omap__inner { position: relative; z-index: 2; padding-block: clamp(2rem, 4vw, 3.2rem); }
.omap__card { display: flex; align-items: center; gap: 1rem; max-width: 640px; margin: 0 auto; padding: 1.1rem 1.3rem; border: 1px solid rgba(255,255,255,0.22); border-radius: 12px; background: rgba(18,18,18,0.68); color: #fff; text-decoration: none; transition: border-color 0.2s ease; }
.omap__card:hover { border-color: var(--red); }
.omap__pin svg { width: 30px; height: 30px; color: var(--red); }
.omap__text { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.omap__text span { font-size: var(--fs-small); color: rgba(246,246,246,0.72); }
.omap__go { margin-left: auto; white-space: nowrap; font-size: var(--fs-small); color: var(--red); }

/* Concierge closing panel: the two chat channels beside one email action. */
.cpanel__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.9rem; margin-top: 1.4rem; }
.cpanel__actions .chat-icons { display: flex; gap: 0.6rem; margin: 0; }
.ghostbtn--icon { display: inline-flex; align-items: center; gap: 0.55rem; margin-top: 0; }
.ghostbtn--icon svg { width: 18px; height: 18px; }
/* Breadcrumbs sit on the dark surface on these pages; the light-page grey
   drops to about 4:1 against it, which is under the threshold for small text. */
.page-dark--full .breadcrumbs, .page-dark--full .breadcrumbs a, .page-dark--full .breadcrumbs li { color: rgba(246,246,246,0.72); }
.page-dark--full .breadcrumbs a:hover { color: #fff; }

/* Office map: the card is a button until someone asks for the Google frame. */
.omap__frame { max-width: 900px; margin: 0 auto; }
.omap__frame iframe { display: block; width: 100%; height: clamp(280px, 42vw, 460px); border: 0; border-radius: 12px; }
.omap__frame { margin-bottom: 1rem; }
.omap__note { max-width: 900px; margin: 0.7rem auto 0; font-size: var(--fs-tiny); color: rgba(246,246,246,0.6); text-align: center; }
.omap__note a { color: rgba(246,246,246,0.85); }

/* ---------------------------------------------------------------- off-plan
   The projects index, rebuilt against the source: a tall title band carrying
   the pitch, three how-we-work steps, the development grid with its yield
   figures, and the payment terms. */
.cband--tall { min-height: 300px; align-items: center; }
.cband__body { position: relative; z-index: 2; padding-block: clamp(1.8rem, 4vw, 3rem); text-align: center; }
.cband__lede { max-width: 60ch; margin: 0.9rem auto 0; font-size: var(--fs-lead); color: #fff; }
.cband__intro { max-width: 76ch; margin: 0.9rem auto 0; font-size: var(--fs-small); color: rgba(255,255,255,0.76); }
.cband__note { margin: 0.8rem 0 0; font-size: var(--fs-tiny); color: rgba(255,255,255,0.62); }
.btn-go { display: inline-block; margin-top: 1.3rem; background: #1eb954; border-color: #1eb954; color: #fff; }
.btn-go:hover { background: #17a049; border-color: #17a049; }

.opsec__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.2rem, 2.6vw, 1.6rem); letter-spacing: 0.06em; text-align: center; text-transform: uppercase; margin: 0 0 1.6rem; color: #fff; }
.ophow, .oppay { position: relative; overflow: hidden; }
.ophow__bg, .oppay__bg { position: absolute; inset: 0; }
.ophow__bg img, .oppay__bg img, .ophow__bg picture, .oppay__bg picture { width: 100%; height: 100%; object-fit: cover; }
.ophow__bg::after, .oppay__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.86); }
.ophow__inner, .oppay__inner { position: relative; z-index: 2; padding-block: clamp(2rem, 4.4vw, 3.4rem); }
.ophow__grid { display: grid; gap: clamp(0.9rem, 2.2vw, 1.5rem); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.oppay__grid { display: grid; gap: clamp(0.9rem, 2.2vw, 1.4rem); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.opstep { padding: clamp(1.3rem, 3vw, 2rem) clamp(1.1rem, 2.4vw, 1.6rem); border-radius: 12px; background: rgba(255,255,255,0.94); color: var(--ink); text-align: center; }
.opstep--pay { text-align: left; }
.opstep__icon { display: block; margin: 0 auto 1rem; }
.opstep__icon svg { width: 40px; height: 40px; color: var(--ink); }
.opstep__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.55rem; }
.opstep__text { margin: 0; font-size: var(--fs-small); color: var(--grey-600); }
.ophow__ask { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; margin-top: 1.8rem; }
.ophow__askh { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,0.8); }
.ophow__ask .chat-icons { display: flex; gap: 0.6rem; }

.opgrid { display: grid; gap: clamp(0.8rem, 2vw, 1.3rem); grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
/* Hovers like the listing cards: the photograph zooms and fades back to the
   card's white, the mark comes up cropped by the bottom-right corner, and the
   figures switch to ink so they stay readable once the dark gradient goes. */
.opcard { position: relative; display: block; border-radius: 12px; overflow: hidden; background: #fff; color: #fff; text-decoration: none; aspect-ratio: 3 / 4; }
.opcard__media { position: absolute; inset: 0; z-index: 1; }
.opcard__media img, .opcard__media picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease, opacity 0.4s ease; }
.opcard:hover .opcard__media img, .opcard:focus-visible .opcard__media img { transform: scale(1.55); opacity: 0.5; }
.opcard__mark { position: absolute; right: -5%; bottom: 5%; z-index: 1; width: 73%; fill: var(--red); opacity: 0; transition: opacity 0.3s ease; pointer-events: none; }
.opcard:hover .opcard__mark, .opcard:focus-visible .opcard__mark { opacity: 0.16; }
.opcard__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: 1rem 1.05rem 1.1rem; background: linear-gradient(180deg, rgba(18,18,18,0) 0%, rgba(18,18,18,0.80) 42%, rgba(18,18,18,0.92) 100%); transition: background 0.3s ease, color 0.3s ease; }
.opcard:hover .opcard__body, .opcard:focus-visible .opcard__body { background: none; color: var(--ink); }
.opcard:hover .opcard__name span, .opcard:focus-visible .opcard__name span,
.opcard:hover .opcard__figs, .opcard:focus-visible .opcard__figs,
.opcard:hover .opcard__figs dt, .opcard:focus-visible .opcard__figs dt { color: var(--grey-600); }
.opcard__price { font-family: var(--font-display); font-weight: 700; font-size: 1.45rem; line-height: 1.1; margin: 0 0 0.2rem; }
.opcard__name { margin: 0 0 0.5rem; font-size: 0.8125rem; line-height: 1.3; }
.opcard__name span { color: rgba(255,255,255,0.72); }
.opcard__figs { margin: 0; display: grid; gap: 0.12rem; font-size: 0.6875rem; line-height: 1.35; color: rgba(255,255,255,0.82); }
.opcard__figs > div { display: flex; gap: 0.35rem; }
.opcard__figs dt { margin: 0; color: rgba(255,255,255,0.62); }
.opcard__figs dd { margin: 0; font-weight: 600; }
.opnotice { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.page-dark--full .notice { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); color: rgba(246,246,246,0.78); }
.brief__chat { display: flex; justify-content: center; margin-top: 1.3rem; }
.brief__chat .chat-icons { display: flex; gap: 0.7rem; }

/* --------------------------------------------------------- district strip
   Fourteen tall tiles that widen on hover, as on the source page. Names run
   down the tile, which is the only way fourteen labels fit across 1440px. */
.dstrip { display: flex; gap: 5px; padding: clamp(0.75rem, 2vw, 1.4rem) clamp(0.75rem, 2.8vw, 2.5rem); background: var(--ink); }
.dtile { position: relative; flex: 1 1 0; min-width: 0; height: clamp(200px, 26vw, 270px); border-radius: 4px; overflow: hidden; text-decoration: none; transition: flex-grow 0.35s ease; }
.dtile:hover, .dtile:focus-visible { flex-grow: 3.4; }
.dtile__media { position: absolute; inset: 0; }
.dtile__media img, .dtile__media picture { width: 100%; height: 100%; object-fit: cover; }
.dtile::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.55); transition: background 0.35s ease; }
.dtile:hover::after, .dtile:focus-visible::after { background: rgba(18,18,18,0.28); }
.dtile__name { position: absolute; left: 50%; bottom: 1rem; z-index: 2; transform: translateX(-50%) rotate(180deg); writing-mode: vertical-rl; white-space: nowrap; font-size: 0.875rem; letter-spacing: 0.04em; color: #fff; }
@media (max-width: 900px) {
  .dstrip { overflow-x: auto; scroll-snap-type: x mandatory; }
  .dtile { flex: 0 0 96px; scroll-snap-align: start; }
  .dtile:hover, .dtile:focus-visible { flex-grow: 0; }
}

.dbody { position: relative; overflow: hidden; }
.dbody__bg { position: absolute; inset: 0; }
.dbody__bg img, .dbody__bg picture { width: 100%; height: 100%; object-fit: cover; }
.dbody__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.90); }
.dbody__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.7fr); gap: clamp(1.5rem, 4vw, 3.4rem); align-items: start; padding-block: clamp(2rem, 4.6vw, 3.6rem); }
@media (max-width: 860px) { .dbody__inner { grid-template-columns: 1fr; } }
.dbody__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 0.9rem; color: #fff; }
.dbody__lede { max-width: 56ch; margin: 0 0 1.8rem; color: rgba(246,246,246,0.78); }
.dbody__inner .brief__form { margin: 0; }
.dmap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 1rem; margin: 0; padding: 0; list-style: none; }
.dmap a { display: block; padding: 0.5rem 0; font-size: var(--fs-small); color: rgba(246,246,246,0.82); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.10); }
.dmap a:hover { color: #fff; border-color: var(--red); }

/* ------------------------------------------------------ district map (SVG)
   Each district is a link. The red fill on hover is what the source does with
   a swapped overlay image; here it is a fill change on the shape itself, so it
   also responds to keyboard focus. */
.dmapfig { margin: 0; }
.dmap { display: block; width: 100%; height: auto; overflow: visible; }
.dmap__zone { cursor: pointer; }
.dmap__zone path { fill: #6f6f6f; stroke: #121212; stroke-width: 3; transition: fill 0.18s ease; }
.dmap__zone:hover path, .dmap__zone:focus-visible path { fill: var(--red); }
.dmap__zone:focus { outline: none; }
.dmap__zone:focus-visible path { stroke: #fff; stroke-width: 5; }
.dmap__label { fill: #fff; font-family: var(--font-text); font-size: 15px; letter-spacing: 0.04em; pointer-events: none; }
.dmap__label--sm { font-size: 10px; }
.dmapfig__cap { margin-top: 0.9rem; font-size: var(--fs-tiny); color: rgba(246,246,246,0.55); }
@media (max-width: 860px) { .dmap__label { font-size: 19px; } .dmap__label--sm { font-size: 13px; } }
.dmapfig__readout { min-height: 2.6em; margin-top: 0.9rem; font-size: var(--fs-small); color: rgba(246,246,246,0.82); }
.dmapfig__readout strong { color: #fff; }
.dmapfig__readout span { color: rgba(246,246,246,0.55); }
.dmap__zone.is-armed path { fill: var(--red); }


/* ------------------------------------------------------------- guide tabs
   Six categories per district. Driven by radio inputs so the panels exist in
   the page without script, which keeps them searchable and printable, and
   gives arrow-key navigation between tabs at no cost. */
.gtabs { margin-top: clamp(1.5rem, 3vw, 2.4rem); }
.gtabs__row { display: flex; flex-wrap: wrap; gap: 0.55rem; }
.gtabs__tab { padding: 0.75rem 1.5rem; border-radius: 8px; background: #fff; border: 1px solid var(--grey-200); color: var(--ink); font-size: var(--fs-small); cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.gtabs__tab:hover { border-color: var(--red); }


.gtabs__panels { margin-top: 0.9rem; border-radius: var(--radius); background: #fff; border: 1px solid var(--grey-200); overflow: hidden; }
.gtabs__panel { display: none; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(1rem, 3vw, 2rem); align-items: center; padding: clamp(1.2rem, 3vw, 2rem); }
@media (max-width: 820px) { .gtabs__panel { grid-template-columns: 1fr; } }
.gtabs__h { font-family: var(--font-display); font-size: clamp(1.2rem, 2.6vw, 1.6rem); text-align: center; margin: 0 0 1.4rem; }
.gtabs__copy p { margin: 0; text-align: center; color: var(--grey-700, var(--ink)); }
.gtabs__map, .gtabs__map iframe { width: 100%; }
.gtabs__map iframe { height: clamp(280px, 34vw, 480px); border: 0; border-radius: 6px; display: block; }
.gtabs__map--still img, .gtabs__map--still picture { width: 100%; height: auto; border-radius: 6px; }
.gtabs__radio:nth-of-type(1):checked ~ .gtabs__panels .gtabs__panel:nth-of-type(1),
.gtabs__radio:nth-of-type(2):checked ~ .gtabs__panels .gtabs__panel:nth-of-type(2),
.gtabs__radio:nth-of-type(3):checked ~ .gtabs__panels .gtabs__panel:nth-of-type(3),
.gtabs__radio:nth-of-type(4):checked ~ .gtabs__panels .gtabs__panel:nth-of-type(4),
.gtabs__radio:nth-of-type(5):checked ~ .gtabs__panels .gtabs__panel:nth-of-type(5),
.gtabs__radio:nth-of-type(6):checked ~ .gtabs__panels .gtabs__panel:nth-of-type(6) { display: grid; }
.gtabs__radio:nth-of-type(1):checked ~ .gtabs__row .gtabs__tab:nth-of-type(1),
.gtabs__radio:nth-of-type(2):checked ~ .gtabs__row .gtabs__tab:nth-of-type(2),
.gtabs__radio:nth-of-type(3):checked ~ .gtabs__row .gtabs__tab:nth-of-type(3),
.gtabs__radio:nth-of-type(4):checked ~ .gtabs__row .gtabs__tab:nth-of-type(4),
.gtabs__radio:nth-of-type(5):checked ~ .gtabs__row .gtabs__tab:nth-of-type(5),
.gtabs__radio:nth-of-type(6):checked ~ .gtabs__row .gtabs__tab:nth-of-type(6) { background: var(--red); border-color: var(--red); color: #fff; }
.gtabs__radio:nth-of-type(1):focus-visible ~ .gtabs__row .gtabs__tab:nth-of-type(1),
.gtabs__radio:nth-of-type(2):focus-visible ~ .gtabs__row .gtabs__tab:nth-of-type(2),
.gtabs__radio:nth-of-type(3):focus-visible ~ .gtabs__row .gtabs__tab:nth-of-type(3),
.gtabs__radio:nth-of-type(4):focus-visible ~ .gtabs__row .gtabs__tab:nth-of-type(4),
.gtabs__radio:nth-of-type(5):focus-visible ~ .gtabs__row .gtabs__tab:nth-of-type(5),
.gtabs__radio:nth-of-type(6):focus-visible ~ .gtabs__row .gtabs__tab:nth-of-type(6) { outline: 2px solid var(--ink); outline-offset: 2px; }

/* -------------------------------------------------------- interactive map
   Three filters over a map of where the book actually is. Pins mark the khan,
   not the street: the listing data has no coordinates, so the map says what it
   knows and no more. The area list beside it carries the same information for
   screen readers, for search, and for when the tiles do not load. */
.imap { position: relative; overflow: hidden; }
.imap__bg { position: absolute; inset: 0; }
.imap__bg img, .imap__bg picture { width: 100%; height: 100%; object-fit: cover; }
.imap__bg::after { content: ""; position: absolute; inset: 0; background: rgba(18,18,18,0.90); }
.imap__inner { position: relative; z-index: 2; padding-block: clamp(1.6rem, 3.6vw, 2.8rem); }
.imap__tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1rem; }
.imap__tab { flex: 1 1 200px; padding: 0.85rem 1.4rem; border: 1px solid var(--grey-200); border-radius: 8px; background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-small); cursor: pointer; transition: background 0.18s ease, color 0.18s ease; }
.imap__tab.is-on { background: var(--red); border-color: var(--red); color: #fff; }
.imap__n { opacity: 0.62; margin-left: 0.3rem; }
.imap__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.42fr); gap: clamp(0.9rem, 2vw, 1.4rem); }
@media (max-width: 860px) { .imap__stage { grid-template-columns: 1fr; } }
.imap__canvas { height: clamp(340px, 46vw, 540px); border-radius: 10px; overflow: hidden; background: var(--grey-200); }
.imap__list { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 10px; padding: 1.1rem 1.2rem; }
.imap__panel { display: none; }
.imap__panel.is-on { display: block; }
.imap__h { font-family: var(--font-display); font-size: 1.05rem; margin: 0 0 0.8rem; color: #fff; }
.imap__areas { margin: 0; padding: 0; list-style: none; }
.imap__areas a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.10); color: rgba(246,246,246,0.84); text-decoration: none; font-size: var(--fs-small); }
.imap__areas a:hover { color: #fff; }
.imap__areas strong { color: var(--red); }
.imap__empty { margin: 0; font-size: var(--fs-small); color: rgba(246,246,246,0.55); }
.imap__note { margin: 1rem 0 0; font-size: var(--fs-tiny); color: rgba(246,246,246,0.55); }
/* The pin is one element: a brand disc with its count inside. Layering a dot
   under a separate number clipped the number against the icon box. */
.imap__pin { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--red); border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.45); }
.imap__pinN { color: #fff; font-size: 0.8125rem; font-weight: 700; line-height: 1; }
.leaflet-popup-content { font-family: var(--font-text); font-size: var(--fs-small); }
.leaflet-popup-content a { color: var(--red); }

/* ------------------------------------------------------------------ header
   One baseline for the whole bar. The three groups used to settle at slightly
   different heights, which is what read as untidy; aligning on centre and
   giving every control the same height fixes it at the root rather than by
   nudging margins.

   Labels are condensed uppercase on wide tracking, measured from the reference
   the client sent: 13.5px, weight 500, 4.6px tracking at the top level and
   1.6px in the dropdowns. */
.site-header__bar { display: flex; align-items: center; gap: clamp(1rem, 2.4vw, 2.4rem); min-height: 76px; }
.site-nav { margin-left: auto; }
.site-nav > ul { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); margin: 0; padding: 0; list-style: none; }
.site-nav > ul > li { position: relative; display: flex; align-items: center; }
.site-nav > ul > li > a { display: inline-flex; align-items: center; height: 76px; font-family: var(--font-nav); font-weight: 500; font-size: 13.5px; letter-spacing: 0.34em; text-transform: uppercase; color: rgba(255,255,255,0.92); text-decoration: none; white-space: nowrap; transition: color 0.18s ease; }
.site-nav > ul > li > a:hover, .site-nav > ul > li:focus-within > a { color: var(--red); }

/* Dropdown: a plain column, opening on hover and on focus so it is reachable
   from a keyboard rather than mouse-only. */
.site-nav .subnav { position: absolute; top: 76px; left: 50%; transform: translateX(-50%) translateY(-6px); z-index: 60; min-width: 15rem; padding: 1.1rem 1.3rem; margin: 0; list-style: none; background: #0c0c0c; border: 1px solid rgba(255,255,255,0.10); border-radius: 4px; opacity: 0; visibility: hidden; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; }
.site-nav .has-sub:hover .subnav, .site-nav .has-sub:focus-within .subnav { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
.site-nav .subnav li { display: block; }
.site-nav .subnav a { display: block; padding: 0.44rem 0; font-family: var(--font-nav); font-weight: 500; font-size: 13.5px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.62); text-decoration: none; white-space: nowrap; transition: color 0.16s ease; }
.site-nav .subnav a:hover, .site-nav .subnav a:focus-visible { color: #fff; }

.header-cta { display: flex; align-items: center; gap: 0.55rem; }
.header-cta__book { font-family: var(--font-nav); font-weight: 600; font-size: 13.5px; letter-spacing: 0.16em; text-transform: uppercase; white-space: nowrap; }

/* The + . Rotates into a cross when the panel is open. */
.plusbtn { display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid rgba(255,255,255,0.28); border-radius: 4px; background: none; cursor: pointer; transition: border-color 0.2s ease, background 0.2s ease; }
.plusbtn:hover { border-color: var(--red); background: rgba(215,4,4,0.10); }
.plusbtn__glyph { position: relative; display: block; width: 17px; height: 17px; }
.plusbtn__glyph::before, .plusbtn__glyph::after { content: ""; position: absolute; inset: 0; margin: auto; background: #fff; transition: transform 0.28s ease; }
.plusbtn__glyph::before { width: 17px; height: 1.5px; }
.plusbtn__glyph::after { width: 1.5px; height: 17px; }
.plusbtn[aria-expanded="true"] .plusbtn__glyph::before { transform: rotate(135deg); }
.plusbtn[aria-expanded="true"] .plusbtn__glyph::after { transform: rotate(135deg); }

/* ------------------------------------------------------------- full menu */
.fullmenu[hidden] { display: none; }
.fullmenu { position: fixed; inset: 0; z-index: 300; overflow-y: auto; }
.fullmenu__bg { position: fixed; inset: 0; background: #0a0a0a; }
.fullmenu__close { position: fixed; top: 1.6rem; right: clamp(1rem, 4vw, 3rem); z-index: 3; width: 40px; height: 40px; border: 0; background: none; cursor: pointer; }
.fullmenu__close::before, .fullmenu__close::after { content: ""; position: absolute; inset: 0; margin: auto; width: 22px; height: 2px; background: var(--red); }
.fullmenu__close::before { transform: rotate(45deg); }
.fullmenu__close::after { transform: rotate(-45deg); }
.fullmenu__inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.75fr); gap: clamp(2rem, 6vw, 5rem); padding-block: clamp(4rem, 9vh, 7rem); }
@media (max-width: 900px) { .fullmenu__inner { grid-template-columns: 1fr; } }
.fullmenu__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(1.6rem, 4vw, 3rem); align-content: start; }
.fullmenu__h { font-family: var(--font-nav); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.26em; text-transform: uppercase; color: #fff; margin: 0 0 1rem; }
.fullmenu__col ul { margin: 0; padding: 0; list-style: none; }
.fullmenu__col a { display: block; padding: 0.34rem 0; font-family: var(--font-nav); font-weight: 400; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.56); text-decoration: none; transition: color 0.16s ease; }
.fullmenu__col a:hover, .fullmenu__col a:focus-visible { color: #fff; }
.fullmenu__card { text-align: center; align-self: start; }
.fullmenu__mark { width: 110px; height: auto; margin: 0 auto 1rem; display: block; }
.fullmenu__name { font-family: var(--font-nav); font-weight: 500; font-size: 1.6rem; letter-spacing: 0.3em; text-transform: uppercase; color: #fff; margin: 0; }
.fullmenu__tag { font-family: var(--font-nav); font-size: 0.8rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--red); margin: 0.35rem 0 1.4rem; padding-top: 0.6rem; border-top: 1px solid rgba(255,255,255,0.22); display: inline-block; }
.fullmenu__contact { font-size: var(--fs-small); color: rgba(255,255,255,0.78); margin: 0 0 1.8rem; }
.fullmenu__contact a { color: inherit; text-decoration: none; }
.fullmenu__contact a:hover { color: #fff; }
.fullmenu__contact span { margin: 0 0.6rem; color: rgba(255,255,255,0.3); }
.fullmenu__offices { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-bottom: 1.8rem; }
.fullmenu__offices h3 { font-family: var(--font-nav); font-weight: 500; font-size: 0.95rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin: 0 0 0.4rem; }
.fullmenu__offices p { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,0.72); }
.fullmenu__follow { font-family: var(--font-nav); font-size: 0.85rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.7); margin: 0 0 0.8rem; }
/* The rail is fixed to the page edge in its normal home; inside the panel it
   becomes an ordinary centred row. */
.fullmenu__social .social-rail { position: static; transform: none; flex-direction: row; justify-content: center; gap: 1.1rem; background: none; padding: 0; }
.fullmenu__social .social-rail a { width: 24px; height: 24px; background: none; }
.fullmenu__social .social-rail svg { width: 19px; height: 19px; fill: #fff; }
.cwipe__intro { max-width: 62ch; margin: 0 0 clamp(1.2rem, 2.6vw, 1.9rem); }
.cwipe__intro p { margin: 0 0 0.9rem; color: rgba(246,246,246,0.78); }
.cwipe__intro p:last-child { margin-bottom: 0; font-size: var(--fs-small); color: rgba(246,246,246,0.55); }

/* The concierge hero. Taller than the plain title bands so the photograph can
   actually be seen, but still under a heavy screen: the client's instruction
   was that the image sets the tone and the services take the attention. The
   focal point (the gloved hands) sits right of centre, so the crop holds that
   rather than the empty lobby when the band narrows. */
.cband--hero { min-height: clamp(260px, 34vw, 380px); }
.cband--hero .cband__media img, .cband--hero .cband__media picture { object-position: 65% 60%; }
.cband--hero .cband__media::after { background: linear-gradient(180deg, rgba(18,18,18,0.72) 0%, rgba(18,18,18,0.60) 45%, rgba(18,18,18,0.80) 100%); }
.cband--hero .cband__title { text-shadow: 0 2px 18px rgba(0,0,0,0.6); }

/* ---------------------------------------------------------- services index
   Four cards, each previewing the page it opens. Same hover language as the
   listing cards, so the site behaves consistently: the photograph lifts and
   dims, the champagne edge comes up, and the number turns brand red. */
.svc__lede { max-width: 68ch; margin: 0 auto clamp(1.6rem, 3.4vw, 2.6rem); font-size: var(--fs-lead); text-align: center; color: rgba(246,246,246,0.82); }
.svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.5rem); }
@media (max-width: 760px) { .svc { grid-template-columns: 1fr; } }
.svccard { position: relative; display: block; min-height: clamp(280px, 30vw, 360px); border: 1px solid rgba(216,184,113,0.20); border-radius: 15px; overflow: hidden; text-decoration: none; background: var(--ink); transition: border-color 0.25s ease, transform 0.25s ease; }
.svccard:hover, .svccard:focus-visible { border-color: rgba(216,184,113,0.55); transform: translateY(-3px); }
.svccard__media { position: absolute; inset: 0; }
.svccard__media img, .svccard__media picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.svccard:hover .svccard__media img { transform: scale(1.05); }
.svccard__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,0.52) 0%, rgba(18,18,18,0.80) 55%, rgba(18,18,18,0.94) 100%); transition: background 0.25s ease; }
.svccard:hover .svccard__media::after { background: linear-gradient(180deg, rgba(18,18,18,0.42) 0%, rgba(18,18,18,0.74) 55%, rgba(18,18,18,0.92) 100%); }
.svccard__body { position: absolute; inset: auto 0 0 0; z-index: 2; padding: clamp(1.3rem, 3vw, 2rem); }
.svccard__n { display: block; font-family: var(--font-nav); font-size: 0.8rem; letter-spacing: 0.3em; color: var(--champagne); margin-bottom: 0.5rem; transition: color 0.25s ease; }
.svccard:hover .svccard__n { color: var(--red); }
.svccard__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.15rem, 2.3vw, 1.5rem); margin: 0 0 0.5rem; color: #fff; }
.svccard__t { margin: 0 0 1rem; font-size: var(--fs-small); color: rgba(246,246,246,0.76); max-width: 46ch; }
.svccard__go { font-family: var(--font-nav); font-size: 0.85rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); }
.svccard:hover .svccard__go { color: #fff; }
.svc__close { margin-top: clamp(1.6rem, 3.4vw, 2.6rem); }

/* --------------------------------------------------------------- markets
   Four panels sharing one full-bleed row. At rest they are equal; the one
   under the pointer or under focus takes roughly double the width and its
   neighbours give it up, so the row never changes total size and nothing below
   it moves. Names run vertically because four of them across will not fit any
   other way, and the detail only appears once a panel has the room to hold it. */
.mkt { background: var(--ink); padding-bottom: clamp(2rem, 4vw, 3.4rem); }
.mkt__head { padding-top: clamp(1.6rem, 3.4vw, 2.6rem); }
.mkt__lede { max-width: 68ch; margin: 0 0 clamp(1.2rem, 2.6vw, 2rem); color: rgba(246,246,246,0.76); }
.mkt__row { display: flex; width: 100%; height: clamp(360px, 42vw, 560px); overflow: hidden; }
.mktpanel { position: relative; flex: 1 1 0; min-width: 0; display: block; overflow: hidden; text-decoration: none; border-left: 1px solid rgba(0,0,0,0.5); transition: flex-grow 0.45s cubic-bezier(0.4, 0, 0.2, 1); }
.mktpanel:first-child { border-left: 0; }
.mktpanel:hover, .mktpanel:focus-visible { flex-grow: 2.4; }
.mktpanel:focus { outline: none; }
.mktpanel:focus-visible { outline: 2px solid var(--champagne); outline-offset: -2px; }
.mktpanel__media { position: absolute; inset: 0; }
.mktpanel__media img, .mktpanel__media picture { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.mktpanel:hover .mktpanel__media img { transform: scale(1.04); }
.mktpanel__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,18,18,0.30) 0%, rgba(18,18,18,0.62) 60%, rgba(18,18,18,0.86) 100%); transition: background 0.4s ease; }
.mktpanel:hover .mktpanel__media::after { background: linear-gradient(180deg, rgba(18,18,18,0.22) 0%, rgba(18,18,18,0.55) 60%, rgba(18,18,18,0.84) 100%); }
/* The name, reading bottom to top against the right edge. */
.mktpanel__name { position: absolute; right: clamp(0.9rem, 2vw, 1.6rem); bottom: clamp(1.2rem, 3vw, 2.2rem); z-index: 3; display: flex; align-items: center; gap: 0.9rem; writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-nav); font-weight: 500; font-size: clamp(1rem, 1.8vw, 1.35rem); letter-spacing: 0.26em; text-transform: uppercase; color: #fff; white-space: nowrap; }
.mktpanel__tick { display: block; width: 2px; height: 2.2rem; background: var(--red); }
/* Held back until the panel is wide enough to read it in. */
.mktpanel__detail { position: absolute; left: clamp(1rem, 2.4vw, 2rem); right: clamp(3.4rem, 6vw, 5rem); bottom: clamp(1.2rem, 3vw, 2.2rem); z-index: 3; display: flex; flex-direction: column; gap: 0.8rem; opacity: 0; transform: translateY(8px); transition: opacity 0.3s ease 0.12s, transform 0.3s ease 0.12s; }
.mktpanel:hover .mktpanel__detail, .mktpanel:focus-visible .mktpanel__detail { opacity: 1; transform: none; }
.mktpanel__case { font-size: var(--fs-small); line-height: 1.45; color: rgba(255,255,255,0.9); max-width: 34ch; }
.mktpanel__go { font-family: var(--font-nav); font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--champagne); }
/* On a phone there is no hover and no room to shrink three panels; stack them
   and show every case outright. */
@media (max-width: 760px) {
  .mkt__row { flex-direction: column; height: auto; }
  .mktpanel { height: 220px; border-left: 0; border-top: 1px solid rgba(0,0,0,0.5); }
  .mktpanel:hover, .mktpanel:focus-visible { flex-grow: 1; }
  .mktpanel__name { writing-mode: horizontal-tb; transform: none; right: auto; left: clamp(1rem, 4vw, 1.6rem); top: 1.2rem; bottom: auto; }
  .mktpanel__detail { opacity: 1; transform: none; right: clamp(1rem, 4vw, 1.6rem); }
}

/* ------------------------------------------------------------- marketing
   Two audiences on one page: broadcast film for developers, staging for
   owners. Same card, different source. */
.mkg { padding-block: clamp(1.6rem, 3.4vw, 2.6rem); }
.mkg--owner { border-top: 1px solid rgba(216,184,113,0.18); margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.mkg__eyebrow { color: var(--champagne); margin: 0 0 0.5rem; }
.mkg__p { max-width: 68ch; margin: 0 0 1rem; color: rgba(246,246,246,0.78); }
.mkg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2.4vw, 1.7rem); margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }
@media (max-width: 760px) { .mkg__grid { grid-template-columns: 1fr; } }
.mkg__links { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(1.2rem, 2.6vw, 1.8rem); }
.mkg__links .ghostbtn { margin-top: 0; }
.mkg__note { margin: 1rem 0 0; font-size: var(--fs-tiny); color: rgba(246,246,246,0.5); }

.film { margin: 0; }
/* Both landscape and portrait clips are in this set, so the frame is fixed and
   the video sits inside it rather than the grid jumping between shapes. */
.film video, .film__play { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid rgba(216,184,113,0.20); border-radius: 12px; overflow: hidden; background: #000; }
.film video { object-fit: contain; }
.film__play { position: relative; padding: 0; cursor: pointer; transition: border-color 0.25s ease; }
.film__play:hover, .film__play:focus-visible { border-color: rgba(216,184,113,0.55); }
.film__play img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film__glyph { position: absolute; inset: 0; margin: auto; width: 68px; height: 68px; border-radius: 50%; background: rgba(215,4,4,0.92); box-shadow: 0 4px 20px rgba(0,0,0,0.5); transition: transform 0.25s ease; }
.film__glyph::after { content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0; border-left: 20px solid #fff; border-top: 12px solid transparent; border-bottom: 12px solid transparent; transform: translateX(3px); }
.film__play:hover .film__glyph { transform: scale(1.08); }
.film iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 12px; }
.film__cap { padding-top: 0.9rem; }
.film__h { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0 0 0.3rem; color: #fff; }
.film__t { margin: 0; font-size: var(--fs-small); color: rgba(246,246,246,0.7); }
.film__link { display: inline-block; margin-top: 0.5rem; font-family: var(--font-nav); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); text-decoration: none; }
.film__link:hover { color: #fff; }

/* ------------------------------------------------------------------- team */
.team { padding-top: clamp(1.6rem, 3.4vw, 2.6rem); scroll-margin-top: 96px; }
.team__lede { max-width: 60ch; margin: 0 0 clamp(1.4rem, 3vw, 2.2rem); color: rgba(246,246,246,0.76); }
.team__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(1.2rem, 2.6vw, 2rem); }
.member__shot { border-radius: 12px; overflow: hidden; margin-bottom: 0.9rem; border: 1px solid rgba(216,184,113,0.20); }
.member__shot img, .member__shot picture { display: block; width: 100%; aspect-ratio: 26 / 42; object-fit: cover; }
.member__name { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; margin: 0 0 0.15rem; color: #fff; }
.member__role { margin: 0 0 0.7rem; font-family: var(--font-nav); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--champagne); }
.member__bio { margin: 0; font-size: var(--fs-small); color: rgba(246,246,246,0.74); }
.member__note { margin: 0.5rem 0 0; font-size: var(--fs-tiny); color: rgba(246,246,246,0.5); }
.member__link { display: inline-block; margin-top: 0.6rem; font-family: var(--font-nav); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); text-decoration: none; }
.member__link:hover { color: #fff; }
/* The insights headline is short enough to hold on one line on a desktop.
   Below the width where it genuinely stops fitting it wraps, rather than being
   shrunk until it is hard to read. */
.cband__title--wide { white-space: nowrap; }
@media (max-width: 900px) { .cband__title--wide { white-space: normal; } }
.cband__body .eyebrow { position: relative; z-index: 2; margin: 0 0 0.5rem; }

/* Components that were written for a light page and now appear on a dark one.
   The cards carry their own white background so they were already fine; the
   lede and the category chips inherit the page and were not. */
.page-dark--full .answer-first { color: rgba(246,246,246,0.86); }
.page-dark--full .chip { border-color: rgba(255,255,255,0.24); color: rgba(246,246,246,0.82); }
.page-dark--full .chip:hover { border-color: var(--champagne); color: #fff; }
.page-dark--full .chip.is-active { background: var(--red); border-color: var(--red); color: #fff; }
.page-dark--full .faq details { border-color: rgba(255,255,255,0.14); }
.page-dark--full .faq summary { color: #f6f6f6; }
.page-dark--full .faq .faq__a { color: rgba(246,246,246,0.78); }

/* ------------------------------------------------------- listing finder
   Pill controls on the dark page, as the source has them: no card around the
   row, the heading as display type, and a red pill for the action. */
.finder[hidden] { display: none; }
.finder { margin: 0 0 clamp(1.6rem, 3.4vw, 2.6rem); }
.finder__h { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.4rem, 3.2vw, 2.1rem); margin: 0 0 clamp(1.2rem, 2.6vw, 1.9rem); color: #fff; }
.finder__row { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }
.finder__field { flex: 1 1 190px; min-width: 0; }
.finder select { width: 100%; height: 56px; padding: 0 2.6rem 0 1.4rem; border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; background-color: rgba(255,255,255,0.06); color: rgba(246,246,246,0.9); font: inherit; font-size: var(--fs-small); cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f6f6f6' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1.1rem center; background-size: 16px; }
.finder select:hover { border-color: rgba(255,255,255,0.34); }
.finder select:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
.finder select option { background: #1c1c1c; color: #f6f6f6; }
.finder__go { flex: 0 0 auto; height: 56px; min-width: 168px; border-radius: 999px; font-family: var(--font-nav); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.14em; text-transform: uppercase; }
.finder__count { margin: 1rem 0 0; font-size: var(--fs-small); color: rgba(246,246,246,0.62); }
@media (max-width: 700px) { .finder__field { flex: 1 1 100%; } .finder__go { width: 100%; } }
/* On a light page it keeps the same shapes, in ink. */
body:not(.page-dark--full) .finder__h { color: var(--ink); }
body:not(.page-dark--full) .finder select { border-color: var(--grey-200); background-color: #fff; color: var(--ink);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23121212' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
body:not(.page-dark--full) .finder__count { color: var(--grey-600); }
.page-dark--full .toc-inline { color: rgba(246,246,246,0.78); }
.finder__clear { flex: 0 0 auto; height: 56px; padding: 0 1.6rem; border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; background: none; color: rgba(246,246,246,0.82); font-family: var(--font-nav); font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; }
.finder__clear:hover { border-color: var(--red); color: #fff; }
.finder__clear[hidden] { display: none; }
body:not(.page-dark--full) .finder__clear { border-color: var(--grey-200); color: var(--ink); }
/* Article byline: portrait, name, date. */
.acard__by { display: flex; align-items: center; gap: 0.6rem; margin: 0.9rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--grey-200); font-size: var(--fs-tiny); color: var(--grey-600); }
.acard__face { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; flex: none; }
.acard__by span { display: flex; flex-direction: column; line-height: 1.3; }
.acard__by time { color: var(--grey-500, var(--grey-600)); opacity: 0.85; }
/* Writer profile */
.wprofile { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(1.2rem, 3vw, 2.2rem); margin-bottom: clamp(1.8rem, 3.6vw, 2.8rem); }
.wprofile__face { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(216,184,113,0.35); flex: none; }
.wprofile__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.4rem); margin: 0 0 0.6rem; color: #fff; }
.wprofile__bio { max-width: 62ch; margin: 0; color: rgba(246,246,246,0.8); }
.wprofile__count { margin: 0.7rem 0 0; font-family: var(--font-nav); font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--champagne); }
.byline__avatar--photo { border-radius: 50%; object-fit: cover; background: none; }
.byline__name a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }
.byline__name a:hover { color: var(--red); }
/* Contact details and form notes on a dark page. */
.page-dark--full .key-facts { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.14); }
.page-dark--full .key-facts dt { color: rgba(246,246,246,0.6); }
.page-dark--full .key-facts dd, .page-dark--full .key-facts dd a { color: #f6f6f6; }
.page-dark--full .key-facts dd a:hover { color: var(--red); }
.page-dark--full .form-note, .page-dark--full .form-note a { color: rgba(246,246,246,0.72); }
.page-dark--full .form-note a:hover { color: #fff; }

/* Links inside prose on a dark page: brand red is 3.30 against near-black. */
.page-dark--full .prose a, .page-dark--full .faq__a a { color: #ff8080; }
.page-dark--full .prose a:hover, .page-dark--full .faq__a a:hover { color: #fff; }
/* The how-we-work and payment cards are white; grey-600 on them is 4.25. */
.opstep__text { color: var(--grey-700); }