/* ============================================================
   Winston Dane — Homepage layout
   Depends on tokens.css + base.css. Page-specific composition only.
   ============================================================ */

/* ---- Sticky nav ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 0.9rem var(--wd-gutter);
  background: rgba(255,255,255,0.92); backdrop-filter: saturate(120%) blur(8px);
  border-bottom: 1px solid var(--wd-rule);
}
.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
.nav__brand img { width: 34px; height: 34px; object-fit: contain; }
.nav__brand span { font-family: var(--wd-serif); font-size: 1.35rem; color: var(--wd-ink); letter-spacing: 0.02em; }
.nav__links { display: flex; align-items: center; gap: 1.9rem; list-style: none; }
.nav__links a { font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wd-ink); font-weight: 500; transition: color 0.3s var(--wd-ease); }
.nav__links a:hover { color: var(--wd-gold); }
.nav__right { display: flex; align-items: center; gap: 1.2rem; }
.nav__phone { font-size: 0.85rem; letter-spacing: 0.06em; color: var(--wd-body); }
.nav__toggle { display: none; background: none; border: 0; font-size: 1.5rem; color: var(--wd-ink); }
@media (max-width: 940px) {
  .nav__links, .nav__phone { display: none; }
  .nav__toggle { display: block; }
}

/* ---- Hero ---- */
.hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; color: #fff; }
.hero__media { position: absolute; inset: 0; }
.hero__media img, .hero__media video { width: 100%; height: 100%; object-fit: cover; }
.hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,17,38,0.28) 0%, rgba(8,17,38,0.12) 40%, rgba(8,17,38,0.72) 100%); }
.hero__inner { position: relative; width: 100%; max-width: var(--wd-maxw); margin: 0 auto; padding: 0 var(--wd-gutter) clamp(3rem, 6vw, 6rem); }
.hero__eyebrow { color: var(--wd-gold); }
.hero h1 { color: #fff; max-width: 18ch; margin: 1rem 0 0; }
.hero__sub { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin: 1.3rem 0 2rem; max-width: 46ch; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; }
.hero__placeholder-note {
  position: absolute; top: 1rem; right: 1rem; z-index: 3;
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: rgba(8,17,38,0.6); color: rgba(255,255,255,0.85); padding: 0.4rem 0.7rem; border: 1px solid rgba(255,255,255,0.25);
}

/* ---- Intent router (3 cards) ---- */
.router { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--wd-rule); border-bottom: 1px solid var(--wd-rule); }
.router__card { background: #fff; padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.5rem, 2.5vw, 2.4rem); text-align: center; transition: background 0.4s var(--wd-ease); }
.router__card:hover { background: #faf7f2; }
.router__card h3 { font-size: 1.4rem; }
.router__card p { font-size: 0.9rem; color: var(--wd-body); margin: 0.5rem auto 1.2rem; max-width: 34ch; }
@media (max-width: 820px) { .router { grid-template-columns: 1fr; } }

/* ---- Proof band ---- */
.proof { background: var(--wd-navy); color: #fff; }
.proof .wd-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; padding-block: clamp(3rem, 5vw, 5rem); }
.proof__item { text-align: center; }
.proof__num { font-family: var(--wd-serif); font-size: clamp(2.4rem, 1.5rem + 3vw, 3.6rem); color: #fff; line-height: 1; }
.proof__label { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wd-gold); margin-top: 0.7rem; }
.proof__sub { font-size: 0.8rem; color: rgba(255,255,255,0.65); margin-top: 0.3rem; }
@media (max-width: 820px) { .proof .wd-wrap { grid-template-columns: 1fr 1fr; gap: 2.5rem 1rem; } }

/* ---- Split section (moat / next chapter) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.split--reverse .split__media { order: 2; }
.split__media { aspect-ratio: 4/3; overflow: hidden; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }
.split__body h2 { margin-bottom: 1.2rem; }
.split__body p { margin-bottom: 1.4rem; }
@media (max-width: 820px) { .split { grid-template-columns: 1fr; } .split--reverse .split__media { order: 0; } }

/* ---- Section heading helper ---- */
.sec-head { text-align: center; max-width: 60ch; margin: 0 auto clamp(2.5rem, 4vw, 3.5rem); }
.sec-head .wd-rule { margin: 1.2rem auto 0; }
.sec-head p { margin: 1.2rem auto 0; }

/* ---- Listings grid ---- */
.listings { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 900px) { .listings { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .listings { grid-template-columns: 1fr; } }
.idx-note { text-align: center; font-size: 0.8rem; color: var(--wd-muted); margin-top: 2rem; letter-spacing: 0.04em; }

/* ---- Collections (lifestyle-sliced search) ---- */
.collections { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
@media (max-width: 900px) { .collections { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .collections { grid-template-columns: 1fr; } }
.collection { position: relative; aspect-ratio: 3/4; overflow: hidden; display: flex; align-items: flex-end; color: #fff; }
.collection img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--wd-ease); }
.collection::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,17,38,0) 40%, rgba(8,17,38,0.75) 100%); }
.collection:hover img { transform: scale(1.06); }
.collection__label { position: relative; z-index: 2; padding: 1.4rem; }
.collection__label h3 { color: #fff; font-size: 1.5rem; }
.collection__label span { font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--wd-gold); }

/* ---- Luxe teaser (dark) ---- */
.luxe { position: relative; color: #fff; overflow: hidden; }
.luxe__bg { position: absolute; inset: 0; }
.luxe__bg img { width: 100%; height: 100%; object-fit: cover; }
.luxe__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,17,38,0.9) 0%, rgba(8,17,38,0.7) 45%, rgba(8,17,38,0.35) 100%); }
.luxe__inner { position: relative; max-width: var(--wd-maxw); margin: 0 auto; padding: clamp(4rem, 8vw, 8rem) var(--wd-gutter); }
.luxe h2 { color: #fff; max-width: 20ch; }
.luxe p { color: rgba(255,255,255,0.85); max-width: 48ch; margin: 1.4rem 0 2rem; }

/* ---- Team ---- */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; max-width: 900px; margin: 0 auto; }
.member { text-align: center; }
.member__photo { aspect-ratio: 1; background: var(--wd-slate-100); display: flex; align-items: center; justify-content: center; margin-bottom: 1.2rem; overflow: hidden; }
.member__photo span { font-family: var(--wd-serif); font-size: 3rem; color: var(--wd-slate-400); }
.member h3 { font-size: 1.5rem; }
.member__role { font-size: 0.76rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wd-gold); margin: 0.4rem 0 0.9rem; }
@media (max-width: 620px) { .team { grid-template-columns: 1fr; } }

/* ---- Testimonials ---- */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
@media (max-width: 820px) { .quotes { grid-template-columns: 1fr; } }
.quote { border-top: 2px solid var(--wd-gold); padding-top: 1.4rem; }
.quote p { font-family: var(--wd-serif); font-size: 1.3rem; line-height: 1.4; color: var(--wd-ink); }
.quote cite { display: block; font-style: normal; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--wd-slate-400); margin-top: 1.1rem; }

/* ---- Newsletter ---- */
.signup { background: #faf7f2; text-align: center; }
.signup form { display: flex; gap: 0.8rem; max-width: 480px; margin: 1.8rem auto 0; }
.signup input { flex: 1; padding: 1rem 1.1rem; border: 1px solid var(--wd-rule); border-radius: 0; font-family: var(--wd-sans); font-size: 0.95rem; }
.signup input:focus { outline: none; border-color: var(--wd-gold); }
@media (max-width: 520px) { .signup form { flex-direction: column; } }

/* ---- Footer ---- */
.footer { background: var(--wd-navy); color: rgba(255,255,255,0.75); }
.footer .wd-wrap { padding-block: clamp(3rem, 5vw, 4.5rem); }
.footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 2rem; }
.footer__brand span { font-family: var(--wd-serif); font-size: 1.6rem; color: #fff; }
.footer__brand p { font-size: 0.85rem; color: rgba(255,255,255,0.6); margin-top: 0.8rem; max-width: 34ch; }
.footer h4 { font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--wd-gold); margin-bottom: 1rem; font-family: var(--wd-sans); font-weight: 600; }
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer ul a { font-size: 0.85rem; color: rgba(255,255,255,0.75); }
.footer ul a:hover { color: var(--wd-gold); }
.footer__legal { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2.5rem; padding-top: 1.5rem; font-size: 0.75rem; color: rgba(255,255,255,0.5); }
@media (max-width: 720px) { .footer__grid { grid-template-columns: 1fr; gap: 2.5rem; } }

.sec-tag { display:inline-block; font-size:0.66rem; letter-spacing:0.14em; text-transform:uppercase; color:var(--wd-slate-400); border:1px dashed var(--wd-rule); padding:0.3rem 0.6rem; }