/**
* TRAILBAZE 360 — Premium UI Refresh v2 (bold edition)
* ---------------------------------------------------------------
* Additive visual layer loaded after style.css. No class/ID is
* removed or renamed — every override targets markup that already
* exists, so PHP logic, forms, the DB and admin panel are untouched.
* Delete the <link> tag on any page to instantly revert.
* ---------------------------------------------------------------
*/

/* ==========================================================
   1. Design tokens — bolder, higher-contrast palette
   ========================================================== */
:root {
  --brand-50:  #e8fcef;
  --brand-100: #c7f6d7;
  --brand-300: #5fe396;
  --brand-400: #22d16e;
  --brand-500: #0fb958;   /* vivid signature green */
  --brand-600: #0b9a49;
  --brand-700: #087538;
  --brand-900: #052e18;

  --gold: #ffb703;        /* sparing accent for badges/highlights */

  --ink-900: #071510;
  --ink-800: #0f2019;
  --ink-700: #253630;
  --ink-500: #58685f;
  --ink-300: #93a49b;

  --surface-0: #ffffff;
  --surface-50: #f4faf6;
  --surface-100: #e9f4ee;
  --surface-border: #dfece4;

  --shadow-sm: 0 4px 14px rgba(7, 21, 16, 0.08);
  --shadow-md: 0 16px 40px rgba(7, 21, 16, 0.14);
  --shadow-lg: 0 30px 70px rgba(7, 21, 16, 0.22);
  --glow: 0 0 0 1px rgba(15, 185, 88, 0.15), 0 18px 40px rgba(15, 185, 88, 0.28);

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --grad-brand: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-400) 55%, var(--brand-300) 100%);
  --grad-dark:  linear-gradient(160deg, #04140c 0%, #08281a 55%, #0a3320 100%);
  --dot-grid: radial-gradient(rgba(15, 185, 88, 0.16) 1.2px, transparent 1.2px);
}

/* ==========================================================
   2. Global
   ========================================================== */
html { scroll-behavior: smooth; }

body {
  color: var(--ink-700);
  background: var(--surface-0);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 { color: var(--ink-900); letter-spacing: -0.02em; }

a { color: var(--brand-600); }
a:hover { color: var(--brand-500); }

::selection { background: var(--brand-300); color: #04180d; }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--surface-100); }
::-webkit-scrollbar-thumb {
  background: var(--grad-brand);
  border-radius: 10px;
  border: 2px solid var(--surface-100);
}

section { position: relative; }

/* ==========================================================
   3. Header / Navigation — floating glass pill
   ========================================================== */
#header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: saturate(200%) blur(14px);
  -webkit-backdrop-filter: saturate(200%) blur(14px);
  box-shadow: 0 8px 30px rgba(7, 21, 16, 0.08);
  border-bottom: 1px solid rgba(15, 185, 88, 0.12);
  padding: 14px 0;
}

#header .logo a { color: var(--ink-900); }
#header .logo a span {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.nav-menu > ul > li { padding: 10px 0 10px 30px; }

.nav-menu a {
  color: var(--ink-700);
  font-size: 12.5px;
  letter-spacing: 0.8px;
  padding-bottom: 6px;
  position: relative;
}

.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0%;
  height: 2px;
  border-radius: 2px;
  background: var(--grad-brand);
  transition: width 0.3s var(--ease);
}

.nav-menu a:hover::after,
.nav-menu .active > a::after,
.nav-menu li:hover > a::after { width: 100%; }

.nav-menu a:hover,
.nav-menu .active > a,
.nav-menu li:hover > a { color: var(--brand-600); }

.nav-menu .drop-down ul {
  border-top: 3px solid transparent;
  border-image: var(--grad-brand) 1;
  border-radius: 4px 4px var(--radius-sm) var(--radius-sm);
  box-shadow: var(--shadow-lg);
}

.header-social-links {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  flex-shrink: 0 !important;
  white-space: nowrap !important;
}

.header-social-links a {
  color: #fff;
  background: var(--grad-brand);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex !important;
  flex-shrink: 0 !important;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  box-shadow: var(--shadow-sm);
}

.header-social-links a:hover { transform: translateY(-3px) scale(1.06); box-shadow: var(--glow); }

.mobile-nav-toggle { color: var(--ink-900); }
.mobile-nav { box-shadow: var(--shadow-lg); }
.mobile-nav ul .active > a,
.mobile-nav ul a:hover { color: var(--brand-600) !important; }

/* ==========================================================
   4. Hero — cinematic, gradient text, glowing CTA
   ========================================================== */
#hero { height: 86vh; }

#hero .carousel-item::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 60% at 20% 20%, rgba(15, 185, 88, 0.28) 0%, transparent 60%),
    linear-gradient(180deg, rgba(4, 10, 8, 0.35) 0%, rgba(4, 10, 8, 0.75) 100%);
  pointer-events: none;
}

#hero .carousel-container { align-items: center; justify-content: flex-start; top: 115px; bottom: 50px; }

#hero .carousel-content {
  width: 58%;
  background: rgba(6, 16, 12, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(95, 227, 150, 0.25);
  border-left: 5px solid var(--brand-400);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 40px 42px;
}

#hero .carousel-content h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 800;
  font-size: 52px;
  letter-spacing: -0.03em;
  color: #fff;
}

#hero .carousel-content h2 span {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

#hero .carousel-content p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 18px;
  max-width: 90%;
}

#hero .btn-get-started {
  background: var(--grad-brand);
  border: none;
  border-radius: 999px;
  padding: 15px 38px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: #04180d;
  box-shadow: var(--glow);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
  position: relative;
}

#hero .btn-get-started::after {
  content: "→";
  margin-left: 10px;
  display: inline-block;
  transition: transform 0.3s var(--ease);
}

#hero .btn-get-started:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 0 0 1px rgba(15, 185, 88, 0.3), 0 26px 55px rgba(15, 185, 88, 0.4);
}

#hero .btn-get-started:hover::after { transform: translateX(4px); }

#hero .carousel-indicators li { background-color: rgba(255, 255, 255, 0.5); }
#hero .carousel-indicators .active { background-color: var(--brand-400); }

@media (max-width: 1199px) {
  #hero { height: 74vh; min-height: 560px; }
  #hero .carousel-content { width: 78%; padding: 34px 36px; }
  #hero .carousel-content h2 { font-size: 38px; }
  #hero .carousel-content p { font-size: 16px; }
}

@media (max-width: 992px) {
  #hero { height: 56vh; min-height: 480px; }
  #hero .carousel-container { align-items: center; justify-content: center; top: 90px; bottom: 30px; }
  #hero .carousel-content { width: 92%; padding: 28px 26px; }
  #hero .carousel-content h2 { font-size: 34px; margin-bottom: 14px; }
  #hero .carousel-content p { font-size: 16px; max-width: 100%; }
  #hero .btn-get-started { padding: 12px 28px; font-size: 14px; }
}

@media (max-width: 768px) {
  #hero { height: 52vh; min-height: 440px; }
  #hero .carousel-container { top: 80px; bottom: 24px; }
  #hero .carousel-content { width: 100%; padding: 20px 20px; }
  #hero .carousel-content h2 { font-size: 26px; margin-bottom: 10px; }
  #hero .carousel-content p { font-size: 14px; line-height: 1.5; }
  #hero .btn-get-started { padding: 10px 22px; font-size: 13px; }
}

@media (max-width: 480px) {
  #hero { height: 50vh; min-height: 420px; }
  #hero .carousel-container { top: 74px; bottom: 20px; }
  #hero .carousel-content { padding: 16px 16px; }
  #hero .carousel-content h2 { font-size: 21px; margin-bottom: 8px; }
  #hero .carousel-content p { font-size: 13px; }
  #hero .btn-get-started { padding: 9px 18px; font-size: 12px; }
}

@media (max-width: 400px) {
  #hero { min-height: 520px; }
  #hero .carousel-container { top: 70px; bottom: 16px; }
  #hero .carousel-content { padding: 14px 14px; }
  #hero .carousel-content h2 { font-size: 19px; margin-bottom: 6px; }
  #hero .carousel-content p { font-size: 12.5px; line-height: 1.4; margin-bottom: 10px; }
}

@media (max-width: 340px) {
  #hero { min-height: 500px; }
  #hero .carousel-container { top: 66px; }
  #hero .carousel-content h2 { font-size: 17px; }
}

@media (max-width: 992px) and (orientation: landscape) {
  #hero { height: 88vh; min-height: 260px; }
  #hero .carousel-content h2 { font-size: 24px; margin-bottom: 8px; }
  #hero .carousel-content p { font-size: 13px; }
  #hero .carousel-content { padding: 16px 20px; }
}

/* ==========================================================
   5. Section titles — editorial, big decorative backdrop
   ========================================================== */
.section-bg { background: var(--surface-50); }

.section-title {
  padding-bottom: 44px;
  position: relative;
  z-index: 1;
}

.section-title h2 {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  position: relative;
  display: inline-block;
}

.section-title h2::before {
  content: "";
  position: absolute;
  top: -18px;
  left: 50%;
  transform: translateX(-50%);
  width: 46px;
  height: 46px;
  background: var(--brand-50);
  border-radius: 50%;
  z-index: -1;
}

.section-title h2::after {
  width: 80px;
  height: 5px;
  border-radius: 5px;
  background: var(--grad-brand);
  left: calc(50% - 40px);
}

.section-title p { color: var(--ink-500); font-size: 16px; }

.breadcrumbs {
  background: var(--grad-dark);
  background-image: var(--grad-dark), var(--dot-grid);
  background-size: auto, 16px 16px;
  padding: 26px 0;
}

.breadcrumbs h2 { font-weight: 700; }

/* ==========================================================
   6. Buttons — gradient, glow, animated arrow
   ========================================================== */
.btn-buy,
.btn-get-started,
.appointment-btn,
button[type="submit"],
input[type="submit"] {
  border-radius: 999px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease), color 0.3s var(--ease) !important;
}

.btn-buy:hover,
.appointment-btn:hover,
button[type="submit"]:hover,
input[type="submit"]:hover {
  transform: translateY(-3px);
}

/* ==========================================================
   7. Cards — glass, gradient top-edge, lift-and-glow hover
   ========================================================== */
.about-card,
.about-image-card,
.framework-card,
.value-box,
.problem-card,
.process-step,
.challenge-box,
.approach-box,
.impact-box {
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.about-card::before,
.framework-card::before,
.value-box::before,
.problem-card::before,
.process-step::before,
.challenge-box::before,
.approach-box::before,
.impact-box::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: var(--grad-brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s var(--ease);
}

.about-card:hover,
.framework-card:hover,
.value-box:hover,
.problem-card:hover,
.process-step:hover,
.challenge-box:hover,
.approach-box:hover,
.impact-box:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-lg);
  border-color: transparent;
}

.about-card:hover::before,
.framework-card:hover::before,
.value-box:hover::before,
.problem-card:hover::before,
.process-step:hover::before,
.challenge-box:hover::before,
.approach-box:hover::before,
.impact-box:hover::before { transform: scaleX(1); }

.about-badge,
.about-tag {
  background: var(--brand-50);
  color: var(--brand-700);
  border: 1px solid var(--brand-100);
  border-radius: 999px;
  font-weight: 700;
}

.about-main-image {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Framework letters — bold gradient numerals */
.framework-letter {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800;
}

.framework-card { text-align: center; padding-top: 34px; }

/* Services icon boxes — gradient icon halo */
.services .icon-box {
  border-radius: var(--radius-md);
  border: 1px solid var(--surface-border);
  box-shadow: var(--shadow-sm);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), border-color 0.35s var(--ease);
}

.services .icon-box .icon {
  border-radius: 50%;
  background: var(--brand-50);
}

.services .icon-box:hover {
  transform: translateY(-10px);
  box-shadow: var(--glow);
  border-color: transparent;
}

.services .icon-box:hover .icon { background: var(--grad-brand); }

.services .icon-box h4 a { color: var(--ink-900); }
.services .icon-box h4 a:hover { color: var(--brand-600); }

/* ==========================================================
   8. Testimonials — bold quote treatment
   ========================================================== */
.testimonials .testimonial-item {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  position: relative;
}

.testimonials .testimonial-item::before {
  content: "\201C";
  position: absolute;
  top: -6px;
  left: 18px;
  font-size: 90px;
  line-height: 1;
  font-family: Georgia, serif;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0.5;
  pointer-events: none;
}

.testimonials .stars i { color: var(--gold); }

.testimonials img {
  border: 3px solid var(--brand-100);
}

/* ==========================================================
   9. Pricing — floating featured card + ribbon
   ========================================================== */
.pricing .box {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--surface-border);
  transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}

.pricing .box:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.pricing .featured {
  border: none;
  background: var(--grad-dark);
  transform: scale(1.05);
  box-shadow: var(--shadow-lg);
  z-index: 2;
}

.pricing .featured:hover { transform: scale(1.05) translateY(-8px); }

.pricing .featured::after {
  content: "MOST POPULAR";
  position: absolute;
  top: 18px;
  right: -34px;
  background: var(--gold);
  color: #241900;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1px;
  padding: 6px 40px;
  transform: rotate(45deg);
  box-shadow: 0 4px 10px rgba(0,0,0,0.25);
}

.pricing .featured h3,
.pricing .featured h4,
.pricing .featured ul li { color: #fff; }

.pricing h3 { color: var(--brand-600); font-weight: 800; }

.pricing .btn-buy {
  background: var(--grad-brand);
  border: none;
  color: #04180d;
  font-weight: 800;
}

.pricing .btn-buy:hover { box-shadow: var(--glow); }

/* ==========================================================
   10. Blog — image zoom, gradient tag pill
   ========================================================== */
.blog .entry {
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--surface-border);
  transition: box-shadow 0.35s var(--ease), transform 0.35s var(--ease);
}

.blog .entry:hover { box-shadow: var(--shadow-lg); transform: translateY(-6px); }

.blog .entry .entry-img { overflow: hidden; }
.blog .entry .entry-img img { transition: transform 0.5s var(--ease); }
.blog .entry:hover .entry-img img { transform: scale(1.08); }

.blog .entry .entry-title a { color: var(--ink-900); }
.blog .entry .entry-title a:hover { color: var(--brand-600); }

.blog .entry .entry-content .read-more a {
  background: var(--grad-brand);
  color: #04180d;
  border-radius: 999px;
  font-weight: 700;
}

.blog .entry .entry-content .read-more a:hover { box-shadow: var(--glow); }

/* ==========================================================
   11. Contact / forms — glow focus states
   ========================================================== */
.contact .info {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.contact .info:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.contact .info i {
  background: var(--grad-brand);
  color: #04180d;
  border-radius: 50%;
}

.contact .php-email-form,
.php-email-form {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.contact .php-email-form input,
.contact .php-email-form textarea,
.php-email-form input,
.php-email-form textarea {
  border: 1.5px solid var(--surface-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: border-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

.contact .php-email-form input:focus,
.contact .php-email-form textarea:focus,
.php-email-form input:focus,
.php-email-form textarea:focus {
  border-color: var(--brand-500) !important;
  box-shadow: 0 0 0 4px var(--brand-100) !important;
}

.contact .php-email-form button[type="submit"],
.php-email-form button[type="submit"] {
  background: var(--grad-brand);
  color: #04180d;
  border: 0;
  padding: 13px 36px;
  font-weight: 800;
  box-shadow: var(--glow);
}

.contact .php-email-form button[type="submit"]:hover,
.php-email-form button[type="submit"]:hover { transform: translateY(-3px); }

/* ==========================================================
   12. Footer — dark gradient, dot grid, glowing top line
   ========================================================== */
#footer {
  background: var(--grad-dark);
  background-image: var(--grad-dark), var(--dot-grid);
  background-size: auto, 18px 18px;
  position: relative;
}

#footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--grad-brand);
}

#footer .footer-top .footer-contact h3 {
  color: #fff;
  font-weight: 800;
}

#footer .footer-top h4 {
  color: #fff;
  position: relative;
  padding-bottom: 12px;
}

#footer .footer-top h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 38px;
  height: 3px;
  border-radius: 3px;
  background: var(--grad-brand);
}

#footer .footer-top .footer-links ul a:hover { color: var(--brand-300); padding-left: 4px; }
#footer .footer-top .footer-links ul a { transition: color 0.25s var(--ease), padding-left 0.25s var(--ease); }

#footer .footer-newsletter form {
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid rgba(95, 227, 150, 0.3);
  background: rgba(255, 255, 255, 0.04);
}

#footer .footer-newsletter form input[type="email"] { background: transparent; color: #fff; }

#footer .footer-newsletter form input[type="submit"] {
  background: var(--grad-brand);
  color: #04180d;
  font-weight: 800;
  border-radius: 0;
}

#footer .social-links a {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}

#footer .social-links a:hover {
  background: var(--grad-brand);
  transform: translateY(-3px);
  box-shadow: var(--glow);
}

#footer .credits a { color: var(--brand-300); font-weight: 600; }

/* ==========================================================
   13. Back to top — glowing gradient orb
   ========================================================== */
.back-to-top {
  background: var(--grad-brand);
  border-radius: 50%;
  box-shadow: var(--glow);
  width: 44px;
  height: 44px;
}

.back-to-top:hover { transform: translateY(-3px) scale(1.06); }

/* ==========================================================
   14. Clients / logo strip
   ========================================================== */
.clients img {
  transition: transform 0.35s var(--ease), filter 0.35s var(--ease);
  filter: grayscale(65%);
  opacity: 0.75;
}

.clients img:hover {
  filter: grayscale(0%);
  opacity: 1;
  transform: scale(1.08);
}

/* ==========================================================
   15. Team / founder imagery — soft frame + zoom
   ========================================================== */
.founder-img img,
.team img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  transition: transform 0.5s var(--ease);
}

.founder-img:hover img,
.team:hover img { transform: scale(1.03); }

/* ==========================================================
   16. Small screens
   ========================================================== */
@media (max-width: 768px) {
  .section-title h2 { font-size: 28px; }
  .pricing .featured { transform: scale(1); }
}

/* ==========================================================
   17. TRAILBLAZE 360 REBRAND — Sora / Manrope type system
   ========================================================== */
@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

body, p, li, a, input, textarea, button, select,
.nav-menu a, .footer-links ul li a, .php-email-form input, .php-email-form textarea {
  font-family: 'Manrope', sans-serif !important;
}

h1, h2, h3, h4, h5, h6,
.section-title h2,
#hero .carousel-content h2,
#header .logo a,
.about-badge, .about-tag,
.framework-letter,
.btn-get-started, .btn-buy, .appointment-btn {
  font-family: 'Sora', sans-serif !important;
}

/* ==========================================================
   18. Eyebrow / kicker labels
   ========================================================== */
.eyebrow {
  display: inline-block;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--brand-600);
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  padding: 7px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.section-title .eyebrow { display: block; margin-left: auto; margin-right: auto; width: fit-content; }

/* ==========================================================
   19. Buttons — primary / outline / on-dark
   ========================================================== */
.btn-trail,
.btn-trail-outline {
  display: inline-block;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: 0.2px;
  padding: 14px 32px;
  border-radius: 999px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
  text-decoration: none;
}

.btn-trail {
  background: var(--grad-brand);
  color: #04180d;
  border: none;
  box-shadow: var(--glow);
}
.btn-trail:hover { transform: translateY(-3px) scale(1.02); color: #04180d; box-shadow: 0 0 0 1px rgba(15,185,88,.3), 0 26px 55px rgba(15,185,88,.4); }

.btn-trail-outline {
  background: transparent;
  color: var(--ink-900);
  border: 2px solid var(--ink-900);
}
.btn-trail-outline:hover { transform: translateY(-3px); color: var(--brand-600); border-color: var(--brand-600); }

.btn-trail-outline.on-dark, .on-dark .btn-trail-outline { color: #fff; border-color: rgba(255,255,255,0.55); }
.btn-trail-outline.on-dark:hover, .on-dark .btn-trail-outline:hover { color: var(--brand-300); border-color: var(--brand-300); }

/* Header standout CTA */
.nav-cta {
  margin-left: 18px;
  padding: 11px 24px !important;
  border-radius: 999px !important;
  background: var(--grad-brand);
  color: #04180d !important;
  font-weight: 700;
  box-shadow: var(--glow);
}
.nav-cta::after { display: none !important; }
.nav-cta:hover { transform: translateY(-2px); }

/* ==========================================================
   20. Dark sections (Performance Reset, dark CTAs)
   ========================================================== */
.section-dark {
  background: var(--grad-dark);
  color: rgba(255,255,255,0.88);
  padding: 90px 0;
}
.section-dark h2, .section-dark h3, .section-dark h4 { color: #fff; }
.section-dark .section-title p { color: rgba(255,255,255,0.7); }
.section-dark .section-title h2::before,
.section-dark .section-title h2::after { background: var(--grad-brand); }

.reset-lines { list-style: none; padding: 0; margin: 0 0 26px; }
.reset-lines li {
  padding: 10px 0 10px 30px;
  position: relative;
  font-size: 17px;
  color: rgba(255,255,255,0.82);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.reset-lines li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brand-400);
  font-weight: 700;
}

.reset-path {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 30px 0;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 18px;
}
.reset-path span {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(95,227,150,0.3);
  padding: 10px 20px;
  border-radius: 999px;
  color: #fff;
}
.reset-path i { color: var(--brand-400); }

/* ==========================================================
   21. Stat boxes (Impact)
   ========================================================== */
.stat-box {
  text-align: center;
  padding: 34px 18px;
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.stat-box:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.stat-box .stat-number {
  font-family: 'Sora', sans-serif;
  font-weight: 800;
  font-size: 42px;
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1.1;
}
.stat-box .stat-label { color: var(--ink-500); font-size: 14.5px; margin-top: 6px; }

/* ==========================================================
   22. Case study card
   ========================================================== */
.case-study-card {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 44px;
}
.case-study-card .cs-label {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  color: var(--brand-600);
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: block;
  margin-bottom: 8px;
}
.case-study-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; margin-top: 24px; }
@media (max-width: 768px) { .case-study-grid { grid-template-columns: 1fr; } }
.case-study-grid dt { font-family: 'Sora', sans-serif; font-weight: 700; color: var(--ink-900); font-size: 14px; margin-bottom: 4px; }
.case-study-grid dd { color: var(--ink-500); margin: 0 0 14px; }

/* ==========================================================
   23. Diagnostic list / assessment pills
   ========================================================== */
.diagnostic-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin: 8px 0 10px; }
.diagnostic-pills span {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 12px 22px;
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 14.5px;
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}

/* ==========================================================
   24. Category pills (Insights)
   ========================================================== */
.category-pills { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 10px; }
.category-pills .cat-pill {
  background: var(--surface-50);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  min-width: 190px;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.category-pills .cat-pill:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.category-pills .cat-pill h4 { font-size: 16px; margin-bottom: 4px; }
.category-pills .cat-pill p { font-size: 13.5px; color: var(--ink-500); margin: 0; }

/* ==========================================================
   25. Resource cards
   ========================================================== */
.resource-card {
  background: var(--surface-0);
  border: 1px solid var(--surface-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 30px 26px;
  height: 100%;
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.resource-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.resource-card i { font-size: 30px; color: var(--brand-600); margin-bottom: 12px; display: inline-block; }

/* ==========================================================
   26. Discovery form (Contact)
   ========================================================== */
.php-email-form select {
  border: 1px solid #ced4da;
  border-radius: 4px;
  width: 100%;
  padding: 10px 14px;
  margin-bottom: 20px;
  background: #fff;
  color: var(--ink-700);
}
.php-email-form select:focus { color: var(--ink-900); background-color: #fff; border-color: var(--brand-400); }
.php-email-form label { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 14px; color: var(--ink-900); margin-bottom: 8px; display: block; }
.form-check-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.form-check-pills label {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  background: var(--surface-50);
  border: 1px solid var(--surface-border);
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.form-check-pills input { margin: 0; }

/* ==========================================================
   27. Language-system word marks (light touch)
   ========================================================== */
.trail-term { font-weight: 700; color: var(--ink-900); }

/* ==========================================================
   29. Header social icons — were getting squeezed off-screen
   between ~992px and 1200px once the nav gained the extra
   "Solutions"/"Impact"/"Insights"/"Resources" items and the
   Start a Conversation button. Hide them at that range; the
   nav-cta already carries the primary action there.
   ========================================================== */
@media (max-width: 1200px) {
  .header-social-links { display: none; }
}

/* ==========================================================
   30. Hero supporting statement — was a plain, low-contrast
   line easy to skim past right after the hero photo. Give it
   its own visual band so it reads clearly and immediately
   (no scroll-triggered fade, so it never depends on animation
   JS running correctly).
   ========================================================== */
.hero-statement {
  padding: 44px 0;
  background: var(--surface-50);
  border-bottom: 1px solid var(--surface-border);
}
.hero-statement p {
  font-family: 'Sora', sans-serif;
  font-weight: 700;
  font-size: 23px;
  line-height: 1.5;
  color: var(--ink-900);
  max-width: 840px;
  margin: 0 auto;
}
@media (max-width: 768px) {
  .hero-statement { padding: 32px 0; }
  .hero-statement p { font-size: 18px; }
}

/* ==========================================================
   31. Homepage "Who We Are" — now the first section right
   below the hero (the separate supporting-statement band was
   removed). Give it a touch more top breathing room and a
   soft tint so it reads as an intentional section, not a
   plain, bare gap under the photo hero.
   ========================================================== */
#about-us.about-us {
  padding-top: 55px;
  background: var(--surface-50);
}
@media (max-width: 768px) {
  #about-us.about-us { padding-top: 36px; }
}