/* ===============================================================
   VPAG — Stylesheet
   Brand guidelines reference: ../Brand Assets/brand-guidelines.html
   =============================================================== */

:root {
  --bg:          #0b0d10;
  --bg-alt:      #111418;
  --surface:     #14181d;
  --text:        #e8e6e1;
  --muted:       #8a8780;
  --accent:      #b8975a;
  --rule:        #1d2127;
  --placeholder: #5a4a2a;

  --container-max: 1100px;
  --section-pad-y: clamp(4rem, 8vw, 8rem);
  --reading-col:   620px;
  --lead-col:      540px;

  --transition: 0.35s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { background: var(--bg); color: var(--text); }
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* ── Accessibility primitives ── */
.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  background: var(--accent);
  color: var(--bg);
  padding: 0.75rem 1.25rem;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-decoration: none;
  z-index: 100;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 1px solid var(--accent);
  outline-offset: 4px;
}
a:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--accent); color: var(--bg); }

/* ── Layout container ── */
.container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 3vw, 2.5rem);
}

/* ── Nav ── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.5rem, 3vw, 3rem);
  gap: 1.5rem;
  background: rgba(11, 13, 16, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
  z-index: 100;
}
.nav-mark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  letter-spacing: 0.05em;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition);
}
.nav-mark:hover { color: var(--accent); }

.nav-links {
  display: flex;
  gap: 2.5rem;
  font-size: 0.72rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-links a {
  color: var(--muted);
  text-decoration: none;
  transition: color var(--transition);
  position: relative;
  padding-bottom: 2px;
}
.nav-links a:hover { color: var(--text); }
.nav-links a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition);
}
.nav-links a:hover::after { transform: scaleX(1); }

/* ── Hamburger toggle (hidden on desktop) ── */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 0;
  width: 44px;
  height: 44px;
  cursor: pointer;
  position: relative;
  z-index: 201;       /* stays above the overlay (200) so the X is tappable */
}
.nav-toggle-bar {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--text);
  margin: 6px auto;
  transition: transform var(--transition), opacity var(--transition), background var(--transition);
}
.nav-toggle:hover .nav-toggle-bar { background: var(--accent); }

/* ── Shared type atoms ── */
.eyebrow {
  color: var(--accent);
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 0.72rem;
  font-weight: 400;
}
.h1 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.85rem, 5vw + 1rem, 4rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  max-width: 820px;
}
.h2 {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 2vw + 1rem, 2.5rem);
  line-height: 1.1;
  letter-spacing: 0.005em;
  max-width: 720px;
}
.hairline {
  width: 50px;
  height: 1px;
  background: var(--accent);
}
.body {
  color: var(--muted);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.75;
  max-width: var(--reading-col);
}
.body p + p { margin-top: 1.25rem; }

.lead {
  color: var(--muted);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.65;
  max-width: var(--lead-col);
}

/* ── Hero ── */
.hero {
  min-height: 100vh;       /* fallback */
  min-height: 100svh;      /* respects iOS Safari address bar */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(6rem, 12vw, 8rem) clamp(1.5rem, 4vw, 2rem) clamp(3rem, 6vw, 4rem);
  position: relative;
  background:
    radial-gradient(ellipse 90% 70% at 50% 45%, rgba(184, 151, 90, 0.07) 0%, transparent 60%),
    radial-gradient(ellipse at center, var(--surface) 0%, var(--bg) 72%);
}
.hero .eyebrow { margin-bottom: 2rem; }
.hero .h1 { margin: 0 auto; }
.hero .hairline { margin: 2.25rem 0; }
.hero .lead { margin: 0 auto; }

.footnote {
  position: absolute;
  bottom: 2rem;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.65rem;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* ── Generic section ── */
.section {
  padding: var(--section-pad-y) 0;
  border-top: 1px solid var(--rule);
}
.section .eyebrow { display: block; margin-bottom: 1.5rem; }
.section .h2 { margin-bottom: 1.75rem; }
.section .hairline { margin-bottom: 2.5rem; }

/* ── Three-column grid (Services + Approach) ── */
.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}
.col {
  padding: 2.5rem 2rem;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  transition: border-color var(--transition), transform var(--transition);
}
.col:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.col-num {
  font-family: 'Cormorant Garamond', serif;
  color: var(--accent);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.05em;
  margin-bottom: 1rem;
}
.col-title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 1rem;
  color: var(--text);
}
.col-desc {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 300;
}

/* ── Founders ── */
.founders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  margin-top: 2rem;
}
.founder {
  padding: 3rem 2.5rem;
  background: var(--bg-alt);
  border: 1px solid var(--rule);
  transition: border-color var(--transition);
}
.founder:hover { border-color: var(--accent); }
.founder-role {
  color: var(--accent);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-size: 0.7rem;
  margin-bottom: 1rem;
}
.founder-name {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.9rem;
  line-height: 1.2;
  margin-bottom: 0.4rem;
  color: var(--text);
}
.founder-bio {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
  font-weight: 300;
  margin-top: 1.5rem;
}
.founder-combined { font-size: 0.95rem; }

/* Placeholder treatment — visibly unfinished so it can't ship by mistake */
.ph {
  color: var(--placeholder);
  font-style: italic;
  border-bottom: 1px dashed var(--placeholder);
}
.ph-block {
  display: block;
  color: var(--placeholder);
  font-style: italic;
  padding: 1rem 1.25rem;
  border: 1px dashed var(--placeholder);
  border-radius: 2px;
}
.ph-block strong {
  display: block;
  font-weight: 500;
  font-style: normal;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 0.7rem;
  color: var(--placeholder);
  margin-bottom: 0.5rem;
}

/* ── Contact ── */
.contact-section {
  padding: var(--section-pad-y) 0;
  background: var(--bg-alt);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  text-align: center;
}
.contact-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.contact-section .eyebrow { margin-bottom: 1.5rem; }
.contact-section .h2 {
  margin-bottom: 1.75rem;
  max-width: none;
}
.contact-section .hairline { margin: 0 auto 2.5rem; }
.contact-section .lead {
  margin: 0 auto 3rem;
}

.contact-email {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1.85rem;
  color: var(--accent);
  text-decoration: none;
  letter-spacing: 0.015em;
  border-bottom: 1px solid transparent;
  padding-bottom: 0.2rem;
  transition: border-color var(--transition), color var(--transition);
}
.contact-email:hover {
  border-color: var(--accent);
  color: var(--text);
}

/* ── Footer ── */
.footer {
  border-top: 1px solid var(--rule);
  padding: 2.5rem 0;
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer-mark {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: var(--text);
}
.footer-meta {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.65rem;
  letter-spacing: 0.3em;
}

/* ── Responsive ── */

/* Tablet & narrow desktop: keep three-col but tighten gap */
@media (max-width: 1024px) {
  .three-col { gap: 1rem; }
}

/* Mobile: stack everything + phone-tier typography bump */
@media (max-width: 820px) {
  /* Nav inherits the desktop frosted-glass effect (translucent bg + backdrop blur).
     The blur is only suspended while the hamburger menu is open (see .menu-active
     below) — because backdrop-filter creates a containing block that would otherwise
     trap the position:fixed overlay. */
  .nav.menu-active {
    backdrop-filter: none;
  }

  /* Hamburger replaces inline links */
  .nav-toggle { display: block; }

  .nav-links {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    background: rgba(11, 13, 16, 0.88);
    backdrop-filter: blur(22px);
    font-size: 1rem;
    letter-spacing: 0.3em;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition);
    z-index: 200;     /* above the nav bar (100) so menu overlays everything */
  }
  .nav-links a {
    color: var(--text);
    padding: 0.75rem 1.5rem;   /* larger tap target */
  }
  .nav.is-open .nav-links {
    opacity: 1;
    pointer-events: auto;
  }

  /* Bars → X when open */
  .nav.is-open .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.is-open .nav-toggle-bar:nth-child(2) { opacity: 0; }
  .nav.is-open .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  /* Typography bump — keeps hierarchy ratios identical to desktop */
  .body       { font-size: 1.05rem; }
  .lead       { font-size: 1.1rem; }
  .eyebrow    { font-size: 0.78rem; }
  .col-desc   { font-size: 1rem; }
  .founder-bio { font-size: 1rem; }
  .founder-combined { font-size: 1rem; }
  .footnote   { font-size: 0.7rem; }

  .three-col { grid-template-columns: 1fr; gap: 1rem; }
  .col { padding: 2rem 1.5rem; }

  .founders { grid-template-columns: 1fr; gap: 1rem; }
  .founder { padding: 2.25rem 1.75rem; }

  .footer-inner {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .contact-email { font-size: 1.4rem; }
}

/* Small phones */
@media (max-width: 480px) {
  .nav-mark {
    font-size: 0.9rem;
    letter-spacing: 0.03em;
    padding: 0.5rem 0;            /* larger tap target */
  }
  .eyebrow { letter-spacing: 0.3em; }   /* inherits 0.78rem from 820 block */
  .col { padding: 1.75rem 1.25rem; }
  .founder { padding: 2rem 1.5rem; }
  .founder-name { font-size: 1.65rem; }
  .contact-email {
    font-size: 1.2rem;
    word-break: break-word;
    padding: 0.5rem 0;            /* larger tap target */
  }
  .footnote { letter-spacing: 0.25em; }  /* inherits 0.7rem from 820 block */
}

/* ── Short viewports (landscape phones) ──
   Below ~500px tall the absolute-positioned hero footnote would collide with
   the lead paragraph. Drop it into the flex flow so it joins the centered
   stack with breathing room. Threshold sits above any laptop or vertical
   phone height, so desktop and portrait views are untouched. */
@media (max-height: 500px) {
  .hero .footnote {
    position: static;
    margin-top: 1.5rem;
  }
}

/* Respect reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Print ── */
@media print {
  :root {
    --bg:    #ffffff;
    --text:  #0b0d10;
    --muted: #444444;
    --accent: #8a6a2a;
    --rule:  #cccccc;
  }
  html, body { background: #fff; color: #0b0d10; }
  .nav, .footnote, .skip-link { display: none; }
  .hero { min-height: auto; padding: 4rem 2rem; page-break-after: always; }
  .section, .contact-section { padding: 3rem 0; page-break-inside: avoid; }
  a { color: inherit; text-decoration: none; }
  .contact-email::after { content: ""; }
}