/* ============================================================
   Wealthy Nomads — Design B · "Coastal Editorial"
   White grounds, warm sand bands, sea-glass green accent.
   Fraunces (display) + Outfit (sans). No shadows, one accent.
   ============================================================ */

:root{
  --white:#FFFFFF;
  --sand:#F3EDE2;
  --sand-deep:#E8DFCE;
  --ink:#22272B;
  --ink-soft:#4C5357;
  --ink-mute:#6E7478;
  --sea:#31605B;
  --sea-deep:#244A46;
  --gold:#CBB58E;
  --hairline:rgba(203,181,142,0.55);
  --hairline-soft:rgba(203,181,142,0.32);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Outfit", system-ui, -apple-system, sans-serif;
  --radius:10px;
  --shell:1240px;
  --pad:clamp(22px, 5vw, 64px);
}

*, *::before, *::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--sans);
  font-weight:300;
  font-size:17px;
  line-height:1.72;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:var(--sea); text-decoration:none; }
a:hover{ color:var(--sea-deep); }
::selection{ background:rgba(49,96,91,0.16); }

a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible{
  outline:2px solid var(--sea);
  outline-offset:3px;
  border-radius:2px;
}

/* ---------- layout ---------- */
.shell{ max-width:var(--shell); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
.shell--narrow{ max-width:880px; }
.shell--prose{ max-width:760px; }

.section{ padding:clamp(84px, 11vw, 152px) 0; }
.section--tight{ padding:clamp(60px, 8vw, 104px) 0; }
.band-sand{ background:var(--sand); }
.band-deep{ background:var(--sand-deep); }

/* ---------- type ---------- */
h1, h2, h3, .display{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:430;
  line-height:1.06;
  letter-spacing:-0.012em;
  color:var(--ink);
  margin:0 0 0.55em;
}
h1{ font-size:clamp(2.55rem, 5.4vw, 4.35rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size:clamp(1.28rem, 2vw, 1.6rem); line-height:1.2; }
h1 em, h2 em, .display em{
  font-style:italic;
  font-weight:400;
  letter-spacing:-0.008em;
}
p{ margin:0 0 1.15em; }
.lede{ font-size:clamp(1.05rem, 1.55vw, 1.22rem); line-height:1.68; color:var(--ink-soft); max-width:34em; }
.muted{ color:var(--ink-mute); }
strong{ font-weight:500; }

/* tracked lowercase label — the editorial eyebrow */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:14px;
  font-family:var(--sans);
  font-weight:400;
  font-size:0.72rem;
  letter-spacing:0.34em;
  text-transform:lowercase;
  color:var(--sea);
  margin:0 0 26px;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::after{ content:""; width:34px; height:1px; background:var(--gold); }
.eyebrow--bare::before{ display:none; }

.caption{
  font-size:0.78rem;
  letter-spacing:0.22em;
  text-transform:lowercase;
  color:var(--ink-mute);
  font-weight:400;
}

hr.rule{
  border:0;
  height:1px;
  background:var(--hairline-soft);
  margin:0;
}

/* ---------- buttons + links ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--sea);
  color:var(--white);
  font-family:var(--sans);
  font-weight:400;
  font-size:0.95rem;
  letter-spacing:0.035em;
  line-height:1;
  padding:17px 32px;
  border-radius:999px;
  border:1px solid var(--sea);
  cursor:pointer;
  transition:background 0.22s ease, border-color 0.22s ease;
}
.btn:hover{ background:var(--sea-deep); border-color:var(--sea-deep); color:var(--white); }
.btn--ghost{ background:transparent; color:var(--sea); }
.btn--ghost:hover{ background:var(--sea); color:var(--white); }
.btn--sm{ padding:12px 22px; font-size:0.85rem; }

.arrow-link{
  display:inline-flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--sans);
  font-weight:400;
  font-size:0.95rem;
  letter-spacing:0.03em;
  color:var(--sea);
  border-bottom:1px solid var(--hairline);
  padding-bottom:3px;
  transition:border-color 0.22s ease, color 0.22s ease;
}
.arrow-link:hover{ color:var(--sea-deep); border-color:var(--sea-deep); }
.arrow-link .arr{ font-family:var(--sans); }

.cta-pair{ display:flex; flex-wrap:wrap; align-items:center; gap:26px; margin-top:38px; }

/* ---------- nav ---------- */
.nav{
  background:var(--white);
  border-bottom:1px solid var(--hairline-soft);
  position:sticky;
  top:0;
  z-index:40;
}
.nav__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
  min-height:78px;
  padding-top:14px;
  padding-bottom:14px;
}
.wordmark{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:480;
  font-size:1.32rem;
  letter-spacing:0.005em;
  color:var(--ink);
  white-space:nowrap;
}
.wordmark em{ font-style:italic; font-weight:420; }
.wordmark:hover{ color:var(--ink); }
.nav__links{
  display:flex;
  align-items:center;
  gap:clamp(18px, 3vw, 38px);
  list-style:none;
  margin:0;
  padding:0;
}
.nav__links a{
  font-size:0.8rem;
  letter-spacing:0.24em;
  text-transform:lowercase;
  color:var(--ink-soft);
  padding-bottom:5px;
  border-bottom:1px solid transparent;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.nav__links a:hover{ color:var(--sea); }
.nav__links a[aria-current="page"]{ color:var(--sea); border-bottom-color:var(--gold); }
.nav .btn{ flex:none; }

@media (max-width:860px){
  .nav__inner{ flex-wrap:wrap; justify-content:space-between; row-gap:10px; padding-top:18px; padding-bottom:16px; }
  .nav__links{ order:3; width:100%; justify-content:flex-start; gap:22px; flex-wrap:wrap; }
  .nav .btn{ order:2; }
}

/* ---------- hero (asymmetric editorial grid) ---------- */
.hero{ padding:clamp(64px, 8vw, 120px) 0 clamp(64px, 8vw, 110px); }
.hero__grid{
  display:grid;
  grid-template-columns:minmax(0, 11fr) minmax(0, 9fr);
  gap:clamp(36px, 6vw, 96px);
  align-items:center;
}
.hero__copy{ padding-top:clamp(0px, 2vw, 34px); }
.hero__copy h1{ max-width:12.5em; }
.hero__photo{ position:relative; }
.hero__photo img{
  width:100%;
  height:auto;
  border-radius:var(--radius);
  aspect-ratio:4 / 5;
  object-fit:cover;
}
.hero__photo figcaption{
  margin-top:14px;
  font-size:0.74rem;
  letter-spacing:0.26em;
  text-transform:lowercase;
  color:var(--gold);
}
@media (max-width:860px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__photo{ order:-1; max-width:520px; }
}

/* ---------- credential strip ---------- */
.creds{
  border-top:1px solid var(--hairline-soft);
  border-bottom:1px solid var(--hairline-soft);
  padding:34px 0;
}
.creds__row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(24px, 4vw, 60px);
}
.cred b{
  display:block;
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:460;
  font-size:1.3rem;
  letter-spacing:-0.01em;
  color:var(--ink);
  margin-bottom:6px;
}
.cred span{
  font-size:0.78rem;
  letter-spacing:0.18em;
  text-transform:lowercase;
  color:var(--ink-mute);
}
@media (max-width:720px){
  .creds__row{ grid-template-columns:1fr; gap:22px; }
}

/* ---------- two lanes ---------- */
.lanes{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(24px, 3vw, 44px);
  margin-top:clamp(40px, 5vw, 64px);
}
.lane{
  background:var(--white);
  border:1px solid var(--hairline-soft);
  border-radius:var(--radius);
  padding:clamp(34px, 4vw, 56px);
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.lane__tag{
  font-size:0.7rem;
  letter-spacing:0.3em;
  text-transform:lowercase;
  color:var(--sea);
  margin-bottom:22px;
  display:inline-block;
  border-bottom:1px solid var(--gold);
  padding-bottom:6px;
}
.lane h3{ margin-bottom:0.5em; }
.lane p{ color:var(--ink-soft); margin-bottom:1.6em; max-width:30em; }
.lane > :last-child{ margin-top:auto; }
@media (max-width:820px){
  .lanes{ grid-template-columns:1fr; }
}

/* ---------- manifesto interstitial ---------- */
.manifesto{ text-align:center; }
.manifesto .display{
  font-size:clamp(1.8rem, 4.4vw, 3.4rem);
  font-weight:380;
  line-height:1.22;
  max-width:20em;
  margin:0 auto;
}
.manifesto .display em{ color:var(--sea); }

/* ---------- duo rows (asymmetric image + text) ---------- */
.duo{
  display:grid;
  grid-template-columns:minmax(0, 9fr) minmax(0, 10fr);
  gap:clamp(36px, 6vw, 100px);
  align-items:center;
}
.duo--flip{ grid-template-columns:minmax(0, 10fr) minmax(0, 9fr); }
.duo__photo img{
  width:100%;
  border-radius:var(--radius);
  aspect-ratio:4 / 5;
  object-fit:cover;
}
.duo__photo--wide img{ aspect-ratio:5 / 4; }
.duo__copy{ max-width:34em; }
.duo__copy .offset{ padding-top:clamp(0px, 3vw, 40px); }
@media (max-width:860px){
  .duo, .duo--flip{ grid-template-columns:1fr; }
  .duo__photo{ max-width:520px; }
  .duo--flip .duo__photo{ order:-1; }
}

/* ---------- proof / oversized numerals ---------- */
.stat-spread{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:clamp(14px, 3vw, 34px);
  font-family:var(--serif);
  font-optical-sizing:auto;
  color:var(--ink);
  line-height:0.95;
  margin:clamp(28px, 4vw, 48px) 0 18px;
}
.stat-spread .num{
  font-size:clamp(4.6rem, 12vw, 10rem);
  font-weight:380;
  letter-spacing:-0.03em;
}
.stat-spread .num sup{
  font-size:0.32em;
  font-weight:400;
  top:-1.35em;
  position:relative;
  vertical-align:baseline;
  margin-left:0.06em;
}
.stat-spread .to{
  font-size:clamp(2rem, 5vw, 4rem);
  font-style:italic;
  font-weight:360;
  color:var(--sea);
}
.stat-caption{
  font-size:0.8rem;
  letter-spacing:0.22em;
  text-transform:lowercase;
  color:var(--ink-mute);
  max-width:30em;
}

.quote-row{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:clamp(26px, 4vw, 56px);
  margin-top:clamp(48px, 6vw, 80px);
}
.mini-quote{
  border-top:1px solid var(--hairline);
  padding-top:26px;
}
.mini-quote blockquote{
  margin:0 0 18px;
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:400;
  font-style:italic;
  font-size:1.12rem;
  line-height:1.5;
  color:var(--ink);
}
.mini-quote cite{
  font-style:normal;
  font-size:0.76rem;
  letter-spacing:0.24em;
  text-transform:lowercase;
  color:var(--ink-mute);
}
@media (max-width:820px){
  .quote-row{ grid-template-columns:1fr; }
}

/* ---------- pull quote (testimonials lead) ---------- */
.pull-quote{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:390;
  font-style:italic;
  font-size:clamp(1.7rem, 3.6vw, 2.9rem);
  line-height:1.28;
  color:var(--ink);
  max-width:21em;
  margin:0 0 26px;
}
.pull-quote .mark{ color:var(--sea); }

/* ---------- newsletter ---------- */
.newsletter{
  border:1px solid var(--hairline);
  border-radius:var(--radius);
  padding:clamp(40px, 6vw, 84px);
  display:grid;
  grid-template-columns:minmax(0, 11fr) minmax(0, 9fr);
  gap:clamp(32px, 5vw, 80px);
  align-items:center;
  background:var(--white);
}
.newsletter p{ color:var(--ink-soft); max-width:30em; }
@media (max-width:820px){
  .newsletter{ grid-template-columns:1fr; }
}

/* ---------- forms (editorial: underline fields) ---------- */
.form{ display:grid; gap:26px; }
.field label{
  display:block;
  font-size:0.72rem;
  letter-spacing:0.28em;
  text-transform:lowercase;
  color:var(--ink-mute);
  margin-bottom:8px;
}
.field input,
.field textarea{
  width:100%;
  background:transparent;
  border:0;
  border-bottom:1px solid var(--hairline);
  border-radius:0;
  padding:10px 2px 12px;
  font-family:var(--sans);
  font-weight:300;
  font-size:1.02rem;
  color:var(--ink);
  transition:border-color 0.2s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:#9AA0A3; }
.field input:focus,
.field textarea:focus{ outline:none; border-bottom-color:var(--sea); }
.field textarea{ resize:vertical; min-height:120px; line-height:1.6; }
.form .btn{ justify-self:start; margin-top:8px; }
.form-note{
  font-size:0.78rem;
  letter-spacing:0.06em;
  color:var(--ink-mute);
  margin-top:-6px;
}

/* ---------- video + embeds ---------- */
.video-frame{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--sand-deep);
}
.video-frame video{ width:100%; height:auto; display:block; }
.embed{
  position:relative;
  aspect-ratio:16 / 9;
  border-radius:var(--radius);
  overflow:hidden;
  background:var(--sand-deep);
}
.embed iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}
.yt-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(30px, 4vw, 56px) clamp(24px, 3.5vw, 48px);
  margin-top:clamp(44px, 6vw, 72px);
}
.yt-item figcaption{ margin-top:16px; }
.yt-item .who{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:460;
  font-size:1.06rem;
  color:var(--ink);
  display:block;
  margin-bottom:4px;
}
.yt-item .what{
  font-size:0.92rem;
  color:var(--ink-soft);
  font-style:italic;
  font-family:var(--serif);
  font-weight:400;
}
.yt-item--full{ grid-column:1 / -1; max-width:820px; margin:0 auto; width:100%; }
@media (max-width:760px){
  .yt-grid{ grid-template-columns:1fr; }
}

/* ---------- CTA band ---------- */
.cta-band{ text-align:center; }
.cta-band h2{ max-width:16em; margin-left:auto; margin-right:auto; }
.cta-band .lede{ margin-left:auto; margin-right:auto; }
.cta-band .cta-pair{ justify-content:center; }

/* ---------- legal prose ---------- */
.prose h2{
  font-size:1.5rem;
  margin-top:2.2em;
}
.prose p{ color:var(--ink-soft); }
.prose ul{ color:var(--ink-soft); padding-left:1.2em; }
.prose li{ margin-bottom:0.5em; }
.page-head{ padding:clamp(64px, 8vw, 110px) 0 clamp(36px, 5vw, 64px); }
.page-head .eyebrow{ margin-bottom:20px; }

/* ---------- footer ---------- */
.footer{
  background:var(--sand-deep);
  border-top:1px solid var(--hairline);
  padding:clamp(56px, 7vw, 92px) 0 44px;
  font-size:0.92rem;
}
.footer__grid{
  display:grid;
  grid-template-columns:minmax(0, 8fr) minmax(0, 6fr) minmax(0, 6fr);
  gap:clamp(32px, 5vw, 72px);
  margin-bottom:clamp(40px, 5vw, 64px);
}
.footer .wordmark{ display:inline-block; margin-bottom:14px; }
.footer p{ color:var(--ink-soft); max-width:26em; }
.footer h4{
  font-family:var(--sans);
  font-weight:400;
  font-size:0.7rem;
  letter-spacing:0.3em;
  text-transform:lowercase;
  color:var(--ink-mute);
  margin:0 0 18px;
}
.footer ul{ list-style:none; margin:0; padding:0; }
.footer li{ margin-bottom:10px; }
.footer a{ color:var(--ink-soft); }
.footer a:hover{ color:var(--sea); }
.footer__legal{
  border-top:1px solid var(--hairline-soft);
  padding-top:28px;
  display:grid;
  gap:18px;
}
.footer__legal small{
  display:block;
  font-size:0.72rem;
  line-height:1.7;
  color:var(--ink-mute);
  max-width:75em;
}
.footer__row{
  display:flex;
  flex-wrap:wrap;
  gap:10px 28px;
  align-items:center;
  font-size:0.78rem;
  letter-spacing:0.16em;
  text-transform:lowercase;
  color:var(--ink-mute);
}
.footer__row a{ color:var(--ink-soft); }
@media (max-width:820px){
  .footer__grid{ grid-template-columns:1fr; gap:36px; }
}

/* ---------- scroll reveal (JS-gated, motion-safe) ---------- */
@media (prefers-reduced-motion: no-preference){
  .js [data-reveal]{
    opacity:0;
    transform:translateY(22px);
    transition:opacity 0.7s ease, transform 0.7s ease;
  }
  .js [data-reveal].is-in{
    opacity:1;
    transform:none;
  }
}