/* ═══════════════════════════════════════════════════════════════
   Vana Interior — Global typography / base
   Official CI palette + Segoe UI brand typography
═══════════════════════════════════════════════════════════════ */

/* ── Official brand palette (CI document) ─────────────────────── */
:root {
  /* ── Approved palette — light & airy, green as the hero colour ── */
  --green:          #1C5630;
  --green-hover:    #164726;
  --green-light:    #E8F2EC;
  --green-dark:     #0F3D1E;
  --white:          #FFFFFF;
  --off-white:      #FAFAFA;
  --light-gray:     #F5F5F5;
  --mid-gray:       #E6E6E6;
  --text-primary:   #1A1A1A;
  --text-secondary: #4B5563;
  --text-muted:     #4B5563;   /* readable secondary text (paragraphs/descriptions) */
  --text-faint:     #9CA3AF;   /* only for very light captions */
  --border:         #E6E6E6;
  --danger:         #C0392B;
  --success:        #1C5630;
  --dark-section:  #F5F5F5;   /* very dark navy-gray — footer only */
  --page-bg:        #FAFAFA;

  /* ── Legacy aliases → mapped onto the approved palette ── */
  --text-dark:      #1A1A1A;   /* headings */
  --charcoal:       #1A1A1A;
  --espresso:       #1A1A1A;
  --black:          #1A1A1A;   /* no pure black anywhere visible */
  --muted:          #4B5563;
  --cream:          #FAFAFA;
  --sand:           #E6E6E6;
  --gold:           #1C5630;
  --bg:             #FAFAFA;
  --footer-bg:    #F5F5F5;
  --dark-footer:  #F5F5F5;
}

/* Light, easy-on-the-eyes page background everywhere */
html, body { background-color: var(--page-bg); }
body { color: var(--text-primary); }

/* ── Brand typography — Segoe UI everywhere ───────────────────── */
body, h1, h2, h3, h4, h5, h6, p, a, button, input, select, textarea, span, div {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Segoe UI has no italic personality — italic accents become light weight */
h1 em, h2 em, h3 em, .section-title em {
  font-style: normal;
  font-weight: 300;
}

/* ── Brand pattern — V-logo inspired geometric texture ────────── */
.pattern-bg {
  position: relative;
}
.pattern-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 12px
  ),
  repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.03) 0px,
    rgba(255,255,255,0.03) 1px,
    transparent 1px,
    transparent 12px
  );
  pointer-events: none;
  z-index: 0;
}

/* ── Scroll-reveal base state for new sections ────────────────── */
.service-item,
.portfolio-item,
.stat-counter,
.testimonial-card {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity   0.7s var(--reveal-delay, 0s) ease,
    transform 0.7s var(--reveal-delay, 0s) ease;
}
.service-item.revealed,
.portfolio-item.revealed,
.stat-counter.revealed,
.testimonial-card.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* ── Inspired By Vision full-bleed section (before footer) ─────── */
.ibv-section {
  position: relative;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-align: center;
}
.ibv-bg {
  position: absolute;
  inset: -20px;
  /* Real Vana brand photo (the "Inspired By Vision" feature wall) — no stock imagery.
     Path is relative to this CSS file in /css, so step up one level. */
  background: url('../assets/brand/meeting-green-wall.jpg') center/cover no-repeat;
  transition: transform 0.1s ease;
}
.ibv-overlay {
  position: absolute;
  inset: 0;
  background: rgba(28,86,48, 0.75);
}
.ibv-content {
  position: relative;
  z-index: 2;
  padding: 0 40px;
}
.ibv-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
  font-family: 'Segoe UI', sans-serif;
}
.ibv-heading {
  font-size: clamp(36px, 5vw, 72px);
  font-weight: 300;
  color: #ffffff;
  letter-spacing: 0.08em;
  margin: 0 0 20px;
  font-family: 'Segoe UI', sans-serif;
}
.ibv-sub {
  font-size: 16px;
  color: rgba(255,255,255,0.7);
  letter-spacing: 0.06em;
  font-family: 'Segoe UI', sans-serif;
  font-weight: 300;
}

/* ── Footer bottom strip + Zedia credit ───────────────────────── */
.footer-bottom-strip {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
  border-top: 1px solid #E6E6E6;
  flex-wrap: wrap;
  gap: 8px;
}

.footer-copy {
  font-size: 13px;
  color: #9CA3AF;
  margin: 0;
}

.footer-zedia-credit {
  font-size: 13px;
  color: #4B5563;
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.03em;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.footer-zedia-credit span {
  color: #1C5630;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.footer-zedia-credit:hover {
  color: #1C5630;
}

.footer-zedia-credit:hover span {
  text-decoration: underline;
}