:root {
  --font-display: 'Jost', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --body-font-family: var(--font-body);

  
  --text-xs: clamp(0.6875rem, 0.66rem + 0.1vw, 0.75rem);
  --text-sm: clamp(0.8125rem, 0.78rem + 0.12vw, 0.875rem);
  --text-base: clamp(1rem, 0.95rem + 0.18vw, 1.0625rem);
  --text-md: clamp(1.0625rem, 1rem + 0.22vw, 1.125rem);
  --text-lg: clamp(1.125rem, 1.05rem + 0.28vw, 1.1875rem);
  --text-xl: clamp(1.1875rem, 1.08rem + 0.32vw, 1.3125rem);

  
  --heading-page: clamp(1.875rem, 3.25vw, 2.75rem);
  --heading-section: clamp(1.625rem, 2.5vw, 2.25rem);
  --heading-card: clamp(1.25rem, 1.85vw, 1.5rem);

  
  --title-caps: clamp(0.8125rem, 0.76rem + 0.22vw, 0.875rem);
  --heading-overline: var(--heading-section);
  --label-upper: var(--title-caps);

  
  --hero-brand-size: clamp(2.5rem, 6.75vw, 4.125rem);
  --hero-display-size: clamp(2.25rem, 5.5vw, 3.75rem);
  --text-lead-size: clamp(1.0625rem, 1rem + 0.3vw, 1.125rem);

  --letter-spacing-tight: -0.02em;
  --letter-spacing-wide: 0.08em;
  --letter-spacing-caps: 0.12em;
  --letter-spacing-caps-tight: 0.1em;
  --leading-tight: 1.12;
  --leading-snug: 1.32;
  --leading-normal: 1.58;
  --leading-relaxed: 1.72;
  --leading-editorial: 1.78;

  
  --white-color: #f8f7f2;
  --section-bg-color: #f2ece4;
  --surface-muted: #faf8f4;
  --dark-color: #2a2a2a;
  --title-color: #2a2a2a;
  --p-color: #4a4a4a;
  --grey-color: #ebe6dc;
  --line-subtle: rgba(42, 42, 42, 0.08);
  --shadow-minimal: 0 1px 0 rgba(42, 42, 42, 0.06);

  
  --portfolio-card-text: #6b665e;
  --portfolio-card-label-tracking: 0.14em;
  --portfolio-card-desc-tracking: 0.055em;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background-color: var(--white-color);
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body) !important;
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  background-color: var(--white-color) !important;
  color: var(--p-color);
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

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

main {
  background-color: var(--white-color);
}


.navbar.bg-light.shadow-lg {
  background-color: color-mix(in srgb, var(--white-color) 98%, #fff) !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--line-subtle) !important;
}

@media (max-width: 991.98px) {
  .navbar.site-nav.bg-light.shadow-lg {
    background: transparent !important;
    border-bottom: none !important;
  }
}

h1,
h2,
h3,
.navbar-brand strong,
.news-title,
.news-detail-title {
  font-family: var(--font-display) !important;
  letter-spacing: var(--letter-spacing-tight);
  font-weight: 700;
}

h4,
h5,
h6,
.portfolio-title {
  font-family: var(--font-display) !important;
  letter-spacing: var(--letter-spacing-tight);
  font-weight: 600;
}


h1:not(.hero-headline) {
  font-size: var(--heading-page) !important;
  line-height: var(--leading-tight) !important;
}

h2 {
  font-size: var(--heading-section) !important;
  line-height: var(--leading-snug) !important;
  text-wrap: balance;
}

h3 {
  font-size: var(--heading-card) !important;
  line-height: var(--leading-snug) !important;
}

h4,
.portfolio-title {
  font-size: clamp(1.125rem, 1.5vw, 1.375rem) !important;
  line-height: var(--leading-snug) !important;
}

h5 {
  font-size: var(--text-md) !important;
  line-height: var(--leading-snug) !important;
}

h6 {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
}

p {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  line-height: var(--leading-relaxed) !important;
}

.navbar-brand {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  letter-spacing: var(--letter-spacing-tight);
}

.navbar-nav .nav-link {
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
}

@media screen and (min-width: 992px) {
  .navbar-nav .nav-link {
    font-size: var(--text-lg) !important;
  }
}


.hero .hero-kicker,
.hero .hero-headline {
  color: var(--title-color) !important;
}

.hero-kicker {
  font-family: var(--font-display) !important;
  font-size: var(--hero-brand-size) !important;
  font-weight: 600 !important;
  letter-spacing: var(--letter-spacing-caps) !important;
  text-transform: uppercase;
  line-height: 1.08 !important;
}

.hero .heroText .hero-headline {
  font-size: var(--hero-display-size) !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  text-wrap: balance;
}

.hero .heroText .lead-hero {
  font-family: var(--font-body) !important;
  font-size: var(--text-lead-size) !important;
  font-weight: 400 !important;
  line-height: var(--leading-editorial) !important;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.01em;
}

.hero .hero-lead {
  color: var(--p-color) !important;
}

.hero .custom-underline {
  border-bottom-color: var(--title-color) !important;
  color: var(--title-color) !important;
}

.hero .news-detail-title {
  color: var(--title-color) !important;
}

.hero .social-share-link,
.hero .social-share-link + span {
  color: var(--p-color) !important;
}

.hero .heroText .d-flex span {
  color: var(--p-color);
}


.benefits-strip .benefits-strip__kicker {
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: rgba(42, 42, 42, 0.5) !important;
  margin: 0 !important;
}

.benefits-strip .benefits-strip__section-title {
  font-family: var(--font-display) !important;
  font-size: clamp(1.125rem, 0.95rem + 0.55vw, 1.5rem) !important;
  font-weight: 600 !important;
  letter-spacing: var(--letter-spacing-caps-tight) !important;
  text-transform: uppercase !important;
  line-height: var(--leading-snug) !important;
  color: var(--title-color) !important;
}

.benefits-strip .benefits-strip__title {
  font-family: var(--font-display) !important;
  font-size: var(--title-caps) !important;
  font-weight: 600 !important;
  letter-spacing: var(--letter-spacing-caps-tight) !important;
  text-transform: uppercase !important;
  line-height: var(--leading-snug) !important;
  margin: 0 0 0.65rem !important;
  color: var(--title-color) !important;
}

.benefits-strip .benefits-strip__text {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  line-height: var(--leading-relaxed) !important;
  margin: 0 !important;
  color: var(--p-color) !important;
}


.services-create .services-create__title,
#portfolio-grid .portfolio-section__title,
#contact .contact-section__title,
#portfolio .portfolio-carousel__title {
  font-family: var(--font-display) !important;
  font-size: var(--heading-section) !important;
  font-weight: 600 !important;
  letter-spacing: var(--letter-spacing-caps-tight) !important;
  text-transform: uppercase !important;
  line-height: var(--leading-snug) !important;
  text-wrap: balance;
  margin-bottom: 1rem !important;
  color: var(--title-color) !important;
}

.services-create .services-create__intro,
#portfolio .portfolio-carousel__intro {
  font-family: var(--font-body) !important;
  font-size: var(--text-md) !important;
  font-weight: 400 !important;
  line-height: var(--leading-editorial) !important;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  color: var(--p-color) !important;
}

.services-create .services-create__card-title {
  font-family: var(--font-display) !important;
  font-size: var(--title-caps) !important;
  font-weight: 600 !important;
  letter-spacing: var(--letter-spacing-caps-tight) !important;
  text-transform: uppercase !important;
  line-height: var(--leading-snug) !important;
  color: var(--title-color) !important;
}

.services-create .services-create__card-text {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  line-height: var(--leading-relaxed) !important;
  color: var(--p-color) !important;
}

#portfolio .portfolio-slide__title {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  letter-spacing: var(--letter-spacing-caps-tight) !important;
  color: var(--title-color) !important;
}


.portfolio-intro {
  font-size: var(--text-md) !important;
  line-height: var(--leading-editorial) !important;
  max-width: 42rem;
  color: var(--p-color) !important;
}


#portfolio-grid .portfolio-thumb .portfolio-info {
  margin: 0 !important;
  padding: 1rem 0 0;
  text-align: left;
}

#portfolio-grid .portfolio-thumb .portfolio-card__label {
  font-family: var(--font-display) !important;
  font-size: var(--text-xs) !important;
  font-weight: 400 !important;
  letter-spacing: var(--portfolio-card-label-tracking) !important;
  text-transform: uppercase !important;
  line-height: 1.35 !important;
  color: var(--portfolio-card-text) !important;
  margin: 0 0 0.45rem !important;
}

#portfolio-grid .portfolio-thumb .portfolio-card__desc {
  font-family: var(--font-display) !important;
  font-size: clamp(0.75rem, 0.68rem + 0.32vw, 0.9375rem) !important;
  font-weight: 600 !important;
  letter-spacing: var(--portfolio-card-desc-tracking) !important;
  text-transform: uppercase !important;
  line-height: 1.38 !important;
  color: var(--portfolio-card-text) !important;
  margin: 0 !important;
}


.proof-stat {
  font-family: var(--font-display) !important;
  font-size: var(--text-xl) !important;
  font-weight: 700 !important;
  line-height: var(--leading-snug) !important;
}

.proof-note {
  font-size: var(--text-sm) !important;
  line-height: var(--leading-normal) !important;
}

.form-label {
  font-family: var(--font-body) !important;
  font-size: var(--text-sm) !important;
}


.site-footer .footer-credit {
  font-family: var(--font-body) !important;
  font-size: clamp(0.625rem, 0.58rem + 0.12vw, 0.6875rem) !important;
  line-height: 1.4 !important;
  color: rgba(42, 42, 42, 0.65) !important;
}

.site-footer .footer-credit__powered {
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
}

.site-footer .footer-credit__link {
  opacity: 0.92;
  transition: opacity 0.2s ease;
}

.site-footer .footer-credit__link:hover {
  opacity: 1 !important;
}


.navbar .nav-link:focus-visible,
.navbar-brand:focus-visible {
  outline: 2px solid var(--title-color);
  outline-offset: 3px;
  border-radius: 4px;
}

.lang-switch__link:focus-visible {
  outline: 2px solid var(--title-color);
  outline-offset: 2px;
  border-radius: 4px;
}

.contact-form .form-control:focus {
  border-color: var(--title-color);
  box-shadow: 0 0 0 0.15rem rgba(42, 42, 42, 0.12);
}


.service-detail-lightbox__inner {
  max-width: 38rem;
  padding: 2rem 2.25rem;
  margin: 0 auto;
  background: var(--surface-muted, var(--white-color));
  border-radius: 0.5rem;
  border: 1px solid var(--line-subtle);
  text-align: left;
  box-shadow: none;
}

.service-detail-lightbox__title {
  font-family: var(--font-display) !important;
  font-size: var(--heading-card) !important;
  font-weight: 700 !important;
  line-height: var(--leading-snug) !important;
  margin: 0 0 1.25rem !important;
  color: var(--title-color) !important;
}

.service-detail-lightbox__body p {
  font-family: var(--font-body) !important;
  font-size: var(--text-base) !important;
  font-weight: 400 !important;
  line-height: var(--leading-relaxed) !important;
  margin: 0 0 1rem !important;
  color: var(--p-color) !important;
}

.service-detail-lightbox__body p:last-child {
  margin-bottom: 0 !important;
}


.mfp-service-detail .mfp-content {
  max-width: 42rem;
  width: 100%;
  padding: 0 1rem;
  box-sizing: border-box;
  vertical-align: middle;
}

.mfp-service-detail .mfp-container {
  padding: 2.5rem 1rem;
  box-sizing: border-box;
}


.mfp-service-detail .mfp-close {
  color: #fff !important;
  opacity: 0.92;
  right: 8px;
  top: 8px;
  width: 48px;
  height: 48px;
  line-height: 48px;
  font-size: 2rem;
  padding: 0;
  z-index: 2000;
}

.mfp-service-detail .mfp-close:hover,
.mfp-service-detail .mfp-close:focus {
  opacity: 1;
  color: #fff !important;
}