/* =====================================================================
   KnowYourProfessional.ca — stylesheet
   Aesthetic: institutional / editorial. A public ledger, calm and exact.
   Display: Fraunces (editorial serif). Body: Söhne-like grotesque (system
   fallback to a clean sans). Verified accent is a deep evergreen, NOT a
   "reward gold against a warning" — both states are presented with dignity.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Newsreader:opsz,wght@6..72,400;6..72,500&family=IBM+Plex+Mono:wght@400;500&display=swap');

:root{
  --ink:        #14201c;   /* near-black evergreen */
  --paper:      #f6f4ee;   /* warm paper */
  --card:       #ffffff;
  --line:       #d9d6cc;   /* hairline */
  --muted:      #5c635c;
  --accent:     #0f5132;   /* evergreen — "verified / in good standing" */
  --accent-2:   #1f7a52;
  --warn:       #8a5a00;   /* amber, used only for true regulator alerts */
  --danger:     #8c2f23;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --serif: 'Fraunces', Georgia, serif;
  --read: 'Newsreader', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 24px}
.mono{font-family:var(--mono);font-size:.82rem;letter-spacing:.02em}

/* ---------- header ---------- */
.site-head{border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:50}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:68px}
.brand{font-family:var(--serif);font-weight:600;font-size:1.25rem;color:var(--ink);letter-spacing:-.01em}
.brand .dot{color:var(--accent)}
.nav a{color:var(--ink);margin-left:26px;font-size:.92rem}
.nav a:hover{color:var(--accent);text-decoration:none}

/* ---------- hero / search ---------- */
.hero{padding:84px 0 64px;border-bottom:1px solid var(--line)}
.hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(2.1rem,4.5vw,3.4rem);line-height:1.08;letter-spacing:-.02em;max-width:18ch}
.hero p.lede{font-family:var(--read);font-size:1.15rem;color:var(--muted);margin-top:18px;max-width:54ch}
.searchbar{margin-top:34px;display:flex;gap:0;max-width:640px;border:1px solid var(--ink);background:var(--card);border-radius:2px;overflow:hidden}
.searchbar input{flex:1;border:0;padding:16px 18px;font-size:1rem;font-family:var(--sans);outline:none;background:transparent}
.searchbar button{border:0;background:var(--ink);color:#fff;padding:0 26px;font-size:.95rem;cursor:pointer;letter-spacing:.02em}
.searchbar button:hover{background:var(--accent)}

.metrics{display:flex;gap:48px;margin-top:46px;flex-wrap:wrap}
.metric .n{font-family:var(--serif);font-size:2rem;font-weight:500}
.metric .l{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}

/* ---------- bento category grid ---------- */
.section{padding:64px 0}
.section h2{font-family:var(--serif);font-weight:500;font-size:1.7rem;margin-bottom:6px}
.section .sub{color:var(--muted);margin-bottom:28px;font-family:var(--read)}
.bento{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:128px;gap:14px}
.cat{
  border:1px solid var(--line);background:var(--card);border-radius:3px;padding:18px;
  display:flex;flex-direction:column;justify-content:space-between;
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.cat:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(20,32,28,.08);border-color:var(--ink);text-decoration:none}
.cat .k{font-family:var(--serif);font-size:1.15rem;color:var(--ink)}
.cat .c{font-size:.8rem;color:var(--muted);font-family:var(--mono)}
.cat.lg{grid-column:span 2;grid-row:span 2}
.cat.lg .k{font-size:1.6rem}
.cat.wide{grid-column:span 2}

/* ---------- mission ---------- */
.doctrine{background:var(--ink);color:#e9e6dc;border-radius:4px;padding:46px}
.doctrine h2{color:#fff;font-family:var(--serif)}
.doctrine p{font-family:var(--read);font-size:1.08rem;color:#c9c8bf;max-width:60ch;margin-top:12px}
.doctrine ul{list-style:none;margin-top:22px;display:grid;gap:10px}
.doctrine li{padding-left:22px;position:relative;color:#d7d5cb}
.doctrine li::before{content:'—';position:absolute;left:0;color:var(--accent-2)}

/* ---------- search results / directory ---------- */
.result-row,.result-card{border:1px solid var(--line);background:var(--card);border-radius:3px;margin-bottom:12px}
.result-row{padding:16px 20px;display:flex;justify-content:space-between;align-items:center}
.result-row .nm{font-family:var(--read);font-size:1.1rem}
.result-row .meta{font-size:.84rem;color:var(--muted)}
.badge{display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-family:var(--mono);
  text-transform:uppercase;letter-spacing:.06em;padding:4px 9px;border-radius:2px}
.badge.verified{background:var(--accent);color:#fff}
.badge.public{background:#ece9df;color:var(--muted);border:1px solid var(--line)}
.result-card{padding:20px;display:flex;gap:18px;align-items:center;border-color:var(--ink)}
.result-card .ph{width:64px;height:64px;border-radius:50%;background:#e7e4da;flex:none;overflow:hidden}
.result-card .ph img{width:100%;height:100%;object-fit:cover}

/* ---------- profile : shared ---------- */
.profile{padding:48px 0 80px}
.crumb{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:18px}
.profile-grid{display:grid;grid-template-columns:1fr 320px;gap:40px}
@media(max-width:860px){.profile-grid{grid-template-columns:1fr}}
.fact{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--line)}
.fact .k{color:var(--muted);font-size:.86rem}
.fact .v{font-weight:500;text-align:right}
.statpill{display:inline-flex;gap:7px;align-items:center;font-size:.82rem;font-family:var(--mono);
  padding:6px 11px;border-radius:2px;border:1px solid var(--line)}
.statpill.good{color:var(--accent);border-color:var(--accent)}
.statpill.alert{background:#fbeceb;color:var(--danger);border-color:var(--danger)}

/* ---------- profile : PUBLIC state (free, neutral — not a warning) ---------- */
.p-public{background:var(--card);border:1px solid var(--line);border-radius:4px;padding:34px}
.p-public .name{font-family:var(--serif);font-weight:500;font-size:2.1rem;line-height:1.1}
.p-public .sub{color:var(--muted);font-family:var(--read);margin-top:4px}
.p-public .avatar{width:96px;height:96px;border-radius:50%;background:#e7e4da;
  display:flex;align-items:center;justify-content:center;color:#a39f93;font-family:var(--serif);font-size:1.8rem}
.notice{background:#f3f1e8;border:1px solid var(--line);border-radius:3px;padding:14px 16px;
  font-size:.9rem;color:var(--muted);margin-top:20px}
.notice b{color:var(--ink)}

/* ---------- profile : VERIFIED state (paid, premium) ---------- */
.p-verified{background:#0a0a0a;color:#f4f1e9;border-radius:4px;padding:34px;
  border:1px solid #2a2a2a;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.p-verified .name{font-family:var(--serif);font-weight:500;font-size:2.1rem;color:#fff;line-height:1.1}
.p-verified .sub{color:#b9b6ad;font-family:var(--read);margin-top:4px}
.p-verified .avatar{width:96px;height:96px;border-radius:50%;overflow:hidden;border:2px solid #d4af37}
.p-verified .avatar img{width:100%;height:100%;object-fit:cover}
.p-verified .fact{border-bottom-color:#262626}
.p-verified .fact .k{color:#9b988f}
.p-verified .gold{color:#d4af37}
.p-verified .badge.verified{background:linear-gradient(135deg,#d4af37,#b8902a);color:#0a0a0a}
.btn-book{display:inline-block;margin-top:20px;background:#d4af37;color:#0a0a0a;
  padding:13px 22px;border-radius:3px;font-weight:600;letter-spacing:.01em}
.btn-book:hover{background:#e6c350;text-decoration:none}

/* ---------- CTA / buttons ---------- */
.btn{display:inline-block;background:var(--ink);color:#fff;padding:13px 22px;border-radius:3px;
  font-size:.95rem;border:0;cursor:pointer;letter-spacing:.01em}
.btn:hover{background:var(--accent);text-decoration:none}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--ink)}
.btn.ghost:hover{background:var(--ink);color:#fff}
.btn.block{display:block;width:100%;text-align:center}

.aside-card{border:1px solid var(--line);background:var(--card);border-radius:4px;padding:22px;margin-bottom:16px}
.aside-card h3{font-family:var(--serif);font-weight:500;font-size:1.1rem;margin-bottom:10px}
.aside-card p{font-size:.9rem;color:var(--muted)}

/* ---------- checkout ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;min-height:calc(100vh - 68px)}
@media(max-width:860px){.split{grid-template-columns:1fr}}
.split .left{background:var(--ink);color:#eee;padding:56px 48px}
.split .right{padding:56px 48px;background:var(--paper)}
.preview-card{border-radius:6px;overflow:hidden;transition:all .6s cubic-bezier(.2,.8,.2,1)}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:3px;font-size:1rem;font-family:var(--sans)}
.consent{display:flex;gap:12px;align-items:flex-start;background:var(--card);
  border:1px solid var(--line);border-radius:3px;padding:14px;font-size:.86rem;color:var(--muted);margin:18px 0}
.concierge{margin-top:18px;font-size:.9rem;color:var(--muted);text-align:center}

/* ---------- legal pages ---------- */
.legal{padding:56px 0 90px;max-width:760px}
.legal h1{font-family:var(--serif);font-weight:500;font-size:2.2rem;margin-bottom:8px}
.legal .updated{font-family:var(--mono);font-size:.78rem;color:var(--muted);margin-bottom:30px}
.legal h2{font-family:var(--serif);font-weight:500;font-size:1.3rem;margin:30px 0 10px}
.legal p,.legal li{font-family:var(--read);font-size:1.05rem;color:#2b322d;margin-bottom:12px}
.legal ul{padding-left:22px}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);padding:40px 0;margin-top:40px;color:var(--muted);font-size:.88rem}
.site-foot .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px}
.site-foot a{color:var(--muted);margin-right:18px}

/* ---------- shimmer skeleton ---------- */
.shimmer{background:linear-gradient(90deg,#eceae1 25%,#f4f2ea 50%,#eceae1 75%);
  background-size:200% 100%;animation:sh 1.3s infinite;border-radius:3px}
@keyframes sh{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media(max-width:760px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .cat.lg{grid-column:span 2;grid-row:span 1}
  .metrics{gap:28px}
}