/* Team CORE, LLC — site styles.
   Colors and type follow the Team CORE brand rules. The layout reproduces the
   approved design previews in design/; the inline styles used there are
   consolidated here so a change lands in one place. */

:root {
  --green: #78C040;   /* accents and dividers only, never behind body text */
  --forest: #4F8D1F;  /* readable green: headings, links, table headers */
  --gray: #656968;
  --sage: #E8F4D9;
  --light: #F5F5F5;
  --char: #2B2B2B;    /* body text */
  --rule: #E3E5E4;
  --field: #B9BDBC;
  --dim: #E3E5E4;     /* text on charcoal */
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }

/* Jumping to a transaction from the home page scrolls rather than cuts, so
   the reader can see where on the page they landed. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--char);
  background: #FFFFFF;
  -webkit-font-smoothing: antialiased;
}

/* Brand rule: paragraphs are justified on both edges. */
p { text-align: justify; hyphens: auto; }

a { color: var(--char); }
a:hover { color: var(--forest); }

img { max-width: 100%; }

/* Several components set display:flex, which otherwise beats the browser's
   own [hidden] rule and leaves filtered cards and closed panels on screen. */
[hidden] { display: none !important; }

h1, h2, h3, .display { font-family: Archivo, 'Segoe UI', Arial, sans-serif; }

:focus-visible { outline: 3px solid var(--forest); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 99;
  background: #FFFFFF; color: var(--char); padding: 12px 18px; font-weight: 700;
}
.skip:focus { left: 0; }

.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

.section { padding: 80px 0; }
.section--tight { padding: 64px 0 48px; }
.section--light { background: var(--light); }
.section--sage { background: var(--sage); }

.eyebrow {
  font-weight: 700; font-size: 14px; letter-spacing: 2px;
  text-transform: uppercase; color: var(--gray);
}

.h2 { margin: 0; font-weight: 800; font-size: 38px; line-height: 1.15; color: var(--forest); }
.h3 { margin: 0; font-weight: 800; font-size: 32px; }

.stack { display: flex; flex-direction: column; }
.gap-6 { gap: 6px; } .gap-10 { gap: 10px; } .gap-14 { gap: 14px; }
.gap-16 { gap: 16px; } .gap-24 { gap: 24px; } .gap-28 { gap: 28px; }
.gap-32 { gap: 32px; } .gap-36 { gap: 36px; }

.rule-green { width: 72px; height: 6px; background: var(--green); border-radius: 3px; }
.rule-green--sm { width: 64px; }

/* ---------- header ---------- */

.site-header { background: #FFFFFF; border-bottom: 1px solid var(--rule); }
.site-header .container {
  padding-top: 18px; padding-bottom: 18px;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 16px;
}
.site-header .logo { display: inline-flex; align-items: center; }
.site-header .logo img { height: 64px; width: auto; display: block; }

.nav { display: flex; flex-wrap: wrap; gap: 4px 28px; font-weight: 600; font-size: 16px; }
.nav a {
  text-decoration: none; padding: 10px 0;
  border-bottom: 3px solid transparent;
}
.nav a[aria-current='page'] { border-bottom-color: var(--green); }

/* ---------- hero ---------- */

.hero { background: var(--char); color: #FFFFFF; position: relative; }
.hero .container { position: relative; z-index: 1; padding-top: 56px; padding-bottom: 56px; }
.hero--tall .container { padding-top: 96px; padding-bottom: 88px; }
.hero h1 { margin: 0; font-weight: 800; font-size: 44px; line-height: 1.12; }
.hero--tall h1 { font-size: 56px; line-height: 1.08; max-width: 820px; }
.hero p { margin: 0; color: var(--dim); max-width: 720px; }
.hero--tall p { font-size: 21px; max-width: 680px; }

/* Header photo sits behind the charcoal panel so text contrast is unchanged. */
.hero--photo { background-size: cover; background-position: center; }
.hero--photo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(43, 43, 43, 0.95) 0%, rgba(43, 43, 43, 0.90) 42%,
    rgba(43, 43, 43, 0.62) 78%, rgba(43, 43, 43, 0.50) 100%);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 26px; border-radius: 6px;
  font-weight: 700; text-decoration: none; font: inherit; font-weight: 700;
  cursor: pointer; border: 0;
}
.btn--green { background: var(--green); color: var(--char); }
.btn--dark { background: var(--char); color: #FFFFFF; }
.btn--outline { border: 2px solid #FFFFFF; color: #FFFFFF; background: none; }
.btn--block { width: 100%; }

.link-strong { font-weight: 700; text-underline-offset: 4px; padding: 10px 0; }
.link-strong { text-decoration-color: var(--green); }

/* ---------- cards ---------- */

.grid { display: grid; gap: 24px; }
.grid--cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid--people { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.grid--wide { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 48px; }
.grid--services { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px; }
.grid--facts { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; }
.grid--notes { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px 28px; }

/* Highlights flow down columns rather than sitting on a grid, so one long
   item no longer stretches the whole row it lands in. */
.highlights {
  margin: 0; padding: 0; list-style: none;
  columns: 3 230px; column-gap: 36px;
}
.highlights li {
  break-inside: avoid; -webkit-column-break-inside: avoid;
  position: relative; padding-left: 20px; margin: 0 0 10px;
  line-height: 1.5;
}
.highlights li::before {
  content: ''; position: absolute; left: 2px; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--green);
}
@media (max-width: 700px) { .highlights { columns: 1; } }

.card {
  text-decoration: none; color: var(--char); background: #FFFFFF;
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
}
.card__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.card__title { font-family: Archivo, Arial, sans-serif; font-size: 19px; line-height: 1.3; }
.card__city { color: var(--gray); }
.card__summary { font-weight: 600; margin-top: auto; }
.card img { display: block; width: 100%; height: 160px; object-fit: cover; }

.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge {
  font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 3px 10px; border-radius: 4px;
}
.badge--type { background: var(--char); color: #FFFFFF; }
.badge--deal { background: var(--sage); color: var(--char); }
/* Status sits apart from type and deal: it is the thing a visitor most needs
   to notice, so it takes the readable green rather than a third neutral. */
.badge--status { background: var(--forest); color: #FFFFFF; }
/* An incentive is an offer, not a state, so it takes the brighter primary
   green against charcoal - 6.3:1, and loud enough to catch the eye where the
   forest green reads as another piece of the listing's furniture. */
.badge--incentive { background: var(--green); color: var(--char); }

/* Stand-in for a listing with no photo yet. */
.photo-missing {
  height: 160px; background: var(--sage);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; color: var(--gray); font-size: 13px;
}

.service-card {
  background: #FFFFFF; border-radius: 10px; padding: 32px;
  display: flex; flex-direction: column; gap: 14px;
}
.service-card h3 { margin: 0; font-size: 24px; }
.service-card ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; }
.service-card--green { border-top: 6px solid var(--green); }
.service-card--gray { border-top: 6px solid var(--gray); }

/* Services page: the two divisions side by side, each running down its own
   column. Stacked, the lower one read as a footnote to the upper; and giving
   one the green and the other the grey made the page look like a comparison
   between them rather than two halves of one firm. Both get the green. */
.services-split {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 48px; align-items: stretch;
}
.service-col { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
/* The two intros are not the same length. Letting them take up the slack
   starts both lists on the same line, which is the point of columns. The list
   must then be told not to shrink, or it gives back the space the intro took
   and loses its last item off the bottom. */
.service-col > p { flex: 1 0 auto; }
.service-col > .ticks { flex: 0 0 auto; }
.service-col .section-head { font-size: 28px; }
.ticks {
  margin: 0; padding: 26px 28px; list-style: none;
  background: var(--sage); border-top: 6px solid var(--green); border-radius: 10px;
  display: flex; flex-direction: column; gap: 10px;
}
/* The marker is the brand green; the words stay on the sage tint, which is
   what the brand rules allow behind body text. */
.ticks li { position: relative; padding-left: 26px; }
.ticks li::before {
  content: ''; position: absolute; left: 0; top: 0.58em;
  width: 10px; height: 10px; border-radius: 2px; background: var(--green);
}
/* White card on a white section needs an outline to read as a card.
   The accent top border is left alone. */
.section:not(.section--light) .service-card {
  border-left: 1px solid var(--rule);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.grid--deals { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 28px; }
.deal {
  background: #FFFFFF; border: 1px solid var(--rule); border-radius: 10px;
  overflow: hidden; display: flex; flex-direction: column;
}
.deal > img { display: block; width: 100%; height: 190px; object-fit: cover; }
/* A card linked to from the home page: leave a little air above it so it is
   not flush with the top of the window, and ring it in the brand green so the
   reader can see which of fifteen they were sent to. */
.deal { scroll-margin-top: 28px; }
.deal:target { box-shadow: 0 0 0 3px var(--green); border-color: var(--green); }
.deal .photo-missing { height: 190px; }
.deal__body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 6px; }
.deal__address { font-family: Archivo, Arial, sans-serif; font-size: 20px; line-height: 1.3; }
.deal__place { color: var(--gray); }
.deal__size {
  align-self: flex-start; margin-top: 2px; font-weight: 700; color: var(--forest);
}
.deal__body p { margin: 10px 0 0; font-size: 15px; line-height: 1.55; }

.deal-card {
  background: #FFFFFF; border-radius: 8px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: var(--char);
}
a.deal-card:hover { box-shadow: 0 2px 10px rgba(43, 43, 43, 0.12); }

.quotes { display: grid; grid-template-columns: 1fr; gap: 28px; }
.quotecard {
  margin: 0; background: #FFFFFF; border: 1px solid var(--rule); border-radius: 10px;
  border-top: 6px solid var(--green); padding: 26px 28px;
  display: flex; flex-direction: column; gap: 10px;
}
/* Both cards use the smaller body treatment, so a one-line quote and a
   five-paragraph letter read as one set. */
.quotecard p {
  margin: 0; font-family: 'Source Sans 3', 'Segoe UI', Arial, sans-serif;
  font-size: 17px; font-weight: 400; line-height: 1.6;
}
/* The category reads as the card's heading, in the same charcoal as the
   quote; the person stays a step lighter so the two do not compete. */
.quotecard .eyebrow { color: var(--char); font-size: 14px; }
.quotecard--feature .eyebrow { font-size: 14px; }
.quotecard cite { color: #6E7472; font-weight: 600; font-style: normal; font-size: 15px; }

/* A long testimonial runs the full width, but keeps the same type as the
   short quote so the two cards read as one set. */
.quotecard--feature { grid-column: 1 / -1; }
.quotecard--feature p + p { margin-top: 14px; }
.deal-card strong { font-family: Archivo, Arial, sans-serif; font-size: 22px; }
.deal-card .city { color: var(--gray); }

.clients {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 20px; align-items: center;
}
.clients__logo {
  background: #FFFFFF; border: 1px solid var(--rule); border-radius: 8px;
  padding: 18px; display: flex; align-items: center; justify-content: center;
  min-height: 96px;
}
.clients__logo img { max-width: 100%; max-height: 56px; width: auto; height: auto; }

.quote { max-width: 900px; margin: 0 auto; }
.quote p {
  margin: 0; font-family: Archivo, Arial, sans-serif; font-size: 26px;
  line-height: 1.45; font-weight: 500;
}
.quote cite { color: var(--gray); font-weight: 600; font-style: normal; }

/* ---------- property search ---------- */

.toolbar {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
}
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  min-height: 44px; padding: 0 18px; border-radius: 22px;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: #FFFFFF; color: var(--char); border: 2px solid var(--field);
}
.chip[aria-pressed='true'] { background: var(--char); color: #FFFFFF; border-color: var(--char); }

.field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; }
.field input, .field select, .field textarea {
  min-height: 44px; border: 1px solid var(--field); border-radius: 6px;
  padding: 0 12px; font: inherit; font-weight: 400; background: #FFFFFF;
}
.field textarea { padding: 10px 12px; min-height: 0; }
.field--search { font-size: 14px; min-width: 260px; flex: 0 1 320px; }
.field--search input { font-size: 16px; }

.result-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  align-items: center; gap: 12px;
}
.count { color: var(--gray); font-weight: 600; }

.viewtoggle {
  display: inline-flex; border: 2px solid var(--char);
  border-radius: 8px; overflow: hidden;
}
.viewtoggle button {
  min-height: 44px; padding: 0 18px; border: 0;
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  background: #FFFFFF; color: var(--char);
}
.viewtoggle button[aria-pressed='true'] { background: var(--char); color: #FFFFFF; }

.empty {
  background: var(--light); border-radius: 10px; padding: 40px 24px;
  text-align: center; color: var(--gray); font-weight: 600;
}

/* Map view */
.mapwrap { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.maplist {
  flex: 1 1 300px; max-height: 640px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 10px; padding-right: 4px;
}
.maplist a {
  display: flex; flex-direction: column; text-decoration: none; color: var(--char);
  padding: 10px 14px; border-radius: 8px; border: 1px solid var(--rule); background: #FFFFFF;
}
.maplist a.is-active { border-color: var(--forest); background: var(--sage); }
.maplist strong { font-family: Archivo, Arial, sans-serif; font-size: 16px; line-height: 1.3; }
.maplist span { font-size: 14px; color: var(--gray); }

.mapcanvas {
  flex: 999 1 560px; min-width: 0; position: relative; height: 640px;
  border-radius: 12px; overflow: hidden; border: 1px solid #D5DBD2;
  background: var(--light);
  z-index: 0;                        /* keep tiles under the sticky header */
}

/* Leaflet markers and clusters */
.map-pin { background: none; border: 0; }
/* Leaflet's own stylesheet loads after this one and sets display:block on
   .leaflet-marker-icon, which beats a single class at equal specificity. Both
   classes are on the element, so naming both wins and the count centres. */
.leaflet-marker-icon.map-cluster {
  background: var(--forest); color: #FFFFFF; border: 3px solid #FFFFFF;
  border-radius: 50%; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  display: flex; align-items: center; justify-content: center;
  font-family: Archivo, Arial, sans-serif; font-weight: 700; font-size: 14px;
  line-height: 1;
}
.leaflet-marker-icon.map-cluster span { display: block; }
.leaflet-popup-content { margin: 12px 14px; }
.mappop__card {
  display: flex; flex-direction: column; gap: 2px;
  text-decoration: none; color: var(--char);
}
.mappop__thumb {
  display: block; width: 100%; height: 130px; object-fit: cover;
  border-radius: 6px; margin-bottom: 8px; background: var(--light);
}
.mappop__card strong { font-family: Archivo, Arial, sans-serif; font-size: 16px; }
.mappop__card span { font-size: 13px; color: var(--gray); }
.mappop__summary { font-weight: 600; color: var(--char) !important; margin-top: 4px; }
.mappop__go {
  margin-top: 8px; font-weight: 700; color: var(--forest) !important;
  text-decoration: underline; text-underline-offset: 3px;
}
.mappop__approx {
  display: block; margin-top: 8px; font-size: 12px; color: var(--gray);
  border-top: 1px solid var(--rule); padding-top: 6px;
}
.mapbadge {
  position: absolute; top: 14px; left: 14px; z-index: 3;
  background: var(--char); color: #FFFFFF; font-size: 13px; font-weight: 700;
  padding: 4px 10px; border-radius: 4px;
}
.mapzoom {
  position: absolute; top: 14px; right: 14px; z-index: 3;
  display: flex; flex-direction: column;
  border: 1px solid var(--field); border-radius: 6px; overflow: hidden;
}
.mapzoom button {
  width: 44px; height: 44px; background: #FFFFFF; border: 0;
  font-size: 22px; font-weight: 700; color: var(--char); cursor: pointer;
}
.mapzoom button:first-child { border-bottom: 1px solid var(--field); }
.maplabel {
  position: absolute; left: 84%; top: 84%; font-size: 13px; font-weight: 700;
  letter-spacing: 2px; color: var(--gray); text-transform: uppercase;
}
.pin {
  position: absolute; transform: translate(-50%, -44px);
  background: none; border: 0; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; min-width: 44px; z-index: 1;
}
.pin.is-active { z-index: 2; }
.pin__glyph { position: relative; width: 36px; height: 44px; display: block; }
.pin__count {
  position: absolute; top: 8px; left: 0; width: 36px; text-align: center;
  color: #FFFFFF; font-weight: 700; font-size: 14px; line-height: 1;
}
.pin__label {
  margin-top: 2px; background: #FFFFFF; color: var(--char); font-size: 12px;
  font-weight: 700; padding: 1px 6px; border-radius: 4px; white-space: nowrap;
}
.mappop {
  position: absolute; left: 16px; bottom: 16px; width: 300px;
  max-width: calc(100% - 32px); max-height: 300px; overflow-y: auto;
  background: #FFFFFF; border-radius: 10px; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; z-index: 4;
}
.mappop__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mappop__head strong { font-family: Archivo, Arial, sans-serif; font-size: 18px; }
.mappop__close {
  width: 44px; height: 44px; background: var(--light); border: 0;
  border-radius: 6px; font-size: 20px; color: var(--char); cursor: pointer; flex-shrink: 0;
}
.mappop a {
  display: flex; flex-direction: column; text-decoration: none;
  padding: 8px 10px; border-radius: 6px; background: var(--sage); color: var(--char);
}
.mappop a strong { font-size: 15px; }
.mappop a span { font-size: 13px; color: #4A4D4C; }

.note { color: var(--gray); font-size: 15px; }

/* ---------- property detail ---------- */

.gallery__main { position: relative; border-radius: 12px; overflow: hidden; background: var(--char); }
.gallery__main img { display: block; width: 100%; height: 480px; object-fit: cover; }
.gallery__count {
  position: absolute; bottom: 16px; right: 16px;
  background: rgba(43, 43, 43, 0.85); color: #FFFFFF;
  font-size: 14px; font-weight: 600; padding: 6px 12px; border-radius: 6px;
}
/* Land aerials carry callouts to the edges, so they are shown whole rather
   than cropped to fill the frame. */
.gallery__main--contain { background: var(--light); }
.gallery__main--contain img { object-fit: contain; }
.gallery__thumbs { display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; }
.gallery__thumbs button {
  padding: 0; border-radius: 8px; overflow: hidden; cursor: pointer;
  background: #FFFFFF; border: 3px solid transparent;
}
.gallery__thumbs button[aria-current='true'] { border-color: var(--green); }
.gallery__thumbs img { display: block; width: 100%; height: 96px; object-fit: cover; }

.detail { display: flex; flex-wrap: wrap; gap: 48px; }
.detail__main { flex: 999 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.detail__side { flex: 1 1 300px; display: flex; flex-direction: column; gap: 18px; }
.detail h1 { margin: 0; font-weight: 800; font-size: 42px; line-height: 1.15; }
.detail h2 { margin: 0; font-size: 28px; color: var(--forest); }
.detail__place { font-size: 20px; color: var(--gray); }
.detail__headline { font-size: 19px; font-weight: 600; color: var(--forest); }

.nearby { display: flex; flex-wrap: wrap; gap: 20px; align-items: stretch; }
.nearby__map {
  flex: 999 1 420px; min-width: 0; height: 420px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--rule);
  background: var(--light); z-index: 0;
}
.nearby__list {
  flex: 1 1 240px; display: flex; flex-wrap: wrap; gap: 18px 28px;
  align-content: flex-start;
}
.nearby__col { flex: 1 1 180px; }
.nearby__col h3 {
  margin: 0 0 6px; font-size: 16px; display: flex; align-items: center; gap: 8px;
}
.nearby__col ul { margin: 0; padding: 0; list-style: none; }
.nearby__col li { margin: 0; }
.nearby__col button {
  background: none; border: 0; padding: 4px 0; font: inherit; font-size: 15px;
  color: var(--char); cursor: pointer; text-align: left; min-height: 30px;
}
.nearby__col button:hover { color: var(--forest); text-decoration: underline; }
.nearby__dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; }
.nearby__dot--restaurant { background: var(--forest); }
.nearby__dot--retail { background: var(--gray); }
.nearby-pin { background: none; border: 0; }
.leaflet-container { font: inherit; }

.mapembed {
  position: relative; width: 100%; aspect-ratio: 16 / 9; min-height: 280px;
  border-radius: 12px; overflow: hidden; border: 1px solid var(--rule);
  background: var(--light);
}
.mapembed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.doclist { margin: 0; padding: 0; list-style: none; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 24px; }
.doclist a { display: inline-flex; align-items: center; gap: 8px;
  min-height: 40px; font-weight: 600; }
.pdf-tag { font-size: 11px; font-weight: 700; letter-spacing: 1px;
  background: var(--sage); color: var(--forest); padding: 2px 7px; border-radius: 4px; }

.fact {
  background: var(--light); border-radius: 8px; padding: 16px 18px;
  display: flex; flex-direction: column;
}
.fact span { font-size: 14px; color: var(--gray); font-weight: 600; }
.fact strong { font-family: Archivo, Arial, sans-serif; font-size: 20px; }

.tablewrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; }
table { width: 100%; border-collapse: collapse; min-width: 480px; }
thead tr { background: var(--forest); color: #FFFFFF; text-align: left; }
th { padding: 12px 18px; font-size: 18px; font-weight: 700; }
td { padding: 12px 18px; }
tbody tr:nth-child(even) { background: var(--sage); }
td:first-child { font-weight: 700; }

.docbox {
  background: var(--char); color: #FFFFFF; border-radius: 12px; padding: 26px;
  display: flex; flex-direction: column; gap: 14px;
}
.docbox strong { font-family: Archivo, Arial, sans-serif; font-size: 20px; }

.agentbox {
  border: 1px solid var(--rule); border-radius: 12px; padding: 26px;
  display: flex; flex-direction: column; gap: 20px;
}
.agentbox > strong { font-family: Archivo, Arial, sans-serif; font-size: 20px; }
.agent { display: flex; gap: 14px; align-items: center; }
.agent img {
  width: 72px; height: 72px; border-radius: 50%; object-fit: cover;
  object-position: 50% 6%; flex-shrink: 0; border: 3px solid var(--sage);
}
.agent__initials {
  width: 72px; height: 72px; border-radius: 50%; flex-shrink: 0;
  border: 3px solid var(--sage); background: var(--sage); color: var(--forest);
  display: flex; align-items: center; justify-content: center;
  font-family: Archivo, Arial, sans-serif; font-weight: 800; font-size: 22px;
}
.agent__lines { display: flex; flex-direction: column; line-height: 1.4; }
.agent__lines span, .agent__lines a { font-size: 15px; }
.agent__lines span { color: var(--gray); font-size: 14px; }

/* ---------- team ---------- */

/* Split header: heading beside the photo. The photo keeps its own shape, so a
   wide group shot is shown whole instead of cropped to a band. */
.hero--split .container {
  display: flex; flex-wrap: wrap; align-items: center; gap: 36px;
  padding-top: 48px; padding-bottom: 48px;
}
.hero--split .hero__text { flex: 1 1 320px; min-width: 0; }
.hero--split .hero__text p { max-width: none; }
.hero--split .hero__media { flex: 1 1 440px; min-width: 0; }
.hero--split .hero__media img {
  display: block; width: 100%; height: auto; border-radius: 10px;
}

.section-head {
  margin: 0; font-weight: 800; font-size: 32px;
  padding-bottom: 12px; border-bottom: 4px solid var(--green);
}
.section-head--gray { border-bottom-color: var(--gray); }

.person {
  border: 1px solid var(--rule); border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column; background: #FFFFFF;
}
.section--light .person { border: 0; }
/* Headshots are full 2:3 frames; this reproduces the approved 4:5 crop. */
.person img { display: block; width: 100%; height: 280px; object-fit: cover; object-position: 50% 5%; }
.person__initials {
  height: 280px; background: var(--sage);
  display: flex; align-items: center; justify-content: center;
  font-family: Archivo, Arial, sans-serif; font-weight: 800; font-size: 44px; color: var(--forest);
}
.person__body { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 2px; }
.person__body strong { font-family: Archivo, Arial, sans-serif; font-size: 19px; }
.person__title { color: var(--gray); font-size: 15px; }
.person__body a { font-size: 15px; }
.person__body a:first-of-type { margin-top: 6px; }

.person__bio { margin-top: 10px; border-top: 1px solid var(--rule); padding-top: 8px; }
.person__bio > summary {
  cursor: pointer; font-weight: 700; font-size: 15px; color: var(--forest);
  list-style: none; padding: 4px 0; min-height: 32px; display: flex; align-items: center;
}
.person__bio > summary::-webkit-details-marker { display: none; }
.person__bio > summary::after { content: ' +'; font-weight: 700; margin-left: 4px; }
.person__bio[open] > summary::after { content: ' \2212'; }
.person__bio p { margin: 6px 0 0; font-size: 15px; line-height: 1.55; }

/* ---------- contact ---------- */

.panel { border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 4px; }
.panel--light { background: var(--light); }
.panel--sage { background: var(--sage); gap: 10px; }
.panel strong { font-family: Archivo, Arial, sans-serif; font-size: 22px; }
.panel--light strong { color: var(--forest); margin-bottom: 6px; }
.panel .phone { margin-top: 10px; font-weight: 700; font-size: 20px; }

.form {
  border: 1px solid var(--rule); border-radius: 10px; padding: 32px;
  display: flex; flex-direction: column; gap: 16px;
}
.form > strong { font-family: Archivo, Arial, sans-serif; font-size: 22px; }

/* Honeypot: off-screen for people, visible to the bots that fill everything. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- footer ---------- */

.site-footer { background: var(--char); color: var(--dim); }
.site-footer .container {
  padding-top: 48px; padding-bottom: 48px;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 24px; font-size: 15px;
}
.site-footer strong { color: #FFFFFF; font-family: Archivo, Arial, sans-serif; font-size: 18px; }
.site-footer a { color: #FFFFFF; }
.site-footer .social { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.social__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.social__icon svg { width: 19px; height: 19px; fill: #FFFFFF; display: block; }
.social__icon:hover { background: var(--green); border-color: var(--green); }
.social__icon:hover svg { fill: var(--char); }

/* ---------- narrow screens ---------- */

@media (max-width: 760px) {
  .hero--tall h1 { font-size: 38px; }
  .hero h1 { font-size: 32px; }
  .hero--tall p { font-size: 18px; }
  .h2, .h3, .section-head { font-size: 28px; }
  .detail h1 { font-size: 32px; }
  .section { padding: 56px 0; }
  .hero--tall .container { padding-top: 64px; padding-bottom: 56px; }
  .gallery__main img { height: 280px; }
  .gallery__thumbs { grid-template-columns: repeat(auto-fit, minmax(56px, 1fr)); gap: 8px; }
  .gallery__thumbs img { height: 56px; }
  .hero--split .container { gap: 24px; padding-top: 36px; padding-bottom: 36px; }
  .site-header .logo img { height: 48px; }
}

@media print {
  .site-header, .site-footer, .toolbar, .viewtoggle, .gallery__thumbs { display: none; }
  body { font-size: 12pt; }
}

/* ---------- a suite's own photographs ---------- */

/* The suite table links to a floor plan and, where there are photographs of
   that suite rather than of the building, to those as well. They open over
   the page: a reader comparing three suites should not lose their place in
   the table to look at one. */
.suite-reel { font-weight: 600; }
.reel {
  position: fixed; inset: 0; z-index: 50; border: 0; padding: 0; margin: 0;
  width: 100%; height: 100%; max-width: none; max-height: none;
  background: rgba(43, 43, 43, 0.92);
}
.reel::backdrop { background: rgba(43, 43, 43, 0.92); }
.reel__inner {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px; padding: 56px 16px 20px;
}
.reel img {
  max-width: min(1100px, 94vw); max-height: 76vh;
  width: auto; height: auto; border-radius: 8px; background: #FFFFFF;
}
.reel__bar {
  display: flex; align-items: center; gap: 18px;
  color: #FFFFFF; font-size: 15px; font-weight: 600;
}
.reel__bar button, .reel__close {
  min-height: 44px; min-width: 44px; padding: 0 16px; cursor: pointer;
  border: 2px solid #FFFFFF; border-radius: 6px;
  background: none; color: #FFFFFF; font: inherit; font-weight: 700;
}
.reel__bar button:hover, .reel__close:hover { background: var(--green); border-color: var(--green); color: var(--char); }
.reel__close { position: absolute; top: 14px; right: 16px; }
.reel__title { position: absolute; top: 22px; left: 20px; color: #FFFFFF; font-weight: 700; }