/* ============================================================
   YonksTEAM Design System v2.0 — charcoal + warm copper · Inter
   Polish pass 2026-09-03 (W36 D4) — distinct from WeOwn Academy (navy + gold)
   Tiers: heading 40px / subheading 22px / body 16px · cards 12px radius · pills 999px
   ============================================================ */
:root{
  --bg-primary:#15181E;
  --bg-card:#1C1F26;
  --card-bg:#111827;
  --card-border:#1E293B;
  --accent:#C97B45;
  --accent-hover:#B56A38;
  --accent-soft:#E0955C;
  --text-primary:#FFFFFF;
  --text-secondary:#94A3B8;
  --border-subtle:#2A2D35;
  --border-accent:#C97B45;
  --radius-card:12px;
  --radius-pill:999px;
  --max-width:1200px;
  --section-pad:80px;
  --section-pad-mobile:48px;
  --font-heading:40px;
  --font-heading-mobile:28px;
  --font-subheading:22px;
  --font-body:16px;
  --yk-ink:#EDEFF3;
  --yk-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
html{scroll-behavior:smooth}
body{
  background:var(--bg-primary);
  color:var(--text-secondary);
  font-family:var(--yk-font);
  font-size:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
::selection{background:var(--accent);color:#1A120B}
a{color:var(--accent-soft);text-decoration:none;transition:color .15s ease}
a:hover{color:var(--accent)}
img{max-width:100%;height:auto}

/* ---------- typography (3-tier) ---------- */
h1.brxe-heading{
  font-size:var(--font-heading);
  line-height:1.12;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--text-primary);
}
h2.brxe-heading{
  font-size:var(--font-heading);
  line-height:1.2;
  letter-spacing:-.02em;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 24px;
}
/* hero sub-line: the h2 under the hero h1 stays at subheading tier */
.yk-hero h2.brxe-heading{
  font-size:var(--font-subheading);
  line-height:1.4;
  letter-spacing:-.01em;
  font-weight:600;
  color:var(--text-primary);
  margin:0;
}
.yk-eyebrow,.yk-kicker{
  color:var(--accent);
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:600;
  font-size:1.375rem;
  margin:0 0 16px;
}
.yk-badge{
  display:inline-flex;
  align-items:center;
  padding:8px 20px;
  border:1px solid var(--border-accent);
  border-radius:var(--radius-pill);
  background:rgba(201,123,69,.08);
  font-size:1.375rem;
  font-weight:600;
  letter-spacing:.12em;
  margin-bottom:16px;
}
.yk-lede{
  font-size:18px;
  color:var(--text-secondary);
  line-height:1.65;
  max-width:900px;
  text-align:center;
  margin:0;
}
.yk-sub{color:var(--text-secondary);font-size:var(--font-body);text-align:center;margin:0}
.yk-body{
  color:var(--text-secondary);
  font-size:var(--font-body);
  line-height:1.6;
  max-width:900px;
  margin:0 auto;
}
.yk-card .yk-body{line-height:1.65}
.yk-h3{
  color:var(--text-primary);
  font-size:18px;
  font-weight:700;
  letter-spacing:-.01em;
  line-height:1.35;
  margin:0 0 8px;
}
.yk-role{color:var(--accent-soft);font-weight:600;font-size:.85rem;letter-spacing:.04em;margin:0 0 10px}
.yk-note{color:var(--text-secondary);font-size:.85rem;text-align:center;margin:0}
.yk-quote{
  font-size:18px;
  font-weight:500;
  color:var(--text-primary);
  border-left:3px solid var(--accent);
  padding-left:18px;
  max-width:720px;
  text-align:left;
  margin:0;
}
.yk-center{text-align:center !important}

/* ---------- layout ---------- */
.yk-grid{display:grid;gap:24px;width:100%;align-items:stretch}
.yk-grid-2{grid-template-columns:repeat(2,1fr)}
.yk-grid-3{grid-template-columns:repeat(3,1fr)}
.yk-grid-4{grid-template-columns:repeat(4,1fr)}
.yk-card{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  padding:32px;
  height:100%;
  overflow:hidden;
  position:relative;
}
.yk-card img{
  max-width:100%;
  height:auto;
  display:block;
}
.yk-grid > .yk-card{height:100%}
.yk-card-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
.yk-bio-card{max-width:900px;margin:0 auto}
.yk-bio-card .yk-body{font-size:var(--font-body)}

/* ---------- buttons (pills) ---------- */
.yk-btn{
  display:inline-block;
  background:var(--accent);
  color:#1A120B;
  font-weight:700;
  font-size:15px;
  letter-spacing:.02em;
  padding:14px 28px;
  border-radius:var(--radius-pill);
  border:1px solid var(--accent);
  transition:background .18s ease,color .18s ease,border-color .18s ease,transform .18s ease;
}
.yk-btn:hover{background:var(--accent-hover);border-color:var(--accent-hover);color:#1A120B;transform:translateY(-1px)}
.yk-btn-ghost{background:transparent;color:var(--text-primary);border-color:var(--border-subtle)}
.yk-btn-ghost:hover{background:rgba(201,123,69,.08);color:var(--accent);border-color:var(--accent)}
.yk-btn-sm{padding:11px 22px;font-size:14px}
.yk-cta-row{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:8px}

/* ---------- header (sticky + border) ---------- */
.yk-header{
  border-bottom:1px solid var(--border-subtle);
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(21,24,30,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.yk-header-inner{padding:14px 0}
.yk-logo{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.25;
  color:var(--text-primary);
  font-weight:800;
  font-size:2.25rem;
  letter-spacing:-.02em;
}
.yk-logo:hover{color:var(--text-primary)}
.yk-logo-name{color:var(--text-primary);font-weight:800;font-size:2.25rem;letter-spacing:-.02em}
.yk-logo-sub{font-size:1rem;font-weight:600;color:var(--accent);letter-spacing:.16em;text-transform:uppercase;margin-top:3px}
.yk-logo-lg{font-size:1.5rem}
.yk-nav{display:flex;gap:28px;align-items:center}
.yk-nav-link{color:var(--text-secondary);font-weight:600;font-size:1.5rem;letter-spacing:.01em}
.yk-nav-link:hover{color:var(--accent)}

/* ---------- footer ---------- */
.yk-footer{border-top:1px solid var(--border-subtle);background:#101318}
.yk-footer-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:32px;width:100%;max-width:1100px}
.yk-footer-tag{color:var(--text-secondary);font-size:1.5rem;line-height:1.6;max-width:440px;margin:8px 0 0}
.yk-footer-nav{display:flex;flex-direction:column;gap:10px;align-items:flex-end}
.yk-footer-nav a{color:var(--text-secondary);font-weight:600;font-size:1.5rem}
.yk-footer-nav a:hover{color:var(--accent)}
.yk-footer-copy{color:#6E7684;font-size:1rem;text-align:center;margin:20px auto 0;max-width:620px}

/* ---------- steps & lists ---------- */
.yk-step-n{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--accent);
  color:#FFFFFF;
  font-weight:800;
  font-size:1rem;
  margin:0 auto 14px;
}
.yk-card-center .yk-step-n{margin-bottom:14px}
.yk-steps{display:flex;flex-direction:column;gap:16px;width:100%;max-width:900px;margin:0 auto}
.yk-step-row{
  display:flex;
  gap:18px;
  align-items:flex-start;
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:var(--radius-card);
  padding:26px 28px;
}
.yk-step-row .yk-step-n{margin:2px 0 0;flex-shrink:0}
.yk-list{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:12px;text-align:left}
.yk-list li{display:flex;gap:10px;align-items:flex-start;color:var(--text-secondary);font-size:var(--font-body);line-height:1.6}
.yk-list-check li::before{content:"\2713";color:var(--accent);font-weight:800;flex-shrink:0}
.yk-list-x li::before{content:"\2717";color:#C0563F;font-weight:800;flex-shrink:0}

/* ---------- pricing ---------- */
.yk-price{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  padding:44px 32px;
}
.yk-price-feat{border-color:var(--accent);background:linear-gradient(180deg,#241B14,#111827)}
.yk-price-label{color:var(--accent-soft);text-transform:uppercase;letter-spacing:.14em;font-weight:700;font-size:.78rem;margin:0}
.yk-price-amt{color:var(--text-primary);font-size:2.75rem;font-weight:800;letter-spacing:-.03em;margin:0;line-height:1.1}
.yk-price .yk-body{text-align:center;max-width:none}

/* ---------- icons ---------- */
.yk-ic{font-size:1.7rem;line-height:1}

/* ---------- container width system (overrides Bricks 1100px base) ---------- */
.brxe-container{width:1200px;max-width:100%;margin-left:auto;margin-right:auto}
.yk-hero-inner{width:100%;max-width:900px;gap:24px;margin:0 auto}
.yk-narrow{width:100%;max-width:900px;margin:0 auto}
.yk-grid-wrap{width:1200px;max-width:100%;margin:0 auto}
.yk-contact-wrap{width:100%;max-width:760px;margin:0 auto}

/* ---------- section padding authority ----------
   Bricks emits per-template #brxe-* rules that collide across header/page/footer
   (ids reuse yk0001..). The last rule in cascade wins for every section, so
   enforce the design system here with !important. Mobile 48px via media query. */
section.brxe-section:not(.yk-header):not(.yk-footer){
  padding-top:80px !important;
  padding-bottom:80px !important;
}
.yk-header{padding-top:0 !important;padding-bottom:0 !important}
.yk-footer{padding-top:52px !important;padding-bottom:36px !important}

/* ---------- hero ---------- */
.yk-hero h1.brxe-heading{margin:8px 0 2px}
.yk-hero .yk-lede{margin-top:6px}

/* ---------- fluent forms (dark) ---------- */
.yk-form-wrap{width:100%}
.fluentform .ff-el-group{margin:0 0 16px}
.fluentform .ff-el-input--label label{color:var(--text-primary);font-weight:600;font-size:.9rem;margin-bottom:6px}
.fluentform .ff-el-form-control{
  background:var(--card-bg);
  border:1px solid var(--card-border);
  border-radius:10px;
  color:var(--yk-ink);
  padding:13px 16px;
  font-family:var(--yk-font);
  font-size:.95rem;
  width:100%;
}
.fluentform .ff-el-form-control:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(201,123,69,.18)}
.fluentform textarea.ff-el-form-control{min-height:130px;resize:vertical}
.fluentform .ff-btn-submit{
  background:var(--accent);
  color:#1A120B;
  border:none;
  border-radius:var(--radius-pill);
  padding:14px 34px;
  font-weight:700;
  font-size:15px;
  font-family:var(--yk-font);
  cursor:pointer;
  transition:background .18s ease;
}
.fluentform .ff-btn-submit:hover{background:var(--accent-hover)}
.fluentform .ff-el-is-error .ff-el-form-control{border-color:#C0563F}
.fluentform .error.text-danger{color:#D98A7A;font-size:1rem}
.ff-message-success{background:var(--card-bg);border:1px solid var(--accent);color:var(--text-primary);border-radius:10px;padding:14px 18px}

/* ---------- responsive (mobile breakpoint 768px) ---------- */
@media (max-width:768px){
  .brxe-section:not(.yk-header):not(.yk-footer){
    padding-top:var(--section-pad-mobile) !important;
    padding-bottom:var(--section-pad-mobile) !important;
  }
  h1.brxe-heading{font-size:var(--font-heading-mobile);line-height:1.15}
  h2.brxe-heading{font-size:var(--font-heading-mobile);line-height:1.15;margin-bottom:24px}
  .yk-hero h2.brxe-heading{font-size:20px;line-height:1.35;margin-bottom:0}
  .yk-grid{gap:20px}
  .yk-grid-2,.yk-grid-3,.yk-grid-4{grid-template-columns:1fr}
  .yk-header-inner{flex-direction:column;gap:10px;padding:16px 0}
  .yk-header-inner .yk-btn{display:none}
  .yk-nav{flex-wrap:wrap;gap:12px 20px;justify-content:center}
  .yk-nav-link{font-size:.9rem}
  .yk-footer-grid{grid-template-columns:1fr}
  .yk-footer-nav{align-items:center}
  .yk-footer-copy{text-align:center}
  .yk-cta-row{flex-direction:column;align-items:stretch}
  .yk-cta-row .yk-btn{text-align:center}
  .yk-lede{font-size:17px}
  .yk-quote{font-size:17px}
  .yk-card{padding:26px 22px}
  .yk-price{padding:32px 24px}
  .yk-steps{max-width:100%}
  .yk-bio-card{max-width:100%}
}

/* ---------- headshots (v2.3.0) ---------- */
.yk-headshot{
  width:120px;
  height:120px;
  border-radius:50%;
  object-fit:cover;
  border:3px solid var(--accent);
  margin:0 auto 16px;
  display:block;
}
.yk-headshot-lg{width:150px;height:150px  .yk-headshot{width:96px;height:96px}
  .yk-headshot-lg{width:120px;height:120px}
}