@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:ital,wght@0,400;0,500;0,600;0,700;0,800;1,600&display=swap');

:root {
  --color-blue: #4fc3e8;
  --color-blue-dark: #1b8fb8;
  --color-teal: #7dd4d6;
  --color-navy: #0d2b3d;
  --color-yellow: #faf000;
  --color-black: #111111;
  --color-white: #ffffff;
  --color-offwhite: #f7f8f5;
  --color-gray: #5a5f5a;

  --font-display: 'Anton', Impact, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 96px;

  --max-w: 1100px;
  --shadow: 0 8px 30px rgba(0,0,0,.18);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-body);
  color: var(--color-black);
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
h1, h2, h3 { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .01em; margin: 0; line-height: 1.05; }
p { line-height: 1.55; margin: 0 0 var(--sp-4); }
ul { margin: 0; padding: 0; }
a { color: inherit; }

.wrap { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-6); }

/* ---------- Scroll-snap deck ---------- */
.deck {
  scroll-snap-type: y mandatory;
  overflow-y: scroll;
  height: 100vh;
}
.slide {
  scroll-snap-align: start;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-9) 0;
  position: relative;
}
.slide--blue   { background: var(--color-blue); color: var(--color-white); }
.slide--navy   { background: var(--color-navy); color: var(--color-white); }
.slide--black  { background: var(--color-black); color: var(--color-white); }
.slide--white  { background: var(--color-white); color: var(--color-black); }
.slide--offwhite { background: var(--color-offwhite); color: var(--color-black); }

.kicker {
  font-family: var(--font-body);
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: 14px;
  color: var(--color-blue-dark);
  margin-bottom: var(--sp-3);
}
.slide--blue .kicker { color: var(--color-navy); }
.slide--black .kicker, .slide--navy .kicker { color: var(--color-teal); }
.cover .kicker { color: var(--color-teal); }

h1.display { font-size: clamp(36px, 6vw, 76px); }
h2.display { font-size: clamp(28px, 4.4vw, 52px); }

.tape {
  display: flex;
  gap: 6px;
  margin: var(--sp-5) 0;
}
.tape span {
  width: 36px; height: 14px;
  background: var(--color-yellow);
  transform: skewX(-25deg);
}
.slide--blue .tape span { background: var(--color-navy); }
.slide--black .tape span, .slide--navy .tape span { background: var(--color-teal); }

.lede { font-size: clamp(16px, 1.6vw, 20px); font-style: italic; font-weight: 600; max-width: 720px; }

.bullets { list-style: none; max-width: 720px; }
.bullets li {
  position: relative;
  padding-left: var(--sp-5);
  margin-bottom: var(--sp-3);
  font-weight: 600;
  font-size: clamp(15px, 1.4vw, 18px);
}
.bullets li::before {
  content: '';
  position: absolute;
  left: 0; top: 9px;
  width: 14px; height: 4px;
  background: var(--color-blue);
}
.slide--blue .bullets li::before { background: var(--color-navy); }
.slide--black .bullets li::before, .slide--navy .bullets li::before { background: var(--color-teal); }

/* ---------- Cover ---------- */
.cover {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  background-size: cover;
  background-position: center;
  position: relative;
  color: var(--color-white);
}
.cover::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.75) 100%);
}
.cover-inner { position: relative; z-index: 1; padding: var(--sp-8) var(--sp-6); width: 100%; }
.cover h1 { font-size: clamp(40px, 9vw, 96px); }
.cover .lede { color: var(--color-white); margin-top: var(--sp-4); }
.logo-mark { height: 64px; margin-bottom: var(--sp-6); filter: drop-shadow(0 4px 14px rgba(0,0,0,.4)); }

/* ---------- Team ---------- */
.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin: var(--sp-6) 0;
}
.team-card { text-align: center; }
.team-card img {
  border-radius: 16px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow);
}
.team-card h3 { font-size: 26px; margin-bottom: 2px; }
.team-card .role { font-weight: 600; color: var(--color-blue-dark); margin-bottom: var(--sp-2); }
.team-card .contact { font-size: 14px; opacity: .85; }
.brokerage-line { text-align: center; font-size: 14px; opacity: .75; margin-top: var(--sp-2); }

/* ---------- Stats ---------- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin: var(--sp-6) 0;
}
.stat-card {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 14px;
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
}
.slide--white .stat-card, .slide--offwhite .stat-card {
  background: var(--color-white);
  border: 1px solid #e3e3df;
  box-shadow: var(--shadow);
}
.stat-card .num { font-family: var(--font-display); font-size: clamp(34px, 4.6vw, 54px); color: var(--color-blue); display: block; }
.slide--blue .stat-card .num { color: var(--color-navy); }
.slide--black .stat-card .num, .slide--navy .stat-card .num { color: var(--color-teal); }
.stat-card .label { font-weight: 700; font-size: 14px; }
.stat-card .sub { font-size: 13px; opacity: .75; margin-top: var(--sp-1); }

.photo-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 160px;
  gap: var(--sp-3);
  overflow-x: auto;
  padding-bottom: var(--sp-3);
  margin-top: var(--sp-6);
}
.photo-strip img { width: 160px; height: 160px; object-fit: cover; border-radius: 10px; }

/* ---------- Photo gallery ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-6);
}
.gallery img { width: 100%; height: 220px; object-fit: cover; border-radius: 10px; }

/* ---------- Two column ---------- */
.cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
}

/* ---------- Phases ---------- */
.phase-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-4);
  margin: var(--sp-6) 0;
}
.phase-card {
  background: rgba(0,0,0,.06);
  border-radius: 12px;
  padding: var(--sp-5);
}
.slide--black .phase-card, .slide--blue .phase-card, .slide--navy .phase-card { background: rgba(255,255,255,.1); }
.phase-card .phase-num { font-family: var(--font-display); font-size: 36px; color: var(--color-teal); display: block; margin-bottom: var(--sp-2); }
.phase-card h3 { font-size: 18px; margin-bottom: var(--sp-3); }
.phase-card ul.bullets li { font-size: 13.5px; font-weight: 500; }

/* ---------- Data tables (market conditions / comps) ---------- */
.data-table { width: 100%; border-collapse: collapse; margin-top: var(--sp-5); font-size: 13.5px; }
.data-table th, .data-table td { text-align: left; padding: 7px 10px; border-bottom: 1px solid rgba(0,0,0,.1); }
.data-table th { font-family: var(--font-body); font-weight: 800; text-transform: uppercase; font-size: 11px; letter-spacing: .04em; color: var(--color-blue-dark); }
.data-table td.num { font-weight: 700; }
.as-of { font-size: 13px; opacity: .65; margin-top: var(--sp-2); }
.callout-line { font-weight: 700; font-size: 16px; margin-top: var(--sp-5); max-width: 720px; }

/* ---------- Financials ---------- */
.fee-primary {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-6);
  background: var(--color-white);
  border: 1px solid #e3e3df;
  box-shadow: var(--shadow);
  border-radius: 14px;
  padding: var(--sp-6);
  margin: var(--sp-6) 0;
}
.fee-primary .fee-num { font-family: var(--font-display); font-size: 64px; line-height: 1; color: var(--color-blue); flex-shrink: 0; }
.fee-primary .fee-label { font-weight: 800; font-size: 17px; margin-bottom: var(--sp-2); }
.fee-primary p { font-size: 14px; margin: 0; }
.stat-card.stat-card--text { text-align: left; }
.stat-card.stat-card--text .label { display: block; font-size: 16px; margin-bottom: var(--sp-2); }
.stat-card.stat-card--text .sub { font-size: 14px; opacity: .85; margin: 0; }

/* ---------- Map ---------- */
.map-wrap { text-align: center; }
.map-wrap img { max-width: 420px; margin: var(--sp-6) auto 0; }

/* ---------- Showcase ---------- */
.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  margin-top: var(--sp-6);
}
.showcase-card img { width: 100%; height: 180px; object-fit: cover; border-radius: 10px; margin-bottom: var(--sp-3); }
.showcase-card img.showcase-logo { object-fit: contain; background: var(--color-offwhite); padding: var(--sp-5); }
.showcase-card h3 { font-size: 18px; margin-bottom: var(--sp-2); }
.showcase-card p { font-size: 14px; }

/* ---------- Contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
}
.contact-card {
  background: rgba(255,255,255,.12);
  border-radius: 14px;
  padding: var(--sp-6);
}
.contact-card h3 { font-size: 24px; margin-bottom: var(--sp-2); }
.contact-card a { display: block; font-weight: 700; margin-top: var(--sp-2); text-decoration: none; }

/* ---------- Nav dots ---------- */
.navdots {
  position: fixed;
  right: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 50;
}
.navdots a {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: rgba(0,0,0,.25);
  display: block;
}
.navdots a.active { background: var(--color-blue); width: 12px; height: 12px; }

footer.brandfoot {
  text-align: center;
  font-size: 12px;
  opacity: .6;
  padding: var(--sp-4);
}

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .wrap { padding: 0 var(--sp-5); }
  .team-grid, .stat-grid, .cols-2, .phase-grid, .showcase-grid, .gallery, .contact-grid {
    grid-template-columns: 1fr;
  }
  .navdots { display: none; }
}

/* ---------- Print ---------- */
@media print {
  .navdots { display: none; }
  .deck { height: auto; overflow: visible; }
  .slide { min-height: 0; page-break-after: always; padding: 36px 0; }
  .cover { min-height: 90vh; }
}