/**
* Template Name: SnapFolio
* Template URL: https://bootstrapmade.com/snapfolio-bootstrap-portfolio-template/
* Updated: Jul 21 2025 with Bootstrap v5.3.7
* Author: BootstrapMade.com
* License: https://bootstrapmade.com/license/
*/

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Ubuntu",  sans-serif;
  --nav-font: "Nunito",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #1f1f1f; /* Background color for the entire website, including individual sections */
  --default-color: #ffffff; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #ffffff; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #ececec; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #232323; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #310606; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: rgba(236, 236, 236, 0.59);  /* The default color of the main navmenu links */
  --nav-hover-color: #ffffff; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #393939; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #393939; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #ffffff; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #ececec; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #2c2c2c;
  --surface-color: #323232;
}

.dark-background {
  --background-color: #040b14;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #151f2b;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: #1b1b1b;
  --contrast-color: #444444;
  color: var(--default-color);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  padding: 0 12px;
  width: 240px;
  transition: all ease-in-out 0.3s;
  overflow-y: auto;
  z-index: 997;
}

.header .header-container {
  border-radius: 20px;
  padding: 15px;
  background-color: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.header .social-links {
  margin: 0 0 10px 0;
}

.header .social-links a {
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  margin: 0 2px;
  border-radius: 50%;
  text-align: center;
  width: 40px;
  height: 40px;
  transition: 0.3s;
}

.header .social-links a:hover {
  color: var(--contrast-color);
  background: var(--accent-color);
}

@media (min-width: 1200px) {

  .header~main,
  .header~#footer {
    margin-left: 260px;
  }
}

@media (max-width: 767.98px) {
  .header {
    left: -100%;
  }
}

.header.header-show {
  left: 0;
}

.header .header-toggle {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  position: fixed;
  top: 15px;
  right: 15px;
  z-index: 9999;
  transition: background-color 0.3s;
}

.header .header-toggle:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color) 90%, white 15%);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
.mobile-nav-toggle {
  display: none;
}

.navmenu {
  padding: 0;
  z-index: 9997;
  width: 100%;
}

.navmenu ul {
  list-style: none;
  padding: 0 0 20px 0;
  margin: 0;
}

.navmenu a,
.navmenu a:focus {
  color: var(--nav-color);
  padding: 15px 10px;
  font-family: var(--nav-font);
  font-size: 16px;
  font-weight: 400;
  display: flex;
  align-items: center;
  white-space: nowrap;
  transition: 0.3s;
  width: 100%;
}

.navmenu a .navicon,
.navmenu a:focus .navicon {
  font-size: 20px;
  margin-right: 10px;
}

.navmenu a .toggle-dropdown,
.navmenu a:focus .toggle-dropdown {
  font-size: 12px;
  line-height: 0;
  margin-left: auto;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: 0.3s;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.navmenu a .toggle-dropdown:hover,
.navmenu a:focus .toggle-dropdown:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.navmenu a:hover,
.navmenu .active,
.navmenu .active:focus {
  color: var(--nav-hover-color);
}

.navmenu a:hover .navicon,
.navmenu .active .navicon,
.navmenu .active:focus .navicon {
  color: var(--accent-color);
}

.navmenu .active .toggle-dropdown,
.navmenu .active:focus .toggle-dropdown {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: rotate(180deg);
}

.navmenu .dropdown {
  display: block;
}

.navmenu .dropdown a,
.navmenu .dropdown a:focus {
  color: var(--nav-dropdown-color);
}

.navmenu .dropdown a:hover,
.navmenu .dropdown .active,
.navmenu .dropdown .active:focus {
  color: var(--nav-dropdown-hover-color);
}

.navmenu .dropdown ul {
  position: static;
  display: none;
  z-index: 99;
  padding: 5px 10px;
  margin: 5px 10px;
  background-color: var(--nav-dropdown-background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  box-shadow: none;
  transition: all 0.5s ease-in-out;
}

.navmenu .dropdown ul ul {
  background-color: rgba(33, 37, 41, 0.1);
}

.navmenu .dropdown>.dropdown-active {
  display: block;
  background-color: rgba(33, 37, 41, 0.03);
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background-color: var(--background-color);
  font-size: 14px;
  padding: 0 0 40px 0;
  position: relative;
}

.footer .copyright {
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .copyright p {
  margin-bottom: 0;
}

.footer .credits {
  margin-top: 4px;
  font-size: 13px;
  text-align: center;
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: -15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 44px;
  height: 44px;
  border-radius: 50px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
  bottom: 15px;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  padding: 25px 0 0 0;
  position: relative;
}

.page-title .container {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-bottom: 25px;
}

.page-title h1 {
  font-size: 24px;
  font-weight: 700;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  overflow: clip;
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 700;
  position: relative;
}

.section-title h2:before,
.section-title h2:after {
  content: "";
  width: 50px;
  height: 2px;
  background: var(--accent-color);
  display: inline-block;
}

.section-title h2:before {
  margin: 0 15px 10px 0;
}

.section-title h2:after {
  margin: 0 0 10px 15px;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
}

.hero .background-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.hero .background-elements .bg-circle {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(45deg, color-mix(in srgb, var(--accent-color), transparent 90%), color-mix(in srgb, var(--accent-color), transparent 95%));
  animation: float 6s ease-in-out infinite;
}

.hero .background-elements .bg-circle.circle-1 {
  width: 300px;
  height: 300px;
  top: 10%;
  right: 10%;
  animation-delay: 0s;
}

.hero .background-elements .bg-circle.circle-2 {
  width: 200px;
  height: 200px;
  bottom: 20%;
  left: 5%;
  animation-delay: 2s;
}

.hero .hero-content {
  position: relative;
  width: 100%;
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 3;
}

.hero .hero-text h1 {
  font-size: 72px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 15px;
  color: var(--heading-color);
}

.hero .hero-text h1 .accent-text {
  color: var(--accent-color);
  position: relative;
}

.hero .hero-text h1 .accent-text::after {
  content: "";
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), transparent 50%));
}

.hero .hero-text h2 {
  font-size: 32px;
  font-weight: 600;
  color: var(--heading-color);
  margin-bottom: 10px;
}

.hero .hero-text .lead {
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--default-color);
}

.hero .hero-text .lead span {
  color: var(--accent-color);
  font-weight: 600;
  border-bottom: 2px solid var(--accent-color);
  padding-bottom: 2px;
}

.hero .hero-text .description {
  font-size: 18px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 40px;
  max-width: 500px;
}

.hero .hero-actions {
  display: flex;
  gap: 20px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.hero .hero-actions .btn {
  padding: 14px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  border: 2px solid;
}

.hero .hero-actions .btn.btn-primary {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
}

.hero .hero-actions .btn.btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.hero .hero-actions .btn.btn-outline {
  background-color: transparent;
  color: var(--accent-color);
  border-color: var(--accent-color);
}

.hero .hero-actions .btn.btn-outline:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.hero .social-links {
  display: flex;
  gap: 20px;
}

.hero .social-links a {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--surface-color);
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  border-radius: 50%;
  font-size: 20px;
  transition: all 0.3s ease;
}

.hero .social-links a:hover {
  color: var(--contrast-color);
  background-color: var(--accent-color);
  transform: translateY(-3px);
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.hero .hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.hero .hero-visual .profile-container {
  position: relative;
  width: 400px;
  height: 400px;
}

.hero .hero-visual .profile-container .profile-background {
  position: absolute;
  top: 15px;
  left: 15px;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  z-index: 1;
}

.hero .hero-visual .profile-container .profile-image {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  z-index: 2;
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-10px) rotate(5deg);
  }
}

@media (max-width: 992px) {
  .hero .hero-text {
    text-align: center;
    margin-bottom: 50px;
  }

  .hero .hero-text h1 {
    font-size: 56px;
  }

  .hero .hero-text h2 {
    font-size: 28px;
  }

  .hero .hero-text .lead {
    font-size: 20px;
  }

  .hero .hero-visual .profile-container {
    width: 350px;
    height: 350px;
  }
}

@media (max-width: 768px) {
  .hero .hero-text h1 {
    font-size: 42px;
  }

  .hero .hero-text h2 {
    font-size: 24px;
  }

  .hero .hero-text .lead {
    font-size: 18px;
  }

  .hero .hero-text .description {
    font-size: 16px;
  }

  .hero .hero-actions {
    justify-content: center;
  }

  .hero .hero-actions .btn {
    padding: 12px 25px;
    font-size: 14px;
  }

  .hero .hero-visual .profile-container {
    width: 300px;
    height: 300px;
  }

  .hero .background-elements .bg-circle.circle-1 {
    width: 200px;
    height: 200px;
  }

  .hero .background-elements .bg-circle.circle-2 {
    width: 150px;
    height: 150px;
  }

  .hero .background-elements .bg-circle.circle-3 {
    width: 100px;
    height: 100px;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about .profile-card {
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--surface-color), var(--accent-color) 5%) 100%);
  border-radius: 2rem;
  padding: 2.5rem;
  text-align: center;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  position: relative;
  overflow: hidden;
}

.about .profile-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 30%));
}

@media (max-width: 991px) {
  .about .profile-card {
    margin-bottom: 3rem;
  }
}

.about .profile-header {
  position: relative;
  margin-bottom: 2rem;
}

.about .profile-header .profile-image {
  width: 160px;
  height: 160px;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid var(--accent-color);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.about .profile-header .profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about .profile-header .profile-badge {
  position: absolute;
  bottom: 20px;
  right: calc(50% - 65px);
  width: 32px;
  height: 32px;
  background-color: var(--accent-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid var(--surface-color);
}

.about .profile-header .profile-badge i {
  color: var(--contrast-color);
  font-size: 14px;
}

.about .profile-content h3 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
}

.about .profile-content .profession {
  color: var(--accent-color);
  font-weight: 500;
  margin-bottom: 2rem;
}

.about .contact-links {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.about .contact-links .contact-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background-color: color-mix(in srgb, var(--surface-color), var(--background-color) 50%);
  border-radius: 0.75rem;
  text-decoration: none;
  color: var(--default-color);
  transition: all 0.3s;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.about .contact-links .contact-item:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
  box-shadow: 0 5px 20px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.about .contact-links .contact-item i {
  font-size: 1rem;
  width: 18px;
}

.about .about-content {
  padding-left: 3rem;
}

@media (max-width: 991px) {
  .about .about-content {
    padding-left: 0;
  }
}

.about .about-content .section-header {
  margin-bottom: 2rem;
}

.about .about-content .section-header .badge-text {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 20%));
  color: var(--contrast-color);
  padding: 0.5rem 1.5rem;
  border-radius: 2rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 1.5rem;
}

.about .about-content .section-header h2 {
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}

@media (max-width: 768px) {
  .about .about-content .section-header h2 {
    font-size: 1.875rem;
  }
}

.about .about-content .description {
  margin-bottom: 2.5rem;
}

.about .about-content .description p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 1.5rem;
}

.about .about-content .description p:last-child {
  margin-bottom: 0;
}

.about .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 2.5rem;
  padding: 2rem;
  background-color: var(--surface-color);
  border-radius: 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

@media (max-width: 768px) {
  .about .stats-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
}

.about .stats-grid .stat-item {
  text-align: center;
}

.about .stats-grid .stat-item .stat-number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--accent-color);
  display: block;
  margin-bottom: 0.5rem;
}

.about .stats-grid .stat-item .stat-label {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.about .details-grid {
  margin-bottom: 2.5rem;
}

.about .details-grid .detail-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {
  .about .details-grid .detail-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

.about .details-grid .detail-row:last-child {
  margin-bottom: 0;
}

.about .details-grid .detail-item .detail-label {
  display: block;
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.about .details-grid .detail-item .detail-value {
  display: block;
  font-weight: 600;
  color: var(--heading-color);
  font-size: 1rem;
}

.about .cta-section {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.about .cta-section .btn {
  padding: 0.875rem 2rem;
  border-radius: 0.75rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 2px solid transparent;
}

.about .cta-section .btn.btn-primary {
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.about .cta-section .btn.btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 60%);
}

.about .cta-section .btn.btn-outline {
  background-color: transparent;
  color: var(--default-color);
  border-color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.about .cta-section .btn.btn-outline:hover {
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

/*--------------------------------------------------------------
# Stats Section
--------------------------------------------------------------*/
.stats .stats-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 992px) {
  .stats .stats-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .stats .stats-wrapper {
    grid-template-columns: 1fr;
  }
}

.stats .stats-item {
  background: linear-gradient(135deg, color-mix(in srgb, var(--surface-color), transparent 5%), var(--surface-color));
  border-radius: 15px;
  padding: 40px 20px;
  text-align: center;
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.stats .stats-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

.stats .stats-item:hover .icon-wrapper {
  transform: scale(1.1);
}

.stats .stats-item:nth-child(1) .icon-wrapper {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
}

.stats .stats-item:nth-child(1) .icon-wrapper i {
  color: color-mix(in srgb, var(--accent-color), transparent 10%);
}

.stats .stats-item:nth-child(2) .icon-wrapper {
  background-color: color-mix(in srgb, #ff7e00, transparent 85%);
}

.stats .stats-item:nth-child(2) .icon-wrapper i {
  color: color-mix(in srgb, #ff7e00, transparent 10%);
}

.stats .stats-item:nth-child(3) .icon-wrapper {
  background-color: color-mix(in srgb, #00c875, transparent 85%);
}

.stats .stats-item:nth-child(3) .icon-wrapper i {
  color: color-mix(in srgb, #00c875, transparent 10%);
}

.stats .stats-item:nth-child(4) .icon-wrapper {
  background-color: color-mix(in srgb, #e83e8c, transparent 85%);
}

.stats .stats-item:nth-child(4) .icon-wrapper i {
  color: color-mix(in srgb, #e83e8c, transparent 10%);
}

.stats .stats-item .icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  transition: transform 0.3s ease;
}

.stats .stats-item .icon-wrapper i {
  font-size: 36px;
}

.stats .stats-item span {
  display: block;
  font-size: 48px;
  font-weight: 700;
  color: var(--heading-color);
  margin-bottom: 10px;
  line-height: 1;
  font-family: var(--heading-font);
}

.stats .stats-item p {
  color: var(--default-color);
  font-size: 18px;
  margin: 0;
  font-weight: 500;
  font-family: var(--heading-font);
  opacity: 0.8;
}

/*--------------------------------------------------------------
# Skills Section
--------------------------------------------------------------*/
.skills .skills-category {
  background-color: var(--surface-color);
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  height: 100%;
  transition: transform 0.3s;
}

.skills .skills-category:hover {
  transform: translateY(-5px);
}

.skills .skills-category h3 {
  font-size: 24px;
  margin-bottom: 25px;
  position: relative;
  padding-bottom: 15px;
}

.skills .skills-category h3:after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50px;
  height: 2px;
  background-color: var(--accent-color);
}

.skills .skill-item {
  margin-bottom: 25px;
}

.skills .skill-item:last-child {
  margin-bottom: 0;
}

.skills .skill-item h4 {
  font-size: 16px;
  margin-bottom: 8px;
}

.skills .skill-item .skill-percentage {
  font-size: 14px;
  color: color-mix(in srgb, var(--heading-color), transparent 30%);
}

.skills .skill-item .progress {
  height: 8px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.skills .skill-item .progress .progress-bar {
  background-color: var(--accent-color);
  transition: width 1.5s ease-in-out;
  width: 0;
  height: 100%;
  border-radius: 20px;
}

.skills .skill-item .skill-tooltip {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-top: 8px;
  opacity: 0;
  transform: translateY(-5px);
  transition: all 0.3s;
}

.skills .skill-item:hover .skill-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.skills .skill-box {
  background-color: var(--surface-color);
  padding: 25px 20px;
  border-radius: 8px;
  text-align: center;
  transition: all 0.3s;
  height: 100%;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}

.skills .skill-box:hover {
  transform: translateY(-5px);
}

.skills .skill-box:hover i {
  color: var(--accent-color);
  transform: scale(1.1);
}

.skills .skill-box:hover .skill-tooltip {
  opacity: 1;
  transform: translateY(0);
}

.skills .skill-box i {
  font-size: 36px;
  color: color-mix(in srgb, var(--accent-color), transparent 20%);
  margin-bottom: 15px;
  display: inline-block;
  transition: all 0.3s;
}

.skills .skill-box h4 {
  font-size: 18px;
  margin-bottom: 10px;
}

.skills .skill-box .skill-tooltip {
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  opacity: 0;
  transform: translateY(5px);
  transition: all 0.3s;
}

@media (max-width: 991.98px) {
  .skills .skills-category {
    margin-bottom: 30px;
  }

  .skills .skills-category:last-child {
    margin-bottom: 0;
  }
}

@media (max-width: 767.98px) {
  .skills .skill-box {
    margin-bottom: 20px;
  }

  .skills .skill-box:last-child {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------------------
# Resume Section
--------------------------------------------------------------*/
.resume .resume-side {
  background-color: var(--surface-color);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  height: 100%;
}

.resume .resume-side .profile-img {
  text-align: center;
}

.resume .resume-side .profile-img img {
  width: 200px;
  height: 200px;
  object-fit: cover;
  border: 5px solid color-mix(in srgb, var(--accent-color), transparent 85%);
  border-radius: 50%;
}

.resume .resume-side h3 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
  font-weight: 600;
}

.resume .resume-side .contact-info li {
  margin-bottom: 1rem;
  color: var(--default-color);
}

.resume .resume-side .contact-info li i {
  width: 25px;
  color: var(--accent-color);
  margin-right: 0.5rem;
}

.resume .resume-side .skill-item {
  margin-bottom: 1.5rem;
}

.resume .resume-side .skill-item span {
  font-size: 0.9rem;
  color: var(--default-color);
}

.resume .resume-side .skill-item .progress {
  height: 8px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 4px;
  margin-top: 0.5rem;
}

.resume .resume-side .skill-item .progress .progress-bar {
  background-color: var(--accent-color);
  width: 0;
  transition: width 1s ease;
}

.resume .resume-section {
  margin-bottom: 3rem;
}

.resume .resume-section h3 {
  font-size: 1.75rem;
  margin-bottom: 1.5rem;
  color: var(--heading-color);
  font-weight: 600;
}

.resume .resume-section h3 i {
  color: var(--accent-color);
}

.resume .resume-section .resume-item {
  padding-left: 1.5rem;
  border-left: 2px solid color-mix(in srgb, var(--accent-color), transparent 80%);
  margin-bottom: 2rem;
  position: relative;
}

.resume .resume-section .resume-item:before {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  left: -9px;
  top: 0;
  background: var(--accent-color);
}

.resume .resume-section .resume-item h4 {
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  color: var(--heading-color);
  font-weight: 600;
}

.resume .resume-section .resume-item h5 {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  color: var(--accent-color);
}

.resume .resume-section .resume-item .company {
  font-size: 0.95rem;
  margin-bottom: 1rem;
  color: var(--heading-color);
}

.resume .resume-section .resume-item .company i {
  margin-right: 0.5rem;
}

.resume .resume-section .resume-item ul {
  padding-left: 1.2rem;
}

.resume .resume-section .resume-item ul li {
  margin-bottom: 0.5rem;
  color: var(--default-color);
}

.resume .resume-section .resume-item p {
  color: var(--default-color);
  margin-bottom: 0;
}

@media (max-width: 991.98px) {
  .resume .resume-side {
    margin-bottom: 2rem;
  }
}

/*--------------------------------------------------------------
# Portfolio Section
--------------------------------------------------------------*/
@media (max-width: 991px) {
  .portfolio .filter-sidebar {
    margin-bottom: 30px;
  }
}

.portfolio .filters-wrapper {
  background-color: color-mix(in srgb, var(--surface-color), var(--default-color) 3%);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
}

@media (max-width: 991px) {
  .portfolio .filters-wrapper {
    padding: 20px;
  }
}

.portfolio .portfolio-filters {
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

@media (max-width: 991px) {
  .portfolio .portfolio-filters {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.portfolio .portfolio-filters li {
  cursor: pointer;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  color: var(--default-color);
  transition: all 0.3s ease-in-out;
  border-radius: 6px;
  background: transparent;
  position: relative;
  border-left: 3px solid transparent;
}

@media (max-width: 991px) {
  .portfolio .portfolio-filters li {
    padding: 8px 16px;
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 80%);
    border-left-width: 3px;
  }
}

.portfolio .portfolio-filters li:hover {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-left-color: color-mix(in srgb, var(--accent-color), transparent 50%);
}

.portfolio .portfolio-filters li.filter-active {
  color: var(--accent-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-left-color: var(--accent-color);
  font-weight: 600;
}

.portfolio .portfolio-wrap {
  transition: 0.4s;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  height: 100%;
}

.portfolio .portfolio-wrap img {
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1);
  width: 100%;
  height: 350px;
  object-fit: cover;
}

.portfolio .portfolio-wrap .portfolio-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 25px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 60%, rgba(0, 0, 0, 0) 100%);
  z-index: 3;
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(20px);
  opacity: 0;
}

.portfolio .portfolio-wrap .portfolio-info .content {
  transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateY(20px);
}

.portfolio .portfolio-wrap .portfolio-info .category {
  display: inline-block;
  color: var(--accent-color);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.portfolio .portfolio-wrap .portfolio-info h4 {
  font-size: 20px;
  color: var(--contrast-color);
  font-weight: 700;
  margin-bottom: 15px;
}

.portfolio .portfolio-wrap .portfolio-info .portfolio-links {
  display: flex;
  gap: 12px;
}

.portfolio .portfolio-wrap .portfolio-info .portfolio-links a {
  color: var(--contrast-color);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: color-mix(in srgb, var(--accent-color), transparent 30%);
  border-radius: 50%;
  font-size: 18px;
  transition: 0.3s;
}

.portfolio .portfolio-wrap .portfolio-info .portfolio-links a:hover {
  background-color: var(--accent-color);
  transform: translateY(-3px);
}

.portfolio .portfolio-wrap:hover {
  transform: translateY(-5px);
}

.portfolio .portfolio-wrap:hover img {
  transform: scale(1.08);
}

.portfolio .portfolio-wrap:hover .portfolio-info {
  transform: translateY(0);
  opacity: 1;
}

.portfolio .portfolio-wrap:hover .portfolio-info .content {
  transform: translateY(0);
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .service-header {
  margin-bottom: 60px;
}

.services .service-header .service-intro .service-heading {
  font-size: 48px;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.2;
  color: var(--heading-color);
}

.services .service-header .service-intro .service-heading div {
  display: block;
  position: relative;
}

.services .service-header .service-intro .service-heading span {
  display: block;
  color: var(--accent-color);
}

@media (max-width: 992px) {
  .services .service-header .service-intro .service-heading {
    font-size: 36px;
  }
}

@media (max-width: 768px) {
  .services .service-header .service-intro .service-heading {
    font-size: 30px;
    margin-bottom: 20px;
  }
}

.services .service-header .service-summary p {
  margin-bottom: 25px;
  color: var(--default-color);
}

.services .service-header .service-summary .service-btn {
  display: inline-flex;
  align-items: center;
  padding: 12px 30px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.services .service-header .service-summary .service-btn i {
  margin-left: 10px;
  transition: transform 0.3s ease;
}

.services .service-header .service-summary .service-btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 15%);
  color: var(--contrast-color);
}

.services .service-header .service-summary .service-btn:hover i {
  transform: translateX(5px);
}

@media (max-width: 992px) {
  .services .service-header .service-summary {
    margin-top: 30px;
  }
}

.services .service-card {
  padding: 40px 40px 40px 40px;
  margin-bottom: 30px;
  border: 2px solid color-mix(in srgb, var(--accent-color), transparent 90%);
  transition: all 0.3s ease;
}

.services .service-card .service-icon {
  margin-bottom: 25px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  width: 64px;
  height: 64px;
}

.services .service-card .service-icon i {
  font-size: 32px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.services .service-card h3 {
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: 700;
}

.services .service-card h3 a {
  color: var(--heading-color);
  transition: color 0.3s ease;
}

.services .service-card h3 a span {
  display: block;
}

.services .service-card h3 a:hover {
  color: var(--accent-color);
}

.services .service-card p {
  color: var(--default-color);
  transition: color 0.3s ease;
  margin-bottom: 0;
}

.services .service-card .card-action {
  position: absolute;
  top: 0;
  right: 0;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--accent-color);
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.services .service-card .card-action i {
  font-size: 24px;
  color: var(--contrast-color);
  transition: transform 0.3s ease;
}

.services .service-card .card-action:hover i {
  transform: rotate(45deg);
}

.services .service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--surface-color);
  clip-path: polygon(70% 0, 100% 30%, 100% 100%, 0 100%, 0 0);
  z-index: -1;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.services .service-card:hover {
  border-color: transparent;
}

.services .service-card:hover::before {
  opacity: 1;
  visibility: visible;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
}

.services .service-card:hover h3 a {
  color: var(--accent-color);
}

.services .service-card:hover h3 a:hover {
  color: var(--accent-color);
}

.services .service-card:hover p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.services .service-card:hover .card-action {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.services .service-card:hover .service-icon i {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .services .service-card {
    padding: 150px 25px 25px;
  }

  .services .service-card h3 {
    font-size: 24px;
  }

  .services .service-card .service-icon {
    position: absolute;
    top: 40px;
    left: 25px;
  }
}

@media (max-width: 768px) {
  .services {
    padding: 70px 0 50px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}

.testimonials .testimonial-masonry::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent-color), transparent 95%), transparent);
  opacity: 0.5;
  z-index: -1;
}

.testimonials .testimonial-item:nth-child(3n-1) {
  margin-top: 3rem;
}

.testimonials .testimonial-item:nth-child(3n) {
  margin-top: 1.5rem;
}

.testimonials .testimonial-item.highlight .testimonial-content {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.testimonials .testimonial-item.highlight .testimonial-content .quote-pattern {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
}

.testimonials .testimonial-item.highlight .testimonial-content .quote-pattern i {
  color: var(--accent-color);
}

.testimonials .testimonial-content {
  background-color: var(--surface-color);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .testimonial-content:hover {
  transform: translateY(-5px);
}

.testimonials .testimonial-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 1.5rem 0;
  position: relative;
}

.testimonials .quote-pattern {
  position: absolute;
  top: -1.25rem;
  left: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--surface-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .quote-pattern i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.testimonials .client-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .client-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonials .client-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials .client-details h3 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.testimonials .client-details .position {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--heading-color), transparent 40%);
}

@media (max-width: 1199.98px) {
  .testimonials .testimonial-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .testimonials .testimonial-item:nth-child(3n-1),
  .testimonials .testimonial-item:nth-child(3n) {
    margin-top: 0;
  }

  .testimonials .testimonial-item:nth-child(even) {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .testimonials .testimonial-masonry {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .testimonials .testimonial-item:nth-child(even) {
    margin-top: 0;
  }

  .testimonials .testimonial-content {
    padding: 1.5rem;
  }

  .testimonials .testimonial-content p {
    font-size: 0.9375rem;
    margin: 1.25rem 0;
  }

  .testimonials .quote-pattern {
    width: 2.25rem;
    height: 2.25rem;
    top: -1.125rem;
  }

  .testimonials .quote-pattern i {
    font-size: 1.125rem;
  }

  .testimonials .client-info {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }

  .testimonials .client-image {
    width: 45px;
    height: 45px;
  }

  .testimonials .client-details h3 {
    font-size: 1rem;
  }

  .testimonials .client-details .position {
    font-size: 0.8125rem;
  }
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .info-box {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 3rem;
  border-radius: 1rem;
  height: 100%;
}

.contact .info-box h3 {
  color: var(--contrast-color);
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
  .contact .info-box h3 {
    font-size: 1.75rem;
  }
}

.contact .info-box p {
  opacity: 0.8;
  margin-bottom: 2rem;
}

.contact .info-box a {
  color: var(--contrast-color);
}

@media (max-width: 992px) {
  .contact .info-box {
    padding: 1.5rem;
  }
}

.contact .info-item {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.contact .info-item:last-child {
  margin-bottom: 0;
}

.contact .info-item .icon-box {
  width: 3.5rem;
  height: 3.5rem;
  background-color: color-mix(in srgb, var(--contrast-color), transparent 85%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: 0.3s;
}

.contact .info-item .icon-box i {
  font-size: 1.5rem;
  color: var(--contrast-color);
}

.contact .info-item:hover .icon-box {
  background-color: color-mix(in srgb, var(--contrast-color), transparent 70%);
}

.contact .info-item .content h4 {
  color: var(--contrast-color);
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.contact .info-item .content p {
  margin-bottom: 0.25rem;
  font-size: 0.95rem;
}

.contact .info-item .content p:last-child {
  margin-bottom: 0;
}

.contact .contact-form {
  background-color: var(--surface-color);
  padding: 3rem;
  border-radius: 1rem;
  height: 100%;
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.05);
}

@media (max-width: 992px) {
  .contact .contact-form {
    padding: 1.5rem;
  }
}

.contact .contact-form h3 {
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .contact .contact-form h3 {
    font-size: 1.75rem;
  }
}

.contact .contact-form p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  margin-bottom: 2rem;
}

.contact .contact-form .form-control,
.contact .contact-form .form-select {
  padding: 0.875rem 1.25rem;
  border-color: color-mix(in srgb, var(--default-color), transparent 90%);
  border-radius: 0.5rem;
  background-color: color-mix(in srgb, var(--surface-color) 90%, white 5%);
  color: var(--default-color);
}

.contact .contact-form .form-control:focus,
.contact .contact-form .form-select:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.contact .contact-form .form-control::placeholder,
.contact .contact-form .form-select::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.contact .contact-form .btn {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 1rem 2rem;
  border-radius: 2rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: 0.3s;
}

.contact .contact-form .btn i {
  font-size: 1.25rem;
}

.contact .contact-form .btn:hover {
  background-color: color-mix(in srgb, var(--accent-color), var(--contrast-color) 20%);
}

/*--------------------------------------------------------------
# Portfolio Details Section
--------------------------------------------------------------*/
.portfolio-details .portfolio-details-slider {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(var(--default-color), 0.1);
}

.portfolio-details .portfolio-details-slider .swiper-wrapper {
  height: auto !important;
}

.portfolio-details .portfolio-details-slider img {
  aspect-ratio: 16/9;
  object-fit: cover;
}

.portfolio-details .portfolio-details-slider .swiper-pagination {
  position: absolute;
  bottom: 20px;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background-color: var(--contrast-color);
  opacity: 0.5;
  transition: 0.3s;
}

.portfolio-details .portfolio-details-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  background-color: var(--accent-color);
}

.portfolio-details .portfolio-info {
  padding: 30px;
  background-color: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 0 30px rgba(var(--default-color), 0.1);
}

.portfolio-details .portfolio-info h3 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info ul {
  padding: 0;
  list-style: none;
}

.portfolio-details .portfolio-info ul li {
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.portfolio-details .portfolio-info ul li:last-child {
  border-bottom: 0;
}

.portfolio-details .portfolio-info ul li strong {
  font-weight: 600;
  margin-right: 10px;
  color: var(--heading-color);
}

.portfolio-details .portfolio-info ul li a {
  color: var(--accent-color);
  transition: 0.3s;
}

.portfolio-details .portfolio-info ul li a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: underline;
}

.portfolio-details .portfolio-description h2 {
  font-size: 26px;
  font-weight: 700;
  margin-bottom: 20px;
}

.portfolio-details .portfolio-description p {
  padding: 0;
  margin-bottom: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.portfolio-details .portfolio-description .features h3 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 30px;
}

.portfolio-details .portfolio-description .features .feature-item {
  padding: 30px;
  background-color: var(--surface-color);
  border-radius: 8px;
  height: 100%;
  transition: 0.3s;
  box-shadow: 0 0 30px rgba(var(--default-color), 0.1);
}

.portfolio-details .portfolio-description .features .feature-item:hover {
  transform: translateY(-5px);
}

.portfolio-details .portfolio-description .features .feature-item i {
  font-size: 32px;
  color: var(--accent-color);
  margin-bottom: 20px;
  display: inline-block;
}

.portfolio-details .portfolio-description .features .feature-item h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
}

.portfolio-details .portfolio-description .features .feature-item p {
  margin: 0;
  font-size: 15px;
}

@media (max-width: 991px) {
  .portfolio-details .portfolio-info {
    margin-top: 20px;
  }
}

@media (max-width: 768px) {
  .portfolio-details .portfolio-description h2 {
    font-size: 24px;
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-details-slider {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  z-index: 1;
}

.service-details .service-details-slider .swiper-wrapper {
  height: auto !important;
}

.service-details .service-details-slider .swiper-pagination {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  z-index: 2;
}

.service-details .service-details-slider .swiper-pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  background-color: var(--contrast-color);
  opacity: 0.5;
  transition: 0.3s;
}

.service-details .service-details-slider .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
  opacity: 1;
  width: 20px;
  border-radius: 5px;
}

.service-details .content h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
}

.service-details .content p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 15px;
}

.service-details .content .features .feature-box {
  padding: 20px;
  background: var(--surface-color);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
  height: 100%;
  transition: 0.3s;
}

.service-details .content .features .feature-box:hover {
  transform: translateY(-5px);
}

.service-details .content .features .feature-box i {
  font-size: 24px;
  color: var(--accent-color);
  margin-right: 15px;
}

.service-details .content .features .feature-box h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}

.service-details .service-info {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.service-details .service-info h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

.service-details .service-info .info-item {
  margin-bottom: 25px;
}

.service-details .service-info .info-item:last-child {
  margin-bottom: 0;
}

.service-details .service-info .info-item i {
  font-size: 24px;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.service-details .service-info .info-item h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 5px;
}

.service-details .service-info .info-item p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
}

.service-details .related-services {
  background: var(--surface-color);
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.05);
}

.service-details .related-services h4 {
  font-size: 22px;
  font-weight: 700;
  margin-bottom: 25px;
  padding-bottom: 15px;
  border-bottom: 2px solid color-mix(in srgb, var(--accent-color), transparent 85%);
}

.service-details .related-services .service-item {
  margin-bottom: 25px;
  padding-bottom: 25px;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .related-services .service-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.service-details .related-services .service-item i {
  font-size: 24px;
  color: var(--accent-color);
  margin-bottom: 10px;
}

.service-details .related-services .service-item h5 {
  font-size: 18px;
  margin-bottom: 10px;
}

.service-details .related-services .service-item h5 a {
  color: var(--heading-color);
  transition: 0.3s;
}

.service-details .related-services .service-item h5 a:hover {
  color: var(--accent-color);
}

.service-details .related-services .service-item p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin: 0;
  font-size: 14px;
}

@media (max-width: 991px) {

  .service-details .service-info,
  .service-details .related-services {
    margin-top: 30px;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}
/* ================= THEME ================= */

/* ============================================================
   DESIGN TOKEN SYSTEM — Premium Legal Brand
   Wine-Maroon · Champagne · Beige palette
   Bootstrap 3.x compatible (no CSS custom properties in selectors)
   ============================================================ */

/* Brand Color Map:
   -- Wine Maroon:    #87494a (primary) · #6d3a3b (dark) · #9c5657 (light)
   -- Champagne:      #d8bd7d (primary) · #c1a974 (dark) · #e8d4a0 (light)
   -- Beige/Ivory:    #f8f7f4 (background) · #f0ece4 (surface) · #e8e0d0 (border)
   -- Charcoal:       #211c1b (text) · #302b2b (heading) · #222222 (link)
   -- Muted Sage:     #687469 (muted text) · #6b615b (body)
   -- White:          #ffffff (card surface)
*/

/* ============================================================
   SECTION BASE STYLES
   ============================================================ */
section,
.section {
  padding: 40px 0;
}

section > .container,
.section > .container {
  width: 100%;
}

/* ============================================================
   2026 PREMIUM HORIZONTAL SHELL
   Centred floating navigation; retains the client palette.
   ============================================================ */
.sk-floating-header {
    position: fixed;
    z-index: 1050;
    top: 22px;
    left: 50%;
    width: min(1180px, calc(100% - 48px));
    transform: translateX(-50%);
    padding: 0;
}
.sk-premium-nav {
    min-height: 76px;
    padding: 8px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 22px;
    background: rgba(25,23,22,.90);
    box-shadow: 0 22px 60px rgba(12,8,8,.24);
    backdrop-filter: blur(18px) saturate(135%);
    -webkit-backdrop-filter: blur(18px) saturate(135%);
}
.sk-nav-brand {
    display: flex;
    align-items: center;
    width: 190px;
    height: 56px;
    padding: 5px 10px;
    margin: 0;
}
.sk-nav-brand img { width: 100%; max-height: 48px; object-fit: contain; }
.sk-premium-nav .navbar-nav { gap: 4px; }
.sk-premium-nav .nav-link {
    position: relative;
    padding: 12px 14px !important;
    border-radius: 12px;
    color: rgba(255,255,255,.82) !important;
    font: 700 13px/1 'Nunito', sans-serif;
    letter-spacing: .2px;
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.sk-premium-nav .nav-link:hover,
.sk-premium-nav .nav-link:focus,
.sk-premium-nav .nav-link.show {
    color: #fff !important;
    background: rgba(255,255,255,.09);
    transform: translateY(-1px);
}
.sk-premium-nav .dropdown-menu {
    margin-top: 15px !important;
    padding: 10px;
    min-width: 235px;
    border: 1px solid rgba(135,73,74,.14);
    border-radius: 16px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 22px 60px rgba(35,24,24,.18);
}
.sk-premium-nav .dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    color: #302b2b;
    font-size: 13px;
    font-weight: 700;
}
.sk-premium-nav .dropdown-item i { color: #87494a; }
.sk-premium-nav .dropdown-item:hover { color: #87494a; background: #f7efed; }
.sk-premium-nav .sk-nav-grid {
    width: 430px;
    grid-template-columns: 1fr 1fr;
}
.sk-premium-nav .dropdown-menu.show.sk-nav-grid { display: grid; }
.sk-nav-cta {
    flex: 0 0 auto;
    padding: 13px 18px;
    border: 0;
    border-radius: 13px;
    color: #fff !important;
    background: linear-gradient(135deg,#9c5657,#743b3c);
    box-shadow: 0 10px 24px rgba(135,73,74,.34);
    font-size: 13px;
    font-weight: 800;
}
.sk-nav-cta:hover { transform: translateY(-2px); background: linear-gradient(135deg,#aa6263,#7d3f40); }
.sk-premium-nav .navbar-toggler {
    width: 44px; height: 44px; border: 0; border-radius: 12px;
    color: #fff; background: rgba(255,255,255,.1); font-size: 24px;
}
.sk-home-hero { min-height: 100svh; padding-top: 110px !important; }
.sk-home-hero .hero-content { padding-top: 45px !important; }
.sk-home-hero .hero-text {
    padding: clamp(28px,4vw,56px) !important;
    border: 1px solid rgba(255,255,255,.10);
    border-radius: 28px;
    background: linear-gradient(145deg,rgba(23,22,21,.74),rgba(23,22,21,.30));
    box-shadow: 0 30px 80px rgba(0,0,0,.25);
    backdrop-filter: blur(5px);
}
.sk-home-hero .hero-text h1 { font-size: clamp(52px,6vw,88px) !important; letter-spacing: -3px; }
.sk-home-hero .sk-official-hero-card { border-radius: 28px !important; overflow: hidden; transform: rotate(1.2deg); }
.sk-home-hero .sk-official-hero-card:hover { transform: rotate(0) translateY(-8px); }

@media (max-width: 1199.98px) {
    .sk-floating-header { top: 12px; width: calc(100% - 24px); }
    .sk-premium-nav { border-radius: 18px; }
    .sk-premium-nav .navbar-collapse { padding: 14px 6px 6px; max-height: calc(100vh - 110px); overflow-y: auto; }
    .sk-premium-nav .navbar-nav { align-items: stretch !important; }
    .sk-premium-nav .nav-link { padding: 13px 12px !important; }
    .sk-premium-nav .dropdown-menu { margin-top: 2px !important; box-shadow: none; }
    .sk-premium-nav .sk-nav-grid { width: 100%; grid-template-columns: 1fr; }
    .sk-nav-cta { display: block; margin-top: 10px; text-align: center; }
}
@media (max-width: 575.98px) {
    .sk-nav-brand { width: 160px; }
    .sk-home-hero { padding-top: 94px !important; }
    .sk-home-hero .hero-text { padding: 26px 20px !important; border-radius: 22px; }
    .sk-home-hero .hero-text h1 { font-size: clamp(44px,15vw,62px) !important; letter-spacing: -2px; }
}
/* The page has sufficient skeleton-free content; never obscure it behind a theme loader. */
#preloader { display: none !important; }

/* Restore and polish the approved left navigation layout. */
@media (min-width: 1200px) {
    body.index-page .main, body.index-page #footer { margin-left: 300px !important; }
    .frontend-sidebar { width: 300px !important; }
}

/* Grounded consultation assistant � v3 styles live later in this file
   (around line 5826 onward). The earlier light-bubble selectors were
   retained as historical reference but became dead once the v3 dark
   editorial workspace shipped; they are intentionally removed. */
.index-page {
    background: #f8f7f4;
}

.header {
    overflow: visible;
    background: #f4f1f0;
}

    .header .header-container {
        border-radius: 20px;
        width: 100%;
        background: linear-gradient(180deg, #ffffff 0%, #f4f1f0 100%);
        border: 1px solid rgba(34,34,34,0.12);
        box-shadow: 0 8px 32px rgba(34,34,34,0.10);
    }

.navmenu {
    width: 100%;
}

    .navmenu ul {
        width: 100%;
    }

    .navmenu a {
        padding: 7px 10px;
        font-size: 13px;
        min-height: 32px;
    }

        .navmenu a .navicon {
            color: #87494a;
            font-size: 15px;
            margin-right: 7px;
        }

        .navmenu a:hover,
        .navmenu .active,
        .navmenu .active:focus {
            background: rgba(135,73,74,0.10);
            color: #222222;
        }

    .navmenu .dropdown ul {
        min-width: 230px;
        max-height: 76vh;
        overflow-y: auto;
        background: #ffffff;
        border-radius: 10px;
        border: 1px solid rgba(34,34,34,0.12);
        box-shadow: 0 8px 28px rgba(34,34,34,0.12);
    }

.footer {
    background: linear-gradient(135deg, #ffffff 0%, #f4f1f0 100%);
    color: #687469;
}

/* Shonee Kapoor public-page refinements */
.sk-topic-page {
  background: #f8f7f4;
}

.sk-topic-page .lead {
  color: #222222;
  font-size: 1.18rem;
  line-height: 1.7;
}

.sk-topic-page p {
  color: #687469;
  line-height: 1.75;
}

.sk-topic-image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center;
  border: 1px solid rgba(34,34,34,.12);
  box-shadow: 0 18px 46px rgba(34,34,34,.12);
}

.sk-info-panel {
  height: 100%;
  padding: 24px;
  background: linear-gradient(145deg, rgba(255,255,255,0.98), rgba(248,245,238,0.96));
  border: 1px solid rgba(34,34,34,.1);
  border-radius: 8px;
  box-shadow: 0 8px 22px rgba(34,34,34,.07);
}

.sk-info-panel i {
  color: #87494a;
  font-size: 28px;
}

.sk-info-panel h3 {
  color: #222222;
  font-size: 1.1rem;
  margin: 14px 0 8px;
}

.sk-info-panel p {
  color: #687469;
  margin: 0;
}

.navmenu .dropdown ul li a {
  white-space: normal;
  line-height: 1.35;
}

@media (max-width: 1199px) {
  .sk-topic-image {
    aspect-ratio: 16 / 10;
  }
}

/* Home hero: rotating professional image stack */
.sk-home-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  background: #222222;
}

.sk-home-hero .hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.sk-home-hero .hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  background-size: cover;
  background-position: center;
  animation: skHeroFade 32s infinite;
  transform: scale(1.04);
}

.sk-home-hero .slide-1 { background-image: linear-gradient(90deg, rgba(34,34,34,.94), rgba(34,34,34,.74) 48%, rgba(34,34,34,.62)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/shonee-kapoor-office-wide.jpeg); animation-delay: 0s; }
.sk-home-hero .slide-2 { background-image: linear-gradient(90deg, rgba(34,34,34,.94), rgba(34,34,34,.74) 48%, rgba(34,34,34,.62)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/shonee-kapoor-library.jpeg); animation-delay: 8s; }
.sk-home-hero .slide-3 { background-image: linear-gradient(90deg, rgba(34,34,34,.94), rgba(34,34,34,.74) 48%, rgba(34,34,34,.62)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/shonee-kapoor-office-laptop.jpeg); animation-delay: 16s; }
.sk-home-hero .slide-4 { background-image: linear-gradient(90deg, rgba(34,34,34,.94), rgba(34,34,34,.74) 48%, rgba(34,34,34,.62)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/hero-reference.jpeg); animation-delay: 24s; }

.sk-home-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(34,34,34,.10), rgba(34,34,34,.72));
}

.sk-home-hero .hero-content {
  position: relative;
  z-index: 1;
}

.sk-hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 20px 0 4px;
  color: rgba(255,255,255,.68);
  font-size: 13px;
  font-weight: 500;
}

.sk-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.sk-hero-proof i {
  color: #cc8809;
  font-size: 13px;
}

.sk-home-hero .hero-visual .profile-container {
  width: min(420px, 82vw);
  height: min(420px, 82vw);
}

.sk-home-hero .hero-visual .profile-container .profile-background {
  background: linear-gradient(135deg, rgba(135,73,74,.68), rgba(34,34,34,.88));
  border-radius: 8px;
  box-shadow: 0 28px 80px rgba(0,0,0,.34);
}

.sk-home-hero .hero-visual .profile-container .profile-image {
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  background: #222222;
  box-shadow: 0 22px 70px rgba(0,0,0,.34);
}
@keyframes skHeroFade {
  0% { opacity: 0; transform: scale(1.04); }
  7% { opacity: 1; }
  28% { opacity: 1; }
  36% { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@media (max-width: 991px) {
  .sk-home-hero .hero-visual .profile-container {
    margin: 36px auto 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sk-home-hero .hero-slide { animation: none; }
  .sk-home-hero .slide-1 { opacity: 1; }
}

/* SnapFolio reading layout with Blogy content bodies */
.sk-reading-page {
  background: #f8f7f4;
}

/* Legal topic / reading page hero – premium enterprise treatment */
.sk-reading-title {
  padding: clamp(48px, 7vh, 80px) 0 clamp(40px, 6vh, 68px);
  background:
    radial-gradient(ellipse 60% 100% at 0% 50%,
        rgba(135,73,74,.14) 0%,
        transparent 70%),
    radial-gradient(circle at 85% 20%,
        rgba(193,169,116,.06) 0%,
        transparent 50%),
    linear-gradient(160deg,
        #141414 0%,
        #1c1c1c 20%,
        #2a2225 45%,
        #4a2c2d 70%,
        #6d3a3b 88%,
        #87494a 100%);
  position: relative;
  overflow: hidden;
}

/* Geometric dot-grid pattern */
.sk-reading-title::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
  z-index: 0;
}

/* Soft radial warmth glow */
.sk-reading-title::after {
  content: '';
  position: absolute;
  top: -40%; right: -8%;
  width: 50%; height: 180%;
  background: radial-gradient(ellipse at center,
      rgba(135,73,74,.10) 0%,
      transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.sk-reading-title > * {
  position: relative;
  z-index: 1;
}

.sk-reading-title h1 {
  color: #ffffff;
  max-width: 900px;
  font-size: clamp(30px, 4.5vw, 50px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.02em;
  text-shadow: 0 2px 20px rgba(0,0,0,.25);
}

.sk-reading-title p,
.sk-reading-title .sk-page-subtitle {
  max-width: 720px;
  color: rgba(255, 255, 255, .70);
  font-size: clamp(14px, 1.3vw, 17px);
  line-height: 1.65;
}

/* Glassmorphism breadcrumbs for reading pages */
.sk-reading-title .breadcrumbs ol {
  margin: 0;
  padding: 6px 14px;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 6px;
}

.sk-reading-title .breadcrumbs ol li {
  display: flex;
  align-items: center;
  font-size: 12.5px;
}

.sk-reading-title .breadcrumbs a,
.sk-reading-title .breadcrumbs .current {
  color: rgba(255, 255, 255, .60);
  font-size: 12.5px;
  text-decoration: none;
  transition: color .2s;
}

.sk-reading-title .breadcrumbs a:hover {
  color: #c1a974;
}

.sk-reading-title .breadcrumbs ol li + li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  margin: 0 10px;
  border-top: 1.5px solid rgba(255,255,255,.28);
  border-right: 1.5px solid rgba(255,255,255,.28);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.sk-reading-title .breadcrumbs .current {
  color: #c1a974 !important;
  font-weight: 600;
}

.sk-reading-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: clamp(10px, 1.5vh, 16px);
  color: #c1a974;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.sk-reading-kicker::before {
  content: "";
  width: 32px;
  height: 2px;
  background: linear-gradient(90deg, #c1a974, rgba(193,169,116,.3));
  border-radius: 1px;
}

.sk-reading-section {
  background: linear-gradient(180deg, #f8f7f4 0%, #ffffff 44%, #f4f1f0 100%);
}

.sk-blog-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  grid-template-rows: auto auto;
  gap: 20px;
  margin-bottom: 44px;
}

.sk-blog-card {
  min-height: 295px;
  overflow: hidden;
  border-radius: 10px;
  background: #222222;
  box-shadow: 0 18px 46px rgba(34, 34, 34, 0.18);
}

.sk-blog-card.featured {
  grid-column: 1;
  grid-row: span 2;
  min-height: 610px;
}

.sk-blog-card a {
  position: relative;
  display: block;
  height: 100%;
  color: #ffffff;
}

.sk-blog-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.sk-blog-card:hover img {
  transform: scale(1.05);
}

.sk-blog-card-content {
  position: absolute;
  inset: auto 0 0;
  padding: 24px;
  background: linear-gradient(0deg, rgba(13, 21, 29, 0.96), rgba(13, 21, 29, 0.12));
}

.sk-blog-card h2,
.sk-blog-card h3 {
  margin: 10px 0 0;
  color: #ffffff;
  line-height: 1.16;
}

.sk-blog-card h2 {
  font-size: clamp(28px, 3vw, 40px);
}

.sk-blog-card h3 {
  font-size: 21px;
}

.sk-blog-card p {
  margin: 12px 0 0;
  color: rgba(255, 255, 255, 0.78);
}

.sk-post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #c1a974;
  font-size: 13px;
  font-weight: 800;
}

.sk-post-meta.muted {
  color: #797979;
}

.sk-reading-layout,
.sk-detail-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: 28px;
  align-items: start;
}

.sk-reading-list {
  display: grid;
  gap: 22px;
}

.sk-reading-list-item {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 24px;
  padding: 20px;
  border: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(34, 34, 34, 0.08);
}

.sk-reading-thumb img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 8px;
}

.sk-reading-list-content h2 {
  margin: 8px 0;
  font-size: 25px;
  line-height: 1.18;
}

.sk-reading-list-content h2 a {
  color: #222222;
}

.sk-reading-list-content p {
  color: #797979;
  margin-bottom: 14px;
}

.sk-list-footer {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  color: #797979;
  font-weight: 700;
}

.sk-list-footer a {
  color: #87494a;
}

.sk-result-note {
  margin-bottom: 20px;
  padding: 14px 18px;
  border-left: 4px solid #87494a;
  border-radius: 8px;
  background: #ffffff;
}

.sk-reading-aside {
  position: relative;
}

.sk-reading-sidebar {
  position: sticky;
  top: 28px;
}

.sk-reading-widget {
  margin-bottom: 18px;
  padding: 18px 18px;
  border: 1px solid rgba(34, 34, 34, 0.08);
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 8px 22px rgba(34, 34, 34, 0.06);
}

.sk-reading-widget h3 {
  margin-bottom: 12px;
  color: #222222;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.sk-reading-widget a {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  color: #222222;
  border-top: 1px solid rgba(34, 34, 34, 0.09);
}

.sk-reading-widget a i {
  color: #87494a;
}

.sk-reading-widget a:hover {
  color: #87494a;
}

.sk-search-widget form {
  display: flex;
  border: 1px solid rgba(34, 34, 34, 0.16);
  border-radius: 8px;
  overflow: hidden;
}

.sk-search-widget input {
  min-width: 0;
  flex: 1;
  border: 0;
  padding: 10px 12px;
  font-size: 14px;
}

.sk-search-widget button {
  width: 42px;
  border: 0;
  background: #87494a;
  color: #ffffff;
}

.sk-recent-link {
  align-items: center;
  justify-content: flex-start !important;
}

.sk-recent-link img {
  width: 52px;
  height: 52px;
  object-fit: cover;
  border-radius: 8px;
}

.sk-recent-link strong,
.sk-recent-link small {
  display: block;
}

.sk-recent-link small {
  margin-top: 4px;
  color: #797979;
}

.sk-consult-widget p {
  color: #797979;
}

.sk-widget-button {
  justify-content: center !important;
  margin-top: 10px;
  padding: 12px 14px !important;
  border: 0 !important;
  border-radius: 8px;
  background: #87494a;
  color: #ffffff !important;
  font-weight: 800;
}

.sk-widget-button.secondary {
  background: #222222;
}

.sk-blog-article {
  overflow: hidden;
  border: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 18px 46px rgba(34, 34, 34, 0.1);
}

.sk-article-hero {
  position: relative;
  height: 320px;
  max-height: 360px;
  overflow: hidden;
}

.sk-article-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.sk-article-overlay {
  position: absolute;
  left: 28px;
  bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  background: rgba(34, 34, 34, 0.88);
  color: #ffffff;
  font-weight: 800;
}

.sk-article-content {
  padding: 28px 30px;
}

.sk-article-header h1 {
  margin-bottom: 18px;
  color: #222222;
  font-size: clamp(26px, 2.6vw, 38px);
  line-height: 1.18;
  font-weight: 800;
}

.sk-author-strip {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  padding-bottom: 24px;
  margin-bottom: 28px;
  border-bottom: 1px solid rgba(34, 34, 34, 0.12);
}

.sk-author-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.sk-author-info img {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 50%;
}

.sk-author-info h4 {
  margin: 0;
  color: #222222;
}

.sk-author-info span {
  color: #797979;
}

.sk-article-body {
  color: #333333;
  font-size: 17px;
  line-height: 1.78;
}

.sk-article-body .lead {
  color: #222222;
  font-size: 21px;
  font-weight: 700;
}

.sk-article-body h2,
.sk-article-body h3 {
  margin-top: 34px;
  color: #222222;
}

.sk-article-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.sk-article-body blockquote,
.sk-article-body .highlight-box {
  margin: 30px 0;
  padding: 26px;
  border-left: 4px solid #87494a;
  border-radius: 8px;
  background: #f8f7f4;
}

.sk-highlight-box,
.sk-legal-note {
  margin: 30px 0;
  padding: 26px;
  border-left: 4px solid #87494a;
  border-radius: 8px;
  background: #f8f7f4;
}

.sk-highlight-box ul {
  margin: 14px 0 0;
  padding-left: 20px;
}

.sk-info-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin: 30px 0;
}

.sk-info-grid > div {
  padding: 22px;
  border: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 8px;
  background: #f8f7f4;
}

.sk-info-grid i {
  color: #87494a;
  font-size: 28px;
}

.sk-info-grid h3 {
  margin: 12px 0 8px;
  color: #222222;
  font-size: 20px;
}

.sk-topic-tags,
.sk-share-strip {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 30px;
  padding-top: 24px;
  border-top: 1px solid rgba(34, 34, 34, 0.12);
}

.sk-topic-tags h3,
.sk-share-strip h3 {
  margin: 0;
  color: #222222;
  font-size: 20px;
}

.sk-topic-tags div,
.sk-share-strip div {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.sk-topic-tags span {
  padding: 8px 12px;
  border-radius: 8px;
  background: #f8f7f4;
  color: #87494a;
  font-weight: 800;
}

.sk-share-strip a {
  display: inline-flex;
  width: 38px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #222222;
  color: #ffffff;
}

.sk-author-panel,
.sk-comment-panel {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 28px;
  margin-top: 34px;
  padding: 28px;
  border: 1px solid rgba(34, 34, 34, 0.1);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: 0 16px 38px rgba(34, 34, 34, 0.08);
}

.sk-author-photo img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 8px;
}

.sk-author-panel h2,
.sk-comment-panel h2 {
  color: #222222;
}

.sk-author-panel p,
.sk-comment-panel p {
  color: #797979;
}

.sk-author-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.sk-author-actions a,
.sk-submit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;
  background: #87494a;
  color: #ffffff;
  font-weight: 800;
}

.sk-author-actions a + a {
  background: #222222;
}

.sk-related-section {
  margin-top: 42px;
}

.sk-related-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
}

.sk-related-card {
  overflow: hidden;
  border-radius: 8px;
  background: #ffffff;
  border: 1px solid rgba(34, 34, 34, 0.1);
}

.sk-related-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.sk-related-card span,
.sk-related-card h3 {
  display: block;
  padding: 0 18px;
}

.sk-related-card span {
  padding-top: 16px;
  color: #87494a;
  font-size: 13px;
  font-weight: 800;
}

.sk-related-card h3 {
  padding-bottom: 18px;
  color: #222222;
  font-size: 19px;
  line-height: 1.2;
}

.sk-comment-panel {
  grid-template-columns: 0.6fr 1fr;
}

.sk-comment-panel .form-control {
  min-height: 48px;
  border-color: rgba(34, 34, 34, 0.16);
  border-radius: 8px;
}

@media (max-width: 1199px) {
  .sk-blog-grid,
  .sk-reading-layout,
  .sk-detail-layout,
  .sk-related-grid,
  .sk-comment-panel {
    grid-template-columns: 1fr;
  }

  .sk-blog-card,
  .sk-blog-card.featured {
    min-height: 360px;
  }

  .sk-reading-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .sk-reading-list-item,
  .sk-author-panel,
  .sk-info-grid {
    grid-template-columns: 1fr;
  }

  .sk-article-content {
    padding: 24px;
  }

  .sk-article-overlay {
    left: 18px;
    right: 18px;
    bottom: 18px;
  }
}

/* ===========================================================
   ARTICLES INDEX � BLOGY-INSPIRED SECTIONS (SK Theme)
   =========================================================== */

/* -- Section Title -- */
.sk-section-title {
  text-align: center;
  padding-bottom: 50px;
}

.sk-section-title h2 {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #87494a;
  margin-bottom: 6px;
}

.sk-section-title div {
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 800;
  color: #222222;
  line-height: 1.2;
}

.sk-section-title .description-title {
  color: #87494a;
}

/* -- Featured Posts Slider -- */
.sk-featured-posts {
  padding: 60px 0;
  background: #f8f7f4;
}

.sk-blog-post-item {
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(34, 34, 34, 0.08);
  box-shadow: 0 12px 32px rgba(34, 34, 34, 0.08);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sk-blog-post-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(34, 34, 34, 0.14);
}

.sk-blog-post-item > img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.sk-blog-post-content {
  padding: 22px 24px 26px;
}

.sk-blog-post-content .post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
  color: #797979;
  font-size: 13px;
  font-weight: 600;
}

.sk-blog-post-content .post-meta i {
  margin-right: 4px;
  color: #87494a;
}

.sk-blog-post-content h2 {
  margin: 0 0 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.25;
  color: #222222;
}

.sk-blog-post-content h2 a {
  color: inherit;
  text-decoration: none;
}

.sk-blog-post-content h2 a:hover {
  color: #87494a;
}

.sk-blog-post-content p {
  margin: 0 0 16px;
  color: #797979;
  font-size: 14px;
  line-height: 1.6;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sk-blog-post-content .read-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #87494a;
  font-weight: 800;
  font-size: 14px;
  text-decoration: none;
  transition: gap 0.2s ease;
}

.sk-blog-post-content .read-more:hover {
  gap: 10px;
}

/* -- Category Section -- */
.sk-category-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%);
}

.sk-featured-post {
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(34, 34, 34, 0.08);
  box-shadow: 0 12px 32px rgba(34, 34, 34, 0.08);
  transition: transform 0.3s ease;
}

.sk-featured-post:hover {
  transform: translateY(-4px);
}

.sk-featured-post .post-img {
  overflow: hidden;
}

.sk-featured-post .post-img img {
  width: 100%;
  height: 220px;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.sk-featured-post:hover .post-img img {
  transform: scale(1.05);
}

.sk-featured-post .post-content {
  padding: 20px 22px 24px;
}

.sk-featured-post .category-meta {
  margin-bottom: 12px;
}

.sk-featured-post .post-category {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(135, 73, 74, 0.12);
  color: #87494a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.sk-featured-post .author-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}

.sk-featured-post .author-img {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
}

.sk-featured-post .author-name {
  font-size: 13px;
  font-weight: 700;
  color: #222222;
}

.sk-featured-post .post-date {
  font-size: 12px;
  color: #797979;
}

.sk-featured-post .post-date::before {
  content: "�";
  margin: 0 6px;
}

.sk-featured-post .title {
  margin: 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
}

.sk-featured-post .title a {
  color: #222222;
  text-decoration: none;
}

.sk-featured-post .title a:hover {
  color: #87494a;
}

/* -- Category List Posts -- */
.sk-list-post {
  display: flex;
  gap: 18px;
  padding: 16px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(34, 34, 34, 0.06);
  box-shadow: 0 6px 18px rgba(34, 34, 34, 0.05);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sk-list-post:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(34, 34, 34, 0.1);
}

.sk-list-post .post-img {
  flex-shrink: 0;
  width: 110px;
  height: 90px;
  border-radius: 8px;
  overflow: hidden;
}

.sk-list-post .post-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sk-list-post .post-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.sk-list-post .post-category {
  display: inline-block;
  margin-bottom: 6px;
  color: #87494a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sk-list-post .title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
}

.sk-list-post .title a {
  color: #222222;
  text-decoration: none;
}

.sk-list-post .title a:hover {
  color: #87494a;
}

.sk-list-post .post-meta {
  display: flex;
  gap: 12px;
  color: #797979;
  font-size: 12px;
}

/* -- Latest Posts Grid -- */
.sk-latest-posts {
  padding: 60px 0;
  background: #f8f7f4;
}

.sk-latest-card {
  overflow: hidden;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(34, 34, 34, 0.08);
  box-shadow: 0 12px 32px rgba(34, 34, 34, 0.08);
  transition: transform 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.sk-latest-card:hover {
  transform: translateY(-4px);
}

.sk-latest-card .post-img {
  overflow: hidden;
}

.sk-latest-card .post-img img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  transition: transform 0.45s ease;
}

.sk-latest-card:hover .post-img img {
  transform: scale(1.05);
}

.sk-latest-card .post-category {
  display: inline-block;
  margin: 18px 22px 0;
  padding: 4px 12px;
  border-radius: 4px;
  background: rgba(135, 73, 74, 0.12);
  color: #87494a;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.sk-latest-card .title {
  margin: 12px 22px 0;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.25;
  flex-grow: 1;
}

.sk-latest-card .title a {
  color: #222222;
  text-decoration: none;
}

.sk-latest-card .title a:hover {
  color: #87494a;
}

.sk-latest-card .card-author {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 22px 22px;
}

.sk-latest-card .post-author-img {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}

.sk-latest-card .card-author .post-meta {
  line-height: 1.3;
}

.sk-latest-card .card-author .post-author {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #222222;
}

.sk-latest-card .card-author .post-date {
  margin: 0;
  font-size: 12px;
  color: #797979;
}

/* -- Newsletter CTA -- */
.sk-newsletter-cta {
  padding: 60px 0;
  background: linear-gradient(180deg, #f8f7f4 0%, #e0dbd5 100%);
}

.sk-cta-content h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 800;
  color: #222222;
  margin-bottom: 14px;
}

.sk-cta-content p {
  color: #797979;
  font-size: 16px;
  margin-bottom: 24px;
}

.sk-cta-content .input-group {
  max-width: 480px;
}

.sk-cta-content .form-control {
  min-height: 50px;
  border: 1px solid rgba(34, 34, 34, 0.16);
  border-radius: 8px 0 0 8px;
  font-size: 15px;
}

.sk-cta-content .btn-primary {
  background: #87494a;
  border-color: #87494a;
  border-radius: 0 8px 8px 0;
  font-weight: 800;
  padding: 0 24px;
}

.sk-cta-content .btn-primary:hover {
  background: #6f3839;
  border-color: #6f3839;
}

.sk-cta-image img {
  max-width: 320px;
  width: 100%;
}

/* -- Responsive: Articles Index Sections -- */
@media (max-width: 991px) {
  .sk-featured-post .post-img img {
    height: 180px;
  }

  .sk-latest-card .post-img img {
    height: 180px;
  }

  .sk-blog-post-item > img {
    height: 200px;
  }
}

@media (max-width: 767px) {
  .sk-section-title {
    padding-bottom: 34px;
  }

  .sk-list-post {
    flex-direction: column;
  }

  .sk-list-post .post-img {
    width: 100%;
    height: 160px;
  }

  .sk-cta-image {
    text-align: center;
  }
}

@media (max-width: 575px) {
  .sk-blog-post-content h2 {
    font-size: 18px;
  }

  .sk-featured-post .title {
    font-size: 17px;
  }

  .sk-latest-card .title {
    font-size: 17px;
  }
}




/* Official-site inspired hero composition */
.sk-home-hero {
  min-height: 100vh;
  display: flex;
  align-items: center;
}

.sk-home-hero .hero-slide {
  background-position: center;
}

.sk-home-hero .slide-1 { background-image: linear-gradient(90deg, rgba(34,34,34,.95), rgba(34,34,34,.86) 48%, rgba(34,34,34,.72)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/shonee-kapoor-office-laptop.jpeg); }
.sk-home-hero .slide-2 { background-image: linear-gradient(90deg, rgba(34,34,34,.95), rgba(34,34,34,.86) 48%, rgba(34,34,34,.72)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/shonee-kapoor-office-wide.jpeg); }
.sk-home-hero .slide-3 { background-image: linear-gradient(90deg, rgba(34,34,34,.95), rgba(34,34,34,.86) 48%, rgba(34,34,34,.72)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/shonee-kapoor-library.jpeg); }
.sk-home-hero .slide-4 { background-image: linear-gradient(90deg, rgba(34,34,34,.95), rgba(34,34,34,.86) 48%, rgba(34,34,34,.72)), url(/App_Themes/FrontEnd/SnapFolio/assets/img/law/hero-reference.jpeg); }

.sk-home-hero::after {
  background: linear-gradient(90deg, rgba(34,34,34,.24), rgba(34,34,34,.08));
}

.sk-home-hero .hero-text {
  max-width: 820px;
}

.sk-hero-eyebrow {
  margin-bottom: 16px;
  color: #cc8809;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  opacity: .88;
}

.sk-home-hero .hero-text h1 {
  margin-bottom: 6px;
  color: #ffffff;
  font-size: clamp(36px, 5.5vw, 58px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.5px;
}

/* Keep "Shonee Kapoor" on one line; accent just for visual warmth */
.sk-home-hero .hero-text h1 .accent-text {
  display: inline;
  color: #ffffff;
}

.sk-home-hero .hero-text h2 {
  margin-bottom: 20px;
  color: rgba(255,255,255,.72);
  font-size: clamp(16px, 1.8vw, 21px);
  font-weight: 400;
  line-height: 1.35;
  letter-spacing: .2px;
}

/* Gold colour on "Misuse Of Law" � no dated underline border */
.sk-home-hero .hero-text h2 span {
  color: #cc8809;
  border-bottom: none;
}

/* Show the typed-text lead line (was hidden) */
.sk-home-hero .hero-text .lead {
  display: block;
  color: rgba(255,255,255,.65);
  font-size: 14px;
  font-weight: 400;
  margin-bottom: 14px;
}

.sk-home-hero .hero-text .description {
  max-width: 600px;
  color: rgba(255,255,255,.72);
  font-size: 15px;
  line-height: 1.68;
}

.sk-home-hero .hero-actions {
  margin-top: 24px;
}

.sk-home-hero .hero-actions .btn {
  min-width: 150px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 22px;
}

.sk-home-hero .hero-visual {
  justify-content: flex-end;
}

.sk-home-hero .hero-visual .profile-container.sk-official-hero-card {
  width: min(550px, 92vw);
  height: auto;
  overflow: hidden;
  border-radius: 4px;
  background: #333333;
  box-shadow: 0 30px 90px rgba(0,0,0,.36);
}

.sk-home-hero .hero-visual .profile-container.sk-official-hero-card .profile-image {
  position: static;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3.2;
  object-fit: cover;
  object-position: center;
  border-radius: 0;
  box-shadow: none;
}

.sk-official-card-caption {
  margin-top: -1px;
  padding: 20px 28px 24px;
  background: #333333;
  color: #ffffff;
}

.sk-official-card-caption h3 {
  margin: 0 0 4px;
  color: #ffffff;
  font-size: 17px;
  font-weight: 700;
}

.sk-official-card-caption p {
  margin: 0 0 10px;
  color: rgba(255,255,255,.55);
  font-size: 13px;
}

.sk-official-card-caption span {
  color: rgba(255,255,255,.48);
  font-size: 12px;
}

@media (max-width: 991px) {
  .sk-home-hero .hero-text h1 {
    font-size: clamp(32px, 9vw, 48px);
  }

  .sk-home-hero .hero-visual {
    justify-content: center;
  }

  .sk-home-hero .hero-visual .profile-container.sk-official-hero-card {
    margin: 38px auto 0;
  }

  .sk-official-card-caption {
    padding: 24px;
  }
}

/*--------------------------------------------------------------
# Frontend pagination + blog grid (added by SK redesign)
--------------------------------------------------------------*/
.sk-pagination {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin: 30px 0 10px;
}

.sk-pagination a,
.sk-pagination span {
    min-width: 38px;
    padding: 8px 12px;
    border: 1px solid rgba(34, 34, 34, 0.12);
    border-radius: 8px;
    background: #ffffff;
    color: #222222;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: all .2s;
}

.sk-pagination a:hover {
    background: #87494a;
    color: #ffffff;
    border-color: #87494a;
}

.sk-pagination .current {
    background: #222222;
    color: #ffffff;
    border-color: #222222;
}

.sk-pagination .disabled {
    opacity: .45;
    pointer-events: none;
}

.sk-results-meta {
    margin: 0 0 18px;
    color: #797979;
    font-size: 14px;
}

.sk-blog-related-section {
    margin-top: 38px;
}

.sk-blog-related-section .sk-related-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

@media (max-width: 991px) {
    .sk-reading-list-item {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1199px) {
    .sk-reading-layout,
    .sk-detail-layout {
        grid-template-columns: 1fr;
    }
    .sk-blog-grid {
        grid-template-columns: 1fr 1fr;
    }
    .sk-blog-card.featured {
        grid-column: 1 / -1;
        grid-row: auto;
        min-height: 380px;
    }
}

@media (max-width: 767px) {
    .sk-blog-grid {
        grid-template-columns: 1fr;
    }
    .sk-blog-card,
    .sk-blog-card.featured {
        min-height: 280px;
        grid-column: auto;
    }
}

/* -- Article body link + typography -- */
.sk-article-body a {
    color: #87494a;
    text-decoration: underline;
    text-decoration-color: rgba(135, 73, 74, 0.4);
    text-underline-offset: 3px;
}

.sk-article-body a:hover {
    color: #6f3839;
    text-decoration-color: #6f3839;
}

.sk-article-body ul,
.sk-article-body ol {
    padding-left: 24px;
    margin-bottom: 20px;
}

.sk-article-body li {
    margin-bottom: 6px;
    line-height: 1.75;
}

.sk-article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 24px 0;
    font-size: 15px;
}

.sk-article-body table th {
    background: #222222;
    color: #ffffff;
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
}

.sk-article-body table td {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(34, 34, 34, 0.1);
}

.sk-article-body table tr:nth-child(even) td {
    background: #f8f7f4;
}

/* -- Reading progress bar -- */
.sk-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(90deg, #87494a, #c1a974);
    z-index: 9999;
    transition: width 0.1s linear;
}

/* -- Detail page hero height improvement -- */
@media (min-width: 992px) {
    .sk-article-hero {
        height: 400px;
        max-height: 480px;
    }
}

/* -- Post category badge in latest card -- */
.sk-latest-card .post-category {
    margin-bottom: 0;
}

/* -- Sidebar search input outline fix -- */
.sk-search-widget input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px rgba(135, 73, 74, 0.4);
}

/* -- Comment count badge -- */
.comment-count {
    color: #797979;
    font-size: 0.88em;
    font-weight: 400;
}

/* -- CTA button alignment in Judgements CTA section -- */
.sk-newsletter-cta .btn {
    min-height: 48px;
    display: inline-flex;
    align-items: center;
}

/*--------------------------------------------------------------
# Layout: Sidebar Width Optimisation (overrides main.css)
--------------------------------------------------------------*/
.header {
    width: 200px;
    padding: 0 8px;
}

.header .header-container {
    padding: 12px;
    border-radius: 14px;
}

@media (min-width: 1200px) {
    .header ~ main,
    .header ~ #footer {
        margin-left: 216px;
    }
}

.header .nav-logo {
    padding-bottom: 14px !important;
}

.header .nav-logo img {
    max-width: 158px;
}

/*--------------------------------------------------------------
# Reading Layout: Sidebar Width
--------------------------------------------------------------*/
.sk-reading-layout,
.sk-detail-layout {
    grid-template-columns: minmax(0, 1fr) 252px;
    gap: 22px;
}

/*--------------------------------------------------------------
# Bootstrap Pagination � sk Theme
--------------------------------------------------------------*/
.sk-pagination-wrap {
    margin: 28px 0 4px;
}

.pagination.sk-pagination {
    gap: 3px;
    margin-bottom: 0;
}

.pagination.sk-pagination .page-link {
    border: 1px solid rgba(34, 34, 34, .12);
    border-radius: 8px !important;
    color: #222222;
    font-weight: 700;
    font-size: 14px;
    min-width: 40px;
    text-align: center;
    padding: 8px 12px;
    background: #ffffff;
    transition: all .2s;
}

.pagination.sk-pagination .page-link:hover,
.pagination.sk-pagination .page-link:focus {
    background: #87494a;
    border-color: #87494a;
    color: #ffffff;
    box-shadow: none;
    outline: none;
}

.pagination.sk-pagination .page-item.active .page-link {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
}

.pagination.sk-pagination .page-item.disabled .page-link {
    opacity: .36;
    background: transparent;
    border-color: rgba(34, 34, 34, .08);
    color: #797979;
    pointer-events: none;
}

.pagination.sk-pagination .sk-ellipsis {
    border: none !important;
    background: transparent !important;
    color: #797979 !important;
    cursor: default;
    min-width: auto;
    padding: 8px 4px;
}

@media (max-width: 575px) {
    .pagination.sk-pagination .page-link {
        min-width: 34px;
        padding: 6px 8px;
        font-size: 13px;
    }
}

/*--------------------------------------------------------------
# Section Spacing Scale
--------------------------------------------------------------*/
.sk-hero-section    { padding: 40px 0; }
.sk-featured-posts  { padding: 46px 0; }
.sk-category-section{ padding: 46px 0; }
.sk-latest-posts    { padding: 46px 0; }
.sk-all-posts       { padding: 46px 0; }
.sk-cta-strip       { padding: 42px 0; }
.sk-section-title   { padding-bottom: 32px; }

.sk-reading-section.section { padding-top: 46px; padding-bottom: 46px; }

/*--------------------------------------------------------------
# Dropdown item spacing fix
--------------------------------------------------------------*/
.navmenu .dropdown ul {
    padding: 4px 8px;
}

.navmenu .dropdown ul li a {
    font-size: 13px;
    padding: 7px 8px;
    min-height: 30px;
}

/* ===========================================================
   ARTICLES INDEX � NEW SK CLASSES (Index.cshtml v2)
   =========================================================== */

/* -- Page title bar -- */
.sk-page-subtitle {
    color: rgba(255,255,255,.72);
    font-size: 15px;
    max-width: 740px;
}

/* -- Language toggle tabs -- */
.sk-lang-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sk-lang-tab {
    display: inline-block;
    padding: 7px 18px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 30px;
    color: rgba(255,255,255,.72);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
}

.sk-lang-tab:hover {
    border-color: #87494a;
    color: #87494a;
}

.sk-lang-tab.active {
    background: #87494a;
    border-color: #87494a;
    color: #ffffff;
}

/* -- Hero section -- */
.sk-hero-section {
    background: #f8f7f4;
    padding: 50px 0;
}

/* -- Section label (kicker above h2) -- */
.sk-section-label {
    display: block;
    margin-bottom: 6px;
    color: #87494a;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
}

/* Override sk-section-title h2 to be large heading */
.sk-section-title h2 {
    font-size: clamp(24px, 3vw, 34px) !important;
    font-weight: 800 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    color: #222222 !important;
    margin-bottom: 0 !important;
}

/* -- Category badge -- */
.sk-cat-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 4px;
    background: rgba(135,73,74,.14);
    color: #87494a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    white-space: nowrap;
}

.sk-cat-badge.sm {
    font-size: 10px;
    padding: 2px 8px;
}

/* -- Slide card (Swiper �2) -- */
.sk-slide-card {
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.08);
    box-shadow: 0 12px 32px rgba(34,34,34,.08);
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: transform .3s ease;
}

.sk-slide-card:hover {
    transform: translateY(-4px);
}

.sk-slide-img {
    overflow: hidden;
    flex-shrink: 0;
}

.sk-slide-img img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .45s ease;
}

.sk-slide-card:hover .sk-slide-img img {
    transform: scale(1.05);
}

.sk-slide-body {
    padding: 20px 22px 24px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.sk-slide-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    color: #797979;
    font-size: 12px;
}

.sk-slide-meta i {
    color: #87494a;
}

.sk-slide-body h3 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.28;
    flex: 1;
}

.sk-slide-body h3 a {
    color: #222222;
    text-decoration: none;
}

.sk-slide-body h3 a:hover {
    color: #87494a;
}

.sk-slide-body p {
    margin: 0 0 14px;
    color: #797979;
    font-size: 13px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sk-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #87494a;
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
    transition: gap .2s;
}

.sk-read-more:hover {
    gap: 10px;
    color: #6f3839;
}

/* -- Cat card (�3 featured 3-col) -- */
.sk-cat-card {
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.08);
    box-shadow: 0 10px 28px rgba(34,34,34,.07);
    transition: transform .3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.sk-cat-card:hover {
    transform: translateY(-4px);
}

.sk-cat-card-img {
    overflow: hidden;
}

.sk-cat-card-img img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    transition: transform .45s ease;
}

.sk-cat-card:hover .sk-cat-card-img img {
    transform: scale(1.05);
}

.sk-cat-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.sk-cat-card-body h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    line-height: 1.28;
    flex: 1;
}

.sk-cat-card-body h3 a {
    color: #222222;
    text-decoration: none;
}

.sk-cat-card-body h3 a:hover {
    color: #87494a;
}

.sk-card-foot {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    color: #797979;
    font-size: 12px;
}

.sk-card-foot i {
    margin-right: 3px;
    color: #87494a;
}

/* -- List card (�3 list 6-items) -- */
.sk-list-card {
    display: flex;
    gap: 14px;
    padding: 14px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.06);
    box-shadow: 0 6px 18px rgba(34,34,34,.05);
    transition: transform .3s, box-shadow .3s;
}

.sk-list-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(34,34,34,.1);
}

.sk-list-card-img {
    flex-shrink: 0;
    width: 90px;
    height: 76px;
    border-radius: 8px;
    overflow: hidden;
}

.sk-list-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.sk-list-card-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    min-width: 0;
}

.sk-list-card-body h4 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
}

.sk-list-card-body h4 a {
    color: #222222;
    text-decoration: none;
}

.sk-list-card-body h4 a:hover {
    color: #87494a;
}

/* -- Latest section (�4) -- */
.sk-latest-img {
    overflow: hidden;
}

.sk-latest-img img {
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .45s ease;
}

.sk-latest-card:hover .sk-latest-img img {
    transform: scale(1.05);
}

.sk-latest-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}

.sk-latest-body h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
    flex: 1;
}

.sk-latest-body h3 a {
    color: #222222;
    text-decoration: none;
}

.sk-latest-body h3 a:hover {
    color: #87494a;
}

/* -- All posts section (�5) -- */
.sk-all-posts {
    background: #ffffff;
    padding: 60px 0;
}

.sk-post-list {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.sk-post-row {
    display: flex;
    gap: 20px;
    padding: 18px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.08);
    box-shadow: 0 8px 22px rgba(34,34,34,.06);
    transition: box-shadow .3s;
}

.sk-post-row:hover {
    box-shadow: 0 14px 36px rgba(34,34,34,.12);
}

.sk-post-row-img {
    flex-shrink: 0;
    width: 160px;
    height: 130px;
    border-radius: 8px;
    overflow: hidden;
    display: block;
}

.sk-post-row-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .45s ease;
}

.sk-post-row:hover .sk-post-row-img img {
    transform: scale(1.05);
}

.sk-post-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sk-post-row-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    color: #797979;
    font-size: 12px;
}

.sk-post-row-meta i {
    margin-right: 3px;
    color: #87494a;
}

.sk-post-row-body h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.25;
}

.sk-post-row-body h3 a {
    color: #222222;
    text-decoration: none;
}

.sk-post-row-body h3 a:hover {
    color: #87494a;
}

.sk-post-row-body > p {
    margin: 0;
    color: #797979;
    font-size: 14px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.sk-post-row-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    color: #797979;
    font-size: 13px;
}

.sk-post-row-foot i {
    margin-right: 4px;
    color: #87494a;
}

/* -- Alert / search notice bar -- */
.sk-alert-bar {
    padding: 12px 16px;
    border-left: 4px solid #87494a;
    border-radius: 8px;
    background: #f4f1f0;
    color: #797979;
    font-size: 14px;
}

.sk-alert-bar a {
    color: #87494a;
    font-weight: 700;
    text-decoration: none;
    margin-left: 6px;
}

/* -- Sidebar wrapper -- */
.sk-sidebar {
    position: sticky;
    top: 24px;
}

/* -- CTA strip -- */
.sk-cta-strip {
    padding: 54px 0;
    background: linear-gradient(135deg, #222222, #3c3c3c);
}

.sk-cta-strip h3 {
    color: #ffffff;
    font-size: clamp(22px, 2.6vw, 30px);
    font-weight: 800;
    margin-bottom: 8px;
}

.sk-cta-strip p {
    color: rgba(255,255,255,.68);
    margin: 0;
    font-size: 15px;
}

.sk-btn-primary,
.sk-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 10px 22px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    text-decoration: none;
    transition: all .2s;
    white-space: nowrap;
}

.sk-btn-primary {
    background: #87494a;
    color: #ffffff;
    border: 2px solid #87494a;
}

.sk-btn-primary:hover {
    background: #6f3839;
    border-color: #6f3839;
    color: #ffffff;
}

.sk-btn-outline {
    background: transparent;
    color: #222222;
    border: 2px solid rgba(34,34,34,.28);
}

.sk-btn-outline:hover {
    background: #222222;
    border-color: #222222;
    color: #ffffff;
}

/* -- Responsive: new index sections -- */
@media (max-width: 767px) {
    .sk-post-row {
        flex-direction: column;
    }

    .sk-post-row-img {
        width: 100%;
        height: 180px;
    }

    .sk-list-card {
        align-items: flex-start;
    }
}

@media (max-width: 575px) {
    .sk-slide-img img,
    .sk-latest-img img {
        height: 180px;
    }

    .sk-cat-card-img img {
        height: 170px;
    }

    .sk-lang-tab {
        padding: 6px 14px;
        font-size: 12px;
    }
}

/* ===========================================================
   FOOTER � SK Premium Legal Footer
   =========================================================== */

.sk-footer {
    background: linear-gradient(180deg, #ffffff, #f4f1f0);
    color: #687469;
}

.sk-footer-top {
    padding: 60px 0 40px;
    border-bottom: 1px solid rgba(34,34,34,.1);
}

.sk-footer-top h5 {
    color: #222222;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 18px;
}

.sk-footer-brand h3 {
    color: #222222;
    font-size: 22px;
    font-weight: 800;
    margin-bottom: 12px;
}

.sk-footer-brand > p {
    color: #687469;
    font-size: 14px;
    line-height: 1.65;
    margin-bottom: 20px;
}

.sk-footer-contact {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sk-footer-contact span {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #687469;
    font-size: 13px;
}

.sk-footer-contact i {
    color: #87494a;
    font-size: 14px;
    width: 16px;
    flex-shrink: 0;
}

.sk-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-footer-links li a {
    color: #687469;
    font-size: 13px;
    text-decoration: none;
    transition: color .2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sk-footer-links li a::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #87494a;
    flex-shrink: 0;
    opacity: .6;
}

.sk-footer-links li a:hover {
    color: #87494a;
}

.sk-footer-links li a:hover::before {
    opacity: 1;
}

.sk-footer-social {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.sk-footer-social a {
    display: inline-flex;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(34,34,34,.07);
    color: #687469;
    font-size: 16px;
    text-decoration: none;
    transition: all .2s;
    border: 1px solid rgba(34,34,34,.1);
}

.sk-footer-social a:hover {
    background: #87494a;
    border-color: #87494a;
    color: #ffffff;
}

.sk-footer-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    border-radius: 8px;
    background: #87494a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    transition: background .2s;
}

.sk-footer-cta:hover {
    background: #6f3839;
    color: #ffffff;
}

.sk-footer-bottom {
    padding: 22px 0;
}

.sk-footer-bottom p {
    margin: 0;
    color: rgba(34,34,34,.5);
    font-size: 13px;
    text-align: center;
}

.sk-footer-bottom strong {
    color: #687469;
}

/*--------------------------------------------------------------
# Insights & Legal Resources Section
--------------------------------------------------------------*/

/* -- Practice Areas � override inline dark styles for light theme -- */
#practice .p-4 {
    background: #ffffff !important;
    border: 1px solid rgba(34,34,34,.1) !important;
    box-shadow: 0 8px 22px rgba(34,34,34,.07);
}
#practice h5 { color: #222222 !important; }
#practice p  { color: #687469 !important; }


/*--------------------------------------------------------------
# Hero � Bootstrap Carousel Background Slider
--------------------------------------------------------------*/

/* Carousel sits behind all hero content */
.sk-hero-carousel {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.sk-hero-carousel .carousel-inner,
.sk-hero-carousel .carousel-item {
    height: 100%;
}

/* Each slide is a full-bleed background div */
.sk-hero-slide {
    height: 100%;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Hero section must be positioned so the carousel can fill it */
.sk-home-hero {
    position: relative;
    overflow: hidden;
}

/* Push hero-content above the carousel layer */
.sk-home-hero .hero-content {
    position: relative;
    z-index: 2;
}

/* Remove the old CSS-keyframe slideshow declarations that are no longer used */
.sk-home-hero .hero-slideshow {
    display: none;
}

/* Proof strip below CTA buttons */
.sk-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-top: 20px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    font-weight: 500;
}

.sk-hero-proof i {
    color: #cc8809;
    margin-right: 4px;
    font-size: 13px;
}

/* Carousel fade transition speed */
.sk-hero-carousel.carousel-fade .carousel-item {
    transition: opacity .9s ease-in-out;
}

@media (max-width: 991px) {
    .sk-hero-proof {
        gap: 14px;
        font-size: 13px;
    }
}

/*--------------------------------------------------------------
# About Page � SK Premium Styles
--------------------------------------------------------------*/

/* -- Profile Card (left sticky column) -- */
.sk-about-card {
    position: sticky;
    top: 100px;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(180deg, #222222, #222222);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 20px 50px rgba(0,0,0,.28);
}

.sk-about-card-img {
    position: relative;
    overflow: hidden;
}

.sk-about-card-img img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform .45s ease;
}

.sk-about-card:hover .sk-about-card-img img {
    transform: scale(1.03);
}

.sk-about-card-body {
    padding: 24px 26px 28px;
}

.sk-about-card-body h4 {
    margin: 0 0 4px;
    color: #ffffff;
    font-size: 21px;
    font-weight: 900;
}

.sk-about-role {
    margin: 0 0 10px;
    color: #87494a;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.sk-about-tagline {
    margin: 0 0 18px;
    color: rgba(255,255,255,.55);
    font-size: 13.5px;
    line-height: 1.6;
}

/* Meta chips: location, availability, experience, movement */
.sk-about-meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 18px;
}

.sk-about-meta span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    font-weight: 600;
}

.sk-about-meta span i {
    color: #87494a;
    font-size: 14px;
    flex-shrink: 0;
    width: 16px;
}

/* Divider */
.sk-divider {
    border: none;
    border-top: 1px solid rgba(255,255,255,.08);
    margin: 18px 0;
}

/* Contact links */
.sk-about-contact {
    display: flex;
    flex-direction: column;
    gap: 9px;
    margin-bottom: 22px;
}

.sk-about-contact a {
    display: flex;
    align-items: center;
    gap: 9px;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
}

.sk-about-contact a i {
    color: #87494a;
    font-size: 14px;
    flex-shrink: 0;
    width: 16px;
}

.sk-about-contact a:hover {
    color: #87494a;
}

/* -- Stats Strip -- */
.sk-about-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 36px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(34,34,34,.09);
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(34,34,34,.07);
}

.sk-about-stat {
    flex: 1 1 22%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 22px 14px;
    gap: 4px;
    border-right: 1px solid rgba(34,34,34,.06);
}

.sk-about-stat:last-child {
    border-right: none;
}

.sk-stat-num {
    display: block;
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 900;
    color: #87494a;
    line-height: 1;
}

.sk-stat-lbl {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: #797979;
    text-transform: uppercase;
    letter-spacing: .8px;
    line-height: 1.3;
}

/* -- Practice Area Items -- */
.sk-pa-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 16px;
    border-radius: 10px;
    background: #f8f7f4;
    border: 1px solid rgba(34,34,34,.07);
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}

.sk-pa-item:hover {
    box-shadow: 0 8px 24px rgba(34,34,34,.1);
    transform: translateY(-2px);
}

.sk-pa-item > i {
    font-size: 22px;
    color: #87494a;
    flex-shrink: 0;
    margin-top: 2px;
    width: 24px;
    text-align: center;
}

.sk-pa-item div strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #222222;
    margin-bottom: 6px;
    line-height: 1.3;
}

.sk-pa-item div p {
    margin: 0;
    color: #797979;
    font-size: 13px;
    line-height: 1.58;
}

/* -- Advisory Approach Points -- */
.sk-approach-point {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f8f7f4 0%, #ffffff 100%);
    border: 1px solid rgba(135,73,74,.15);
    height: 100%;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.sk-approach-point:hover {
    border-color: rgba(135,73,74,.35);
    box-shadow: 0 6px 20px rgba(135,73,74,.08);
}

.sk-approach-point > i {
    font-size: 20px;
    color: #87494a;
    flex-shrink: 0;
    margin-top: 2px;
    width: 22px;
    text-align: center;
}

.sk-approach-point div strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #222222;
    margin-bottom: 5px;
}

.sk-approach-point div p {
    margin: 0;
    color: #797979;
    font-size: 13px;
    line-height: 1.58;
}

/* -- Advisory Quote -- */
.sk-about-quote {
    margin: 26px 0 0;
    padding: 18px 22px;
    border-left: 4px solid #87494a;
    border-radius: 0 8px 8px 0;
    background: rgba(135,73,74,.05);
    color: #222222;
    font-size: 16px;
    font-style: italic;
    font-weight: 600;
    line-height: 1.55;
}

/* -- Thought Leadership / Media Tiles -- */
.sk-media-tile {
    padding: 22px 20px;
    border-radius: 12px;
    background: #f8f7f4;
    border: 1px solid rgba(34,34,34,.07);
    text-align: center;
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}

.sk-media-tile:hover {
    box-shadow: 0 10px 28px rgba(34,34,34,.1);
    transform: translateY(-3px);
}

.sk-media-tile > i {
    display: block;
    font-size: 30px;
    color: #87494a;
    margin-bottom: 12px;
}

.sk-media-tile h5 {
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 800;
    color: #222222;
}

.sk-media-tile p {
    margin: 0;
    color: #797979;
    font-size: 13px;
    line-height: 1.6;
}

/* -- Services Info Panel -- */
.sk-info-panel {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px 16px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.08);
    box-shadow: 0 6px 18px rgba(34,34,34,.05);
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}

.sk-info-panel:hover {
    box-shadow: 0 12px 32px rgba(34,34,34,.11);
    transform: translateY(-2px);
}

.sk-info-panel > i {
    font-size: 22px;
    color: #87494a;
}

.sk-info-panel h3 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #222222;
}

.sk-info-panel p {
    margin: 0;
    color: #797979;
    font-size: 13px;
    line-height: 1.58;
}

/* -- Why This Platform Stats -- */
.sk-platform-stat {
    padding: 22px 16px;
    border-radius: 12px;
    background: #f8f7f4;
    border: 1px solid rgba(34,34,34,.07);
    height: 100%;
    transition: box-shadow .25s ease, transform .25s ease;
}

.sk-platform-stat:hover {
    box-shadow: 0 8px 24px rgba(34,34,34,.09);
    transform: translateY(-3px);
}

.sk-platform-stat > i {
    display: block;
    font-size: 28px;
    color: #87494a;
    margin-bottom: 12px;
}

.sk-platform-stat strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #222222;
    margin-bottom: 6px;
}

.sk-platform-stat p {
    margin: 0;
    color: #797979;
    font-size: 13px;
    line-height: 1.6;
}

/* -- Office Cards -- */
.sk-office-card {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 18px 16px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.08);
    box-shadow: 0 6px 18px rgba(34,34,34,.05);
    height: 100%;
    transition: box-shadow .25s ease;
}

.sk-office-card:hover {
    box-shadow: 0 12px 30px rgba(34,34,34,.1);
}

.sk-office-card > i {
    font-size: 20px;
    color: #87494a;
    flex-shrink: 0;
    margin-top: 2px;
    width: 20px;
    text-align: center;
}

.sk-office-card div strong {
    display: block;
    font-size: 14px;
    font-weight: 800;
    color: #222222;
    margin-bottom: 4px;
}

.sk-office-card div p {
    margin: 0;
    color: #797979;
    font-size: 13px;
    line-height: 1.55;
}

/* -- About CTA Strip -- */
.sk-about-cta {
    margin-top: 12px;
    padding: 32px 34px;
    border-radius: 14px;
    background: linear-gradient(135deg, #222222, #3c3c3c);
    border: 1px solid rgba(255,255,255,.1);
    box-shadow: 0 16px 42px rgba(34,34,34,.22);
}

.sk-about-cta h4 {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: 20px;
    font-weight: 800;
}

.sk-about-cta p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: 14px;
    line-height: 1.65;
}

/* -- Responsive: About Page -- */
@media (max-width: 991px) {
    .sk-about-card {
        position: static;
        margin-bottom: 16px;
    }

    .sk-about-stats {
        flex-wrap: wrap;
    }

    .sk-about-stat {
        flex: 1 1 46%;
        border-right: none;
        border-bottom: 1px solid rgba(34,34,34,.06);
    }

    .sk-about-stat:nth-child(odd) {
        border-right: 1px solid rgba(34,34,34,.06);
    }

    .sk-about-stat:nth-last-child(-n+2) {
        border-bottom: none;
    }

    .sk-about-cta {
        padding: 24px 22px;
    }
}

@media (max-width: 575px) {
    .sk-about-card-body {
        padding: 20px 18px 22px;
    }

    .sk-about-stat {
        flex: 1 1 100%;
        border-right: none;
    }

    .sk-about-stat:last-child {
        border-bottom: none;
    }

    .sk-pa-item,
    .sk-approach-point,
    .sk-office-card {
        flex-direction: column;
    }

    .sk-about-cta h4 {
        font-size: 18px;
    }
}

/*--------------------------------------------------------------
# Legal Topic Pages � Premium Sections
--------------------------------------------------------------*/

/* -- Common Situations grid -- */
.sk-situation-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 20px 0 32px;
}

.sk-situation-card {
    position: relative;
    padding: 18px 18px 18px 52px;
    border-radius: 10px;
    background: #f8f7f4;
    border: 1px solid rgba(34,34,34,.07);
}

.sk-sit-num {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #87494a;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sk-situation-card p {
    margin: 0;
    font-size: 14px;
    line-height: 1.65;
    color: #797979;
}

/* -- Legal Process Steps -- */
.sk-process-steps {
    margin: 20px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sk-process-step {
    display: flex;
    gap: 18px;
    padding-bottom: 28px;
    position: relative;
}

.sk-process-step:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 46px;
    left: 22px;
    width: 2px;
    height: calc(100% - 20px);
    background: linear-gradient(180deg, rgba(135,73,74,.35), rgba(135,73,74,.08));
}

.sk-process-marker {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 46px;
}

.sk-step-num {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #222222;
    border: 2px solid #87494a;
    color: #87494a;
    font-size: 13px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    z-index: 1;
}

.sk-process-marker > i {
    font-size: 14px;
    color: rgba(135,73,74,.6);
    margin-top: 2px;
}

.sk-process-body {
    padding-top: 4px;
    flex: 1;
}

.sk-process-body h4 {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: 800;
    color: #222222;
}

.sk-process-body p {
    margin: 0;
    font-size: 14px;
    line-height: 1.68;
    color: #797979;
}

/* -- Rights Panel -- */
.sk-rights-panel {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 20px 22px;
    margin: 20px 0 32px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(135,73,74,.06), rgba(135,73,74,.03));
    border: 1px solid rgba(135,73,74,.2);
}

.sk-rights-panel > i {
    font-size: 24px;
    color: #87494a;
    flex-shrink: 0;
    margin-top: 2px;
}

.sk-rights-panel > div {
    font-size: 14.5px;
    line-height: 1.7;
    color: #222222;
}

/* -- Evidence checklist -- */
.sk-evidence-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sk-evidence-list li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 14px;
    line-height: 1.65;
    color: #797979;
}

.sk-evidence-list li i {
    color: #87494a;
    font-size: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}

/* -- Case References -- */
.sk-case-refs {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 20px 0 32px;
}

.sk-case-ref {
    padding: 16px 18px;
    border-left: 4px solid #87494a;
    border-radius: 0 10px 10px 0;
    background: #f8f7f4;
    border-top: 1px solid rgba(34,34,34,.06);
    border-right: 1px solid rgba(34,34,34,.06);
    border-bottom: 1px solid rgba(34,34,34,.06);
}

.sk-case-ref-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 8px;
}

.sk-case-ref-head strong {
    font-size: 14.5px;
    font-weight: 800;
    color: #222222;
}

.sk-case-ref-head span {
    font-size: 12px;
    font-weight: 700;
    color: #87494a;
    white-space: nowrap;
}

.sk-case-ref p {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.65;
    color: #797979;
}

/* -- Practical Tips -- */
.sk-tip-list {
    list-style: none;
    padding: 0;
    margin: 16px 0 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sk-tip-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border-radius: 10px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.07);
    box-shadow: 0 3px 10px rgba(34,34,34,.04);
    font-size: 14px;
    line-height: 1.65;
    color: #222222;
}

.sk-tip-list li i {
    color: #87494a;
    font-size: 16px;
    flex-shrink: 0;
    margin-top: 1px;
}

/* -- Strategy CTA box -- */
.sk-strategy-cta {
    margin: 20px 0 32px;
    padding: 22px 24px;
    border-radius: 10px;
    background: linear-gradient(135deg, #222222, #3c3c3c);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 16px;
}

.sk-strategy-cta p {
    margin: 0;
    color: rgba(255,255,255,.68);
    font-size: 14px;
    line-height: 1.6;
    flex: 1;
    min-width: 200px;
}

/* -- FAQ Accordion -- */
.sk-faq-accordion {
    margin: 16px 0 32px;
}

.sk-faq-item {
    border: 1px solid rgba(34,34,34,.09) !important;
    border-radius: 10px !important;
    overflow: hidden;
    margin-bottom: 8px;
}

.sk-faq-item .accordion-button {
    font-size: 14.5px;
    font-weight: 700;
    color: #222222;
    background: #ffffff;
    padding: 16px 20px;
    box-shadow: none !important;
}

.sk-faq-item .accordion-button:not(.collapsed) {
    color: #87494a;
    background: rgba(135,73,74,.04);
}

.sk-faq-item .accordion-button::after {
    filter: none;
    opacity: .6;
}

.sk-faq-item .accordion-button:not(.collapsed)::after {
    filter: none;
    opacity: 1;
}

.sk-faq-body {
    font-size: 14px;
    line-height: 1.72;
    color: #797979;
    padding: 4px 20px 20px;
    background: #ffffff;
}

/* -- Responsive -- */
@media (max-width: 767px) {
    .sk-situation-grid {
        grid-template-columns: 1fr;
    }

    .sk-strategy-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .sk-case-ref-head {
        flex-direction: column;
        gap: 2px;
    }
}

@media (max-width: 575px) {
    .sk-process-step {
        gap: 12px;
    }

    .sk-rights-panel {
        flex-direction: column;
        gap: 12px;
    }
}

/* ==========================================================================
   PHASE 3 � MENU ACTIVE STATE & DROPDOWN PERSISTENCE
   ========================================================================== */

/* -- Active dropdown child link -------------------------------------------- */
.navmenu .dropdown ul li a.active {
    color: #87494a;
    font-weight: 700;
    background: rgba(135,73,74,.09);
    border-left: 3px solid #87494a;
    padding-left: 17px; /* 20px default minus 3px border compensation */
}

/* Keep the dropdown parent caret rotated / highlighted when subtree is active */
.navmenu .dropdown.active > a {
    color: #87494a;
}

.navmenu .dropdown.active > a .toggle-dropdown {
    transform: rotate(180deg);
    color: #87494a;
}

/* -- Hover matches active style for consistency ----------------------------- */
.navmenu .dropdown ul li a:hover {
    color: #87494a;
    background: rgba(135,73,74,.06);
    padding-left: 17px;
    border-left: 3px solid rgba(135,73,74,.4);
}

/* AJAX loading � smooth fade while language results load */
#main section:not(.sk-cta-strip) {
    transition: opacity .2s ease;
}

/* ==========================================================================
   READING LAYOUT REFINEMENTS � sidebar compaction & content dominance
   ========================================================================== */

/* -- CSS-grid detail layout (Judgements): tighten sidebar ------------------ */
.sk-reading-layout,
.sk-detail-layout {
    grid-template-columns: minmax(0, 1fr) 230px;
    gap: 20px;
}

/* -- Sidebar sticky � tighter top offset to clear the fixed header ------- */
.sk-reading-sidebar {
    position: sticky;
    top: 20px;
    max-width: 100%;
}

/* -- Widget padding reduction ----------------------------------------------- */
.sk-reading-widget {
    padding: 14px 15px;
    margin-bottom: 14px;
    border-radius: 8px;
}

.sk-reading-widget h3 {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: #797979;
}

.sk-reading-widget a {
    padding: 6px 0;
    font-size: 13px;
    gap: 8px;
}

/* -- Search widget compact -------------------------------------------------- */
.sk-search-widget input {
    padding: 8px 10px;
    font-size: 13px;
}

.sk-search-widget button {
    width: 36px;
}

/* -- Recent/recommended post thumbnails ------------------------------------ */
.sk-recent-link img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    flex-shrink: 0;
}

.sk-recent-link strong {
    font-size: 12px;
    line-height: 1.4;
}

.sk-recent-link small {
    font-size: 11px;
}

/* -- Consult widget --------------------------------------------------------- */
.sk-consult-widget p {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
}

.sk-widget-button {
    padding: 9px 12px !important;
    font-size: 13px;
    margin-top: 8px;
}

/* -- Article content gets comfortable max-width ---------------------------- */
.sk-article-content {
    padding: 24px 26px;
}

.sk-article-body {
    font-size: 15.5px;
    line-height: 1.78;
}

.sk-article-body p {
    margin-bottom: 1.15em;
}

.sk-article-body h2 {
    font-size: 1.35rem;
    margin-top: 2em;
    margin-bottom: 0.6em;
}

.sk-article-body h3 {
    font-size: 1.15rem;
    margin-top: 1.6em;
    margin-bottom: 0.5em;
}

/* -- Bootstrap col-lg-3 sidebar: cap width so it stays compact ------------ */
@media (min-width: 992px) {
    .sk-reading-section aside.sk-reading-aside {
        max-width: 280px;
        width: 100%;
    }
}

/* -- Responsive: hide aside panel below 992px (already d-none d-lg-block) -- */
@media (max-width: 991px) {
    .sk-reading-sidebar {
        position: static;
    }
    .sk-article-content {
        padding: 20px 18px;
    }
    .sk-article-body {
        font-size: 15px;
    }
}

/* ================================================================
   GLOBAL PALETTE ENFORCEMENT � ShoneeKapoor.com
   Appended last so these rules win over main.css and Bootstrap.
   ================================================================ */

/* -- 1. Fix main.css .light-background (incorrectly sets dark vars) -- */
.light-background {
    --background-color: #e0dbd5;
    --surface-color:    #ffffff;
    --default-color:    #222222;
    --heading-color:    #222222;
    background-color:   #e0dbd5;
}

/* -- 2. Testimonials � white cards, readable text on cream bg -- */
.testimonials {
    background: #e0dbd5 !important;
}
.testimonials .section-title h2 {
    color: #222222;
}
.testimonials .section-title p {
    color: #687469;
}
.testimonials .testimonial-content {
    background-color: #ffffff !important;
    border: 1px solid rgba(34,34,34,.10) !important;
}
.testimonials .testimonial-content p {
    color: #687469 !important;
}
.testimonials .testimonial-content:hover {
    box-shadow: 0 8px 28px rgba(34,34,34,.10);
}
.testimonials .testimonial-item.highlight .testimonial-content {
    background-color: rgba(135,73,74,.06) !important;
    border: 1px solid rgba(135,73,74,.28) !important;
}
.testimonials .testimonial-item.highlight .testimonial-content .quote-pattern {
    background-color: rgba(135,73,74,.12) !important;
}
.testimonials .quote-pattern {
    background-color: #ffffff !important;
    border-color: rgba(34,34,34,.10) !important;
}
.testimonials .client-info {
    border-top-color: rgba(34,34,34,.10) !important;
}
.testimonials .client-details h3 {
    color: #222222 !important;
}
.testimonials .client-details .position {
    color: #797979 !important;
}

/* -- 3. Bootstrap btn-primary: burgundy (override BS5 CSS variables + fallback) -- */
.btn-primary {
    --bs-btn-color:                 #ffffff;
    --bs-btn-bg:                    #87494a;
    --bs-btn-border-color:          #87494a;
    --bs-btn-hover-color:           #ffffff;
    --bs-btn-hover-bg:              #6f3839;
    --bs-btn-hover-border-color:    #6f3839;
    --bs-btn-focus-shadow-rgb:      135, 73, 74;
    --bs-btn-active-color:          #ffffff;
    --bs-btn-active-bg:             #6f3839;
    --bs-btn-active-border-color:   #6f3839;
    --bs-btn-disabled-color:        #ffffff;
    --bs-btn-disabled-bg:           #87494a;
    --bs-btn-disabled-border-color: #87494a;
    background-color: #87494a !important;
    border-color:     #87494a !important;
    color:            #ffffff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #6f3839 !important;
    border-color:     #6f3839 !important;
    color:            #ffffff !important;
}
.btn-primary:focus-visible {
    box-shadow: 0 0 0 0.25rem rgba(135,73,74,.45) !important;
}

/* -- 4. Bootstrap btn-secondary: charcoal -- */
.btn-secondary {
    --bs-btn-color:               #ffffff;
    --bs-btn-bg:                  #222222;
    --bs-btn-border-color:        #222222;
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-hover-bg:            #111111;
    --bs-btn-hover-border-color:  #111111;
    --bs-btn-focus-shadow-rgb:    34, 34, 34;
    background-color: #222222 !important;
    border-color:     #222222 !important;
    color:            #ffffff !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #111111 !important;
    border-color:     #111111 !important;
}

/* -- 5. btn-outline-primary: burgundy outline -- */
.btn-outline-primary {
    --bs-btn-color:              #87494a;
    --bs-btn-border-color:       #87494a;
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           #87494a;
    --bs-btn-hover-border-color: #87494a;
    --bs-btn-active-color:       #ffffff;
    --bs-btn-active-bg:          #87494a;
    color:        #87494a !important;
    border-color: #87494a !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active {
    background-color: #87494a !important;
    color:            #ffffff !important;
}

/* -- 6. btn-outline-secondary: charcoal outline -- */
.btn-outline-secondary {
    --bs-btn-color:              #222222;
    --bs-btn-border-color:       #222222;
    --bs-btn-hover-color:        #ffffff;
    --bs-btn-hover-bg:           #222222;
    --bs-btn-hover-border-color: #222222;
    color:        #222222 !important;
    border-color: #222222 !important;
}
.btn-outline-secondary:hover,
.btn-outline-secondary:active {
    background-color: #222222 !important;
    color:            #ffffff !important;
}

/* -- 7. btn-link: burgundy -- */
.btn-link {
    color: #87494a !important;
    text-decoration-color: rgba(135,73,74,.5);
}
.btn-link:hover {
    color: #6f3839 !important;
}

/* -- 8. Global .btn focus ring: burgundy -- */
.btn:focus-visible {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(135,73,74,.35) !important;
}

/* -- 9. Bootstrap default link color: charcoal (not Bootstrap blue) -- */
:root {
    --bs-link-color:           #222222;
    --bs-link-color-rgb:       34, 34, 34;
    --bs-link-hover-color:     #87494a;
    --bs-link-hover-color-rgb: 135, 73, 74;
    /* Premium Brand Tokens */
    --sk-wine:             #87494a;
    --sk-wine-dark:        #6d3a3b;
    --sk-wine-light:       #9c5657;
    --sk-wine-soft:        rgba(135,73,74,.08);
    --sk-wine-medium:      rgba(135,73,74,.15);
    --sk-champagne:        #d8bd7d;
    --sk-champagne-dark:   #c1a974;
    --sk-champagne-light:  #e8d4a0;
    --sk-champagne-soft:   rgba(216,189,125,.12);
    --sk-beige:            #f8f7f4;
    --sk-beige-warm:       #f0ece4;
    --sk-beige-line:       #e8e0d0;
    --sk-charcoal:         #211c1b;
    --sk-heading:          #302b2b;
    --sk-body:             #6b615b;
    --sk-muted:            #687469;
    --sk-white:            #ffffff;
    --sk-shadow-sm:        0 2px 8px rgba(135,73,74,.04);
    --sk-shadow-md:        0 4px 16px rgba(135,73,74,.06);
    --sk-shadow-lg:        0 8px 32px rgba(135,73,74,.08);
    --sk-shadow-xl:        0 16px 48px rgba(135,73,74,.10);
    --sk-radius-sm:        8px;
    --sk-radius-md:        12px;
    --sk-radius-lg:        16px;
    --sk-radius-xl:        20px;
    --sk-transition:       200ms cubic-bezier(.4,0,.2,1);
}
a:not([class]) {
    color: #222222;
}
a:not([class]):hover {
    color: #87494a;
}

/* ============================================================
   PREMIUM COMPONENT LIBRARY
   ============================================================ */

/* --- Section Spacing System --- */
body.index-page section,
body.index-page .section {
    padding: clamp(60px, 10vw, 120px) 0;
    position: relative;
}
body.index-page section + section::before,
body.index-page .section + .section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: min(100% - 48px, 1200px);
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(135,73,74,.08) 50%, transparent 100%);
}

/* --- Editorial Section Headers --- */
body.index-page .section-title {
    margin-bottom: clamp(32px, 5vw, 56px);
}
body.index-page .section-title h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -.02em;
    color: #211c1b;
    margin-bottom: 12px;
}
body.index-page .section-title p {
    font-size: clamp(.875rem, 2vw, 1rem);
    color: #687469;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

/* --- Premium Badges --- */
body.index-page .badge {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 8px;
}

/* --- Premium Buttons --- */
body.index-page .btn-primary {
    background: linear-gradient(135deg, #87494a 0%, #6d3a3b 100%);
    border: 0;
    border-radius: 10px;
    padding: 12px 24px;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .02em;
    box-shadow: 0 4px 14px rgba(135,73,74,.25);
    transition: transform var(--sk-transition), box-shadow var(--sk-transition);
}
body.index-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(135,73,74,.35);
    background: linear-gradient(135deg, #9c5657 0%, #87494a 100%);
}
body.index-page .btn-outline-primary {
    border: 1.5px solid rgba(135,73,74,.3);
    color: #87494a;
    border-radius: 10px;
    padding: 11px 23px;
    font-weight: 700;
    font-size: 14px;
    background: transparent;
    transition: all var(--sk-transition);
}
body.index-page .btn-outline-primary:hover {
    background: #87494a;
    color: #fff;
    border-color: #87494a;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(135,73,74,.25);
}

/* --- Premium Card Shell --- */
body.index-page .premium-card {
    background: #fff;
    border: 1px solid rgba(135,73,74,.06);
    border-radius: var(--sk-radius-lg);
    box-shadow: var(--sk-shadow-sm);
    transition: transform var(--sk-transition), box-shadow var(--sk-transition), border-color var(--sk-transition);
}
body.index-page .premium-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sk-shadow-lg);
    border-color: rgba(135,73,74,.15);
}

/* --- Subtle Background Patterns --- */
.bg-pattern-soft {
    position: relative;
}
.bg-pattern-soft::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 80%, rgba(216,189,125,.06) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(135,73,74,.04) 0%, transparent 50%);
    pointer-events: none;
    z-index: 0;
}

/* --- Motion System --- */
@media (prefers-reduced-motion: no-preference) {
    .fade-in-up {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity .5s ease, transform .5s ease;
    }
    .fade-in-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .stagger-1 { transition-delay: .05s; }
    .stagger-2 { transition-delay: .1s; }
    .stagger-3 { transition-delay: .15s; }
    .stagger-4 { transition-delay: .2s; }
    .stagger-5 { transition-delay: .25s; }
    .stagger-6 { transition-delay: .3s; }
}

/* -- 10. Form controls: burgundy focus ring -- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: rgba(135,73,74,.7);
    box-shadow:   0 0 0 0.2rem rgba(135,73,74,.20);
    outline:      none;
}
.form-check-input:checked {
    background-color: #87494a;
    border-color:     #87494a;
}

/* -- 11. Section headings: charcoal globally -- */
.section-title h2 {
    color: #222222;
}
.section-title p {
    color: #687469;
}
h1, h2, h3, h4, h5, h6 {
    color: #222222;
}
/* Hero/dark section headings stay white */
.hero h1, .hero h2, .hero h3,
.sk-home-hero h1, .sk-home-hero h2,
.sk-reading-title h1,
.page-title h1,
.sk-cta-strip h2, .sk-cta-strip h3,
.sk-about-cta h2, .sk-about-cta h3,
.sk-strategy-cta h2, .sk-strategy-cta h3,
.sk-official-card-caption h3 {
    color: #ffffff;
}

/* -- 12. Service cards � readable on cream -- */
.service-card {
    background:   #ffffff;
    border:       1px solid rgba(34,34,34,.1);
    box-shadow:   0 8px 24px rgba(34,34,34,.07);
}
.service-card h3 a,
.service-card h3 {
    color: #222222 !important;
}
.service-card p {
    color: #687469;
}
.service-btn {
    background:   #87494a !important;
    color:        #ffffff !important;
    border-color: #87494a !important;
}
.service-btn:hover {
    background:   #6f3839 !important;
    border-color: #6f3839 !important;
}

/* -- 13. Contact hero buttons (explicit ID for certainty) -- */
#contact-hero .hero-actions .btn-primary {
    background:   #87494a !important;
    border-color: #87494a !important;
    color:        #ffffff !important;
}
#contact-hero .hero-actions .btn-primary:hover {
    background:   #6f3839 !important;
    border-color: #6f3839 !important;
}
#contact-hero .hero-actions .btn-outline {
    background:   transparent !important;
    border:       2px solid rgba(135,73,74,.7) !important;
    color:        #87494a !important;
}
#contact-hero .hero-actions .btn-outline:hover {
    background:   #87494a !important;
    color:        #ffffff !important;
    border-color: #87494a !important;
}

/* -- 14. Badges -- */
.badge.bg-primary {
    background-color: #87494a !important;
}

/* -- 15. Footer h2/h3 stay charcoal -- */
.sk-footer h3,
.sk-footer h5 {
    color: #222222;
}
.sk-footer p,
.sk-footer span {
    color: #687469;
}

/* -- 16. Cards on cream sections -- */
.card {
    border-color: rgba(34,34,34,.1);
}
.card-title {
    color: #222222;
}
.card-text {
    color: #687469;
}

/* -- 17. Enterprise hero banner – inner pages (About, Legal, Articles, etc.)
   Premium layered gradient + subtle geometric pattern overlay.
   Clean, authoritative, content-first. No pseudo-element clutter.            */
.page-title,
.page-title.dark-background {
    background:
        radial-gradient(ellipse 60% 100% at 0% 50%,
            rgba(135,73,74,.14) 0%,
            transparent 70%),
        radial-gradient(circle at 85% 20%,
            rgba(193,169,116,.06) 0%,
            transparent 50%),
        linear-gradient(160deg,
            #141414 0%,
            #1c1c1c 20%,
            #2a2225 45%,
            #4a2c2d 70%,
            #6d3a3b 88%,
            #87494a 100%) !important;

    position: relative;
    padding: clamp(48px, 7vh, 80px) 0 clamp(40px, 6vh, 68px) !important;
    min-height: auto;
    max-height: none;
    display: flex;
    align-items: center;
    border-top: none;
    border-bottom: 1px solid rgba(193,169,116,.12);
    overflow: hidden;
}

/* Subtle geometric dot-grid pattern overlay */
.page-title::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle, rgba(255,255,255,.035) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
    z-index: 0;
}

/* Soft radial glow – top-right warmth accent */
.page-title::after {
    content: '';
    position: absolute;
    top: -40%; right: -8%;
    width: 50%; height: 180%;
    background: radial-gradient(ellipse at center,
        rgba(135,73,74,.10) 0%,
        transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Ensure all children sit above the decorative layers */
.page-title > * {
    position: relative;
    z-index: 1;
}

/* Title */
.page-title h1 {
    color: #ffffff !important;
    font-size: clamp(28px, 4.5vw, 44px);
    font-weight: 800;
    margin-bottom: 10px;
    line-height: 1.12;
    letter-spacing: -0.02em;
    text-shadow: 0 2px 20px rgba(0,0,0,.30);
}

/* Description / subtitle */
.page-title p,
.page-title .sk-page-subtitle {
    color: rgba(255,255,255,.72) !important;
    font-size: clamp(14px, 1.3vw, 17px);
    margin-bottom: 0;
    line-height: 1.65;
    max-width: 680px;
}

/* ---- Breadcrumb strip – glassmorphism top bar ---- */
.page-title .sk-hero-breadcrumbs {
    display: flex;
    align-items: center;
    margin-bottom: clamp(18px, 3vh, 28px);
}

.page-title .sk-hero-breadcrumbs nav {
    display: inline-flex;
    align-items: center;
}

.page-title .sk-hero-breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 6px 14px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    gap: 0;
}

.page-title .sk-hero-breadcrumbs ol li {
    display: flex;
    align-items: center;
    font-size: 12.5px;
    line-height: 1;
}

.page-title .sk-hero-breadcrumbs ol li a {
    color: rgba(255,255,255,.60) !important;
    text-decoration: none;
    transition: color .2s;
    letter-spacing: .01em;
}

.page-title .sk-hero-breadcrumbs ol li a:hover {
    color: #c1a974 !important;
}

/* Chevron separator */
.page-title .sk-hero-breadcrumbs ol li + li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 10px;
    border-top: 1.5px solid rgba(255,255,255,.28);
    border-right: 1.5px solid rgba(255,255,255,.28);
    transform: rotate(45deg);
    flex-shrink: 0;
}

/* Active / current crumb */
.page-title .sk-hero-breadcrumbs ol li.active,
.page-title .sk-hero-breadcrumbs ol li.current {
    color: #c1a974 !important;
    font-weight: 600;
}

/* ---- Kicker label ---- */
.page-title .sk-hero-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(10px, 1.5vh, 16px);
    color: #c1a974;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.page-title .sk-hero-kicker::before {
    content: '';
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, #c1a974, rgba(193,169,116,.3));
    border-radius: 1px;
}

/* ---- Stats strip (optional) ---- */
.page-title .sk-hero-stats {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(16px, 3vw, 32px);
    margin-top: clamp(20px, 3vh, 32px);
    padding-top: clamp(16px, 2.5vh, 24px);
    border-top: 1px solid rgba(255,255,255,.08);
}

.page-title .sk-hero-stat {
    display: flex;
    align-items: center;
    gap: 10px;
}

.page-title .sk-hero-stat .sk-stat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(135,73,74,.25);
    border: 1px solid rgba(135,73,74,.30);
    color: #c1a974;
    font-size: 15px;
    flex-shrink: 0;
}

.page-title .sk-hero-stat .sk-stat-text {
    display: flex;
    flex-direction: column;
}

.page-title .sk-hero-stat .sk-stat-value {
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.page-title .sk-hero-stat .sk-stat-label {
    color: rgba(255,255,255,.50);
    font-size: 11.5px;
    line-height: 1.3;
    letter-spacing: .02em;
}

/* ---- CTA row (optional) ---- */
.page-title .sk-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: clamp(20px, 3vh, 28px);
}

.page-title .sk-hero-cta .btn {
    font-size: 13.5px;
    font-weight: 600;
    padding: 10px 22px;
    border-radius: 6px;
    letter-spacing: .01em;
    transition: all .25s;
}

.page-title .sk-hero-cta .btn-sk-primary {
    background: #87494a;
    border-color: #87494a;
    color: #ffffff;
}
.page-title .sk-hero-cta .btn-sk-primary:hover {
    background: #6f3839;
    border-color: #6f3839;
}

.page-title .sk-hero-cta .btn-sk-outline {
    background: transparent;
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.85);
}
.page-title .sk-hero-cta .btn-sk-outline:hover {
    background: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.35);
    color: #ffffff;
}

/* Legacy kicker class – keep working for pages that still use it */
.page-title .sk-reading-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: clamp(10px, 1.5vh, 16px);
    color: #c1a974;
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.page-title .sk-reading-kicker::before {
    content: '';
    width: 32px;
    height: 2px;
    background: linear-gradient(90deg, #c1a974, rgba(193,169,116,.3));
    border-radius: 1px;
}

/* Legacy breadcrumbs selector – map to new glassmorphism style */
.page-title .breadcrumbs {
    margin-bottom: clamp(18px, 3vh, 28px);
    position: relative;
}
.page-title .breadcrumbs nav {
    display: inline-flex;
    align-items: center;
}
.page-title .breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 6px 14px;
    background: rgba(255,255,255,.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 6px;
    gap: 0;
}
.page-title .breadcrumbs a,
.page-title .breadcrumbs ol,
.page-title .breadcrumbs li,
.page-title .breadcrumbs span {
    color: rgba(255,255,255,.60) !important;
    font-size: 12.5px;
    letter-spacing: .01em;
}
.page-title .breadcrumbs a:hover {
    color: #c1a974 !important;
    text-decoration: none;
}
.page-title .breadcrumbs ol li + li::before {
    content: '';
    display: inline-block;
    width: 5px;
    height: 5px;
    margin: 0 10px;
    border-top: 1.5px solid rgba(255,255,255,.28);
    border-right: 1.5px solid rgba(255,255,255,.28);
    transform: rotate(45deg);
    flex-shrink: 0;
}
.page-title .breadcrumbs .separator {
    color: rgba(255,255,255,.28) !important;
}
.page-title .breadcrumbs li.active,
.page-title .breadcrumbs .current,
.page-title .breadcrumbs .breadcrumb-item.active {
    color: #c1a974 !important;
    font-weight: 600;
}

/* ---- Responsive: mobile refinements ---- */
@media (max-width: 575.98px) {
    .page-title .sk-hero-breadcrumbs ol {
        padding: 5px 10px;
        font-size: 11.5px;
    }
    .page-title .sk-hero-breadcrumbs ol li + li::before {
        margin: 0 6px;
    }
    .page-title .sk-hero-stats {
        gap: 14px;
    }
    .page-title .sk-hero-stat .sk-stat-icon {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }
    .page-title .sk-hero-stat .sk-stat-value {
        font-size: 13.5px;
    }
    .page-title .sk-hero-stat .sk-stat-label {
        font-size: 10.5px;
    }
    .page-title .sk-hero-cta .btn {
        width: 100%;
        text-align: center;
    }
}

/* -- 18. Homepage hero first-fold refinement --
   Scoped to the index hero: stronger contrast, cleaner alignment and the
   client's burgundy/gold palette without changing the page content. */
.sk-home-hero {
    min-height: 100svh;
    background: #222222;
}
.sk-home-hero .hero-content {
    width: 100%;
    padding: clamp(82px, 8vh, 112px) 0 clamp(58px, 7vh, 88px);
}
.sk-home-hero .hero-content .row {
    align-items: center !important;
    row-gap: 36px;
}
.sk-home-hero .hero-text {
    max-width: 720px;
    padding-top: 0;
}
.sk-home-hero .sk-hero-slide,
.sk-home-hero .slide-1,
.sk-home-hero .slide-2,
.sk-home-hero .slide-3,
.sk-home-hero .slide-4 {
    background-position: center center;
}
.sk-home-hero .sk-hero-slide {
    filter: grayscale(8%) contrast(1.04);
}
.sk-home-hero::after {
    background:
        linear-gradient(90deg, rgba(17,17,17,.96) 0%, rgba(34,34,34,.88) 42%, rgba(34,34,34,.58) 68%, rgba(34,34,34,.34) 100%),
        radial-gradient(circle at 18% 28%, rgba(135,73,74,.24), transparent 34%);
}
.sk-hero-eyebrow {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 100%;
    margin-bottom: 18px;
    color: #c1a974;
    font-size: 12px;
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    opacity: 1;
}
.sk-home-hero .hero-text h1 {
    margin-bottom: 10px;
    color: #ffffff !important;
    font-size: clamp(48px, 6vw, 78px);
    line-height: .98;
    font-weight: 800;
    letter-spacing: -1px;
    text-shadow: 0 18px 42px rgba(0,0,0,.34);
}
.sk-home-hero .hero-text h1 .accent-text {
    color: #ffffff;
}
.sk-home-hero .hero-text h1 .accent-text::after {
    height: 4px;
    background: #87494a;
    opacity: .85;
}
.sk-home-hero .hero-text h2 {
    margin-bottom: 22px;
    color: rgba(255,255,255,.92) !important;
    font-size: clamp(22px, 2vw, 30px);
    font-weight: 700;
    line-height: 1.24;
}
.sk-home-hero .hero-text .lead {
    color: rgba(255,255,255,.9);
    font-size: clamp(16px, 1.5vw, 18px);
    font-weight: 700;
    line-height: 1.55;
}
.sk-home-hero .hero-text .lead span,
.sk-home-hero .typed,
.sk-home-hero .typed-cursor {
    color: #c1a974;
    border-bottom: none;
    padding-bottom: 0;
}
.sk-home-hero .hero-text .description {
    max-width: 690px;
    color: rgba(255,255,255,.86);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.72;
}
.sk-home-hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 34px;
}
.sk-home-hero .hero-actions .btn {
    min-width: 188px;
    min-height: 54px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 800;
    padding: 14px 24px;
}
.sk-home-hero .hero-actions .btn.btn-primary {
    background: #87494a !important;
    border-color: #87494a !important;
    color: #ffffff !important;
    box-shadow: 0 14px 32px rgba(135,73,74,.36);
}
.sk-home-hero .hero-actions .btn.btn-primary:hover {
    background: #6f3839 !important;
    border-color: #6f3839 !important;
}
.sk-home-hero .hero-actions .btn.btn-outline {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    color: #ffffff !important;
}
.sk-home-hero .hero-actions .btn.btn-outline:hover {
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: #222222 !important;
}
.sk-hero-proof {
    gap: 22px;
    margin-top: 32px;
    color: rgba(255,255,255,.86);
    font-size: 14px;
    font-weight: 800;
}
.sk-hero-proof span {
    padding: 8px 0;
}
.sk-hero-proof i {
    color: #c1a974;
}
.sk-home-hero .hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
}
.sk-home-hero .hero-visual .profile-container.sk-official-hero-card {
    width: min(500px, 100%);
    border-radius: 8px;
    background: #222222;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 26px 70px rgba(0,0,0,.34);
    transform: translateY(6px);
}
.sk-home-hero .hero-visual .profile-container.sk-official-hero-card .profile-image {
    aspect-ratio: 16 / 11;
    object-position: center 38%;
}
.sk-official-card-caption {
    padding: 22px 28px 26px;
    background: linear-gradient(135deg, #222222, #333333);
    border-top: 4px solid #87494a;
}
.sk-official-card-caption h3 {
    color: #ffffff !important;
    font-size: 20px;
    letter-spacing: .2px;
}
.sk-official-card-caption p {
    color: rgba(255,255,255,.82);
    font-size: 15px;
}
.sk-official-card-caption span {
    color: rgba(255,255,255,.72);
    font-size: 13px;
}
@media (min-width: 992px) {
    .sk-home-hero .hero-content .row > .col-lg-7 {
        flex: 0 0 56%;
        max-width: 56%;
    }
    .sk-home-hero .hero-content .row > .col-lg-5 {
        flex: 0 0 44%;
        max-width: 44%;
    }
}
@media (max-width: 1199px) {
    .sk-home-hero .hero-text h1 {
        font-size: clamp(42px, 7vw, 64px);
    }
    .sk-home-hero .hero-visual .profile-container.sk-official-hero-card {
        width: min(440px, 100%);
    }
}
@media (max-width: 991px) {
    .sk-home-hero {
        min-height: auto;
    }
    .sk-home-hero .hero-content {
        padding: 94px 0 70px;
    }
    .sk-home-hero::after {
        background: linear-gradient(180deg, rgba(17,17,17,.96), rgba(34,34,34,.88));
    }
    .sk-home-hero .hero-text {
        max-width: 100%;
    }
    .sk-home-hero .hero-actions .btn {
        width: 100%;
    }
    .sk-hero-proof {
        gap: 12px 18px;
    }
}

/* -- 19. Sidebar brand/menu refinement --
   The original logo background samples at #87494A. Use it as a strong logo cap,
   while keeping the navigation card light for scanning and readability. */
.header {
    background: #f8f7f4;
}
.header .header-container {
    overflow: hidden;
    padding: 0 12px 12px;
    background: linear-gradient(180deg, #ffffff 0%, #f8f7f4 100%);
    border: 1px solid rgba(135,73,74,.16);
    box-shadow: 0 18px 44px rgba(34,34,34,.10);
}
.header .nav-logo {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: calc(100% + 24px) !important;
    margin: 0 -12px 12px;
    padding: 18px 10px 16px !important;
    background: #87494a;
    border-radius: 14px 14px 0 0;
    box-shadow: inset 0 -1px 0 rgba(255,255,255,.14);
}
.header .nav-logo img {
    width: 100%;
    max-width: 168px;
}
.navmenu ul {
    padding-bottom: 0;
}
.navmenu li.active {
    background: transparent;
}
.navmenu a,
.navmenu a:focus {
    min-height: 36px;
    margin: 2px 0;
    padding: 9px 10px;
    border-radius: 8px;
    color: #222222;
    font-weight: 650;
    letter-spacing: 0;
}
.navmenu a .navicon,
.navmenu a:focus .navicon {
    color: #87494a;
}
.navmenu a .toggle-dropdown,
.navmenu a:focus .toggle-dropdown {
    background: #f4f1f0;
    color: #87494a;
}
.navmenu a:hover,
.navmenu a:focus:hover {
    background: rgba(135,73,74,.08);
    color: #6f3839;
}
.navmenu a:hover .navicon,
.navmenu a:focus:hover .navicon {
    color: #6f3839;
}
.navmenu a.active,
.navmenu a.active:focus,
.navmenu .dropdown.active > a {
    background: #87494a;
    color: #ffffff !important;
    box-shadow: 0 10px 22px rgba(135,73,74,.20);
}
.navmenu a.active .navicon,
.navmenu a.active:focus .navicon,
.navmenu .dropdown.active > a .navicon {
    color: #ffffff;
}
.navmenu a.active .toggle-dropdown,
.navmenu a.active:focus .toggle-dropdown,
.navmenu .dropdown.active > a .toggle-dropdown {
    background: rgba(255,255,255,.18);
    color: #ffffff;
}
.navmenu .dropdown ul {
    margin: 4px 0 6px 12px;
    padding: 6px;
    background: #ffffff;
    border: 1px solid rgba(135,73,74,.14);
    border-left: 3px solid #87494a;
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(34,34,34,.08);
}
.navmenu .dropdown ul li a {
    min-height: 30px;
    margin: 1px 0;
    padding: 7px 10px;
    border-radius: 6px;
    color: #333333 !important;
    font-size: 12px;
    font-weight: 600;
}
.navmenu .dropdown ul li a:hover,
.navmenu .dropdown ul li a.active {
    background: rgba(135,73,74,.10) !important;
    color: #6f3839 !important;
    box-shadow: none;
}
.navmenu .dropdown ul li a::before {
    background: #87494a;
}
@media (max-width: 1199px) {
    .header .header-container {
        border-radius: 14px;
    }
}

/* ===========================================================
   DESIGN UPGRADE PACK � July 2026
   =========================================================== */

/* -- Text selection color ----------------------------------- */
::selection        { background: #87494a; color: #ffffff; }
::-moz-selection   { background: #87494a; color: #ffffff; }

/* -- Typography polish -------------------------------------- */
h1, h2, h3 { text-wrap: balance; }

/* tabular digits on all counter / stat numbers */
.purecounter,
.sk-stat-num,
[data-purecounter-start] {
    font-variant-numeric: tabular-nums;
}

/* -- Hero gradient accent text ------------------------------ */
.sk-hero-grad {
    background: linear-gradient(90deg, #cc8809 0%, #c1a974 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* Fallback for browsers without bg-clip text */
    color: #cc8809;
}

/* -- CTA button shimmer ------------------------------------- */
.btn-primary,
.sk-btn-primary {
    position: relative;
    overflow: hidden;
}
.btn-primary::after,
.sk-btn-primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        transparent 25%,
        rgba(255, 255, 255, 0.32) 50%,
        transparent 75%
    );
    transform: translateX(-150%);
    animation: sk-shimmer 3.6s 2s infinite;
    pointer-events: none;
}
@keyframes sk-shimmer {
    0%   { transform: translateX(-150%); }
    30%  { transform: translateX(150%); }
    100% { transform: translateX(150%); }
}
@media (prefers-reduced-motion: reduce) {
    .btn-primary::after,
    .sk-btn-primary::after { display: none; }
}

/* -- Wave section divider ----------------------------------- */
.sk-wave-divider {
    line-height: 0;
    overflow: hidden;
}
.sk-wave-divider svg {
    display: block;
    width: 100%;
}

/* -- Media / "As featured in" strip ------------------------ */
.sk-media-strip {
    padding: 28px 0;
    background: var(--background-color, #f8f7f4);
    border-top: 1px solid rgba(34, 34, 34, .07);
    border-bottom: 1px solid rgba(34, 34, 34, .07);
}
.sk-media-strip-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 700;
    color: #797979;
    margin-bottom: 14px;
    text-align: center;
}
.sk-media-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.sk-media-pill {
    display: inline-block;
    padding: 6px 18px;
    border-radius: 30px;
    border: 1px solid rgba(34, 34, 34, .14);
    background: #ffffff;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .5px;
    color: #687469;
    transition: border-color .2s, color .2s, transform .2s;
}
.sk-media-pill:hover {
    border-color: #87494a;
    color: #87494a;
    transform: translateY(-2px);
}

/* -- Process / How it works section ------------------------ */
.sk-process-section {
    padding: 56px 0;
    background: #ffffff;
}
.sk-process-steps {
    display: flex;
    gap: 0;
    position: relative;
    margin-top: 36px;
}
.sk-process-steps::before {
    content: '';
    position: absolute;
    top: 28px;
    left: calc(12.5%);
    right: calc(12.5%);
    height: 2px;
    background: linear-gradient(90deg, #87494a, #cc8809);
    z-index: 0;
}
.sk-process-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    padding: 0 8px;
    text-align: center;
}
.sk-process-num {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 700;
    font-size: 18px;
    color: #ffffff;
    flex-shrink: 0;
    box-shadow: 0 8px 20px rgba(135, 73, 74, .28);
    transition: transform .3s ease;
}
.sk-process-step:hover .sk-process-num { transform: scale(1.1); }
.sk-process-num.s1 { background: #87494a; }
.sk-process-num.s2 { background: #9e5c5d; }
.sk-process-num.s3 { background: #b47040; }
.sk-process-num.s4 { background: #cc8809; box-shadow: 0 8px 20px rgba(204, 136, 9, .3); }
.sk-process-label {
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    line-height: 1.3;
}
.sk-process-desc {
    font-size: 12px;
    color: #687469;
    line-height: 1.5;
    max-width: 130px;
}
@media (max-width: 767px) {
    .sk-process-steps { flex-direction: column; align-items: flex-start; gap: 22px; }
    .sk-process-steps::before { top: 28px; left: 27px; right: auto; width: 2px; height: calc(100% - 56px); background: linear-gradient(180deg, #87494a, #cc8809); }
    .sk-process-step { flex-direction: row; text-align: left; gap: 18px; }
    .sk-process-num { flex-shrink: 0; }
    .sk-process-desc { max-width: 100%; }
}

/* -- Mobile sticky CTA bar ---------------------------------- */
#sk-mobile-cta {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9995;
    background: #ffffff;
    border-top: 1px solid rgba(34, 34, 34, .12);
    box-shadow: 0 -4px 20px rgba(34, 34, 34, .14);
    transform: translateY(0);
    transition: transform .3s ease;
}
#sk-mobile-cta.sk-cta-hidden { transform: translateY(100%); }
#sk-mobile-cta .sk-mcta-btn {
    flex: 1;
    padding: 14px 10px;
    font-size: 13px;
    font-weight: 800;
    text-align: center;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    cursor: pointer;
    transition: opacity .15s;
}
#sk-mobile-cta .sk-mcta-btn:hover { opacity: .9; }
#sk-mobile-cta .sk-mcta-primary { background: #87494a; color: #ffffff; }
#sk-mobile-cta .sk-mcta-wa      { background: #25D366; color: #ffffff; }
#sk-mobile-cta .sk-mcta-divider { width: 1px; background: rgba(0,0,0,.1); flex-shrink: 0; }
@media (min-width: 769px) {
    #sk-mobile-cta { display: none !important; }
}
@media (max-width: 768px) {
    #sk-mobile-cta { display: flex; }
}

/* -- Nav backdrop (mobile) ---------------------------------- */
#nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .46);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    z-index: 9988;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
#nav-backdrop.active {
    opacity: 1;
    pointer-events: all;
}

/* -- Scroll-to-top radial progress ring -------------------- */
#scroll-top {
    width: 50px;
    height: 50px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9990;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s, transform .3s;
}
#scroll-top.active {
    opacity: 1;
    pointer-events: all;
}
#scroll-top svg {
    position: absolute;
    inset: 0;
    transform: rotate(-90deg);
    width: 50px;
    height: 50px;
}
#scroll-top svg circle { transition: stroke-dashoffset .1s linear; }
#scroll-top .st-inner {
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    background: #87494a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 16px;
    box-shadow: 0 4px 14px rgba(135, 73, 74, .4);
}

/* -- Dark Mode ---------------------------------------------- */
@media (prefers-color-scheme: dark) {
    :root {
        --background-color: #111009;
        --default-color:    #c8c3b8;
        --heading-color:    #f0ece4;
        --surface-color:    #1e1c17;
        --contrast-color:   #ffffff;
        --nav-color:        rgba(230, 224, 212, 0.62);
        --nav-hover-color:  #f0ece4;
        --nav-mobile-background-color: #1e1c17;
        --nav-dropdown-background-color: #1e1c17;
        --nav-dropdown-color:        #c8c3b8;
        --nav-dropdown-hover-color:  #f0ece4;
        --sk-primary: #87494a;
        --sk-secondary: #cc8809;
        --sk-text: #f0ece4;
        --sk-muted: #9aab9b;
        --sk-surface: #1e1c17;
        --sk-section: #111009;
        --sk-border: rgba(255, 255, 255, .08);
    }
    .index-page             { background: #111009; }
    .sk-topic-page          { background: #111009; }
    .sk-reading-page        { background: #111009; }
    .sk-reading-section     { background: #111009; }
    .sk-all-posts           { background: #1e1c17; }
    .sk-category-section    { background: linear-gradient(180deg, #1e1c17 0%, #111009 100%); }
    .sk-featured-posts      { background: #111009; }
    .sk-latest-posts        { background: #111009; }
    .sk-hero-section        { background: #111009; }
    .sk-newsletter-cta      { background: linear-gradient(180deg, #111009 0%, #0d0c08 100%); }
    .light-background       { --background-color: #1a1814; }

    /* Cards */
    .sk-blog-post-item,
    .sk-featured-post,
    .sk-latest-card,
    .sk-slide-card,
    .sk-cat-card,
    .sk-reading-list-item,
    .sk-blog-article,
    .sk-reading-widget,
    .sk-list-card,
    .sk-post-row,
    .sk-reading-widget a       { color: #c8c3b8; border-top-color: rgba(255,255,255,.07); }
    .sk-alert-bar              { background: #1a1814; }

    /* Footer */
    #footer { background: linear-gradient(135deg, #1e1c17 0%, #141210 100%); }
    .footer-bottom { background: #0f0e0b !important; }

    /* Testimonials section */
    .testimonial-slide { background: #1e1c17 !important; border-color: rgba(255,255,255,.06) !important; }
    .testimonial-slide p { color: #c8c3b8 !important; }

    /* process & media strip */
    .sk-process-section { background: #1e1c17; }
    .sk-process-label   { color: #f0ece4; }
    .sk-media-strip     { background: #1a1814; border-color: rgba(255,255,255,.06); }
    .sk-media-pill      { background: #1e1c17; border-color: rgba(255,255,255,.1); color: #9aab9b; }

    /* About dark mini-counter strip */
    .index-page .bg-white,
    .sk-topic-page .bg-white { background: #1e1c17 !important; }
}

/* Same overrides for manual toggle */
:root[data-theme="dark"] {
    --background-color: #111009;
    --default-color:    #c8c3b8;
    --heading-color:    #f0ece4;
    --surface-color:    #1e1c17;
    --contrast-color:   #ffffff;
    --nav-color:        rgba(230, 224, 212, 0.62);
    --nav-hover-color:  #f0ece4;
    --nav-mobile-background-color: #1e1c17;
    --nav-dropdown-background-color: #1e1c17;
    --nav-dropdown-color:        #c8c3b8;
    --nav-dropdown-hover-color:  #f0ece4;
}
:root[data-theme="dark"] .index-page  { background: #111009; }
:root[data-theme="dark"] .sk-topic-page { background: #111009; }
:root[data-theme="dark"] .testimonial-slide { background: #1e1c17 !important; border-color: rgba(255,255,255,.06) !important; }
:root[data-theme="dark"] .testimonial-slide p { color: #c8c3b8 !important; }
:root[data-theme="dark"] .sk-process-section { background: #1e1c17; }
:root[data-theme="dark"] .sk-process-label   { color: #f0ece4; }
:root[data-theme="dark"] .sk-media-strip     { background: #1a1814; border-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .sk-media-pill      { background: #1e1c17; border-color: rgba(255,255,255,.1); color: #9aab9b; }
:root[data-theme="dark"] .light-background   { --background-color: #1a1814; }
:root[data-theme="dark"] #footer             { background: linear-gradient(135deg, #1e1c17 0%, #141210 100%); }
:root[data-theme="dark"] .footer-bottom      { background: #0f0e0b !important; }
:root[data-theme="dark"] .sk-blog-post-item,
:root[data-theme="dark"] .sk-featured-post,
:root[data-theme="dark"] .sk-latest-card,
:root[data-theme="dark"] .sk-slide-card,
:root[data-theme="dark"] .sk-cat-card,
:root[data-theme="dark"] .sk-reading-list-item,
:root[data-theme="dark"] .sk-blog-article,
:root[data-theme="dark"] .sk-reading-widget,
:root[data-theme="dark"] .sk-list-card,
:root[data-theme="dark"] .sk-post-row,
:root[data-theme="dark"] .sk-related-card,
:root[data-theme="dark"] .sk-author-panel,
:root[data-theme="dark"] .sk-comment-panel,
:root[data-theme="dark"] .sk-info-panel        { background: #1e1c17; border-color: rgba(255,255,255,.07); }
:root[data-theme="dark"] .sk-info-panel h3,
:root[data-theme="dark"] .sk-reading-widget h3 { color: #f0ece4; }
:root[data-theme="dark"] .sk-reading-widget a  { color: #c8c3b8; border-top-color: rgba(255,255,255,.07); }
:root[data-theme="dark"] .sk-alert-bar         { background: #1a1814; }
:root[data-theme="dark"] .sk-all-posts         { background: #1e1c17; }

/* -- Dark mode toggle button (in sidebar) ------------------ */
.sk-darkmode-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 12px;
    border: 1px solid rgba(34, 34, 34, .12);
    border-radius: 8px;
    background: transparent;
    color: #687469;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s, color .2s, border-color .2s;
    margin-top: 12px;
}
.sk-darkmode-toggle:hover { background: rgba(135,73,74,.08); color: #87494a; border-color: rgba(135,73,74,.2); }
.sk-darkmode-toggle i { font-size: 14px; }

/* -- Breadcrumb chip styles --------------------------------- */
.sk-bc-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.sk-bc-chip {
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.sk-bc-chip--home   { background: rgba(255,255,255,.12); color: rgba(255,255,255,.75); }
.sk-bc-chip--home:hover { background: rgba(255,255,255,.22); color: #ffffff; }
.sk-bc-chip--parent { background: rgba(255,255,255,.08); color: rgba(255,255,255,.58); }
.sk-bc-chip--parent:hover { background: rgba(255,255,255,.14); color: rgba(255,255,255,.9); }
.sk-bc-chip--current { background: rgba(135,73,74,.38); color: #e8a6a7; }
.sk-bc-sep { color: rgba(255,255,255,.28); font-size: 11px; padding: 0 2px; }

/* -- Print stylesheet --------------------------------------- */
@media print {
    #header,
    #sk-chat,
    #sk-chat-panel,
    .whatsapp-float,
    #scroll-top,
    #sk-cookie-banner,
    #sk-mobile-cta,
    #nav-backdrop,
    .sk-reading-sidebar,
    .sk-reading-aside,
    .sk-section-title + .sk-reading-widget:not(.sk-consult-widget),
    .footer-top,
    .footer-bottom { display: none !important; }

    body {
        font-size: 12pt;
        color: #000000;
        background: #ffffff;
        margin-left: 0 !important;
    }
    main { margin-left: 0 !important; }
    .sk-article-body { max-width: 100%; font-size: 11pt; }
    .sk-reading-title { print-color-adjust: exact; }
    a[href]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
    a[href^="#"]::after, a[href^="javascript"]::after { content: ""; }
}

/* =============================================================
   VISUAL PATCH v2 � July 2026
   Fixes: hero spacing � counter legibility � quote overflow �
          process layout � dark-mode depth � sidebar design
   ============================================================= */

/* -- Hero: balanced column spacing ---------------------------- */
.sk-home-hero .hero-text { padding-right: 24px; }
@media (max-width: 1199px) {
    .sk-home-hero .hero-text { padding-right: 0; }
}

/* -- Counter strip: fix label contrast ------------------------ */
.sk-counter-label { color: rgba(255,255,255,.72) !important; }

/* -- Quote mark in "Why counselor" block: contain + shrink ---- */
#why-top-counselor .bg-white.p-5.rounded-4 { overflow: hidden; }
#why-top-counselor .bi-quote.position-absolute { font-size: 5.5rem !important; }

/* -- Process: card-grid (replaces flex timeline) --------------- */
.sk-process-section { padding: 60px 0; background: #ffffff; }
.sk-process-section .sk-section-label {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #87494a;
    margin-bottom: 8px;
}
.sk-process-section h2 { color: #222222; font-size: clamp(22px,3vw,32px); margin: 4px 0 0; }
.sk-process-section .sk-process-sub { color: #687469; max-width: 480px; margin: .7rem auto 0; font-size: 14px; }

.sk-pc {
    background: #f8f7f4;
    border-radius: 14px;
    padding: 28px 22px;
    height: 100%;
    border: 1px solid rgba(34,34,34,.07);
    position: relative;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sk-pc:hover {
    transform: translateY(-5px);
    box-shadow: 0 18px 40px rgba(135,73,74,.12);
}
.sk-pc-num {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Ubuntu', sans-serif;
    font-weight: 800;
    font-size: 14px;
    color: #ffffff;
    margin-bottom: 18px;
    letter-spacing: .4px;
    flex-shrink: 0;
}
.sk-pc-num.s1 { background: #87494a; box-shadow: 0 6px 16px rgba(135,73,74,.30); }
.sk-pc-num.s2 { background: #9e5c5d; box-shadow: 0 6px 16px rgba(158,92,93,.28); }
.sk-pc-num.s3 { background: #b47040; box-shadow: 0 6px 16px rgba(180,112,64,.28); }
.sk-pc-num.s4 { background: #cc8809; box-shadow: 0 6px 16px rgba(204,136,9,.30); }
.sk-pc-title  { font-size: 15px; font-weight: 700; color: #222222; margin-bottom: 8px; line-height: 1.3; }
.sk-pc-desc   { font-size: 13px; color: #687469; line-height: 1.6; margin: 0; }

/* dark: process cards */
:root[data-theme="dark"] .sk-process-section   { background: #1e1c17; }
:root[data-theme="dark"] .sk-process-section h2 { color: #f0ece4; }
:root[data-theme="dark"] .sk-process-section .sk-process-sub { color: #9aab9b; }
:root[data-theme="dark"] .sk-pc                { background: #141210; border-color: rgba(255,255,255,.06); }
:root[data-theme="dark"] .sk-pc-title          { color: #f0ece4; }
:root[data-theme="dark"] .sk-pc-desc           { color: #9aab9b; }
@media (prefers-color-scheme: dark) {
    .sk-process-section           { background: #1e1c17; }
    .sk-process-section h2        { color: #f0ece4; }
    .sk-pc                        { background: #141210; border-color: rgba(255,255,255,.06); }
    .sk-pc-title                  { color: #f0ece4; }
    .sk-pc-desc                   { color: #9aab9b; }
}

/* -- Sidebar: icon-square social buttons ----------------------- */
.sk-sidebar-social {
    display: flex;
    gap: 8px;
    padding: 8px 12px 12px;
    justify-content: center;
}
.sk-sidebar-social a {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(135,73,74,.10);
    color: #87494a;
    font-size: 16px;
    text-decoration: none;
    border: 1px solid rgba(135,73,74,.16);
    transition: background .2s, color .2s, transform .18s, box-shadow .2s;
}
.sk-sidebar-social a:hover {
    background: #87494a;
    color: #ffffff;
    transform: translateY(-2px);
    border-color: transparent;
    box-shadow: 0 6px 18px rgba(135,73,74,.32);
}

/* -- Dark mode: sidebar surfaces ------------------------------- */
:root[data-theme="dark"] .header .header-container {
    background: linear-gradient(180deg, #1c1a15 0%, #141210 100%);
    border-color: rgba(255,255,255,.06);
    box-shadow: 0 18px 44px rgba(0,0,0,.40);
}
:root[data-theme="dark"] .navmenu a,
:root[data-theme="dark"] .navmenu a:focus {
    color: #d6d0c4;
}
:root[data-theme="dark"] .navmenu a:hover,
:root[data-theme="dark"] .navmenu a:focus:hover {
    background: rgba(204,136,9,.10);
    color: #f0ece4;
}
:root[data-theme="dark"] .navmenu a .navicon,
:root[data-theme="dark"] .navmenu a:focus .navicon { color: #c1a974; }
:root[data-theme="dark"] .navmenu a .toggle-dropdown {
    background: rgba(255,255,255,.08);
    color: #c1a974;
}
:root[data-theme="dark"] .navmenu .dropdown ul {
    background: #1c1a15;
    border-color: rgba(255,255,255,.07);
}
:root[data-theme="dark"] .navmenu .dropdown ul li a { color: #c8c3b8 !important; }
:root[data-theme="dark"] .navmenu a.active,
:root[data-theme="dark"] .navmenu a.active:focus {
    background: #87494a;
    color: #ffffff !important;
}
:root[data-theme="dark"] .sk-sidebar-social a {
    background: rgba(255,255,255,.07);
    border-color: rgba(255,255,255,.10);
    color: rgba(255,255,255,.65);
}
:root[data-theme="dark"] .sk-sidebar-social a:hover {
    background: #87494a;
    color: #ffffff;
    border-color: transparent;
}
:root[data-theme="dark"] .sk-darkmode-toggle {
    background: rgba(204,136,9,.12);
    border-color: rgba(204,136,9,.28);
    color: #cc8809;
}

/* -- Dark mode: page body + homepage sections ------------------ */
:root[data-theme="dark"] body,
:root[data-theme="dark"] .index-page                   { background-color: #111009; }
:root[data-theme="dark"] .section                      { background-color: var(--background-color, #111009); }
:root[data-theme="dark"] .light-background             { background-color: #1a1814 !important; }
:root[data-theme="dark"] .about.section                { background: #111009; }
:root[data-theme="dark"] #why-top-counselor            { background: #1a1814 !important; }
:root[data-theme="dark"] #why-top-counselor .bg-white  { background: #1e1c17 !important; border-color: rgba(255,255,255,.07) !important; }
:root[data-theme="dark"] #why-top-counselor .bg-white p { color: #c8c3b8; }
:root[data-theme="dark"] #why-top-counselor h2         { color: #f0ece4; }
:root[data-theme="dark"] #why-top-counselor p          { color: #c8c3b8; }
:root[data-theme="dark"] .badge.bg-white               { background: #1e1c17 !important; border-color: rgba(255,255,255,.1) !important; color: #c8c3b8 !important; }
:root[data-theme="dark"] .sk-practice-card             { background: #1e1c17; border-color: rgba(255,255,255,.07); }
:root[data-theme="dark"] .sk-practice-title            { color: #f0ece4; }
:root[data-theme="dark"] .sk-practice-desc             { color: #9aab9b; }
:root[data-theme="dark"] .sk-process-section           { background: #1e1c17; }
:root[data-theme="dark"] .profile-card                 { background: #1e1c17 !important; }
:root[data-theme="dark"] .about-content h2             { color: #f0ece4; }
:root[data-theme="dark"] section .section-header h2,
:root[data-theme="dark"] .section-title h2             { color: #f0ece4; }

/* =============================================================
   FINAL FRONTEND GEOMETRY � keep last so legacy theme cannot win
   ============================================================= */
@media (min-width: 1200px) {
    body.index-page { padding-left: 0 !important; }
    body.index-page #header.frontend-sidebar {
        width: 250px !important;
        left: 0 !important;
        transform: none !important;
    }
    body.index-page .main,
    body.index-page #footer {
        width: calc(100% - 250px) !important;
        margin-left: 250px !important;
    }
    body.index-page .sk-home-hero {
        width: 100% !important;
        overflow: hidden !important;
    }
    body.index-page .sk-home-hero .hero-content {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    body.index-page .sk-home-hero .container {
        max-width: 1440px !important;
        padding-left: clamp(32px, 4vw, 72px) !important;
        padding-right: clamp(32px, 4vw, 72px) !important;
    }
    body.index-page .sk-home-hero .hero-text {
        margin-left: 0 !important;
        transform: none !important;
    }
}

/* The active consultation-assistant styles are defined later in this file
   (see "SHONEE INTELLIGENCE � consultation assistant v6"). Earlier forced-
   visibility and override blocks were kept temporarily as a safety net
   but are now superseded and have been removed. */

/* =============================================================
   FIRST IMPRESSION v4 � premium legal-profile home experience
   Enhanced: ambient glow, refined gradient, subtle texture overlay
   ============================================================= */
.sk-home-hero { min-height: 100svh !important; isolation:isolate; }
.sk-home-hero::before {
    content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:radial-gradient(circle at 72% 44%,rgba(193,169,116,.15),transparent 30%),
               radial-gradient(circle at 25% 75%,rgba(135,73,74,.08),transparent 35%),
               linear-gradient(90deg,rgba(12,12,12,.12),transparent 50%);
}
.sk-home-hero::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        radial-gradient(1px 1px at 20% 30%, rgba(216,189,125,.15), transparent),
        radial-gradient(1px 1px at 40% 70%, rgba(216,189,125,.1), transparent),
        radial-gradient(1px 1px at 60% 40%, rgba(216,189,125,.12), transparent),
        radial-gradient(1px 1px at 80% 60%, rgba(216,189,125,.08), transparent);
    background-size: 200px 200px;
    opacity: .5;
}
.sk-home-hero .hero-content { z-index:3 !important; }
.sk-home-hero .hero-text {
    max-width:760px; padding:clamp(30px,4.2vw,62px) !important;
    border:1px solid rgba(255,255,255,.11) !important; border-radius:30px !important;
    background:linear-gradient(145deg,rgba(18,18,18,.78),rgba(18,18,18,.44)) !important;
    box-shadow:0 32px 90px rgba(0,0,0,.28) !important;
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.sk-hero-availability {
    display:inline-flex;align-items:center;gap:8px;padding:7px 11px;margin-bottom:18px;
    border:1px solid rgba(255,255,255,.12);border-radius:999px;color:rgba(255,255,255,.78);
    background:rgba(255,255,255,.06);font-size:11px;font-weight:700;letter-spacing:.2px;
}
.sk-hero-availability span { width:7px;height:7px;border-radius:50%;background:#79bb85;box-shadow:0 0 0 5px rgba(121,187,133,.12); }
.sk-home-hero .sk-hero-eyebrow { font-size:10px !important;letter-spacing:2.2px !important;color:#d0b77e !important; }
.sk-home-hero .hero-text h1 {
    max-width:700px;margin:15px 0 12px !important;color:#fff !important;
    font-size:clamp(42px,4.8vw,76px) !important;line-height:.98 !important;
    letter-spacing:-3.2px !important;font-weight:800 !important;
}
.sk-home-hero .hero-text h1 .accent-text { display:block;color:#d3b979 !important; }
.sk-home-hero .hero-text h1 .accent-text::after { display:none !important; }
.sk-home-hero .hero-text h2 { font-size:clamp(18px,1.7vw,25px) !important;letter-spacing:-.4px !important;margin-bottom:20px !important; }
.sk-home-hero .hero-text h2 span { color:rgba(255,255,255,.55);font-weight:500; }
.sk-home-hero .hero-text .lead { max-width:680px;font-size:clamp(16px,1.35vw,20px) !important;line-height:1.55 !important; }
.sk-home-hero .hero-text .description { max-width:640px;color:rgba(255,255,255,.68) !important;font-size:14px !important;line-height:1.7 !important; }
.sk-home-hero .hero-actions { margin-top:28px !important;gap:12px !important; }
.sk-home-hero .hero-actions .btn { min-height:54px !important;padding:0 21px !important;border-radius:14px !important;display:inline-flex;align-items:center;justify-content:center; }
.sk-home-hero .hero-actions .btn-primary { background:linear-gradient(135deg,#a45a5b,#7e4041) !important;box-shadow:0 12px 30px rgba(135,73,74,.36) !important; }
.sk-home-hero .sk-hero-proof { display:flex;gap:0;margin-top:30px;padding-top:22px;border-top:1px solid rgba(255,255,255,.10); }
.sk-home-hero .sk-hero-proof span { display:flex !important;flex-direction:column;gap:2px;min-width:135px;padding-right:22px;margin-right:22px;border-right:1px solid rgba(255,255,255,.10); }
.sk-home-hero .sk-hero-proof span:last-child { border:0;margin:0;padding:0; }
.sk-home-hero .sk-hero-proof strong { color:#fff;font-size:15px;line-height:1.1; }
.sk-home-hero .sk-hero-proof small { color:rgba(255,255,255,.5);font-size:10px;text-transform:uppercase;letter-spacing:.8px; }
.sk-home-hero .sk-official-hero-card {
    position:relative;border-radius:30px !important;border:1px solid rgba(255,255,255,.16) !important;
    box-shadow:0 35px 90px rgba(0,0,0,.38) !important;transform:translateY(8px) rotate(1deg);
    transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease;
}
.sk-home-hero .sk-official-hero-card:hover { transform:translateY(0) rotate(0);box-shadow:0 42px 110px rgba(0,0,0,.45) !important; }
.sk-home-hero .sk-official-card-caption { display:flex;align-items:center;justify-content:space-between;padding:22px 24px !important; }
.sk-home-hero .sk-official-card-caption .sk-card-kicker { display:block;color:#c8ae74;font-size:9px;font-weight:800;letter-spacing:1.6px;text-transform:uppercase; }
.sk-home-hero .sk-official-card-caption h3 { margin:5px 0 4px !important; }
.sk-home-hero .sk-official-card-caption p { margin:0;color:rgba(255,255,255,.64);font-size:11px; }
.sk-home-hero .sk-official-card-caption > a { width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#87494a;text-decoration:none; }
.sk-portrait-seal {
    position:absolute;right:-18px;top:28px;display:flex;align-items:center;gap:8px;padding:10px 12px;
    color:#312a26;background:#f5efe7;border:1px solid rgba(255,255,255,.8);border-radius:13px;
    box-shadow:0 14px 30px rgba(0,0,0,.20);font-size:9px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
}
.sk-portrait-seal i { color:#87494a;font-size:20px; }

.sk-pathways { position:relative;z-index:4;padding:42px 0 52px;background:#f4f0eb;border-bottom:1px solid #e4dcd5; }
.sk-pathways .sk-section-kicker { color:#87494a;font-size:10px;font-weight:900;letter-spacing:2px;text-transform:uppercase; }
.sk-pathways h2 { margin:7px 0 0;color:#292524;font-size:clamp(26px,3vw,38px);letter-spacing:-1.2px; }
.sk-pathways > .container > div > p { max-width:480px;color:#736b67;font-size:13px;line-height:1.6; }
.sk-path-card {
    display:flex;align-items:center;gap:14px;padding:20px;border:1px solid #e3d9d2;border-radius:18px;
    color:#2c2827;background:rgba(255,255,255,.78);text-decoration:none;
    box-shadow:0 8px 24px rgba(57,38,31,.04);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease;
}
.sk-path-card:hover { color:#2c2827;transform:translateY(-5px);border-color:rgba(135,73,74,.34);box-shadow:0 18px 40px rgba(78,44,41,.10); }
.sk-path-icon { flex:0 0 46px;width:46px;height:46px;display:grid;place-items:center;border-radius:14px;color:#87494a;background:#f3e7e4;font-size:20px; }
.sk-path-card > span:nth-child(2) { display:flex;flex-direction:column;min-width:0; }
.sk-path-card strong { font-size:14px; }.sk-path-card small { margin-top:3px;color:#7c7470;font-size:10px;line-height:1.4; }
.sk-path-arrow { margin-left:auto;color:#a8948c;transition:transform .25s ease,color .25s ease; }
.sk-path-card:hover .sk-path-arrow { color:#87494a;transform:translateX(4px); }
@media(max-width:1199.98px){
    .sk-home-hero .hero-text{margin-top:80px}
}
@media(max-width:767.98px){
    .sk-home-hero .hero-text{padding:28px 22px !important;border-radius:22px !important}
    .sk-home-hero .hero-text h1{font-size:clamp(39px,12vw,58px) !important;letter-spacing:-2px !important}
    .sk-home-hero .sk-hero-proof{flex-wrap:wrap;row-gap:15px}
    .sk-home-hero .sk-hero-proof span{min-width:44%;margin-right:12px;padding-right:12px}
    .sk-home-hero .hero-actions .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
    .sk-home-hero .sk-official-hero-card,.sk-path-card,.sk-path-arrow{transition:none !important;transform:none !important}
}

/* =============================================================
   SIDEBAR MEGA FLYOUTS
   ============================================================= */
@media(min-width:1200px){
    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        display:grid !important;grid-template-columns:0.85fr 1fr 1.15fr;gap:0;
        position:fixed !important;left:255px !important;top:0;
        width:min(850px,calc(100vw - 300px));min-height:420px;
        padding:12px !important;border:1px solid rgba(135,73,74,.16) !important;border-radius:26px !important;
        background:rgba(250,248,245,.98) !important;box-shadow:0 35px 100px rgba(38,25,24,.28) !important;
        backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
        max-height:calc(100vh - 40px);overflow-y:auto;overflow-x:hidden;
        opacity:0;visibility:hidden;pointer-events:none;transform:translate(-10px,0) scale(.98) !important;
        transition:opacity .22s ease,transform .22s ease,visibility .22s ease;z-index:2200 !important;
    }
    .frontend-sidebar__nav > li.dropdown.mega-open > .sk-mega-panel {
        opacity:1;visibility:visible;pointer-events:auto;transform:translate(0,0) scale(1) !important;
    }
}

/* =============================================================
   FINAL EDITORIAL SYSTEM v12 � header, body and footer
   ============================================================= */
body.index-page { color:#514a47;background:#f6f3ef; }
body.index-page .section { padding:88px 0; }
body.index-page .section-title { max-width:720px;margin:0 auto 46px;text-align:center; }
body.index-page .section-title h2 {
    margin:0 0 12px;color:#272322;font-size:clamp(30px,3.3vw,46px);line-height:1.08;letter-spacing:-1.5px;
}
body.index-page .section-title p { max-width:620px;margin:0 auto;color:#7b726e;font-size:14px;line-height:1.7; }
body.index-page #about { background:#fff; }
body.index-page #practice { background:#f4f0eb; }
body.index-page #portfolio { background:#fff; }
body.index-page #services { background:#f4f0eb; }
body.index-page #testimonials { background:#fff !important; }
body.index-page .sk-practice-card,
body.index-page .service-item,
body.index-page .testimonial-slide {
    border:1px solid rgba(71,48,42,.09) !important;border-radius:20px !important;
    box-shadow:0 10px 35px rgba(55,36,30,.05) !important;
}
body.index-page .sk-practice-card:hover,
body.index-page .service-item:hover { transform:translateY(-5px);box-shadow:0 22px 55px rgba(77,45,40,.10) !important; }
body.index-page #about .profile-card { border-radius:24px !important;overflow:hidden;box-shadow:0 24px 65px rgba(52,34,29,.10) !important; }
body.index-page #about .about-content .description p { color:#675f5b;line-height:1.8;font-size:14px; }
body.index-page #testimonials .testimonial-slide { max-width:780px !important;padding:38px !important; }
body.index-page #testimonials .testimonial-slide p { font-family:Georgia,serif;font-size:19px !important;line-height:1.65 !important; }

@media(min-width:1200px){
    body.index-page #header.frontend-sidebar {
        border:1px solid rgba(96,59,56,.13) !important;
        background:#fbf9f6 !important;
        box-shadow:0 28px 75px rgba(53,34,30,.14) !important;
    }
    body.index-page #header .header-container { background:#fbf9f6 !important; }
    body.index-page #header .frontend-sidebar__brand {
        min-height:104px !important;padding:14px 17px !important;
        display:flex;align-items:center;border-bottom:1px solid rgba(135,73,74,.10);
        background:linear-gradient(145deg,#955253,#7d4041) !important;
    }
    body.index-page #header .frontend-sidebar__brand img { max-height:68px !important;object-fit:contain; }
    body.index-page #header .frontend-sidebar__item { min-height:46px;border-radius:12px !important;font-size:12px !important; }
    body.index-page #header .frontend-sidebar__nav { padding:10px !important; }
    body.index-page #header .sk-sidebar-social { padding:8px 10px 11px !important; }
}

/* =============================================================
   PREMIUM KNOWLEDGE-PLATFORM FOOTER v2 � multi-layer Bootstrap 5
   Layers: CTA ? main columns ? trust bar ? bottom bar
   Palette preserved: burgundy #87494a / gold #dbc184 / charcoal / cream
   ============================================================= */
body.index-page #footer.sk-ft {
    position: relative;
    overflow: hidden;
    padding: 0;
    color: #d9d2cb;
    background: #141110;
    border: 0;
}
body.index-page #footer.sk-ft::before,
body.index-page #footer.sk-ft::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}
body.index-page #footer.sk-ft::before {
    width: 640px; height: 640px; right: -220px; top: -280px;
    background: radial-gradient(circle, rgba(135,73,74,.32), transparent 66%);
}
body.index-page #footer.sk-ft::after {
    width: 520px; height: 520px; left: -200px; bottom: -260px;
    background: radial-gradient(circle, rgba(216,189,125,.10), transparent 66%);
}
.sk-ft > section,
.sk-ft > div { position: relative; z-index: 1; }
.sk-ft .container {
    max-width: 1440px;
    padding-left: clamp(30px, 3.2vw, 58px);
    padding-right: clamp(30px, 3.2vw, 58px);
}

/* -- Layer 1: CTA panel --------------------------------------- */
.sk-ft-cta { padding-top: clamp(40px, 5vw, 68px); }
.sk-ft-cta__panel {
    position: relative;
    overflow: hidden;
    border-radius: 26px;
    padding: clamp(34px, 4.6vw, 60px);
    background:
        radial-gradient(760px 300px at 88% -30%, rgba(216,189,125,.20), transparent 60%),
        linear-gradient(122deg, #945052 0%, #6e3536 58%, #4a1c1e 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 34px 80px rgba(0,0,0,.30);
}
.sk-ft-cta__panel::after {
    content: "";
    position: absolute;
    right: -70px; bottom: -110px;
    width: 280px; height: 280px;
    border-radius: 50%;
    border: 1px solid rgba(216,189,125,.20);
}
.sk-ft-cta__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #e2c993;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
.sk-ft-cta__eyebrow::before { content: ""; width: 28px; height: 2px; border-radius: 2px; background: #e2c993; }
.sk-ft-cta__panel h2 {
    margin: 14px 0 10px;
    color: #ffffff;
    font-size: clamp(30px, 4vw, 52px);
    line-height: 1.05;
    letter-spacing: -1.6px;
    font-weight: 800;
}
.sk-ft-cta__panel p {
    margin: 0;
    max-width: 560px;
    color: rgba(255,255,255,.66);
    font-size: 15px;
    line-height: 1.7;
}
.sk-ft-cta__actions { display: flex; flex-wrap: wrap; gap: 14px; }

.sk-ft-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 26px;
    border-radius: 15px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, border-color .22s ease, color .22s ease;
}
.sk-ft-btn i { font-size: 16px; }
.sk-ft-btn--gold {
    color: #241b12;
    background: linear-gradient(135deg, #eed9ae 0%, #cfaa6b 100%);
    box-shadow: 0 16px 34px rgba(0,0,0,.24);
}
.sk-ft-btn--gold:hover { transform: translateY(-2px); color: #160f08; box-shadow: 0 22px 42px rgba(0,0,0,.32); }
.sk-ft-btn--ghost {
    color: #ffffff;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.28);
}
.sk-ft-btn--ghost:hover { transform: translateY(-2px); color: #fff; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.45); }

/* -- Layer 2: main columns ------------------------------------ */
.sk-ft-main { padding: 56px 0 48px; }
.sk-ft-main .row { align-items: stretch; }

.sk-ft-brand { display: inline-block; margin-bottom: 18px; text-decoration: none; }
.sk-ft-brand img { height: 48px; width: auto; max-width: 180px; }
.sk-ft-lead { margin: 0; max-width: 360px; color: rgba(255,255,255,.55); font-size: 13.5px; line-height: 1.7; }
.sk-ft-contact { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 9px; }
.sk-ft-contact a,
.sk-ft-contact span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: rgba(255,255,255,.62);
    font-size: 13px;
    text-decoration: none;
    transition: color .2s ease;
}
.sk-ft-contact i { width: 16px; color: #b96768; font-size: 14px; }
.sk-ft-contact a:hover { color: #fff; }

.sk-ft-social { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sk-ft-social a {
    width: 42px; height: 42px;
    display: grid; place-items: center;
    border-radius: 13px;
    border: 1px solid rgba(255,255,255,.12);
    background: rgba(255,255,255,.04);
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: all .22s ease;
}
.sk-ft-social a:hover {
    background: #87494a;
    border-color: #87494a;
    color: #fff;
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0,0,0,.30);
}

.sk-ft-col-title {
    margin: 2px 0 20px;
    color: #d6bd85;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sk-ft-col-title button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-transform: inherit;
    cursor: pointer;
}
.sk-ft-col-title button i { font-size: 12px; transition: transform .25s ease; }
.sk-ft-col-title button[aria-expanded="true"] i { transform: rotate(180deg); }

.sk-ft-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sk-ft-links a {
    display: inline-block;
    position: relative;
    color: rgba(255,255,255,.58);
    font-size: 13px;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}
.sk-ft-links a::after {
    content: "";
    position: absolute;
    left: 0; bottom: -3px;
    width: 0; height: 1px;
    background: #dbc184;
    transition: width .25s ease;
}
.sk-ft-links a:hover { color: #fff; transform: translateX(4px); }
.sk-ft-links a:hover::after { width: 100%; }

.sk-ft-posts { list-style: none; margin: 0; padding: 0; }
.sk-ft-posts li + li { border-top: 1px solid rgba(255,255,255,.07); }
.sk-ft-posts a { display: block; padding: 10px 4px; text-decoration: none; transition: transform .2s ease; }
.sk-ft-posts a:hover { transform: translateX(4px); }
.sk-ft-posts strong {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    color: rgba(255,255,255,.80);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.45;
    transition: color .2s ease;
}
.sk-ft-posts a:hover strong { color: #fff; }
.sk-ft-post-meta {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-top: 6px;
    color: #a99a7c;
    font-size: 11px;
    font-style: normal;
    letter-spacing: .4px;
}
.sk-ft-post-meta::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #b96768; }

.sk-ft-viewall {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.07);
    color: #e2c993;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: color .2s ease, transform .2s ease;
}
.sk-ft-viewall i { font-size: 14px; transition: transform .2s ease; }
.sk-ft-viewall:hover { color: #fff; transform: translateX(3px); }
.sk-ft-viewall:hover i { transform: translateX(3px); }

/* -- Layer 3: trust & credentials bar ------------------------- */
.sk-ft-trustbar { border-top: 1px solid rgba(255,255,255,.08); padding: 30px 0; }
.sk-ft-pill {
    display: flex;
    align-items: center;
    gap: 14px;
    height: 100%;
    padding: 16px 18px;
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,.08);
    background: rgba(255,255,255,.035);
}
.sk-ft-pill i {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: grid; place-items: center;
    border-radius: 12px;
    color: #171413;
    background: linear-gradient(135deg, #eed9ae, #c9a45e);
    font-size: 18px;
}
.sk-ft-pill strong { display: block; color: #fff; font-size: 13px; font-weight: 700; }
.sk-ft-pill span { display: block; margin-top: 3px; color: rgba(255,255,255,.50); font-size: 12px; line-height: 1.5; }

/* -- Layer 4: bottom bar -------------------------------------- */
.sk-ft-bottom { border-top: 1px solid rgba(255,255,255,.08); padding: 22px 0 26px; }
.sk-ft-bottom p { margin: 0; color: rgba(255,255,255,.42); font-size: 12px; }
.sk-ft-bottom p strong { color: rgba(255,255,255,.60); font-weight: 700; }
.sk-ft-legal { display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: flex-end; }
.sk-ft-legal a { color: rgba(255,255,255,.48); font-size: 12px; text-decoration: none; transition: color .2s ease; }
.sk-ft-legal a:hover { color: #fff; }
.sk-ft-credit { color: rgba(255,255,255,.62); }
.sk-ft-credit strong { color: #d3b979; font-weight: 800; }
.sk-ft-credit:hover strong { color: #fff; }

/* -- Responsive ----------------------------------------------- */
@media (min-width: 768px) {
    .sk-ft-main .sk-ft-links.collapse { display: block !important; }
}
@media (min-width: 1200px) {
    .sk-ft-main .row > [class*="col-"] + [class*="col-"] { border-left: 1px solid rgba(255,255,255,.06); }
}
@media (max-width: 767.98px) {
    body.index-page .section { padding: 64px 0; }
    .sk-ft-cta { padding-top: 24px; }
    .sk-ft-cta__panel { border-radius: 22px; }
    .sk-ft-cta__actions .sk-ft-btn { width: 100%; }
    .sk-ft-main { padding: 40px 0 32px; }
    .sk-ft-legal { justify-content: flex-start; }
}
@media(min-width:1200px) and (max-height:760px){
    body.index-page #header .sk-sidebar-social { display:none !important; }
}
@media(min-width:1200px) and (max-width:1399.98px){
    body.index-page .sk-home-hero .hero-text { padding:30px !important; }
    body.index-page .sk-home-hero .hero-text h1 {
        font-size:48px !important;letter-spacing:-2.2px !important;margin-top:10px !important;
    }
    body.index-page .sk-home-hero .hero-text .lead { font-size:15px !important;line-height:1.5 !important; }
    body.index-page .sk-home-hero .sk-hero-proof { gap:10px !important; }
    body.index-page .sk-home-hero .sk-hero-proof span {
        flex:1 1 0 !important;min-width:0 !important;margin-right:0 !important;padding-right:10px !important;
    }
}

/* =============================================================
   SHONEE INTELLIGENCE � consultation assistant v6 (see below)
   ============================================================= */

/* =============================================================
   MEGA MENU STABILITY + MOTION v10
   No transformed ancestor: flyouts stay viewport-fixed and the
   narrow sidebar never receives a horizontal scrollbar.
   ============================================================= */
@media(min-width:1200px){
    body.index-page #header.frontend-sidebar {
        top:max(16px,calc((100vh - 581px)/2)) !important;
        height:min(581px,calc(100vh - 32px)) !important;
        max-height:calc(100vh - 32px) !important;
        transform:none !important;
    }
    body.index-page #header .header-container {
        height:100% !important;max-height:100% !important;
        overflow-x:hidden !important;overflow-y:auto !important;
        overscroll-behavior:contain;
    }
    body.index-page #header,
    body.index-page #header .navmenu,
    body.index-page #header .frontend-sidebar__nav { scrollbar-width:none; }
    body.index-page #header::-webkit-scrollbar,
    body.index-page #header .header-container::-webkit-scrollbar { width:0;height:0; }

    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        left:255px !important;top:0;
        transform:translate3d(-18px,0,0) scale(.975) !important;
        transform-origin:left top;
        transition:opacity .28s cubic-bezier(.2,.8,.2,1),
                   transform .34s cubic-bezier(.16,1,.3,1),
                   visibility .28s linear !important;
        will-change:transform,opacity;
    }
    .frontend-sidebar__nav > li.dropdown.mega-open > .sk-mega-panel {
        transform:translate3d(0,0,0) scale(1) !important;
    }
    .sk-mega-panel > div {
        opacity:0;transform:translateY(14px);
        transition:opacity .32s ease,transform .42s cubic-bezier(.16,1,.3,1);
    }
    .frontend-sidebar__nav > li.dropdown.mega-open > .sk-mega-panel > div {
        opacity:1;transform:translateY(0);
    }
    .sk-mega-panel > div:nth-child(1){transition-delay:.04s}
    .sk-mega-panel > div:nth-child(2){transition-delay:.10s}
    .sk-mega-panel > div:nth-child(3){transition-delay:.16s}
    .sk-mega-panel__topics > a,.sk-mega-panel__latest > a {
        transition:background .2s ease,color .2s ease,transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s ease !important;
    }
    .sk-mega-panel__topics > a:hover,.sk-mega-panel__latest > a:hover { transform:translateX(4px); }
}
@media(prefers-reduced-motion:reduce){
    .sk-mega-panel,.sk-mega-panel > div,.sk-mega-panel__topics > a,.sk-mega-panel__latest > a {
        animation:none !important;transition:none !important;
    }
}
/* Mega menu content styles replaced by v3 rebuild at end of file */

/* =============================================================
   SHONEE INTELLIGENCE � consultation assistant v7
   Conversation-first AI surface aligned with the Child Custody
   page design language (Bootstrap 5 hierarchy, tight spacing,
   content over decoration). Brand palette preserved: burgundy
   #87494a, charcoal #211c1b, gold #d8bd7d, ivory #f5f1ec.
   ============================================================= */

/* ---------- Floating launcher ---------- */
#sk-chat-toggle.sk-chat__launcher {
    position:absolute;
    right:0;
    bottom:0;
    z-index:99999;
    width:60px;
    height:60px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border:0;
    border-radius:50%;
    color:#fff;
    background:linear-gradient(145deg,#a75f60,#713738);
    box-shadow:0 18px 40px rgba(64,30,31,.38),inset 0 1px 0 rgba(255,255,255,.28);
    cursor:pointer;
    transition:transform .28s cubic-bezier(.22,.61,.36,1),box-shadow .28s ease,opacity .22s ease;
}
#sk-chat-toggle.sk-chat__launcher::after {
    content:"";
    position:absolute;
    right:5px;
    bottom:5px;
    width:12px;
    height:12px;
    border-radius:50%;
    background:#72b47e;
    border:2.5px solid #fff;
    box-shadow:0 0 0 3px rgba(114,180,126,.28);
    transition:background .2s ease,box-shadow .2s ease;
}
#sk-chat-toggle.sk-chat__launcher.has-session::after { background:#d8bd7d;box-shadow:0 0 0 3px rgba(216,189,125,.3); }
#sk-chat-toggle.sk-chat__launcher:hover {
    transform:translateY(-3px);
    box-shadow:0 24px 52px rgba(64,30,31,.48),inset 0 1px 0 rgba(255,255,255,.3);
}
#sk-chat-toggle.sk-chat__launcher:hover .sk-ai-icon i { transform:scale(1.1); }
.sk-ai-icon { display:grid;place-items:center; }
.sk-ai-icon i { font-size:22px;line-height:1;transition:transform .28s cubic-bezier(.22,.61,.36,1); }
.sk-ai-launch-label {
    position:absolute;
    right:calc(100% + 12px);
    top:50%;
    transform:translateY(-50%) translateX(6px);
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.08);
    border-radius:11px;
    color:#fff;
    background:rgba(23,17,16,.92);
    font-size:12px;
    font-weight:700;
    letter-spacing:.2px;
    white-space:nowrap;
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease,transform .2s ease;
    box-shadow:0 10px 24px rgba(28,16,15,.22);
}
#sk-chat-toggle:hover .sk-ai-launch-label,
#sk-chat-toggle:focus-visible .sk-ai-launch-label {
    opacity:1;
    transform:translateY(-50%) translateX(0);
}
#sk-chat.sk-chat.is-open .sk-chat__launcher {
    opacity:0;
    transform:scale(.6);
    pointer-events:none;
}

/* ---------- Panel shell (compact, conversation-first) ---------- */
#sk-chat-panel.sk-chat__panel {
    position:absolute;
    right:0;
    bottom:0;
    z-index:99999;
    width:min(420px,calc(100vw - 24px));
    height:min(460px,calc(100vh - 132px));
    height:min(460px,calc(100dvh - 132px));
    max-height:calc(100dvh - 132px);
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(135,73,74,.14);
    border-radius:20px;
    color:#2b2423;
    background:linear-gradient(180deg,#fbf8f4,#f2ede7);
    box-shadow:0 40px 100px rgba(36,20,18,.28),0 14px 36px rgba(36,20,18,.16);
    animation:skPanelIn .34s cubic-bezier(.22,.61,.36,1);
}
#sk-chat-panel.sk-chat__panel[hidden] { display:none !important; }
@keyframes skPanelIn {
    from { opacity:0;transform:translateY(14px) scale(.985); }
    to { opacity:1;transform:none; }
}

/* ---------- Header (tight, brand-first) ---------- */
#sk-chat-panel .sk-chat__head {
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px 12px;
    background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.3));
    border-bottom:1px solid rgba(135,73,74,.10);
}
#sk-chat-panel .sk-chat__avatar {
    flex:0 0 28px;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:9px;
    color:#fff;
    background:linear-gradient(145deg,#a75f60,#713738);
    font:900 10px/1 'Nunito',sans-serif;
    box-shadow:0 5px 12px rgba(135,73,74,.26),inset 0 1px 0 rgba(255,255,255,.24);
}
.sk-ai-brand { min-width:0;display:flex;flex-direction:column; }
.sk-ai-brand strong { color:#211c1b;font-size:12.5px;font-weight:800;letter-spacing:-.2px;line-height:1.2; }
.sk-ai-brand small {
    display:flex;
    align-items:center;
    gap:6px;
    margin-top:1px;
    color:rgba(43,36,35,.55);
    font-size:9.5px;
    font-weight:700;
    letter-spacing:.2px;
    line-height:1.2;
}
.sk-ai-brand small span {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#72b47e;
    box-shadow:0 0 0 3px rgba(114,180,126,.14);
}
#sk-chat-panel .sk-chat__head > button {
    flex:0 0 28px;
    width:28px;
    height:28px;
    margin-left:auto;
    display:grid;
    place-items:center;
    padding:0;
    border:1px solid rgba(135,73,74,.14);
    border-radius:9px;
    color:#713738;
    background:rgba(255,255,255,.7);
    transition:background .2s ease,color .2s ease,border-color .2s ease,transform .2s ease;
}
#sk-chat-panel .sk-chat__head > button:hover {
    background:#87494a;
    border-color:#87494a;
    color:#fff;
    transform:translateY(-1px);
}

/* ---------- Conversation body ---------- */
#sk-chat-panel .sk-chat__body {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:12px 12px 6px;
    scrollbar-width:thin;
    scrollbar-color:rgba(135,73,74,.30) transparent;
}
#sk-chat-panel .sk-chat__body::-webkit-scrollbar { width:6px; }
#sk-chat-panel .sk-chat__body::-webkit-scrollbar-thumb { background:rgba(135,73,74,.30);border-radius:99px; }
#sk-chat-panel .sk-chat__body::-webkit-scrollbar-track { background:transparent; }

/* ---------- Welcome (lean) ---------- */
.sk-chat__welcome { padding:0; }
.sk-chat__welcome > span {
    display:inline-flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    padding:3px 9px;
    border:1px solid rgba(135,73,74,.20);
    border-radius:999px;
    color:#87494a;
    background:rgba(255,255,255,.7);
    font-size:8.5px;
    font-weight:800;
    letter-spacing:1.1px;
    text-transform:uppercase;
}
.sk-chat__welcome h3 { margin:0 0 4px !important;color:#211c1b !important;font-size:15.5px !important;line-height:1.3;letter-spacing:-.3px !important;font-weight:800; }
.sk-chat__welcome h3 span { color:#87494a; }
.sk-chat__welcome p { max-width:340px;margin:0 !important;color:#6e6460 !important;font-size:11px !important;line-height:1.45 !important; }

/* ---------- Prompt chips (light pills, AI-assistant style) ---------- */
.sk-chat__prompts { display:flex !important;flex-wrap:wrap;gap:6px !important;margin-top:10px !important; }
.sk-chat__prompts button {
    min-width:0;
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 11px !important;
    text-align:left;
    color:#4a3534 !important;
    background:rgba(135,73,74,.06) !important;
    border:1px solid rgba(135,73,74,.13) !important;
    border-radius:999px !important;
    box-shadow:none;
    transition:transform .2s cubic-bezier(.22,.61,.36,1),background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease !important;
}
.sk-chat__prompts button span { flex:0 0 auto;color:#87494a;font-size:7.5px;font-weight:800;letter-spacing:.9px;text-transform:uppercase; }
.sk-chat__prompts button strong { flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:700;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sk-chat__prompts button i { flex:0 0 auto;color:#87494a;font-size:10px;opacity:.65;transition:transform .2s cubic-bezier(.22,.61,.36,1),opacity .2s ease; }
.sk-chat__prompts button:hover,
.sk-chat__prompts button:focus-visible {
    background:#87494a !important;
    border-color:#87494a !important;
    color:#fff !important;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(135,73,74,.22);
}
.sk-chat__prompts button:hover span,
.sk-chat__prompts button:hover strong,
.sk-chat__prompts button:hover i,
.sk-chat__prompts button:focus-visible span,
.sk-chat__prompts button:focus-visible strong,
.sk-chat__prompts button:focus-visible i { color:#fff; }
.sk-chat__prompts button:hover i,
.sk-chat__prompts button:focus-visible i { opacity:1;transform:translate(1px,-1px); }
#sk-chat-panel .sk-chat__prompts button:disabled { opacity:.4;pointer-events:none;transform:none; }

/* ---------- Messages ---------- */
#sk-chat-panel .sk-chat__message {
    margin-bottom:12px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    animation:skMsgIn .3s cubic-bezier(.22,.61,.36,1);
}
@keyframes skMsgIn {
    from { opacity:0;transform:translateY(6px); }
    to { opacity:1;transform:none; }
}
.sk-ai-answer-meta {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:5px;
}
.sk-ai-answer-meta span { display:inline-flex;align-items:center;gap:6px;color:#87494a;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; }
.sk-ai-answer-meta em { margin-left:auto;color:#5f8f68;font-size:9px;font-weight:800;letter-spacing:.6px;font-style:normal;text-transform:uppercase;white-space:nowrap; }
.sk-chat__message.is-bot > p,
.sk-chat__message.is-human > p { margin:0;max-width:560px;color:#3d3634;font-size:12.5px;line-height:1.65; }
.sk-chat__message.is-bot > p strong,
.sk-chat__message.is-human > p strong { color:#211c1b;font-weight:800; }
.sk-chat__message.is-bot > p em,
.sk-chat__message.is-human > p em,
.sk-chat__message.is-human > em {
    display:block;
    margin-top:6px;
    color:#87494a;
    font-family:Georgia,serif;
    font-size:12px;
    line-height:1.5;
}
.sk-ai-greeting { margin:0 0 6px;color:#211c1b;font-size:13px;font-weight:700;line-height:1.45; }
#sk-chat-panel .sk-chat__message.is-user {
    width:fit-content;
    max-width:82% !important;
    margin-left:auto !important;
    padding:9px 13px !important;
    border:1px solid rgba(38,34,33,.10) !important;
    border-radius:14px 14px 6px 14px !important;
    color:#f7f2ec !important;
    background:linear-gradient(150deg,#2b2624,#211c1b) !important;
    box-shadow:0 8px 20px rgba(36,20,18,.14);
}
.sk-chat__message.is-user small { display:none; }
.sk-chat__message.is-user p { margin:0;font-size:13px;line-height:1.55;white-space:pre-line; }
#sk-chat-panel .sk-chat__message.is-human.is-final { background:linear-gradient(180deg,rgba(135,73,74,.05),transparent) !important; }
#sk-chat-panel .sk-chat__message.is-human.is-final .sk-ai-answer-meta em { color:#87494a; }

/* ---------- Typing indicator ---------- */
.sk-chat__typing { pointer-events:none; }
.sk-ai-typing {
    display:flex;
    align-items:center;
    gap:4px;
    padding:10px 13px;
    width:fit-content;
    border:1px solid rgba(135,73,74,.10);
    border-radius:14px 14px 14px 6px;
    background:rgba(255,255,255,.75);
}
.sk-ai-typing span {
    width:6px;
    height:6px;
    border-radius:50%;
    background:#87494a;
    animation:skDot 1.2s infinite ease-in-out;
}
.sk-ai-typing span:nth-child(2) { animation-delay:-.4s; }
.sk-ai-typing span:nth-child(3) { animation-delay:-.2s; }
@keyframes skDot {
    0%,60%,100% { opacity:.25;transform:translateY(0); }
    30% { opacity:1;transform:translateY(-3px); }
}

/* ---------- Source references + copy ---------- */
.sk-chat__sources {
    margin-top:10px;
    padding:10px 12px;
    border:1px solid rgba(135,73,74,.12);
    border-radius:13px;
    background:rgba(255,255,255,.75);
}
.sk-chat__sources-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:8px;
}
.sk-chat__sources-meta > span { display:inline-flex;align-items:center;gap:6px;color:#87494a;font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase; }
.sk-chat__copy {
    display:inline-flex;
    align-items:center;
    gap:5px;
    padding:4px 10px;
    border:1px solid rgba(135,73,74,.16);
    border-radius:999px;
    color:#713738;
    background:transparent;
    font:700 9px 'Nunito',sans-serif;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.sk-chat__copy:hover { background:rgba(135,73,74,.08);border-color:rgba(135,73,74,.30);transform:translateY(-1px); }
.sk-chat__copy.is-copied { color:#3f7d4c;border-color:rgba(63,125,76,.30);background:rgba(63,125,76,.08); }
.sk-chat__src {
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 11px;
    border-radius:10px;
    color:#2f2927 !important;
    background:rgba(135,73,74,.05);
    text-decoration:none !important;
    transition:background .2s ease,transform .2s ease !important;
}
.sk-chat__src > i:first-child { color:#87494a;font-size:15px; }
.sk-chat__src span { display:flex;flex-direction:column;min-width:0; }
.sk-chat__src strong { font-size:11.5px;font-weight:800;color:#211c1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sk-chat__src em { font-size:9.5px;font-style:normal;color:#8a7f7b; }
.sk-chat__src > i:last-child { margin-left:auto;color:#87494a;transition:transform .2s ease; }
.sk-chat__src:hover { background:rgba(135,73,74,.10); }
.sk-chat__src:hover > i:last-child { transform:translate(2px,-2px); }

/* ---------- Suggested follow-ups ---------- */
.sk-chat__followups { margin-top:12px; }
.sk-chat__followups-label { display:inline-flex;align-items:center;gap:6px;color:#a47071;font-size:8.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase; }
.sk-chat__followup {
    display:inline-flex;
    align-items:center;
    gap:6px;
    max-width:100%;
    margin:6px 6px 0 0;
    padding:7px 11px;
    border-radius:999px;
    color:#4a3534;
    background:rgba(135,73,74,.06);
    border:1px solid rgba(135,73,74,.13);
    font:700 11px/1.3 'Nunito',sans-serif;
    cursor:pointer;
    transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease !important;
}
.sk-chat__followup span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sk-chat__followup i { color:#87494a;font-size:10px;transition:transform .2s ease,color .2s ease; }
.sk-chat__followup:hover,
.sk-chat__followup:focus-visible {
    background:#87494a;
    border-color:#87494a;
    color:#fff;
    transform:translateY(-1px);
    box-shadow:0 6px 14px rgba(135,73,74,.20);
}
.sk-chat__followup:hover i,
.sk-chat__followup:focus-visible i { color:#fff;transform:translate(1px,-1px); }

/* ---------- Matched resource action ---------- */
#sk-chat-panel .sk-chat__resource {
    width:auto !important;
    margin-top:10px !important;
    display:inline-flex !important;
    align-items:center;
    gap:8px;
    padding:8px 12px !important;
    border:1px solid rgba(135,73,74,.20) !important;
    border-radius:11px !important;
    color:#713738 !important;
    background:rgba(135,73,74,.07) !important;
    text-decoration:none !important;
    transition:background .2s ease,transform .2s ease,border-color .2s ease !important;
}
#sk-chat-panel .sk-chat__resource:hover {
    background:rgba(135,73,74,.14) !important;
    border-color:rgba(135,73,74,.32) !important;
    transform:translateX(2px);
}
#sk-chat-panel .sk-chat__resource span { font-size:11.5px;font-weight:700;text-transform:none;letter-spacing:0; }
#sk-chat-panel .sk-chat__resource i { color:#87494a;transition:transform .2s ease; }
#sk-chat-panel .sk-chat__resource:hover i { transform:translateX(2px); }

/* ---------- Thinking / analysing state ---------- */
#sk-chat-panel .sk-chat__status {
    flex:0 0 auto;
    padding:10px 14px !important;
    color:#5a514e !important;
    background:rgba(255,255,255,.6);
    border-top:1px solid rgba(135,73,74,.08);
}
#sk-chat-panel .sk-chat__status[hidden] { display:none !important; }
.sk-ai-thinking__row {
    display:flex;
    align-items:center;
    gap:9px;
}
.sk-ai-thinking__pulse {
    flex:0 0 auto;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#87494a;
    animation:skThinkingPulse 1.1s infinite ease-in-out;
}
@keyframes skThinkingPulse {
    0%,100% { opacity:.35;transform:scale(.8); }
    50% { opacity:1;transform:scale(1.15); }
}
#sk-chat-panel .sk-chat__status em {
    color:#4a3534;
    font-size:11.5px;
    font-style:normal;
    font-weight:700;
    letter-spacing:.1px;
}
.sk-ai-thinking__steps {
    list-style:none;
    margin:8px 0 0;
    padding:0;
    display:grid;
    gap:5px;
}
.sk-ai-thinking__steps li {
    display:flex;
    align-items:center;
    gap:8px;
    color:#8a7f7b;
    font-size:10px;
    font-weight:600;
    letter-spacing:.1px;
    opacity:.5;
    transition:opacity .3s ease,color .3s ease;
}
.sk-ai-thinking__steps li i {
    flex:0 0 15px;
    width:15px;
    height:15px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(135,73,74,.10);
    color:#87494a;
    font-size:7px;
    transition:background .3s ease,color .3s ease;
}
.sk-ai-thinking__steps li.is-done {
    opacity:1;
    color:#5a4a49;
}
.sk-ai-thinking__steps li.is-done i {
    background:#87494a;
    color:#fff;
}

/* ---------- Composer (modern AI composer) ---------- */
#sk-chat-panel .sk-chat__form { flex:0 0 auto;padding:8px 12px 10px;background:transparent; }
#sk-chat-panel .sk-chat__form.is-complete { opacity:.5;pointer-events:none; }
.sk-ai-composer {
    display:flex;
    align-items:flex-end;
    gap:8px;
    padding:5px 5px 5px 13px;
    background:#fff;
    border:1px solid rgba(135,73,74,.16);
    border-radius:15px;
    box-shadow:0 3px 12px rgba(36,20,18,.06);
    transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.sk-ai-composer:focus-within {
    border-color:rgba(135,73,74,.50);
    box-shadow:0 0 0 4px rgba(135,73,74,.10),0 3px 12px rgba(36,20,18,.06);
    transform:translateY(-1px);
}
#sk-chat-panel .sk-ai-composer textarea {
    flex:1 1 auto;
    height:auto !important;
    min-height:24px !important;
    max-height:110px;
    padding:8px 0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#211c1b;
    font:400 13px/1.5 'Nunito',sans-serif !important;
    resize:none;
}
#sk-chat-panel .sk-ai-composer textarea::placeholder { color:rgba(43,36,35,.42); }
#sk-chat-panel .sk-ai-composer button {
    flex:0 0 34px;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    padding:0;
    border:0;
    border-radius:11px;
    color:#fff !important;
    background:linear-gradient(145deg,#a75f60,#713738) !important;
    box-shadow:0 6px 14px rgba(135,73,74,.26),inset 0 1px 0 rgba(255,255,255,.22) !important;
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,opacity .2s ease,background .2s ease !important;
}
#sk-chat-panel .sk-ai-composer button:hover {
    transform:translateY(-1px) scale(1.04);
    filter:brightness(1.05);
    box-shadow:0 9px 18px rgba(135,73,74,.32),inset 0 1px 0 rgba(255,255,255,.22) !important;
}
#sk-chat-panel .sk-ai-composer button:active { transform:scale(.96); }
#sk-chat-panel .sk-ai-composer button:disabled {
    opacity:.4;
    cursor:default;
    transform:none;
    filter:none;
    box-shadow:none !important;
    background:rgba(135,73,74,.28) !important;
}
.sk-chat__composer-hint {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:5px;
    color:rgba(43,36,35,.45);
    font-size:8.5px;
    letter-spacing:.2px;
}
.sk-chat__composer-hint span { display:inline-flex;align-items:center;gap:5px; }

/* ---------- Close confirmation ---------- */
.sk-ai-close-confirm {
    position:absolute;
    inset:0;
    z-index:40;
    padding:18px;
    display:grid;
    place-items:center;
    border-radius:inherit;
    background:rgba(36,22,20,.5);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}
.sk-ai-close-confirm[hidden] { display:none !important; }
.sk-ai-close-confirm > div {
    width:100%;
    max-width:340px;
    padding:24px 20px;
    border:1px solid rgba(135,73,74,.12);
    border-radius:20px;
    color:#211c1b;
    background:#fffdfb;
    box-shadow:0 32px 80px rgba(36,20,18,.35);
}
.sk-ai-close-confirm > div > span {
    width:44px;
    height:44px;
    display:grid;
    place-items:center;
    margin-bottom:14px;
    border-radius:13px;
    color:#fff;
    background:#87494a;
    font-size:18px;
    box-shadow:0 10px 22px rgba(135,73,74,.30);
}
.sk-ai-close-confirm small { color:#a47071;font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; }
.sk-ai-close-confirm h4 { margin:7px 0;color:#211c1b;font-size:20px;letter-spacing:-.5px;font-weight:800; }
.sk-ai-close-confirm p { margin:0;color:#6e6460;font-size:12px;line-height:1.6; }
.sk-ai-close-confirm > div > div { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px; }
.sk-ai-close-confirm button {
    min-height:42px;
    padding:10px 12px;
    border:1px solid rgba(135,73,74,.22);
    border-radius:12px;
    color:#713738;
    background:transparent;
    font-size:10px;
    font-weight:800;
    letter-spacing:.4px;
    transition:transform .2s ease,background .2s ease,border-color .2s ease;
}
.sk-ai-close-confirm button:hover { transform:translateY(-1px);background:rgba(135,73,74,.08); }
#sk-ai-confirm-close { border-color:#87494a !important;background:#87494a !important;color:#fff !important; }
#sk-ai-confirm-close:hover { background:#713738 !important;border-color:#713738 !important; }

/* ---------- Keyboard focus ring ---------- */
#sk-chat-toggle.sk-chat__launcher:focus-visible,
#sk-ai-confirm-close:focus-visible,
#sk-ai-keep-chat:focus-visible,
#sk-chat-close:focus-visible,
.sk-chat__copy:focus-visible {
    outline:none;
    box-shadow:0 0 0 3px rgba(193,169,116,.6),0 0 0 6px rgba(135,73,74,.35) !important;
}

/* ---------- Responsive ---------- */
@media(max-width:575.98px){
    #sk-chat-toggle.sk-chat__launcher { width:56px;height:56px; }
    #sk-chat-toggle .sk-ai-launch-label { display:none; }
    #sk-chat-panel.sk-chat__panel {
        width:calc(100vw - 20px);
        height:min(64vh,calc(100vh - 96px));
        height:min(64dvh,calc(100dvh - 96px));
        max-height:calc(100dvh - 96px);
        border-radius:18px;
    }
    #sk-chat-panel .sk-chat__head { padding:6px 11px; }
    #sk-chat-panel .sk-chat__avatar { flex-basis:27px;width:27px;height:27px;border-radius:8px; }
    #sk-chat-panel .sk-chat__head > button { flex-basis:27px;width:27px;height:27px; }
    #sk-chat-panel .sk-chat__body { padding:10px 11px 5px; }
    #sk-chat-panel .sk-chat__form { padding:6px 11px 9px; }
    .sk-chat__composer-hint { font-size:8px; }
    .sk-chat__prompts button { padding:6px 10px !important; }
}
@media(min-width:576px) and (max-width:767.98px){
    #sk-chat-panel.sk-chat__panel {
        height:min(64vh,calc(100vh - 96px));
        height:min(64dvh,calc(100dvh - 96px));
        max-height:calc(100dvh - 96px);
    }
}
@media(prefers-reduced-motion:reduce){
    .sk-ai-thinking__pulse,
    .sk-ai-typing span,
    #sk-chat-panel,
    #sk-chat-panel .sk-chat__message { animation:none !important; }
    #sk-chat-toggle.sk-chat__launcher,
    #sk-chat-toggle .sk-ai-icon i,
    #sk-chat-toggle .sk-ai-launch-label,
    .sk-chat__prompts button,
    .sk-chat__followup,
    .sk-chat__copy,
    #sk-chat-panel .sk-chat__resource,
    #sk-chat-panel .sk-ai-composer,
    #sk-chat-panel .sk-chat__head > button,
    .sk-ai-close-confirm button { transition:none !important; }
}

/* =============================================================
   ALIGNMENT SYSTEM v6 � centred rail, shared grid, action stack
   ============================================================= */
@media(min-width:1200px){
    body.index-page #header.frontend-sidebar {
        top:50% !important;bottom:auto !important;left:10px !important;
        width:240px !important;height:auto !important;max-height:calc(100vh - 32px) !important;
        padding:0 !important;transform:translateY(-50%) !important;
        border-radius:20px !important;overflow:visible !important;
    }
    body.index-page #header .header-container {
        width:100% !important;height:auto !important;max-height:calc(100vh - 32px) !important;
        margin:0 !important;border-radius:20px !important;overflow-y:auto !important;overflow-x:visible !important;
        scrollbar-width:thin;scrollbar-color:rgba(135,73,74,.28) transparent;
    }
    body.index-page .main,
    body.index-page #footer {
        width:calc(100% - 260px) !important;margin-left:260px !important;
    }
    body.index-page .main > section > .container,
    body.index-page .main > section > .hero-content > .container {
        width:100% !important;max-width:1440px !important;
        padding-left:clamp(30px,3.2vw,58px) !important;
        padding-right:clamp(30px,3.2vw,58px) !important;
        margin-left:auto !important;margin-right:auto !important;
    }
    body.index-page .sk-home-hero {
        min-height:100vh !important;height:auto !important;
    }
    body.index-page .sk-home-hero .hero-content {
        min-height:100vh !important;height:auto !important;
        padding:28px 0 !important;display:flex !important;align-items:center !important;
    }
    body.index-page .sk-home-hero .hero-content .row {
        width:100% !important;min-height:0 !important;height:auto !important;margin:0 !important;
    }
    body.index-page .sk-home-hero .hero-text {
        width:100% !important;max-width:720px !important;height:auto !important;
        padding:clamp(28px,3vw,44px) !important;margin:0 !important;
    }
    body.index-page .sk-home-hero .hero-text h1 {
        font-size:clamp(44px,4vw,62px) !important;line-height:1 !important;letter-spacing:-2.8px !important;
    }
    body.index-page .sk-home-hero .hero-text h2 { margin-bottom:14px !important; }
    body.index-page .sk-home-hero .hero-text .lead { margin-bottom:10px !important; }
    body.index-page .sk-home-hero .hero-text .description { margin-bottom:20px !important; }
    body.index-page .sk-home-hero .hero-actions {
        flex-wrap:nowrap !important;margin:20px 0 0 !important;gap:9px !important;
    }
    body.index-page .sk-home-hero .hero-actions .btn {
        width:auto !important;min-height:48px !important;padding:0 16px !important;
        font-size:11px !important;white-space:nowrap !important;
    }
    body.index-page .sk-home-hero .sk-hero-proof {
        margin-top:20px !important;padding-top:16px !important;
    }
    body.index-page .sk-home-hero .hero-visual { margin:0 !important; }
}

/* Chat and scroll-to-top are one deliberate floating action stack. */
#sk-chat.sk-chat { right:24px !important;bottom:92px !important;position:fixed !important; }
#scroll-top.scroll-top {
    left:24px !important;bottom:24px !important;width:50px !important;height:50px !important;
    border-radius:16px !important;background:#2a2625 !important;box-shadow:0 12px 28px rgba(28,19,18,.22) !important;
    z-index:1080 !important;
    position:fixed !important;
}
#scroll-top.scroll-top:hover { background:#87494a !important; }

/* When the footer comes into view, dim the floating action stack so the
   footer's contact details, links and social icons stay clean and clickable. */
#sk-chat.sk-chat.is-fading,
#scroll-top.scroll-top.is-fading {
    opacity: 0 !important;
    transform: translateY(8px) scale(.94) !important;
    pointer-events: none !important;
    transition: opacity .25s ease, transform .25s ease !important;
}
#sk-chat.sk-chat,
#scroll-top.scroll-top { transition: opacity .25s ease, transform .25s ease !important; }
@media (prefers-reduced-motion: reduce) {
    #sk-chat.sk-chat.is-fading,
    #scroll-top.scroll-top.is-fading { transform: none !important; transition: opacity .15s linear !important; }
}

@media(max-width:1199.98px){
    #sk-chat.sk-chat { right:14px !important;bottom:82px !important; }
    #scroll-top.scroll-top { left:14px !important;bottom:14px !important; }
    body.index-page .main > section > .container,
    body.index-page .main > section > .hero-content > .container {
        padding-left:24px !important;padding-right:24px !important;
    }
}
@media(max-width:767.98px){
    body.index-page .main > section > .container,
    body.index-page .main > section > .hero-content > .container {
        padding-left:16px !important;padding-right:16px !important;
    }
}

/* FINAL RAIL CONTAINMENT � must remain the last desktop rail rule. */
@media(min-width:1200px){
    body.index-page #header.frontend-sidebar {
        top:max(16px,calc((100vh - 581px)/2)) !important;
        bottom:auto !important;
        height:min(581px,calc(100vh - 32px)) !important;
        max-height:calc(100vh - 32px) !important;
        transform:none !important;
        overflow:visible !important;
    }
    body.index-page #header .header-container {
        width:100% !important;height:100% !important;max-height:100% !important;
        overflow-x:hidden !important;overflow-y:auto !important;
        scrollbar-width:none !important;
    }
    body.index-page #header .header-container::-webkit-scrollbar { width:0 !important;height:0 !important; }
    body.index-page #header .frontend-sidebar__brand,
    body.index-page #header .navmenu,
    body.index-page #header .frontend-sidebar__nav {
        width:100% !important;max-width:100% !important;box-sizing:border-box !important;
    }
}

/* Brand name + tagline block (works in the desktop rail AND the
   off-canvas drawer; the desktop density block re-tunes sizes). */
body.index-page #header .frontend-sidebar__brand .nav-logo {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}
body.index-page #header .frontend-sidebar__brand .nav-logo img { width: auto; height: auto; }
body.index-page #header .frontend-sidebar__brandtext {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
body.index-page #header .frontend-sidebar__brandtext strong {
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .2px;
    line-height: 1.1;
}
body.index-page #header .frontend-sidebar__brandtext em {
    margin-top: 3px;
    color: #d8bd7d;
    font-size: 8.5px;
    font-weight: 700;
    font-style: normal;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

/* =============================================================
   SIDEBAR DENSITY + MODERN SAAS RAIL v1 � 2026-08-01
   Compact, information-dense navigation rail (Microsoft
   365 / Notion / Linear / Stripe style). Preserves the burgundy /
   charcoal / gold / ivory palette, the desktop hover mega flyouts
   and the click accordion; swaps the full-width active capsule
   for a slim animated left indicator + tinted row and tightens
   spacing so the top-level menu fits on a laptop screen without
   scrolling. Applied from tablet (768px) up so tablet and desktop
   share one static rail; the collapsible drawer is phone-only.
   The mega flyouts remain desktop-only (>=1200px) and stay hidden
   below 1200px. Must remain the LAST sidebar block so it wins every
   earlier override.
   ============================================================= */
@media (min-width: 768px) {

    /* -- Drawer toggle is phone-only: never leak onto tablet/desktop -- */
    /* Backstop for d-md-none in case Bootstrap CSS fails to load. */
    .header .header-toggle { display: none !important; }
    /* Prevent header-show (drawer mode) from shifting the header
       on tablet: the rail positioning below always wins. */
    body.index-page #header.frontend-sidebar.header-show { left: 20px !important; }

    /* -- Rail surface ---------------------------------------- */
    /* Height is CONTENT-DRIVEN: the rail hugs its menu rows and
       never fills the viewport. max-height is only a scroll safety
       cap for short screens / expanded submenus. The rail floats
       and is vertically centred at the middle-left of the screen.
       Its translateY transform makes the header the containing
       block for the mega flyouts, so those flyouts are re-anchored
       to the header's padding box further down in this block. */
    body.index-page #header.frontend-sidebar {
        top: 50% !important;
        bottom: auto !important;
        left: 20px !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 32px) !important;
        transform: translateY(-50%) !important;
        border-radius: 20px !important;
        border: 1px solid rgba(96,59,56,.12) !important;
        background: linear-gradient(180deg, #fdfbf8 0%, #f7f3ed 100%) !important;
        box-shadow: 0 24px 60px rgba(53,34,30,.12), 0 2px 10px rgba(53,34,30,.05) !important;
    }
    body.index-page #header .header-container {
        height: auto !important;
        min-height: 0 !important;
        max-height: calc(100vh - 32px) !important;
        flex-grow: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(135,73,74,.22) transparent;
    }
    body.index-page #header .navmenu { flex: 0 1 auto; }
    body.index-page #header .header-container::-webkit-scrollbar { width: 4px !important; height: 4px !important; }
    body.index-page #header .header-container::-webkit-scrollbar-thumb { background: rgba(135,73,74,.22); border-radius: 99px; }
    body.index-page #header .header-container::-webkit-scrollbar-track { background: transparent; }

    /* Content starts past the floating rail: 20px rail + 240px width + 10px gap. */
    body.index-page .main,
    body.index-page #footer {
        width: calc(100% - 270px) !important;
        margin-left: 270px !important;
    }

    /* -- Compact brand strip (fixed logo bar, not the menu body) -- */
    body.index-page #header .frontend-sidebar__brand {
        height: 132px !important;
        width: auto !important;
        margin: 0 -12px !important;
        padding: 0 24px !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 7px;
        border-bottom: 1px solid rgba(216,189,125,.35);
        background: linear-gradient(135deg, #925052 0%, #713738 100%) !important;
    }
    body.index-page #header .frontend-sidebar__brand .nav-logo {
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 7px;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    body.index-page #header .frontend-sidebar__brand .nav-logo img {
        width: auto !important;
        max-width: 100% !important;
        max-height: 64px !important;
        height: auto;
    }
    body.index-page #header .frontend-sidebar__brandtext {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    body.index-page #header .frontend-sidebar__brandtext strong {
        color: #fff;
        font-size: 13.5px;
        font-weight: 800;
        letter-spacing: .2px;
        line-height: 1.1;
    }
    body.index-page #header .frontend-sidebar__brandtext em {
        margin-top: 3px;
        color: #d8bd7d;
        font-size: 8.5px;
        font-weight: 700;
        font-style: normal;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        white-space: nowrap;
    }

    /* -- Menu container -------------------------------------- */
    body.index-page #header .frontend-sidebar__nav {
        display: flex;
        flex-direction: column;
        gap: 1px;
        padding: 8px 8px 6px !important;
    }
    body.index-page #header .frontend-sidebar__item {
        position: relative;
        min-height: 34px !important;
        margin: 0 !important;
        padding: 6px 10px !important;
        border-radius: 9px !important;
        font-size: 12.5px !important;
        font-weight: 600 !important;
        letter-spacing: .1px !important;
        color: #4a423f !important;
        transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease;
    }
    body.index-page #header .frontend-sidebar__item .navicon {
        font-size: 15px !important;
        margin: 0 !important;
        line-height: 1;
    }
    body.index-page #header .frontend-sidebar__item .toggle-dropdown {
        width: 22px !important;
        height: 22px !important;
        margin-left: auto;
        flex: 0 0 auto;
        font-size: 12px !important;
        line-height: 0;
        background: transparent !important;
        color: #a29893 !important;
        transition: transform .25s ease, color .25s ease, background .25s ease;
    }
    body.index-page #header .frontend-sidebar__item:hover {
        background: rgba(135,73,74,.07);
        color: #6f3839 !important;
        transform: translateX(2px);
    }
    body.index-page #header .frontend-sidebar__item:hover .navicon { color: #6f3839; }

    /* -- Active: slim left indicator + tinted row (no capsule) -- */
    body.index-page #header .frontend-sidebar__item.active:not(:has(.toggle-dropdown)),
    body.index-page #header .frontend-sidebar__nav > li.dropdown.active > a.frontend-sidebar__item {
        background: rgba(135,73,74,.09) !important;
        color: #6f3839 !important;
        box-shadow: inset 0 0 0 1px rgba(135,73,74,.10) !important;
    }
    body.index-page #header .frontend-sidebar__item.active:not(:has(.toggle-dropdown)) .navicon,
    body.index-page #header .frontend-sidebar__nav > li.dropdown.active > a.frontend-sidebar__item .navicon { color: #6f3839; }
    body.index-page #header .frontend-sidebar__item.active:not(:has(.toggle-dropdown))::before,
    body.index-page #header .frontend-sidebar__nav > li.dropdown.active > a.frontend-sidebar__item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 8px;
        bottom: 8px;
        width: 3px;
        border-radius: 0 3px 3px 0;
        background: linear-gradient(180deg, #b06466 0%, #87494a 100%);
        box-shadow: 0 0 8px rgba(135,73,74,.45);
        transform-origin: top center;
        animation: skRailBarIn .34s cubic-bezier(.22,.61,.36,1) both;
    }
    /* Expanded accordion parents keep only the caret rotation. */
    body.index-page #header .frontend-sidebar__item.active:has(.toggle-dropdown) {
        background: transparent !important;
        color: #4a423f !important;
        box-shadow: none !important;
    }
    body.index-page #header .frontend-sidebar__item.active > .toggle-dropdown,
    body.index-page #header .navmenu .dropdown.active > a > .toggle-dropdown {
        transform: rotate(180deg);
        color: #87494a !important;
    }

    /* Accordion submenus removed in the mega-menu v4 rebuild; the
       flyout panels now handle all sub-navigation on every breakpoint. */

    /* -- Social footer --------------------------------------- */
    body.index-page #header .sk-sidebar-social {
        margin-top: auto !important;
        padding: 9px 10px 12px !important;
        border-top: 1px solid rgba(135,73,74,.08);
    }
    body.index-page #header .sk-sidebar-social a {
        width: 34px !important;
        height: 34px !important;
        font-size: 15px !important;
        border-radius: 9px !important;
    }

    /* -- Mega flyout alignment ------------------------------- */
    /* The rail's translateY transform makes the header the
       containing block for the viewport-fixed flyouts, so their
       offsets are measured from the header's padding box.
       left = rail width (240) + border (1) + gap (14) = 255px.
       All flyouts are pinned to the rail's TOP edge (top:0) so
       the sidebar and its mega menu read as one navigation system.
       alignMegaFlyouts() overrides top/max-height with exact
       viewport-safe values (internal scroll when space is tight). */
    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        left: 255px !important;
        top: 0;
        transform: translate3d(-18px, 0, 0) scale(.975) !important;
        transform-origin: left top;
        max-height: calc(100vh - 40px);
        overflow-y: auto;
        overflow-x: hidden;
    }
    .frontend-sidebar__nav > li.dropdown.mega-open > .sk-mega-panel {
        transform: translate3d(0, 0, 0) scale(1) !important;
    }
    .sk-mega-panel::-webkit-scrollbar { width: 6px; }
    .sk-mega-panel::-webkit-scrollbar-thumb {
        background: rgba(135,73,74,.28);
        border-radius: 99px;
    }

    /* -- Dark mode: sidebar surfaces ------------------------- */
    :root[data-theme="dark"] body.index-page #header.frontend-sidebar {
        background: linear-gradient(180deg, #1d1b16 0%, #16140f 100%) !important;
        border-color: rgba(255,255,255,.06) !important;
        box-shadow: 0 24px 60px rgba(0,0,0,.45) !important;
    }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__brand {
        background: linear-gradient(135deg, #6f3839 0%, #4c2b2c 100%) !important;
        border-bottom-color: rgba(216,189,125,.30);
    }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__brandtext strong { color: #f5efe7; }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__brandtext em { color: #c1a974; }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item { color: #cfc9bd !important; }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item .navicon { color: #c1a974; }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item .toggle-dropdown { color: #8d8a80 !important; }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item:hover {
        background: rgba(204,136,9,.10) !important;
        color: #f0ece4 !important;
    }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item:hover .navicon { color: #d3b979; }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item.active:not(:has(.toggle-dropdown)),
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__nav > li.dropdown.active > a.frontend-sidebar__item {
        background: rgba(204,136,9,.13) !important;
        color: #f0ece4 !important;
        box-shadow: inset 0 0 0 1px rgba(204,136,9,.20) !important;
    }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item.active:not(:has(.toggle-dropdown))::before,
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__nav > li.dropdown.active > a.frontend-sidebar__item::before {
        background: linear-gradient(180deg, #d8bd7d 0%, #c1a974 100%);
    }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item.active:has(.toggle-dropdown) {
        background: transparent !important;
        color: #cfc9bd !important;
        box-shadow: none !important;
    }
    :root[data-theme="dark"] body.index-page #header .frontend-sidebar__item.active > .toggle-dropdown,
    :root[data-theme="dark"] body.index-page #header .navmenu .dropdown.active > a > .toggle-dropdown { color: #d3b979 !important; }
    :root[data-theme="dark"] body.index-page #header .sk-sidebar-social a {
        background: rgba(255,255,255,.07) !important;
        border-color: rgba(255,255,255,.10) !important;
        color: rgba(255,255,255,.65) !important;
    }
}

/* -- Active indicator entrance ------------------------------- */
@keyframes skRailBarIn {
    from { opacity: 0; transform: scaleY(.4); }
    to { opacity: 1; transform: scaleY(1); }
}

/* -- Reduced motion ------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    body.index-page #header .frontend-sidebar__item,
    body.index-page #header .frontend-sidebar__item .toggle-dropdown,
    body.index-page #header .sk-sidebar-social a {
        transition: none !important;
    }
    body.index-page #header .frontend-sidebar__item.active:not(:has(.toggle-dropdown))::before,
    body.index-page #header .frontend-sidebar__nav > li.dropdown.active > a.frontend-sidebar__item::before {
        animation: none !important;
    }
}

/* Content hub refinement replaced by v3 rebuild at end of file */

/* =============================================================
   CHAT EXPERIENCE v2 — Bootstrap 5 shell + sentiment feedback
   ============================================================= */
#sk-chat-panel.sk-chat__panel {
    width:min(430px,calc(100vw - 32px));
    height:min(580px,calc(100dvh - 112px));
    border:1px solid rgba(135,73,74,.16);
    border-radius:24px;
    background:rgba(252,250,247,.97);
    box-shadow:0 30px 90px rgba(42,27,25,.22),0 4px 18px rgba(42,27,25,.10);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}
#sk-chat-panel .sk-chat__head {
    min-height:64px;
    padding:12px 14px;
    border-bottom:1px solid rgba(135,73,74,.10);
    background:linear-gradient(135deg,rgba(255,255,255,.96),rgba(247,240,235,.92));
}
#sk-chat-panel .sk-chat__avatar {
    width:38px;height:38px;flex-basis:38px;border-radius:12px;
    box-shadow:0 8px 18px rgba(135,73,74,.22);
}
.sk-ai-brand strong { font-size:14px; }
.sk-ai-brand small { margin-top:3px;font-size:9.5px; }
#sk-chat-panel .sk-chat__body { padding:12px 14px 6px; }
.sk-chat__welcome {
    padding:14px;
    border:1px solid rgba(135,73,74,.11);
    border-radius:18px;
    background:linear-gradient(145deg,#fff 0%,#f8f2ed 100%);
    box-shadow:0 12px 28px rgba(61,41,37,.06);
}
.sk-chat__welcome h3 { font-size:19px !important;line-height:1.25 !important; }
.sk-chat__welcome p { margin-top:7px !important;font-size:12px !important;line-height:1.55 !important; }
.sk-chat__trust span {
    width:100%;display:inline-flex;align-items:center;gap:6px;padding:7px 9px;
    border-radius:10px;color:#665a56;background:rgba(135,73,74,.055);
    font-size:9.5px;font-weight:800;letter-spacing:.2px;
}
.sk-chat__trust i { color:#87494a;font-size:12px; }
.sk-chat__prompts { margin-top:12px !important;display:grid !important;grid-template-columns:1fr 1fr; }
.sk-chat__prompts button { min-height:48px;border-radius:13px !important; }
#sk-chat-panel .sk-chat__message { padding:12px 13px !important;border-radius:15px !important;background:rgba(255,255,255,.8) !important; }
#sk-chat-panel .sk-chat__message.is-user { padding:10px 14px !important;background:linear-gradient(145deg,#8e4c4d,#703839) !important; }
.sk-ai-answer-meta { flex-wrap:wrap; }
.sk-chat__sentiment {
    margin-left:auto;padding:5px 8px;color:#6d4a31;background:#f3e5cf;
    font:800 8.5px/1 'Nunito',sans-serif;letter-spacing:.35px;text-transform:uppercase;
}
.sk-chat__message[data-sentiment="urgent"] .sk-chat__sentiment,
.sk-chat__message[data-sentiment="distressed"] .sk-chat__sentiment { color:#8a3d32;background:#f9ddd5; }
.sk-chat__message[data-sentiment="calm"] .sk-chat__sentiment { color:#376a45;background:#dff0e3; }
.sk-chat__message[data-sentiment="formal"] .sk-chat__sentiment { color:#385d79;background:#e0edf5; }
.sk-chat__safety { margin:10px 0 0;padding:9px 11px;border:0;border-radius:11px;font-size:10.5px;line-height:1.45; }
#sk-chat-panel .sk-chat__form { padding:8px 12px 9px;background:rgba(252,250,247,.94);border-top:1px solid rgba(135,73,74,.08); }
.sk-ai-composer { min-height:50px;padding:6px 6px 6px 14px;border-radius:17px; }
.sk-chat__composer-hint kbd { padding:1px 4px;color:#6b5c57;background:#eee5df;font-size:8px;box-shadow:none; }
@media(max-width:575.98px){
    #sk-chat.sk-chat.is-open { inset:0 !important;z-index:1200; }
    #sk-chat-panel.sk-chat__panel {
        position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;
        max-height:none !important;border:0;border-radius:0;
    }
    #sk-chat-panel .sk-chat__head { padding-top:max(12px,env(safe-area-inset-top)); }
    #sk-chat-panel .sk-chat__body { padding:14px 12px 6px; }
    .sk-chat__prompts { grid-template-columns:1fr; }
    #sk-chat-panel .sk-chat__form { padding-bottom:max(10px,env(safe-area-inset-bottom)); }
}

/* Keyboard access: visible only when reached by Tab. */
.sk-skip-link {
    position:fixed;left:16px;top:12px;z-index:100000;
    padding:10px 16px;border-radius:8px;color:#fff;background:#713738;
    font-weight:800;text-decoration:none;transform:translateY(-160%);
    transition:transform .18s ease;
}
.sk-skip-link:focus { color:#fff;transform:translateY(0); }



/* =============================================================
   HOME PAGE v13 - UNIFIED SECTION SYSTEM
   Shared scaffolding for all home sections: kicker, section
   headers, cards and stats. Bootstrap 5 utilities carry layout;
   this block owns rhythm, color and surface polish.
   Palette preserved: burgundy #87494a / gold #d8bd7d /
   charcoal #211c1b / cream #f4f0eb
   ============================================================= */

/* ---- Shared section rhythm ---- */
body.index-page .section:not(.sk-home-hero) { padding: 84px 0; }

/* ---- Section kicker (eyebrow) ---- */
body.index-page .sk-kicker {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #87494a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
}
body.index-page .section-title .sk-kicker::before,
body.index-page .section-title .sk-kicker::after {
    content: "";
    width: 26px;
    height: 1px;
    background: rgba(135, 73, 74, .35);
}
body.index-page .sk-kicker--start::before,
body.index-page .sk-kicker--start::after { display: none; }

/* Kill stock centred-title hairlines; keep index typography */
body.index-page .section-title h2::before,
body.index-page .section-title h2::after { display: none; }
body.index-page .section-title { padding-bottom: 0; }

/* ---- About: spec list ---- */
.sk-spec-list { display: flex; flex-direction: column; }
.sk-spec-item {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 1px solid rgba(135, 73, 74, .12);
    border-radius: 14px;
    background: #fbf9f6;
}
.sk-spec-item + .sk-spec-item { margin-top: 12px; }
.sk-spec-icon {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    color: #87494a;
    background: rgba(135, 73, 74, .08);
    font-size: 17px;
}
.sk-spec-item small {
    display: block;
    color: #687469;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.sk-spec-item p { margin: 3px 0 0; color: #211c1b; font-size: 14.5px; font-weight: 600; }

/* ---- About: stats band ---- */
.sk-stats-band {
    position: relative;
    overflow: hidden;
    padding: 30px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, #211c1b 0%, #2c2623 100%);
    box-shadow: 0 24px 60px rgba(33, 28, 27, .18);
}
.sk-stats-band::before {
    content: "";
    position: absolute;
    right: -70px;
    top: -70px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 189, 125, .22), transparent 66%);
    pointer-events: none;
}
.sk-stat { padding: 10px 12px; position: relative; z-index: 1; }
.sk-stat small {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, .5);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
}
.sk-stat strong {
    display: block;
    color: #d8bd7d;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.1;
}
@media (min-width: 768px) {
    .sk-stats-band .row > * + * .sk-stat {
        border-left: 1px solid rgba(255, 255, 255, .08);
    }
}

/* ---- Practice area cards ---- */
body.index-page .sk-practice-card {
    padding: 30px 26px 24px;
    border: 1px solid rgba(71, 48, 42, .09);
    border-radius: 20px;
    background: #fff;
    color: inherit;
    text-decoration: none;
    box-shadow: 0 10px 35px rgba(55, 36, 30, .05);
    transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
body.index-page .sk-practice-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 26px 60px rgba(77, 45, 40, .12);
    border-color: rgba(135, 73, 74, .3);
    color: inherit;
}
.sk-practice-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    border-radius: 15px;
    color: #87494a;
    background: rgba(135, 73, 74, .08);
    font-size: 23px;
    transition: background .28s ease, color .28s ease, transform .28s ease;
}
body.index-page .sk-practice-card:hover .sk-practice-icon {
    background: #87494a;
    color: #fff;
    transform: translateY(-2px);
}
.sk-practice-title {
    margin: 0 0 8px;
    color: #211c1b;
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.2px;
}
.sk-practice-desc {
    margin: 0;
    color: #7b726e;
    font-size: 13.5px;
    line-height: 1.6;
}
.sk-practice-link {
    margin-top: auto;
    padding-top: 16px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #87494a;
    font-size: 12.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .6px;
}
.sk-practice-link i { transition: transform .25s ease; }
body.index-page .sk-practice-card:hover .sk-practice-link i { transform: translateX(4px); }

/* ---- Services cards ---- */
body.index-page .service-card {
    padding: 28px 24px;
    margin-bottom: 0;
    border: 1px solid rgba(135, 73, 74, 0.08);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 2px 12px rgba(135, 73, 74, 0.04);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
body.index-page .service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(135, 73, 74, 0.1);
    border-color: rgba(135, 73, 74, 0.2);
}
body.index-page .service-card .service-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(135, 73, 74, 0.1) 0%, rgba(216, 189, 125, 0.15) 100%);
    color: #87494a;
    transition: transform 0.3s ease, background 0.3s ease;
}
body.index-page .service-card:hover .service-icon {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(135, 73, 74, 0.15) 0%, rgba(216, 189, 125, 0.25) 100%);
}
body.index-page .service-card .service-icon i { font-size: 20px; color: #87494a; }
body.index-page .service-card h3 { font-size: 17px; font-weight: 700; }
body.index-page .service-card h3 a { color: #211c1b; text-decoration: none; transition: color 0.25s ease; }
body.index-page .service-card h3 a:hover { color: #87494a; }
body.index-page .service-card h3 a span { color: #87494a; }
body.index-page .service-card p { color: #6b615b; font-size: 13.5px; line-height: 1.6; }
.sk-service-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #87494a;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: gap 0.25s ease, color 0.25s ease;
}
.sk-service-link:hover { gap: 10px; color: #6d3a3b; }
.sk-service-link i { transition: transform 0.25s ease; }
body.index-page .service-card:hover .sk-service-link i { transform: translateX(4px); }

/* =============================================================
   HOME TESTIMONIALS — premium client-feedback experience
   Scoped entirely under .home-testimonials (index page only).
   Palette: burgundy #87494a · charcoal #211c1b · ivory #f8f7f4
   · muted gold #d8bd7d / #c1a974.
   ============================================================= */

/* Warm ivory surface replaces the old flat white card */
body.index-page #testimonials.home-testimonials {
    background: #f6f3ef !important;
}

.home-testimonials {
    --ht-burgundy: #87494a;
    --ht-burgundy-deep: #6f3839;
    --ht-charcoal: #211c1b;
    --ht-ivory: #fbf9f4;
    --ht-ivory-deep: #f2ece2;
    --ht-gold: #d8bd7d;
    --ht-gold-soft: #c1a974;
    --ht-text: #3b3532;
    --ht-muted: #9a8f88;
    position: relative;
}

/* ---- Stage: layered warm-ivory surface with restrained radial depth ---- */
.home-testimonials__stage {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    padding: 24px 28px;
    border: 1px solid rgba(71, 48, 42, .06);
    border-radius: 16px;
    background:
        radial-gradient(ellipse 72% 58% at 88% -6%, rgba(135, 73, 74, .08), transparent 60%),
        linear-gradient(158deg, #fbf9f4 0%, #f4efe6 100%);
    box-shadow: 0 8px 24px rgba(55, 36, 30, .06), inset 0 1px 0 rgba(255, 255, 255, .65);
    z-index: 1;
}

/* Subtle quotation graphic */
.home-testimonials__mark {
    position: absolute;
    top: -12px;
    left: 12px;
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 80px;
    line-height: 1;
    color: rgba(135, 73, 74, .07);
    z-index: 0;
    user-select: none;
    pointer-events: none;
}

/* Minimal glow orbs */
.home-testimonials__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(20px);
    pointer-events: none;
    z-index: 0;
}
.home-testimonials__glow--one {
    width: 180px;
    height: 180px;
    top: -80px;
    right: 5%;
    background: radial-gradient(circle, rgba(135, 73, 74, .1), transparent 66%);
}
.home-testimonials__glow--two {
    width: 150px;
    height: 150px;
    bottom: -70px;
    left: 25%;
    background: radial-gradient(circle, rgba(200, 169, 116, .15), transparent 66%);
}

/* ---- Deck: compact horizontal slider (grid-stacked slide track) ---- */
.home-testimonials__deck {
    position: relative;
    display: grid;
    width: min(100%, 620px);
    margin-inline: auto;
    overflow: hidden;
}

.home-testimonials__card {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    padding: 24px 32px;
    border: 1px solid rgba(71, 48, 42, .06);
    border-radius: 14px;
    background: linear-gradient(180deg, #fffdf9 0%, #f7f1e7 100%);
    box-shadow: 0 8px 20px rgba(55, 36, 30, .06);
    will-change: transform, opacity;
    transition: transform 280ms cubic-bezier(.4, 0, .2, 1), opacity 280ms ease;
}
.home-testimonials__card { opacity: 0; }
.home-testimonials__card:first-child { opacity: 1; }
.home-testimonials__card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 18%;
    right: 18%;
    height: 2px;
    border-radius: 0 0 999px 999px;
    background: linear-gradient(90deg, #87494a, #d8bd7d, #87494a);
    opacity: .7;
}

/* Rating */
.home-testimonials__stars {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    color: #d8bd7d;
    font-size: 12px;
    letter-spacing: 1px;
}

/* Quote */
.home-testimonials__quote {
    margin: 0;
    max-width: 24em;
    font-family: Georgia, 'Times New Roman', serif;
    font-style: italic;
    font-size: clamp(.95rem, 1.2vw, 1.05rem);
    line-height: 1.55;
    color: #3b3532;
}

/* Author */
.home-testimonials__author {
    gap: 10px;
    margin-top: 2px;
}
.home-testimonials__avatar {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-family: 'Ubuntu', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: #f5efe7;
    background: radial-gradient(120% 120% at 30% 20%, #a05a5b, #6f3839 70%);
    box-shadow: 0 4px 10px rgba(135, 73, 74, .25);
}
.home-testimonials__author-body {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
}
.home-testimonials__name {
    font-family: 'Ubuntu', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: #211c1b;
}
.home-testimonials__category {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #c1a974;
}

/* Autoplay progress — compact */
.home-testimonials__progress {
    margin-top: 10px;
    width: min(100%, 160px);
    height: 2px;
    border-radius: 999px;
    background: rgba(135, 73, 74, .12);
    overflow: hidden;
}
.home-testimonials__progress-bar {
    display: block;
    height: 100%;
    width: 0;
    border-radius: inherit;
    background: linear-gradient(90deg, #87494a, #c1a974);
}
.home-testimonials__card .home-testimonials__progress-bar {
    animation: none;
}
.home-testimonials__card.is-front .home-testimonials__progress-bar {
    animation: home-testimonials-progress 7s linear forwards;
}
.home-testimonials__stage.is-paused .home-testimonials__card.is-front .home-testimonials__progress-bar {
    animation-play-state: paused;
}
@keyframes home-testimonials-progress {
    from { width: 0; }
    to   { width: 100%; }
}

/* ---- Controls row: inline below deck ---- */
.home-testimonials__controls-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 16px;
}

/* ---- Indicators (compact dots) ---- */
.home-testimonials__indicators {
    display: flex;
    gap: 6px;
}
.home-testimonials__indicators button {
    width: 6px;
    height: 6px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #87494a;
    opacity: .2;
    transition: width .3s ease, opacity .3s ease, background-color .3s ease;
}
.home-testimonials__indicators .active {
    width: 20px;
    opacity: 1;
    background: #c1a974;
}

/* ---- Circular controls (compact) ---- */
.home-testimonials__controls {
    display: flex;
    gap: 8px;
}
.home-testimonials__control {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(135, 73, 74, .15);
    border-radius: 50%;
    color: #87494a;
    background: #fff;
    box-shadow: 0 2px 8px rgba(135, 73, 74, .08);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease, color .2s ease;
}
.home-testimonials__control i {
    font-size: 14px;
    line-height: 1;
}
.home-testimonials__control:hover,
.home-testimonials__control:focus-visible {
    color: #fff;
    background: #87494a;
    box-shadow: 0 4px 12px rgba(135, 73, 74, .25);
    transform: translateY(-1px);
}
.home-testimonials__control:active {
    transform: scale(.94);
}

/* ---- Entry reveal (JS adds .home-testimonials--anim then .is-in) ---- */
@media (prefers-reduced-motion: no-preference) {
    .home-testimonials--anim .home-testimonials__stage {
        opacity: 0;
        transform: translateY(26px) scale(.99);
        transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
    }
    .home-testimonials--anim .home-testimonials__controls,
    .home-testimonials--anim .home-testimonials__indicators {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
    }
    .home-testimonials--anim.is-in .home-testimonials__stage {
        opacity: 1;
        transform: none;
    }
    .home-testimonials--anim.is-in .home-testimonials__controls {
        opacity: 1;
        transition-delay: .2s;
    }
    .home-testimonials--anim.is-in .home-testimonials__indicators {
        opacity: 1;
        transition-delay: .3s;
    }
}

/* ---- Responsive ---- */
@media (min-width: 768px) and (max-width: 991.98px) {
    .home-testimonials__deck { width: min(100%, 540px); }
}
@media (max-width: 767.98px) {
    .home-testimonials__stage { padding: 20px 16px; border-radius: 14px; }
    .home-testimonials__card { padding: 18px 20px; border-radius: 12px; gap: 6px; }
    .home-testimonials__quote { font-size: .9rem; max-width: 100%; }
    .home-testimonials__mark { font-size: 60px; top: -10px; left: 8px; }
    .home-testimonials__glow--one { width: 100px; height: 100px; top: -40px; }
    .home-testimonials__glow--two { width: 90px; height: 90px; bottom: -40px; }
    .home-testimonials__control { width: 28px; height: 28px; }
    .home-testimonials__control i { font-size: 12px; }
    .home-testimonials__controls-row { gap: 12px; margin-top: 12px; }
}

/* ---- Dark theme (still scoped to the home-testimonials section) ---- */
:root[data-theme="dark"] body.index-page #testimonials.home-testimonials {
    background: #1a1814 !important;
}
:root[data-theme="dark"] .home-testimonials__stage {
    background:
        radial-gradient(ellipse 72% 58% at 88% -6%, rgba(135, 73, 74, .28), transparent 60%),
        radial-gradient(ellipse 62% 52% at -8% 114%, rgba(216, 189, 125, .10), transparent 62%),
        linear-gradient(158deg, #1e1c17 0%, #15130e 100%);
    border-color: rgba(255, 255, 255, .08);
    box-shadow: 0 34px 80px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] .home-testimonials__card {
    background: linear-gradient(180deg, #262119 0%, #1a1711 100%);
    border-color: rgba(255, 255, 255, .06);
    box-shadow: 0 8px 20px rgba(0, 0, 0, .30);
}
:root[data-theme="dark"] .home-testimonials__control {
    border-color: rgba(255, 255, 255, .1);
    color: #d8bd7d;
    background: #1e1c17;
}
:root[data-theme="dark"] .home-testimonials__control:hover {
    background: #87494a;
    color: #fff;
}
:root[data-theme="dark"] .home-testimonials__quote { color: #cfc8ba; }
:root[data-theme="dark"] .home-testimonials__name { color: #f0ece4; }
:root[data-theme="dark"] .home-testimonials__progress { background: rgba(255, 255, 255, .12); }
:root[data-theme="dark"] .home-testimonials__mark { color: rgba(200, 169, 116, .16); }

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    body.index-page .sk-practice-card,
    body.index-page .service-card,
    body.index-page .sk-practice-icon,
    body.index-page .sk-practice-link i,
    body.index-page .sk-service-link i {
        transition: none !important;
        transform: none !important;
    }
    .home-testimonials__card,
    .home-testimonials__control,
    .home-testimonials__indicators button {
        transition: none !important;
    }
    .home-testimonials__progress-bar {
        animation: none !important;
    }
}

/* =============================================================
   BOOTSTRAP 5 THEME WIRING
   Remap BS5 semantic CSS vars to the brand palette so native BS5
   components (cards, badges, borders, focus rings, emphasis text,
   alerts) inherit brand colours instead of Bootstrap defaults.
   Palette: burgundy #87494a / charcoal #211c1b / cream #f8f7f4.
   NOTE: --bs-secondary/-rgb is intentionally left default � the
   neutral gray powers .text-secondary / .bg-secondary site-wide
   (admin badges, "No Documents Found") and must stay readable.
   ============================================================= */
:root,
[data-bs-theme="light"] {
    --bs-primary:                #87494a;
    --bs-primary-rgb:            135, 73, 74;
    --bs-primary-bg-subtle:      #f3e7e4;
    --bs-primary-border-subtle:  #c9a6a7;
    --bs-primary-text-emphasis:  #6f3839;

    --bs-dark:                   #211c1b;
    --bs-dark-rgb:               33, 28, 27;

    --bs-body-color:             #3b3532;
    --bs-body-color-rgb:         59, 53, 50;
    --bs-emphasis-color:         #211c1b;
    --bs-emphasis-color-rgb:     33, 28, 27;
    --bs-secondary-color:        #7b726e;
    --bs-secondary-color-rgb:    123, 114, 110;
    --bs-tertiary-color:         #9a8f88;
    --bs-tertiary-color-rgb:     154, 143, 136;

    --bs-border-color:               rgba(71, 48, 42, .12);
    --bs-border-color-translucent:   rgba(71, 48, 42, .12);

    --bs-border-radius:           .75rem;
    --bs-border-radius-sm:        .5rem;
    --bs-border-radius-lg:        1rem;
    --bs-border-radius-xl:        1.25rem;
    --bs-border-radius-2xl:       1.5rem;

    --bs-focus-ring-color:        rgba(135, 73, 74, .25);
}

/* =============================================================
   HOME HERO � VIEWPORT-AWARE LEGAL COMPOSITION (2026-08-01)
   Scoped to body.index-page .home-hero only. One .container, one
   .row. Desktop (>=992px): fills roughly one usable browser window
   below the header via a min-height contract (the desktop header
   is a fixed left sidebar, so the vertical offset is 0). Tablet and
   mobile: natural height, text stacked above the image card, free
   scrolling. Carousel is an absolute background layer so it never
   adds height. Appended last so every rule here supersedes older
   scattered .sk-home-hero / .hero overrides. Copy, links and AOS
   hooks are untouched.
   ============================================================= */

/* ---- Shell: viewport-aware backdrop, one hero parent scope ---- */
body.index-page .home-hero {
    --home-hero-header-h: 0px; /* desktop header is a fixed left sidebar -> no top offset */
    display: flex;
    align-items: center;
    position: relative;
    isolation: isolate;
    margin: 0;
    padding: 0 !important;
    overflow: hidden;
    background: #211c1b;
}
@media (min-width: 992px) {
    body.index-page .home-hero {
        /* one usable browser window below the header. min-height only, so
           content can still grow naturally on short laptop screens. */
        min-height: max(620px, calc(100svh - var(--home-hero-header-h))) !important;
    }
}
@media (max-width: 991.98px) {
    body.index-page .home-hero { min-height: 0 !important; }
}

/* ---- Background carousel + scrim layers (absolute, out of flow) ---- */
.home-hero .sk-hero-carousel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
}
.home-hero .sk-hero-carousel .carousel-inner,
.home-hero .sk-hero-carousel .carousel-item {
    height: 100%;
}
.home-hero .sk-hero-slide {
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.home-hero::before,
.home-hero::after { z-index: 1; }

/* ---- Single container (above carousel + scrim) ---- */
body.index-page main.main .home-hero > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1440px;
    margin-inline: auto;
    padding-inline: clamp(24px, 4vw, 64px) !important;
    padding-block: 0 !important;
}
body.index-page main.main .home-hero > .container > .row {
    align-items: center !important;
}

/* ---- Text card: readable width, calm internal rhythm ---- */
body.index-page .home-hero .hero-text {
    width: 100%;
    max-width: 680px !important;
    margin: 0 !important;
    padding: clamp(26px, 2.8vw, 40px) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    border-radius: 24px !important;
    background: linear-gradient(145deg, rgba(19,17,16,.84), rgba(19,17,16,.58)) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.28) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    text-align: left !important;
}
body.index-page .home-hero .sk-hero-availability {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px !important;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    color: rgba(255,255,255,.8);
    background: rgba(255,255,255,.06);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .2px;
}
body.index-page .home-hero .sk-hero-availability span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #79bb85;
    box-shadow: 0 0 0 5px rgba(121,187,133,.12);
}
body.index-page .home-hero .sk-hero-eyebrow {
    display: block;
    margin: 0 0 12px !important;
    color: #d0b77e;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.5;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
body.index-page .home-hero .hero-text h1 {
    max-width: 660px;
    margin: 0 0 16px !important;
    color: #fff !important;
    font-size: clamp(36px, 3.4vw, 48px) !important;
    font-weight: 800;
    line-height: 1.06 !important;
    letter-spacing: -1.2px !important;
    text-shadow: 0 18px 42px rgba(0,0,0,.30);
}
body.index-page .home-hero .hero-text h1 .accent-text {
    display: block;
    color: #d3b979 !important;
}
body.index-page .home-hero .hero-text h1 .accent-text::after { display: none !important; }
body.index-page .home-hero .hero-text h2 {
    margin: 0 0 18px !important;
    color: rgba(255,255,255,.88) !important;
    font-size: clamp(17px, 1.4vw, 22px) !important;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -.2px;
}
body.index-page .home-hero .hero-text h2 span { color: rgba(255,255,255,.55); font-weight: 500; }
body.index-page .home-hero .hero-text .lead {
    display: block;
    max-width: 640px;
    margin: 0 0 14px !important;
    color: rgba(255,255,255,.9);
    font-size: clamp(15px, 1.2vw, 17px) !important;
    font-weight: 600;
    line-height: 1.55;
}
body.index-page .home-hero .hero-text .lead span,
body.index-page .home-hero .hero-text .typed,
body.index-page .home-hero .hero-text .typed-cursor {
    color: #c1a974;
    border-bottom: none;
    padding-bottom: 0;
}
body.index-page .home-hero .hero-text .description {
    max-width: 620px;
    margin: 0 !important;
    color: rgba(255,255,255,.72);
    font-size: 14px !important;
    line-height: 1.7;
}
body.index-page .home-hero .hero-actions {
    display: flex;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 26px 0 0 !important;
}
body.index-page .home-hero .hero-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: auto !important;
    min-height: 52px !important;
    padding: 0 24px !important;
    border-radius: 12px;
    font-size: 14px !important;
    font-weight: 800;
    white-space: nowrap;
}
body.index-page .home-hero .hero-actions .btn-primary {
    background: linear-gradient(135deg, #a45a5b, #7e4041) !important;
    border-color: transparent !important;
    color: #fff !important;
    box-shadow: 0 12px 30px rgba(135,73,74,.36) !important;
}
body.index-page .home-hero .hero-actions .btn-outline {
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.46) !important;
    color: #fff !important;
}
body.index-page .home-hero .hero-actions .btn-outline:hover {
    background: #fff !important;
    color: #211c1b !important;
}

/* ---- Proof strip ---- */
body.index-page .home-hero .sk-hero-proof {
    display: flex;
    flex-wrap: wrap;
    gap: 0 !important;
    margin: 20px 0 0 !important;
    padding-top: 16px !important;
    border-top: 1px solid rgba(255,255,255,.10);
}
body.index-page .home-hero .sk-hero-proof span {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: none !important;
    min-width: 120px !important;
    padding-right: 20px;
    margin-right: 20px;
    border-right: 1px solid rgba(255,255,255,.10);
}
body.index-page .home-hero .sk-hero-proof span:last-child {
    border-right: 0;
    margin-right: 0;
    padding-right: 0;
}
body.index-page .home-hero .sk-hero-proof strong { color: #fff; font-size: 15px; line-height: 1.1; }
body.index-page .home-hero .sk-hero-proof small {
    color: rgba(255,255,255,.5);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .8px;
}

/* ---- Visual column: natural, centred image card ---- */
body.index-page .home-hero .hero-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
}
body.index-page .home-hero .profile-container.sk-official-hero-card {
    position: relative;
    width: min(460px, 100%);
    margin-inline: auto;
    border: 1px solid rgba(255,255,255,.14) !important;
    border-radius: 26px !important;
    background: #26211f;
    box-shadow: 0 34px 80px rgba(0,0,0,.40) !important;
    transform: none !important;
    overflow: visible !important;
}
body.index-page .home-hero .profile-container.sk-official-hero-card .profile-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 11;
    object-fit: cover;
    object-position: center 30%;
    border-radius: 26px 26px 0 0;
    box-shadow: none;
    background: #26211f;
}
body.index-page .home-hero .sk-official-card-caption {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 24px 22px !important;
    background: linear-gradient(135deg, #26211f, #342c28) !important;
    border-top: 3px solid #87494a !important;
    border-radius: 0 0 26px 26px !important;
}
body.index-page .home-hero .sk-official-card-caption .sk-card-kicker {
    display: block;
    color: #c8ae74;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
body.index-page .home-hero .sk-official-card-caption h3 {
    margin: 5px 0 4px !important;
    color: #fff !important;
    font-size: 20px;
    letter-spacing: .2px;
}
body.index-page .home-hero .sk-official-card-caption p { margin: 0 !important; color: rgba(255,255,255,.64); font-size: 11px; }
body.index-page .home-hero .sk-official-card-caption > a {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: #87494a;
    text-decoration: none;
}
body.index-page .home-hero .sk-portrait-seal { right: -14px; top: 26px; }

/* ---- Responsive: tablet/mobile stack text first, image below, natural scroll ---- */
@media (max-width: 991.98px) {
    body.index-page main.main .home-hero > .container {
        padding-top: clamp(60px, 8vh, 84px) !important;
        padding-bottom: clamp(56px, 7vh, 80px) !important;
    }
    body.index-page .home-hero .hero-actions .btn { width: 100% !important; }
    body.index-page .home-hero .sk-hero-proof span { min-width: 44% !important; margin-right: 12px; padding-right: 12px; }
    body.index-page .home-hero .hero-visual { margin-top: 30px !important; }
    body.index-page .home-hero .sk-portrait-seal { right: -8px; top: 20px; }
}
@media (max-width: 767.98px) {
    body.index-page .home-hero .hero-text { padding: 28px 22px !important; border-radius: 22px !important; }
    body.index-page .home-hero .hero-text h1 { font-size: clamp(29px, 7.8vw, 40px) !important; }
    body.index-page .home-hero .sk-hero-proof { row-gap: 14px; }
}
@media (max-width: 575.98px) {
    body.index-page main.main .home-hero > .container { padding-inline: 18px !important; }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    body.index-page .home-hero .sk-official-hero-card,
    body.index-page .home-hero .hero-actions .btn {
        transition: none !important;
        transform: none !important;
    }
}

/* =============================================================
   HOME PAGE ABOUT v2 � editorial two-column narrative
   Scoped to body.index-page #about (Index.cshtml). Loaded last
   so it wins over main.css .about and earlier custom.css rules.
   Palette preserved: burgundy #87494a / gold #d8bd7d /
   charcoal #211c1b / cream #f4f0eb
   ============================================================= */

/* ---- Column alignment: tight gutters, vertical centring ---- */
body.index-page #about .about-content { padding-left: 0; }

/* ---- Profile (left): flat panel, no gradient ---- */
body.index-page #about .profile-card {
    background: #fbf9f6;
    border: 1px solid rgba(71, 48, 42, .08);
    border-radius: 24px;
    padding: 2rem;
    text-align: center;
    box-shadow: none;
}
body.index-page #about .profile-card::before { display: none; }
body.index-page #about .profile-header { margin-bottom: 1.25rem; }
body.index-page #about .profile-header .profile-image {
    width: 148px;
    height: 148px;
    margin: 0 auto 1.25rem;
    border: 3px solid #fff;
    box-shadow: 0 14px 34px rgba(52, 34, 29, .14);
}
body.index-page #about .profile-content h3 {
    margin-bottom: .35rem;
    font-size: 1.3rem;
    letter-spacing: -.3px;
}
body.index-page #about .profile-content .profession {
    margin-bottom: 0;
    font-size: 13px;
}

/* ---- Credentials: clean hairline list (no boxes) ---- */
body.index-page #about .sk-spec-list {
    gap: 2px;
    margin-top: 1.25rem !important;
}
body.index-page #about .sk-spec-item {
    gap: 12px;
    padding: 9px 4px;
    border: 0;
    border-bottom: 1px solid rgba(71, 48, 42, .07);
    border-radius: 0;
    background: transparent;
}
body.index-page #about .sk-spec-item + .sk-spec-item { margin-top: 0; }
body.index-page #about .sk-spec-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    font-size: 15px;
}

/* ---- Content (right): stronger hierarchy ---- */
body.index-page #about .about-content .section-header { margin-bottom: 1.25rem; }
body.index-page #about .about-content .section-header h2 {
    margin: 0;
    color: #211c1b;
    font-size: clamp(30px, 3.1vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}
body.index-page #about .about-content .description { margin-bottom: 1.5rem; }
body.index-page #about .about-content .description p {
    max-width: 65ch;
    margin-bottom: 1.1rem;
    color: #5c534f;
    font-size: 15px;
    line-height: 1.85;
}
body.index-page #about .about-content .description p:first-child {
    color: #211c1b;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.75;
}
body.index-page #about .about-content .description p:last-child { margin-bottom: 0; }

/* ---- CTA + stats rhythm ---- */
body.index-page #about .cta-section { margin: 1.5rem 0 0 !important; }
body.index-page #about .sk-stats-band {
    margin-top: 1.5rem !important;
    padding: 24px 14px;
    background: #211c1b;
    box-shadow: none;
}
body.index-page #about .sk-stats-band::before { display: none; }

/* ---- Mobile: content first, portrait after, no dead space ---- */
@media (max-width: 991.98px) {
    body.index-page #about .profile-card { margin-bottom: 1.5rem; }
    body.index-page #about .about-content .section-header { margin-top: 0; }
}

/* =============================================================
   VIEWPORT-FIRST SECTION RHYTHM v2 � homepage (2026-08-01)
   Homepage-only. Removes redundant vertical whitespace at the
   source: section padding and title gaps now scale with viewport
   height (clamp) instead of fixed 84px/46px offsets, so each
   major section fits one viewport on 1920�1080, 1536�864,
   1440�900 and 1366�768. Does NOT touch the Hero (Result 1) or
   the About content (Result 2) � only the gaps around sections.
   ============================================================= */
body.index-page {
    --sk-section-pad: clamp(44px, 6.5vh, 72px);
    --sk-title-gap: clamp(28px, 3.5vh, 40px);
}
body.index-page .section:not(.sk-home-hero) { padding: var(--sk-section-pad) 0; }
body.index-page .sk-insights-section { padding: var(--sk-section-pad) 0; }
body.index-page .section-title { margin: 0 auto var(--sk-title-gap); }
body.index-page .sk-pathways { padding: clamp(26px, 3.5vh, 40px) 0 clamp(30px, 4vh, 46px); }

/* =============================================================
    HOME TOPIC SELECTOR v4 � simple premium four-panel grid
    Scoped to .home-situation (Index.cshtml, Section 2).
    Replaces the asymmetric layout with a clean four-item
    responsive grid with equal visual weight, premium styling
    using warm ivory-to-warm-beige gradients, subtle radial
    burgundy highlights and restrained border gradients.
    ============================================================= */

/* ---- Section wrapper ---- */
body.index-page .home-situation {
    position: relative;
    padding: var(--sk-section-pad) 0;
    background: linear-gradient(135deg, #fbf9f6 0%, #f7f3ed 100%);
    overflow: hidden;
}

.home-situation::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    background: radial-gradient(ellipse at 80% 20%, rgba(135, 73, 74, .06) 0%, transparent 70%);
    pointer-events: none;
}

/* ---- Head: integrated header, tighter rhythm ---- */
.home-situation__head {
    position: relative;
    z-index: 1;
    max-width: 720px;
    margin: 0 auto clamp(28px, 3vh, 40px);
    text-align: left;
}
.home-situation__head .sk-section-kicker {
    display: inline-block;
    color: #87494a;
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 2.4px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.home-situation__head h2 {
    margin: 6px 0 10px;
    color: #211c1b;
    font-size: clamp(26px, 3vw, 38px);
    font-weight: 800;
    letter-spacing: -1.2px;
    line-height: 1.15;
}
.home-situation__head > p {
    max-width: 480px;
    margin: 0;
    color: #736b67;
    font-size: 13px;
    line-height: 1.6;
}

/* ---- Individual item panel ---- */
.home-situation__item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 24px;
    border: 1px solid rgba(135, 73, 74, .12);
    border-radius: 20px;
    background: linear-gradient(145deg, #ffffff 0%, #fbf7f0 100%);
    color: #211c1b;
    text-decoration: none;
    transition: all .3s cubic-bezier(.23, 1, .32, 1);
    overflow: hidden;
    min-height: 220px;
    box-shadow: 0 4px 20px rgba(33, 28, 27, .04);
}

.home-situation__item::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background: linear-gradient(90deg, #87494a 0%, #d8bd7d 100%);
    opacity: 0;
    transition: opacity .3s ease;
}

.home-situation__item:hover {
    transform: translateY(-6px);
    border-color: rgba(135, 73, 74, .25);
    box-shadow: 0 12px 36px rgba(33, 28, 27, .12);
    background: linear-gradient(145deg, #fdfbf9 0%, #fbf2e8 100%);
}

.home-situation__item:hover::before {
    opacity: 1;
}

.home-situation__item:focus-visible {
    outline: 3px solid rgba(216, 189, 125, .55);
    outline-offset: 3px;
}

/* ---- Item: number ---- */
.home-situation__item-num {
    color: #c3a468;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    text-transform: uppercase;
    display: block;
}

/* ---- Item: icon ---- */
.home-situation__item-icon {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(135, 73, 74, .14);
    border-radius: 12px;
    color: #87494a;
    background: rgba(135, 73, 74, .06);
    font-size: 18px;
    margin-bottom: 16px;
    transition: all .3s cubic-bezier(.23, 1, .32, 1);
    transform-origin: center;
}

.home-situation__item:hover .home-situation__item-icon {
    transform: translateY(-3px) scale(1.05);
    background: rgba(135, 73, 74, .12);
    box-shadow: 0 6px 16px rgba(135, 73, 74, .15);
}

/* ---- Item: title + desc ---- */
.home-situation__item-title {
    margin: 0 0 6px;
    color: #211c1b;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.2px;
    line-height: 1.3;
}

.home-situation__item-desc {
    margin: 0;
    color: #6b615b;
    font-size: 12px;
    line-height: 1.5;
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .home-situation__item,
    .home-situation__item-icon {
        transition: none !important;
        transform: none !important;
    }
}

/* ---- Responsive adjustments ---- */
@media (max-width: 767.98px) {
    .home-situation__item {
        min-height: auto;
        padding: 20px;
    }
}
    Scoped to #about.home-about (Index.cshtml, Section 3).
    Replaces the oversized profile card + plain text-column
    layout with a layered visual panel (gradient, radial
    highlight, decorative linework) beside a content panel
    with gradient text accent, animated highlight line,
    custom scoped buttons and a premium metrics panel with
    staggered dividers and count-up animation.
    Palette: warm ivory #fbf9f6 / muted burgundy #87494a /
    charcoal #211c1b / soft gold #d8bd7d.
    ============================================================= */

/* ---- Grid: asymmetric visual (left) + content (right) ---- */
body.index-page #about.home-about .row { align-items: stretch; }

/* ---- Visual panel: layered gradient + radial highlight ---- */
body.index-page #about.home-about .home-about__visual {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    height: 100%;
    padding: clamp(30px, 3vw, 48px) clamp(20px, 2.4vw, 36px);
    border-radius: 28px;
    background: linear-gradient(160deg, #2a1f1e 0%, #3d2a25 40%, #211c1b 100%);
    color: #f4f0eb;
    overflow: hidden;
}
body.index-page #about.home-about .home-about__visual::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 35% 30%, rgba(216, 189, 125, .18) 0%, transparent 55%);
    pointer-events: none;
}
body.index-page #about.home-about .home-about__visual::after {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    border: 1px solid rgba(216, 189, 125, .12);
    pointer-events: none;
}

/* ---- Decorative linework ---- */
body.index-page #about.home-about .home-about__decor {
    position: absolute;
    top: 20px;
    left: 20px;
    width: 36px;
    height: 36px;
    border-top: 2px solid rgba(216, 189, 125, .35);
    border-left: 2px solid rgba(216, 189, 125, .35);
    pointer-events: none;
}
body.index-page #about.home-about .home-about__decor-br {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-bottom: 2px solid rgba(216, 189, 125, .35);
    border-right: 2px solid rgba(216, 189, 125, .35);
    pointer-events: none;
}

/* ---- Image wrap: circular, gold ring, reveal animation ---- */
body.index-page #about.home-about .home-about__image-wrap {
    position: relative;
    width: clamp(180px, 22vw, 240px);
    height: clamp(180px, 22vw, 240px);
    margin: 0 auto 20px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(216, 189, 125, .35);
    box-shadow: 0 20px 50px rgba(33, 28, 27, .35);
    opacity: 0;
    transform: scale(.92);
    animation: home-about-image-reveal .7s cubic-bezier(.23, 1, .32, 1) .15s forwards;
}
@keyframes home-about-image-reveal {
    to { opacity: 1; transform: scale(1); }
}
body.index-page #about.home-about .home-about__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Identity: name + role integrated into panel ---- */
body.index-page #about.home-about .home-about__identity {
    text-align: center;
    margin-bottom: 22px;
    opacity: 0;
    transform: translateY(16px);
    animation: home-about-fade-up .65s cubic-bezier(.23, 1, .32, 1) .45s forwards;
}
@keyframes home-about-fade-up {
    to { opacity: 1; transform: translateY(0); }
}
body.index-page #about.home-about .home-about__name {
    margin: 0 0 4px;
    color: #fbf7f0;
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.15;
}
body.index-page #about.home-about .home-about__role {
    margin: 0;
    color: #d8bd7d;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* ---- Attributes: 2x2 grid, staggered reveal ---- */
body.index-page #about.home-about .home-about__attributes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: auto;
}
body.index-page #about.home-about .home-about__attr {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 8px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(216, 189, 125, .06);
    border: 1px solid rgba(216, 189, 125, .12);
    opacity: 0;
    transform: translateY(12px);
}
body.index-page #about.home-about .home-about__attr:nth-child(1) { animation: home-about-fade-up .55s cubic-bezier(.23, 1, .32, 1) .65s forwards; }
body.index-page #about.home-about .home-about__attr:nth-child(2) { animation: home-about-fade-up .55s cubic-bezier(.23, 1, .32, 1) .75s forwards; }
body.index-page #about.home-about .home-about__attr:nth-child(3) { animation: home-about-fade-up .55s cubic-bezier(.23, 1, .32, 1) .85s forwards; }
body.index-page #about.home-about .home-about__attr:nth-child(4) { animation: home-about-fade-up .55s cubic-bezier(.23, 1, .32, 1) .95s forwards; }
body.index-page #about.home-about .home-about__attr-icon {
    color: #d8bd7d;
    font-size: 14px;
    flex-shrink: 0;
}
body.index-page #about.home-about .home-about__attr small {
    color: rgba(244, 240, 235, .55);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    flex-shrink: 0;
}
body.index-page #about.home-about .home-about__attr p {
    flex-basis: 100%;
    margin: 2px 0 0;
    color: rgba(244, 240, 235, .85);
    font-size: 12px;
    line-height: 1.4;
}

/* ---- Content panel ---- */
body.index-page #about.home-about .home-about__content {
    min-width: 0;
}

/* ---- Header: kicker + h2 + animated line ---- */
body.index-page #about.home-about .home-about__header {
    margin-bottom: clamp(18px, 2.5vh, 28px);
}
body.index-page #about.home-about .home-about__header h2 {
    margin: 0 0 14px;
    color: #211c1b;
    font-size: clamp(28px, 3vw, 42px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.12;
}
body.index-page #about.home-about .home-about__highlight {
    background: linear-gradient(120deg, #87494a 0%, #d8bd7d 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
body.index-page #about.home-about .home-about__line {
    width: 60px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, #87494a, #d8bd7d);
    margin-bottom: 0;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left center;
    animation: home-about-line-reveal .6s cubic-bezier(.23, 1, .32, 1) 1.1s forwards;
}
@keyframes home-about-line-reveal {
    to { opacity: 1; transform: scaleX(1); }
}

/* ---- Description ---- */
body.index-page #about.home-about .home-about__description {
    margin-bottom: 1.75rem;
}
body.index-page #about.home-about .home-about__description p {
    max-width: 54ch;
    margin-bottom: 1.1rem;
    color: #5c534f;
    font-size: 15px;
    line-height: 1.85;
}
body.index-page #about.home-about .home-about__description p:first-child {
    color: #211c1b;
    font-size: 16.5px;
    font-weight: 600;
    line-height: 1.75;
}
body.index-page #about.home-about .home-about__description p:last-child {
    margin-bottom: 0;
}

/* ---- Actions: custom scoped buttons ---- */
body.index-page #about.home-about .home-about__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 2rem;
}
body.index-page #about.home-about .home-about__btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 24px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .2px;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, color .25s ease;
}
body.index-page #about.home-about .home-about__btn:focus-visible {
    outline: 3px solid rgba(216, 189, 125, .55);
    outline-offset: 3px;
}
body.index-page #about.home-about .home-about__btn--primary {
    background: #87494a;
    color: #ffffff;
    border: 1px solid #87494a;
}
body.index-page #about.home-about .home-about__btn--primary:hover {
    background: #6f3839;
    border-color: #6f3839;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(135, 73, 74, .22);
}
body.index-page #about.home-about .home-about__btn--primary i {
    transition: transform .25s ease;
}
body.index-page #about.home-about .home-about__btn--primary:hover i {
    transform: translateX(3px);
}
body.index-page #about.home-about .home-about__btn--outline {
    background: transparent;
    color: #211c1b;
    border: 1.5px solid rgba(71, 48, 42, .22);
}
body.index-page #about.home-about .home-about__btn--outline:hover {
    border-color: #87494a;
    color: #87494a;
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(71, 48, 42, .08);
}
body.index-page #about.home-about .home-about__btn--outline i {
    transition: transform .25s ease;
}
body.index-page #about.home-about .home-about__btn--outline:hover i {
    transform: translateX(3px);
}

/* ---- Metrics panel: premium integrated ---- */
body.index-page #about.home-about .home-about__metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    padding: 28px 18px;
    border-radius: 18px;
    background: linear-gradient(135deg, #211c1b 0%, #2a1f1e 100%);
    box-shadow: 0 12px 36px rgba(33, 28, 27, .12);
}
body.index-page #about.home-about .home-about__metric {
    padding: 18px 14px;
    text-align: center;
    border-right: 1px solid rgba(216, 189, 125, .14);
    opacity: 0;
    transform: translateY(10px);
}
body.index-page #about.home-about .home-about__metric:nth-child(1) { animation: home-about-fade-up .5s cubic-bezier(.23, 1, .32, 1) 1.2s forwards; }
body.index-page #about.home-about .home-about__metric:nth-child(2) { animation: home-about-fade-up .5s cubic-bezier(.23, 1, .32, 1) 1.35s forwards; }
body.index-page #about.home-about .home-about__metric:nth-child(3) { animation: home-about-fade-up .5s cubic-bezier(.23, 1, .32, 1) 1.5s forwards; }
body.index-page #about.home-about .home-about__metric:nth-child(4) { animation: home-about-fade-up .5s cubic-bezier(.23, 1, .32, 1) 1.65s forwards; }
body.index-page #about.home-about .home-about__metric:last-child {
    border-right: 0;
}
body.index-page #about.home-about .home-about__metric small {
    display: block;
    margin-bottom: 6px;
    color: rgba(216, 189, 125, .7);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
body.index-page #about.home-about .home-about__metric strong {
    display: block;
    color: #d8bd7d;
    font-size: clamp(22px, 2.2vw, 30px);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.1;
}

/* ---- Tablet: retain visual hierarchy ---- */
@media (max-width: 991.98px) {
    body.index-page #about.home-about .home-about__visual {
        margin-bottom: 2rem;
    }
    body.index-page #about.home-about .home-about__attributes {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Mobile: stack visual above content, 2-col metrics ---- */
@media (max-width: 767.98px) {
    body.index-page #about.home-about .home-about__metrics {
        grid-template-columns: repeat(2, 1fr);
    }
    body.index-page #about.home-about .home-about__metric {
        border-right: 0;
        border-bottom: 1px solid rgba(216, 189, 125, .14);
    }
    body.index-page #about.home-about .home-about__metric:nth-child(2) {
        border-right: 0;
    }
    body.index-page #about.home-about .home-about__metric:nth-child(n+3) {
        border-bottom: 0;
    }
}

/* ---- Reduced motion: disable all animations ---- */
@media (prefers-reduced-motion: reduce) {
    body.index-page #about.home-about .home-about__image-wrap,
    body.index-page #about.home-about .home-about__identity,
    body.index-page #about.home-about .home-about__attr,
    body.index-page #about.home-about .home-about__line,
    body.index-page #about.home-about .home-about__metric {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* =============================================================
   HOME CONSULTATION � editorial legal-consultation section
   (Result 5). Scoped entirely beneath .home-consultation
   (Views/Home/Contact.cshtml). Replaces the generic Bootstrap
   card + two equal columns with an asymmetric composition: a
   deep charcoal editorial panel (consultation message, trust
   points, confidentiality note, direct contact, expected
   response) beside a warm neutral enquiry form. No global
   .form-control / .btn / .container / .row / heading overrides.
   Palette preserved: burgundy #87494a / gold #d8bd7d /
   charcoal #211c1b / cream #fbf9f6.
   ============================================================= */

/* ---- Section rhythm: keep the shared pad, deepen the close ---- */
body.index-page .section.home-consultation {
    padding: var(--sk-section-pad) 0 clamp(56px, 7vh, 84px);
}

/* ---- Head: kicker / title / lede, left-aligned ---- */
body.index-page .home-consultation__head {
    max-width: 720px;
    margin-bottom: clamp(26px, 3.5vh, 38px);
}
body.index-page .home-consultation__head h2 {
    margin: 0 0 10px;
    color: #211c1b;
    font-size: clamp(28px, 3vw, 40px);
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.12;
}
body.index-page .home-consultation__head > p {
    max-width: 56ch;
    margin: 0;
    color: #6b615b;
    font-size: 14.5px;
    line-height: 1.75;
}

/* ---- Grid: asymmetric desktop (7/18 aside, 11/18 form) ---- */
body.index-page .home-consultation__grid {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 11fr);
    gap: clamp(24px, 2.4vw, 40px);
    align-items: stretch;
}

/* ---- Editorial panel: deep charcoal ---- */
body.index-page .home-consultation__aside {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: clamp(26px, 2.6vw, 38px);
    border: 1px solid rgba(216, 189, 125, .22);
    border-radius: 24px;
    background: #211c1b;
    color: #f4f0eb;
}
body.index-page .home-consultation__eyebrow {
    margin: 0 0 14px;
    color: #d8bd7d;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 2.2px;
    text-transform: uppercase;
}
body.index-page .home-consultation__aside-title {
    margin: 0 0 12px;
    color: #fbf7f0;
    font-size: clamp(21px, 1.8vw, 26px);
    font-weight: 800;
    letter-spacing: -.5px;
    line-height: 1.25;
}
body.index-page .home-consultation__lede {
    margin: 0 0 22px;
    color: rgba(244, 240, 235, .75);
    font-size: 14px;
    line-height: 1.75;
}

/* ---- Trust points: thin editorial list ---- */
body.index-page .home-consultation__points {
    margin: 0 0 22px;
    padding: 0;
    list-style: none;
    border-top: 1px solid rgba(216, 189, 125, .18);
}
body.index-page .home-consultation__points li {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 15px 0;
    border-bottom: 1px solid rgba(216, 189, 125, .14);
}
body.index-page .home-consultation__point-title {
    color: #fbf7f0;
    font-size: 13.5px;
    font-weight: 800;
    letter-spacing: .2px;
}
body.index-page .home-consultation__point-text {
    color: rgba(244, 240, 235, .68);
    font-size: 12.5px;
    line-height: 1.55;
}

/* ---- Confidentiality note: restrained gold-framed callout ---- */
body.index-page .home-consultation__confidential {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    margin: 0 0 20px;
    padding: 13px 14px;
    border: 1px solid rgba(216, 189, 125, .25);
    border-radius: 12px;
    background: rgba(216, 189, 125, .07);
    color: rgba(244, 240, 235, .85);
    font-size: 12.5px;
    line-height: 1.6;
}
body.index-page .home-consultation__confidential i {
    margin-top: 1px;
    color: #d8bd7d;
    font-size: 15px;
}

/* ---- Direct contact: compact hairline definition list ---- */
body.index-page .home-consultation__contact {
    margin: 0 0 20px;
    padding: 0;
    border-top: 1px solid rgba(216, 189, 125, .18);
}
body.index-page .home-consultation__contact > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 11px 0;
    border-bottom: 1px solid rgba(216, 189, 125, .14);
}
body.index-page .home-consultation__contact dt {
    color: #d8bd7d;
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
body.index-page .home-consultation__contact dd {
    margin: 0;
    color: rgba(244, 240, 235, .8);
    font-size: 13px;
    line-height: 1.55;
}

/* ---- Expected response: pinned to the panel bottom ---- */
body.index-page .home-consultation__response {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: auto 0 0;
    padding-top: 4px;
    color: #d8bd7d;
    font-size: 12.5px;
    font-weight: 700;
}
body.index-page .home-consultation__response-dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #d8bd7d;
}

/* ---- Form panel: warm neutral surface ---- */
body.index-page .home-consultation__panel {
    min-width: 0;
    padding: clamp(26px, 2.6vw, 40px);
    border: 1px solid rgba(71, 48, 42, .1);
    border-radius: 24px;
    background: #fbf9f6;
    box-shadow: 0 1px 3px rgba(57, 38, 31, .05);
}
body.index-page .home-consultation__panel-title {
    margin: 0 0 8px;
    color: #211c1b;
    font-size: clamp(20px, 1.7vw, 24px);
    font-weight: 800;
    letter-spacing: -.4px;
}
body.index-page .home-consultation__panel-intro {
    max-width: 56ch;
    margin: 0 0 24px;
    color: #6b615b;
    font-size: 13.5px;
    line-height: 1.7;
}
body.index-page .home-consultation__req-symbol {
    color: #87494a;
    font-weight: 800;
}

/* ---- Form grid: two-column rows, full-width long fields ---- */
body.index-page .home-consultation__form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 18px;
}
body.index-page .home-consultation__field {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
body.index-page .home-consultation__field--wide {
    grid-column: 1 / -1;
}

/* ---- Labels + required indicators ---- */
body.index-page .home-consultation__label {
    display: block;
    margin-bottom: 7px;
    color: #211c1b;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .1px;
}
body.index-page .home-consultation__req {
    color: #87494a;
    font-weight: 800;
}

/* ---- Controls: standardised height, restrained borders ---- */
body.index-page .home-consultation__input,
body.index-page .home-consultation__select,
body.index-page .home-consultation__textarea {
    width: 100%;
    min-height: 48px;
    padding: 12px 14px;
    border: 1px solid rgba(71, 48, 42, .18);
    border-radius: 10px;
    background: #ffffff;
    color: #211c1b;
    font-size: 14.5px;
    line-height: 1.5;
}
body.index-page .home-consultation__input::placeholder,
body.index-page .home-consultation__textarea::placeholder {
    color: #a79a91;
}
body.index-page .home-consultation__textarea {
    min-height: 150px;
    resize: vertical;
}

/* ---- Focus: visible ring for mouse, gold outline for keyboard ---- */
body.index-page .home-consultation__input:focus,
body.index-page .home-consultation__select:focus,
body.index-page .home-consultation__textarea:focus {
    border-color: #87494a;
    box-shadow: 0 0 0 3px rgba(135, 73, 74, .14);
    background: #ffffff;
    color: #211c1b;
}
body.index-page .home-consultation__input:focus-visible,
body.index-page .home-consultation__select:focus-visible,
body.index-page .home-consultation__textarea:focus-visible {
    outline: 3px solid rgba(216, 189, 125, .6);
    outline-offset: 2px;
}

/* ---- Error states: red border + visible feedback ---- */
body.index-page .home-consultation__input[aria-invalid="true"],
body.index-page .home-consultation__textarea[aria-invalid="true"],
body.index-page .home-consultation__select[aria-invalid="true"] {
    border-color: #b3503f;
}
body.index-page .home-consultation__input[aria-invalid="true"]:focus,
body.index-page .home-consultation__textarea[aria-invalid="true"]:focus {
    border-color: #b3503f;
    box-shadow: 0 0 0 3px rgba(179, 80, 63, .15);
}
body.index-page .home-consultation__error {
    display: none;
    margin: 6px 2px 0;
    color: #b3503f;
    font-size: 12.5px;
    line-height: 1.55;
}
body.index-page .home-consultation__input[aria-invalid="true"] + .home-consultation__error,
body.index-page .home-consultation__textarea[aria-invalid="true"] + .home-consultation__error {
    display: block;
}
body.index-page .home-consultation__consent:has(input[aria-invalid="true"]) + .home-consultation__error {
    display: block;
}

/* ---- Helper text ---- */
body.index-page .home-consultation__hint {
    margin: 6px 2px 0;
    color: #9a8a7f;
    font-size: 12px;
    line-height: 1.55;
}

/* ---- Consent checkbox: real input, custom render, accessible ---- */
body.index-page .home-consultation__consent {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    cursor: pointer;
    color: #5c534f;
    font-size: 13px;
    line-height: 1.55;
}
body.index-page .home-consultation__checkbox {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-top: 1px;
    -webkit-appearance: none;
    appearance: none;
    display: grid;
    place-content: center;
    border: 1.5px solid rgba(71, 48, 42, .3);
    border-radius: 5px;
    background: #ffffff;
    cursor: pointer;
}
body.index-page .home-consultation__checkbox:checked {
    border-color: #87494a;
    background: #87494a;
}
body.index-page .home-consultation__checkbox:checked::after {
    content: "\2713";
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
}
body.index-page .home-consultation__checkbox:focus-visible {
    outline: 3px solid rgba(216, 189, 125, .6);
    outline-offset: 2px;
}

/* ---- Actions: dominant submit, secondary WhatsApp ---- */
body.index-page .home-consultation__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 6px;
    padding-top: 22px;
    border-top: 1px solid rgba(71, 48, 42, .1);
}
body.index-page .home-consultation__whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 0;
    color: #1f7a4d;
    font-size: 13.5px;
    font-weight: 700;
    text-decoration: none;
}
body.index-page .home-consultation__whatsapp:hover {
    color: #155e3c;
}
body.index-page .home-consultation__submit {
    min-width: 190px;
    min-height: 48px;
    padding: 13px 26px;
    border: 1px solid #87494a;
    border-radius: 10px;
    background: #87494a;
    color: #ffffff;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
}
body.index-page .home-consultation__submit:hover {
    border-color: #6f3839;
    background: #6f3839;
    color: #ffffff;
}
body.index-page .home-consultation__submit:focus-visible,
body.index-page .home-consultation__whatsapp:focus-visible {
    outline: 3px solid rgba(216, 189, 125, .6);
    outline-offset: 2px;
}

/* ---- Tablet: structured � panels stack, form stays paired ---- */
@media (max-width: 991.98px) {
    body.index-page .home-consultation__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }
    body.index-page .home-consultation__aside { padding: 30px 28px; }
}

/* ---- Mobile: natural stack, full-width controls ---- */
@media (max-width: 767.98px) {
    body.index-page .home-consultation__form { grid-template-columns: minmax(0, 1fr); }
    body.index-page .home-consultation__panel { padding: 26px 20px; }
    body.index-page .home-consultation__aside { padding: 28px 22px; }
}
@media (max-width: 575.98px) {
    body.index-page .home-consultation__actions {
        flex-direction: column;
        align-items: stretch;
    }
    body.index-page .home-consultation__submit,
    body.index-page .home-consultation__whatsapp {
        width: 100%;
        justify-content: center;
    }
}

/* ---- Reduced motion: no animation in the new composition ---- */
@media (prefers-reduced-motion: reduce) {
    body.index-page .home-consultation * {
        transition: none !important;
        transform: none !important;
    }
}

/* =============================================================
   Home Legal Resources � .home-legal-resources
   ============================================================= */
body.index-page .home-legal-resources {
    padding: var(--sk-section-pad) 0;
}

.home-legal-resources__layout {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 32px;
    align-items: start;
}

/* Category rail */
.home-legal-resources__rail {
    position: sticky;
    top: 100px;
    padding: 20px 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fbf9f6 100%);
    border: 1px solid rgba(34,34,34,.06);
    border-radius: 16px;
}

.home-legal-resources__rail-kicker {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #87494a;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(135,73,74,.12);
}

.home-legal-resources__rail-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.home-legal-resources__rail-item {
    margin: 0;
    padding: 0;
}

.home-legal-resources__rail-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: #687469;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    transition: all .25s ease;
    position: relative;
}

.home-legal-resources__rail-btn i {
    color: #87494a;
    font-size: 14px;
    flex-shrink: 0;
    transition: transform .25s ease;
}

.home-legal-resources__rail-btn:hover {
    background: rgba(135,73,74,.06);
    color: #211c1b;
}

.home-legal-resources__rail-btn:hover i {
    transform: translateX(2px);
}

.home-legal-resources__rail-btn.active {
    background: linear-gradient(135deg, rgba(135,73,74,.12) 0%, rgba(135,73,74,.06) 100%);
    color: #211c1b;
    font-weight: 700;
}

.home-legal-resources__rail-btn.active i {
    color: #87494a;
}

.home-legal-resources__rail-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(135,73,74,.08);
    color: #87494a;
    font-size: 10px;
    font-weight: 800;
    flex-shrink: 0;
    transition: all .25s ease;
}

.home-legal-resources__rail-btn.active .home-legal-resources__rail-num {
    background: #87494a;
    color: #ffffff;
}

.home-legal-resources__rail-label {
    flex: 1;
}

/* Rail links */
.home-legal-resources__rail-links {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid rgba(34,34,34,.06);
}

.home-legal-resources__rail-links a {
    display: flex;
    align-items: center;
    color: #687469;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: color .2s;
    gap: 4px;
}

.home-legal-resources__rail-links a i {
    color: #87494a;
    font-size: 14px;
}

.home-legal-resources__rail-links a:hover {
    color: #87494a;
}

/* Content area */
.home-legal-resources__content {
    min-width: 0;
    transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16,1,0.3,1);
}

/* Loader */
.home-legal-resources__loader {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: #8b817d;
    font-size: 12px;
    font-weight: 600;
}

.home-legal-resources__loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(135,73,74,.15);
    border-top-color: #87494a;
    border-radius: 50%;
    animation: skInsightsSpin 0.8s linear infinite;
}

@keyframes skInsightsSpin {
    to { transform: rotate(360deg); }
}

/* Resource grid */
.home-legal-resources__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.home-legal-resources__item {
    animation: home-legal-fade-up .5s ease both;
}

.home-legal-resources__item:nth-child(1) { animation-delay: .03s; }
.home-legal-resources__item:nth-child(2) { animation-delay: .06s; }
.home-legal-resources__item:nth-child(3) { animation-delay: .09s; }
.home-legal-resources__item:nth-child(4) { animation-delay: .12s; }
.home-legal-resources__item:nth-child(5) { animation-delay: .15s; }
.home-legal-resources__item:nth-child(6) { animation-delay: .18s; }
.home-legal-resources__item:nth-child(7) { animation-delay: .21s; }
.home-legal-resources__item:nth-child(8) { animation-delay: .24s; }
.home-legal-resources__item:nth-child(9) { animation-delay: .27s; }

@keyframes home-legal-fade-up {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

.home-legal-resources__card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,.06);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.home-legal-resources__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(34,34,34,.08);
    border-color: rgba(135,73,74,.15);
}

.home-legal-resources__card-link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.home-legal-resources__card-badge {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    padding: 3px 9px;
    border-radius: 5px;
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: rgba(135,73,74,.9);
    color: #fff;
}

.home-legal-resources__card-img {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: #f4f1f0;
}

.home-legal-resources__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}

.home-legal-resources__card:hover .home-legal-resources__card-img img {
    transform: scale(1.04);
}

.home-legal-resources__card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 6px;
}

.home-legal-resources__card-body h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: #211c1b;
}

.home-legal-resources__card-body > p {
    margin: 0;
    color: #797979;
    font-size: 12px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.home-legal-resources__card-foot {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 8px;
}

.home-legal-resources__card-date {
    color: #797979;
    font-size: 11px;
}

.home-legal-resources__card-date i {
    margin-right: 3px;
    color: #87494a;
}

.home-legal-resources__card-cta {
    color: #87494a;
    font-size: 11px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 2px;
    transition: gap .2s ease;
}

.home-legal-resources__card:hover .home-legal-resources__card-cta {
    gap: 4px;
}

/* All CTA row */
.home-legal-resources__all-cta {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* Empty state */
.home-legal-resources__empty {
    padding: 48px 32px;
    text-align: center;
    background: linear-gradient(180deg, #ffffff 0%, #fbf9f6 100%);
    border: 1px solid rgba(34,34,34,.06);
    border-radius: 16px;
    position: relative;
    overflow: hidden;
}

.home-legal-resources__empty::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, rgba(135,73,74,.2), transparent);
}

.home-legal-resources__empty-illustration {
    margin-bottom: 20px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.home-legal-resources__empty-illustration i {
    font-size: 48px;
    color: #d8bd7d;
    opacity: .6;
}

.home-legal-resources__empty-line {
    display: block;
    width: 120px;
    height: 4px;
    border-radius: 2px;
    background: rgba(135,73,74,.12);
}

.home-legal-resources__empty-line.short {
    width: 80px;
}

.home-legal-resources__empty h3 {
    margin: 0 0 8px;
    font-size: 18px;
    font-weight: 800;
    color: #211c1b;
}

.home-legal-resources__empty > p {
    margin: 0 auto 20px;
    max-width: 440px;
    color: #797979;
    font-size: 14px;
    line-height: 1.6;
}

.home-legal-resources__empty-shortcuts {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 20px;
}

.home-legal-resources__empty-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(34,34,34,.1);
    border-radius: 8px;
    background: #ffffff;
    color: #211c1b;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all .2s;
}

.home-legal-resources__empty-btn i {
    color: #87494a;
    font-size: 14px;
}

.home-legal-resources__empty-btn:hover {
    border-color: #87494a;
    color: #87494a;
    background: rgba(135,73,74,.04);
}

.home-legal-resources__empty-cta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 22px;
    border: none;
    border-radius: 8px;
    background: #87494a;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: background .2s;
}

.home-legal-resources__empty-cta:hover {
    background: #6f3839;
}

/* All CTA buttons */
.home-legal-resources__all-cta .sk-btn-outline-dark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border: 1.5px solid rgba(34,34,34,.15);
    border-radius: 8px;
    color: #211c1b;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    transition: all .2s;
    background: transparent;
}

.home-legal-resources__all-cta .sk-btn-outline-dark:hover {
    border-color: #87494a;
    color: #87494a;
    background: rgba(135,73,74,.04);
}

/* Tablet */
@media (max-width: 1199.98px) {
    .home-legal-resources__layout {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .home-legal-resources__rail {
        position: static;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        padding: 14px 16px;
    }

    .home-legal-resources__rail-kicker {
        width: 100%;
        margin-bottom: 0;
        padding-bottom: 8px;
    }

    .home-legal-resources__rail-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 6px;
    }

    .home-legal-resources__rail-item {
        flex: 0 0 auto;
    }

    .home-legal-resources__rail-btn {
        width: auto;
        padding: 7px 12px;
        border-radius: 8px;
    }

    .home-legal-resources__rail-btn.active {
        border-bottom: none;
    }

    .home-legal-resources__rail-num {
        width: 20px;
        height: 20px;
        font-size: 9px;
    }

    .home-legal-resources__rail-links {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
        padding-top: 10px;
        margin-top: 10px;
    }

    .home-legal-resources__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

/* Mobile */
@media (max-width: 767.98px) {
    .home-legal-resources__rail {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        padding: 12px;
    }

    .home-legal-resources__rail-kicker {
        text-align: center;
    }

    .home-legal-resources__rail-list {
        flex-direction: row;
        overflow-x: auto;
        flex-wrap: nowrap;
        gap: 6px;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .home-legal-resources__rail-list::-webkit-scrollbar {
        display: none;
    }

    .home-legal-resources__rail-item {
        flex: 0 0 auto;
    }

    .home-legal-resources__rail-btn {
        white-space: nowrap;
        padding: 6px 10px;
        font-size: 12px;
    }

    .home-legal-resources__rail-label {
        display: none;
    }

    .home-legal-resources__rail-num {
        width: 18px;
        height: 18px;
        font-size: 8px;
    }

    .home-legal-resources__rail-links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .home-legal-resources__grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .home-legal-resources__empty {
        padding: 36px 20px;
    }

    .home-legal-resources__empty-shortcuts {
        flex-direction: column;
        align-items: center;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .home-legal-resources__item,
    .home-legal-resources__card {
        animation: none !important;
        transition: none !important;
    }

    .home-legal-resources__rail-btn i,
    .home-legal-resources__card-cta {
        transition: none !important;
    }
}

/* Dark theme */
:root[data-theme="dark"] .home-legal-resources__rail {
    background: linear-gradient(180deg, #1e1c17 0%, #161410 100%);
    border-color: rgba(255,255,255,.06);
}

:root[data-theme="dark"] .home-legal-resources__rail-kicker {
    color: #d8bd7d;
    border-bottom-color: rgba(216,189,125,.15);
}

:root[data-theme="dark"] .home-legal-resources__rail-btn {
    color: #c8c3b8;
}

:root[data-theme="dark"] .home-legal-resources__rail-btn:hover {
    background: rgba(216,189,125,.06);
    color: #f0ece4;
}

:root[data-theme="dark"] .home-legal-resources__rail-btn.active {
    background: linear-gradient(135deg, rgba(216,189,125,.12) 0%, rgba(216,189,125,.06) 100%);
    color: #f0ece4;
}

:root[data-theme="dark"] .home-legal-resources__rail-num {
    background: rgba(216,189,125,.1);
    color: #d8bd7d;
}

:root[data-theme="dark"] .home-legal-resources__rail-btn.active .home-legal-resources__rail-num {
    background: #d8bd7d;
    color: #1a1814;
}

:root[data-theme="dark"] .home-legal-resources__rail-btn i {
    color: #d8bd7d;
}

:root[data-theme="dark"] .home-legal-resources__rail-links a {
    color: #c8c3b8;
}

:root[data-theme="dark"] .home-legal-resources__rail-links a:hover {
    color: #d8bd7d;
}

:root[data-theme="dark"] .home-legal-resources__card {
    background: #1e1c17;
    border-color: rgba(255,255,255,.06);
}

:root[data-theme="dark"] .home-legal-resources__card-body h3 {
    color: #f0ece4;
}

:root[data-theme="dark"] .home-legal-resources__card-body > p {
    color: #9aab9b;
}

:root[data-theme="dark"] .home-legal-resources__card-date {
    color: #9aab9b;
}

:root[data-theme="dark"] .home-legal-resources__card-date i {
    color: #d8bd7d;
}

:root[data-theme="dark"] .home-legal-resources__card-cta {
    color: #d8bd7d;
}

:root[data-theme="dark"] .home-legal-resources__empty {
    background: linear-gradient(180deg, #1e1c17 0%, #161410 100%);
    border-color: rgba(255,255,255,.06);
}

:root[data-theme="dark"] .home-legal-resources__empty h3 {
    color: #f0ece4;
}

:root[data-theme="dark"] .home-legal-resources__empty > p {
    color: #9aab9b;
}

:root[data-theme="dark"] .home-legal-resources__empty-btn {
    background: #1e1c17;
    border-color: rgba(255,255,255,.08);
    color: #c8c3b8;
}

:root[data-theme="dark"] .home-legal-resources__empty-btn i {
    color: #d8bd7d;
}

:root[data-theme="dark"] .home-legal-resources__empty-btn:hover {
    border-color: #d8bd7d;
    color: #d8bd7d;
    background: rgba(216,189,125,.06);
}

:root[data-theme="dark"] .home-legal-resources__empty-cta {
    background: #d8bd7d;
    color: #1a1814;
}

:root[data-theme="dark"] .home-legal-resources__empty-cta:hover {
    background: #c1a974;
}

:root[data-theme="dark"] .home-legal-resources__all-cta .sk-btn-outline-dark {
    border-color: rgba(255,255,255,.15);
    color: #c8c3b8;
}

:root[data-theme="dark"] .home-legal-resources__all-cta .sk-btn-outline-dark:hover {
    border-color: #d8bd7d;
    color: #d8bd7d;
    background: rgba(216,189,125,.06);
}

:root[data-theme="dark"] .home-legal-resources__loader {
    color: #c8c3b8;
}

:root[data-theme="dark"] .home-legal-resources__loader-spinner {
    border-color: rgba(216,189,125,.2);
    border-top-color: #d8bd7d;
}

/* =============================================================
     Why This Platform Exists � .why-this-platform
    ============================================================= */
body.index-page .why-this-platform {
    padding: var(--sk-section-pad) 0;
}

/* =============================================================
    Home Platform Purpose � .home-platform-purpose
    ============================================================= */
body.index-page .home-platform-purpose {
    padding: clamp(44px, 8vh, 96px) 0;
    background: linear-gradient(180deg, #f8f7f4 0%, #ffffff 100%);
    position: relative;
    overflow-x: hidden;
}

body.index-page .home-platform-purpose .container {
    position: relative;
    z-index: 1;
}

.home-platform-purpose__narrative {
    position: relative;
    z-index: 1;
}

.home-platform-purpose__principle {
    position: relative;
    padding: 16px 20px;
    margin: 24px 0;
    background: linear-gradient(135deg, rgba(216, 189, 125, 0.06), rgba(216, 189, 125, 0.02));
    border-left: 3px solid #d8bd7d;
    border-radius: 6px;
    font-style: italic;
    color: #222222;
    font-size: 14px;
}

.home-platform-purpose__principle::before {
    content: "\\\\201C";
    position: absolute;
    left: 6px;
    top: 2px;
    font-size: 28px;
    color: rgba(216, 189, 125, 0.15);
    font-family: serif;
    line-height: 1;
}

.home-platform-purpose__visual-compact {
    position: relative;
    height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-platform-purpose__visual-badge {
    position: absolute;
    top: 20px;
    right: 20px;
    background: linear-gradient(135deg, #87494a, #6f3839);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(135, 73, 74, 0.2);
}

.home-platform-purpose__timeline-visual {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.home-platform-purpose__timeline-progress {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);\n    width: 180px;\n    height: 2px;\n    background: rgba(135, 73, 74, 0.1);\n    border-radius: 1px;\n    z-index: 1;\n}\n\n.home-platform-purpose__progress-track {\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    background: linear-gradient(90deg, rgba(135, 73, 74, 0.3), rgba(216, 189, 125, 0.3));\n    transform-origin: left;\n    transform: scaleX(0);\n    transition: transform 1s ease;\n}\n\n.home-platform-purpose.is-scrolling .home-platform-purpose__progress-track {\n    transform: scaleX(1);\n}\n\n.home-platform-purpose__timeline-summary {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    width: 160px;\n    height: 160px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    z-index: 2;\n}\n\n.home-platform-purpose__summary-item {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    position: relative;\n}\n\n.home-platform-purpose__summary-dot {\n    width: 12px;\n    height: 12px;\n    border-radius: 50%;\n    background: #ffffff;\n    border: 2px solid #87494a;\n    transition: all 0.3s ease;\n}\n\n.home-platform-purpose__summary-dot.active {\n    background: #87494a;\n    border-color: #87494a;\n    transform: scale(1.2);\n}\n\n.home-platform-purpose__summary-line {\n    width: 2px;\n    height: 60px;\n    background: rgba(135, 73, 74, 0.2);\n    transform-origin: top;\n    transform: scaleY(0);\n    transition: transform 0.5s ease;\n    margin-top: 4px;\n}\n\n.home-platform-purpose__summary-item.active .home-platform-purpose__summary-line {\n    transform: scaleY(1);\n}\n\n/* ===== Animations ===== */\n@media (prefers-reduced-motion: no-preference) {\n    .home-platform-purpose__timeline-item {\n        transition: transform 0.3s ease;\n    }\n    \n    .home-platform-purpose__timeline-item:hover {\n        transform: translateY(-2px);\n    }\n    \n    .home-platform-purpose__timeline-dot {\n        animation: dotPulse 2s infinite;\n    }\n    \n    @keyframes dotPulse {\n        0%, 100% { transform: scale(1); }\n        50% { transform: scale(1.05); }\n    }\n    \n    .home-platform-purpose__timeline-content {\n        animation: fadeSlide 0.4s ease backwards;\n    }\n    \n    .home-platform-purpose__timeline-item:nth-child(1) .home-platform-purpose__timeline-content { animation-delay: 0.1s; }\n    .home-platform-purpose__timeline-item:nth-child(2) .home-platform-purpose__timeline-content { animation-delay: 0.2s; }\n    .home-platform-purpose__timeline-item:nth-child(3) .home-platform-purpose__timeline-content { animation-delay: 0.3s; }\n    .home-platform-purpose__timeline-item:nth-child(4) .home-platform-purpose__timeline-content { animation-delay: 0.4s; }\n    .home-platform-purpose__timeline-item:nth-child(5) .home-platform-purpose__timeline-content { animation-delay: 0.5s; }\n    \n    @keyframes fadeSlide {\n        from {\n            opacity: 0;\n            transform: translateY(8px);\n        }\n        to {\n            opacity: 1;\n            transform: translateY(0);\n        }\n    }\n}\n\n/* ===== Mobile Responsiveness ===== */\n@media (max-width: 991.98px) {\n    body.index-page .home-platform-purpose {\n        padding: 60px 0;\n        min-height: auto;\n        max-height: none;\n    }\n    \n    .home-platform-purpose__timeline-compact {\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: 20px;\n        margin: 32px 0;\n    }\n    \n    .home-platform-purpose__timeline-item {\n        flex: 0 0 calc(50% - 10px);\n        max-width: none;\n        min-width: 140px;\n    }\n    \n    .home-platform-purpose__timeline-connector {\n        display: none;\n    }\n    \n    .home-platform-purpose__visual-compact {\n        height: 240px;\n        margin-top: 40px;\n    }\n    \n    .home-platform-purpose__timeline-visual {\n        width: 160px;\n        height: 160px;\n    }\n    \n    .home-platform-purpose__timeline-progress {\n        width: 140px;\n    }\n    \n    .home-platform-purpose__timeline-summary {\n        width: 140px;\n        height: 140px;\n    }\n    \n    .home-platform-purpose__summary-line {\n        height: 40px;\n    }\n}\n\n@media (max-width: 575.98px) {\n    body.index-page .home-platform-purpose {\n        padding: 48px 0;\n    }\n    \n    .home-platform-purpose__timeline-compact {\n        gap: 16px;\n    }\n    \n    .home-platform-purpose__timeline-item {\n        flex: 0 0 100%;\n        min-width: auto;\n    }\n    \n    .home-platform-purpose__timeline-node {\n        width: 32px;\n        height: 32px;\n    }\n    \n    .home-platform-purpose__timeline-dot {\n        width: 8px;\n        height: 8px;\n    }\n    \n    .home-platform-purpose__timeline-label {\n        font-size: 9px;\n    }\n    \n    .home-platform-purpose__timeline-content strong {\n        font-size: 10px;\n    }\n    \n    .home-platform-purpose__timeline-content p {\n        font-size: 9px;\n    }\n    \n    .home-platform-purpose__visual-compact {\n        height: 200px;\n        margin-top: 32px;\n    }\n    \n    .home-platform-purpose__timeline-visual {\n        width: 140px;\n        height: 140px;\n    }\n    \n    .home-platform-purpose__timeline-progress {\n        width: 120px;\n    }\n    \n    .home-platform-purpose__timeline-summary {\n        width: 120px;\n        height: 120px;\n    }\n    \n    .home-platform-purpose__summary-dot {\n        width: 10px;\n        height: 10px;\n    }\n    \n    .home-platform-purpose__summary-line {\n        height: 30px;\n    }\n    \n    .home-platform-purpose__intro {\n        font-size: 14px;\n    }\n    \n    .home-platform-purpose__principle {\n        font-size: 13px;\n        padding: 12px 16px;\n    }\n}

body.index-page .home-platform-purpose::before {
    content: "";
    position: absolute;
    left: -15%;
    top: -15%;
    width: 50%;
    height: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(135, 73, 74, 0.06), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

body.index-page .home-platform-purpose::after {
    content: "";
    position: absolute;
    right: -10%;
    bottom: -20%;
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(216, 189, 125, 0.08), transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.home-platform-purpose__narrative {
    position: relative;
    z-index: 1;
}

.home-platform-purpose__principle {
    position: relative;
    padding: 20px 24px;
    margin: 24px 0;
    background: linear-gradient(135deg, rgba(216, 189, 125, 0.08), rgba(216, 189, 125, 0.02));
    border-left: 4px solid #d8bd7d;
    border-radius: 8px;
    font-style: italic;
    color: #222222;
}

.home-platform-purpose__principle::before {
    content: "\201C";
    position: absolute;
    left: 8px;
    top: 4px;
    font-size: 40px;
    color: rgba(216, 189, 125, 0.2);
    font-family: serif;
    line-height: 1;
}

/* ===== Animations ===== */
@media (prefers-reduced-motion: no-preference) {
    .home-platform-purpose__node {
        transition: transform 0.3s ease;
    }
    
    .home-platform-purpose__node:hover {
        transform: translateY(-2px);
    }
    
    .home-platform-purpose__node-dot {
        animation: pulse 3s infinite;
    }
    
    @keyframes pulse {
        0%, 100% { transform: scale(1); }
        50% { transform: scale(1.1); }
    }
    
    .home-platform-purpose__journey-stage {
        animation: slideIn 0.6s ease backwards;
        animation-fill-mode: both;
    }
    
    .home-platform-purpose__journey-stage:nth-child(1) { animation-delay: 0.1s; }
    .home-platform-purpose__journey-stage:nth-child(2) { animation-delay: 0.2s; }
    .home-platform-purpose__journey-stage:nth-child(3) { animation-delay: 0.3s; }
    .home-platform-purpose__journey-stage:nth-child(4) { animation-delay: 0.4s; }
    .home-platform-purpose__journey-stage:nth-child(5) { animation-delay: 0.5s; }
    
    .home-platform-purpose__principle {
        animation: fadeInUp 0.6s ease;
        animation-delay: 0.3s;
        animation-fill-mode: both;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateX(-20px);
        }
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }
    
    .home-platform-purpose__visual {
        animation: float 20s infinite ease-in-out;
    }
    
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-10px); }
    }
}

/* ===== Scroll-triggered animations ===== */
.home-platform-purpose.is-scrolling .home-platform-purpose__timeline-track {
    animation: timelineReveal 0.8s ease forwards;
}

.home-platform-purpose.is-scrolling .home-platform-purpose__timeline-track:nth-child(1) { animation-delay: 0.1s; }
.home-platform-purpose.is-scrolling .home-platform-purpose__timeline-track:nth-child(2) { animation-delay: 0.3s; }
.home-platform-purpose.is-scrolling .home-platform-purpose__timeline-track:nth-child(3) { animation-delay: 0.5s; }
.home-platform-purpose.is-scrolling .home-platform-purpose__timeline-track:nth-child(4) { animation-delay: 0.7s; }
.home-platform-purpose.is-scrolling .home-platform-purpose__timeline-track:nth-child(5) { animation-delay: 0.9s; }

@keyframes timelineReveal {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.home-platform-purpose__content > * {
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.home-platform-purpose.is-scrolling .home-platform-purpose__content > *:nth-child(1) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.5s;
}

.home-platform-purpose.is-scrolling .home-platform-purpose__content > *:nth-child(2) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.8s;
}

.home-platform-purpose.is-scrolling .home-platform-purpose__content > *:nth-child(3) {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 1.1s;
}

/* ===== Mobile Responsiveness ===== */
@media (max-width: 991.98px) {
    body.index-page .home-platform-purpose {
        padding: 60px 0;
    }
    
    .home-platform-purpose__timeline {
        flex-wrap: wrap;
        gap: 24px;
        justify-content: center;
        margin: 40px 0;
    }
    
    .home-platform-purpose__timeline::before {
        display: none;
    }
    
    .home-platform-purpose__timeline-track {
        flex: 0 0 calc(50% - 24px);
        margin-bottom: 20px;
    }
    
    .home-platform-purpose__timeline-connector {
        width: 100%;
        transform: scaleY(0);
        height: 60px;
    }
    
    .home-platform-purpose__visual-container {
        margin-top: 40px;
    }
    
    .home-platform-purpose__journey-stage {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    
    .home-platform-purpose__journey-arrow {
        transform: rotate(90deg);
        margin: 8px 0;
    }
    
    .home-platform-purpose__purpose-statement {
        text-align: center;
    }
}

@media (max-width: 575.98px) {
    .home-platform-purpose__timeline-track {
        flex: 0 0 100%;
    }
    
    .home-platform-purpose__visual-container {
        padding: 24px;
    }
    
    .home-platform-purpose__stage-number {
        width: 36px;
        height: 36px;
        font-size: 12px;
    }
    
    .home-platform-purpose__stage-title {
        font-size: 15px;
    }
    
    .home-platform-purpose__stage-desc {
        font-size: 13px;
    }
}

/* =============================================================
   How I Help / Legal Process � .how-i-help
   ============================================================= */
body.index-page .how-i-help {
    padding: var(--sk-section-pad) 0;
}



/* =============================================================
   Download Centre � .download-centre
   ============================================================= */
body.index-page .download-centre {
    padding: var(--sk-section-pad) 0;
}

/* =============================================================
   FAQ � .faq
   ============================================================= */
body.index-page .faq {
    padding: var(--sk-section-pad) 0;
}

/* =============================================================
   Consultation Journey � .consultation-journey
   ============================================================= */
body.index-page .consultation-journey {
    padding: var(--sk-section-pad) 0;
}

/* =============================================================
   Media & Recognition � .media-recognition
   ============================================================= */
body.index-page .media-recognition {
    padding: var(--sk-section-pad) 0;
}

/* =============================================================
   Consultation CTA - .consultation-cta
   ============================================================= */
body.index-page .consultation-cta {
    padding: var(--sk-section-pad) 0;
}

/* =============================================================
   Why This Platform Exists - Premium Editorial Section
   ============================================================= */

/* Journey Items — Premium */
body.index-page .home-platform-purpose__journey {
    margin: 0;
}
body.index-page .home-platform-purpose__journey-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px;
    background: linear-gradient(180deg, #fff 0%, rgba(248,247,244,.5) 100%);
    border-radius: 16px;
    border: 1px solid rgba(135,73,74,.06);
    height: 100%;
    transition: box-shadow var(--sk-transition), transform var(--sk-transition), border-color var(--sk-transition);
}
body.index-page .home-platform-purpose__journey-item:hover {
    box-shadow: 0 8px 24px rgba(135,73,74,.08);
    transform: translateY(-2px);
    border-color: rgba(135,73,74,.15);
}
body.index-page .home-platform-purpose__journey-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0;
    transition: transform var(--sk-transition);
}
body.index-page .home-platform-purpose__journey-item:hover .home-platform-purpose__journey-icon {
    transform: scale(1.08);
}
body.index-page .home-platform-purpose__journey-icon.bg-soft-maroon {
    background: linear-gradient(135deg, rgba(135,73,74,.1) 0%, rgba(135,73,74,.05) 100%);
    color: #87494a;
}
body.index-page .home-platform-purpose__journey-icon.bg-soft-gold {
    background: linear-gradient(135deg, rgba(216,189,125,.18) 0%, rgba(216,189,125,.08) 100%);
    color: #87494a;
}
body.index-page .home-platform-purpose__journey-body strong {
    display: block;
    font-size: 0.9rem;
    font-weight: 700;
    color: #211c1b;
    margin-bottom: 4px;
}
body.index-page .home-platform-purpose__journey-body p {
    font-size: 0.8rem;
    color: #6b615b;
    margin: 0;
    line-height: 1.55;
}

/* Stats Cards — Premium */
body.index-page .home-platform-purpose__stat-card {
    border-radius: 16px;
    border: 1px solid rgba(135,73,74,.06);
    background: linear-gradient(180deg, #fff 0%, rgba(248,247,244,.6) 100%);
    transition: transform var(--sk-transition), box-shadow var(--sk-transition);
}
body.index-page .home-platform-purpose__stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(135,73,74,.08);
}
body.index-page .home-platform-purpose__stat-num {
    display: block;
    font-size: 1.5rem;
    font-weight: 800;
    color: #87494a;
    line-height: 1.2;
}
body.index-page .home-platform-purpose__stat-card small {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b615b;
    margin-top: 2px;
}

/* Brand Badge Colors */
body.index-page .badge.bg-brand-maroon {
    background: #87494a !important;
    color: #fff;
}
body.index-page .badge.bg-brand-gold {
    background: #d8bd7d !important;
    color: #211c1b;
}
body.index-page .badge.bg-brand-ivory {
    background: #f8f7f4 !important;
    color: #211c1b;
    border: 1px solid rgba(135, 73, 74, 0.2);
}

/* Download Centre - Brand Colors */
body.index-page .download-item .btn-outline-secondary {
    border-color: rgba(135, 73, 74, 0.3);
    color: #87494a;
}
body.index-page .download-item .btn-outline-secondary:hover {
    background: #87494a;
    border-color: #87494a;
    color: #fff;
}

/* Principle Quote — Editorial Pull Quote */
body.index-page .home-platform-purpose__principle {
    background: linear-gradient(135deg, rgba(135,73,74,.03) 0%, rgba(216,189,125,.06) 100%);
    border-left: 3px solid #87494a;
    border-radius: 0 16px 16px 0;
    padding: 20px 24px;
    margin: 20px 0;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}
body.index-page .home-platform-purpose__principle::before {
    content: "";
    position: absolute;
    top: -20px;
    right: -20px;
    width: 80px;
    height: 80px;
    background: radial-gradient(circle, rgba(135,73,74,.06), transparent 70%);
    pointer-events: none;
}
body.index-page .home-platform-purpose__principle > i.bi-quote {
    color: #87494a;
    font-size: 1.75rem;
    flex-shrink: 0;
    margin-top: 2px;
    opacity: .8;
}
body.index-page .home-platform-purpose__principle span {
    font-size: 0.9rem;
    line-height: 1.65;
    color: #55504b;
    font-style: italic;
}

/* Why Card */
body.index-page .home-platform-purpose__why-card {
    border-radius: 12px;
}
body.index-page .home-platform-purpose__why-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: rgba(13, 110, 253, 0.1);
    color: #0d6efd;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-right: 16px;
}
body.index-page .home-platform-purpose__why-card h5 {
    font-size: 0.95rem;
    font-weight: 700;
    color: #211c1b;
}

/* Lead Text */
body.index-page .home-platform-purpose__lead {
    font-size: 0.95rem;
    line-height: 1.7;
    color: #55504b;
    margin-bottom: 8px;
}

/* CTA */
body.index-page .home-platform-purpose__cta {
    margin-top: 20px;
}

@media (max-width: 991.98px) {
    body.index-page .home-platform-purpose__visual-image img {
        height: 240px;
    }
    body.index-page .home-platform-purpose__visual-overlay {
        padding: 24px 16px 16px;
        gap: 16px;
    }
    body.index-page .home-platform-purpose__visual-stat strong {
        font-size: 1.35rem;
    }
}
@media (max-width: 767.98px) {
    body.index-page .home-platform-purpose__journey-item {
        padding: 12px 0;
        gap: 12px;
    }
    body.index-page .home-platform-purpose__journey-icon {
        width: 38px;
        height: 38px;
        font-size: 1.1rem;
    }
}

/* =============================================================
   Practice Areas, Featured Judgements, Articles, Downloads, Journey
   Redesigned Bootstrap 5 sections for the homepage.
   ============================================================= */

/* Practice Areas — Premium Cards */
body.index-page .practice-card {
    border-radius: 16px;
    border: 1px solid rgba(135,73,74,.06);
    background: linear-gradient(180deg, #fff 0%, rgba(248,247,244,.4) 100%);
    transition: transform var(--sk-transition), box-shadow var(--sk-transition), border-color var(--sk-transition);
}
body.index-page .practice-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(135,73,74,.1);
    border-color: rgba(135,73,74,.2);
}
body.index-page .practice-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(135,73,74,.1) 0%, rgba(216,189,125,.12) 100%);
    color: #87494a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: transform var(--sk-transition), background var(--sk-transition);
}
body.index-page .practice-card:hover .practice-card__icon {
    transform: scale(1.05);
    background: linear-gradient(135deg, rgba(135,73,74,.15) 0%, rgba(216,189,125,.2) 100%);
}
body.index-page .practice-card .card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #211c1b;
}
body.index-page .practice-card .card-text {
    font-size: .85rem;
    line-height: 1.6;
    color: #6b615b;
}



/* Download Centre — Premium */
body.index-page .download-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(135,73,74,.08) 0%, rgba(216,189,125,.1) 100%);
    color: #87494a;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: transform var(--sk-transition);
}
body.index-page .download-item:hover .download-icon {
    transform: scale(1.05);
}
body.index-page .download-item {
    transition: transform var(--sk-transition), box-shadow var(--sk-transition);
    border-radius: 12px;
}
body.index-page .download-item:hover {
    transform: translateX(4px);
    box-shadow: 0 4px 16px rgba(135,73,74,.06);
}

/* Consultation Journey Timeline — Premium */
body.index-page .journey-timeline {
    position: relative;
    padding-left: 72px;
}
body.index-page .journey-timeline::before {
    content: '';
    position: absolute;
    left: 28px;
    top: 24px;
    bottom: 24px;
    width: 2px;
    background: linear-gradient(to bottom, #87494a 0%, rgba(216,189,125,.5) 50%, rgba(135,73,74,.1) 100%);
}
body.index-page .journey-step {
    position: relative;
    margin-bottom: 24px;
    transition: transform var(--sk-transition);
}
body.index-page .journey-step:hover {
    transform: translateX(4px);
}
body.index-page .journey-step:last-child {
    margin-bottom: 0;
}
body.index-page .journey-step__icon {
    position: absolute;
    left: -72px;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #87494a 0%, #6d3a3b 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 6px 20px rgba(135,73,74,.25);
    z-index: 1;
    transition: transform var(--sk-transition), box-shadow var(--sk-transition);
}
body.index-page .journey-step:hover .journey-step__icon {
    transform: scale(1.08);
    box-shadow: 0 8px 28px rgba(135,73,74,.35);
}
body.index-page .journey-step__content {
    background: linear-gradient(180deg, #fff 0%, rgba(248,247,244,.4) 100%);
    border-radius: 16px;
    padding: 24px 28px;
    border: 1px solid rgba(135,73,74,.06);
    box-shadow: var(--sk-shadow-sm);
    transition: box-shadow var(--sk-transition);
}
body.index-page .journey-step:hover .journey-step__content {
    box-shadow: var(--sk-shadow-md);
}
body.index-page .journey-step__content h5 {
    margin-bottom: 6px;
    color: #211c1b;
    font-weight: 700;
    font-size: 1.05rem;
}
body.index-page .journey-step__content p {
    color: #6b615b;
    font-size: .875rem;
    line-height: 1.6;
}

@media (max-width: 767.98px) {
    body.index-page .journey-timeline {
        padding-left: 56px;
    }
    body.index-page .journey-timeline::before {
        left: 22px;
    }
    body.index-page .journey-step__icon {
        left: -56px;
        width: 44px;
        height: 44px;
        font-size: 1.05rem;
    }
    body.index-page .journey-step__content {
        padding: 18px 20px;
    }
}

/* =============================================================
   Media & Recognition - .home-media-recognition-scoped
   Bespoke Bootstrap 5 showcase for the homepage.
   ============================================================= */

body.index-page .home-media-recognition-scoped {
    padding: var(--sk-section-pad) 0;
}

body.index-page .home-media-recognition-scoped .section-subtitle {
    margin-top: 8px;
    color: #797979;
    font-size: 15px;
    font-weight: 400;
}

.home-media-recognition__layout {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* --- Featured Cinematic Panel --- */
.home-media-recognition__featured {
    border-radius: 16px;
    overflow: hidden;
    background: #222222;
    box-shadow: 0 24px 60px rgba(34,34,34,0.25);
}

.home-media-recognition__panel-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.home-media-recognition__panel-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 80px rgba(34,34,34,0.32);
}

.home-media-recognition__panel {
    display: grid;
    grid-template-columns: 1fr;
    min-height: 380px;
}

@media (min-width: 992px) {
    .home-media-recognition__panel {
        grid-template-columns: 1.1fr 1fr;
        min-height: 420px;
    }
}

.home-media-recognition__panel-media {
    position: relative;
    overflow: hidden;
    background: #1a1a1a;
}

.home-media-recognition__panel-media iframe,
.home-media-recognition__panel-media img {
    width: 100%;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

@media (min-width: 992px) {
    .home-media-recognition__panel-media iframe,
    .home-media-recognition__panel-media img {
        min-height: 420px;
    }
}

.home-media-recognition__panel-link:hover .home-media-recognition__panel-media iframe,
.home-media-recognition__panel-link:hover .home-media-recognition__panel-media img {
    transform: scale(1.04);
}

.home-media-recognition__play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,34,34,0.35);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 56px;
    opacity: 0.85;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.home-media-recognition__panel-link:hover .home-media-recognition__play-badge {
    opacity: 1;
    transform: scale(1.1);
    color: #c1a974;
}

.home-media-recognition__panel-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 40px;
    background: linear-gradient(145deg, #1a1a1a 0%, #222222 100%);
}

.home-media-recognition__panel-badge {
    display: inline-block;
    width: fit-content;
    padding: 6px 14px;
    border-radius: 30px;
    background: linear-gradient(135deg, #c1a974, #a68d5e);
    color: #1a1814;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.home-media-recognition__panel-title {
    margin: 0 0 10px;
    color: #ffffff;
    font-size: clamp(22px, 3vw, 28px);
    font-weight: 800;
    line-height: 1.25;
}

.home-media-recognition__panel-outlet {
    margin: 0 0 14px;
    color: #c1a974;
    font-size: 14px;
    font-weight: 600;
}

.home-media-recognition__panel-summary {
    margin: 0 0 20px;
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    line-height: 1.65;
}

.home-media-recognition__panel-cta {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    color: #c1a974;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: gap 0.2s ease;
}

.home-media-recognition__panel-cta:hover {
    gap: 10px;
    color: #d8bd7d;
}

/* --- Grid Tiles --- */
.home-media-recognition__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

@media (min-width: 768px) {
    .home-media-recognition__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1200px) {
    .home-media-recognition__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.home-media-recognition__tile {
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,0.08);
    box-shadow: 0 12px 32px rgba(34,34,34,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.home-media-recognition__tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(34,34,34,0.14);
    border-color: rgba(135,73,74,0.2);
}

.home-media-recognition__tile-link {
    display: block;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.home-media-recognition__tile-media {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #222222;
}

.home-media-recognition__tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.home-media-recognition__tile:hover .home-media-recognition__tile-media img {
    transform: scale(1.05);
}

.home-media-recognition__tile-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(34,34,34,0.45);
    backdrop-filter: blur(4px);
    color: #ffffff;
    font-size: 36px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.home-media-recognition__tile:hover .home-media-recognition__tile-play {
    opacity: 0.9;
}

.home-media-recognition__tile-body {
    padding: 18px 20px 20px;
}

.home-media-recognition__tile-outlet {
    display: inline-block;
    margin-bottom: 8px;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(135,73,74,0.1);
    color: #87494a;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.home-media-recognition__tile-title {
    margin: 0 0 6px;
    color: #222222;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
}

.home-media-recognition__tile-date {
    display: inline-block;
    color: #797979;
    font-size: 12px;
    font-weight: 500;
}

.home-media-recognition__more {
    margin-top: 8px;
}

.home-media-recognition__more .btn {
    padding: 12px 28px;
    font-weight: 700;
    border-radius: 8px;
    border-width: 2px;
}

/* --- Empty State --- */
.home-media-recognition__empty {
    text-align: center;
    padding: 60px 24px;
    background: #ffffff;
    border: 1px solid rgba(34,34,34,0.06);
    border-radius: 12px;
}

.home-media-recognition__empty-illustration {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin-bottom: 20px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(135,73,74,0.1), rgba(135,73,74,0.04));
    color: #87494a;
    font-size: 40px;
}

.home-media-recognition__empty h3 {
    margin: 0 0 10px;
    color: #222222;
    font-size: 22px;
    font-weight: 800;
}

.home-media-recognition__empty p {
    margin: 0;
    color: #797979;
    font-size: 15px;
}

/* --- Dark mode support --- */
:root[data-theme="dark"] .home-media-recognition__tile {
    background: #2a2826;
    border-color: rgba(255,255,255,0.06);
    box-shadow: 0 12px 32px rgba(0,0,0,0.25);
}

:root[data-theme="dark"] .home-media-recognition__tile:hover {
    border-color: rgba(193,169,116,0.3);
    box-shadow: 0 20px 48px rgba(0,0,0,0.35);
}

:root[data-theme="dark"] .home-media-recognition__tile-title {
    color: #f4f1f0;
}

:root[data-theme="dark"] .home-media-recognition__tile-outlet {
    background: rgba(193,169,116,0.15);
    color: #c1a974;
}

:root[data-theme="dark"] .home-media-recognition__tile-date {
    color: #a8a094;
}

:root[data-theme="dark"] .home-media-recognition__empty {
    background: #2a2826;
    border-color: rgba(255,255,255,0.04);
}

:root[data-theme="dark"] .home-media-recognition__empty h3 {
    color: #f4f1f0;
}

:root[data-theme="dark"] .home-media-recognition__empty p {
    color: #a8a094;
}

:root[data-theme="dark"] .home-media-recognition__empty-illustration {
    background: linear-gradient(135deg, rgba(193,169,116,0.15), rgba(193,169,116,0.05));
    color: #c1a974;
}

/* =============================================================
   MEGA MENU v4 -- CLICK-ONLY, BOOTSTRAP-GRID REBUILD
   Wine-maroon legal branding, champagne accents, soft beige
   surfaces. Panels open on click (never hover) via .mega-open on
   the parent <li>, single-open at a time. Bootstrap 5 grid powers
   the layout: intro | 6 category cards | top reads. Desktop is a
   full three-column flyout; tablet (768-1199) is a compact flyout
   with a horizontal intro strip above two columns; mobile is an
   in-drawer stacked block. Palette: wine #87494a / champagne
   #d8bd7d / charcoal #2b2725.
   ============================================================= */

/* ---- Shared surface styling ---------------------------------- */
.sk-mega-panel {
    border: 1px solid rgba(135, 73, 74, 0.08);
    border-radius: 16px;
    background: #fdfbf8;
    box-shadow:
        0 28px 80px -12px rgba(38, 25, 24, 0.18),
        0 8px 28px -8px rgba(38, 25, 24, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    z-index: 2200;
}

/* ---- Caret rotation follows the open state (survives scrollspy) */
body.index-page #header .frontend-sidebar__nav > li.dropdown.mega-open > a.frontend-sidebar__item > .toggle-dropdown {
    transform: rotate(180deg);
    color: #87494a !important;
}
:root[data-theme="dark"] body.index-page #header .frontend-sidebar__nav > li.dropdown.mega-open > a.frontend-sidebar__item > .toggle-dropdown {
    color: #d3b979 !important;
}

/* =============================================================
   TABLET + DESKTOP: viewport flyout pinned to the rail
   ============================================================= */
@media (min-width: 768px) {

    /* -- Panel shell (closed by default, opens via .mega-open) -- */
    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        display: block !important;
        position: fixed !important;
        left: 255px !important;
        top: 0;
        width: min(760px, calc(100vw - 290px));
        min-height: 360px;
        max-height: calc(100vh - 32px);
        padding: 0 !important;
        overflow-x: hidden;
        overflow-y: auto;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate3d(-10px, 5px, 0) scale(0.985) !important;
        transition:
            opacity 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
            transform 0.35s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0.25s linear !important;
        will-change: transform, opacity;
    }

    .frontend-sidebar__nav > li.dropdown.mega-open > .sk-mega-panel {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translate3d(0, 0, 0) scale(1) !important;
    }

    /* -- Grid layout ------------------------------------------ */
    .sk-mega-panel .sk-mega-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        margin: 0;
        height: 100%;
    }
    .sk-mega-panel .sk-mega-panel__intro { grid-column: 1 / -1; }

    /* Staggered column entrance */
    .sk-mega-grid > div {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .frontend-sidebar__nav > li.dropdown.mega-open .sk-mega-grid > div {
        opacity: 1;
        transform: translateY(0);
    }
    .sk-mega-grid > div:nth-child(1) { transition-delay: 0.03s; }
    .sk-mega-grid > div:nth-child(2) { transition-delay: 0.08s; }
    .sk-mega-grid > div:nth-child(3) { transition-delay: 0.13s; }

    /* -- Intro strip (tablet: horizontal band above two cols) -- */
    .sk-mega-panel__intro {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 18px;
        padding: 20px 24px;
        color: #fff;
        background:
            radial-gradient(ellipse at 12% 18%, rgba(216, 189, 125, 0.16), transparent 48%),
            radial-gradient(ellipse at 88% 82%, rgba(135, 73, 74, 0.22), transparent 55%),
            linear-gradient(148deg, #87494a 0%, #6b3a3b 38%, #3a2a28 68%, #2b2725 100%);
        overflow: hidden;
    }
    .sk-mega-panel__intro::before {
        content: '';
        position: absolute;
        inset: 0;
        background-image:
            repeating-linear-gradient(0deg, transparent, transparent 26px, rgba(255, 255, 255, 0.012) 26px, rgba(255, 255, 255, 0.012) 27px),
            repeating-linear-gradient(90deg, transparent, transparent 26px, rgba(255, 255, 255, 0.012) 26px, rgba(255, 255, 255, 0.012) 27px);
        pointer-events: none;
    }
    .sk-mega-panel__intro::after {
        content: '';
        position: absolute;
        bottom: -25%;
        right: -15%;
        width: 220px;
        height: 220px;
        background: radial-gradient(circle, rgba(216, 189, 125, 0.12), transparent 62%);
        pointer-events: none;
    }
    .sk-mega-panel__intro > * { position: relative; z-index: 1; }

    .sk-mega-panel__intro > span {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        width: fit-content;
        padding: 4px 10px;
        color: #d8bd7d;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.4px;
        text-transform: uppercase;
        background: rgba(216, 189, 125, 0.10);
        border-radius: 6px;
        border: 1px solid rgba(216, 189, 125, 0.18);
        white-space: nowrap;
    }
    .sk-mega-panel__intro h3 {
        margin: 0;
        color: #fff;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 18px;
        line-height: 1.2;
        letter-spacing: -0.4px;
        font-weight: 400;
    }
    .sk-mega-panel__intro p { display: none; }
    .sk-mega-panel__intro > a {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        margin-left: auto;
        padding: 9px 14px;
        color: #fff;
        font-size: 11.5px;
        font-weight: 600;
        letter-spacing: 0.3px;
        text-decoration: none;
        background: rgba(255, 255, 255, 0.07);
        border: 1px solid rgba(216, 189, 125, 0.22);
        border-radius: 9px;
        white-space: nowrap;
        transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }
    .sk-mega-panel__intro > a::before {
        content: '';
        position: absolute;
        top: 0; left: -100%;
        width: 100%; height: 100%;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.14), transparent);
        transition: left 0.6s ease;
    }
    .sk-mega-panel__intro > a:hover {
        background: rgba(216, 189, 125, 0.14);
        border-color: rgba(216, 189, 125, 0.38);
        transform: translateY(-1px);
    }
    .sk-mega-panel__intro > a:hover::before { left: 100%; }

    /* -- Topics + latest columns ------------------------------ */
    .sk-mega-panel__topics,
    .sk-mega-panel__latest {
        min-width: 0;
        padding: 18px 16px;
        border-top: 1px solid rgba(135, 73, 74, 0.05);
        display: flex;
        flex-direction: column;
    }
    .sk-mega-panel__latest { background: rgba(252, 250, 247, 0.45); }

    /* -- Column headings -------------------------------------- */
    .sk-mega-panel__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        margin-bottom: 12px;
    }
    .sk-mega-panel__head small {
        color: #87494a;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: 1.5px;
        text-transform: uppercase;
    }
    .sk-mega-panel__headlink {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #87494a;
        font-size: 11px;
        font-weight: 700;
        text-decoration: none;
    }
    .sk-mega-panel__headlink:hover { color: #6b3a3b; }

    /* -- Category cards (2-up grid) --------------------------- */
    .sk-mega-cards {
        margin: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
        row-gap: 10px;
    }
    .sk-mega-cards > .col-6 {
        flex: 0 0 calc(50% - 5px);
        max-width: calc(50% - 5px);
        padding: 0;
    }
    .sk-mega-card {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 10px;
        border: 1px solid transparent;
        border-radius: 10px;
        color: #2d2826;
        background: rgba(252, 250, 247, 0.7);
        text-decoration: none !important;
        transition:
            transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
            box-shadow 0.22s ease,
            border-color 0.22s ease,
            background 0.22s ease;
    }
    .sk-mega-card:hover {
        transform: translateY(-2px);
        background: #fff;
        border-color: rgba(135, 73, 74, 0.14);
        box-shadow:
            0 6px 20px -6px rgba(135, 73, 74, 0.10),
            0 0 0 1px rgba(135, 73, 74, 0.04);
        color: #87494a;
    }
    .sk-mega-card i {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: grid;
        place-items: center;
        border-radius: 8px;
        font-size: 13px;
        color: #87494a;
        background: linear-gradient(135deg, rgba(135, 73, 74, 0.07), rgba(216, 189, 125, 0.10));
        transition: background 0.25s ease, color 0.25s ease;
    }
    .sk-mega-card:hover i {
        background: linear-gradient(135deg, #87494a, #a05556);
        color: #fff;
    }
    .sk-mega-card > span {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1;
    }
    .sk-mega-card strong {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.3;
        color: inherit;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .sk-mega-card em {
        display: block;
        font-size: 11px;
        font-style: normal;
        color: #8b817d;
        line-height: 1.35;
    }
    .sk-mega-card:hover em { color: #9a807a; }

    /* -- Top reads (numbered rows) ---------------------------- */
    .sk-mega-row {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        padding: 8px 4px;
        border-bottom: 1px solid rgba(135, 73, 74, 0.04);
        color: #2d2826;
        text-decoration: none !important;
        transition: padding-left 0.2s ease, color 0.2s ease;
    }
    .sk-mega-row:last-of-type { border-bottom: none; }
    .sk-mega-row:hover { padding-left: 8px; }
    .sk-mega-num {
        flex: 0 0 auto;
        min-width: 18px;
        padding-top: 1px;
        color: #87494a;
        font-family: Georgia, 'Times New Roman', serif;
        font-size: 14px;
        font-weight: 700;
        line-height: 1;
        opacity: 0.55;
    }
    .sk-mega-text {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
        flex: 1;
    }
    .sk-mega-text strong {
        display: block;
        color: #2d2826;
        font-size: 12.5px;
        font-weight: 600;
        line-height: 1.4;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }
    .sk-mega-row:hover .sk-mega-text strong { color: #87494a; }
    .sk-mega-text em {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        color: #9a8f8a;
        font-size: 11px;
        font-weight: 500;
        font-style: normal;
        line-height: 1.3;
    }

    /* -- Scrollbar -------------------------------------------- */
    .sk-mega-panel::-webkit-scrollbar { width: 5px; }
    .sk-mega-panel::-webkit-scrollbar-track { background: transparent; }
    .sk-mega-panel::-webkit-scrollbar-thumb {
        background: rgba(135, 73, 74, 0.18);
        border-radius: 99px;
    }
}

/* =============================================================
   DESKTOP (>=1200px): full three-column flyout
   ============================================================= */
@media (min-width: 1200px) {
    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        width: min(980px, calc(100vw - 280px));
        min-height: 360px;
    }
    .sk-mega-panel .sk-mega-grid {
        grid-template-columns: 0.85fr 1.15fr 1fr;
    }
    .sk-mega-panel .sk-mega-panel__intro { grid-column: auto; }

    .sk-mega-panel__intro {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 26px 22px;
    }
    .sk-mega-panel__intro > span { margin-bottom: 14px; }
    .sk-mega-panel__intro h3 {
        margin: 0 0 10px;
        font-size: 21px;
        line-height: 1.16;
    }
    .sk-mega-panel__intro p {
        display: block;
        margin: 0 0 18px;
        color: rgba(255, 255, 255, 0.62);
        font-size: 12.5px;
        line-height: 1.65;
        max-width: 280px;
    }
    .sk-mega-panel__intro > a { margin-left: 0; }

    .sk-mega-panel__topics,
    .sk-mega-panel__latest {
        border-top: 0;
        border-left: 1px solid rgba(135, 73, 74, 0.05);
        padding: 18px 16px;
    }

    /* 1366px - tighter panel */
    @media (max-width: 1399.98px) {
        .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
            width: min(860px, calc(100vw - 270px));
        }
        .sk-mega-panel__intro { padding: 22px 18px; }
        .sk-mega-panel__intro h3 { font-size: 19px; }
        .sk-mega-panel__intro p { font-size: 11.5px; }
        .sk-mega-panel__topics,
        .sk-mega-panel__latest { padding: 16px 14px; }
    }

    /* 1600px - slightly wider */
    @media (min-width: 1600px) {
        .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
            width: min(1040px, calc(100vw - 285px));
        }
        .sk-mega-panel__intro { padding: 28px 24px; }
        .sk-mega-panel__intro h3 { font-size: 23px; }
        .sk-mega-panel__intro p { font-size: 13px; }
        .sk-mega-panel__topics,
        .sk-mega-panel__latest { padding: 20px 18px; }
        .sk-mega-card strong,
        .sk-mega-text strong { font-size: 13px; }
        .sk-mega-card em,
        .sk-mega-text em { font-size: 11.5px; }
    }
}

/* =============================================================
   MOBILE (<768px): in-drawer stacked block
   ============================================================= */
@media (max-width: 767.98px) {
    .sk-mega-panel {
        display: none;
        position: static;
        width: 100%;
        margin: 6px 0 4px;
        padding: 14px;
        max-height: none !important;
        overflow: visible;
        border: 1px solid rgba(135, 73, 74, 0.10);
        border-radius: 14px;
        background: #fbf9f6;
        box-shadow: 0 14px 34px rgba(53, 34, 30, 0.10);
    }
    .frontend-sidebar__nav > li.dropdown.mega-open > .sk-mega-panel {
        display: block;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none !important;
    }
    .sk-mega-panel .sk-mega-grid {
        margin: 0;
        --bs-gutter-x: 0;
        --bs-gutter-y: 0;
    }
    .sk-mega-panel__intro {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 18px;
        border-radius: 10px;
    }
    .sk-mega-panel__intro > span { white-space: normal; }
    .sk-mega-panel__intro h3 { font-size: 17px; }
    .sk-mega-panel__intro p {
        display: block;
        margin: 0;
        color: rgba(255, 255, 255, 0.62);
        font-size: 12px;
        line-height: 1.6;
    }
    .sk-mega-panel__intro > a { margin-left: 0; }
    .sk-mega-panel__topics,
    .sk-mega-panel__latest {
        padding: 14px 2px;
        border-top: 0;
        border-left: 0;
    }
    .sk-mega-cards > .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* =============================================================
   REDUCED MOTION
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
    .sk-mega-panel,
    .sk-mega-grid > div,
    .sk-mega-card,
    .sk-mega-row,
    .sk-mega-panel__intro > a {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}


/* =============================================================
   DARK MODE — Mega menu overrides
   ============================================================= */
:root[data-theme="dark"] body.index-page .sk-mega-panel {
    background: #1a1716 !important;
    border-color: rgba(216, 189, 125, 0.07) !important;
    box-shadow:
        0 28px 80px -12px rgba(0, 0, 0, 0.55),
        0 8px 28px -8px rgba(0, 0, 0, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

:root[data-theme="dark"] .sk-mega-panel__intro {
    background:
        radial-gradient(ellipse at 12% 18%, rgba(216, 189, 125, 0.10), transparent 48%),
        radial-gradient(ellipse at 88% 82%, rgba(135, 73, 74, 0.14), transparent 55%),
        linear-gradient(148deg, #5a3536 0%, #422827 38%, #2a2120 68%, #1e1a18 100%);
}

:root[data-theme="dark"] .sk-mega-panel__intro > span {
    background: rgba(216, 189, 125, 0.07);
    border-color: rgba(216, 189, 125, 0.14);
    color: #d8bd7d;
}

:root[data-theme="dark"] .sk-mega-panel__intro h3 { color: #f5efe7; }
:root[data-theme="dark"] .sk-mega-panel__intro p { color: rgba(245, 239, 231, 0.55); }

:root[data-theme="dark"] .sk-mega-panel__intro > a {
    background: rgba(216, 189, 125, 0.05);
    border-color: rgba(216, 189, 125, 0.18);
    color: #f5efe7;
}
:root[data-theme="dark"] .sk-mega-panel__intro > a:hover {
    background: rgba(216, 189, 125, 0.10);
    border-color: rgba(216, 189, 125, 0.32);
}

:root[data-theme="dark"] .sk-mega-panel__topics,
:root[data-theme="dark"] .sk-mega-panel__latest { border-left-color: rgba(216, 189, 125, 0.05); }

:root[data-theme="dark"] .sk-mega-panel__topics > small,
:root[data-theme="dark"] .sk-mega-panel__latest > small { color: #c1a974; }

:root[data-theme="dark"] .sk-mega-panel__topics > a {
    background: rgba(255, 255, 255, 0.015);
    color: #cfc9bd;
}
:root[data-theme="dark"] .sk-mega-panel__topics > a:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(216, 189, 125, 0.14);
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.35);
    color: #d8bd7d;
}

:root[data-theme="dark"] .sk-mega-panel__topics > a i {
    background: linear-gradient(135deg, rgba(135, 73, 74, 0.14), rgba(216, 189, 125, 0.08));
    color: #c1a974;
}
:root[data-theme="dark"] .sk-mega-panel__topics > a:hover i {
    background: linear-gradient(135deg, #6b3a3b, #87494a);
    color: #f5efe7;
}

:root[data-theme="dark"] .sk-mega-panel__topics > a em { color: #8d8a80; }
:root[data-theme="dark"] .sk-mega-panel__topics > a:hover em { color: #b0a595; }

:root[data-theme="dark"] .sk-mega-panel__latest { background: rgba(255, 255, 255, 0.008); }
:root[data-theme="dark"] .sk-mega-panel__latest > a {
    border-bottom-color: rgba(216, 189, 125, 0.04);
    color: #cfc9bd;
}
:root[data-theme="dark"] .sk-mega-panel__latest > a > .sk-mega-num { color: #c1a974; opacity: 0.65; }
:root[data-theme="dark"] .sk-mega-panel__latest > a > .sk-mega-text strong { color: #cfc9bd; }
:root[data-theme="dark"] .sk-mega-panel__latest > a:hover > .sk-mega-text strong,
:root[data-theme="dark"] .sk-mega-panel__latest > a:hover { color: #d8bd7d; }
:root[data-theme="dark"] .sk-mega-panel__latest > a > .sk-mega-text em { color: #8d8a80; }

:root[data-theme="dark"] .sk-mega-panel::-webkit-scrollbar-thumb {
    background: rgba(216, 189, 125, 0.22);
}

/* =============================================================
   DARK MODE - mega menu v4 addendum
   (category cards, column headings and dividers restyled for the
   v4 Bootstrap-grid rebuild)
   ============================================================= */
:root[data-theme="dark"] .sk-mega-panel__topics,
:root[data-theme="dark"] .sk-mega-panel__latest { border-top-color: rgba(216, 189, 125, 0.05); }

:root[data-theme="dark"] .sk-mega-panel__head small { color: #c1a974; }

:root[data-theme="dark"] .sk-mega-panel__headlink { color: #c1a974; }
:root[data-theme="dark"] .sk-mega-panel__headlink:hover { color: #d8bd7d; }

:root[data-theme="dark"] .sk-mega-card {
    background: rgba(255, 255, 255, 0.015);
    color: #cfc9bd;
}
:root[data-theme="dark"] .sk-mega-card:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(216, 189, 125, 0.14);
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.35);
    color: #d8bd7d;
}
:root[data-theme="dark"] .sk-mega-card i {
    background: linear-gradient(135deg, rgba(135, 73, 74, 0.14), rgba(216, 189, 125, 0.08));
    color: #c1a974;
}
:root[data-theme="dark"] .sk-mega-card:hover i {
    background: linear-gradient(135deg, #6b3a3b, #87494a);
    color: #f5efe7;
}
:root[data-theme="dark"] .sk-mega-card em { color: #8d8a80; }
:root[data-theme="dark"] .sk-mega-card:hover em { color: #b0a595; }

/* =============================================================
   MEGA MENU v5 -- GRID INTEGRITY + LAUNCH POLISH
   Bootstrap's .col-* widths must not survive once the row becomes
   CSS Grid. Leaving them in place shrinks every section inside its
   assigned track and causes the large gaps/overlapping text seen in
   the desktop flyout.
   ============================================================= */
@media (min-width: 768px) {
    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        width: min(960px, calc(100vw - 282px)) !important;
        min-height: 0 !important;
        height: auto !important;
        max-height: calc(100vh - 32px);
        border-radius: 18px !important;
    }

    .sk-mega-panel .sk-mega-grid {
        width: 100%;
        height: auto;
        min-height: 360px;
        align-items: stretch;
    }

    .sk-mega-panel .sk-mega-grid > .sk-mega-panel__intro,
    .sk-mega-panel .sk-mega-grid > .sk-mega-panel__topics,
    .sk-mega-panel .sk-mega-grid > .sk-mega-panel__latest {
        width: auto !important;
        max-width: none !important;
        min-width: 0;
        margin: 0;
        flex: none;
    }

    .sk-mega-panel__intro { border-radius: 17px 0 0 17px; }
    .sk-mega-panel__topics,
    .sk-mega-panel__latest { overflow: hidden; }

    .sk-mega-card strong,
    .sk-mega-card em,
    .sk-mega-text strong,
    .sk-mega-text em {
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .sk-mega-text strong,
    .sk-mega-text em { white-space: nowrap; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        width: min(740px, calc(100vw - 278px)) !important;
    }
    .sk-mega-panel .sk-mega-grid { min-height: 0; }
    .sk-mega-panel__intro { border-radius: 17px 17px 0 0; }
}

@media (min-width: 1400px) {
    .frontend-sidebar__nav > li.dropdown > .sk-mega-panel {
        width: min(1020px, calc(100vw - 282px)) !important;
    }
}

/* =============================================================
   LEGAL PILLAR PAGES v2 — Bootstrap 5 editorial/conversion system
   ============================================================= */
.sk-legal-topic-page .sk-reading-title { padding-block:clamp(72px,9vw,118px) 56px; }
.sk-legal-hero-meta .badge {
    display:inline-flex;align-items:center;gap:7px;padding:8px 12px;
    border:1px solid rgba(255,255,255,.18);color:#f7efe8;
    background:rgba(255,255,255,.08);font:700 10px/1.2 'Nunito',sans-serif;
    letter-spacing:.35px;backdrop-filter:blur(8px);
}
.sk-legal-topic-page .sk-article-header > h2 {
    margin:0 0 20px;color:#211c1b;font-family:Georgia,'Times New Roman',serif;
    font-size:clamp(1.65rem,3vw,2.35rem);line-height:1.18;letter-spacing:-.6px;
}
.sk-legal-toc { margin:0 0 30px;background:linear-gradient(145deg,#fbf8f4,#f3ece6);border-radius:16px !important; }
.sk-legal-toc .card-body { padding:18px 20px; }
.sk-legal-label { color:#87494a;font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase; }
.sk-legal-toc a { display:flex;align-items:center;color:#514744;text-decoration:none;font-size:12px;font-weight:800; }
.sk-legal-toc a i { color:#87494a;font-size:17px;transition:transform .2s ease; }
.sk-legal-toc a:hover { color:#87494a; }
.sk-legal-toc a:hover i { transform:translateX(3px); }
.sk-legal-topic-page .sk-info-grid.row { display:flex;grid-template-columns:none; }
.sk-legal-topic-page .sk-info-grid.row > div > div {
    height:100%;padding:20px;border:1px solid rgba(135,73,74,.10);border-radius:15px;
    background:#fff;box-shadow:0 8px 25px rgba(50,33,29,.045);
}
.sk-legal-process .card { position:relative;overflow:hidden;border-radius:16px;background:#fbf8f4;box-shadow:0 7px 22px rgba(55,36,30,.05); }
.sk-legal-process .card-body { padding:22px; }
.sk-legal-process .card-body > i { display:grid;place-items:center;width:40px;height:40px;margin-bottom:14px;border-radius:11px;color:#fff;background:#87494a;font-size:17px; }
.sk-legal-process h3 { margin:0 0 8px;color:#211c1b;font-size:15px;font-weight:900; }
.sk-legal-process p { color:#6b605b;font-size:12.5px;line-height:1.65; }
.sk-step-number { position:absolute;right:16px;top:12px;color:rgba(135,73,74,.10);font-size:34px;font-weight:900;letter-spacing:-2px; }
.sk-evidence-list { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.sk-evidence-list > div { display:flex;align-items:flex-start;gap:10px;padding:14px;border:1px solid #eee5df;border-radius:12px;background:#fff; }
.sk-evidence-list i { flex:0 0 auto;color:#54805d;font-size:16px; }
.sk-evidence-list span { color:#514744;font-size:12px;line-height:1.55; }
.sk-legal-faq { overflow:hidden;border:1px solid #eadfd8;border-radius:16px; }
.sk-legal-faq .accordion-item { border-color:#eadfd8; }
.sk-legal-faq .accordion-button { padding:17px 20px;color:#342d2b;background:#fff;font-size:13px;font-weight:900;box-shadow:none; }
.sk-legal-faq .accordion-button:not(.collapsed) { color:#713738;background:#f8f1ed; }
.sk-legal-faq .accordion-button:focus { box-shadow:inset 0 0 0 2px rgba(135,73,74,.25); }
.sk-legal-faq .accordion-body { padding:2px 20px 18px;color:#655a56;font-size:12.5px;line-height:1.75;background:#fdfbf9; }
.sk-legal-sources { margin-top:38px;padding:24px;border:1px solid #e8ddd6;border-radius:17px;background:#fbf8f4; }
.sk-legal-sources h2 { margin:6px 0 14px !important;font-size:21px !important; }
.sk-legal-sources > a { display:flex;align-items:center;gap:12px;padding:13px 14px;border-radius:12px;color:#342d2b;background:#fff;text-decoration:none;box-shadow:0 4px 16px rgba(55,36,30,.045); }
.sk-legal-sources > a > i:first-child { color:#87494a;font-size:18px; }
.sk-legal-sources > a > i:last-child { margin-left:auto;color:#9c7774; }
.sk-legal-sources a span { display:flex;flex-direction:column;gap:2px; }
.sk-legal-sources a strong { font-size:12px; }
.sk-legal-sources a small { color:#8a7c76;font-size:9px; }
.sk-legal-cta { margin-top:38px;border-radius:19px !important;color:#fff;background:linear-gradient(135deg,#87494a,#633334);box-shadow:0 20px 44px rgba(100,48,49,.22); }
.sk-legal-cta .card-body { padding:28px; }
.sk-legal-cta span { color:#d8bd7d;font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase; }
.sk-legal-cta h2 { margin:6px 0 8px !important;color:#fff !important;font-size:21px !important; }
.sk-legal-cta p { margin:0;color:rgba(255,255,255,.72);font-size:12.5px; }
.sk-legal-cta .btn { min-width:180px;padding:10px 15px;border-radius:10px;font-size:11px;font-weight:900; }
@media(max-width:767.98px){
    .sk-evidence-list { grid-template-columns:1fr; }
    .sk-legal-topic-page .sk-article-content { padding-inline:16px; }
    .sk-legal-cta .card-body { padding:22px 18px; }
}

/* =============================================================
   LEGAL GUIDE v2 — full-width Child Custody design language
   ============================================================= */
.sk-legal-guide { overflow:hidden;background:#fff;color:#4e4643; }
.sk-legal-guide .section { padding:88px 0; }
.sk-guide-hero {
    position:relative;min-height:650px;padding:130px 0 90px;
    background:linear-gradient(90deg,rgba(27,23,22,.94) 0%,rgba(42,30,29,.88) 48%,rgba(75,38,39,.48) 100%),var(--sk-guide-image) center/cover no-repeat;
}
.sk-guide-hero::after { content:"";position:absolute;inset:auto 0 0;height:120px;background:linear-gradient(transparent,rgba(20,16,15,.28));pointer-events:none; }
.sk-guide-hero .container { z-index:1; }
.sk-guide-eyebrow,.sk-guide-section-kicker { display:inline-flex;align-items:center;gap:8px;color:#87494a;font-size:11px;font-weight:900;letter-spacing:1.8px;text-transform:uppercase; }
.sk-guide-eyebrow { padding:8px 14px;border:1px solid rgba(255,255,255,.22);border-radius:999px;color:#ead49c;background:rgba(135,73,74,.38);backdrop-filter:blur(10px); }
.sk-guide-hero h1 { max-width:900px;color:#fff;font-family:Georgia,serif;font-size:clamp(42px,6vw,74px);line-height:1.05;letter-spacing:-2px; }
.sk-guide-hero .lead { max-width:760px;color:rgba(255,255,255,.78);font-size:18px;line-height:1.7; }
.sk-guide-hero .btn { border-radius:10px;font-size:13px;font-weight:800; }
.sk-guide-hero .btn-primary { border-color:#87494a;background:#87494a; }
.sk-guide-hero .btn-primary:hover { border-color:#a55f60;background:#a55f60;transform:translateY(-2px); }
.sk-guide-breadcrumb .breadcrumb-item,.sk-guide-breadcrumb .breadcrumb-item a { color:rgba(255,255,255,.7);font-size:11px;text-decoration:none; }
.sk-guide-breadcrumb .breadcrumb-item.active { color:#ead49c; }
.sk-guide-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color:rgba(255,255,255,.4); }
.sk-guide-meta span { display:inline-flex;align-items:center;gap:7px;color:rgba(255,255,255,.68);font-size:11px;font-weight:700; }
.sk-guide-meta i { color:#d8bd7d; }
.sk-guide-jump { top:0;z-index:100;padding:12px 0;border-bottom:1px solid rgba(135,73,74,.12);background:rgba(255,253,250,.94);box-shadow:0 8px 24px rgba(35,25,23,.06);backdrop-filter:blur(16px); }
.sk-guide-jump .container { scrollbar-width:none; }
.sk-guide-jump span { color:#372f2d;font-size:11px; }
.sk-guide-jump a { flex-shrink:0;padding:7px 13px;border-radius:999px;color:#665b57;background:#f5efeb;font-size:10px;font-weight:800;text-decoration:none;transition:.2s ease; }
.sk-guide-jump a:hover { color:#fff;background:#87494a; }
.sk-guide-soft { background:#f8f5f1; }
.sk-guide-feature-img { width:100%;height:470px;object-fit:cover; }
.sk-guide-overview h2,.sk-guide-heading h2 { color:#282220;font-family:Georgia,serif;letter-spacing:-.5px; }
.sk-guide-overview .lead { color:#645a56;font-size:16px;line-height:1.8; }
.sk-guide-alert { padding:20px;border:0;border-left:4px solid #87494a;border-radius:12px;color:#564c48;background:#f6efeb; }
.sk-guide-alert > i { color:#87494a; }
.sk-guide-alert h3 { margin:0 0 5px;color:#332b29;font-size:15px;font-weight:900; }
.sk-guide-alert p { font-size:13px;line-height:1.65; }
.sk-guide-heading { max-width:720px; }
.sk-guide-heading h2 { margin:8px 0 12px;font-size:clamp(32px,4vw,48px); }
.sk-guide-heading > p { color:#796e69;font-size:14px;line-height:1.7; }
.sk-guide-card { position:relative;overflow:hidden;border-radius:16px !important;background:#fff;box-shadow:0 10px 35px rgba(52,35,31,.06);transition:transform .3s ease,box-shadow .3s ease; }
.sk-guide-card::after { content:"";position:absolute;left:0;bottom:0;width:100%;height:3px;background:linear-gradient(90deg,#87494a,#d8bd7d);transform:scaleX(0);transform-origin:left;transition:transform .3s ease; }
.sk-guide-card:hover { transform:translateY(-7px);box-shadow:0 20px 45px rgba(90,49,46,.12); }
.sk-guide-card:hover::after { transform:scaleX(1); }
.sk-guide-icon { display:grid;place-items:center;width:54px;height:54px;margin-bottom:22px;border-radius:14px;color:#87494a;background:#f3e8e4;font-size:23px; }
.sk-guide-number { position:absolute;right:20px;top:15px;color:rgba(135,73,74,.09);font-size:34px;font-weight:900; }
.sk-guide-card p { color:#625854;font-size:13.5px;line-height:1.7; }
.sk-guide-strategy,.sk-guide-cta { background:radial-gradient(circle at 80% 20%,rgba(216,189,125,.18),transparent 34%),linear-gradient(135deg,#2b2422,#603637 72%,#87494a); }
.sk-guide-strategy-icon { display:grid;place-items:center;width:130px;height:130px;border:1px solid rgba(255,255,255,.16);border-radius:50%;color:#d8bd7d;background:rgba(255,255,255,.06);font-size:50px; }
.text-white-75 { color:rgba(255,255,255,.75)!important; }
.sk-guide-timeline { position:relative;max-width:920px;margin:auto; }
.sk-guide-timeline::before { content:"";position:absolute;left:27px;top:12px;bottom:12px;width:2px;background:linear-gradient(#87494a,#d8bd7d); }
.sk-guide-step { position:relative;display:grid;grid-template-columns:56px 1fr;gap:24px;margin-bottom:22px; }
.sk-guide-step-marker { z-index:1;display:grid;place-items:center;width:56px;height:56px;border:5px solid #fff;border-radius:50%;color:#fff;background:#87494a;box-shadow:0 5px 18px rgba(135,73,74,.25);font-weight:900; }
.sk-guide-step .card { border-radius:15px !important;background:#fff;transition:transform .25s ease; }
.sk-guide-step .card:hover { transform:translateX(7px); }
.sk-guide-step h3 { margin:0 0 7px;color:#332b29;font-size:17px;font-weight:900; }
.sk-guide-step p { color:#6d625e;font-size:13px;line-height:1.65; }
.sk-guide-step .bi { color:#87494a; }
.sk-guide-check { display:flex;align-items:flex-start;gap:12px;padding:17px;border:1px solid rgba(135,73,74,.10);border-radius:13px;background:#fff;box-shadow:0 7px 22px rgba(47,31,28,.04); }
.sk-guide-check i { flex:0 0 auto;color:#56825e;font-size:18px; }
.sk-guide-check span { color:#554b47;font-size:13px;line-height:1.55; }
.sk-guide-cases .card { border-radius:16px!important;background:#fcfaf8; }
.sk-guide-cases h3 { color:#332b29;font-size:18px;font-weight:900; }
.sk-guide-faq .accordion { overflow:hidden;border:1px solid #eadfd9;border-radius:16px; }
.sk-guide-faq .accordion-button { padding:20px 22px;color:#332b29;background:#fff;font-size:14px;font-weight:900;box-shadow:none; }
.sk-guide-faq .accordion-button:not(.collapsed) { color:#713738;background:#f8f0ec; }
.sk-guide-faq .accordion-body { padding:0 22px 22px;color:#665b57;background:#fdfbf9;font-size:13px;line-height:1.75; }
.sk-guide-source { border:1px solid rgba(135,73,74,.12);border-radius:14px!important;color:#433936;background:#fff;box-shadow:0 7px 24px rgba(48,31,28,.045);transition:.25s ease; }
.sk-guide-source:hover { color:#713738;border-color:rgba(135,73,74,.3);transform:translateY(-4px); }
.sk-guide-source small { color:#897c76; }
.sk-guide-cta span { color:#d8bd7d;font-size:10px;font-weight:900;letter-spacing:1.6px;text-transform:uppercase; }
.sk-guide-cta p { color:rgba(255,255,255,.72); }
.sk-guide-cta .btn { min-width:180px;border-radius:10px;font-size:12px;font-weight:900; }

/* Chat compact geometry — single final override */
#sk-chat-panel.sk-chat__panel { height:min(610px,calc(100dvh - 150px));max-height:610px; }
#sk-chat-panel .sk-chat__head { min-height:52px;padding:7px 11px; }
#sk-chat-panel .sk-chat__avatar { width:34px;height:34px;flex-basis:34px;border-radius:10px; }
#sk-chat-panel .sk-chat__body { padding:10px 12px 4px; }
#sk-chat-panel .sk-chat__welcome { padding:11px 12px;border-radius:14px; }
#sk-chat-panel .sk-chat__welcome h3 { font-size:16px!important;margin-bottom:3px!important; }
#sk-chat-panel .sk-chat__welcome p { margin-top:3px!important;font-size:10.5px!important;line-height:1.4!important; }
#sk-chat-panel .sk-chat__trust span { padding:5px 7px;font-size:8.5px; }
#sk-chat-panel .sk-chat__prompts { gap:6px!important;margin-top:7px!important; }
#sk-chat-panel .sk-chat__prompts button { min-height:38px;padding:5px 8px!important; }
#sk-chat-panel .sk-chat__form { padding:6px 11px 7px; }
#sk-chat-panel .sk-ai-composer { min-height:42px;padding:3px 4px 3px 11px;border-radius:14px; }
#sk-chat-panel .sk-ai-composer textarea { padding:6px 0!important;min-height:22px!important; }
#sk-chat-panel .sk-chat__composer-hint { margin-top:3px; }

@media(max-width:767.98px){
    .sk-legal-guide .section { padding:62px 0; }
    .sk-guide-hero { min-height:600px;padding:105px 0 70px;background-position:62% center; }
    .sk-guide-hero h1 { font-size:42px;letter-spacing:-1px; }
    .sk-guide-feature-img { height:340px; }
    .sk-guide-strategy-icon { width:90px;height:90px;font-size:36px; }
    .sk-guide-jump { top:0; }
}
@media(max-width:575.98px){
    #sk-chat-panel.sk-chat__panel { height:100dvh;max-height:none; }
    #sk-chat-panel .sk-chat__head { min-height:48px;padding-top:max(7px,env(safe-area-inset-top)); }
    #sk-chat-panel .sk-chat__body { padding:8px 10px 3px; }
    #sk-chat-panel .sk-chat__welcome { padding:9px 10px; }
    #sk-chat-panel .sk-chat__trust { display:none; }
    #sk-chat-panel .sk-chat__prompts { grid-template-columns:1fr 1fr; }
    #sk-chat-panel .sk-chat__form { padding:5px 10px max(6px,env(safe-area-inset-bottom)); }
}

/* =============================================================
   LEGAL EDITORIAL v3 — restrained professional practice system
   ============================================================= */
.sk-legal-guide { --legal-navy:#182943;--legal-ink:#1f1e1d;--legal-paper:#faf7f0;--legal-rule:#ded7cb; }
.sk-legal-guide .section { padding:76px 0; }
.sk-guide-hero {
    min-height:620px;padding:92px 0 72px;color:var(--legal-ink);
    background:
      radial-gradient(circle at 82% 72%,rgba(75,130,115,.09),transparent 24%),
      radial-gradient(circle at 18% 60%,rgba(219,173,68,.08),transparent 28%),
      linear-gradient(110deg,#fbf7ed 0%,#f8f5ed 58%,#f3f4ee 100%);
}
.sk-guide-hero::before { content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;background-image:radial-gradient(#9f917b .55px,transparent .55px);background-size:9px 9px; }
.sk-guide-hero::after { display:none; }
.sk-guide-breadcrumb .breadcrumb-item,.sk-guide-breadcrumb .breadcrumb-item a { color:#657087;font-size:11px;font-weight:700; }
.sk-guide-breadcrumb .breadcrumb-item.active { color:#87494a; }
.sk-guide-breadcrumb .breadcrumb-item+.breadcrumb-item::before { color:#9a9286; }
.sk-guide-eyebrow { padding:0;border:0;border-radius:0;color:#a3483e;background:transparent;backdrop-filter:none;font-size:10px;letter-spacing:1.7px; }
.sk-guide-eyebrow::before { content:"";width:22px;height:2px;background:#c65b43; }
.sk-guide-hero h1 { margin-top:24px!important;color:var(--legal-ink);font-family:'Nunito',sans-serif;font-size:clamp(50px,5.5vw,78px);font-weight:900!important;line-height:1.06;letter-spacing:-3px; }
.sk-guide-hero h1 span { color:#9c3040;text-decoration:underline;text-decoration-color:#efbc42;text-decoration-thickness:8px;text-underline-offset:10px; }
.sk-guide-hero .lead { max-width:720px;color:#647087;font-size:16px;line-height:1.7; }
.sk-guide-hero .btn { min-height:54px;padding:0 22px!important;display:inline-flex;align-items:center;justify-content:center;border-radius:9px;font-size:12px; }
.sk-guide-hero .btn-dark { border-color:var(--legal-navy);background:var(--legal-navy); }
.sk-guide-hero .btn-dark:hover { border-color:#263b5c;background:#263b5c;transform:translateY(-2px); }
.sk-guide-hero .btn-outline-dark { color:var(--legal-navy);border-color:#d8d0c4;background:rgba(255,255,255,.65); }
.sk-guide-meta { padding-top:5px; }
.sk-guide-meta span { color:#59677e;font-size:10.5px; }
.sk-guide-meta i { color:#168f82; }
.sk-guide-orbit { position:relative;width:430px;height:430px;margin-left:auto; }
.sk-guide-orbit__ring { position:absolute;inset:40px;border:1px dashed #b7bec5;border-radius:50%; }
.sk-guide-orbit__ring.ring-2 { inset:94px; }
.sk-guide-orbit__core { position:absolute;inset:130px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:50%;color:#fff;text-align:center;background:var(--legal-navy);box-shadow:0 24px 50px rgba(24,41,67,.18); }
.sk-guide-orbit__core small { max-width:110px;color:#bac4d2;font-size:10px;font-weight:800;line-height:1.3; }
.sk-guide-orbit__core strong { margin-top:7px;font-size:22px;line-height:1.15; }
.sk-guide-orbit__tag { position:absolute;z-index:2;max-width:150px;padding:10px 15px;border:1px solid #ddd8ce;border-radius:999px;color:#26344b;background:#fff;font-size:10px;font-weight:900;line-height:1.25;box-shadow:0 8px 25px rgba(40,45,51,.07); }
.sk-guide-orbit__tag.tag-0 { top:28px;left:170px; }.sk-guide-orbit__tag.tag-1 { top:104px;right:-5px; }.sk-guide-orbit__tag.tag-2 { right:8px;bottom:74px; }.sk-guide-orbit__tag.tag-3 { left:150px;bottom:17px; }.sk-guide-orbit__tag.tag-4 { left:-7px;bottom:92px; }
.sk-guide-jump { padding:9px 0;border-color:#e8e2d8;background:rgba(253,251,247,.96);box-shadow:none; }
.sk-guide-jump a { padding:8px 14px;color:#596274;background:#f1ede7;font-size:9px; }
.sk-guide-jump a:hover { background:var(--legal-navy); }
.sk-guide-overview { border-bottom:1px solid #ede8df; }
.sk-guide-overview .row { align-items:stretch!important; }
.sk-guide-index { height:100%;min-height:280px;padding:34px;border:1px solid var(--legal-rule);border-radius:4px;background:var(--legal-paper); }
.sk-guide-index > span { display:block;color:#9c3040;font-family:Georgia,serif;font-size:62px;line-height:1; }
.sk-guide-index strong { display:block;margin:22px 0 12px;color:var(--legal-navy);font-size:16px;text-transform:uppercase;letter-spacing:1px; }
.sk-guide-index p { color:#687387;font-size:12px;line-height:1.7; }
.sk-guide-overview h2,.sk-guide-heading h2 { color:var(--legal-ink);font-family:'Nunito',sans-serif;font-weight:900;letter-spacing:-1.5px; }
.sk-guide-overview h2 { font-size:clamp(36px,4vw,52px);line-height:1.1; }
.sk-guide-section-kicker { color:#a3483e;font-size:9px;letter-spacing:1.8px; }
.sk-guide-alert { border-left:3px solid #168f82;border-radius:0;color:#4d596c;background:#f3f5f1; }
.sk-guide-alert > i { color:#168f82; }
.sk-guide-soft { background:#f8f6f1; }
.sk-guide-heading h2 { font-size:clamp(34px,4vw,46px); }
.sk-guide-card { border:1px solid #e3ddd4!important;border-radius:4px!important;box-shadow:none; }
.sk-guide-card:hover { transform:translateY(-3px);box-shadow:0 14px 30px rgba(43,38,33,.06); }
.sk-guide-card::after { height:2px;background:#9c3040; }
.sk-guide-icon { width:46px;height:46px;border-radius:50%;color:#9c3040;background:#f7edef;font-size:19px; }
.sk-guide-number { color:rgba(24,41,67,.08);font-family:Georgia,serif; }
.sk-guide-strategy { background:var(--legal-navy); }
.sk-guide-strategy-icon { width:112px;height:112px;border-color:rgba(255,255,255,.18);color:#efbc42; }
.sk-guide-timeline::before { background:#c7beb1; }
.sk-guide-step-marker { border-color:#fff;color:#fff;background:var(--legal-navy);box-shadow:none; }
.sk-guide-step .card { border:1px solid #e4ded5!important;border-radius:4px!important;box-shadow:none!important; }
.sk-guide-step .card:hover { transform:translateX(3px); }
.sk-guide-step .bi { color:#9c3040; }
.sk-guide-check { border-color:#dfd9cf;border-radius:4px;box-shadow:none; }
.sk-guide-check i { color:#168f82; }
.sk-guide-cases .card { border:1px solid #e1dbd2!important;border-radius:4px!important;box-shadow:none!important; }
.sk-guide-cases .text-primary { color:#9c3040!important; }
.sk-guide-faq .accordion { border-radius:4px; }
.sk-guide-faq .accordion-button:not(.collapsed) { color:var(--legal-navy);background:#f5f1ea; }
.sk-guide-source { border-radius:4px!important;box-shadow:none; }
.sk-guide-cta { background:linear-gradient(115deg,var(--legal-navy),#263c5d); }

@media(max-width:991.98px){
    .sk-guide-hero { min-height:auto;padding:86px 0 64px; }
    .sk-guide-index { min-height:auto; }
}
@media(max-width:575.98px){
    .sk-legal-guide .section { padding:48px 0; }
    .sk-guide-hero { min-height:auto;padding:64px 0 46px;background:linear-gradient(135deg,#fbf7ed,#f2f3ec); }
    .sk-guide-hero h1 { margin-top:18px!important;font-size:42px;line-height:1.08;letter-spacing:-1.8px; }
    .sk-guide-hero h1 span { text-decoration-thickness:5px;text-underline-offset:6px; }
    .sk-guide-hero .lead { font-size:14px; }
    .sk-guide-hero .btn { width:100%;min-height:48px; }
    .sk-guide-meta { gap:10px!important; }
    .sk-guide-jump a { padding:7px 12px; }
    .sk-guide-overview h2 { font-size:34px; }
    .sk-guide-index { padding:24px; }
    .sk-guide-index > span { font-size:46px; }
    .sk-guide-timeline::before { left:20px; }
    .sk-guide-step { grid-template-columns:42px 1fr;gap:13px; }
    .sk-guide-step-marker { width:42px;height:42px;border-width:4px; }
}


/* =============================================================
   MEDIA PLAYER MODAL + APPEARANCE GALLERY — 2026-08-11
   Palette preserved: burgundy #87494a / gold #d8bd7d /
   charcoal #141110 / ivory #fdfbf8
   ============================================================= */

/* ---- Modal ------------------------------------------------- */
body.sk-vmodal-open { overflow: hidden; }

.sk-vmodal {
    position: fixed;
    inset: 0;
    z-index: 20000;              /* above the chat launcher, which already sits high */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity .2s ease;
}
.sk-vmodal.is-open { opacity: 1; }
.sk-vmodal[hidden] { display: none; }

.sk-vmodal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 11, .82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.sk-vmodal__dialog {
    position: relative;
    width: min(1040px, 100%);
    max-height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #16130f;
    border: 1px solid rgba(216, 189, 125, .22);
    border-radius: 18px;
    box-shadow: 0 32px 90px rgba(0, 0, 0, .55);
    transform: translateY(14px) scale(.985);
    transition: transform .24s cubic-bezier(.2, .8, .25, 1);
}
.sk-vmodal.is-open .sk-vmodal__dialog { transform: none; }

.sk-vmodal__head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 15px 18px 13px;
    border-bottom: 1px solid rgba(216, 189, 125, .16);
    background: linear-gradient(135deg, #925052 0%, #713738 100%);
}
.sk-vmodal__heading { min-width: 0; flex: 1; }
.sk-vmodal__outlet {
    display: block;
    color: #e6cf9b;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.sk-vmodal__title {
    margin: 3px 0 0;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    /* Long YouTube titles must not push the close button off the dialog. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sk-vmodal__close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 15px;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 9px;
    cursor: pointer;
    transition: background .18s ease, transform .18s ease;
}
.sk-vmodal__close:hover { background: rgba(255, 255, 255, .22); transform: rotate(90deg); }
.sk-vmodal__close:focus-visible { outline: 2px solid #d8bd7d; outline-offset: 2px; }

.sk-vmodal__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.sk-vmodal__stage iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.sk-vmodal__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px 14px;
    border-top: 1px solid rgba(255, 255, 255, .07);
}
.sk-vmodal__summary {
    margin: 0;
    color: #b8b0a6;
    font-size: 12.5px;
    line-height: 1.5;
}
.sk-vmodal__external {
    flex: 0 0 auto;
    color: #d8bd7d;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.sk-vmodal__external:hover { color: #efd9a6; text-decoration: underline; }

@media (max-width: 575.98px) {
    .sk-vmodal { padding: 0; }
    .sk-vmodal__dialog { width: 100%; max-height: 100vh; border-radius: 0; border: 0; }
    .sk-vmodal__title { font-size: 14px; }
    .sk-vmodal__foot { flex-direction: column; align-items: flex-start; gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
    .sk-vmodal, .sk-vmodal__dialog, .sk-vmodal__close { transition: none; }
}

/* ---- Gallery page ------------------------------------------ */
.sk-media-gallery { padding: 34px 0 64px; }

.sk-media-gallery__crumbs { margin-bottom: 18px; color: #8a8279; font-size: 12px; }
.sk-media-gallery__crumbs a { color: #87494a; text-decoration: none; font-weight: 600; }
.sk-media-gallery__crumbs a:hover { text-decoration: underline; }
.sk-media-gallery__crumbs span { margin: 0 7px; }

.sk-media-gallery__head { max-width: 780px; margin-bottom: 24px; }
.sk-media-gallery__kicker {
    display: inline-block;
    color: #87494a;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.sk-media-gallery__title { margin: 8px 0 10px; font-size: clamp(26px, 4vw, 38px); font-weight: 800; }
.sk-media-gallery__lede { margin: 0; color: #6d6459; font-size: 15px; line-height: 1.65; }
.sk-media-gallery__count { margin: 10px 0 0; color: #8a8279; font-size: 13px; }

.sk-media-gallery__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.sk-media-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    color: #4a423a;
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
    background: #fff;
    border: 1px solid rgba(135, 73, 74, .16);
    border-radius: 999px;
    transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.sk-media-chip:hover { border-color: rgba(135, 73, 74, .42); color: #87494a; }
.sk-media-chip.is-active { background: #87494a; border-color: #87494a; color: #fff; }
.sk-media-chip__count {
    padding: 1px 7px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(135, 73, 74, .10);
    border-radius: 999px;
}
.sk-media-chip.is-active .sk-media-chip__count { background: rgba(255, 255, 255, .22); }

.sk-media-gallery__meta { margin: 0 0 16px; color: #8a8279; font-size: 12.5px; }

.sk-media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
    gap: 20px;
    margin-bottom: 34px;
}

.sk-media-card {
    background: #fff;
    border: 1px solid rgba(135, 73, 74, .12);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sk-media-card:hover {
    transform: translateY(-3px);
    border-color: rgba(135, 73, 74, .3);
    box-shadow: 0 14px 34px rgba(20, 17, 16, .12);
}
.sk-media-card__link { display: block; color: inherit; text-decoration: none; }
.sk-media-card__link:focus-visible { outline: 2px solid #87494a; outline-offset: 3px; }

.sk-media-card__thumb {
    position: relative;
    aspect-ratio: 16 / 9;
    background: #ece7e0;
    overflow: hidden;
}
.sk-media-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .35s ease;
}
.sk-media-card:hover .sk-media-card__thumb img { transform: scale(1.045); }
.sk-media-card__noimg {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b9ada0;
    font-size: 28px;
}
.sk-media-card__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 24px;
    background: rgba(135, 73, 74, .92);
    border-radius: 50%;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .3);
    transition: transform .2s ease, background .2s ease;
}
.sk-media-card:hover .sk-media-card__play { transform: translate(-50%, -50%) scale(1.09); background: #87494a; }
.sk-media-card__type {
    position: absolute;
    left: 10px;
    top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 9px;
    color: #fff;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: rgba(20, 17, 16, .74);
    border-radius: 6px;
    backdrop-filter: blur(4px);
}

.sk-media-card__body { padding: 13px 15px 16px; }
.sk-media-card__outlet {
    display: block;
    color: #87494a;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.sk-media-card__title {
    margin: 6px 0 0;
    font-size: 14.5px;
    font-weight: 700;
    line-height: 1.42;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sk-media-card__date { display: block; margin-top: 8px; color: #978f85; font-size: 11.5px; }

.sk-media-gallery__empty { padding: 54px 20px; text-align: center; }
.sk-media-gallery__empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 74px;
    height: 74px;
    margin-bottom: 16px;
    color: #87494a;
    font-size: 30px;
    background: rgba(135, 73, 74, .08);
    border-radius: 50%;
}
.sk-media-gallery__empty h2 { font-size: 19px; font-weight: 700; }
.sk-media-gallery__empty p { color: #8a8279; font-size: 14px; }

@media (max-width: 575.98px) {
    .sk-media-grid { grid-template-columns: 1fr; gap: 16px; }
    .sk-media-gallery { padding: 24px 0 46px; }
}

:root[data-theme="dark"] .sk-media-card { background: #1d1b16; border-color: rgba(216, 189, 125, .14); }
:root[data-theme="dark"] .sk-media-chip { background: #1d1b16; color: #cfc9bd; border-color: rgba(216, 189, 125, .18); }
:root[data-theme="dark"] .sk-media-chip.is-active { background: #87494a; color: #fff; }
:root[data-theme="dark"] .sk-media-gallery__lede,
:root[data-theme="dark"] .sk-media-gallery__count { color: #a9a196; }

@media (prefers-reduced-motion: reduce) {
    .sk-media-card, .sk-media-card__thumb img, .sk-media-card__play { transition: none; }
    .sk-media-card:hover { transform: none; }
    .sk-media-card:hover .sk-media-card__thumb img { transform: none; }
}

/* =============================================================
   CHAT EXPERIENCE v3 - premium AI-assistant redesign (final layer)
   Layout contract: panel = flex column; body = flex-grow scroll;
   intro centered when empty, hidden once conversation starts;
   stream bottom-anchored so the conversation hugs the composer.
   ============================================================= */
#sk-chat-panel.sk-chat__panel {
    width:min(420px,calc(100vw - 28px));
    height:min(580px,calc(100dvh - 112px));
    max-height:calc(100dvh - 112px);
    padding:0;
    border-radius:22px;
    border:1px solid rgba(135,73,74,.14);
    background:#f6f1ec;
    box-shadow:0 32px 90px rgba(42,27,25,.24),0 6px 22px rgba(42,27,25,.10);
}

#sk-chat-panel .sk-chat__head {
    flex:0 0 auto;
    min-height:60px;
    padding:10px 14px;
    background:rgba(255,255,255,.88);
    border-bottom:1px solid rgba(135,73,74,.10);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}
#sk-chat-panel .sk-chat__avatar { width:38px;height:38px;flex-basis:38px;border-radius:12px;font-size:12px; }
.sk-ai-brand strong { font-size:14.5px;letter-spacing:-.2px; }
.sk-ai-brand small { margin-top:2px;font-size:10.5px;color:rgba(43,36,35,.62); }
.sk-ai-status-dot { width:7px;height:7px;border-radius:50%;background:#4faf6a;box-shadow:0 0 0 3px rgba(79,175,106,.16);flex-shrink:0; }
.sk-ai-status-text { white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
#sk-chat-panel .sk-chat__head > .sk-chat__close {
    flex:0 0 34px;width:34px;height:34px;border-radius:11px;
    border:1px solid rgba(135,73,74,.14);color:#713738;background:rgba(255,255,255,.8);
    display:grid;place-items:center;padding:0;
    transition:background .2s ease,color .2s ease,transform .2s ease;
}
#sk-chat-panel .sk-chat__head > .sk-chat__close:hover { background:#87494a;color:#fff;transform:translateY(-1px); }

#sk-chat-panel .sk-chat__body {
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:16px 14px 12px;
    scrollbar-width:thin;
    scrollbar-color:rgba(135,73,74,.32) transparent;
}
#sk-chat-panel .sk-chat__body::-webkit-scrollbar { width:6px; }
#sk-chat-panel .sk-chat__body::-webkit-scrollbar-thumb { background:rgba(135,73,74,.32);border-radius:99px; }
#sk-chat-panel .sk-chat__body::-webkit-scrollbar-track { background:transparent; }

.sk-chat__intro { margin:auto;width:100%;max-width:360px; }
#sk-chat-messages.has-messages .sk-chat__intro { display:none; }

.sk-chat__welcome { text-align:left; }
.sk-chat__kicker {
    display:inline-flex;align-items:center;gap:6px;
    padding:4px 10px;border:1px solid rgba(135,73,74,.20);border-radius:999px;
    color:#87494a;background:rgba(255,255,255,.75);
    font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase;
}
.sk-chat__welcome h3 { margin:12px 0 6px !important;color:#211c1b !important;font-size:19px !important;line-height:1.3 !important;letter-spacing:-.4px !important;font-weight:800; }
.sk-chat__welcome h3 span { color:#87494a; }
.sk-chat__welcome p { margin:0 !important;color:#6e6460 !important;font-size:12.5px !important;line-height:1.6 !important; }
.sk-chat__trust span {
    width:100%;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;
    border-radius:10px;color:#665a56;background:rgba(135,73,74,.06);
    font-size:10px;font-weight:800;letter-spacing:.2px;
}
.sk-chat__trust i { color:#87494a;font-size:12px; }

.sk-chat__prompts {
    display:grid !important;
    grid-template-columns:1fr 1fr;
    gap:8px !important;
    margin-top:14px !important;
}
.sk-chat__prompts button {
    min-height:44px;
    display:flex !important;
    align-items:center;
    gap:7px;
    padding:8px 10px !important;
    text-align:left;
    border:1px solid rgba(135,73,74,.13) !important;
    border-radius:12px !important;
    color:#4a3534 !important;
    background:rgba(255,255,255,.72) !important;
    box-shadow:0 2px 6px rgba(61,41,37,.05) !important;
    transition:transform .18s cubic-bezier(.22,.61,.36,1),background .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease !important;
}
.sk-chat__prompts button span { flex:0 0 auto;color:#87494a;font-size:8px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; }
.sk-chat__prompts button strong { flex:1 1 auto;min-width:0;font-size:11.5px;font-weight:700;line-height:1.3; }
.sk-chat__prompts button i { flex:0 0 auto;color:#87494a;font-size:11px;opacity:.7;transition:transform .18s ease,opacity .18s ease; }
.sk-chat__prompts button:hover,
.sk-chat__prompts button:focus-visible { background:#87494a !important;border-color:#87494a !important;color:#fff !important;transform:translateY(-1px);box-shadow:0 8px 18px rgba(135,73,74,.24) !important; }
.sk-chat__prompts button:hover span,.sk-chat__prompts button:hover strong,.sk-chat__prompts button:hover i,
.sk-chat__prompts button:focus-visible span,.sk-chat__prompts button:focus-visible strong,.sk-chat__prompts button:focus-visible i { color:#fff; }
.sk-chat__prompts button:hover i,.sk-chat__prompts button:focus-visible i { opacity:1;transform:translate(1px,-1px); }
#sk-chat-panel .sk-chat__prompts button:disabled { opacity:.4;pointer-events:none;transform:none; }

.sk-chat__stream { display:flex;flex-direction:column;gap:14px;margin-top:auto;padding-top:16px; }

#sk-chat-panel .sk-chat__message {
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    box-shadow:none !important;
    background:transparent !important;
    animation:skMsgIn .3s cubic-bezier(.22,.61,.36,1);
}
.sk-chat__message.is-bot > p,
.sk-chat__message.is-human > p { margin:0;max-width:100%;color:#3d3634;font-size:14px;line-height:1.65; }
.sk-chat__message.is-bot > p strong,
.sk-chat__message.is-human > p strong { color:#211c1b;font-weight:800; }
.sk-chat__message.is-bot > p em,
.sk-chat__message.is-human > p em,
.sk-chat__message.is-human > em { display:block;margin-top:8px;color:#87494a;font-family:Georgia,serif;font-size:13px;line-height:1.55; }
.sk-ai-greeting { margin:0 0 6px;color:#211c1b;font-size:14px;font-weight:700;line-height:1.5; }

.sk-chat__message.is-bot.is-human {
    width:auto;
    max-width:100% !important;
    padding:14px 16px !important;
    border:1px solid rgba(135,73,74,.10) !important;
    border-radius:16px 16px 16px 4px !important;
    background:rgba(255,255,255,.92) !important;
    box-shadow:0 2px 10px rgba(61,41,37,.05);
}
.sk-chat__message.is-bot.is-human.is-final { background:linear-gradient(180deg,rgba(135,73,74,.05),rgba(255,255,255,.9)) !important; }

#sk-chat-panel .sk-chat__message.is-user {
    align-self:flex-end;
    width:fit-content;
    max-width:82% !important;
    margin-left:auto !important;
    padding:10px 14px !important;
    border:1px solid rgba(38,34,33,.10) !important;
    border-radius:16px 16px 4px 16px !important;
    color:#f7f2ec !important;
    background:linear-gradient(150deg,#2b2624,#211c1b) !important;
    box-shadow:0 8px 22px rgba(36,20,18,.16);
}
.sk-chat__message.is-user small { display:none; }
.sk-chat__message.is-user p { margin:0;font-size:13.5px;line-height:1.55;white-space:pre-line; }

.sk-ai-answer-meta { display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px; }
.sk-ai-answer-meta span { display:inline-flex;align-items:center;gap:6px;color:#87494a;font-size:10px;font-weight:800;letter-spacing:.8px;text-transform:uppercase; }
.sk-ai-answer-meta em { margin-left:auto;color:#5f8f68;font-size:9px;font-weight:800;letter-spacing:.6px;font-style:normal;text-transform:uppercase;white-space:nowrap; }
.sk-chat__message.is-human.is-final .sk-ai-answer-meta em { color:#87494a; }

.sk-chat__typing { pointer-events:none; }
.sk-ai-typing {
    display:flex;align-items:center;gap:5px;padding:12px 15px;width:fit-content;
    border:1px solid rgba(135,73,74,.10);border-radius:16px 16px 16px 4px;background:#fff;
    box-shadow:0 2px 10px rgba(61,41,37,.05);
}
.sk-ai-typing span { width:7px;height:7px;border-radius:50%;background:#87494a;animation:skDot 1.2s infinite ease-in-out; }
.sk-ai-typing span:nth-child(2) { animation-delay:-.4s; }
.sk-ai-typing span:nth-child(3) { animation-delay:-.2s; }

.sk-chat__sources { margin-top:12px;padding:12px 13px;border:1px solid rgba(135,73,74,.12);border-radius:14px;background:rgba(135,73,74,.04); }
.sk-chat__sources-meta { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px; }
.sk-chat__sources-meta > span { display:inline-flex;align-items:center;gap:6px;color:#87494a;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase; }
.sk-chat__copy { display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border:1px solid rgba(135,73,74,.18);border-radius:999px;color:#713738;background:transparent;font:700 10px 'Nunito',sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease,transform .2s ease; }
.sk-chat__copy:hover { background:rgba(135,73,74,.08);border-color:rgba(135,73,74,.30);transform:translateY(-1px); }
.sk-chat__copy.is-copied { color:#3f7d4c;border-color:rgba(63,125,76,.30);background:rgba(63,125,76,.08); }
.sk-chat__src { display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:#2f2927 !important;background:rgba(255,255,255,.8);text-decoration:none !important;transition:background .2s ease,transform .2s ease !important; }
.sk-chat__src > i:first-child { color:#87494a;font-size:16px; }
.sk-chat__src span { display:flex;flex-direction:column;min-width:0; }
.sk-chat__src strong { font-size:12px;font-weight:800;color:#211c1b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.sk-chat__src em { font-size:10px;font-style:normal;color:#8a7f7b; }
.sk-chat__src > i:last-child { margin-left:auto;color:#87494a;transition:transform .2s ease; }
.sk-chat__src:hover { background:rgba(135,73,74,.08); }
.sk-chat__src:hover > i:last-child { transform:translate(2px,-2px); }

.sk-chat__followups { margin-top:12px; }
.sk-chat__followups-label { display:inline-flex;align-items:center;gap:6px;color:#a47071;font-size:9px;font-weight:800;letter-spacing:1px;text-transform:uppercase; }
.sk-chat__followup { display:inline-flex;align-items:center;gap:6px;max-width:100%;margin:6px 6px 0 0;padding:8px 12px;border-radius:999px;color:#4a3534;background:rgba(135,73,74,.06);border:1px solid rgba(135,73,74,.13);font:700 11.5px/1.3 'Nunito',sans-serif;cursor:pointer;transition:background .2s ease,border-color .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease !important; }
.sk-chat__followup span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.sk-chat__followup i { color:#87494a;font-size:10px;transition:transform .2s ease,color .2s ease; }
.sk-chat__followup:hover,
.sk-chat__followup:focus-visible { background:#87494a;border-color:#87494a;color:#fff;transform:translateY(-1px);box-shadow:0 6px 14px rgba(135,73,74,.20); }
.sk-chat__followup:hover i,
.sk-chat__followup:focus-visible i { color:#fff;transform:translate(1px,-1px); }

#sk-chat-panel .sk-chat__resource { width:auto !important;margin-top:12px !important;display:inline-flex !important;align-items:center;gap:8px;padding:9px 13px !important;border:1px solid rgba(135,73,74,.20) !important;border-radius:11px !important;color:#713738 !important;background:rgba(135,73,74,.07) !important;text-decoration:none !important;transition:background .2s ease,transform .2s ease,border-color .2s ease !important; }
#sk-chat-panel .sk-chat__resource:hover { background:rgba(135,73,74,.14) !important;border-color:rgba(135,73,74,.32) !important;transform:translateX(2px); }
#sk-chat-panel .sk-chat__resource span { font-size:12px;font-weight:700;text-transform:none;letter-spacing:0; }
#sk-chat-panel .sk-chat__resource i { color:#87494a;transition:transform .2s ease; }
#sk-chat-panel .sk-chat__resource:hover i { transform:translateX(2px); }

.sk-chat__sentiment { margin-left:auto;padding:5px 9px;color:#6d4a31;background:#f3e5cf;font:800 9px/1 'Nunito',sans-serif;letter-spacing:.35px;text-transform:uppercase; }
.sk-chat__message[data-sentiment="urgent"] .sk-chat__sentiment,
.sk-chat__message[data-sentiment="distressed"] .sk-chat__sentiment { color:#8a3d32;background:#f9ddd5; }
.sk-chat__message[data-sentiment="calm"] .sk-chat__sentiment { color:#376a45;background:#dff0e3; }
.sk-chat__message[data-sentiment="formal"] .sk-chat__sentiment { color:#385d79;background:#e0edf5; }
.sk-chat__safety { margin:12px 0 0;padding:10px 12px;border:0;border-radius:11px;font-size:11px;line-height:1.5; }

#sk-chat-panel .sk-chat__status {
    flex:0 0 auto;
    padding:8px 16px !important;
    margin:0 14px 4px;
    border:1px solid rgba(135,73,74,.10);
    border-radius:12px;
    color:#5a514e !important;
    background:rgba(255,255,255,.8);
}
#sk-chat-panel .sk-chat__status[hidden] { display:none !important; }
.sk-ai-thinking__row { display:flex;align-items:center;gap:9px; }
.sk-ai-thinking__pulse { flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:#87494a;animation:skThinkingPulse 1.1s infinite ease-in-out; }
@keyframes skThinkingPulse { 0%,100% { opacity:.35;transform:scale(.8);} 50% { opacity:1;transform:scale(1.15);} }
#sk-chat-panel .sk-chat__status em { color:#4a3534;font-size:12px;font-style:normal;font-weight:700;letter-spacing:.1px; }
.sk-ai-thinking__steps { list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:4px 14px; }
.sk-ai-thinking__steps li { display:flex;align-items:center;gap:6px;color:#8a7f7b;font-size:9.5px;font-weight:600;letter-spacing:.1px;opacity:.5;transition:opacity .3s ease,color .3s ease; }
.sk-ai-thinking__steps li i { display:none; }
.sk-ai-thinking__steps li.is-done { opacity:1;color:#5a4a49; }

#sk-chat-panel .sk-chat__form { flex:0 0 auto;padding:8px 14px 12px;background:linear-gradient(180deg,rgba(246,241,236,0),#f6f1ec 30%); }
#sk-chat-panel .sk-chat__form.is-complete { opacity:.55;pointer-events:none; }
.sk-ai-composer {
    display:flex;align-items:flex-end;gap:8px;
    padding:6px 6px 6px 15px;
    background:#fff;
    border:1px solid rgba(135,73,74,.16);
    border-radius:18px;
    box-shadow:0 6px 22px rgba(36,20,18,.08);
    transition:border-color .2s ease,box-shadow .2s ease;
}
.sk-ai-composer:focus-within { border-color:rgba(135,73,74,.55);box-shadow:0 0 0 4px rgba(135,73,74,.10),0 6px 22px rgba(36,20,18,.08); }
#sk-chat-panel .sk-ai-composer textarea {
    flex:1 1 auto;
    height:auto !important;
    min-height:26px !important;
    max-height:110px;
    padding:9px 0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    color:#211c1b;
    font:400 13.5px/1.5 'Nunito',sans-serif !important;
    resize:none;
}
#sk-chat-panel .sk-ai-composer textarea::placeholder { color:rgba(43,36,35,.45); }
#sk-chat-panel .sk-ai-composer button {
    flex:0 0 40px;width:40px;height:40px;
    display:grid;place-items:center;padding:0;
    border:0;border-radius:12px;
    color:#fff !important;
    background:linear-gradient(145deg,#a75f60,#713738) !important;
    box-shadow:0 6px 14px rgba(135,73,74,.28),inset 0 1px 0 rgba(255,255,255,.22) !important;
    transition:transform .2s ease,filter .2s ease,box-shadow .2s ease,opacity .2s ease,background .2s ease !important;
}
#sk-chat-panel .sk-ai-composer button:hover { transform:translateY(-1px) scale(1.04);filter:brightness(1.06);box-shadow:0 9px 20px rgba(135,73,74,.34),inset 0 1px 0 rgba(255,255,255,.22) !important; }
#sk-chat-panel .sk-ai-composer button:active { transform:scale(.96); }
#sk-chat-panel .sk-ai-composer button:disabled { opacity:.4;cursor:default;transform:none;filter:none;box-shadow:none !important;background:rgba(135,73,74,.28) !important; }
.sk-chat__composer-hint { display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:rgba(43,36,35,.50);font-size:9px;letter-spacing:.2px; }
.sk-chat__composer-hint span { display:inline-flex;align-items:center;gap:5px; }
.sk-chat__composer-hint kbd { padding:2px 5px;color:#6b5c57;background:#eee5df;font-size:8.5px;border-radius:5px;box-shadow:none; }

.sk-ai-close-confirm { position:absolute;inset:0;z-index:40;padding:18px;display:grid;place-items:center;border-radius:inherit;background:rgba(36,22,20,.5);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px); }
.sk-ai-close-confirm[hidden] { display:none !important; }
.sk-ai-close-confirm > div { width:100%;max-width:340px;padding:24px 20px;border:1px solid rgba(135,73,74,.12);border-radius:20px;color:#211c1b;background:#fffdfb;box-shadow:0 32px 80px rgba(36,20,18,.35); }
.sk-ai-close-confirm > div > span { width:44px;height:44px;display:grid;place-items:center;margin-bottom:14px;border-radius:13px;color:#fff;background:#87494a;font-size:18px;box-shadow:0 10px 22px rgba(135,73,74,.30); }
.sk-ai-close-confirm small { color:#a47071;font-size:9px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase; }
.sk-ai-close-confirm h4 { margin:7px 0;color:#211c1b;font-size:20px;letter-spacing:-.5px;font-weight:800; }
.sk-ai-close-confirm p { margin:0;color:#6e6460;font-size:12px;line-height:1.6; }
.sk-ai-close-confirm > div > div { display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px; }
.sk-ai-close-confirm button { min-height:42px;padding:10px 12px;border:1px solid rgba(135,73,74,.22);border-radius:12px;color:#713738;background:transparent;font-size:10px;font-weight:800;letter-spacing:.4px;transition:transform .2s ease,background .2s ease,border-color .2s ease; }
.sk-ai-close-confirm button:hover { transform:translateY(-1px);background:rgba(135,73,74,.08); }
#sk-ai-confirm-close { border-color:#87494a !important;background:#87494a !important;color:#fff !important; }
#sk-ai-confirm-close:hover { background:#713738 !important;border-color:#713738 !important; }

#sk-chat-toggle.sk-chat__launcher:focus-visible,
#sk-ai-confirm-close:focus-visible,
#sk-ai-keep-chat:focus-visible,
#sk-chat-close:focus-visible,
.sk-chat__copy:focus-visible { outline:none;box-shadow:0 0 0 3px rgba(193,169,116,.6),0 0 0 6px rgba(135,73,74,.35) !important; }

@media(max-width:767.98px){
    #sk-chat-panel.sk-chat__panel { width:min(420px,calc(100vw - 20px));height:min(580px,calc(100dvh - 110px)); }
    .sk-ai-launch-label { display:none; }
}
@media(max-width:575.98px){
    #sk-chat-panel.sk-chat__panel { position:fixed !important;inset:0 !important;width:100vw !important;height:100dvh !important;max-height:none !important;border:0;border-radius:0; }
    #sk-chat-panel .sk-chat__head { padding:max(10px,env(safe-area-inset-top)) 14px 10px; }
    #sk-chat-panel .sk-chat__body { padding:14px 12px 10px; }
    #sk-chat-panel .sk-chat__status { margin:0 12px 4px; }
    #sk-chat-panel .sk-chat__form { padding:8px 12px max(12px,env(safe-area-inset-bottom)); }
    .sk-chat__prompts { grid-template-columns:1fr; }
    .sk-chat__welcome h3 { font-size:17px !important; }
}
@media(prefers-reduced-motion:reduce){
    .sk-ai-thinking__pulse,.sk-ai-typing span,#sk-chat-panel,#sk-chat-panel .sk-chat__message,
    #sk-chat-toggle.sk-chat__launcher,#sk-chat-toggle .sk-ai-icon i,#sk-chat-toggle .sk-ai-launch-label,
    .sk-chat__prompts button,.sk-chat__followup,.sk-chat__copy,#sk-chat-panel .sk-chat__resource,
    #sk-chat-panel .sk-ai-composer,#sk-chat-panel .sk-chat__head > button,.sk-ai-close-confirm button { animation:none !important;transition:none !important; }
}