/* ==========================================================================
   Logo & Brand Styling
   ========================================================================== */

.logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.logo-link img {
  height: 52px;
  width: auto;
  max-width: none;
  display: block;
  object-fit: contain;
}

.footer-logo-wrapper .logo-link img {
  height: 56px;
  width: auto;
  max-width: none;
}

/* ==========================================================================
   Navigation Typography & Spacing
   ========================================================================== */

.header-container-wrapper {
  grid-column-gap: 28px;
  align-items: center;
}

.nav-menu-left-side {
  grid-column-gap: 38px;
  align-items: center;
}

.list-nav-menu {
  grid-column-gap: 28px;
  align-items: center;
}

.nav-link {
  color: #1a2e2b;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}

.nav-link:hover {
  color: #0b9e43;
}

.nav-link.w--current,
.nav-link.current {
  color: #02413e;
  font-weight: 700;
}

.header-nav-link,
.dropdown-toogle.w-dropdown-toggle {
  color: #1a2e2b;
  font-size: 16.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  padding: 0;
  transition: color 0.2s ease;
}

.header-nav-link:hover,
.dropdown-toogle.w-dropdown-toggle:hover {
  color: #0b9e43;
}

.header-nav-link.w--current {
  color: #02413e;
  font-weight: 700;
}

.nav-arrow {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.nav-chevron {
  width: 12px;
  height: 8px;
  margin-left: 6px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform 0.2s ease;
}

.w-dropdown.w--open .nav-chevron,
.w-dropdown-toggle.w--open .nav-chevron {
  transform: rotate(180deg);
}

.header-wrapper .dropdown-list.dropdown-v2 {
  transform: none;
  min-width: 220px;
}

/* Home V2 uses the template's dark header and split-image hero. */
.home-v2-header {
  background-color: #02413e;
}

.home-v2-header .header-nav-link,
.home-v2-header .dropdown-toogle.w-dropdown-toggle {
  color: #ffffff;
}

.home-v2-header .header-nav-link:hover,
.home-v2-header .dropdown-toogle.w-dropdown-toggle:hover {
  color: #66d18d;
}

.home-v2-header .hamburger-menu-line {
  background-color: #ffffff;
}

.home-v2-hero-shell {
  background-color: #02413e;
  position: relative;
  overflow: hidden;
}

.home-v2-hero-shell .section.hero.v2 {
  padding-top: clamp(44px, 6vw, 76px);
  padding-bottom: clamp(80px, 10vw, 132px);
  overflow: visible;
}

.home-v2-hero-shell .hero-v2-grid-wrapper {
  grid-template-columns: minmax(0, 0.9fr) minmax(420px, 1.1fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: stretch;
}

.home-v2-content {
  display: flex;
  min-height: 520px;
  flex-direction: column;
  justify-content: flex-start;
  padding: clamp(18px, 3vw, 42px) 0 clamp(26px, 4vw, 56px) clamp(22px, 4vw, 64px);
}

.home-v2-trust {
  display: grid;
  gap: 8px;
  margin-top: auto;
  padding-top: 56px;
}

.home-v2-image {
  min-height: 560px;
  border-radius: 28px;
  overflow: hidden;
}

.home-v2-hero-shell .half-bg-bottom.hero-v2 {
  display: none;
}

/* ==========================================================================
   Modern Typography Hierarchy Scale
   ========================================================================== */

.display-12 {
  font-size: clamp(2.35rem, 3.8vw, 3.35rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
  font-weight: 700 !important;
}

.vertical-line-decoration.hero {
  height: 42px !important;
  min-height: 42px !important;
  margin-top: 5px !important;
  border-radius: 2px !important;
}

.display-11 {
  font-size: clamp(2.1rem, 3.4vw, 2.85rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

.display-10 {
  font-size: clamp(1.85rem, 2.6vw, 2.35rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -0.02em !important;
  font-weight: 700 !important;
}

.display-9 {
  font-size: clamp(1.6rem, 2.2vw, 1.95rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.015em !important;
  font-weight: 700 !important;
}

.display-8 {
  font-size: clamp(1.35rem, 1.8vw, 1.65rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
  font-weight: 700 !important;
}

.display-5 {
  font-size: clamp(1.15rem, 1.35vw, 1.3rem) !important;
  line-height: 1.35 !important;
  letter-spacing: -0.01em !important;
}

.display-6 {
  font-size: clamp(1.25rem, 1.6vw, 1.5rem) !important;
  line-height: 1.3 !important;
  letter-spacing: -0.015em !important;
  font-weight: 700 !important;
}

.paragraph-large {
  font-size: clamp(1rem, 1.1vw, 1.075rem) !important;
  line-height: 1.6 !important;
}

.paragraph-medium {
  font-size: 0.95rem !important;
  line-height: 1.55 !important;
}

.footer-disclaimer {
  margin: 0;
  max-width: 36rem;
  font-size: 0.75rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.62);
}

.footer-contact {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.7;
  font-weight: 400 !important;
}

.footer-contact a {
  font-weight: 400 !important;
}

.footer-contact-name {
  font-weight: 600;
}

.accordion-top h3 {
  font-size: clamp(1.15rem, 1.35vw, 1.3rem) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   Page Rhythm & Equal-height Cards
   ========================================================================== */

.section {
  padding-top: clamp(80px, 9vw, 112px);
  padding-bottom: clamp(80px, 9vw, 112px);
}

.section.pd-200px,
.section.pd-top-200px {
  padding-top: clamp(96px, 11vw, 136px);
}

.section.pd-200px,
.section.pd-bottom-200px {
  padding-bottom: clamp(96px, 11vw, 136px);
}

.section.hero.v8 {
  padding-top: clamp(56px, 7vw, 80px);
  padding-bottom: clamp(56px, 7vw, 80px);
}

.section.hero.v8 + .section.pd-top-0px {
  padding-top: 0;
}

.equal-height-grid {
  align-items: stretch !important;
}

.equal-height-grid > .equal-height-card-item {
  display: flex;
  min-width: 0;
}

.equal-height-grid .service-card-link {
  display: flex;
  width: 100%;
}

.equal-height-grid .content-card-v2 {
  display: flex;
  width: 100%;
  min-height: 230px;
  flex-direction: column;
  align-items: flex-start;
}

.card.content-card-v2 {
  padding: clamp(28px, 3vw, 40px) clamp(22px, 2.5vw, 32px);
}

.contact-card.v2 {
  min-height: 178px;
}

/* The black panel spans the hero and the green card sits on top of its right side. */
.service-detail .service-single-card {
  display: none;
}

.service-detail .service-single {
  padding: 12px 0 0 !important;
  overflow: visible;
}

.service-detail .service-single-wrapper {
  position: relative;
  display: block !important;
}

.service-detail-intro {
  position: relative;
  z-index: 0;
  background: #090e0b;
  border-radius: 32px;
  min-height: 460px;
  padding: clamp(56px, 6vw, 80px) clamp(390px, 36vw, 470px) clamp(64px, 6vw, 88px) clamp(40px, 4vw, 64px);
  overflow: hidden;
}

.service-detail-intro .service-shape-wrapper {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(340px, 42%);
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
}

.service-detail-intro .service-bg-shape {
  height: 100%;
  width: auto;
  max-width: none;
  object-fit: cover;
  object-position: top right;
  opacity: 0.9;
}

.service-detail-intro .line-left---content {
  position: relative;
  z-index: 1;
}

.home-hero-bg-shape {
  position: absolute;
  top: 0;
  right: 0;
  max-width: 340px;
  pointer-events: none;
  opacity: 0.7;
}

.service-highlights {
  display: grid;
  gap: 18px;
}

.service-check {
  width: 24px;
  height: 24px;
  flex: none;
}

.service-detail .card.form-wrapper.service-form {
  position: absolute !important;
  z-index: 2;
  top: 52px;
  right: 28px;
  width: min(390px, 34%);
  margin: 0 !important;
  padding: 44px 32px 40px !important;
  border-radius: 28px;
}

.service-detail .service-form .display-7 {
  font-size: clamp(1.55rem, 2vw, 1.95rem) !important;
  line-height: 1.25 !important;
}

.service-detail .service-form .grid-form {
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}

.service-detail .service-form input[type="submit"].button-primary {
  width: 100% !important;
  min-height: 52px !important;
}

.service-detail .service-form a,
.service-detail .service-form .error-message-wrapper {
  color: #fff;
}

.service-detail-body {
  display: grid;
  gap: clamp(64px, 7vw, 96px);
  max-width: 740px;
  margin-top: clamp(72px, 8vw, 112px);
}

.service-detail-section h2 {
  margin: 0 0 22px;
}

.service-detail-copy {
  display: grid;
  gap: 20px;
}

.service-detail-copy p,
.service-detail-copy .article-list {
  margin-top: 0;
}

.service-detail-copy .article-list li {
  margin-top: 14px;
  font-size: 1.0625rem;
  line-height: 1.65;
}

.service-detail-photo {
  margin: 8px 0 0;
  border-radius: 24px;
  overflow: hidden;
}

.service-detail-photo img {
  display: block;
  width: 100%;
  height: 420px;
  object-fit: cover;
  object-position: center 28%;
}

/* ==========================================================================
   Contact Form Layout & Styles
   ========================================================================== */

.grid-form {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  grid-column-gap: 20px !important;
  grid-row-gap: 20px !important;
  align-items: start !important;
}

.grid-form .grid-form-full {
  grid-column: 1 / -1 !important;
  width: 100% !important;
}

.grid-form .grid-form-action {
  grid-column: 1 / -1 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin-top: 6px !important;
}

.grid-form label {
  display: block !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 8px !important;
  line-height: 1.25 !important;
}

.grid-form .input.medium {
  height: 48px !important;
  border-radius: 999px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  padding: 10px 20px !important;
  font-size: 15px !important;
  color: #1f2937 !important;
  width: 100% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.grid-form .input.medium:focus {
  border-color: #0b9e43 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(11, 158, 67, 0.15) !important;
}

.grid-form .text-area.medium {
  min-height: 110px !important;
  border-radius: 18px !important;
  border: 1px solid #e2e8f0 !important;
  background-color: #ffffff !important;
  padding: 14px 20px !important;
  font-size: 15px !important;
  color: #1f2937 !important;
  width: 100% !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  resize: vertical !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.grid-form .text-area.medium:focus {
  border-color: #0b9e43 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(11, 158, 67, 0.15) !important;
}

.grid-form .input::placeholder,
.grid-form .text-area::placeholder {
  color: #9ca3af !important;
  font-weight: 400 !important;
}

.grid-form input[type="submit"].button-primary,
.grid-form .button-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  height: auto !important;
  min-height: 46px !important;
  padding: 12px 32px !important;
  background-color: #0b9e43 !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  border: none !important;
  cursor: pointer !important;
  justify-self: start !important;
  align-self: start !important;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
  box-shadow: 0 2px 4px rgba(11, 158, 67, 0.2) !important;
}

.grid-form input[type="submit"].button-primary:hover,
.grid-form .button-primary:hover {
  background-color: #098739 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 8px rgba(11, 158, 67, 0.25) !important;
}

@media screen and (max-width: 640px) {
  .grid-form {
    grid-template-columns: 1fr !important;
    grid-row-gap: 16px !important;
  }
}

/* ==========================================================================
   Content & Layout Helpers
   ========================================================================== */

.photo-crop-under-head {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 72%;
}

.photo-crop-panel {
  min-height: 420px;
  max-height: 620px;
}

.article-list {
  margin: 12px 0 0;
  padding-left: 1.25rem;
}

.article-list li {
  margin-top: 10px;
  font-size: 18px;
  line-height: 1.55;
}

.article-list li::marker {
  color: #09a144;
}

.w-form-done,
.w-form-fail {
  display: none;
}

.form-honey {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.error-message-wrapper a {
  color: inherit;
}

.service-card-link {
  height: 100%;
  color: inherit;
  text-decoration: none;
  display: block;
}

.service-card-link .card {
  height: 100%;
}

.accordion-top {
  cursor: pointer;
}

.credential-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.insight-meta {
  color: #5c675f;
  font-weight: 600;
}

.accordion-item.is-open .accordion-icon-line.vertical {
  opacity: 0;
}

/* ==========================================================================
   About Page: Resume Profile & Professional Background
   ========================================================================== */

.professional-profile-section {
  overflow: hidden;
}

.about-kha-profile {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  align-items: end;
  gap: clamp(36px, 6vw, 88px);
  max-width: 980px;
  margin: -20px auto 0;
  text-align: left;
}

.about-kha-copy {
  padding: 56px 0 52px;
}

.resume-eyebrow {
  display: block;
  margin-bottom: 16px;
  color: #24c875;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-kha-title {
  max-width: 680px;
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

.about-kha-title span {
  display: block;
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.42em;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.about-kha-copy p {
  max-width: 650px;
  margin: 24px 0 0;
  color: rgba(255, 255, 255, 0.78);
  font-size: 1rem;
  line-height: 1.7;
}

.about-kha-portrait {
  align-self: end;
  height: 360px;
}

.about-kha-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.24));
}

.professional-profile-divider {
  width: min(980px, 100%);
  height: 1px;
  margin: 0 auto 64px;
  background: rgba(255, 255, 255, 0.18);
}

.resume-panel {
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  text-align: left;
}

.resume-entry {
  display: grid;
  grid-template-columns: minmax(260px, 0.75fr) minmax(0, 1.25fr);
  gap: 48px;
  padding: 32px 36px;
  transition: background-color 0.22s ease;
}

.resume-entry + .resume-entry {
  border-top: 1px solid #e8ecea;
}

.resume-entry:hover {
  background: #f7faf9;
}

.resume-entry-heading {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 16px;
  align-items: start;
}

.resume-index {
  padding-top: 4px;
  color: #0a9f5b;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.experience-badge {
  display: inline-flex;
  align-items: center;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #024f4c;
  background: rgba(2, 79, 76, 0.08);
  padding: 5px 12px;
  border-radius: 100px;
  line-height: 1.35;
}

.experience-title {
  font-size: clamp(1.22rem, 1.8vw, 1.38rem) !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin: 12px 0 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
}

.experience-text {
  align-self: center;
  font-size: 0.9375rem !important;
  line-height: 1.62 !important;
  color: #4b5563 !important;
  margin: 0 !important;
}

/* ==========================================================================
   Micro-animations & Interactive Transitions
   ========================================================================== */

/* Button hover lift and arrow motion */
.button-primary,
.secondary-button,
.button-primary.hover-white,
.w-button {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

.button-primary:hover,
.secondary-button:hover,
.w-button:hover {
  transform: translateY(-2px);
}

.button-primary:hover {
  box-shadow: 0 10px 24px -6px rgba(2, 79, 76, 0.4);
}

.button-primary:active,
.secondary-button:active,
.w-button:active {
  transform: translateY(0) scale(0.98);
}

.button-primary .item-icon-right,
.button-primary .base-icon-font {
  display: inline-block;
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.button-primary:hover .item-icon-right,
.button-primary:hover .base-icon-font {
  transform: translateX(4px);
}

/* Card hover elevations across site */
.card:not(.service-dark-card):not(.card-shape-bg) {
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.28s ease;
}

.card.service-card-item:hover,
.card.content-card-v2:hover,
.card.contact-card:hover,
.card.service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 32px -6px rgba(0, 0, 0, 0.09), 0 4px 8px -2px rgba(0, 0, 0, 0.04);
  border-color: rgba(2, 79, 76, 0.24);
}

/* Interactive navigation links */
.nav-link {
  transition: color 0.2s ease, transform 0.2s ease;
}

.nav-link:hover {
  transform: translateY(-1px);
}

/* Service checkmark subtle interactive pulse */
.service-check {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.service-highlights > div:hover .service-check {
  transform: scale(1.15) rotate(4deg);
}

/* Scroll entrance reveal animations */
.fade-in-on-scroll {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fade-in-on-scroll,
  .button-primary,
  .secondary-button,
  .resume-entry,
  .card,
  .nav-link,
  .service-check {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}

@media screen and (max-width: 991px) {
  .about-kha-profile {
    grid-template-columns: minmax(0, 1fr) 240px;
    gap: 28px;
  }

  .about-kha-portrait {
    height: 300px;
  }

  .resume-entry {
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1.2fr);
    gap: 28px;
    padding: 28px;
  }
  .service-detail-intro {
    min-height: 0;
    padding: 48px 28px 56px;
  }

  .service-detail .card.form-wrapper.service-form {
    position: static !important;
    width: 100%;
    margin-top: 24px !important;
  }

  .service-detail-body {
    margin-top: 56px;
  }
}

@media screen and (max-width: 767px) {
  .about-kha-profile {
    grid-template-columns: 1fr;
    gap: 0;
    margin-top: 0;
  }

  .about-kha-copy {
    padding: 28px 0 24px;
  }

  .about-kha-portrait {
    width: min(280px, 90%);
    height: 300px;
    margin: 0 auto;
  }

  .professional-profile-divider {
    margin-bottom: 48px;
  }

  .resume-entry {
    grid-template-columns: 1fr;
    gap: 18px;
    padding: 26px 22px;
  }

  .logo-link img {
    height: 42px;
  }

  .home-v2-hero-shell .hero-v2-grid-wrapper {
    grid-template-columns: 1fr;
  }

  .home-v2-content {
    min-height: auto;
    padding: 8px 0 32px 20px;
  }

  .home-v2-trust {
    margin-top: 40px;
    padding-top: 0;
  }

  .home-v2-image {
    min-height: 380px;
  }

  .section {
    padding-top: 72px;
    padding-bottom: 72px;
  }

  .service-detail-intro {
    padding: 40px 24px 48px;
  }

  .service-detail .card.form-wrapper.service-form {
    position: static !important;
    width: 100%;
    margin-top: 20px !important;
  }

  .service-detail-body {
    gap: 56px;
    margin-top: 48px;
  }

  .service-detail-photo img {
    height: 260px;
  }

  .vertical-line-decoration.hero.horizontal-line---mbp {
    width: 42px !important;
    height: 3px !important;
    min-height: 3px !important;
    margin-top: 0 !important;
  }

  .photo-crop-panel {
    min-height: 300px;
    max-height: 440px;
  }
}