/* ═══════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; scroll-padding-top: 80px; }

body {
  font-family: 'EB Garamond', Georgia, serif;
  font-weight: 400;
  color: #111110;
  background: #faf8f3;
  -webkit-font-smoothing: auto;
  line-height: 1.7;
}

/* ═══════════════════════════════════════════
   LANDING / PORTAL TOGGLE
   ═══════════════════════════════════════════ */

.landing { display: block; }
.portal  { display: none; min-height: 100vh; }

body.portal-mode .landing { display: none; }
body.portal-mode .portal  { display: flex; flex-direction: row; }

/* ═══════════════════════════════════════════
   JS-TOGGLED STATES (can't be pure Tailwind)
   These classes are toggled by portal.js.
   Do NOT duplicate with Tailwind arbitrary
   values in templates — use these classes.
   ═══════════════════════════════════════════ */

/* Nav items */
.p-nav-item.active {
  color: #a68a2a !important;
  background: rgba(166,138,42,0.08);
  border-left-color: #a68a2a;
}
@media (max-width: 767px) {
  .p-nav-item.active {
    border-left-color: transparent;
    border-bottom-color: #a68a2a;
    background: transparent;
  }
}
.p-nav-item.active svg { opacity: 1; }
.p-nav-item.active:hover { color: #F5F2EC !important; }

/* Filter pills */
.pill.active { background: rgba(166,138,42,0.15); border-color: #a68a2a !important; color: #a68a2a !important; }

/* Client table */
.client-table { width: 100%; border-collapse: separate; border-spacing: 0 8px; }

/* Status badges */
.status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px; font-family: 'Cormorant Garamond', serif; font-size: 12px; font-weight: 600; letter-spacing: 1px; white-space: nowrap; text-transform: uppercase; }
.status-active { background: rgba(91,141,239,0.12); color: #5B8DEF; }
.status-review { background: rgba(232,168,56,0.12); color: #E8A838; }
.status-complete { background: rgba(76,175,125,0.12); color: #4CAF7D; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.status-active .status-dot { animation: pulse 2s infinite; }

/* Why column */
.why-col { font-family: 'EB Garamond', Georgia, serif; font-size: 14px; color: #8A9BB0; min-width: 12rem; max-width: 28rem; line-height: 1.55; }

/* Detail tabs */
.detail-tab.active { color: #a68a2a !important; border-bottom-color: #a68a2a !important; }
.detail-tab-panel { display: none; }
.detail-tab-panel.active { display: block !important; }

/* ═══════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════ */

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* ═══════════════════════════════════════════
   INLINE STYLES (moved from index.html)
   ═══════════════════════════════════════════ */
/* Solution tabs */
  .solution-panel        { display:none; }
  .solution-panel.active { display:block; }
  /* FAQ open/close */
  .faq-a                     { display:none; padding:0 0 20px; }
  .faq-item.open .faq-a      { display:block; }
  .faq-item.open .faq-toggle { transform:rotate(45deg); }
  /* Case accordion */
  .case-body                 { display:none; }
  .open .case-body           { display:block; }
  .open .case-toggle         { transform:rotate(45deg); }
  /* Case modal */
  .case-modal-overlay        { display:none; }
  .case-modal-overlay.open   { display:flex; }
  /* Founder bio popover */
  .founder-bio-popover               { display:none; position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%); width:320px; max-width:calc(100vw - 48px); background:#0f1a2e; color:rgba(245,240,230,0.85); font-family:'EB Garamond',Georgia,serif; font-size:14px; line-height:1.7; padding:20px 24px; border:0.5px solid rgba(201,168,76,0.15); z-index:10; }
  .founder-bio-trigger.open .founder-bio-popover { display:block; }
  /* Divider diamond pseudo-element */
  .tw-divider::after { display:none; }