/*
Theme Name: SmartLaw
Theme URI: https://smartlaw.com.ua
Author: SmartLaw
Description: Тема для сайту адвоката Крістіни Струкової (Одеса). Темно-золота ідентичність, акцент на дзвінок і Telegram.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: smartlaw
Tags: dark, custom-colors, custom-logo, custom-menu, featured-images, translation-ready, threaded-comments, block-styles
*/

/* =========================================================
   0. TOKENS
========================================================= */
:root {
  --ink-900: #0b1017;
  --ink-850: #0d1420;
  --ink-800: #111823;
  --line-800: #1c2532;
  --line-700: #1e2733;
  --line-600: #2b3644;
  --line-500: #3a4757;
  --gold-500: #d8a747;
  --gold-hover: #f0cd86;
  --gold-700: #9a7b33;
  --text-100: #ffffff;
  --text-200: #e8e4dc;
  --text-300: #c7ccd4;
  --text-400: #b6bcc6;
  --text-500: #a4aab4;
  --text-600: #8b929c;
  --text-700: #5d6673;
  --cream-100: #f6f1e7;
  --cream-000: #ffffff;
  --cream-line: #e2d9c6;
  --cream-line-2: #efe7d8;
  --stripe-mono: #9a8b6c;
  --text-dark-900: #171b21;
  --text-dark-700: #3d434c;
  --text-dark-500: #5c5344;
  --text-dark-400: #7c705a;
  --error-500: #c9563f;

  --font-serif: 'Prata', Georgia, serif;
  --font-sans: 'Manrope', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --container-max: 1440px;
  --mobile-bar-h: 64px;
}

/* =========================================================
   1. RESET / BASE
========================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body {
  margin: 0;
  padding: 0;
  background: var(--ink-900);
  overflow-x: hidden;
}
body {
  font-family: var(--font-sans);
  color: var(--text-200);
  font-size: 15px;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--gold-500); text-decoration: none; transition: color 120ms ease-out, border-color 120ms ease-out, background-color 120ms ease-out; }
a:hover { color: var(--gold-hover); }
h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; color: var(--text-100); margin: 0; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; }
input, textarea, select { font-family: inherit; font-size: inherit; }

:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 2px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(1px,1px,1px,1px);
  white-space: nowrap;
}

.container {
  max-width: var(--container-max);
  margin: 0 auto;
  border-left: 1px solid var(--line-700);
  border-right: 1px solid var(--line-700);
  background: var(--ink-850);
  overflow: hidden;
}

.mono-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-500);
}
/* =========================================================
   1.5 SITE WRAP (front page only, root width cap)
========================================================= */
.site-wrap {
max-width: 1440px;
margin-inline: auto;
}
@media (min-width: 1441px) {
.site-wrap {
border-left: 1px solid var(--line-700);
border-right: 1px solid var(--line-700);
background: var(--ink-900);
}
}


/* =========================================================
   2. HEADER
========================================================= */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 40px;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-800);
  position: sticky;
  top: 0;
  z-index: 50;
}
.site-logo {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex: none;
}
.site-logo img { max-height: 34px; width: auto; }

.sl-logo {
  display: inline-flex;
  align-items: stretch;
  gap: 16px;
  line-height: 1;
  --sl-gold: var(--gold-500);
  --sl-name: var(--text-100);
}
.sl-logo__rule {
  width: 2px;
  flex: none;
  border-radius: 1px;
  background: linear-gradient(var(--sl-gold), rgba(216, 167, 71, .15));
}
.sl-logo__text { display: flex; flex-direction: column; gap: 7px; padding: 2px 0; }
.sl-logo__name {
  font-family: 'Cormorant Garamond', var(--font-serif), Georgia, serif;
  font-weight: 500;
  font-size: 34px;
  line-height: .95;
  letter-spacing: .06em;
  color: var(--sl-name);
  white-space: nowrap;
}
.sl-logo__desc {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--sl-gold);
  white-space: nowrap;
}
/* Светлый фон */
.sl-logo--light { --sl-gold: var(--gold-700); --sl-name: var(--text-dark-900); }
/* Монохром (футер, печать) */
.sl-logo--mono { --sl-gold: var(--text-200); --sl-name: var(--text-200); }
.sl-logo--mono .sl-logo__rule { background: var(--text-200); }
@media (max-width: 480px) {
  .sl-logo__name { font-size: 24px; }
  .sl-logo__desc { display: none; }
}

.main-navigation { display: flex; }
.main-navigation ul {
  display: flex;
  gap: 28px;
  font-size: 15px;
  color: var(--text-300);
}
.main-navigation a { color: inherit; }
.main-navigation a:hover, .main-navigation a:focus-visible { color: var(--text-100); }

.header-contacts { display: flex; align-items: center; gap: 12px; flex: none; }
.header-hours-phone { text-align: right; }
.header-hours { font-family: var(--font-mono); font-size: 11px; color: var(--text-600); letter-spacing: .08em; }
.header-phone { font-size: 19px; font-weight: 700; color: var(--text-100); letter-spacing: .01em; }
.header-phone:hover { color: var(--gold-hover); }
.header-msg-buttons { display: flex; gap: 8px; }
.msg-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600;
  transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}
.msg-btn.outline { border: 1px solid var(--gold-500); color: var(--gold-500); }
.msg-btn.outline:hover { background: var(--gold-500); color: var(--ink-900); }
.msg-btn.solid { background: var(--gold-500); color: var(--ink-900); border: 1px solid var(--gold-500); }
.msg-btn.solid:hover { background: var(--gold-hover); border-color: var(--gold-hover); }
.msg-btn svg { width: 18px; height: 18px; fill: currentColor; }

.menu-toggle {
  display: none;
  flex: none;
  width: 44px; height: 44px;
  border: 1px solid var(--line-600);
  background: transparent;
  color: var(--text-200);
  align-items: center;
  justify-content: center;
}
.menu-toggle svg { width: 20px; height: 20px; }
.menu-toggle[aria-expanded="true"] { border-color: var(--gold-500); color: var(--gold-500); }

.mobile-menu {
  display: none;
  position: sticky;
  top: 72px;
  z-index: 49;
  background: var(--ink-900);
  border-bottom: 1px solid var(--line-800);
  padding: 8px 20px 20px;
}
.mobile-menu:not([hidden]) { display: block; }
.mobile-menu ul { display: flex; flex-direction: column; gap: 2px; }
.mobile-menu a {
  display: block;
  padding: 14px 4px;
  font-size: 17px;
  color: var(--text-200);
  border-bottom: 1px solid var(--line-800);
}
.mobile-menu a:hover { color: var(--gold-500); }

@media (min-width: 900px) {
  .mobile-menu { display: none !important; }
}

/* =========================================================
   3. HERO
========================================================= */
.hero {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 560px;
}
.hero-content { padding: 64px 48px 56px; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line-600);
  padding: 7px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--gold-500);
  text-transform: uppercase;
}
.hero-title {
  font-size: 60px;
  line-height: 1.08;
  margin-top: 26px;
  max-width: 15em;
  text-wrap: balance;
}
.hero-lead {
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--text-400);
  margin-top: 22px;
  max-width: 26em;
  text-wrap: pretty;
}
.hero-actions { display: flex; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  border: 1px solid transparent;
  text-align: center;
  justify-content: center;
}
.btn-primary {
  background: var(--gold-500);
  color: var(--ink-900);
  padding: 18px 30px;
  font-weight: 700;
}
.btn-primary:hover { background: var(--gold-hover); color: var(--ink-900); }
.btn-secondary {
  border: 1px solid var(--line-500);
  color: var(--text-200);
  padding: 18px 26px;
  font-weight: 600;
}
.btn-secondary:hover { border-color: var(--gold-500); color: var(--text-100); }

.hero-actions .btn-primary { padding: 14px 26px; min-height: 68px; }
.hero-actions .btn-secondary { padding: 14px 24px; min-height: 68px; }

.hero-metrics {
  display: flex;
  gap: 34px;
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--line-800);
  flex-wrap: wrap;
}
.hero-metric .num { font-family: var(--font-serif); font-size: 30px; color: var(--gold-500); }
.hero-metric .label { font-size: 13px; color: var(--text-600); margin-top: 4px; }

.hero-media {
  position: relative;
  background: repeating-linear-gradient(135deg, var(--line-600) 0 10px, var(--ink-900) 10px 20px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 28px;
  min-height: 320px;
  overflow: hidden;
}
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-media .placeholder-caption {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono); font-size: 12px; color: var(--text-700);
  letter-spacing: .06em; text-align: center; line-height: 1.7;
}
.hero-price-card {
  position: relative;
  z-index: 2;
  background: var(--ink-900);
  border: 1px solid var(--line-600);
  padding: 18px 22px;
  max-width: 340px;
}
.hero-price-card .mono-label { display: block; }
.hero-price-card p { font-size: 16px; line-height: 1.5; color: var(--text-200); margin-top: 8px; }

/* =========================================================
   4. PRACTICES
========================================================= */
.practices-section { padding: 64px 48px; background: var(--ink-900); border-top: 1px solid var(--line-800); }
.section-heading-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.section-heading-row h2 { font-size: 36px; }
.section-heading-row .hint { font-size: 15px; color: var(--text-600); }
.section-heading-row .hint a { border-bottom: 1px solid var(--gold-500); }

.practices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}
.practice-card {
  background: var(--ink-800);
  border: 1px solid var(--line-700);
  border-top: 3px solid var(--gold-500);
  padding: 30px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: border-color 120ms ease-out;
}
.practice-card:hover { border-color: var(--line-600); border-top-color: var(--gold-500); }
.practice-card h3 { font-size: 25px; line-height: 1.2; }
.practice-card .desc { font-size: 15px; line-height: 1.6; color: var(--text-500); text-wrap: pretty; }
.practice-points { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; font-size: 14px; color: var(--text-300); }
.practice-points li { display: flex; gap: 10px; }
.practice-points li::before { content: "\2014"; color: var(--gold-500); }
.practice-card .cta { margin-top: auto; padding-top: 18px; font-size: 15px; font-weight: 700; color: var(--gold-500); }

.practices-secondary { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.practice-chip {
  border: 1px solid var(--line-700);
  background: var(--ink-850);
  padding: 14px 18px;
  font-size: 15px;
  color: var(--text-300);
  transition: border-color 120ms ease-out, color 120ms ease-out;
}
.practice-chip:hover { border-color: var(--gold-500); color: var(--text-100); }

/* =========================================================
   5. ADVOCATES + RESULTS (cream)
========================================================= */
.cream-section { padding: 64px 48px; background: var(--cream-100); color: var(--text-dark-900); }
.cream-section .mono-label { color: var(--gold-700); }
.cream-section h2 { color: var(--text-dark-900); font-size: 38px; margin-top: 14px; }

.people-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
  margin-top: 32px;
  align-items: start;
}
.advocate-card {
  background: var(--cream-000);
  border: 1px solid var(--cream-line);
  display: grid;
  grid-template-columns: 260px 1fr;
}
.advocate-photo {
  position: relative;
  background: repeating-linear-gradient(135deg, #ece4d4 0 10px, #e4dac6 10px 20px);
  display: flex; align-items: center; justify-content: center;
  padding: 12px; min-height: 340px;
  overflow: hidden;
}
.advocate-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.advocate-photo .placeholder-caption {
  position: relative; z-index: 1;
  font-family: var(--font-mono); font-size: 11px; color: var(--stripe-mono);
  text-align: center; line-height: 1.6;
}
.advocate-info { padding: 30px 28px; }
.advocate-info .mono-label { color: var(--gold-700); }
.advocate-info .name { font-family: var(--font-serif); font-size: 32px; color: var(--text-dark-900); margin-top: 8px; }
.advocate-info .meta { font-size: 14px; color: var(--text-dark-400); margin-top: 8px; font-family: var(--font-mono); }
.advocate-info .bio { font-size: 17px; line-height: 1.6; color: var(--text-dark-700); margin-top: 16px; text-wrap: pretty; }
.tag-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 18px; }
.tag-chip { background: var(--cream-100); border: 1px solid var(--cream-line); padding: 6px 10px; font-size: 13px; color: var(--text-dark-500); }
.advocate-info .direct-link { margin-top: 22px; font-size: 16px; font-weight: 700; color: var(--gold-700); display: inline-block; }

.assistant-card { background: var(--cream-000); border: 1px solid var(--cream-line); display: grid; grid-template-columns: 170px 1fr; }
.assistant-photo {
  position: relative;
  background: repeating-linear-gradient(135deg, #ece4d4 0 8px, #e4dac6 8px 16px);
  min-height: 340px;
  overflow: hidden;
}
.assistant-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.assistant-info { padding: 28px 24px; }
.assistant-info .mono-label { color: var(--gold-700); }
.assistant-info .name { font-family: var(--font-serif); font-size: 23px; color: var(--text-dark-900); margin-top: 8px; line-height: 1.15; }
.assistant-info .direct-link { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--gold-700); display: inline-block; }
.assistant-card .bio { font-size: 16px; line-height: 1.6; color: var(--text-dark-700); margin-top: 16px; text-wrap: pretty; }
.assistant-hours { border-top: 1px solid var(--cream-line-2); margin-top: 18px; padding-top: 16px; font-size: 15px; color: var(--text-dark-500); line-height: 1.7; }

.results-block { margin-top: 56px; }
.results-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.results-head h2 { font-size: 34px; margin-top: 12px; }
.results-disclaimer { font-size: 14px; color: var(--text-dark-400); max-width: 30em; line-height: 1.6; }
.results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 26px; }
.result-card {
  background: var(--cream-000);
  border: 1px solid var(--cream-line);
  border-left: 3px solid var(--gold-700);
  padding: 26px 24px;
}
.result-card .mono-label { color: var(--gold-700); }
.result-card .title { font-family: var(--font-serif); font-size: 22px; color: var(--text-dark-900); margin-top: 12px; line-height: 1.25; }
.result-card .text { font-size: 15px; line-height: 1.6; color: var(--text-dark-700); margin-top: 12px; }
.result-card .meta { font-size: 13px; color: var(--text-dark-400); margin-top: 14px; font-family: var(--font-mono); }

/* =========================================================
   6. PROCESS
========================================================= */
.process-section { padding: 64px 48px; background: var(--ink-900); border-top: 1px solid var(--line-800); }
.process-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 56px; align-items: start; }

.process-intro { display: flex; flex-direction: column; gap: 20px; }
.process-intro h2 { font-size: 40px; line-height: 1.06; text-wrap: balance; }
.process-intro > p { font-size: 17px; line-height: 1.65; color: var(--text-500); max-width: 24em; text-wrap: pretty; }

.process-price-card {
  max-width: 360px;
  margin-top: 44px;
}
.process-price-card .mono-label { display: block; }
.process-price-card p { font-size: 16px; line-height: 1.6; color: var(--text-200); margin-top: 10px; text-wrap: pretty; }
.process-price-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.process-price-actions .btn { width: auto; }
.process-price-actions .btn-primary { padding: 15px 28px; font-size: 16px; }
.process-price-actions .btn-secondary { padding: 14px 20px; font-size: 16px; }

.process-steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.process-step {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 28px;
  align-items: start;
  border-left: 1px solid var(--line-600);
  padding: 0 0 30px 34px;
  position: relative;
}
.process-step:last-child { padding-bottom: 6px; }
.process-step .step-marker {
  position: absolute; left: -5px; top: 6px;
  width: 9px; height: 9px; background: var(--gold-500);
}
.process-step .step-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-600);
  padding-top: 6px;
  line-height: 1.7;
}
.process-step h3 { font-size: 26px; line-height: 1.2; }
.process-step .text { font-size: 16px; line-height: 1.65; color: var(--text-500); margin-top: 10px; max-width: 34em; text-wrap: pretty; }

/* =========================================================
   7. BLOG TEASER (front page)
========================================================= */
.blog-teaser { padding: 56px 48px; background: var(--ink-850); border-top: 1px solid var(--line-800); }
.blog-teaser-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: 40px; align-items: start; }
.blog-teaser-intro h2 { font-size: 32px; margin-top: 14px; line-height: 1.2; }
.blog-teaser-intro p { font-size: 16px; line-height: 1.6; color: var(--text-500); margin-top: 14px; text-wrap: pretty; }
.blog-teaser-intro .all-link { margin-top: 20px; font-size: 15px; font-weight: 700; color: var(--gold-500); display: inline-block; }
.blog-teaser-list { display: flex; flex-direction: column; gap: 12px; }
.blog-teaser-item {
  display: grid; grid-template-columns: 120px 1fr; gap: 18px;
  border-top: 1px solid var(--line-700); padding-top: 16px; align-items: start;
}
.blog-teaser-item .meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-600); line-height: 1.7; }
.blog-teaser-item h3 { font-size: 21px; line-height: 1.3; }
.blog-teaser-item h3 a { color: var(--text-100); }
.blog-teaser-item h3 a:hover { color: var(--gold-500); }
.blog-teaser-item .excerpt { font-size: 15px; line-height: 1.6; color: var(--text-500); margin-top: 6px; }

/* =========================================================
   8. CONTACT + FORM
========================================================= */
.contact-section { display: grid; grid-template-columns: 1fr 1fr; background: var(--ink-800); border-top: 1px solid var(--line-800); }
.contact-info { padding: 60px 48px; }
.contact-info h2 { font-size: 36px; max-width: 18em; }
.contact-info .lead { font-size: 17px; line-height: 1.6; color: var(--text-500); margin-top: 16px; max-width: 26em; }
.contact-phone-big { display: block; font-family: var(--font-serif); font-size: 40px; color: var(--gold-500); margin-top: 28px; }
.contact-details { font-size: 16px; color: var(--text-300); margin-top: 20px; line-height: 1.8; }
.contact-msg-buttons { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.contact-msg-buttons a { border: 1px solid var(--line-500); padding: 14px 20px; font-size: 15px; color: var(--text-200); }
.contact-msg-buttons a:hover { border-color: var(--gold-500); color: var(--gold-500); }

.contact-form-wrap { padding: 60px 48px; background: var(--ink-850); border-left: 1px solid var(--line-800); }
.contact-form-wrap .mono-label { color: var(--text-600); letter-spacing: .14em; }
.contact-form { display: flex; flex-direction: column; gap: 16px; margin-top: 22px; }
.form-field label { display: block; font-size: 14px; color: var(--text-600); margin-bottom: 6px; }
.form-field input[type=text],
.form-field input[type=tel],
.form-field input[type=email],
.form-field textarea {
  width: 100%;
  border: 1px solid var(--line-600);
  background: var(--ink-900);
  color: var(--text-200);
  padding: 15px 16px;
  font-size: 16px;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--text-700); }
.form-field textarea { height: 96px; resize: vertical; }
.form-field.has-error input, .form-field.has-error textarea { border-color: var(--error-500); }
.field-error { font-size: 13px; color: var(--error-500); margin-top: 6px; }

.topic-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topic-chip { position: relative; }
.topic-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.topic-chip span {
  display: inline-block;
  border: 1px solid var(--line-600); color: var(--text-300);
  padding: 10px 14px; font-size: 14px;
}
.topic-chip input:checked + span { border-color: var(--gold-500); color: var(--gold-500); }
.topic-chip input:focus-visible + span { outline: 2px solid var(--gold-500); outline-offset: 2px; }

.form-submit {
  background: var(--gold-500); color: var(--ink-900);
  padding: 18px; text-align: center; font-size: 17px; font-weight: 700;
  width: 100%; border: none;
}
.form-submit:hover { background: var(--gold-hover); }
.form-submit[disabled] { opacity: .7; cursor: default; }
.form-privacy { font-size: 13px; line-height: 1.6; color: var(--text-600); }
.form-success { font-size: 16px; line-height: 1.6; color: var(--text-200); }
.form-success .phone { color: var(--gold-500); font-weight: 700; }
.form-error-net { color: var(--error-500); font-size: 14px; margin-top: 10px; }

/* =========================================================
   9. MOBILE STICKY BAR — disabled site-wide per request.
   Markup (.mobile-cta-bar, output outside .site-wrap) is left in the
   template but stays display:none at all widths; see responsive
   section below where the old mobile-enable + padding-bottom
   compensation were removed.
========================================================= */
.mobile-cta-bar { display: none; }

/* =========================================================
   10. FOOTER
========================================================= */
.site-footer {
  padding: 32px 48px;
  background: var(--ink-900);
  border-top: 1px solid var(--line-800);
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
  font-size: 13px; color: var(--text-600);
}
.site-footer a { color: var(--text-600); }
.site-footer a:hover { color: var(--gold-500); }
.footer-legal { max-width: 40em; }

.sl-legalbar { flex: 1 1 100%; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line-800); }
.sl-legal { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; font-size: 13px; color: var(--text-600); }
.sl-legal__copy { white-space: nowrap; }
.sl-legal__links { display: flex; align-items: center; flex-wrap: wrap; justify-content: flex-end; gap: 8px 13px; }
.sl-legal__links a { color: var(--text-600); text-decoration: none; transition: color .15s; }
.sl-legal__links a:hover, .sl-legal__links a:focus-visible { color: var(--gold-500); }
.sl-legal__sep { color: var(--line-600); }
@media (max-width: 820px) {
  .sl-legal { flex-direction: column; align-items: flex-start; gap: 12px; }
  .sl-legal__links { justify-content: flex-start; }
  .sl-legal__copy { white-space: normal; }
}

/* =========================================================
   11. BLOG TEMPLATES (index/single/archive/search/404)
========================================================= */
.page-hero {
  padding: 56px 48px 40px;
  background: var(--ink-900);
  border-top: 1px solid var(--line-800);
}
.page-hero .mono-label { display: block; }
.page-hero h1 { font-size: 44px; margin-top: 14px; }
.page-hero .desc { font-size: 17px; color: var(--text-500); margin-top: 14px; max-width: 40em; }

.breadcrumbs { font-family: var(--font-mono); font-size: 12px; color: var(--text-600); letter-spacing: .05em; margin-bottom: 18px; }
.breadcrumbs a { color: var(--text-600); }
.breadcrumbs a:hover { color: var(--gold-500); }

.content-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  padding: 56px 48px;
  background: var(--ink-850);
  align-items: start;
}
.content-layout.no-sidebar { grid-template-columns: 1fr; max-width: 780px; margin: 0 auto; }

.post-list { display: flex; flex-direction: column; gap: 32px; }
.post-card {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 24px;
  border-top: 1px solid var(--line-700);
  padding-top: 24px;
  align-items: start;
}
.post-card .thumb { background: repeating-linear-gradient(135deg, var(--line-600) 0 10px, var(--ink-900) 10px 20px); min-height: 140px; overflow: hidden; }
.post-card .thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-card .meta { font-family: var(--font-mono); font-size: 11px; color: var(--text-600); letter-spacing: .08em; text-transform: uppercase; }
.post-card h2 { font-size: 24px; margin-top: 10px; line-height: 1.25; }
.post-card h2 a { color: var(--text-100); }
.post-card h2 a:hover { color: var(--gold-500); }
.post-card .excerpt { font-size: 15px; line-height: 1.6; color: var(--text-500); margin-top: 10px; }
.post-card .read-more { margin-top: 12px; font-size: 14px; font-weight: 700; color: var(--gold-500); display: inline-block; }

.pagination { display: flex; gap: 8px; margin-top: 40px; flex-wrap: wrap; }
.pagination a, .pagination span {
  border: 1px solid var(--line-600); color: var(--text-300);
  padding: 10px 16px; font-size: 14px; font-family: var(--font-mono);
}
.pagination .current { border-color: var(--gold-500); color: var(--gold-500); }
.pagination a:hover { border-color: var(--gold-500); color: var(--gold-500); }

.single-article { max-width: 780px; }
.single-article .post-meta { font-family: var(--font-mono); font-size: 12px; color: var(--text-600); letter-spacing: .06em; text-transform: uppercase; display: flex; gap: 16px; flex-wrap: wrap; }
.single-article h1 { font-size: 42px; margin-top: 16px; line-height: 1.15; }
.single-article .thumb { margin-top: 28px; background: repeating-linear-gradient(135deg, var(--line-600) 0 10px, var(--ink-900) 10px 20px); min-height: 260px; overflow: hidden; }
.single-article .thumb img { width: 100%; height: auto; object-fit: cover; }
.single-article .entry-content { font-size: 17px; line-height: 1.75; color: var(--text-200); margin-top: 32px; }
.single-article .entry-content > * + * { margin-top: 20px; }
.single-article .entry-content h2 { font-size: 28px; margin-top: 40px; }
.single-article .entry-content h3 { font-size: 22px; margin-top: 32px; }
.single-article .entry-content a { border-bottom: 1px solid var(--gold-500); }
.single-article .entry-content ul, .single-article .entry-content ol { list-style: revert; padding-left: 1.4em; }
.single-article .entry-content blockquote { border-left: 3px solid var(--gold-500); padding-left: 20px; color: var(--text-400); font-style: italic; }
.single-article .entry-content img { margin-top: 20px; }

.practice-link-cta {
  margin-top: 40px; padding: 26px 24px;
  background: var(--ink-800); border: 1px solid var(--line-700); border-left: 3px solid var(--gold-500);
}
.practice-link-cta .mono-label { display: block; margin-bottom: 8px; }
.practice-link-cta a { font-size: 17px; font-weight: 700; }

.author-box { margin-top: 48px; padding: 26px 24px; background: var(--ink-800); border: 1px solid var(--line-700); display: flex; gap: 18px; align-items: flex-start; }
.author-box .avatar { width: 64px; height: 64px; flex: none; overflow: hidden; background: repeating-linear-gradient(135deg, var(--line-600) 0 8px, var(--ink-900) 8px 16px); }
.author-box .avatar img { width: 100%; height: 100%; object-fit: cover; }
.author-box .name { font-family: var(--font-serif); font-size: 20px; color: var(--text-100); }
.author-box .desc { font-size: 14px; color: var(--text-500); margin-top: 6px; }

.tag-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 24px; }
.tag-links a { border: 1px solid var(--line-700); padding: 8px 14px; font-size: 13px; color: var(--text-300); }
.tag-links a:hover { border-color: var(--gold-500); color: var(--gold-500); }

.widget { margin-bottom: 32px; }
.widget-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold-500); margin-bottom: 14px; }
.widget ul { display: flex; flex-direction: column; gap: 10px; }
.widget a { font-size: 15px; color: var(--text-300); }
.widget a:hover { color: var(--text-100); }
.widget-cta { background: var(--ink-800); border: 1px solid var(--line-700); border-top: 3px solid var(--gold-500); padding: 24px; }
.widget-cta p { font-size: 15px; color: var(--text-400); margin-bottom: 14px; }

.error-404-wrap { text-align: center; padding: 96px 48px; }
.error-404-wrap .code { font-family: var(--font-serif); font-size: 100px; color: var(--gold-500); line-height: 1; }
.error-404-wrap h1 { font-size: 32px; margin-top: 16px; }
.error-404-wrap p { font-size: 16px; color: var(--text-500); margin-top: 12px; }
.error-404-wrap .btn { margin-top: 28px; }

.search-form { display: flex; gap: 10px; max-width: 480px; }
.search-form input[type=search] {
  flex: 1; border: 1px solid var(--line-600); background: var(--ink-900); color: var(--text-200); padding: 14px 16px; font-size: 15px;
}
.search-form button { background: var(--gold-500); color: var(--ink-900); border: none; padding: 14px 22px; font-weight: 700; }
.search-form button:hover { background: var(--gold-hover); }

/* comments */
.comments-area { margin-top: 56px; }
.comments-title { font-size: 26px; }
.comment-list { display: flex; flex-direction: column; gap: 20px; margin-top: 24px; }
.comment-body { border-top: 1px solid var(--line-700); padding-top: 20px; }
.comment-author { font-weight: 700; color: var(--text-100); font-size: 15px; }
.comment-metadata { font-size: 12px; color: var(--text-600); margin-top: 2px; }
.comment-content { font-size: 15px; color: var(--text-400); margin-top: 10px; line-height: 1.6; }
.comment-reply-link { font-size: 13px; color: var(--gold-500); margin-top: 8px; display: inline-block; }
.children { margin-left: 32px; margin-top: 20px; display: flex; flex-direction: column; gap: 20px; }
.comment-respond { margin-top: 40px; }
.comment-respond .comment-reply-title { font-size: 22px; }
.comment-form p { margin-top: 14px; }
.comment-form label { display: block; font-size: 14px; color: var(--text-600); margin-bottom: 6px; }
.comment-form input[type=text], .comment-form input[type=email], .comment-form input[type=url], .comment-form textarea {
  width: 100%; border: 1px solid var(--line-600); background: var(--ink-900); color: var(--text-200); padding: 13px 14px; font-size: 15px;
}
.comment-form textarea { min-height: 120px; }
.comment-form .form-submit input {
  background: var(--gold-500); color: var(--ink-900); border: none; padding: 14px 26px; font-weight: 700; font-size: 15px;
}

/* 12. BLOG ARTICLE -- design-exact (single.php, is_singular('post')). Scoped to .ba-article; does not touch .single-article/.page-hero/.content-layout used by archive/search/home/page templates. */
.ba-article { --ba-bg: #0e1220; --ba-bg-alt: #171c2a; --ba-border: rgba(255,255,255,.08); --ba-border-2: rgba(255,255,255,.1); --ba-heading: #f4f1ea; --ba-body: #c9c9ce; --ba-muted: #8b929c; --ba-muted-2: #8b8f9c; --ba-gold: #d8a747; --ba-gold-hover: #e0be6f; --ba-disclaimer: #767b87; --ba-font-serif: 'Playfair Display', Georgia, serif; --ba-font-sans: 'Inter', Helvetica, Arial, sans-serif; background: var(--ba-bg); }
.ba-main { max-width: 820px; margin: 0 auto; padding: 56px 24px 0; font-family: var(--ba-font-sans); }
.ba-back { display: inline-flex; align-items: center; gap: 8px; color: var(--ba-muted); font-size: 14px; margin-bottom: 28px; font-family: var(--ba-font-sans); }
.ba-back:hover { color: var(--ba-gold-hover); }
.ba-back__arrow { display: inline-block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 8px solid currentColor; }
.ba-category { font-family: var(--ba-font-sans); font-size: 11px; letter-spacing: 1.5px; color: var(--ba-gold); font-weight: 600; text-transform: uppercase; margin-bottom: 18px; }
.ba-title { font-family: var(--ba-font-serif); font-size: 44px; line-height: 1.15; color: var(--ba-heading); margin: 0 0 20px; font-weight: 700; }
.ba-meta { display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--ba-muted-2); margin-bottom: 32px; font-family: var(--ba-font-sans); }
.ba-dot { width: 4px; height: 4px; border-radius: 50%; background: var(--ba-muted-2); flex: none; }
.ba-thumb { width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; margin-bottom: 40px; background: repeating-linear-gradient(135deg, #141c28 0 10px, #101823 10px 20px); }
.ba-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba-content { font-family: var(--ba-font-sans); font-size: 17px; line-height: 1.8; color: var(--ba-body); }
.ba-content > * + * { margin-top: 24px; }
.ba-content p { margin: 0; }
.ba-content h2 { font-family: var(--ba-font-serif); font-size: 26px; color: var(--ba-heading); font-weight: 600; margin: 44px 0 18px; }
.ba-content h2:first-child { margin-top: 0; }
.ba-content h3 { font-family: var(--ba-font-serif); font-size: 22px; color: var(--ba-heading); font-weight: 600; margin: 36px 0 16px; }
.ba-content strong { color: var(--ba-heading); }
.ba-content a { color: var(--ba-gold); border-bottom: 1px solid var(--ba-gold); }
.ba-content a:hover { color: var(--ba-gold-hover); border-color: var(--ba-gold-hover); }
.ba-content ul, .ba-content ol { margin: 0; padding-left: 20px; color: var(--ba-body); display: flex; flex-direction: column; gap: 10px; list-style: revert; }
.ba-content blockquote { background: var(--ba-bg-alt); border-left: 3px solid var(--ba-gold); border-radius: 4px; padding: 18px 22px; margin: 0; font-style: normal; color: #d8dbe0; font-size: 15px; }
.ba-content img { border-radius: 8px; }
.ba-content p.disclaimer, .ba-content .disclaimer { font-size: 14px; line-height: 1.6; color: var(--ba-disclaimer); font-style: italic; border-top: 1px solid rgba(255,255,255,.08); padding-top: 20px; }
.ba-tags { display: flex; align-items: center; gap: 8px; margin-top: 48px; flex-wrap: wrap; font-family: var(--ba-font-sans); }
.ba-tags__label { font-size: 13px; color: var(--ba-muted-2); }
.ba-tags a { font-size: 13px; background: var(--ba-bg-alt); border: 1px solid var(--ba-border-2); border-radius: 20px; padding: 6px 14px; color: var(--ba-body); }
.ba-tags a:hover { color: var(--ba-gold); border-color: var(--ba-gold); }
.ba-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 40px 0 64px; }
.ba-nav__card { background: var(--ba-bg-alt); border: 1px solid var(--ba-border); border-radius: 10px; padding: 22px 24px; display: flex; flex-direction: column; gap: 10px; font-family: var(--ba-font-sans); }
.ba-nav__next { text-align: right; align-items: flex-end; }
.ba-nav__label { display: flex; align-items: center; gap: 8px; color: var(--ba-muted); font-size: 12px; letter-spacing: .05em; text-transform: uppercase; }
.ba-nav__title { color: var(--ba-heading); font-size: 16px; font-weight: 600; line-height: 1.35; }
.ba-arrow { display: inline-block; width: 0; height: 0; border-top: 4px solid transparent; border-bottom: 4px solid transparent; flex: none; }
.ba-arrow--left { border-right: 7px solid var(--ba-muted); }
.ba-arrow--right { border-left: 7px solid var(--ba-muted); }
.ba-cta { max-width: 1200px; margin: 0 auto 80px; padding: 0 24px; font-family: var(--ba-font-sans); }
.ba-cta__inner { background: var(--ba-bg-alt); border: 1px solid var(--ba-border); border-radius: 10px; padding: 36px 44px; display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.ba-cta__inner h3 { font-family: var(--ba-font-serif); font-size: 24px; color: var(--ba-heading); margin: 0 0 8px; font-weight: 600; }
.ba-cta__inner p { margin: 0; color: var(--ba-muted-2); font-size: 15px; }
.ba-cta__buttons { display: flex; gap: 14px; flex-wrap: wrap; }
.ba-cta__call { background: var(--ba-gold); color: var(--ba-bg); font-weight: 600; font-size: 14px; padding: 14px 24px; border-radius: 6px; white-space: nowrap; }
.ba-cta__call:hover { background: var(--ba-gold-hover); color: var(--ba-bg); }
.ba-cta__tg { border: 1px solid rgba(255,255,255,.25); color: var(--ba-heading); font-weight: 600; font-size: 14px; padding: 14px 24px; border-radius: 6px; white-space: nowrap; }
.ba-cta__tg:hover { border-color: var(--ba-gold); color: var(--ba-gold); }
.ba-article .comments-area { max-width: 820px; margin-left: auto; margin-right: auto; padding: 0 24px 56px; font-family: var(--ba-font-sans); }
@media (max-width: 680px) { .ba-nav { grid-template-columns: 1fr; } .ba-nav__next { text-align: left; align-items: flex-start; } .ba-title { font-size: 32px; } .ba-cta__inner { flex-direction: column; align-items: flex-start; } }

/* =========================================================
   12. RESPONSIVE
========================================================= */
@media (max-width: 1199px) {
  .hero { grid-template-columns: 1fr; }
  .hero-media { min-height: 320px; order: -1; }
  .practices-grid { grid-template-columns: repeat(2, 1fr); }
  .results-grid { grid-template-columns: repeat(2, 1fr); }
  .process-layout { grid-template-columns: 1fr; gap: 32px; }
  .process-intro > p { max-width: 34em; }
  .process-price-card {
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
  }
  .process-price-text { max-width: 34em; }
  .process-price-actions { margin-top: 0; }
  .blog-teaser-grid { grid-template-columns: 1fr; }
  .contact-section { grid-template-columns: 1fr; }
  .contact-form-wrap { border-left: none; border-top: 1px solid var(--line-800); }
  .people-grid { grid-template-columns: 1fr; }
  .advocate-card { grid-template-columns: 200px 1fr; }
  .content-layout { grid-template-columns: 1fr; }
}

@media (max-width: 899px) {
  .main-navigation { display: none; }
  .menu-toggle { display: flex; }
  .site-header { padding: 14px 20px; }
  .header-hours { display: none; }
  .header-phone { font-size: 17px; }

  .hero-content, .practices-section, .process-section, .cream-section,
  .blog-teaser, .contact-info, .contact-form-wrap, .page-hero, .content-layout,
  .site-footer {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .practices-section, .process-section, .cream-section { padding-top: 40px; padding-bottom: 40px; }
  .hero-content { padding-top: 40px; padding-bottom: 40px; }
  .hero-title { font-size: 38px; }
  .hero-lead { font-size: 17px; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; }
  .hero-price-card { max-width: 100%; }
  .hero-media { align-items: center; position: static; padding: 24px 20px; }
  .hero-price-card { position: static; margin-top: 16px; }

  .practices-grid, .results-grid { grid-template-columns: 1fr; }
  .process-price-card { flex-direction: column; align-items: stretch; }
  .process-price-actions { flex-direction: column; }
  .process-price-actions .btn { width: 100%; }
  .process-step { grid-template-columns: 1fr; padding-left: 20px; }
  .process-step .step-meta { padding-top: 0; }
  .advocate-card { grid-template-columns: 1fr; }
  .advocate-photo { min-height: 0; aspect-ratio: 4 / 5; width: 100%; }
  .assistant-card { grid-template-columns: 1fr; }
  .assistant-photo { min-height: 0; aspect-ratio: 4 / 5; width: 100%; }
  .blog-teaser-item { grid-template-columns: 1fr; }
  .blog-teaser-item .meta { display: flex; gap: 10px; line-height: 1.4; }

  .post-card { grid-template-columns: 1fr; }
  .content-layout { grid-template-columns: 1fr; }

  .section-heading-row { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 480px) {
  .hero-title { font-size: 32px; }
}

/* ==========================================================================
   Blog article page (single.php) — design-exact per blog-article.html.
   Fully scoped under .sl-article-page so it cannot affect any other
   template (home, services, about, blog listing, landing pages, etc.).
   ========================================================================== */
.sl-article-page {
	--sl-bg: #0e1220;
	--sl-card-bg: #171c2a;
	--sl-border: rgba(255, 255, 255, .08);
	--sl-border-2: rgba(255, 255, 255, .1);
	--sl-gold: #d8a747;
	--sl-gold-hover: #e0be6f;
	--sl-text-100: #f4f1ea;
	--sl-text-body: #c9c9ce;
	--sl-text-muted: #8b929c;
	--sl-text-muted-2: #8b8f9c;
	background: var(--sl-bg);
	color: #e7e6e2;
	font-family: 'Inter', var(--font-sans), sans-serif;
	display: block;
}

/* ---------- Layout ---------- */
.sl-article-page .sl-article-container {
	max-width: 820px;
	margin: 0 auto;
	padding: 56px 24px 0;
}

/* ---------- Back link ---------- */
.sl-article-page .sl-back-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--sl-text-muted);
	font-size: 14px;
	margin-bottom: 28px;
}
.sl-article-page .sl-back-link::before {
	content: '';
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	border-right: 8px solid var(--sl-text-muted);
}
.sl-article-page .sl-back-link:hover { color: var(--sl-text-100); }
.sl-article-page .sl-back-link:hover::before { border-right-color: var(--sl-text-100); }

/* ---------- Eyebrow / category ---------- */
.sl-article-page .sl-eyebrow { margin-bottom: 18px; }
.sl-article-page .sl-eyebrow span {
	font-size: 11px;
	letter-spacing: 1.5px;
	color: var(--sl-gold);
	font-weight: 600;
	text-transform: uppercase;
}

/* ---------- Title ---------- */
.sl-article-page .sl-article-title {
	font-family: 'Playfair Display', var(--font-serif), serif;
	font-size: 44px;
	line-height: 1.15;
	color: var(--sl-text-100);
	margin: 0 0 20px;
	font-weight: 700;
}

/* ---------- Meta row ---------- */
.sl-article-page .sl-article-meta {
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 13px;
	color: var(--sl-text-muted-2);
	margin-bottom: 32px;
}
.sl-article-page .sl-meta-dot {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--sl-text-muted-2);
	flex: none;
}

/* ---------- Cover image ---------- */
.sl-article-page .sl-article-cover {
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 40px;
	background: var(--sl-card-bg);
}
.sl-article-page .sl-article-cover img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.sl-article-page .sl-article-cover__fallback {
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(135deg, var(--line-600) 0 10px, var(--ink-900) 10px 20px);
}

/* ---------- Article body (WordPress content) ---------- */
.sl-article-page .sl-article-content {
	font-size: 17px;
	line-height: 1.8;
	color: var(--sl-text-body);
}
.sl-article-page .sl-article-content p { margin: 0 0 24px; }
.sl-article-page .sl-article-content p:last-child { margin-bottom: 0; }
.sl-article-page .sl-article-content h2 {
	font-family: 'Playfair Display', var(--font-serif), serif;
	font-size: 26px;
	color: var(--sl-text-100);
	font-weight: 600;
	margin: 44px 0 18px;
	line-height: 1.3;
}
.sl-article-page .sl-article-content h3 {
	font-family: 'Playfair Display', var(--font-serif), serif;
	font-size: 20px;
	color: var(--sl-text-100);
	font-weight: 600;
	margin: 36px 0 14px;
	line-height: 1.3;
}
.sl-article-page .sl-article-content ul,
.sl-article-page .sl-article-content ol {
	margin: 0 0 24px;
	padding-left: 20px;
	color: var(--sl-text-body);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.sl-article-page .sl-article-content li { line-height: 1.6; }
.sl-article-page .sl-article-content strong { color: var(--sl-text-100); font-weight: 700; }
.sl-article-page .sl-article-content a {
	color: var(--sl-gold);
	text-decoration: none;
	border-bottom: 1px solid rgba(216, 167, 71, .4);
}
.sl-article-page .sl-article-content a:hover {
	color: var(--sl-gold-hover);
	border-bottom-color: var(--sl-gold-hover);
}
.sl-article-page .sl-article-content blockquote {
	background: var(--sl-card-bg);
	border-left: 3px solid var(--sl-gold);
	border-radius: 4px;
	padding: 18px 22px;
	margin: 0 0 24px;
	font-size: 15px;
	color: #d8dbe0;
}
.sl-article-page .sl-article-content blockquote p { margin: 0; }
.sl-article-page .sl-article-content img {
	max-width: 100%;
	height: auto;
	border-radius: 8px;
	display: block;
	margin: 8px 0;
}
.sl-article-page .sl-article-content figure { margin: 0 0 24px; }
.sl-article-page .sl-article-content figcaption {
	font-size: 13px;
	color: var(--sl-text-muted);
	margin-top: 8px;
}

/* ---------- Tags ---------- */
.sl-article-page .sl-article-tags {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 48px 0 40px;
}
.sl-article-page .sl-article-tags__label { font-size: 13px; color: var(--sl-text-muted-2); }
.sl-article-page .sl-article-tags a {
	font-size: 13px;
	background: var(--sl-card-bg);
	border: 1px solid var(--sl-border-2);
	border-radius: 20px;
	padding: 6px 14px;
	color: var(--sl-text-body);
}
.sl-article-page .sl-article-tags a:hover { border-color: var(--sl-gold); color: var(--sl-gold); }

/* ---------- Prev / next navigation ---------- */
.sl-article-page .sl-article-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	margin-bottom: 64px;
}
.sl-article-page .sl-article-nav--single { grid-template-columns: 1fr; }
.sl-article-page .sl-article-nav__item {
	background: var(--sl-card-bg);
	border: 1px solid var(--sl-border);
	border-radius: 10px;
	padding: 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-decoration: none;
}
.sl-article-page .sl-article-nav__item:hover { border-color: var(--sl-gold); }
.sl-article-page .sl-article-nav__item--next { text-align: right; align-items: flex-end; }
.sl-article-page .sl-article-nav__label {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var(--sl-text-muted);
	font-size: 12px;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.sl-article-page .sl-article-nav__arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	border-right: 7px solid var(--sl-text-muted);
	flex: none;
}
.sl-article-page .sl-article-nav__item--next .sl-article-nav__arrow {
	border-right: none;
	border-left: 7px solid var(--sl-text-muted);
}
.sl-article-page .sl-article-nav__title {
	color: var(--sl-text-100);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
}

/* ---------- Bottom CTA ---------- */
.sl-article-page .sl-article-cta {
	max-width: 1200px;
	margin: 0 auto 80px;
	padding: 0 24px;
}
.sl-article-page .sl-article-cta__inner {
	background: var(--sl-card-bg);
	border: 1px solid var(--sl-border);
	border-radius: 10px;
	padding: 36px 44px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.sl-article-page .sl-article-cta__text h3 {
	font-family: 'Playfair Display', var(--font-serif), serif;
	font-size: 24px;
	color: var(--sl-text-100);
	margin: 0 0 8px;
	font-weight: 600;
}
.sl-article-page .sl-article-cta__text p { margin: 0; color: var(--sl-text-muted-2); font-size: 15px; }
.sl-article-page .sl-article-cta__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.sl-article-page .sl-article-cta__secondary {
	border: 1px solid rgba(255, 255, 255, .25);
	color: var(--sl-text-100);
	font-weight: 600;
	font-size: 14px;
	padding: 14px 24px;
	border-radius: 6px;
	white-space: nowrap;
	text-decoration: none;
	display: inline-block;
}
.sl-article-page .sl-article-cta__secondary:hover { border-color: var(--sl-gold); color: var(--sl-gold); }

/* ---------- Mobile ---------- */
@media (max-width: 640px) {
	.sl-article-page .sl-article-container { padding: 32px 16px 0; }
	.sl-article-page .sl-article-title { font-size: 30px; }
	.sl-article-page .sl-article-content h2 { font-size: 22px; }
	.sl-article-page .sl-article-content h3 { font-size: 18px; }
	.sl-article-page .sl-article-nav { grid-template-columns: 1fr; }
	.sl-article-page .sl-article-nav__item--next { text-align: left; align-items: flex-start; }
	.sl-article-page .sl-article-cta__inner { padding: 28px 24px; }
}


/* =========================================================
 *    13. MOBILE HOME REDESIGN  Page ID 4094 only ("")
 *    Scope: body.page-id-4094, breakpoint max-width: 767px.
 *    Source of truth for mobile visuals: Smartlaw - Mobile(2).html
 *    Does NOT alter desktop rules above or other page templates.
 * ========================================================= */
@media (max-width: 767px) {
	
	  /* ---- Header (home only) ---- */
	body.page-id-4094 .site-header { padding: 14px 20px; }
	body.page-id-4094 .sl-logo__name { font-size: 24px; }
	body.page-id-4094 .sl-logo__desc { display: block; font-size: 8px; }
	body.page-id-4094 .header-contacts { display: none; }
	body.page-id-4094 .menu-toggle {
		    width: 38px;
		    height: 38px;
		    background: var(--gold-500);
		    border-color: var(--gold-500);
		    color: var(--ink-900);
	}
	body.page-id-4094 .mobile-menu { top: 76px; }
	
	  /* ---- Hero: image on top, then badge/title/lead/price-card/CTAs/stats ---- */
	body.page-id-4094 .hero { display: flex; flex-direction: column; }
	  body.page-id-4094 .hero-media,
	body.page-id-4094 .hero-content { display: contents; }
	
	body.page-id-4094 .hero-media img {
		    order: 1;
		    position: static;
		    width: 100%;
		    height: 280px;
		    object-fit: cover;
		    object-position: center 20%;
	}
	body.page-id-4094 .hero-badge { order: 2; margin: 24px 20px 0; }
	body.page-id-4094 .hero-title { order: 3; margin: 18px 20px 0; font-size: 30px; }
	body.page-id-4094 .hero-lead { order: 4; margin: 14px 20px 0; font-size: 16px; }
	body.page-id-4094 .hero-price-card {
		    order: 5;
		    margin: 20px 20px 0;
		    max-width: none;
		    position: static;
	}
	body.page-id-4094 .hero-actions { order: 6; margin: 22px 20px 0; }
	body.page-id-4094 .hero-metrics {
		    order: 7;
		    margin: 28px 20px 34px;
	}
	
	  /* ---- Services (practices) ---- */
	body.page-id-4094 .practices-section h2 { font-size: 26px; }
	body.page-id-4094 .practice-card h3 { font-size: 20px; }
	
	  /* ---- Team + results (cream section) ---- */
	body.page-id-4094 .cream-section h2 { font-size: 26px; }
	body.page-id-4094 .results-head h2 { font-size: 24px; }
	  body.page-id-4094 .advocate-photo img,
	body.page-id-4094 .assistant-photo img { object-position: center 15%; }
	
	  /* ---- Process (order of work) ---- */
	body.page-id-4094 .process-intro h2 { font-size: 26px; }
	
	  /* ---- Blog teaser: heading/list first, "all articles" link after the list ---- */
	body.page-id-4094 .blog-teaser-intro h2 { font-size: 24px; }
	body.page-id-4094 .blog-teaser-grid { display: flex; flex-direction: column; }
	body.page-id-4094 .blog-teaser-intro { display: contents; }
	  body.page-id-4094 .blog-teaser-intro .mono-label,
	  body.page-id-4094 .blog-teaser-intro h2,
	body.page-id-4094 .blog-teaser-intro p { order: 1; }
	body.page-id-4094 .blog-teaser-list { order: 2; }
	body.page-id-4094 .blog-teaser-intro .all-link { order: 3; margin-top: 18px; display: inline-block; }
	
	  /* ---- Contact ---- */
	body.page-id-4094 .contact-info h2 { font-size: 26px; }
	body.page-id-4094 .contact-phone-big { font-size: 28px; }
	body.page-id-4094 .contact-msg-buttons a { flex: 1 1 0; text-align: center; }
}

/* 13b. Fix: inline flex-basis (1 1 300px, meant for desktop row layout)
 *    turns into a 300px HEIGHT once flex-direction is column on mobile. */
@media (max-width: 767px) {
	body.page-id-4094 .hero-cta-group { flex: 0 1 auto !important; }
	
	body.page-id-4094 .hero-metrics {
		    display: flex;
		    flex-wrap: nowrap;
		    justify-content: space-between;
		    gap: 8px;
	}
	body.page-id-4094 .hero-metric .num { font-size: 22px; }
	body.page-id-4094 .hero-metric .label { font-size: 10px; line-height: 1.3; }
}


/* =========================================================
   14. UNIFIED PAGE WIDTH SYSTEM
   Full-width section backgrounds; shared 1440px content grid.
========================================================= */
:root {
  --sl-layout-max: 1440px;
  --sl-layout-pad: 48px;
  --sl-layout-edge: max(var(--sl-layout-pad), calc((100% - var(--sl-layout-max)) / 2 + var(--sl-layout-pad)));
  --sl-layout-outer: max(0px, calc((100% - var(--sl-layout-max)) / 2));
}
.sl-container {
  width: min(calc(100% - (var(--sl-layout-pad) * 2)), var(--sl-layout-max));
  margin-inline: auto;
}
.site-wrap {
  max-width: none;
  width: 100%;
  margin-inline: 0;
  border-left: 0 !important;
  border-right: 0 !important;
}
body.page-id-4108 #sl-full-bleed,
body.page-id-4114 #sl-full-bleed,
body.page-id-4112 #sl-full-bleed {
  width: 100% !important;
  margin-left: 0 !important;
}
body.page-id-4108 .elementor-section-boxed > .elementor-container { max-width: none !important; }
body.page-id-4108 .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
body.page-id-4108 #sl-full-bleed .sl-hero {
  max-width: var(--sl-layout-max);
  margin-inline: auto;
}
body.page-id-4114 #sl-full-bleed > div {
  max-width: none !important;
  width: 100%;
  margin-inline: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
}
@media (min-width: 900px) {
  .site-header, .site-footer {
    padding-left: var(--sl-layout-edge);
    padding-right: var(--sl-layout-edge);
  }
  .hero, .contact-section {
    padding-left: var(--sl-layout-outer);
    padding-right: var(--sl-layout-outer);
  }
  .practices-section, .cream-section, .process-section, .blog-teaser, .page-hero, .content-layout {
    padding-left: var(--sl-layout-edge);
    padding-right: var(--sl-layout-edge);
  }
  body.page-id-4108 #sl-full-bleed .sl-about,
  body.page-id-4108 #sl-full-bleed .sl-assistant,
  body.page-id-4108 #sl-full-bleed .sl-principles,
  body.page-id-4108 #sl-full-bleed .sl-before,
  body.page-id-4110 #sl-full-bleed .sl-intro,
  body.page-id-4110 #sl-full-bleed .sl-cards,
  body.page-id-4110 #sl-full-bleed .sl-more,
  body.page-id-4110 #sl-full-bleed .sl-final,
  body.page-id-4120 #sl-full-bleed .sl-intro,
  body.page-id-4120 #sl-full-bleed .sl-featured-section,
  body.page-id-4120 #sl-full-bleed .sl-posts-section,
  body.page-id-4114 #sl-full-bleed .sl-pad-x {
    padding-left: var(--sl-layout-edge) !important;
    padding-right: var(--sl-layout-edge) !important;
  }
  body.page-id-4112 #sl-full-bleed > div > div:first-child {
    padding-left: var(--sl-layout-edge) !important;
    padding-right: var(--sl-layout-edge) !important;
  }
  body.page-id-4112 #sl-full-bleed .sl-two-col > div:first-child { padding-left: var(--sl-layout-edge) !important; }
  body.page-id-4112 #sl-full-bleed .sl-two-col > div:last-child { padding-right: var(--sl-layout-edge) !important; }
}
@media (max-width: 899px) {
  :root { --sl-layout-pad: 20px; }
  .sl-container { width: calc(100% - 40px); }
  body.page-id-4108 #sl-full-bleed .sl-about,
  body.page-id-4108 #sl-full-bleed .sl-assistant,
  body.page-id-4108 #sl-full-bleed .sl-principles,
  body.page-id-4108 #sl-full-bleed .sl-before,
  body.page-id-4110 #sl-full-bleed .sl-intro,
  body.page-id-4110 #sl-full-bleed .sl-cards,
  body.page-id-4110 #sl-full-bleed .sl-more,
  body.page-id-4110 #sl-full-bleed .sl-final,
  body.page-id-4120 #sl-full-bleed .sl-intro,
  body.page-id-4120 #sl-full-bleed .sl-featured-section,
  body.page-id-4120 #sl-full-bleed .sl-posts-section,
  body.page-id-4114 #sl-full-bleed .sl-pad-x {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  body.page-id-4112 #sl-full-bleed > div > div:first-child,
  body.page-id-4112 #sl-full-bleed .sl-two-col > div {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* =========================================================
   16. CONTACT PAGE HERO VIDEO
   Page 4112 only; the video layer is added to the hero by
   smartlaw_contacts_hero_video() in functions.php.
   contact-hero-wide.mp4 is 1920×720 (8:3): the left part is an
   empty dark background for the text, the person is on the right.
   The section keeps the same 8:3 shape (at least 450px, 620px on
   phones) and the video covers it, anchored to the right. On wide
   screens the text column stops before the person; up to 899px the
   text overlaps the video, so it is dimmed under a gradient.
========================================================= */
body.page-id-4112 #sl-full-bleed .sl-contacts-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: max(450px, 37.5vw);
  padding-top: 40px !important;
  padding-bottom: 40px !important;
}
body.page-id-4112 #sl-full-bleed .sl-contacts-hero__text {
  max-width: min(720px, calc(62vw - 88px), calc(100vw - 536px));
}
body.page-id-4112 #sl-full-bleed .sl-contacts-hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0a1015;
}
body.page-id-4112 #sl-full-bleed .sl-contacts-hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}
@media (max-width: 899px) {
  body.page-id-4112 #sl-full-bleed .sl-contacts-hero__text {
    max-width: none;
  }
  body.page-id-4112 #sl-full-bleed .sl-contacts-hero__video {
    opacity: .38;
  }
  body.page-id-4112 #sl-full-bleed .sl-contacts-hero__media::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(11, 16, 22, .87), rgba(11, 16, 22, 0));
  }
}
@media (max-width: 700px) {
  body.page-id-4112 #sl-full-bleed .sl-contacts-hero {
    min-height: 620px;
  }
}