/* ============================================================
   YPS theme — colors from https://yps-c23159.webflow.io/
   Applied across the TC Legal standalone site
   ============================================================ */

@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("../fonts/funnel-display-300-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/funnel-display-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/funnel-display-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/funnel-display-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Funnel Display";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/funnel-display-700-normal.woff2") format("woff2");
}

:root {
  --primary: #154b3e;
  --primary-deep: #064733;
  --primary-second: #025b44;
  --primary-10: #154b3e1a;
  --primary-15: #154b3e26;
  --primary-20: #154b3e33;
  --accent: #17c64f;
  --accent-soft: #e0ffc3;
  --cream: #fbf7eb;
  --cream-2: #f2ede3;
  --gray: #5e5e5e;
  --dark: #1a1a1a;
  --logo: #154b3e;
  --color: #154b3e;
  --white: #fff;
  --black: #000;
  --font-heading: "Funnel Display", Inter, sans-serif;
  --font-body: Inter, sans-serif;
}

/* ---------- Global typography polish ---------- */
body {
  font-family: var(--font-body);
  color: rgba(26, 26, 26, 0.85);
  background-color: var(--cream);
}

h1, h2, h3, h4, h5, h6,
.heading-h1,
.heading-h2,
.heading-h3,
.heading-h4,
.display-heading,
.tit-e,
.hero-cta-title,
.ml-cta-title,
.walsh-heading-small {
  font-family: var(--font-heading);
}

.heading-h1 .yellow,
.yellow {
  color: var(--accent) !important;
}

/* ---------- Nav ---------- */
.nav-component,
.nav-component.ani,
.nav-component-copy,
.nav-component-copy.ani {
  background-color: transparent !important;
  border-bottom: none;
}

.nav-component-copy,
.nav-component-copy.ani {
  background-color: rgba(251, 247, 235, 0.92) !important;
  border-bottom: 1px solid rgba(21, 75, 62, 0.08);
}

.nav-component-copy.is-sticky {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 10px 32px rgba(21, 75, 62, 0.1);
}

.nav-link,
.nav-link-copy,
.nav-link.mobo,
.nav-link.mobo-copy {
  color: var(--primary-deep) !important;
  font-weight: 600;
}

.nav-link:hover,
.nav-link-copy:hover {
  color: var(--primary) !important;
}

.button-asle,
.button-asle.nav,
.button-asle.hero,
.button-main,
.button-main.main,
.button-main.form {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.button-asle:hover,
.button-main:hover {
  background-color: var(--primary-deep) !important;
  box-shadow: 0 10px 28px rgba(21, 75, 62, 0.28);
  transform: translateY(-1px);
}

.button-border {
  border-color: var(--primary) !important;
}

/* ---------- Hero (light) ---------- */
.hero-section {
  background-image: linear-gradient(135deg, #fbf7eb 0%, #e0ffc3 45%, #fbf7eb 100%) !important;
  background-color: var(--cream);
}

.hero-section .heading-h1 {
  color: var(--primary-deep);
  font-family: var(--font-heading);
}

.hero-section .paragraph {
  color: rgba(21, 75, 62, 0.75);
}

.hero-section .gradient {
  background-color: rgba(23, 198, 79, 0.25) !important;
}

/* ---------- Dark slider hero ---------- */
.slide-image {
  background-image:
    linear-gradient(105deg, rgba(6, 71, 51, 0.88) 0%, rgba(21, 75, 62, 0.55) 48%, rgba(0, 0, 0, 0.25) 100%),
    url("../images/676c16f7558ab1768e3ddcba_pexels-olly-3768131.avif") !important;
  background-position: 0 0, 50% !important;
  background-size: auto, cover !important;
}

.slide-image-two {
  background-image:
    linear-gradient(105deg, rgba(6, 71, 51, 0.9) 0%, rgba(2, 91, 68, 0.55) 50%, rgba(0, 0, 0, 0.3) 100%),
    url("../images/bg-2.avif") !important;
}

.display-heading.hero {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.03em;
}

.hero-slider-left .display-heading.hero {
  font-family: var(--font-heading) !important;
}

.hero-slider-left .hero-block .button-text {
  font-family: var(--font-body);
}

/* Hero contact form — YPS glass on green */
.slider-section .cta_form-wrap.hero-cta-form {
  border: 1px solid rgba(224, 255, 195, 0.35);
  background: rgba(6, 71, 51, 0.55);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
}

.hero-cta-title {
  font-family: var(--font-heading) !important;
  color: var(--accent-soft) !important;
  letter-spacing: 0.08em;
}

.hero-cta-input {
  border-color: rgba(224, 255, 195, 0.45) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.hero-cta-input:focus {
  border-color: var(--accent) !important;
  background: rgba(255, 255, 255, 0.1) !important;
}

.hero-cta-submit {
  background: var(--accent) !important;
  color: var(--primary-deep) !important;
  font-weight: 700 !important;
}

.hero-cta-submit:hover {
  background: var(--accent-soft) !important;
  color: var(--primary-deep) !important;
}

/* ---------- Practice areas ---------- */
.practices-section {
  background: var(--cream);
  padding-top: 100px;
  padding-bottom: 100px;
}

.practices-section .heading-h2 {
  color: var(--primary-deep);
  font-family: var(--font-heading);
}

.practices-section .line {
  background: var(--accent) !important;
}

/* Practice card surfaces handled in design-polish.css (3D) */
.practices-section .gradiant {
  background-color: transparent !important;
}

/* ---------- Process / steps ---------- */
.step-section {
  background-color: rgba(21, 75, 62, 0.08) !important;
}

.step-section .heading-h2,
.step-section .heading-h3,
.step-section .number {
  color: var(--primary-deep);
  font-family: var(--font-heading);
}

.step-section .button-asle {
  background-color: var(--primary) !important;
}

/* ---------- Features ---------- */
.featured-section {
  background: #fff;
}

.featured-section .heading-h2 {
  color: var(--primary-deep);
  font-family: var(--font-heading);
}

.button-2.secoundary {
  color: var(--primary) !important;
}

.button-2.secoundary:hover {
  color: var(--accent) !important;
}

/* ---------- Team ---------- */
.team-section {
  background: linear-gradient(180deg, var(--cream) 0%, #fff 100%);
}

.team-section .heading-h2 {
  color: var(--primary-deep);
  font-family: var(--font-heading);
}

.team-section .gradient {
  background-color: rgba(23, 198, 79, 0.2) !important;
}

/* ---------- Testimonials ---------- */
.testimonials-section {
  background: var(--cream-2);
}

.testimonials-section .heading-h2 {
  color: var(--primary-deep);
  font-family: var(--font-heading);
}

.client-review-card,
.test-card {
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(21, 75, 62, 0.06);
}

/* ---------- Existing CTA band — calm, professional ---------- */
.cta-sections {
  background: var(--cream) !important;
}

.cta-sections .heading-h2 {
  color: var(--primary-deep) !important;
  font-family: var(--font-heading);
}

.cta-sections .button-main {
  background: var(--primary-deep) !important;
  color: #fff !important;
  border-color: var(--primary-deep) !important;
  font-weight: 700;
}

.cta-sections .button-main:hover {
  background: var(--primary) !important;
  color: #fff !important;
}

/* ---------- Consulting form ---------- */
.colsulting-section {
  background: #fff;
}

.colsulting-section .heading-h2 {
  color: var(--primary-deep);
  font-family: var(--font-heading);
}

.colsulting-section .line {
  background: var(--accent) !important;
}

.field:focus {
  border-color: var(--primary) !important;
  outline-color: var(--primary);
}

/* ---------- Mennie CTA remapped — light professional booking ---------- */
.section_cta {
  --ml-white: #064733;
  --ml-navy: #fbf7eb;
  --ml-gold: #17c64f;
  --ml-muted: #5a6b64;
  --ml-card: #ffffff;
  --ml-border: rgba(21, 75, 62, 0.12);
  --ml-glass: rgba(21, 75, 62, 0.04);
  --ml-font: "Funnel Display", Inter, sans-serif;
  background-color: #fff !important;
  color: var(--primary-deep) !important;
}

.section_cta .ml-cta-title,
.section_cta .ml-cta-subtitle,
.section_cta .ml-cta-desc {
  font-family: var(--font-heading);
  color: var(--primary-deep) !important;
}

.section_cta .ml-cta-gold {
  color: var(--primary) !important;
}

.section_cta .ml-cta-btn {
  background-color: var(--primary-deep) !important;
  border-color: var(--primary-deep) !important;
  color: #fff !important;
  font-family: var(--font-heading) !important;
}

.section_cta .ml-cta-btn:hover {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.section_cta .ml-cta-btn-text {
  color: #fff !important;
}

.section_cta .ml-cta-btn:hover .ml-cta-btn-text {
  color: #fff !important;
  transform: none !important;
}

.section_cta .ml-cta-btn-text-alt {
  color: #fff !important;
  display: none !important;
}

.section_cta .ml-cta-form-card {
  background-color: #fff !important;
  border: 1px solid rgba(21, 75, 62, 0.1);
}

.section_cta .ml-cta-image-wrap {
  background-color: var(--cream) !important;
}

/* ---------- Footer ---------- */
.footer-section {
  background: var(--primary-deep) !important;
  color: #fff;
}

.footer-section .paragraph,
.footer-section .walsh-heading-small,
.footer-section a {
  color: rgba(255, 255, 255, 0.85) !important;
}

.footer-section a:hover {
  color: #fff !important;
  opacity: 1;
}

.footer-section .main-logo,
.footer-section .footer-logo {
  filter: brightness(0) invert(1);
}

/* ---------- WhatsApp accent ---------- */
.whatsapp-wrapper {
  background-color: var(--primary-deep) !important;
  border-color: rgba(23, 198, 79, 0.45) !important;
}

.live-icon {
  background-color: var(--accent) !important;
}

/* ---------- Misc polish ---------- */
.line {
  background-color: var(--accent);
}

.top-kicu-wrapper .tit-e,
.number {
  color: var(--primary);
}

.page-wrappper,
.main-wrappper {
  background-color: var(--cream);
}