/* ==========================================================================
   JPrice Industries — Public Site
   Font & layout system ported from RezWorks Studios (Fraunces + Work Sans,
   token-driven spacing/radius/motion, sticky header, hero pattern), with
   JPrice's own cyan/violet brand colors in place of RezWorks' palette.
   Self-contained — does not depend on the shared dashboard style.css.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Work+Sans:wght@400;500;600;700&display=swap');

:root{
  --color-bg: #0a0d15;
  --color-bg-alt: #0d1119;
  --color-surface: #121826;
  --color-surface-2: #1a2233;
  --color-border: #263148;
  --color-border-soft: #1c2537;

  --color-brand-start: #22d3ee;
  --color-brand-end: #a78bfa;
  --color-brand: #67e8f9;
  --color-brand-hot: #7ee8fa;
  --color-on-brand: #06222b;

  --color-text: #eef4fa;
  --color-text-muted: #a7b3c5;
  --color-text-faint: #6f7d94;

  --font-display: 'Fraunces', ui-serif, Georgia, 'Times New Roman', serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.375rem;
  --fs-xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --fs-2xl: clamp(2.1rem, 1.5rem + 2.5vw, 2.85rem);
  --fs-3xl: clamp(2.5rem, 1.6rem + 4vw, 4rem);
  --fs-hero: clamp(2.5rem, 1.7rem + 4.5vw, 4.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6.5rem;

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-md: 0 10px 30px rgba(0,0,0,.45);
  --shadow-glow: 0 0 0 1px rgba(167,139,250,.3), 0 16px 46px rgba(34,211,238,.16);

  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in-out: cubic-bezier(.65,0,.35,1);
  --dur-fast: 150ms;
  --dur-base: 300ms;
  --dur-slow: 500ms;

  --container-xl: 1280px;
  --header-h: 76px;
  --z-nav: 100;
  --z-overlay: 200;

  color-scheme: dark;
}

*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  min-height: 100dvh;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img, picture, svg{ display:block; max-width:100%; }
button{ background:none; border:0; cursor:pointer; font: inherit; color: inherit; }
a{ color: inherit; text-decoration: none; }
h1,h2,h3{ margin:0; font-family: var(--font-display); font-weight: 700; line-height:1.12; letter-spacing:-0.01em; }
p{ margin:0; }
:focus-visible{ outline: 2px solid var(--color-brand-hot); outline-offset: 3px; border-radius: 4px; }

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

.skip-link{
  position: absolute; top: -100px; left: var(--space-4);
  background: var(--color-brand); color: var(--color-on-brand);
  padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm);
  font-weight: 600; z-index: 1000; transition: top var(--dur-fast) var(--ease-out);
}
.skip-link:focus{ top: var(--space-4); }

.container{ width:100%; max-width: var(--container-xl); margin-inline:auto; padding-inline: var(--space-5); }
@media (min-width: 768px){ .container{ padding-inline: var(--space-7); } }

.section{ padding-block: var(--space-11); }
.section-alt{ background: var(--color-bg-alt); }

.eyebrow{
  display:inline-flex; align-items:center; gap: var(--space-2);
  font-weight:600; font-size: var(--fs-xs); letter-spacing:.14em; text-transform:uppercase;
  color: var(--color-brand-hot);
}
.eyebrow::before{ content:''; width:22px; height:2px; background: var(--color-brand); border-radius:2px; }
.eyebrow--center{ justify-content:center; }
.eyebrow--center::before{ display:none; }

.section-head{ max-width: 640px; margin-bottom: var(--space-8); }
.section-head--center{ margin-inline:auto; text-align:center; }
.section-head h2{ font-size: var(--fs-3xl); margin-top: var(--space-3); }
.section-head p{ margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--fs-md); }

.text-gradient{
  background: linear-gradient(100deg, var(--color-brand-start), var(--color-brand-end));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Buttons ---- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap: var(--space-2);
  padding: 0.9rem 1.6rem; min-height: 48px; border-radius: var(--radius-full);
  font-weight:600; font-size: var(--fs-sm); white-space:nowrap;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.btn svg{ width:18px; height:18px; flex-shrink:0; }
.btn:active{ transform: scale(.97); }
.btn--primary{
  background: linear-gradient(100deg, var(--color-brand-start), var(--color-brand-end));
  color: #061018; box-shadow: var(--shadow-glow);
}
.btn--primary:hover{ transform: translateY(-2px); }
.btn--ghost{
  background: rgba(238,244,250,.04); color: var(--color-text);
  border: 1px solid rgba(238,244,250,.22); backdrop-filter: blur(6px);
}
.btn--ghost:hover{ border-color: rgba(238,244,250,.5); background: rgba(238,244,250,.08); }
.btn--sm{ padding: .65rem 1.2rem; min-height:44px; font-size: var(--fs-xs); }
.btn--block{ width:100%; }

/* ---- Header / Nav ---- */
.site-header{
  position: fixed; top:0; left:0; right:0; z-index: var(--z-nav);
  height: var(--header-h); display:flex; align-items:center;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled{
  background: rgba(10,13,21,.86); backdrop-filter: blur(14px) saturate(140%);
  border-bottom-color: var(--color-border-soft); height: 68px;
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; width:100%; }
.brand{ display:flex; align-items:center; gap: var(--space-3); font-family: var(--font-display); font-weight:700; font-size: 1.15rem; color: var(--color-text); }
.brand img{ height:38px; width:38px; object-fit:cover; border-radius:22%; }

.nav-desktop{ display:none; }
@media (min-width: 900px){
  .nav-desktop{ display:flex; align-items:center; gap: var(--space-7); }
  .nav-desktop a{ font-size: var(--fs-sm); font-weight:600; color: var(--color-text-muted); padding-block: var(--space-2); position:relative; transition: color var(--dur-fast) var(--ease-out); }
  .nav-desktop a::after{ content:''; position:absolute; left:0; right:0; bottom:-4px; height:2px; background: linear-gradient(90deg, var(--color-brand-start), var(--color-brand-end)); transform: scaleX(0); transform-origin:left; transition: transform var(--dur-base) var(--ease-out); }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"]{ color: var(--color-text); }
  .nav-desktop a:hover::after, .nav-desktop a[aria-current="page"]::after{ transform: scaleX(1); }
}
.nav-actions{ display:flex; align-items:center; gap: var(--space-4); }
.nav-actions .btn{ display:none; }
@media (min-width:900px){ .nav-actions .btn{ display:inline-flex; } }

.icon-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius: var(--radius-sm); border:1px solid var(--color-border); color: var(--color-text); }
.icon-toggle:hover{ border-color: var(--color-brand); color: var(--color-brand); }
.icon-toggle svg{ width:20px; height:20px; }

.nav-toggle{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; color: var(--color-text); }
@media (min-width:900px){ .nav-toggle{ display:none; } }
.nav-toggle svg{ width:24px; height:24px; }

.nav-mobile{
  position: fixed; inset:0; background: rgba(10,13,21,.98); backdrop-filter: blur(10px);
  z-index: var(--z-overlay); display:flex; flex-direction:column; padding: var(--space-6) var(--space-5);
  transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-in-out); visibility:hidden;
}
.nav-mobile.is-open{ transform: translateX(0); visibility: visible; }
.nav-mobile-head{ display:flex; align-items:center; justify-content:space-between; height: var(--header-h); }
.nav-mobile ul{ list-style:none; margin: var(--space-8) 0 0; padding:0; display:flex; flex-direction:column; gap: var(--space-2); }
.nav-mobile a{ display:block; padding: var(--space-4) var(--space-2); font-family: var(--font-display); font-size: var(--fs-xl); font-weight:600; border-bottom:1px solid var(--color-border-soft); color: var(--color-text); }
.nav-mobile a[aria-current="page"]{ color: var(--color-brand-hot); }
.nav-mobile .btn{ margin-top: var(--space-8); }
@media (min-width:900px){ .nav-mobile{ display:none; } }

/* ---- Hero ---- */
.hero{ position:relative; padding-top: calc(var(--header-h) + var(--space-9)); padding-bottom: var(--space-10); overflow:hidden; isolation:isolate; }
.hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(90% 70% at 15% 0%, rgba(167,139,250,.22), transparent 60%),
    radial-gradient(80% 70% at 90% 10%, rgba(34,211,238,.16), transparent 55%),
    linear-gradient(180deg, #0a0d15 0%, #0d1119 55%, #0a0d15 100%);
}
.hero .eyebrow{ justify-content:center; }
.hero .eyebrow::before{ display:none; }
.hero h1{ font-size: var(--fs-hero); margin-top: var(--space-4); max-width: 16ch; margin-inline:auto; text-wrap: balance; text-align:center; }
.hero p{ margin-top: var(--space-5); max-width: 52ch; margin-inline:auto; font-size: var(--fs-md); color: var(--color-text-muted); text-align:center; }
.hero-actions{ margin-top: var(--space-7); display:flex; flex-wrap:wrap; gap: var(--space-4); justify-content:center; }

/* ---- Business rows (stacked, logo beside profile) ---- */
.business-list{ display:flex; flex-direction:column; gap: var(--space-7); }
.business-row{
  display:grid; gap:0; grid-template-columns: 1fr;
  align-items:stretch;
  background: linear-gradient(160deg, var(--color-surface), var(--color-bg-alt));
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  overflow:hidden;
  transition: border-color var(--dur-base) var(--ease-out);
}
.business-row:hover{ border-color: var(--color-brand); }
@media (min-width: 700px){ .business-row{ grid-template-columns: 280px 1fr; } }
.business-row-logo{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio: 1 / 1;
  background: var(--color-surface-2);
  border-bottom: 1px dashed var(--color-border);
  padding: var(--space-4);
}
.business-row-logo img{
  width:100%; height:100%;
  object-fit: contain; border-radius: var(--radius-sm);
}
@media (min-width: 700px){ .business-row-logo{ border-bottom:0; border-right: 1px dashed var(--color-border); } }
.business-row-body{ padding: var(--space-7); }
.business-row-body h3{ font-size: var(--fs-xl); }
.business-row-body p{ margin-top: var(--space-3); color: var(--color-text-muted); }
.tag-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top: var(--space-4); }
.tag{ font-size:11px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; padding:4px 9px; border-radius:999px; background: var(--color-surface-2); color: var(--color-text-faint); }
.business-row-body .link-arrow{ margin-top: var(--space-5); }
.pillar .link-arrow{ margin-top: var(--space-5); }
.link-arrow{ display:inline-flex; align-items:center; gap: var(--space-2); font-weight:600; color: var(--color-brand-hot); transition: gap var(--dur-fast) var(--ease-out); }
.link-arrow svg{ width:18px; height:18px; transition: transform var(--dur-fast) var(--ease-out); }
.link-arrow:hover{ gap: var(--space-3); }
.link-arrow:hover svg{ transform: translateX(2px); }

/* ---- Bio ---- */
.bio-section{
  display:grid; grid-template-columns: 160px 1fr; gap: var(--space-7); align-items:start;
  background: var(--color-surface); border:1px solid var(--color-border-soft); border-radius: var(--radius-lg); padding: var(--space-7);
}
.bio-avatar{
  width:160px; height:160px; border-radius: var(--radius-md); background: var(--color-surface-2);
  border: 1px solid var(--color-border-soft); display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap: var(--space-2); color: var(--color-text-faint); font-size:12px; text-align:center; overflow:hidden;
  flex-shrink:0;
}
.bio-avatar img{ width:100%; height:100%; object-fit:cover; }
.bio-content h3{ font-size: var(--fs-xl); color: var(--color-text); }
.bio-content p{ margin-top: var(--space-3); color: var(--color-text-muted); line-height:1.65; }
.bio-note{ margin-top: var(--space-4); font-size:13px; color: var(--color-text-faint); font-style:italic; }
.bio-figure{ margin: var(--space-4) 0 0; max-width: 420px; }
.bio-figure img{ width:100%; border-radius: var(--radius-md); border:1px solid var(--color-border-soft); }
.bio-figure figcaption{ margin-top: var(--space-2); font-size:12px; color: var(--color-text-faint); }
@media (max-width: 640px){ .bio-section{ grid-template-columns:1fr; } .bio-avatar{ width:110px; height:110px; } }

/* ---- Footer ---- */
.site-footer{ border-top:1px solid var(--color-border-soft); padding: var(--space-7) 0; }
.footer-inner{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap: var(--space-4); }
.footer-brand{ display:flex; align-items:center; gap: var(--space-2); font-family: var(--font-display); font-weight:600; color: var(--color-text); }
.footer-links{ display:flex; gap: var(--space-6); }
.footer-links a{ color: var(--color-text-muted); }
.footer-links a:hover{ color: var(--color-brand-hot); }
.footer-meta{ color: var(--color-text-faint); font-size: var(--fs-sm); }
@media (max-width: 640px){ .footer-inner{ flex-direction:column; align-items:flex-start; } }