/* Garrett Street Stables — rebuilt from GS-Desktop_v1.xd
   Design tokens (from XD): beige #e7e0d6, nav #edece9, dark #181818,
   orange #eb9a30, display LargePoint Black, body Grotesque MT.
   Artboard 1920w, 140px side margins, 12-col grid. */

@font-face {
  font-family: 'LargePoint';
  src: url('assets/fonts/LargePoint-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}
@font-face {
  font-family: 'Grotesque MT';
  src: url('assets/fonts/GrotesqueMT.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  --beige: #e7e0d6;
  --nav: #edece9;
  --dark: #181818;
  --orange: #eb9a30;
  --display: 'LargePoint', 'Arial Narrow', sans-serif;
  --body: 'Grotesque MT', Arial, sans-serif;
  --margin: clamp(20px, 7.3vw, 140px);   /* 140/1920 */
  --h-xl: clamp(34px, 4.17vw, 80px);     /* 80/1920 */
  --h-lg: clamp(26px, 3.13vw, 60px);     /* 60/1920 */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:var(--body); color:#000; background:#fff; font-size:20px; line-height:1.45; }
img { display:block; max-width:100%; }
a { color:inherit; }

h1, h2, h3, .display { font-family:var(--display); font-weight:900; text-transform:uppercase; line-height:1.05; letter-spacing:.01em; }

/* ── Nav ─────────────────────────────────────────── */
.topnav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:60px; padding:0 20px;
  background:var(--nav);
  transform:translateY(-100%);
  transition:transform .35s ease;
}
.topnav[data-visible="true"] { transform:translateY(0); }
.topnav a.topnav-brand {
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:26px; letter-spacing:.04em; text-decoration:none; text-align:center;
}
.topnav-contact { justify-self:end; }
.topnav a { font-size:14px; text-decoration:none; }
.topnav a:hover { text-decoration:underline; }
.topnav-links { display:flex; gap:30px; }
.topnav-toggle, .topnav-menu { display:none; }   /* mobile only — see media query */

/* ── Hero ────────────────────────────────────────── */
.hero {
  position:relative;
  height:100vh;
  min-height:520px;
  max-height:1078px;          /* per artboard */
  background:url('assets/img/xd/hero-duotone.jpg') center/cover no-repeat;
  display:flex; align-items:center; justify-content:center;
}
.hero-logo {
  width:29vw; min-width:300px; max-width:552px;
  filter:brightness(0) invert(1);   /* lockup rendered white over the duotone */
  margin-bottom:6vh;
}
.hero-bottom {
  position:absolute; left:0; right:0; bottom:36px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:16px;
  padding:0 38px;
  color:#fff;
}
.hero-strap {
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:var(--h-lg); line-height:1; text-align:center;
}
.hero-side { font-size:clamp(13px, 1.04vw, 20px); line-height:1.3; }
.hero-sqft { text-align:right; }

/* ── Shared section rhythm ───────────────────────── */
section h1, section h2 {
  font-size:var(--h-xl);
  text-align:center;
  max-width:1240px;
  margin:0 auto;
}
.copy {
  max-width:820px; margin:32px auto 0; text-align:center;
  font-size:clamp(15px, 1.04vw, 20px);
}
.copy p + p { margin-top:1em; }

/* ── Intro (beige) ───────────────────────────────── */
.intro { background:var(--beige); padding:clamp(48px,6.2vw,119px) var(--margin) clamp(48px,5vw,96px); }
.intro-images {
  display:flex; gap:28px; justify-content:center; align-items:flex-start;
  margin-top:clamp(40px,3.8vw,74px);
}
.intro-img-narrow { width:30.8%; }   /* 434/1408 of content row */
.intro-img-wide { width:69.2%; max-width:974px; }
.intro-img-narrow img, .intro-img-wide img { width:100%; height:650px; max-height:34vw; object-fit:cover; }
figcaption { font-size:14px; margin-top:12px; }

/* ── Community (white) ───────────────────────────── */
.community { background:#fff; padding:clamp(48px,5.2vw,100px) var(--margin); }

/* ── Slideshow ───────────────────────────────────── */
.slideshow { margin-top:clamp(36px,3vw,58px); }
.slideshow .slides { position:relative; aspect-ratio:3/2; overflow:hidden; }
.full-bleed .slides { aspect-ratio:1920/1080; }
.slideshow .slides img {
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; transition:opacity .9s ease;
}
.slideshow .slides img.active { opacity:1; }
.community .slideshow { max-width:1290px; margin-left:auto; margin-right:auto; }
.dots { display:flex; gap:10px; justify-content:center; margin-top:22px; }
.dots button {
  width:10px; height:10px; border-radius:50%; border:1px solid #000;
  background:transparent; cursor:pointer; padding:0;
}
.dots button.active { background:#000; }
.location-slideshow { position:relative; }
.location-slideshow .slideshow { margin-top:0; }
.dots.light { position:absolute; bottom:18px; left:0; right:0; }
.dots.light button { border-color:#fff; }
.dots.light button.active { background:#fff; }

/* ── Availability (dark) ─────────────────────────── */
.availability { background:var(--dark); color:#fff; padding:clamp(48px,6.2vw,120px) var(--margin); }
.avail-table { max-width:778px; margin:clamp(40px,3.5vw,68px) auto 0; }
.avail-head, .avail-row {
  display:grid;
  grid-template-columns:50.1% 31% 18.9%;
  align-items:center; column-gap:0;
  position:relative;
}
.avail-head span:nth-child(4) { display:none; }
.avail-head { font-size:15px; padding-bottom:8px; }
.avail-head span:nth-child(3), .avail-row span:nth-child(3) { text-align:right; }
.avail-row {
  font-family:var(--display); font-weight:900; text-transform:uppercase;
  font-size:var(--h-xl); line-height:1;
}
/* rules span the three data columns only — buttons sit outside the table */
.avail-row span:nth-child(-n+3) { border-top:1px solid #707070; padding:8px 0 10px; }
.avail-row span:nth-child(4) {
  position:absolute; left:100%; margin-left:34px;
  top:50%; transform:translateY(calc(-50% - 0.27em));
}
.avail-row.total { color:var(--orange); }
.pill {
  font-family:var(--body); font-weight:400; text-transform:uppercase; white-space:nowrap;
  font-size:11px; letter-spacing:.08em; text-decoration:none;
  display:inline-block; padding:2px 14px;
  border:1px solid #fff; border-radius:12px;
}
.pill:hover { background:#fff; color:var(--dark); }

/* ── Location (beige) ────────────────────────────── */
.location { background:var(--beige); padding:clamp(48px,5.3vw,102px) var(--margin); }
.districts {
  display:grid; grid-template-columns:1fr 1fr;
  max-width:1300px; margin:clamp(40px,3.5vw,68px) auto 0;
}
.district {
  border-left:1px solid #707070;
  padding:0 clamp(20px,2.7vw,53px);
  text-align:center;
}
.districts .district:last-child { border-right:1px solid #707070; }
.district h3 { font-size:var(--h-lg); margin-bottom:14px; }
.district p { font-size:clamp(14px,1.04vw,20px); }

/* ── Contact / footer (orange) ───────────────────── */
.contact { background:var(--orange); padding:clamp(40px,2.6vw,49px) clamp(20px,2.5vw,48px) clamp(28px,2vw,38px); }
.contact-top {
  display:grid; grid-template-columns:minmax(0,1.4fr) auto auto auto;
  gap:clamp(24px,2.5vw,48px); align-items:start;
}
.contact-top h2 { font-size:var(--h-xl); text-align:left; margin:0; max-width:9.6em; }
.contact-people { display:flex; flex-direction:column; gap:18px; font-size:clamp(14px,1.04vw,20px); }
.person a { text-decoration:none; }
.person a:hover { text-decoration:underline; }
.person-name { }
.compton-mark img { width:88px; height:auto; }
.brochure-btn {
  font-size:11px; letter-spacing:.04em; text-decoration:none; text-transform:uppercase;
  background:#fff; border:none; border-radius:12px;
  padding:4px 14px; white-space:nowrap; align-self:start;
}
.brochure-btn:hover { background:#000; color:#fff; }
.contact-bottom {
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:clamp(24px,4vw,80px); margin-top:clamp(36px,4vw,80px);
}
.development-by { display:flex; flex-direction:column; gap:8px; font-size:13px; color:#2b2e34; letter-spacing:.35em; text-transform:uppercase; }
.development-by img { width:110px; height:auto; }
.disclaimer { font-size:11px; line-height:1.5; max-width:700px; }

/* ── Mobile ──────────────────────────────────────── */
@media (max-width: 860px) {
  .desktop-br { display:none; }

  /* Mobile nav: brand left, hamburger right, dropdown menu */
  .topnav { grid-template-columns:1fr auto; padding:0 20px; }
  .topnav-links, .topnav-contact { display:none; }
  .topnav a.topnav-brand { display:block; justify-self:start; font-size:21px; letter-spacing:.03em; }
  .topnav-toggle {
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:30px; height:30px; padding:0; border:none; background:none; cursor:pointer;
    justify-self:end;
  }
  .topnav-toggle span { display:block; width:22px; height:2px; background:var(--dark); transition:transform .25s ease, opacity .2s ease; }
  .topnav[data-open="true"] .topnav-toggle span:nth-child(1) { transform:translateY(7px) rotate(45deg); }
  .topnav[data-open="true"] .topnav-toggle span:nth-child(2) { opacity:0; }
  .topnav[data-open="true"] .topnav-toggle span:nth-child(3) { transform:translateY(-7px) rotate(-45deg); }
  .topnav-menu {
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; background:var(--nav);
    border-top:1px solid rgba(0,0,0,.08);
    padding:4px 20px 12px;
  }
  .topnav[data-open="true"] .topnav-menu { display:flex; }
  .topnav-menu a { font-size:15px; text-decoration:none; padding:12px 0; border-bottom:1px solid rgba(0,0,0,.07); }
  .topnav-menu a:last-child { border-bottom:none; }

  .hero { height:78vh; }
  .hero-logo { width:60vw; }
  .hero-bottom { grid-template-columns:1fr; justify-items:center; text-align:center; gap:8px; }
  .hero-sqft { text-align:center; }
  .intro-images { flex-direction:column; align-items:stretch; }
  .intro-img-narrow, .intro-img-wide { width:100%; max-width:none; }
  .intro-img-narrow img, .intro-img-wide img { height:auto; max-height:none; }
  .avail-head, .avail-row { grid-template-columns:1fr 1fr 1fr; }
  .avail-head span, .avail-row span:nth-child(-n+3) { text-align:center; }
  .avail-head span:nth-child(3), .avail-row span:nth-child(3) { text-align:center; }
  .avail-row { font-size:34px; }
  .avail-row span:nth-child(4) { display:none; }
  .districts { grid-template-columns:1fr; gap:36px; }
  .district { border-left:none; padding:0; }
  .districts .district:last-child { border-right:none; }
  .contact-top {
    grid-template-columns:auto 1fr;
    grid-template-areas: "h h" "people people" "mark btn";
    align-items:center;
  }
  .contact-top h2 { grid-area:h; }
  .contact-people { grid-area:people; }
  .compton-mark { grid-area:mark; }
  .brochure-btn { grid-area:btn; justify-self:end; align-self:center; }
  .contact-bottom { flex-direction:column; align-items:flex-start; gap:28px; }
  .development-by span { white-space:nowrap; }
  .disclaimer { max-width:none; }
}