/* ============================================================
   PLANNER VISION — production stylesheet
   Tokens + base + classic homepage layout
   Mobile-first: base = mobile, min-width: 560px = type scale,
   min-width: 880px = desktop layout
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=DM+Mono:wght@300;400;500&family=Plus+Jakarta+Sans:wght@300;400;500;600&display=swap");

:root {
  /* Color — Paper / Ink */
  --pv-warm-white:    #FAF8F4;
  --pv-off-white:     #F2EFE9;
  --pv-greige:        #E8E3DA;
  --pv-stone:         #C8C2B8;
  --pv-graphite-soft: #6B6660;
  --pv-graphite:      #3D3A37;
  --pv-ink:           #1C1A18;

  /* Color — Accent */
  --pv-accent:        #4A6741;
  --pv-accent-light:  #D4DDD2;
  --pv-accent-pale:   #EFF3EE;

  /* Color — Dark surface */
  --pv-dark-divider:  #2E2C2A;
  --pv-dark-mute:     #999999;
  --pv-dark-faint:    #555555;
  --pv-footer-bg:     #111111;

  /* Type */
  --pv-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --pv-sans:  "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pv-mono:  "DM Mono", "JetBrains Mono", "Courier New", monospace;
  --pv-w-light: 300;
  --pv-w-regular: 400;
  --pv-w-medium: 500;
}

/* ---------- Reset ---------- */
* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pv-warm-white);
  color: var(--pv-ink);
  font-family: var(--pv-sans);
  font-weight: var(--pv-w-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Hidden checkbox that drives the mobile menu */
.pv-nav-toggle { position: absolute; opacity: 0; pointer-events: none; }

a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
strong { font-weight: var(--pv-w-medium); color: var(--pv-ink); }
em { font-style: italic; color: var(--pv-graphite); }
img { max-width: 100%; display: block; }
h1, h2, h3, h4 { margin: 0; font-family: var(--pv-serif); font-weight: var(--pv-w-light); color: var(--pv-ink); }
p { margin: 0; }

/* ---------- Navbar ---------- */
.pv-nav {
  height: 72px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  padding: 0 1.5rem;
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 0.5px solid var(--pv-greige);
  position: sticky;
  top: 0;
  z-index: 30;
}
.pv-nav-brand { display: flex; align-items: baseline; gap: 0.9rem; }
.pv-nav-logo {
  font-family: var(--pv-serif);
  font-size: 1.32rem;
  font-weight: var(--pv-w-light);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pv-ink);
}
.pv-nav-tagline {
  display: none;
  font-family: var(--pv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-stone);
}
.pv-nav-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  justify-content: center;
  gap: 2.4rem;
}
.pv-nav-links a {
  font-family: var(--pv-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-graphite-soft);
  transition: color 0.2s ease;
}
.pv-nav-links a:hover { color: var(--pv-ink); }

.pv-nav-right { display: flex; align-items: center; gap: 1.4rem; }
.pv-nav-lang {
  font-family: var(--pv-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-graphite-soft);
  border: none;
  background: transparent;
  padding: 0.4rem 0.4rem;
  transition: color 0.2s ease;
}
.pv-nav-lang:hover { color: var(--pv-accent); }

.pv-nav-burger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 28px;
  height: 28px;
  cursor: pointer;
  margin-right: 0.8rem;
}
.pv-nav-burger span { display: block; width: 22px; height: 1.5px; background: var(--pv-ink); }

.pv-nav-mobile {
  display: none;
  position: absolute;
  top: 72px;
  left: 0;
  right: 0;
  background: var(--pv-warm-white);
  border-bottom: 0.5px solid var(--pv-greige);
  padding: 1.5rem 1.5rem 2rem;
  flex-direction: column;
  gap: 1.2rem;
}
.pv-nav-toggle:checked ~ .pv-nav-mobile { display: flex; }
.pv-nav-mobile a {
  font-family: var(--pv-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-graphite-soft);
}

/* ---------- Hero ---------- */
.v1-hero {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 0;
}
.v1-hero-left {
  padding: 5rem 1.5rem 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: none;
  border-bottom: 0.5px solid var(--pv-greige);
  background: var(--pv-warm-white);
}
.v1-hero-right {
  padding: 4rem 1.5rem 5rem;
  background: var(--pv-off-white);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}
.v1-eyebrow {
  font-family: var(--pv-mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pv-accent);
  margin-bottom: 2.4rem;
}
.v1-title {
  font-family: var(--pv-serif);
  font-size: clamp(2.4rem, 8vw, 3.2rem);
  font-weight: 300;
  line-height: 1.06;
  letter-spacing: -0.01em;
  color: var(--pv-ink);
  margin: 0 0 2.2rem;
  max-width: 16ch;
}
.v1-title em { font-style: italic; color: var(--pv-graphite); }
.v1-sub {
  font-family: var(--pv-sans);
  font-weight: 300;
  font-size: 1.02rem;
  line-height: 1.7;
  color: var(--pv-graphite-soft);
  max-width: 32ch;
  margin-bottom: 3rem;
}
.v1-by { display: flex; align-items: center; gap: 1rem; margin-top: auto; }
.v1-by-line { width: 2.5rem; height: 0.5px; background: var(--pv-stone); }
.v1-by-text {
  font-family: var(--pv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pv-graphite-soft);
}

.v1-pillars { display: flex; flex-direction: column; }
.v1-pillar { padding: 1.6rem 0; }
.v1-pillar + .v1-pillar { border-top: 0.5px solid var(--pv-greige); }
.v1-pillar-num {
  font-family: var(--pv-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--pv-stone);
  margin-bottom: 0.7rem;
}
.v1-pillar h3 {
  font-family: var(--pv-serif);
  font-weight: 400;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--pv-ink);
  margin-bottom: 0.5rem;
}
.v1-pillar p {
  font-family: var(--pv-sans);
  font-weight: 300;
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--pv-graphite-soft);
  max-width: 38ch;
}
.v1-quote {
  font-family: var(--pv-serif);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--pv-graphite);
  padding-left: 1.5rem;
  border-left: 0.5px solid var(--pv-stone);
}

/* ---------- Section scaffolding ---------- */
.v1-section {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  padding: 5rem 1.5rem;
  align-items: start;
}
.v1-section-dark { background: var(--pv-ink); color: var(--pv-dark-mute); }
.v1-section-alt { background: var(--pv-off-white); }
.v1-sec-label {
  position: static;
  font-family: var(--pv-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pv-stone);
  font-weight: 400;
}
.v1-section-dark .v1-sec-label { color: var(--pv-dark-faint); }

/* ---------- Positioning ---------- */
.v1-pos-statement {
  font-family: var(--pv-serif);
  font-weight: 300;
  font-size: 1.5rem;
  line-height: 1.32;
  color: #f5f1ea;
  max-width: 36ch;
  margin-bottom: 4rem;
}
.v1-pos-statement strong { font-weight: 400; color: #fff; }
.v1-pos-divider { height: 0.5px; background: var(--pv-dark-divider); width: 100%; margin: 2rem 0 3rem; }
.v1-pos-row { display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.v1-pos-row .item-label {
  font-family: var(--pv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-accent-light);
  margin-bottom: 1rem;
}
.v1-pos-row p {
  font-family: var(--pv-sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--pv-dark-mute);
  max-width: 40ch;
}

/* ---------- Services ---------- */
.v1-services-list { display: flex; flex-direction: column; }
.v1-service { display: grid; grid-template-columns: 60px 1fr; gap: 1rem; padding: 2rem 0; }
.v1-service + .v1-service { border-top: 0.5px solid var(--pv-greige); }
.v1-service-num {
  font-family: var(--pv-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--pv-stone);
  padding-top: 0.4rem;
}
.v1-service h3 {
  font-family: var(--pv-serif);
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.25;
  color: var(--pv-ink);
  margin-bottom: 0.8rem;
  max-width: 28ch;
}
.v1-service p {
  font-family: var(--pv-sans);
  font-weight: 300;
  font-size: 0.95rem;
  line-height: 1.72;
  color: var(--pv-graphite-soft);
  max-width: 56ch;
  margin-bottom: 1.4rem;
}
.v1-service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pv-tag-chip {
  display: inline-block;
  font-family: var(--pv-mono);
  font-size: 0.56rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pv-accent);
  background: var(--pv-accent-pale);
  border: 0.5px solid var(--pv-accent-light);
  padding: 0.32rem 0.7rem;
}

/* ---------- Method ---------- */
.v1-method-steps { display: flex; flex-direction: column; }
.v1-step { display: grid; grid-template-columns: 60px 1fr; gap: 1rem; padding: 1.8rem 0; position: relative; }
.v1-step + .v1-step { border-top: 0.5px solid var(--pv-greige); }
.v1-step-dot {
  width: 30px;
  height: 30px;
  border: 0.5px solid var(--pv-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--pv-mono);
  font-size: 0.7rem;
  color: var(--pv-accent);
  margin-top: 0.3rem;
}
.v1-step h4 {
  font-family: var(--pv-serif);
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--pv-ink);
  margin-bottom: 0.6rem;
}
.v1-step p {
  font-family: var(--pv-sans);
  font-weight: 300;
  font-size: 0.92rem;
  line-height: 1.7;
  color: var(--pv-graphite-soft);
  max-width: 56ch;
}

/* ---------- About ---------- */
.v1-about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3rem;
  padding: 5rem 1.5rem;
  background: var(--pv-greige);
}
.v1-about h2 {
  font-family: var(--pv-serif);
  font-weight: 300;
  font-size: 2rem;
  line-height: 1.15;
  color: var(--pv-ink);
  margin-bottom: 2.5rem;
}
.v1-about h2 em { font-style: italic; color: var(--pv-graphite); }
.v1-about p {
  font-family: var(--pv-sans);
  font-weight: 300;
  font-size: 1rem;
  line-height: 1.8;
  color: var(--pv-graphite);
  max-width: 46ch;
  margin-bottom: 1.4rem;
}
.v1-about-stats { display: flex; flex-direction: column; }
.v1-about-stat { padding: 2.4rem 0; }
.v1-about-stat + .v1-about-stat { border-top: 0.5px solid var(--pv-stone); }
.v1-stat-num {
  font-family: var(--pv-serif);
  font-weight: 300;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--pv-ink);
  margin-bottom: 0.8rem;
}
.v1-stat-desc {
  font-family: var(--pv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--pv-graphite-soft);
}

/* ---------- Contact ---------- */
.v1-contact {
  padding: 5rem 1.5rem;
  background: var(--pv-warm-white);
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.5rem;
  align-items: start;
}
.v1-contact-eyebrow {
  font-family: var(--pv-mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pv-stone);
  margin-bottom: 1.6rem;
}
.v1-contact h2 {
  font-family: var(--pv-serif);
  font-weight: 300;
  font-size: 2.1rem;
  line-height: 1.22;
  color: var(--pv-ink);
  margin: 0;
  max-width: 22ch;
  letter-spacing: -0.005em;
}
.v1-contact h2 em { font-style: italic; color: var(--pv-graphite); }
.v1-contact-rows { display: flex; flex-direction: column; gap: 2rem; padding-top: 0.4rem; }
.v1-contact-row { display: grid; grid-template-columns: 28px 1fr; gap: 1rem; align-items: baseline; }
.v1-contact-num {
  font-family: var(--pv-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--pv-accent);
}
.v1-contact-label {
  display: none;
  font-family: var(--pv-mono);
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--pv-stone);
}
.v1-contact-val {
  font-family: var(--pv-sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--pv-graphite);
}
.v1-contact-val a {
  font-family: var(--pv-serif);
  font-size: 1.15rem;
  color: var(--pv-ink);
}

/* ---------- Footer ---------- */
.pv-footer {
  background: var(--pv-footer-bg);
  color: var(--pv-dark-mute);
  padding: 2.5rem 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: 1rem;
  text-align: center;
}
.pv-footer .f-brand {
  font-family: var(--pv-serif);
  font-size: 1.1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.pv-footer .f-copy {
  text-align: center;
  font-family: var(--pv-mono);
  font-size: 0.55rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pv-dark-faint);
}
.pv-footer .f-links {
  justify-self: center;
  display: flex;
  gap: 1.5rem;
  font-family: var(--pv-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.pv-footer .f-links a { color: var(--pv-dark-mute); transition: color 0.2s ease; }
.pv-footer .f-links a:hover { color: #fff; }

/* ---------- Type scale — 560px+ ---------- */
@media (min-width: 560px) {
  .v1-title { font-size: clamp(3rem, 4.6vw, 4.6rem); }
  .v1-pos-statement { font-size: clamp(1.7rem, 2.4vw, 2.4rem); }
  .v1-service h3 { font-size: 1.7rem; }
  .v1-step h4 { font-size: 1.35rem; }
  .v1-about h2 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
}

/* ---------- Desktop layout — 880px+ ---------- */
@media (min-width: 880px) {
  .pv-nav { padding: 0 3rem; }
  .pv-nav-links { display: flex; }
  .pv-nav-burger { display: none; }
  .pv-nav-tagline { display: inline; }
  .pv-nav-lang { padding: 0.4rem 0.6rem; }

  .v1-hero { grid-template-columns: 1fr 1fr; min-height: 720px; }
  .v1-hero-left { padding: 7rem 4.5rem 5rem; border-right: 0.5px solid var(--pv-greige); border-bottom: none; }
  .v1-hero-right { padding: 7rem 4.5rem 5rem; gap: 3rem; }

  .v1-section { grid-template-columns: 220px 1fr; gap: 2rem; padding: 7rem 4.5rem; }
  .v1-sec-label { position: sticky; top: 6rem; }
  .v1-pos-row { grid-template-columns: 1fr 1fr; gap: 4rem; }
  .v1-service { grid-template-columns: 80px 1fr; gap: 2rem; padding: 3rem 0; }
  .v1-step { grid-template-columns: 80px 1fr; gap: 2rem; padding: 2.4rem 0; }
  .v1-about { grid-template-columns: 1fr 1fr; gap: 5rem; padding: 7rem 4.5rem; }

  .v1-contact { grid-template-columns: 1fr 1.4fr; gap: 5rem; padding: 7rem 4.5rem; }
  .v1-contact h2 { max-width: 14ch; }
  .v1-contact-row { grid-template-columns: 40px 110px 1fr; gap: 1.6rem; }
  .v1-contact-label { display: block; }

  .pv-footer { grid-template-columns: 1fr auto 1fr; padding: 3rem; text-align: left; gap: 2rem; }
  .pv-footer .f-links { justify-self: end; }
}