/* =========================================================================
   South Africa | Forbes Global Properties
   Magazine front page, aligned to the parent brand design language.
   White editorial. FreightNeo + Work Sans. Black, white, Forbes red.
   ========================================================================= */

@font-face { font-family: "FreightNeo"; src: url("/assets/brand/FreightNeo-Light.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "FreightNeo"; src: url("/assets/brand/FreightNeo-Book.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "FreightNeo"; src: url("/assets/brand/FreightNeo-Semi.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/assets/brand/WorkSans-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/assets/brand/WorkSans-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Work Sans"; src: url("/assets/brand/WorkSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --white: #ffffff;
  --black: #000000;
  --text: #333333;
  --soft: #6b6b6b;
  --line: #e3e0db;
  --rule: #000000;
  --red: #d8361e;          /* Forbes red, verified on the parent site */
  --gray-band: #f2f0ee;
  --display: "FreightNeo", Georgia, "Times New Roman", serif;
  --sans: "Work Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  --maxw: 1360px;
  --pad: clamp(1.2rem, 4vw, 3.4rem);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--white); color: var(--text);
  font-family: var(--sans); font-size: 16px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 400; color: var(--black); margin: 0; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }

/* ---------- Chips and buttons ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 0.55em;
  background: var(--black); color: var(--white);
  font-family: var(--sans); font-size: 12px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 0.72em 1.25em; border: 0; border-radius: 3px; cursor: pointer;
  transition: background 0.3s var(--ease);
}
.chip:hover { background: var(--red); }
.chip--red { background: var(--red); }
.chip--red:hover { background: var(--black); }

/* ---------- Accessibility ---------- */
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%); z-index: 200;
  background: var(--black); color: var(--white); padding: 0.7rem 1.2rem; font-size: 13px;
  border-radius: 0 0 3px 3px; transition: transform 0.2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }

/* ---------- Masthead ---------- */
.mast {
  position: sticky; top: 0; z-index: 60;
  background: var(--black); color: var(--white);
  border-bottom: 2px solid var(--red);
}
.mast__inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  min-height: 76px;
}
.mast__left { justify-self: start; display: flex; gap: 1.6rem; }
.mast__left a { font-size: 13px; letter-spacing: 0.05em; color: rgba(255,255,255,0.85); transition: color 0.3s; }
.mast__left a:hover { color: var(--white); }
.mast__brand { justify-self: center; text-align: center; font-family: var(--display); line-height: 1.15; }
.mast__brand strong { display: block; font-weight: 600; font-size: 1.3rem; letter-spacing: 0.02em; }
.mast__brand span { display: block; font-family: var(--sans); font-weight: 500; font-size: 9.5px; letter-spacing: 0.42em; text-transform: uppercase; margin-top: 2px; color: rgba(255,255,255,0.92); }
.mast__right { justify-self: end; }

/* ---------- Back to the collections, tiny arrow top right ---------- */
.backtop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; margin-right: 0.55rem;
  border: 1px solid rgba(255, 255, 255, 0.34); border-radius: 50%;
  color: #fff; text-decoration: none; font-size: 15px; line-height: 1;
  transition: border-color 0.16s ease, transform 0.16s var(--ease-out, ease-out);
}
.backtop:hover { border-color: rgba(255, 255, 255, 0.75); }
.backtop:active { transform: scale(0.94); }

/* ---------- The access request sheet, sprint 44 ---------- */
.card--gated { text-align: left; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: inherit; display: block; width: 100%; }
/* display:flex on the open sheet outranks the browser's [hidden] rule, so
   the closed state must be pinned explicitly or an invisible full screen
   overlay eats every click on the page (shipped broken once, 17 Jul). */
.acmodal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.2rem; }
.acmodal[hidden] { display: none; }
.acmodal__scrim { position: absolute; inset: 0; background: rgba(9, 8, 7, 0.62); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); opacity: 0; transition: opacity 0.22s ease; }
.acmodal__card {
  position: relative; background: #fff; color: var(--black, #111);
  width: min(440px, 100%); max-height: 86svh; overflow-y: auto;
  padding: 2.1rem 2rem 1.8rem; border-radius: 8px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.45);
  opacity: 0; transform: scale(0.96) translateY(8px);
  transition: opacity 0.22s var(--ease-out, ease-out), transform 0.22s var(--ease-out, ease-out);
}
.acmodal.is-open .acmodal__scrim { opacity: 1; }
.acmodal.is-open .acmodal__card { opacity: 1; transform: none; }
.acmodal__card:focus { outline: none; }
.acmodal__close {
  position: absolute; top: 0.8rem; right: 0.9rem; background: none; border: 0;
  font-size: 22px; line-height: 1; color: rgba(0, 0, 0, 0.45); cursor: pointer; padding: 0.3rem;
  transition: color 0.15s ease, transform 0.16s ease-out;
}
.acmodal__close:hover { color: #000; }
.acmodal__close:active { transform: scale(0.92); }
.acmodal__kicker { margin: 0 0 0.5rem; font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red, #d8361e); }
.acmodal h2 { margin: 0 0 0.8rem; font-family: var(--serif, "FreightNeo", serif); font-weight: 300; font-size: 1.8rem; }
.acmodal__lede { margin: 0 0 1.2rem; font-size: 13.5px; line-height: 1.65; color: rgba(0, 0, 0, 0.72); }
.acmodal form label { display: block; margin: 0 0 0.85rem; font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); }
.acmodal form input {
  display: block; width: 100%; margin-top: 0.35rem; padding: 0.6em 0.7em;
  border: 1px solid rgba(0, 0, 0, 0.22); border-radius: 4px;
  font-family: inherit; font-size: 14px; background: #fff; color: #111;
}
.acmodal form input:focus { outline: none; border-color: var(--red, #d8361e); }
.acmodal .hp { position: absolute; left: -5000px; width: 1px; height: 1px; opacity: 0; }
.acmodal__submit { display: inline-block; margin-top: 0.4rem; border: 0; cursor: pointer; }
.acmodal__privacy { margin: 1rem 0 0; font-size: 11.5px; color: rgba(0, 0, 0, 0.5); }
.acmodal__error { margin: 0 0 1rem; font-size: 13px; color: var(--red, #d8361e); }
.acmodal .cf-turnstile { margin: 0.2rem 0 0.6rem; }
.acmodal__privacy a { color: inherit; }
.acmodal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .acmodal__scrim, .acmodal__card { transition: none; }
}

/* ---------- Tagline bar ---------- */
.tagline { border-bottom: 2px solid var(--rule); }
.tagline--film { border-bottom: 0; }
.tagline p {
  max-width: var(--maxw); margin: 0 auto; padding: 1.05rem var(--pad);
  font-size: 13px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--black);
  text-align: center;
}

/* ---------- Front page: featured + rail ---------- */
.front { padding: clamp(1.8rem, 3.5vw, 3rem) 0 clamp(2.4rem, 4vw, 3.6rem); }
.front__grid { display: grid; grid-template-columns: 2fr 1fr; gap: clamp(1.6rem, 3vw, 3rem); }

.featured { display: block; }
.featured__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--gray-band); }
.featured__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.featured:hover .featured__media img { transform: scale(1.025); }
.featured__media .chip { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
.featured h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.15; margin: 1.3rem 0 0.7rem; }
.featured p { margin: 0; color: var(--text); max-width: 68ch; }
.featured__meta { font-size: 14px; color: var(--soft); margin: 0.8rem 0 0; }

.rail { display: flex; flex-direction: column; gap: clamp(1.6rem, 3vw, 2.4rem); }
.rail__card { display: block; }
.rail__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: var(--gray-band); }
.rail__media img { width: 100%; height: 100%; object-fit: cover; }
.rail__media .chip { position: absolute; left: 0; bottom: 0; padding: 0.5em 0.9em; font-size: 10.5px; }
.rail__card h3 { font-size: clamp(1.25rem, 1.9vw, 1.6rem); line-height: 1.2; margin: 0.9rem 0 0; }
.rail__card:hover h3 { color: var(--red); }

/* ---------- Section header ---------- */
.secthead { border-top: 2px solid var(--rule); padding-top: 1rem; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.secthead h2 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); }
.secthead h2 .arrow { font-family: var(--sans); font-weight: 300; margin-left: 0.45em; }
.secthead .secthead__note { font-size: 13px; color: var(--soft); }
section { padding: 0 0 clamp(2.8rem, 5vw, 4.4rem); }
/* Clear the sticky masthead (min-height 76px) when jumping to an anchor */
#collection, #developments, #services, #stories, #founder, #office, #marketing { scroll-margin-top: 88px; }

/* ---------- Property cards ---------- */
.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.card { display: block; }
.card__cat { font-family: var(--display); font-size: 1.35rem; color: var(--black); margin: 0 0 0.8rem; }
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--gray-band); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.9s var(--ease); }
.card:hover .card__media img { transform: scale(1.03); }
.card__price { font-weight: 500; color: var(--black); margin: 0.9rem 0 0.15rem; font-size: 15px; }
.card__price em { font-style: normal; font-weight: 400; font-size: 12px; color: var(--soft); letter-spacing: 0.08em; text-transform: uppercase; }
.card__loc { font-size: 13.5px; color: var(--soft); margin: 0 0 0.35rem; }
.card__title { font-family: var(--display); font-size: 1.45rem; line-height: 1.2; color: var(--black); margin: 0; }
.card:hover .card__title { color: var(--red); }

/* coming soon media: the photograph under a 30% black veil and one quiet line */
.card__media--soon { position: relative; }
.card__media--soon::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.3); }
.card__soon { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: var(--white); }

/* plate media, a listing announced ahead of its photography */
.card__media--plate { display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); }
.card__media--plate img { width: min(52%, 240px); height: auto; object-fit: contain; opacity: 0.85; }
.card:hover .card__media--plate img { transform: none; }

/* type-led interim card, for regions awaiting photography */
.card--type { border: 1px solid var(--line); padding: clamp(1.4rem, 2.4vw, 2rem); display: flex; flex-direction: column; min-height: 100%; }
.card--type .card__k { font-family: var(--display); font-size: 1.2rem; color: var(--red); margin: 0 0 auto; }
.card--type h3 { font-size: 1.6rem; margin: 2.6rem 0 0.6rem; }
.card--type p { margin: 0 0 1.2rem; color: var(--text); }
.card--type .card__link { font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 500; color: var(--black); border-bottom: 2px solid var(--red); padding-bottom: 2px; align-self: flex-start; }

/* ---------- Stats strip ---------- */
.stats { border-bottom: 1px solid var(--line); margin-bottom: clamp(2.8rem, 5vw, 4.4rem); padding-top: clamp(1.8rem, 3.5vw, 3rem); }
.stats__head { text-align: center; max-width: 820px !important; padding-bottom: 0.4rem; }
.stats__kicker { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.26em; text-transform: uppercase; color: var(--red); margin: 0 0 0.7rem; }
.stats__title { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 300; margin: 0 0 0.8rem; }
.stats__lede { font-size: 15px; line-height: 1.7; color: var(--text); margin: 0 auto; max-width: 64ch; }
.stats ul { list-style: none; margin: 0 auto; max-width: var(--maxw); padding: clamp(1.6rem, 3vw, 2.4rem) var(--pad); display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; justify-items: center; }
.stats li { display: flex; flex-direction: column; gap: 0.2rem; align-items: center; text-align: center; }
.stats__k { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); }
.stats strong { font-family: var(--display); font-weight: 400; font-size: clamp(1.9rem, 3vw, 2.6rem); color: var(--black); }
.stats__d { font-size: 13px; color: var(--soft); line-height: 1.45; }

/* ---------- About / editorial ---------- */
.about__grid { display: grid; grid-template-columns: 1fr 1.05fr 0.72fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.about__grid > div:first-child h1 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.12; }
.about__grid p { margin: 0 0 1rem; max-width: 58ch; }
.about__note { border-top: 2px solid var(--rule); padding-top: 1rem; margin-top: 1.6rem; }
.about__note span { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); display: block; margin-bottom: 0.5rem; }
.about__note p { font-family: var(--display); font-size: 1.25rem; line-height: 1.4; color: var(--black); }

/* Founder feature: the person behind the firm, a portrait beside the bio */
.founder__grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 4.5vw, 4.8rem); align-items: center; }
.founder__portrait { margin: 0; }
.founder__portrait img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; display: block; border-radius: 3px; box-shadow: 0 22px 50px -26px rgba(0, 0, 0, 0.32); }
.founder__name { font-family: var(--display); font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.1; margin: 0; color: var(--black); }
.founder__role { font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0.55rem 0 1.5rem; }
.founder__bio p { margin: 0 0 1rem; max-width: 62ch; }
/* A second profile below the first, mirrored: text left, portrait right,
   so it complements the founder above it, and a sleek Forbes red rule
   separates the two. */
.founder__grid + .founder__grid { margin-top: clamp(3rem, 5.5vw, 4.8rem); padding-top: clamp(3rem, 5.5vw, 4.8rem); border-top: 2px solid var(--red); }
.founder__grid--reverse { grid-template-columns: 1.1fr 0.9fr; }

/* ---------- Services ---------- */
.services__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(1.8rem, 4vw, 4rem); }
.services__intro p { margin: 0 0 1.4rem; max-width: 46ch; }
.services ol { list-style: none; margin: 0; padding: 0; }
.services li { display: grid; grid-template-columns: 3rem 1fr; gap: 0.9rem; align-items: baseline; padding: 1.05rem 0; border-top: 1px solid var(--line); font-family: var(--display); font-size: clamp(1.15rem, 1.9vw, 1.5rem); color: var(--black); }
.services li:last-child { border-bottom: 1px solid var(--line); }
.services li span { font-family: var(--sans); font-size: 12px; font-weight: 500; letter-spacing: 0.1em; color: var(--red); }

/* ---------- Stories ---------- */
.stories { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.4rem, 2.6vw, 2.4rem); }
.story { display: grid; grid-template-columns: 104px 1fr; gap: 1rem; align-items: start; }
.story img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--gray-band); display: block; }
.story h3 { font-size: 1.15rem; line-height: 1.3; }
.story h3 em { font-style: normal; }
.story h3 .pipe { color: var(--red); margin: 0 0.3em; }
.story:hover h3 { color: var(--red); }
.story p { grid-column: 2; font-size: 13px; color: var(--soft); margin: 0.4rem 0 0; }
.story__soon { grid-column: 2; display: inline-block; margin-top: 0.6rem; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--soft); }

/* ---------- Private office ---------- */
.office { background: var(--gray-band); border-top: 2px solid var(--rule); padding: clamp(2.8rem, 5vw, 4.4rem) 0; margin-bottom: 0; }
.office__grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(1.8rem, 4vw, 4rem); align-items: start; }
.office h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); line-height: 1.12; margin-bottom: 1rem; }
.office__intro p { margin: 0 0 1rem; max-width: 46ch; }
.office__direct { font-size: 14px; color: var(--soft); }
.office__direct a { color: var(--black); border-bottom: 2px solid var(--red); font-weight: 500; }
.office form { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.field { display: flex; flex-direction: column; gap: 0.4rem; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); }
.field input, .field textarea {
  background: var(--white); border: 1px solid #c9c5bf; color: var(--black);
  padding: 0.8rem 0.85rem; font-family: var(--sans); font-size: 15px; border-radius: 2px; resize: vertical;
}
.field input:focus, .field textarea:focus { outline: none; border-color: var(--black); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: var(--red); }
.office form .chip { grid-column: 1 / -1; justify-self: start; }
.office form .cf-turnstile { grid-column: 1 / -1; justify-self: start; }
.office__note { grid-column: 1 / -1; font-size: 14px; color: var(--black); min-height: 1.2em; margin: 0; }

/* ---------- Directory ---------- */
.directory { padding-top: clamp(2.4rem, 4.5vw, 3.6rem); }
.directory__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.8rem; }
.directory h4 { font-size: 1.15rem; margin: 0 0 0.8rem; }
.directory ul { list-style: none; margin: 0; padding: 0; }
.directory li { font-size: 13.5px; color: var(--soft); padding: 0.28rem 0; }

/* ---------- Footer ---------- */
.footer { background: var(--gray-band); border-top: 2px solid var(--rule); padding: clamp(2.4rem, 5vw, 4rem) 0 2rem; }
.footer__row { display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap; padding-bottom: 1.4rem; border-bottom: 2px solid var(--rule); }
.footer__brand { font-family: var(--display); font-size: 1.15rem; color: var(--black); }
.footer__brand span { color: var(--red); margin: 0 0.3em; }
.footer__nav { display: flex; gap: clamp(1rem, 2.5vw, 2rem); flex-wrap: wrap; }
.footer__nav a { font-size: 13.5px; font-weight: 600; color: var(--black); }
.footer__nav a:hover { color: var(--red); }
.footer__legal { text-align: center; font-size: 12px; color: var(--soft); max-width: 72ch; margin: 1.8rem auto 0; line-height: 1.7; }
.footer__legal a { border-bottom: 1px solid var(--line); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .front__grid { grid-template-columns: 1fr; }
  .rail { flex-direction: row; }
  .rail__card { flex: 1; }
  .about__grid, .services__grid, .office__grid, .founder__grid { grid-template-columns: 1fr; }
  /* Stacked on small screens, both profiles lead with the portrait. */
  .founder__grid--reverse .founder__portrait { order: -1; }
}
@media (max-width: 760px) {
  .mast__inner { grid-template-columns: 1fr auto 1fr; min-height: 64px; }
  .mast__left { display: none; }
  .mast__brand { grid-column: 2; justify-self: center; text-align: center; }
  .mast__right { grid-column: 3; }
  .footer__row { flex-direction: column; align-items: center; text-align: center; }
  .cards, .stories { grid-template-columns: 1fr; }
  .rail { flex-direction: column; }
  .stats ul { grid-template-columns: repeat(2, 1fr); }
  .directory__grid { grid-template-columns: repeat(2, 1fr); }
  .office form { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.001ms !important; }
}

/* Privacy microcopy under the enquiry form */
.office__privacy { grid-column: 1 / -1; font-size: 12px; color: var(--soft); margin: 0; max-width: 60ch; }
.office__privacy a { border-bottom: 1px solid var(--line); }
.office__privacy a:hover { color: var(--red); }

/* Official lockup replaces the text wordmark */
.mast__brand img { display: block; height: 56px; width: auto; margin: 10px auto; }
.footer__brand img { display: block; height: 68px; width: auto; }
@media (max-width: 760px) {
  .mast__brand img { height: 46px; margin: 9px 0; }
  .footer__brand img { height: 56px; }
}

/* Honeypot: invisible to humans, present for form-filler bots */
.field--hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }


/* The collections, access on request. Four cards, the chip carries the ask. */
.cards--collections { grid-template-columns: repeat(4, 1fr); }
.card--collection .card__media, .card--gated .card__media { position: relative; }
.card--collection .chip, .card--gated .chip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(38, 36, 34, 0.62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--white); border: 1px solid rgba(255, 255, 255, 0.28); opacity: 0; transition: opacity 0.35s var(--ease), background 0.2s var(--ease); }
.card--collection:hover .chip, .card--gated:hover .chip { opacity: 1; }
.card--collection .chip:hover, .card--gated:hover .chip { background: rgba(38, 36, 34, 0.8); }
.card--collection .card__title { font-family: var(--display); font-size: 1.35rem; margin-top: 0.9rem; }
.card--collection .card__loc { color: var(--soft); font-size: 13.5px; }
@media (max-width: 900px) {
  .cards--collections { grid-template-columns: repeat(2, 1fr); }
  .card--collection .chip, .card--gated .chip { opacity: 1; }
}
@media (max-width: 560px) { .cards--collections { grid-template-columns: 1fr; } }
.office__context { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--red); min-height: 1.2em; }
.directory__grid { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .directory__grid { grid-template-columns: repeat(2, 1fr); } }
.directory__item img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 2px; margin-bottom: 0.7rem; }
.directory__item h4 { margin: 0; }


/* The film header. Full bleed, quiet, the page begins in motion. */
.filmhero { position: relative; background: #0a0908; overflow: hidden; padding: 0; }
.filmhero__video {
  display: block; width: 100%; min-height: 340px;
  height: calc(100vh - 134px); height: calc(100svh - 134px);
  object-fit: cover;
}
.filmhero::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 90px;
  background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.28));
  pointer-events: none;
}
@media (max-width: 760px) {
  /* On phones the hero is a landscape 16:9 band. The container carries the
     ratio and the film fills it absolutely, so no hairline of the dark
     backing shows above or below the film. */
  .filmhero { aspect-ratio: 16 / 9; background: transparent; }
  .filmhero__video { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; aspect-ratio: auto; object-fit: cover; }
  .filmhero::after { display: none; }
}

/* ---------- Film strip: the Forbes story, four equal brand frames ---------- */
.filmstrip { padding: clamp(0.4rem, 2vw, 1.4rem) 0 clamp(2rem, 5vw, 3.4rem); }
.filmstrip__track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 3px solid var(--red); }
.fsframe { position: relative; margin: 0; aspect-ratio: 1000 / 1400; overflow: hidden; background: #0a0908; }
.fsframe::before { content: none; }
.fsframe img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease); }
.fsframe:hover img { transform: scale(1.035); }
.fsframe--welcome { display: flex; order: -1; }
.fsframe__inner { display: flex; flex-direction: column; justify-content: center; padding: clamp(1rem, 1.9vw, 1.9rem); color: #fff; }
.fsframe__welcome { font-family: var(--display); font-weight: 300; font-size: clamp(1.35rem, 2.3vw, 2.05rem); line-height: 1.05; margin: 0; }
.fsframe__brand { font-family: var(--display); font-weight: 300; font-size: clamp(1.35rem, 2.3vw, 2.05rem); line-height: 1.1; margin: 0.1em 0 0; color: #c8a97e; }
.fsframe__pipe { color: var(--red); margin: 0 0.1em; }
.fsframe__sub { font-family: var(--display); font-weight: 300; font-size: clamp(0.98rem, 1.5vw, 1.28rem); line-height: 1.28; margin: 1.1em 0 0; color: #fff; }
/* Film strip controls: hidden on desktop where all four panels show, shown on
   mobile where the strip becomes a one at a time carousel. */
.filmstrip__nav, .filmstrip__dots { display: none; }
.filmstrip__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 2.7rem; height: 2.7rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.55); background: rgba(0, 0, 0, 0.42); color: #fff; font-size: 1.35rem; line-height: 1; cursor: pointer; place-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.filmstrip__nav:hover { background: var(--red); border-color: var(--red); }
.filmstrip__nav--prev { left: 0.5rem; }
.filmstrip__nav--next { right: 0.5rem; }
.filmstrip__dots { justify-content: center; gap: 0.5rem; margin-top: 0.9rem; }
.filmstrip__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(0, 0, 0, 0.22); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.filmstrip__dot.is-on { background: var(--red); transform: scale(1.3); }
@media (max-width: 760px) {
  .filmstrip .wrap { position: relative; }
  .filmstrip__track { display: block; position: relative; aspect-ratio: 1000 / 1400; overflow: hidden; }
  .fsframe { position: absolute; inset: 0; aspect-ratio: auto; opacity: 0; transition: opacity 0.5s ease; pointer-events: none; }
  .fsframe.is-active { opacity: 1; pointer-events: auto; }
  .filmstrip__nav { display: grid; }
  .filmstrip__dots { display: flex; }
}

/* ---------- Back-to-collections arrow, top-left, sleek ---------- */
.backtop--corner { position: fixed; top: 13px; left: 14px; z-index: 70; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.9); color: #fff; background: rgba(0,0,0,0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 21px; line-height: 1; text-decoration: none; box-shadow: 0 3px 12px rgba(0,0,0,0.3); transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease); }
.backtop--corner:hover { background: var(--red); border-color: var(--red); transform: translateX(-2px); }
@media (max-width: 760px) { .backtop--corner { top: 10px; left: 10px; width: 40px; height: 40px; } }

/* Collection pages: give the sticky nav room so the fixed back arrow never overlaps it */
.has-backarrow .mast__left { padding-left: 3.2rem; }
@media (max-width: 760px) { .has-backarrow .mast__left { padding-left: 0; } }

/* ---------- Corporate brochure ---------- */
.brochure__cover { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; position: relative; text-align: left; }
.brochure__cover img { width: 100%; height: auto; display: block; box-shadow: 0 18px 44px rgba(0,0,0,0.28); transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease); }
.brochure__cover:hover img { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,0.34); }
.brochure__hint { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; padding: 0.7rem 0.9rem; background: linear-gradient(to top, rgba(0,0,0,0.72), rgba(0,0,0,0)); color: #fff; }
.brochure__hint-k, .brochure__hint-cta { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 0.4em; }
.brochure__hint-cta::after { content: "\2197"; }
@media (max-width: 1020px) { .brochure { max-width: 340px; } }
.brmodal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: clamp(0.8rem, 3vw, 2.4rem); }
.brmodal[hidden] { display: none; }
.brmodal__scrim { position: absolute; inset: 0; background: rgba(8,7,6,0.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.24s ease; }
.brmodal__frame { position: relative; width: min(1100px, 96vw); height: min(86vh, 90svh); background: #0a0908; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 100px rgba(0,0,0,0.55); opacity: 0; transform: scale(0.97); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); }
.brmodal.is-open .brmodal__scrim { opacity: 1; }
.brmodal.is-open .brmodal__frame { opacity: 1; transform: none; }
.brmodal__embed, .brmodal__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.brmodal__close { position: absolute; top: 0.6rem; right: 0.7rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.5); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.brmodal__close:hover { background: var(--red); border-color: var(--red); }

/* Story card video affordance + conference film modal -------------------- */
.story__media { position: relative; display: block; }
.story__media img { width: 100%; display: block; }
.story--video { cursor: pointer; }
.story__play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); display: grid; place-items: center; pointer-events: none; transition: background 0.2s; }
.story__play::after { content: ""; width: 0; height: 0; border-left: 11px solid #fff; border-top: 7px solid transparent; border-bottom: 7px solid transparent; margin-left: 3px; }
.story--video:hover .story__play { background: var(--red); }
.vidmodal { position: fixed; inset: 0; z-index: 130; display: flex; align-items: center; justify-content: center; padding: clamp(0.8rem, 3vw, 2.4rem); }
.vidmodal[hidden] { display: none; }
.vidmodal__scrim { position: absolute; inset: 0; background: rgba(8, 7, 6, 0.86); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.24s ease; }
.vidmodal__frame { position: relative; width: min(1180px, 94vw, 150vh); aspect-ratio: 16 / 9; background: #000; border-radius: 6px; overflow: hidden; box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55); opacity: 0; transform: scale(0.97); transition: opacity 0.24s var(--ease), transform 0.24s var(--ease); }
.vidmodal.is-open .vidmodal__scrim { opacity: 1; }
.vidmodal.is-open .vidmodal__frame { opacity: 1; transform: none; }
.vidmodal__embed, .vidmodal__embed iframe { width: 100%; height: 100%; border: 0; display: block; }
.vidmodal__close { position: absolute; top: 0.6rem; right: 0.7rem; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.5); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.vidmodal__close:hover { background: var(--red); border-color: var(--red); }

/* ---------- Member map (Infogram) ---------- */
.membermap { margin-top: clamp(1.6rem, 3.4vw, 2.8rem); border-top: 2px solid var(--rule); padding-top: clamp(1.6rem, 3vw, 2.4rem); }
/* The member map shows the whole graphic at its native 5:4, edge to edge with
   the region cards above it. */
.membermap__fit { position: relative; }
/* Match the frame to Infogram's own 1096x880 design canvas so the map fits
   with no overflow, and scrolling="no" on the iframe means it can never grab
   the page wheel: no scrollbars, no scroll hijack, hover tooltips intact. */
.membermap__frame { display: block; width: 100%; aspect-ratio: 1096 / 880; border: 0; overflow: hidden; background: #000; }
/* Desktop uses the interactive embed above. On phones that embed opens low and
   off centre no matter how it is sized, so the static render of the same map
   stands in: always centred, edge to edge, nothing to load. */
.membermap__static { display: none; }
@media (max-width: 760px) {
  .membermap__frame { display: none; }
  .membermap__static { display: block; width: 100%; height: auto; background: #000; }
}

/* Marketing opportunities carousel --------------------------------------- */
.marketing { background: #000; color: #fff; padding: clamp(2rem, 3.4vw, 3rem) 0 clamp(2.2rem, 3.6vw, 3rem); }
.marketing .secthead { border-top-color: rgba(255, 255, 255, 0.26); }
.marketing .secthead h2 { color: #fff; }
.marketing__lead { max-width: 52ch; margin: 0 0 clamp(2rem, 4vw, 3rem); color: rgba(255, 255, 255, 0.72); font-size: clamp(1rem, 1.15vw, 1.12rem); line-height: 1.6; }
.carousel { position: relative; }
.carousel__viewport { position: relative; width: min(78vw, 340px); aspect-ratio: 2328 / 3252; margin: 0 auto; }
.carousel__track { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; }
.carousel__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.55s ease; pointer-events: none; }
.carousel__slide.is-active { opacity: 1; pointer-events: auto; }
.carousel__slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 3.1rem; height: 3.1rem; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(0, 0, 0, 0.4); color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; display: grid; place-items: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background 0.2s, border-color 0.2s; }
.carousel__nav:hover { background: var(--red); border-color: var(--red); }
.carousel__nav--prev { left: calc(50% - 170px - 3.2rem); }
.carousel__nav--next { right: calc(50% - 170px - 3.2rem); }
.carousel__dots { display: flex; justify-content: center; gap: 0.6rem; margin-top: clamp(1.1rem, 2.4vw, 1.6rem); }
.carousel__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255, 255, 255, 0.3); cursor: pointer; transition: background 0.2s, transform 0.2s; }
.carousel__dot.is-on { background: var(--red); transform: scale(1.35); }
.carousel:focus-visible { outline: 2px solid var(--red); outline-offset: 6px; }
@media (max-width: 760px) {
  .carousel__viewport { width: min(74vw, 320px); }
  .carousel__nav { width: 2.6rem; height: 2.6rem; font-size: 1.25rem; }
  .carousel__nav--prev { left: 0.2rem; }
  .carousel__nav--next { right: 0.2rem; }
}