/* ============================================================
   PAGES.CSS — section-specific styles for inner pages
   ============================================================ */

/* ============================================================
   PROMISE STRIP (home)
   ============================================================ */
.promise {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 48px; padding-top: 32px;
}
@media (max-width: 880px) { .promise { grid-template-columns: 1fr; gap: 36px; } }
.promise__item { border-top: 1px solid var(--gold-line); padding-top: 28px; }
.promise__item .mono { color: var(--gold); display: block; margin-bottom: 14px; }
.promise__item h3 { margin-bottom: 12px; }

/* ============================================================
   FEATURED SPREAD (home — split editorial)
   ============================================================ */
.spread {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
@media (max-width: 960px) { .spread { grid-template-columns: 1fr; } }
.spread--reverse { direction: rtl; }
.spread--reverse > * { direction: ltr; }
.spread__img { aspect-ratio: 4/5; background-size: cover; background-position: center; }
.spread__img--wide { aspect-ratio: 5/4; }
.spread__body h2 { margin-bottom: 24px; }
.spread__quote {
  border-left: 2px solid var(--gold); padding: 8px 0 8px 24px;
  font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.4;
  margin: 32px 0; color: var(--navy); font-variation-settings: 'SOFT' 100;
}
.section--navy .spread__quote { color: var(--ivory); border-color: var(--gold); }

/* ============================================================
   TICKER (recent sales scroll)
   ============================================================ */
.ticker {
  background: var(--navy-deep); color: var(--ivory);
  padding: 24px 0; border-top: 1px solid rgba(181,138,63,0.2);
  border-bottom: 1px solid rgba(181,138,63,0.2);
  overflow: hidden; white-space: nowrap;
}
.ticker__track {
  display: inline-flex; gap: 60px; padding-left: 0;
  animation: tickerScroll 70s linear infinite;
}
.ticker__item {
  display: inline-flex; gap: 16px; align-items: center;
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase;
}
.ticker__item .diamond { width: 6px; height: 6px; background: var(--gold); transform: rotate(45deg); }
.ticker__item .price { color: var(--gold); }
@keyframes tickerScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ============================================================
   SERVICE GRID
   ============================================================ */
.svc-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--gold-line); }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; } }
.svc-cell { background: var(--ivory); padding: clamp(28px, 4vw, 56px); }
.section--navy .svc-cell { background: var(--navy); }
.svc-cell .mono { color: var(--gold); display: block; margin-bottom: 16px; }
.svc-cell h3 { margin-bottom: 14px; font-size: clamp(20px, 2vw, 28px); }
.svc-cell p { font-size: 15.5px; color: var(--muted); }
.section--navy .svc-cell p { color: var(--chrome); }

/* ============================================================
   PROCESS LADDER
   ============================================================ */
.ladder { display: grid; gap: 0; }
.ladder__row {
  display: grid; grid-template-columns: 110px 1fr 2fr;
  gap: 32px; padding: 36px 0; border-bottom: 1px solid var(--ivory-line);
  align-items: start;
}
.section--navy .ladder__row { border-bottom-color: rgba(181,138,63,0.18); }
.ladder__num {
  font-family: var(--serif); font-size: 44px; color: var(--gold);
  line-height: 1; font-variation-settings: 'SOFT' 100;
}
.ladder__row h3 { font-size: 22px; margin-bottom: 6px; }
.ladder__row .mono { color: var(--gold); display: block; margin-bottom: 8px; }
.ladder__row p { color: var(--muted); font-size: 15.5px; max-width: 60ch; }
.section--navy .ladder__row p { color: var(--chrome); }
@media (max-width: 760px) {
  .ladder__row { grid-template-columns: 60px 1fr; }
  .ladder__row > div:nth-child(3) { grid-column: 1 / -1; padding-left: 60px; }
  .ladder__num { font-size: 34px; }
}

/* ============================================================
   LISTING DETAIL
   ============================================================ */
.detail-hero {
  position: relative; min-height: 80vh;
  background-size: cover; background-position: center;
  display: flex; align-items: flex-end; color: var(--ivory);
}
.detail-hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(7,15,27,0.9), rgba(7,15,27,0.1) 60%); }
.detail-hero__inner { position: relative; z-index: 2; padding: 0 var(--pad) clamp(48px, 7vw, 96px); max-width: var(--maxw); margin: 0 auto; width: 100%; }
.detail-hero__tag { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; margin-bottom: 16px; display: inline-block; }
.detail-hero h1 { font-size: clamp(40px, 6vw, 88px); margin-bottom: 18px; }
.detail-hero__meta { display: flex; gap: 32px; flex-wrap: wrap; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--chrome); }
.detail-hero__meta strong { color: var(--gold-soft); font-weight: 500; }

.spec-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--gold-line); margin: 0 0 clamp(40px, 6vw, 72px);
}
@media (max-width: 760px) { .spec-grid { grid-template-columns: repeat(2, 1fr); } }
.spec-cell { background: var(--ivory); padding: 26px 22px; }
.spec-cell .mono { color: var(--muted); display: block; margin-bottom: 8px; font-size: 10px; }
.spec-cell strong { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--navy); }

.gallery {
  display: grid; grid-template-columns: 2fr 1fr 1fr;
  grid-template-rows: 1fr 1fr; gap: 8px;
  aspect-ratio: 16/9; margin-bottom: clamp(40px, 5vw, 72px);
}
.gallery__cell { background-size: cover; background-position: center; background-color: var(--navy-deep); }
.gallery__cell:first-child { grid-row: 1 / -1; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; aspect-ratio: 1; }
  .gallery__cell:first-child { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16/9; }
}

.broker-card {
  background: var(--navy); color: var(--ivory);
  padding: clamp(32px, 4vw, 56px); display: grid;
  grid-template-columns: 100px 1fr auto; gap: 28px;
  align-items: center; border-left: 3px solid var(--gold);
}
.broker-card__pic { width: 100px; height: 100px; background: var(--gold); color: var(--navy); display: grid; place-items: center; font-family: var(--serif); font-size: 38px; }
.broker-card h3 { margin-bottom: 4px; }
.broker-card .mono { color: var(--gold); display: block; margin-bottom: 4px; }
.broker-card p { color: var(--chrome); margin: 0; font-size: 14px; }
@media (max-width: 680px) {
  .broker-card { grid-template-columns: 1fr; text-align: left; }
  .broker-card .cta-primary { justify-self: start; }
}

/* ============================================================
   ABOUT / STORY PAGE
   ============================================================ */
.timeline { position: relative; padding-left: 48px; }
.timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--gold-line); }
.timeline__row { position: relative; padding: 0 0 56px; }
.timeline__row::before { content: ''; position: absolute; left: -44px; top: 8px; width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); }
.timeline__year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--gold); text-transform: uppercase; display: block; margin-bottom: 10px; }
.timeline__row h3 { margin-bottom: 10px; font-size: 26px; }
.timeline__row p { color: var(--muted); max-width: 56ch; }
.section--navy .timeline__row p { color: var(--chrome); }
.section--navy .timeline::before { background: rgba(181, 138, 63, 0.3); }

.founder-bio {
  display: grid; grid-template-columns: 1fr 1.4fr;
  gap: clamp(40px, 6vw, 96px); align-items: start;
}
@media (max-width: 880px) { .founder-bio { grid-template-columns: 1fr; } }
.founder-bio__portrait { aspect-ratio: 4/5; background-size: cover; background-position: center; }
.founder-bio blockquote {
  font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.35; font-style: italic; color: var(--gold);
  border-left: 2px solid var(--gold); padding: 6px 0 6px 22px;
  margin: 0 0 32px;
  font-variation-settings: 'SOFT' 100;
}
.founder-bio p { font-size: 16.5px; color: var(--ink); }
.section--navy .founder-bio p { color: var(--ivory); }

/* ============================================================
   FORM
   ============================================================ */
.form-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px 24px;
}
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 680px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid label { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); display: block; margin-bottom: 8px; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%; padding: 14px 0; font: inherit;
  background: transparent; border: none;
  border-bottom: 1px solid var(--ivory-line);
  color: var(--ink); transition: border-color .25s ease;
}
.section--navy .form-grid input, .section--navy .form-grid select, .section--navy .form-grid textarea { color: var(--ivory); border-bottom-color: rgba(245,240,230,0.25); }
.form-grid input:focus, .form-grid select:focus, .form-grid textarea:focus { outline: none; border-bottom-color: var(--gold); }
.form-grid textarea { min-height: 120px; resize: vertical; padding-top: 14px; }

/* ============================================================
   CONTACT CARDS
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-bottom: clamp(48px, 6vw, 80px); }
@media (max-width: 880px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--ivory-soft); padding: clamp(28px, 3vw, 40px); border-top: 2px solid var(--gold); }
.section--navy .contact-card { background: var(--navy-mid); }
.contact-card .mono { color: var(--gold); display: block; margin-bottom: 16px; }
.contact-card h3 { font-size: 24px; margin-bottom: 14px; }
.contact-card a { display: block; font-family: var(--serif); font-size: 20px; margin-bottom: 8px; color: var(--navy); font-variation-settings: 'SOFT' 60; }
.section--navy .contact-card a { color: var(--ivory); }
.contact-card a:hover { color: var(--gold); }
.contact-card p { color: var(--muted); font-size: 14.5px; margin-top: 12px; }
.section--navy .contact-card p { color: var(--chrome); }

/* ============================================================
   PAGE-HEADER (inner pages)
   ============================================================ */
.page-header {
  padding-top: clamp(140px, 18vh, 200px);
  padding-bottom: clamp(56px, 7vw, 96px);
  border-bottom: 1px solid rgba(181, 138, 63, 0.18);
}
.page-header h1 { max-width: 16ch; margin-top: 20px; }
.page-header .lede { margin-top: 24px; max-width: 60ch; }

/* ============================================================
   TESTIMONIAL CARDS
   ============================================================ */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; }
@media (max-width: 880px) { .testi-grid { grid-template-columns: 1fr; } }
.testi {
  background: var(--ivory-soft); padding: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--gold);
  display: flex; flex-direction: column; gap: 22px;
}
.section--navy .testi { background: var(--navy-mid); }
.testi__deal { font-family: var(--mono); font-size: 11px; letter-spacing: 0.2em; color: var(--gold); text-transform: uppercase; display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.testi__route { color: var(--muted); }
.section--navy .testi__route { color: var(--chrome); }
.testi__quote { font-family: var(--serif); font-size: 19px; line-height: 1.5; color: var(--navy); font-variation-settings: 'SOFT' 60; }
.section--navy .testi__quote { color: var(--ivory); }
.testi__attr { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; color: var(--muted); text-transform: uppercase; margin-top: auto; }
.section--navy .testi__attr { color: var(--chrome); }

/* ============================================================
   COMPLIANCE / DISCLOSURE
   ============================================================ */
.disclosure {
  background: var(--ivory-soft); padding: 24px var(--pad);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em;
  color: var(--muted); text-align: center; text-transform: uppercase;
  border-top: 1px solid var(--ivory-line);
}

/* ============================================================
   PREMIUM ADDENDUM (v2) — real-asset components
   ============================================================ */

/* Sticky founder portrait (story page) */
.founder-bio__portrait { position: relative; }
@media (min-width: 881px) { .founder-bio__sticky { position: sticky; top: 120px; } }
.founder-bio__portrait::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(181,138,63,0.4); pointer-events: none; }
.founder-bio__cap { font-family: var(--mono); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); margin-top: 14px; }
.section--navy .founder-bio__cap { color: var(--chrome); }

/* Family roster cards */
.family-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1px; background: var(--gold-line); }
@media (max-width: 820px){ .family-grid { grid-template-columns: 1fr; } }
.family-cell { background: var(--ivory); padding: clamp(28px,3.5vw,44px); }
.section--navy .family-cell { background: var(--navy); }
.family-cell .role { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); display:block; margin-bottom: 14px; }
.family-cell h3 { font-size: 27px; margin-bottom: 10px; }
.family-cell p { font-size: 15px; color: var(--muted); margin: 0; }
.section--navy .family-cell p { color: var(--chrome); }

/* Brand lockup block (real logo on cream) */
.brand-lockup { display:inline-grid; place-items:center; background: var(--ivory); border-radius: 8px; padding: 30px 40px; box-shadow: 0 20px 50px rgba(7,15,27,0.4); }
.brand-lockup img { height: 84px; width: auto; }

/* Realty + insurance feature band */
.dual-band { display:grid; grid-template-columns: 1fr 1fr; gap:1px; background: var(--gold-line); }
@media (max-width: 760px){ .dual-band { grid-template-columns: 1fr; } }
.dual-cell { background: var(--navy); padding: clamp(32px,4vw,60px); }
.dual-cell .mono { color: var(--gold); display:block; margin-bottom: 16px; }
.dual-cell h3 { margin-bottom: 14px; }
.dual-cell p { color: var(--chrome); }

/* Real-photo editorial figure w/ caption */
.figure { position: relative; overflow: hidden; }
.figure img { width:100%; height:100%; object-fit: cover; display:block; }
.figure__cap { position:absolute; left:0; bottom:0; right:0; padding: 28px 24px 18px; background: linear-gradient(transparent, rgba(7,15,27,0.85)); color: var(--ivory); font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; }
.figure__cap b { color: var(--gold-soft); font-weight: 500; }

/* Pull-quote (big editorial) */
.pullquote { text-align:center; max-width: 22ch; margin: 0 auto; font-family: var(--serif); font-size: clamp(28px,4vw,56px); line-height: 1.2; font-variation-settings:'SOFT' 100; }
.pullquote .headline-accent { display:inline; }
.pullquote__attr { font-family: var(--mono); font-size: 11px; letter-spacing:.2em; text-transform: uppercase; color: var(--gold); margin-top: 28px; display:block; }

/* Spec-cell readability fix on navy */
.spec-cell strong { line-height: 1.1; display:block; }

/* Marquee real-fleet strip already = .ticker */
.ticker__item .yacht { color: var(--ivory); }

/* CTA band big */
.cta-band { text-align:center; }
.cta-band h2 { margin: 22px auto 26px; max-width: 22ch; }
.cta-band .lede { margin: 0 auto 34px; max-width: 52ch; }
.cta-band__row { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }

/* Improve list bullets contrast */
.spec-list { list-style:none; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:12px 36px; }
@media (max-width:600px){ .spec-list { grid-template-columns:1fr; } }
.spec-list li { padding-left:22px; position:relative; font-size:15.5px; }
.spec-list li::before { content:'◆'; position:absolute; left:0; color:var(--gold); font-size:10px; top:4px; }

/* Listing-detail two-column split — collapses on mobile (Newport fix) */
.detail-split { display:grid; grid-template-columns:2fr 1fr; gap:64px; align-items:start; }
@media (max-width: 820px){
  .detail-split { grid-template-columns:1fr; gap:40px; }
  .detail-split aside { max-width:100%; }
  .detail-split .broker-card { width:100%; }
}
