body.commercial-estate-page {
  --investor-ink: #172720;
  --investor-paper: #f0ede5;
  --investor-paper-deep: #e3ddd1;
  --investor-bronze: #b08c59;
  --investor-copper: #c17b5e;
  --investor-line: rgba(23, 39, 32, 0.15);
}

.commercial-entry > span { background: #182b23; }
.commercial-entry > div { color: #d8bd8e; font-size: clamp(2.2rem, 6vw, 6.5rem); }
.commercial-hero .investor-hero__media img { object-position: center 54%; filter: saturate(.74) contrast(1.08) brightness(.58); }
.commercial-hero .investor-hero__veil { background: linear-gradient(90deg, rgba(8,21,16,.96) 0%, rgba(8,21,16,.79) 30%, rgba(8,21,16,.24) 62%, rgba(8,21,16,.08)), linear-gradient(180deg, rgba(3,12,8,.37), transparent 40%, rgba(3,12,8,.55)); }
.commercial-hero h1 > span:nth-child(2) i { color: #dcb57d; }
.commercial-hero .investor-hero__aside > span { color: #dcb57d; }
.commercial-hero .investor-hero__index { right: .75rem; }

.commercial-marquee { overflow: hidden; padding: 1.25rem 0; color: #f6f0e6; background: #bb765a; white-space: nowrap; }
.commercial-marquee > div { display: flex; width: max-content; animation: commercial-marquee 30s linear infinite; }
.commercial-marquee span { font-family: var(--serif); font-size: clamp(1.1rem, 1.8vw, 1.75rem); font-style: italic; letter-spacing: .015em; }
@keyframes commercial-marquee { to { transform: translateX(-50%); } }

.commercial-thesis { background: radial-gradient(circle at 85% 20%, rgba(176,140,89,.12), transparent 24rem), var(--investor-paper); }

.commercial-formats { padding: clamp(6rem, 10vw, 11rem) var(--page-pad); color: #f9f3e9; background: #20372d; }
.commercial-formats__head { display: flex; align-items: end; justify-content: space-between; gap: 3rem; padding-bottom: clamp(3rem, 5vw, 5rem); }
.commercial-formats__head .investor-display { max-width: 52rem; }
.commercial-format-grid { display: grid; grid-template-columns: repeat(3, 1fr); max-width: 96rem; margin: auto; border-top: 1px solid rgba(255,255,255,.2); }
.commercial-format { position: relative; min-height: 25rem; padding: 2.4rem clamp(1.5rem, 3vw, 3.6rem) 2.8rem; overflow: hidden; }
.commercial-format + .commercial-format { border-left: 1px solid rgba(255,255,255,.2); }
.commercial-format::before { content: ""; position: absolute; inset: auto 0 0; height: 0; background: rgba(193,123,94,.15); transition: height .65s var(--ease); }
.commercial-format:hover::before { height: 100%; }
.commercial-format > * { position: relative; }
.commercial-format > span { color: #dcb57d; font-family: var(--serif); font-size: 1.1rem; font-style: italic; }
.commercial-format h3 { max-width: 14rem; margin: clamp(7rem, 11vw, 10rem) 0 1rem; font-family: var(--serif); font-size: clamp(2rem, 3.1vw, 3.3rem); font-weight: 400; line-height: .98; }
.commercial-format p { max-width: 21rem; margin: 0; color: rgba(255,255,255,.61); font-size: .78rem; line-height: 1.72; }

.commercial-paths { background: #e7e0d4; color: var(--investor-ink); }
.commercial-paths .investor-paths__head > p { color: rgba(23,39,32,.66); }
.commercial-paths .investor-path { box-shadow: 0 2rem 5rem rgba(23,39,32,.09); }
.commercial-path--retail .investor-path__media img { object-position: center 52%; }

.commercial-demand { display: grid; grid-template-columns: minmax(20rem,.72fr) minmax(0,1.28fr); gap: clamp(4rem,8vw,9rem); align-items: center; min-height: 52rem; padding: clamp(6rem,9vw,10rem) var(--page-pad); background: #f4f0e8; }
.commercial-demand__copy { max-width: 34rem; }
.commercial-demand__copy > p:not(.investor-kicker) { margin: 1.8rem 0 0; color: rgba(23,39,32,.67); font-size: .86rem; line-height: 1.8; }
.commercial-demand__rings { position: relative; min-height: clamp(30rem,48vw,48rem); }
.commercial-ring { position: absolute; display: grid; place-items: center; align-content: center; aspect-ratio: 1; border: 1px solid rgba(23,39,32,.2); border-radius: 50%; text-align: center; transition: transform .55s var(--ease), background .55s var(--ease); }
.commercial-ring:hover { z-index: 4; background: rgba(220,181,125,.18); transform: scale(1.035); }
.commercial-ring span { font-family: var(--serif); font-size: clamp(2rem,3vw,3.5rem); font-style: italic; }
.commercial-ring small { margin-top: .35rem; color: rgba(23,39,32,.55); font-size: .55rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.commercial-ring--one { top: 0; left: 25%; width: 48%; color: #9b7650; }
.commercial-ring--two { right: 0; bottom: 4%; width: 49%; color: #ad654c; }
.commercial-ring--three { bottom: 2%; left: 0; width: 51%; color: #315849; }
.commercial-ring--one::after, .commercial-ring--two::after, .commercial-ring--three::after { content: ""; position: absolute; inset: 10%; border: 1px dashed currentColor; border-radius: inherit; opacity: .22; }

.commercial-process { background: #183027; }
.commercial-cta .investor-cta__media img { object-position: center 54%; filter: saturate(.68) contrast(1.1) brightness(.5); }
.commercial-cta .investor-cta__veil { background: linear-gradient(90deg, rgba(7,19,14,.95), rgba(7,19,14,.72) 42%, rgba(7,19,14,.15) 78%); }
.commercial-cta .investor-display em { color: #dcb57d; }
.commercial-cta .investor-cta__button:hover { background: #b7795d; }

@media (max-width: 960px) {
  .commercial-format { min-height: 21rem; padding-right: 1.6rem; padding-left: 1.6rem; }
  .commercial-demand { grid-template-columns: 1fr; }
  .commercial-demand__copy { max-width: 45rem; }
  .commercial-demand__rings { width: min(100%, 42rem); margin: auto; }
}

@media (max-width: 760px) {
  .commercial-hero .investor-hero__media img { object-position: 65% center; }
  .commercial-hero h1 { font-size: clamp(3.6rem,17.5vw,6rem); }
  .commercial-marquee { padding: .95rem 0; }
  .commercial-formats { padding: 5.5rem 1.25rem; }
  .commercial-formats__head { display: block; }
  .commercial-format-grid { grid-template-columns: 1fr; }
  .commercial-format { min-height: 0; padding: 2rem .25rem 2.6rem; }
  .commercial-format + .commercial-format { border-top: 1px solid rgba(255,255,255,.2); border-left: 0; }
  .commercial-format h3 { margin: 3rem 0 .8rem; }
  .commercial-demand { min-height: 0; gap: 3rem; padding: 6rem 1.25rem; }
  .commercial-demand__rings { min-height: 25rem; }
  .commercial-ring--one { left: 24%; width: 52%; }
  .commercial-ring--two { width: 53%; }
  .commercial-ring--three { width: 55%; }
  .commercial-ring span { font-size: clamp(1.45rem,7vw,2.3rem); }
  .commercial-cta .investor-cta__media img { object-position: 68% center; }
}

@media (prefers-reduced-motion: reduce) {
  .commercial-marquee > div { animation: none; }
}
