/* ════════════════════════════════════════════════════
   VELLUE — SHARED STYLESHEET
   /css/styles.css

   Contents
   ─────────────────────────────────────────────────
   1.  Reset
   2.  Design tokens
   3.  Dark mode
   4.  Base — html, body, typography, links
   5.  Skip link            (WCAG 2.4.1)
   6.  Focus styles         (WCAG 2.4.7)
   7.  Brand component
   8.  Layout shell
   9.  Navigation
   10. Hero
   11. Sections
   12. Buttons and CTAs
   13. Callout
   14. Footer
   15. Homepage — problems grid
   16. Homepage — disciplines
   17. Homepage — signal strip
   18. Audit — four lenses grid
   19. Audit — outcome list
   20. Audit — proof units
   21. Audit — FAQ
   22. Spacing utilities
   23. Responsive — 768px
   24. Responsive — 480px
════════════════════════════════════════════════════ */


/* ────────────────────────────────────────────────
   1. RESET
──────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}


/* ────────────────────────────────────────────────
   2. DESIGN TOKENS
──────────────────────────────────────────────── */
:root {
  --ink:      #1a1a18;
  --ink2:     #4a4a46;
  --ink3:     #7a7a74;
  --bg:       #f8f7f3;
  --bg2:      #ffffff;
  --bg3:      #f0ede4;
  --rule:     rgba(0,0,0,0.09);
  --amber:    #b87a17; --amberL: #faeeda; --amberT: #f4c775;
  --coral:    #8c3a1d; --coralL: #faece7; --coralT: #e07050;
  --teal:     #0f6e56; --tealL:  #e1f5ee; --tealT:  #1d9e75;
  --purple:   #534ab7; --purpleL:#eeedfe; --purpleT:#7f77dd;
  --gray2:    #888780; --grayL:  #f1efe8;
  --max:      680px;
  --pad:      clamp(1rem, 5vw, 2.5rem);
}


/* ────────────────────────────────────────────────
   3. DARK MODE
──────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  :root {
    --ink:  #e8e6de;
    --ink2: #b0aea6;
    --ink3: #787670;
    --bg:   #1c1b18;
    --bg2:  #252420;
    --bg3:  #2c2b26;
    --rule: rgba(255,255,255,0.09);
    --amberL: #412402; --coralL: #4a1b0c;
    --tealL:  #04342c; --purpleL:#26215c; --grayL: #2c2c2a;
  }
}


/* ────────────────────────────────────────────────
   4. BASE
──────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;
  line-height: 1.65;
}

h1, h2, h3 {
  font-family: 'DM Serif Display', Georgia, serif;
  font-weight: 400;
  color: var(--ink);
}

p {
  color: var(--ink2);
}

a {
  color: var(--teal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--ink);
}


/* ────────────────────────────────────────────────
   5. SKIP LINK
   WCAG 2.4.1 — Bypass Blocks
──────────────────────────────────────────────── */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  background: var(--ink);
  color: var(--bg);
  font-size: 14px;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 0 0 6px 6px;
  text-decoration: none;
  z-index: 300;
}

.skip-link:focus {
  top: 0;
}


/* ────────────────────────────────────────────────
   6. FOCUS STYLES
   WCAG 2.4.7 — Focus Visible
──────────────────────────────────────────────── */
:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
  border-radius: 3px;
}


/* ────────────────────────────────────────────────
   7. BRAND COMPONENT
   <a class="brand">
     <span class="brand-v">V</span>
     <span class="brand-rest">ellue</span>
   </a>
──────────────────────────────────────────────── */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  text-decoration: none;
}

.brand-v {
  color: #0070f3;
  font-size: 1.5rem;
  font-weight: 950;
  letter-spacing: -0.05em;
  margin-right: -0.05em;
  position: relative;
  top: 0.02em;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.brand-rest {
  color: var(--ink);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-family: 'DM Sans', system-ui, sans-serif;
}

.nav-inner .brand-v,
.nav-inner .brand-rest {
  font-size: 1.25rem;
}

.footer-inner .brand-v,
.footer-inner .brand-rest {
  font-size: 1.1rem;
}


/* ────────────────────────────────────────────────
   8. LAYOUT SHELL
──────────────────────────────────────────────── */
.site-wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
}


/* ────────────────────────────────────────────────
   9. NAVIGATION
   Nav link color: --ink2 (#4a4a46 on #ffffff = 7.2:1, WCAG AA)
──────────────────────────────────────────────── */
nav.site-nav {
  border-bottom: 0.5px solid var(--rule);
  background: var(--bg2);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 52px;
  gap: 1rem;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  flex-shrink: 0;
}

.nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
}

.nav-links a:hover,
.nav-links a[aria-current="page"] {
  color: var(--ink);
}


/* ────────────────────────────────────────────────
   10. HERO
──────────────────────────────────────────────── */
.hero {
  padding: 3.5rem 0 3rem;
  border-bottom: 0.5px solid var(--rule);
}

.hero-eyebrow {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 1.25rem;
}

.hero h1 {
  font-size: clamp(26px, 4.5vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 1.25rem;
  max-width: 540px;
}

.hero-lede {
  font-size: clamp(15px, 2vw, 17px);
  line-height: 1.65;
  color: var(--ink2);
  max-width: 520px;
  margin-bottom: 2rem;
}


/* ────────────────────────────────────────────────
   11. SECTIONS
──────────────────────────────────────────────── */
.section {
  padding: 3rem 0;
  border-bottom: 0.5px solid var(--rule);
}

.section:last-child {
  border-bottom: none;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 1.25rem;
  padding-bottom: 0.5rem;
  border-bottom: 0.5px solid var(--rule);
}

.section h2 {
  font-size: clamp(19px, 3vw, 22px);
  line-height: 1.25;
  margin-bottom: 0.875rem;
}

.section p {
  margin-bottom: 0.875rem;
  max-width: 560px;
}

.section p:last-child {
  margin-bottom: 0;
}

/* Off-screen rendering skip for .section elements.
   contain-intrinsic-size matches your section padding
   (~3rem top+bottom = ~96px) plus typical content height. */
.section {
  content-visibility: auto;
  contain-intrinsic-size: 0 420px;
}

/* Scroll-entry fade. Uses .is-visible toggled by JS below.
   Skipped entirely if user prefers reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .section {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 380ms ease-out,
                transform 380ms ease-out;
  }

  /* Hero is above-fold — always visible, no fade */
  .hero,
  .section.is-visible {
    opacity: 1;
    transform: none;
  }
}


/* ────────────────────────────────────────────────
   12. BUTTONS AND CTAS
──────────────────────────────────────────────── */
.btn-primary {
  display: inline-block;
  background: var(--ink);
  color: var(--bg);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  padding: 0.65rem 1.25rem;
  border-radius: 6px;
  letter-spacing: 0.01em;
  transition: opacity 0.15s;
  white-space: nowrap;
}

.btn-primary:hover {
  opacity: 0.82;
  color: var(--bg);
}

.cta-secondary {
  font-size: 14px;
  color: var(--ink2);
  text-decoration: none;
  white-space: nowrap;
}

.cta-secondary:hover {
  color: var(--ink);
}

.cta-secondary:active {
  color: var(--ink);
  opacity: 0.7;
}

.btn-primary:active {
  opacity: 0.65;
  transform: scale(0.97);
  transition-duration: 80ms;
}

.cta-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hero-cta-group {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}


/* ────────────────────────────────────────────────
   13. CALLOUT
──────────────────────────────────────────────── */
.callout {
  background: var(--bg3);
  border-radius: 10px;
  padding: 1.1rem 1.35rem;
  margin-top: 1.5rem;
}

.callout p {
  font-size: 15px;
  color: var(--ink);
  margin: 0;
  max-width: none;
}


/* ────────────────────────────────────────────────
   14. FOOTER
──────────────────────────────────────────────── */
footer {
  border-top: 0.5px solid var(--rule);
  padding: 2rem 0;
}

.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  flex-wrap: wrap;
}

.footer-links a {
  font-size: 13px;
  color: var(--ink2);
  text-decoration: none;
}

.footer-links a:hover {
  color: var(--ink);
}


/* ────────────────────────────────────────────────
   15. HOMEPAGE — PROBLEMS GRID
   6 cards, always 2 columns for even layout.
   problem-a at --ink2: #4a4a46 on #f8f7f3 = 7.2:1, WCAG AA
──────────────────────────────────────────────── */
.problems-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}

.problem-card {
  background: var(--bg2);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}

.problem-card .problem-q {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.problem-card .problem-a {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.5;
  margin: 0;
}


/* ────────────────────────────────────────────────
   16. HOMEPAGE — DISCIPLINES
   4 pills, always 2 columns for even layout.
──────────────────────────────────────────────── */
.disciplines {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}

.discipline-pill {
  background: var(--bg3);
  border-radius: 8px;
  padding: 0.65rem 0.875rem;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
}

.discipline-pill span {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--ink2);
  margin-top: 2px;
}


/* ────────────────────────────────────────────────
   17. HOMEPAGE — SIGNAL STRIP
   signal-arrow uses --ink3: decorative aria-hidden element,
   exempt from WCAG 1.4.3.
──────────────────────────────────────────────── */
.signal-strip {
  margin-top: 1.75rem;
  display: flex;
  flex-direction: column;
  list-style: none;
  padding: 0;
}

.signal-strip li {
  display: contents;
}

.signal-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 0.5px solid var(--rule);
  text-decoration: none;
}

.signal-item:last-child {
  border-bottom: none;
}

.signal-item:hover .signal-label {
  color: var(--ink);
}

.signal-item:hover .signal-arrow {
  opacity: 1;
}

.signal-item:active .signal-label {
  color: var(--ink);
}

.signal-item:active .signal-arrow {
  opacity: 1;
}

.signal-context {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 0.3rem;
}

.signal-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.4;
  transition: color 0.12s;
}

.signal-desc {
  font-size: 14px;
  color: var(--ink2);
  margin-top: 0.35rem;
  line-height: 1.5;
}

.signal-arrow {
  font-size: 16px;
  color: var(--ink3);
  opacity: 0.5;
  margin-top: 0.25rem;
  transition: opacity 0.12s;
}


/* ────────────────────────────────────────────────
   18. AUDIT — FOUR LENSES GRID
   4 cards, always 2 columns for even layout.
──────────────────────────────────────────────── */
.lenses {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.625rem;
  margin-top: 1.5rem;
  list-style: none;
  padding: 0;
}

.lens-card {
  background: var(--bg2);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
}

.lens-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.4rem;
  line-height: 1.35;
}

.lens-desc {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.5;
  margin: 0;
}


/* ────────────────────────────────────────────────
   19. AUDIT — OUTCOME LIST
──────────────────────────────────────────────── */
.outcome-list {
  list-style: none;
  padding: 0;
  margin-top: 1.25rem;
  display: flex;
  flex-direction: column;
}

.outcome-list li {
  padding: 0.75rem 0;
  border-bottom: 0.5px solid var(--rule);
  font-size: 15px;
  color: var(--ink2);
  line-height: 1.5;
}

.outcome-list li:last-child {
  border-bottom: none;
}

.outcome-list li strong {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.25rem;
}


/* ────────────────────────────────────────────────
   20. AUDIT — PROOF UNITS
──────────────────────────────────────────────── */
.proof-unit {
  background: var(--bg2);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 1.5rem 1.75rem;
  margin-top: 1.75rem;
}

.proof-label {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink2);
  margin-bottom: 1rem;
  padding-bottom: 0.625rem;
  border-bottom: 0.5px solid var(--rule);
}

.proof-unit h3 {
  font-size: 18px;
  line-height: 1.25;
  margin-bottom: 1rem;
  color: var(--ink);
}

.proof-unit p {
  font-size: 15px;
  color: var(--ink2);
  margin-bottom: 0.875rem;
  max-width: none;
}

.proof-unit p:last-child {
  margin-bottom: 0;
}

.proof-finding {
  font-size: 14px;
  color: var(--ink2);
  background: var(--bg3);
  border-radius: 8px;
  padding: 1rem 1.25rem;
  margin: 1rem 0;
}

.proof-finding strong {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.5rem;
}


/* ────────────────────────────────────────────────
   21. AUDIT — FAQ
   + toggle icon uses --ink3: decorative pseudo-element,
   exempt from WCAG 1.4.3.
──────────────────────────────────────────────── */
.faq-list {
  list-style: none;
  padding: 0;
  margin-top: 1.5rem;
  display: flex;
  flex-direction: column;
}

.faq-list li {
  border-bottom: 0.5px solid var(--rule);
}

.faq-list li:last-child {
  border-bottom: none;
}

.faq-list details {
  padding: 0;
}

.faq-list summary {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  padding: 1rem 0;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  line-height: 1.4;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  font-size: 18px;
  font-weight: 400;
  color: var(--ink3);
  flex-shrink: 0;
  transition: transform 0.2s;
  line-height: 1;
}

.faq-list details[open] summary::after {
  transform: rotate(45deg);
}

.faq-answer {
  font-size: 14px;
  color: var(--ink2);
  line-height: 1.6;
  padding-bottom: 1rem;
  max-width: 520px;
}


/* ────────────────────────────────────────────────
   22. SPACING UTILITIES
   Replaces all inline style="margin-top:…" attributes.
──────────────────────────────────────────────── */
.mt-md {
  margin-top: 1.5rem;
}

.mt-lg {
  margin-top: 1.75rem;
}


/* ────────────────────────────────────────────────
   23. RESPONSIVE — 768px (tablet)
──────────────────────────────────────────────── */
@media (max-width: 768px) {
  .nav-links a {
    font-size: 12px;
  }

 .nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink2);
  text-decoration: none;
  letter-spacing: 0.01em;
  transition: color 0.15s;
  white-space: nowrap;

  /* Explicit tap target height — ensures 44px
     on mobile when .nav-inner loses fixed height */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 4px;
 }

  .hero {
    padding: 2.75rem 0 2.5rem;
  }

  .problems-grid {
    gap: 0.625rem;
  }

  .lenses {
    gap: 0.5rem;
  }

  .proof-unit {
    padding: 1.25rem;
  }
}


/* ────────────────────────────────────────────────
   24. RESPONSIVE — 480px (mobile)
──────────────────────────────────────────────── */
@media (max-width: 480px) {
  .nav-inner {
    height: auto;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  .nav-links {
    gap: 0.75rem;
    flex-wrap: wrap;
  }

  .nav-links a {
    font-size: 12px;
    min-height: 44px;    /* keep tap target on mobile */
    padding: 0 2px;
  }

  .hero {
    padding: 2rem 0;
  }

  .hero-cta-group,
  .cta-group {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.875rem;
  }

  .problems-grid {
    grid-template-columns: 1fr;
  }

  .disciplines {
    grid-template-columns: 1fr;
  }

  .lenses {
    grid-template-columns: 1fr;
  }

  .proof-unit {
    padding: 1rem;
  }

  .footer-links {
    gap: 1rem;
  }
}


/* ────────────────────────────────────────────────
   25. APPROACH — INTEGRATION DIAGRAM
   HTML/CSS layout. No SVG. Text wraps naturally.
   Responsive at all viewports.
   All colors use design tokens for dark mode support.
──────────────────────────────────────────────── */

/* Outer figure wrapper */
.approach-diagram {
  margin-top: 1.75rem;
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  background: var(--bg3);
  padding: 1.5rem;
}

/* Visually hidden description for screen readers */
.diagram-desc-label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* Outer grid: 2x2 discipline cards around the center card
   Uses a 3-column layout: [discipline] [center] [discipline]
   with discipline cards stacked via row placement.           */
.dgm-outer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 0.625rem;
  align-items: stretch;
}

/* Discipline cards: top-left, top-right, bottom-left, bottom-right */
.dgm-discipline-card {
  background: var(--bg2);
  border: 0.5px solid var(--rule);
  border-radius: 10px;
  padding: 1rem 1.1rem;
}

/* Center card spans both rows in the middle column */
.dgm-center-card {
  grid-column: 2;
  grid-row: 1 / 3;
  background: var(--ink);
  border-radius: 10px;
  padding: 1.25rem 1.1rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* Discipline card typography */
.dgm-discipline-head {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}

.dgm-discipline-body {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.5;
  margin: 0;
}

/* Center card typography */
.dgm-center-head {
  font-family: 'DM Serif Display', Georgia, serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--bg);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.dgm-center-sub {
  font-size: 11px;
  color: var(--bg3);
  line-height: 1.4;
  margin: 0;
}

/* Caption below the grid */
.diagram-caption {
  font-size: 13px;
  color: var(--ink2);
  text-align: center;
  margin-top: 1rem;
  line-height: 1.5;
}

/* Responsive: collapse to vertical stack on mobile */
@media (max-width: 600px) {
  .dgm-outer-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto auto;
  }

  .dgm-center-card {
    grid-column: 1 / 3;
    grid-row: 2;
    padding: 1rem 1.1rem;
  }
}