/* ===== Cordish Plaza — leasing landing page =====
   Built ON the Cordish Group Design System. All brand values come from the DS
   tokens (--cd-*); the --p-* names below are thin aliases so markup reads cleanly.
   Where the Plaza brief and the DS differ, the DS wins (purple #512982, Montserrat,
   gold #B4832E, teal #346771, navy dark, rounded corners + soft card shadows). */
:root {
  --p-purple:     var(--cd-purple);
  --p-purple-700: var(--cd-purple-700);
  --p-violet:     var(--cd-navy);        /* footer / dark emphasis */
  --p-lavender:   var(--cd-purple-200);  /* light accent on dark */
  --p-lavender-50:var(--cd-purple-50);
  --p-lavender-25:var(--cd-purple-50);   /* soft section ground */
  --p-charcoal:   var(--cd-ink);
  --p-grey:       var(--cd-muted);
  --p-line:       var(--cd-line);
  --p-line-strong:#CFC9DA;
  --p-white:      var(--cd-white);
  --p-gold:       var(--cd-gold);
  --p-gold-700:   var(--cd-gold-700);
  --p-gold-50:    var(--cd-gold-50);
  --p-teal:       var(--cd-teal);
  --p-teal-700:   var(--cd-teal-700);
  --p-teal-50:    var(--cd-teal-100);

  /* --font-body is already defined by the DS typography tokens (Inter); only alias the heading name */
  --font-head: var(--font-heading);

  --maxw: 1180px;
  --pad: 24px;
}

/* "Purple only" tweak: collapse the gold + teal accents to purple. The remap must
   cover BOTH the DS tokens (so DS Badge/IconChip/SectionHeader follow) AND the --p-*
   aliases used in this page's markup (those pre-resolve at :root, so they need their
   own override here on the wrapper, where descendants inherit the purple value). */
[data-accent="pure"] {
  --cd-gold: var(--cd-purple);     --cd-gold-700: var(--cd-purple-700);  --cd-gold-100: var(--cd-purple-100);
  --cd-teal: var(--cd-purple);     --cd-teal-700: var(--cd-purple-700);  --cd-teal-100: var(--cd-purple-100);
  --p-gold: var(--cd-purple);      --p-gold-700: var(--cd-purple-700);   --p-gold-50: var(--cd-purple-100);
  --p-teal: var(--cd-purple);      --p-teal-700: var(--cd-purple-700);   --p-teal-50: var(--cd-purple-100);
}

/* "Gold only" tweak: swap every teal accent for gold (purple still leads). */
[data-accent="gold"] {
  --cd-teal: var(--cd-gold);       --cd-teal-700: var(--cd-gold-700);    --cd-teal-100: var(--cd-gold-100);
  --p-teal: var(--cd-gold);        --p-teal-700: var(--cd-gold-700);     --p-teal-50: var(--cd-gold-50);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--cd-ink);
  background: var(--cd-ground);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

h1, h2, h3, h4 { font-family: var(--font-head); margin: 0; letter-spacing: -0.01em; }
p { margin: 0; }
img { display: block; max-width: 100%; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad); padding-right: var(--pad); }
.num { font-feature-settings: "tnum" 1, "lnum" 1; font-variant-numeric: tabular-nums lining-nums; }

/* Eyebrow (DS voice: uppercase, wide tracking, purple) */
.eyebrow {
  font-family: var(--font-head); font-weight: 700; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--cd-purple);
}
.eyebrow svg { color: var(--cd-teal); }

/* Link-style buttons (DS Button handles real <button>s; this matches its look for <a>) */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-head); font-weight: 600; line-height: 1;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 11px 22px; font-size: 14px; cursor: pointer; text-decoration: none;
  transition: background-color .15s ease, color .15s ease; white-space: nowrap;
}

/* Card surface = DS Card look (white, hairline, soft low shadow, 10px) */
.card {
  background: var(--cd-white); border: 1px solid var(--cd-line);
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
}

/* fallback icon chip (DS IconChip used where possible) */
.ichip { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; border: 2px solid var(--cd-purple); color: var(--cd-purple); flex: none; }

.wm { position: absolute; pointer-events: none; opacity: .07; }
section { position: relative; }

/* Businesses-interested strip: slim horizontal scrollbar */
.wh-scroll::-webkit-scrollbar { height: 6px; }
.wh-scroll::-webkit-scrollbar-thumb { background: var(--cd-teal-100); border-radius: 999px; }
.wh-scroll::-webkit-scrollbar-track { background: transparent; }

@media (max-width: 760px) { :root { --pad: 18px; } }