/* =========================================================
   ÉCLAT® — fashion production house
   ========================================================= */
:root {
  --black: #000;
  --white: #fff;
  --primary: #0e0e0e;
  --secondary: #111;
  --accent: #ff1f6d;
  --n-100: #fafafb;
  --n-200: #f2f2f2;
  --n-300: #e6e6e6;
  --n-400: #a3a3a3;
  --n-500: #a0a0a0;
  --n-600: #525252;
  --n-700: #404040;
  --w-10: #ffffff1a;
  --w-30: #ffffff4d;
  --w-50: #ffffff80;
  --w-70: #ffffffb3;
  --b-10: #0000001a;
  --b-30: #0000004d;
  --b-50: #00000080;

  --fs-body-1: 24px;
  --fs-body-2: 20px;
  --fs-body-3: 18px;
  --fs-body-4: 16px;
  --fs-body-5: 14px;
  --fs-body-6: 12px;
  --fs-h1: 120px;
  --fs-h2: 80px;
  --fs-h3: 64px;
  --fs-h4: 48px;
  --fs-h5: 40px;
  --fs-h6: 32px;
  --fs-work-title: 148px;

  --lh-heading: 1;
  --lh-h4: 1.083;
  --lh-h5: 1.2;
  --lh-h6: 1.25;
  --lh-body-1: 1.33;
  --lh-body-2: 1.4;
  --lh-body-3: 1.55;
  --lh-body-4: 1.5;
  --lh-body-5: 1.42;

  --ls-h1: -.04em;
  --ls-h234: -.03em;
  --ls-h5: -.02em;
  --ls-h6: -.01em;

  --container: 1440px;
  --pad-x: 48px;
  --pad-y: 120px;
  --sp-large: 80px;
  --sp-xmedium: 64px;
  --sp-medium: 48px;
  --sp-xsmall: 32px;
  --p-xmedium: 24px;
  --p-medium: 16px;
  --p-xsmall: 12px;
  --nav-offset: -92px;
}

@media (min-width: 1440px) {
  :root { --pad-x: 72px; --pad-y: 160px; }
}
@media (max-width: 991px) {
  :root {
    --fs-body-1: 22px; --fs-h1: 96px; --fs-h2: 64px; --fs-h3: 51px; --fs-h4: 38px; --fs-h5: 32px; --fs-h6: 25px;
    --fs-body-2: 18px; --fs-body-3: 16px; --fs-work-title: 104px;
    --p-xmedium: 20px; --pad-x: 32px; --sp-large: 64px; --pad-y: 80px; --sp-xmedium: 48px; --sp-xsmall: 24px;
  }
}
@media (max-width: 767px) {
  :root {
    --fs-body-1: 20px; --fs-h1: 76px; --fs-h2: 51px; --fs-h3: 40px; --fs-h4: 30px; --fs-h5: 25px; --fs-h6: 20px;
    --fs-body-4: 14px; --fs-body-2: 16px; --fs-body-3: 14px; --fs-work-title: 76px;
    --p-xmedium: 16px; --pad-x: 20px; --p-medium: 14px; --sp-large: 48px; --pad-y: 64px; --sp-xmedium: 32px; --sp-xsmall: 16px;
  }
}
@media (max-width: 479px) {
  :root {
    --fs-body-1: 16px; --fs-h1: 52px; --fs-h2: 40px; --fs-h3: 32px; --fs-h4: 24px; --fs-h5: 20px; --fs-h6: 16px;
    --fs-body-2: 14px; --fs-work-title: 52px;
    --p-xmedium: 14px; --pad-x: 16px; --p-medium: 12px; --sp-large: 32px; --pad-y: 48px; --sp-xmedium: 24px; --sp-xsmall: 12px;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: "Inter Tight", sans-serif;
  font-size: var(--fs-body-1);
  line-height: var(--lh-heading);
}
img { display: inline-block; max-width: 100%; vertical-align: middle; border: 0; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
input { font: inherit; }
.page-wrapper { position: relative; overflow-x: clip; }
.overflow-clip { overflow: clip; }
.hide { display: none; }

.container {
  position: relative; z-index: 6; height: 100%;
  max-width: var(--container); margin: 0 auto;
  padding-left: var(--pad-x); padding-right: var(--pad-x);
}
.container.absolute { position: absolute; inset: 0; z-index: 1; display: flex; justify-content: center; align-items: flex-end; pointer-events: none; }

.section { position: relative; padding-top: var(--pad-y); padding-bottom: var(--pad-y); }
.section.is-primary { background: var(--primary); }
.section.is-white { background: var(--white); }
.section.is-black { background: var(--black); }
.section.is-gray { background: var(--n-200); }
.section.padding-medium { padding-top: var(--sp-large); padding-bottom: var(--sp-large); }
.section.no-padding { padding-top: 0; padding-bottom: 0; }
.section.no-padding-top { padding-top: 0; }

/* 4-col guide lines */
.grid-overlay {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  max-width: var(--container); margin: 0 auto;
  padding: 0 var(--pad-x);
  display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px;
}
.line-overlay { border-left: 1px solid var(--w-10); width: 100%; height: 100%; }
.line-overlay.black { border-left-color: var(--b-10); }
.line-overlay._01 { grid-area: 1 / 2 / 2 / 3; }
.line-overlay._02 { grid-area: 1 / 3 / 2 / 4; }
.line-overlay._03 { grid-area: 1 / 4 / 2 / 5; }

/* ---------- type ---------- */
.heading-h1 { font-size: var(--fs-h1); line-height: var(--lh-heading); letter-spacing: var(--ls-h1); font-weight: 600; }
.heading-h1.color-white { color: var(--white); }
.heading-h1.color-white-10 { color: var(--w-10); }
.heading-h1.color-black-10 { color: var(--b-10); }
.heading-h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-h234); font-weight: 500; line-height: 1; }
.heading-h3.color-white { color: var(--white); }
.heading-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h234); font-weight: 500; }
.heading-h6 { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); }
.heading-h6.medium { font-weight: 500; }
.heading-h6.semi-boild { font-weight: 600; }
.r-logo { font-size: var(--fs-h4); letter-spacing: 0; vertical-align: top; margin-left: 6px; line-height: 1; }
.text-body-2 { font-size: var(--fs-body-2); line-height: var(--lh-body-2); }
.text-body-2.neutral-600 { color: var(--n-600); }
.text-body-3 { font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-weight: 500; }
.text-body-3.netrual-600 { color: var(--n-600); }
.text-body-3.color-bfbfbf { color: #bfbfbf; }
.text-body-4 { font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.text-body-4.semibold { font-weight: 600; }
.text-body-4.medium { font-weight: 500; }
.text-body-4.netrual-500 { color: var(--n-500); }
.text-body-4.netrual-600 { color: var(--n-600); }
.text-body-4.color-white { color: var(--white); }
.text-body-4.sup { align-self: flex-start; font-size: 12px; margin-top: 4px; }
.text-body-5 { font-size: var(--fs-body-5); line-height: var(--lh-body-5); font-weight: 500; color: var(--black); }
.text-body-5.normal { font-weight: 400; }
.text-body-5.netrual-600 { color: var(--n-600); }
.text-body-5.netrual-700 { color: var(--n-700); }
.text-body-5.color-white-50 { color: var(--w-50); }
.text-body-5.color-black-50 { color: var(--b-50); }
.text-body-5.underline { text-decoration: underline; }
.text-body-6 { font-size: var(--fs-body-6); line-height: var(--lh-body-1); color: var(--black); }
.text-body-6.medium { font-weight: 500; }
.text-body-6.upcase { text-transform: uppercase; }
.text-body-6.color-white, .text-body-6.medium.color-white, .text-body-6.upcase.color-white { color: var(--white); }
.text-body-6.color-black-50 { color: var(--b-50); }
.text-body-6.color-white-60 { color: #fff9; }
.text-align-end { text-align: right; }
.text-color-red { color: var(--accent); }
.display-flex { display: flex; justify-content: flex-start; align-items: flex-start; }
.display-flex.gap-15 { gap: 15px; }
.display-flex.space-between { justify-content: space-between; }
.display-flex.align-center { align-items: center; }
.display-flex.gap-7 { gap: 7px; }
.icon-24x24 { width: 24px; height: 24px; }
.icon-15x15 { width: 15px; height: 15px; }
.icon-16x16 { width: 16px; height: 16px; }
.stars { color: var(--accent); font-size: 14px; letter-spacing: 3px; line-height: 1; }
.stars-large { font-size: 20px; letter-spacing: 4px; }
.plus-mini { font-size: 14px; }

/* section labels */
.section-label-wrap { display: flex; justify-content: flex-start; align-items: flex-start; }
.label-content { display: inline-flex; align-items: center; gap: 8px; position: sticky; top: 100px; }
.label-line { background: var(--white); width: 2px; height: 14px; flex: none; }
.label-line.black { background: var(--black); }
.label-text { color: var(--white); font-size: var(--fs-body-4); line-height: var(--lh-body-4); text-transform: uppercase; font-weight: 500; }
.label-text.black { color: var(--black); }

/* ---------- buttons ---------- */
.primary-button, .secondar-button {
  position: relative; display: flex; justify-content: space-between; align-items: center;
  width: 100%; border-radius: 100px; overflow: hidden; text-decoration: none; text-align: left;
}
.secondar-button { z-index: 2; display: block; }
.layer-default {
  position: relative; z-index: 2; width: 100%;
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--p-xsmall) var(--p-xsmall) var(--p-xsmall) var(--p-xmedium);
  background: var(--black);
}
.layer-default.white { background: var(--white); gap: 8px; }
.layer-default.secondary { padding-right: var(--p-xmedium); justify-content: center; }
.layer-hover {
  position: absolute; inset: 0; z-index: 1; opacity: 0;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: var(--p-xsmall) var(--p-xsmall) var(--p-xsmall) var(--p-xmedium);
  background: var(--white); box-shadow: inset 4px 8px 20px 1px #0006;
}
.layer-hover.secondary { padding-right: var(--p-xmedium); justify-content: center; }
.text-button-wrap { position: relative; overflow: hidden; font-size: var(--fs-body-4); line-height: var(--lh-body-4); font-weight: 500; }
.text-button { display: inline-block; color: var(--white); text-transform: capitalize; }
.text-button.white { color: var(--black); font-weight: 600; }
.text-button.absolute { color: var(--black); }
.icon-button-wrap { position: relative; display: inline-flex; justify-content: center; align-items: center; width: 30px; height: 12px; overflow: hidden; }
.icon-button { width: 22px; height: 11px; display: block; }
.icon-button.absolute { position: absolute; }

/* underline link */
.link-underline-wrap { position: relative; display: inline-flex; overflow: hidden; text-decoration: none; }
.line-under-text { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--white); width: 100%; }
.text-link-underline.annoucement { color: var(--white); }

/* ---------- intro overlay ---------- */
.page-transition-overlay {
  position: fixed; inset: 0; z-index: 999; pointer-events: none;
  display: flex; justify-content: center; align-items: stretch; width: 100%; height: 100%;
}
.wing { background: var(--black); flex: 1 1 0; height: 100%; }
.wing.left-wing { transform-origin: 0% 50%; }
.wing.right-wing { transform-origin: 100% 50%; }
.transition-container { position: relative; flex: none; width: 100%; max-width: var(--container); padding: 0 var(--pad-x); }
.transition-grid { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; width: 100%; height: 100%; }
.transition-column { position: relative; width: 100%; height: 100%; pointer-events: none; }
.column-mask { position: absolute; inset: 0; z-index: 1; margin: 0 -6px; background: var(--black); }
.column-mask._1 { left: -100vw; }
.column-mask._4 { right: -100vw; }
.transition-line { position: absolute; top: 0; left: 0; z-index: 2; width: 1px; height: 0; background: var(--w-10); }
.logo-page-transition-wrap { position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); overflow: clip; }
.logo-page-transition { color: var(--white); font-family: Geist, sans-serif; font-size: var(--fs-h4); font-weight: 600; line-height: 1.1; white-space: nowrap; }
.logo-page-transition span { font-size: .5em; vertical-align: top; }

/* ---------- announcement ---------- */
.annoucement-bar { position: relative; z-index: 3; background: var(--primary); color: var(--white); font-size: var(--fs-body-6); line-height: var(--lh-body-1); text-transform: uppercase; font-weight: 500; }
.annoucement-bar-wrapper { height: 40px; padding: var(--p-xsmall) 0; display: flex; justify-content: center; align-items: center; gap: 12px; }
.dot { background: var(--white); border-radius: 36px; width: 6px; height: 6px; }

/* ---------- navbar ---------- */
.navbar { position: sticky; top: 0; z-index: 99; display: block; background: transparent; }
.navbar-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; padding: 24px 0; }
.logo-brand { min-height: 44px; }
.logo-brand-wrap { position: relative; display: inline-flex; overflow: hidden; text-decoration: none; }
.logo-image { display: block; font-family: Geist, sans-serif; font-weight: 600; font-size: 28px; line-height: 1.1; letter-spacing: -.02em; color: var(--white); }
.logo-image sup { font-size: 11px; vertical-align: top; margin-left: 2px; position: relative; top: 4px; }
.logo-image.absolute { position: absolute; top: 100%; left: 0; color: var(--black); }
.split-content { display: flex; flex-flow: column; gap: 4px; font-size: var(--fs-body-6); line-height: var(--lh-body-1); font-weight: 500; }
.split-content.white { color: var(--white); }
.split-content.has-button { flex-flow: row; justify-content: space-between; align-items: flex-start; }
.text-link-wrap { display: inline-flex; flex-direction: column; }
.text-link-nav { color: var(--black); text-decoration: none; }
.text-link-nav.white { color: inherit; }
.line-text-link { background: var(--n-500); width: 0%; height: 1px; }
.link-block { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--white); }
.icon-link-wrap { position: relative; display: inline-flex; align-items: center; overflow: hidden; }
.icon-link { width: 11.5px; height: 11.5px; display: block; }
.icon-link.absolute { position: absolute; top: 100%; left: 0; }
.menu-nav { position: relative; width: 25px; height: 20px; }
.hamburger-line-top { position: absolute; top: 0; right: 0; width: 21px; height: 1px; background: var(--white); }
.hamburger-line-bottm { position: absolute; top: 6px; right: 7px; width: 14px; height: 1px; background: var(--white); }
.navbar-bg { position: absolute; inset: 0; background: var(--white); opacity: 0; z-index: -1; }
.navbar-scroll-bg { position: absolute; inset: 0; z-index: -2; background: rgba(0,0,0,0); }
.navbar > .container { z-index: 7; }

.navigation-wrapoer {
  position: absolute; left: 0; right: 0; top: 100%; height: 0; overflow: hidden;
  background: var(--white); text-align: left;
}
.menu-dropdown {
  position: relative; z-index: 2; max-width: var(--container); margin: 0 auto;
  padding: 36px var(--pad-x) 56px;
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 12px;
}
.menu-left { grid-area: 1 / 1 / 2 / 7; display: flex; flex-flow: column; }
.menu-right { grid-area: 1 / 8 / 2 / 13; display: flex; flex-flow: column; justify-content: space-between; gap: 40px; }
.main-link { display: flex; flex-flow: column; overflow: hidden; color: var(--n-500); font-size: var(--fs-h3); font-weight: 600; text-decoration: none; }
.main-link.w--current { color: var(--black); }
.main-link-wrap { display: flex; justify-content: space-between; align-items: flex-end; padding: var(--p-medium) 0; }
.link-wrapper { display: flex; gap: 8px; }
.title-link-wrapper { position: relative; }
.title-link { font-size: var(--fs-h3); line-height: 1; font-weight: 600; }
.title-link.absolute { position: absolute; top: 100%; left: 0; color: var(--primary); }
.number-title { font-size: var(--fs-body-4); line-height: var(--lh-body-1); margin-top: 5px; font-weight: 400; display: inline-flex; }
.icon-link-nav { width: 0; height: 0; display: block; flex: none; }
.line { background: var(--n-500); width: 100%; height: 1px; }
.line.color-474747 { background: #47474780; }
.heading-menu-link { overflow: hidden; }
.heading { display: flex; gap: 8px; color: var(--n-500); padding-bottom: var(--p-medium); }
.content-menu-link { display: flex; flex-flow: column; gap: 8px; padding-top: var(--p-medium); }
.parent-menu-wrap { display: flex; justify-content: space-between; align-items: center; color: var(--n-500); text-decoration: none; transition: color .3s; }
.parent-menu-wrap:hover { color: var(--black); }
.parent-menu { overflow: hidden; }
.title-parent-menu { font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: 500; }
.button-wrap { max-width: 329px; overflow: hidden; }

/* ---------- hero ---------- */
.section.hero-home {
  position: sticky; top: 0; height: 95vh; min-height: 640px;
  margin-top: var(--nav-offset); padding-top: 180px; padding-bottom: 48px; overflow: clip;
  background: #e0561c;
}
.hero-home .container { z-index: 6; }
.hero-home-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; height: 100%; }
.left-hero-home { grid-column: span 2; display: flex; flex-flow: column; justify-content: space-between; }
.right-hero-home { grid-area: 1 / 4 / 2 / 5; display: flex; flex-flow: column; justify-content: space-between; align-items: flex-start; }
.title-hero-wrap { display: flex; flex-flow: column; }
.top-info-email { color: var(--n-600); font-family: "Space Grotesk", sans-serif; font-size: var(--fs-body-4); line-height: var(--lh-body-4); text-transform: uppercase; }
.top-info-email.color-white-50 { color: var(--w-50); }
.bottom-info-email { font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-weight: 500; }
.bottom-info-email.color-white { color: var(--white); }
.image-hero-home { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 10%; }
.hero-home .grid-overlay { z-index: 1; }
.tabs-hero { display: flex; flex-flow: column; width: 100%; }
.tabs-content-hero { position: relative; }
.tab-pane-hero { display: none; }
.tab-pane-hero.is-active { display: block; }
.pane-hero-content { position: relative; width: 100%; max-width: 262px; height: 238px; border-radius: 8px; overflow: hidden; }
.image-content-pane { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; }
.content-pane { display: flex; justify-content: space-between; padding: var(--p-medium); }
.label-content-hero { position: relative; display: inline-flex; align-items: center; gap: 4px; }
.label-line-hero { background: var(--white); width: 2px; height: 12px; }
.label-text-hero { color: var(--white); font-size: var(--fs-body-6); line-height: var(--lh-body-1); text-transform: uppercase; font-weight: 500; }
.tabs-menu-hero { display: flex; flex-flow: column; align-items: flex-start; margin-top: 58px; overflow: hidden; }
.tabs-link-hero { opacity: .5; cursor: pointer; transition: opacity .3s; }
.tabs-link-hero:hover, .tabs-link-hero.w--current { opacity: 1; }
.text-tabs-link-hero { color: var(--white); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); font-weight: 500; }
.text-tabs-link-hero._2 { padding-left: 12px; }
.button-hero-home { width: 100%; }
.text-hero-absolute {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; height: 320px;
  max-width: var(--container); margin: 0 auto; padding: 0 65px;
  mix-blend-mode: soft-light; display: flex; pointer-events: none;
}
.split-text-hero-absolute { position: absolute; bottom: 0; height: 100%; }
.split-text-hero-absolute svg { height: 100%; width: auto; overflow: visible; display: block; }
.hero-glyph { fill: #fff; font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 470px; letter-spacing: -.04em; }
@media (min-width: 1440px) { .text-hero-absolute { padding: 0 85px; } }

/* ---------- about ---------- */
.about-us-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.about-left-col { display: flex; flex-flow: column; gap: var(--sp-xsmall); margin-right: -12px; }
.image-about { width: 100%; aspect-ratio: 330 / 360; object-fit: cover; border-radius: 8px; }
.scroll-text-wrap { grid-area: 1 / 3 / 2 / 5; }
.heading-h4.text-scroll-2 { width: 90%; color: var(--w-30); }
.about-icon-cover { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; width: 100%; }
.about-quote { grid-column: 3 / 4; width: 90px; transform: rotate(180deg); }

/* ---------- approach ---------- */
.our-approach-wrapper { display: flex; flex-flow: column; gap: var(--sp-large); height: 250vh; }
.header-our-approach { display: flex; flex-flow: column; gap: 24px; }
.sub-header-our-approach { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; margin-top: 24px; }
.sub-header-our-approach .text-body-4 { grid-area: 1 / 3 / 2 / 4; }
.list-our-approach {
  position: sticky; top: 15vh; display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: auto auto; gap: 12px;
  place-items: start stretch;
}
.item-our-approach { position: relative; display: flex; flex-flow: column; justify-content: space-between; padding: 24px; background: var(--n-200); border-radius: 8px; }
.item-our-approach._1 { grid-column: span 1; }
.item-our-approach._2 { grid-column: span 1; gap: 32px; height: 100%; }
.item-our-approach._3 { grid-area: 1 / 3 / 2 / 5; min-height: 360px; isolation: isolate; overflow: clip; margin-right: -12px; }
.number-item-our-approach { display: flex; justify-content: space-between; align-items: center; }
.icon-item-our { display: flex; justify-content: center; align-items: center; width: 43px; height: 43px; background: var(--white); border-radius: 100px; }
.rating-comment { display: flex; flex-flow: column; gap: 16px; margin: 32px 0; }
.number-stat-our { display: flex; justify-content: space-between; align-items: flex-end; }
.text-stat-our { font-size: var(--fs-body-3); line-height: var(--lh-body-3); text-align: right; font-weight: 500; }
.header-item-our { display: flex; flex-flow: column; gap: 25px; }
.imge-cover-our { position: absolute; z-index: -1; top: 40px; right: 24px; width: 46%; height: calc(100% - 40px); object-fit: cover; object-position: 50% 0%; border-radius: 8px 8px 0 0; }
.bg-cover-image-2 { position: absolute; z-index: -1; inset: 85% 0 0; background-image: linear-gradient(#f2f2f200, #f2f2f2); }
.author-info-wrapper { display: flex; align-items: center; gap: 12px; }
.avatar-author { width: 48px; height: 48px; border-radius: 100px; object-fit: cover; }
.info-author { display: flex; flex-flow: column; }
.rating-testimonial { display: flex; align-items: center; }
.number-rating { color: var(--white); font-size: var(--fs-body-4); line-height: var(--lh-body-4); margin-right: 8px; font-weight: 600; }
.number-rating.color-black { color: var(--black); }
.name-author { color: var(--n-400); font-size: var(--fs-body-5); line-height: var(--lh-body-5); }
.name-author.netrual-600 { color: var(--n-600); }

/* counters */
.count-down-size { height: 64px; overflow: clip; display: flex; justify-content: space-between; }
.count-down-wrapper { display: flex; align-items: flex-start; }
.count-down-item { display: flex; flex-flow: column; flex: none; }
.count-down-number { display: flex; justify-content: center; align-items: center; height: 64px; font-size: 64px; line-height: 1; letter-spacing: var(--ls-h234); font-weight: 500; }
.count-down-number.semibold { font-weight: 600; }

/* ---------- why choose us ---------- */
.header-title-wrap { display: flex; flex-flow: column; gap: 12px; }
.wcu-title .heading-h1 { max-width: 50%; margin-left: 50%; }
.sub-header { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; margin: var(--sp-medium) 0 var(--sp-xmedium); }
.content-sub-right { grid-area: 1 / 3 / 2 / 5; display: flex; flex-flow: column; gap: var(--p-xmedium); }
.single-content-sub { display: flex; gap: 80px; }
.child-grid-layout._02 { min-width: 60px; }
.image-why-choose-us { display: flex; gap: 12px; }
.block-image-wrap { position: relative; display: flex; justify-content: center; align-items: center; width: 50%; min-height: 443px; background: var(--n-200); border-radius: 8px; overflow: hidden; }
.image-block-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.block-content-cover { position: relative; display: flex; flex-flow: column; gap: 17.28px; width: 234px; padding: 23px; background: var(--white); border: .72px solid #c5c5c540; border-radius: 8px; box-shadow: 0 31px 31px -21px #91919114; font-family: Inter, sans-serif; }
.block-content-cover._02 { position: absolute; top: 30%; gap: 8.4px; width: 257px; padding: 8.4px; }
.block-content-cover._03 { position: absolute; top: 47%; gap: 9.6px; width: 365px; padding: 9.6px; }
.child-content-cover { display: flex; }
.child-content-cover._01 { justify-content: space-between; align-items: center; }
.child-content-cover._02 { gap: 20px; }
.child-content-cover._03 { justify-content: space-between; height: 92px; padding: 0 5.76px; }
.child-content-cover._04 { justify-content: space-between; }
.caption-content-cover { font-size: 14.4px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.icon-content-cover { display: flex; justify-content: center; align-items: center; width: 28.8px; height: 28.8px; border-radius: 100px; background: #adadad33; }
.mini-content-cover { display: flex; flex-flow: column; justify-content: center; gap: 5.76px; }
.top-mini-content { display: flex; align-items: center; gap: 3px; }
.top-mini-content._02 { align-items: flex-end; }
.text-mini-content { font-size: 15.84px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.text-mini-content._02 { letter-spacing: -.05em; }
.sub-text-mini-content { color: #00000080; margin-bottom: 2px; font-size: 10px; font-weight: 500; line-height: 1; }
.bottom-mini-content { display: flex; align-items: center; gap: 3px; }
.desc-text-mini-content { color: #00000080; font-size: 7.2px; line-height: 1; }
.dot-mini-content { width: 4.32px; height: 4.32px; border-radius: 100px; background: var(--black); }
.column { position: relative; width: 8px; border-radius: 100px; background: #adadad33; }
.column.absolute { position: absolute; left: 0; right: 0; bottom: 0; width: auto; background: #101010; }
.column.absolute._01 { height: 69px; }
.column.absolute._02 { height: 50px; }
.column.absolute._03 { height: 75px; background: var(--accent); }
.column.absolute._04 { height: 34px; }
.column.absolute._05 { height: 69px; }
.column.absolute._06 { height: 80px; }
.column.absolute._07 { height: 50px; }
.caption-1 { color: #0006; padding: 2.8px 5.6px; font-size: 9.8px; line-height: 1.42; }
.list-icon-caption-1 { display: flex; justify-content: space-between; align-items: center; }
.child-list-icon { display: flex; align-items: center; }
.item-child-list-icon-1 { display: flex; gap: 5.6px; }
.item-child-list-icon-2 { display: flex; padding: 0 8.4px; gap: 5.6px; }
.line-list-icon { width: 1px; height: 16.8px; margin: 0 5.6px; background: #0000001a; }
.mini-ico { display: inline-flex; justify-content: center; align-items: center; width: 16.8px; height: 16.8px; font-size: 10px; line-height: 1; color: #222; }
.mini-ico.bg-gray { background: #0000000a; border-radius: 100px; font-size: 6px; }
.item-child-block-cover { display: flex; justify-content: space-between; padding: 9.6px 12.8px; background: #0000000a; border-radius: 4px; }
.child-1-item { display: flex; align-items: center; gap: 12.8px; }
.text-hide-run-chat { position: relative; }
.text-child-item-block { font-size: 11.2px; line-height: 1.42; overflow: hidden; white-space: nowrap; }
.text-child-item-block.absolute { position: absolute; inset: 0; }
.item-child-block-cover-2 { display: flex; justify-content: space-between; }
.block-child-wrapper { display: flex; gap: 6.4px; }
.wrap-block-child { display: inline-flex; align-items: center; gap: 3.2px; padding: 3.2px 9.6px; border: .4px solid #0000001a; border-radius: 64px; }
.wrap-block-child._02 { background: #0000000a; border-style: none; }
.wrap-block-child .mini-ico { width: 10px; height: 10px; font-size: 8px; }
.text-child-item-block-2 { font-size: 9.6px; line-height: 1.33; }

/* ---------- indicators ---------- */
.indicator-wrapper { display: flex; flex-flow: column; gap: var(--sp-large); }
.header-grid-2-col { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.title-feature-about-wrap { grid-area: 1 / 3 / 2 / 5; display: flex; flex-flow: column; gap: var(--p-xmedium); }
.text-scroll .indent { display: inline-block; width: 7.5em; }
.indicator-content { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px 12px; }
.left-content-contact { display: flex; flex-flow: column; justify-content: space-between; gap: 16px; }
.member { display: flex; flex-flow: column; gap: 11px; }
.title-member { font-size: var(--fs-body-4); line-height: var(--lh-body-4); font-weight: 500; }
.text-span-netrual-400 { color: var(--n-400); }
.list-avatar { display: flex; }
.item-avatar { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; border: 1px solid var(--white); border-radius: 36px; background: var(--n-200); overflow: hidden; }
.item-avatar._02, .item-avatar._03, .item-avatar._04, .item-avatar._05 { margin-left: -16px; }
.item-avatar._05 { background: var(--white); }
.image-item-avatar { width: 100%; height: 100%; object-fit: cover; }
.indicator-item { display: flex; flex-flow: column; gap: 8px; }
.top-item-indicator { display: flex; justify-content: space-between; padding: var(--sp-xsmall); background: var(--n-200); border-radius: 8px; }
.bottom-item-indicator { display: flex; flex-flow: column; justify-content: space-between; height: 220px; padding: var(--sp-xsmall); background: var(--n-200); border-radius: 8px; }
.zindex-1 { position: relative; z-index: 1; }
.zindex-2 { position: relative; z-index: 2; }
.zindex-3 { position: relative; z-index: 3; }

/* ---------- services ---------- */
.tab-services-wrapper { display: flex; flex-flow: column; gap: var(--sp-large); height: 500vh; }
.heading-type-2-wrap { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; margin-top: var(--p-xmedium); }
.heading-type-2-wrap .heading-h1:first-child { grid-column: span 2; }
.heading-type-2-wrap .text-align-end { grid-area: 1 / 4 / 2 / 5; }
.list-services-tabs { position: sticky; top: 0; border-bottom: 1px solid var(--w-10); }
.services-tabs-collection { height: 142px; overflow: hidden; background: var(--primary); }
.services-tabs-collection._01 { height: 522px; }
.item-services-tabs { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; padding: 40px 0; border-top: 1px solid var(--w-10); }
.sequence-number-services-tabs { grid-area: 1 / 1 / 2 / 2; display: flex; color: var(--white); opacity: .1; }
.sequence-number-services-tabs._01 { opacity: 1; }
.tabs-link-services { grid-area: 1 / 2 / 2 / 5; display: flex; flex-flow: column; }
.header-item-services-tab { display: flex; justify-content: space-between; }
.services-icon { position: relative; display: flex; justify-content: center; align-items: center; min-width: 20px; min-height: 20px; overflow: clip; }
.plus-icon-large { position: absolute; width: 20px; height: 2px; background: var(--white); }
.plus-icon-large.vertical { transform: rotate(90deg); }
.plus-icon-large.vertical._01 { transform: rotate(0deg); }
.content-services-tabs { overflow: clip; }
.image-tabs-services-wrap { display: flex; gap: 12px; margin: var(--sp-xmedium) 0 var(--p-medium); overflow: hidden; }
.image-tabs-services { width: 40%; max-width: 258px; height: 161px; object-fit: cover; border-radius: 8px; }
.services-categories-wrap { display: flex; flex-flow: column; gap: 16px; margin-top: var(--sp-xsmall); }
.categories-services-list { display: flex; flex-flow: wrap; gap: 4px; }
.categories-services-item { padding: 8px 16px; border-radius: 100px; background: #fafafb0d; }
@media (min-width: 1440px) {
  .sequence-number-services-tabs { grid-column: 2 / 3; }
  .tabs-link-services { grid-column: 3 / 5; }
}

/* ---------- showreel ---------- */
.section.showreel { height: 300vh; }
.text-showreel {
  position: sticky; top: 0; z-index: 2; width: 100%; height: 100vh;
  display: flex; justify-content: center; align-items: center; gap: .25em;
  color: var(--white); font-size: var(--fs-h2); font-weight: 500; letter-spacing: -.02em; overflow: clip; pointer-events: none;
}
.section-spin { position: sticky; top: 0; z-index: 3; width: 100%; height: 100vh; background: var(--black); overflow: clip; }
.brand-info { position: absolute; top: 100px; left: 48px; z-index: 3; }
.brand-info-text { margin-top: 8px; color: var(--white); font-family: "Space Grotesk", sans-serif; font-size: var(--fs-body-6); line-height: var(--lh-body-3); }
.wheel-wrapper { position: absolute; top: 180%; left: 50%; width: 2200px; height: 2200px; transform: translate(-50%, -50%); }
.wheel { width: 100%; height: 100%; transform: rotate(-16.36deg); }
.item-pivot { position: absolute; top: 50%; left: 50%; width: 0; height: 0; }
.item-pivot._2 { transform: rotate(32.72deg); }
.item-pivot._3 { transform: rotate(65.45deg); }
.item-pivot._4 { transform: rotate(98.18deg); }
.item-pivot._5 { transform: rotate(130.91deg); }
.item-pivot._6 { transform: rotate(163.63deg); }
.item-pivot._7 { transform: rotate(196.36deg); }
.item-pivot._8 { transform: rotate(229.09deg); }
.item-pivot._9 { transform: rotate(261.81deg); }
.item-pivot._10 { transform: rotate(294.54deg); }
.item-pivot._11 { transform: rotate(327.27deg); }
.item-card { position: absolute; top: 50%; left: 50%; width: 680px; height: 680px; transform: translate(0, -1100px) translate(-50%, -50%); }
.image-showreel { width: 100%; height: 100%; object-fit: cover; }

/* ---------- our work ---------- */
.spacing-xmedium { padding-top: 40px; }
.spacing-xmedium.bg-white { background: var(--white); }
.label-our-work { display: flex; justify-content: space-between; padding-top: 20px; border-top: 1px solid var(--b-10); }
.hero-our-work-wrap { position: relative; display: flex; flex-flow: column; align-items: center; }
.ttile-our-work-wrap { margin: 102px 0; }
.tilte-our-work { text-align: center; text-transform: uppercase; font-family: Geist, sans-serif; font-size: var(--fs-work-title); font-weight: 600; line-height: .8; letter-spacing: -.02em; }
.tilte-our-work .split-line { padding-top: .14em; margin-top: -.14em; }
.number-cover-title { vertical-align: top; font-size: calc(var(--fs-work-title) * .43); line-height: 1; }
.icon-decor-our-work { width: 104px; height: 104px; }
.asset-cover-wrap { position: absolute; inset: 0; pointer-events: none; }
.images-acess-cover-1, .images-acess-cover-2, .images-acess-cover-3 { position: absolute; z-index: -1; object-fit: cover; border-radius: 8px; }
.images-acess-cover-1 { top: 40%; left: 0; width: 220px; height: 220px; }
.images-acess-cover-2 { top: 25%; right: 0; width: 100px; height: 100px; }
.images-acess-cover-3 { bottom: 0; right: 5%; width: 160px; height: 160px; }
.hero-our-work-wrap { isolation: isolate; }
.content-our-work-wrap { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; margin-top: 122px; }
.col-right-our-work { grid-area: 1 / 2 / 2 / 3; display: flex; flex-flow: column; justify-content: space-between; gap: 32px; }
.content-our-work-wrap .text-body-2 { grid-area: 1 / 3 / 2 / 4; }

/* work list */
.section.is-white.no-padding .work-collection-list-wrapper { padding-top: var(--pad-y); }
.work-collection-list-wrapper { display: flex; flex-flow: column; }
.label-work-list { display: flex; justify-content: space-between; margin-bottom: 24px; }
.archon-button { transition: opacity .3s; }
.archon-button:hover { opacity: .65; }
.work-collection-list { display: grid; grid-template-columns: 1fr 1fr; gap: 80px 12px; place-items: start; }
.work-collection-item-wrap { position: relative; width: 100%; cursor: pointer; overflow: clip; }
.image-work-collection-item-wrap { position: relative; border-radius: 8px; overflow: clip; aspect-ratio: 4 / 3; }
.image-work-collection-item { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; opacity: 0; }
.image-work-collection-item.absolute { position: absolute; inset: 0; opacity: 1; height: 0%; }
.title-work-collection-item { display: flex; justify-content: space-between; margin-top: var(--p-medium); }
.date-work-collection-item { display: flex; gap: 3px; text-transform: uppercase; }
.circle-mouse-wrap { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; }
.circle-mouse-cursor { display: none; opacity: 0; justify-content: center; align-items: center; width: 75px; height: 75px; border-radius: 100px; background: var(--w-30); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); pointer-events: none; }

/* ---------- partners ---------- */
.partner-wrpper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.content-partner-wrap { grid-column: span 3; display: flex; flex-flow: column; gap: 48px; margin-left: 1px; min-width: 0; }
.infinite-slide-wrapper { position: relative; display: flex; overflow: hidden; }
.infinite-slide { display: flex; flex: none; }
.list-logo-partner { display: flex; align-items: center; flex: none; }
.logo-partner { flex: none; margin-right: 86px; color: #9a9a9a; white-space: nowrap; font-size: 28px; line-height: 1; }
.lp-1 { font-family: Geist, sans-serif; font-weight: 600; letter-spacing: .12em; font-size: 20px; }
.lp-2 { font-family: Georgia, "Times New Roman", serif; font-style: italic; font-size: 34px; }
.lp-3 { font-family: "Space Grotesk", sans-serif; letter-spacing: .06em; font-size: 22px; }
.lp-4 { font-family: Georgia, serif; font-size: 30px; letter-spacing: -.01em; }
.lp-5 { font-family: "Inter Tight", sans-serif; font-weight: 700; font-size: 24px; }
.lp-6 { font-family: Georgia, serif; font-style: italic; font-weight: 700; font-size: 32px; letter-spacing: -.03em; }
.lp-7 { font-family: Geist, sans-serif; font-weight: 500; letter-spacing: .3em; font-size: 16px; }
.lp-8 { font-family: "Inter Tight", sans-serif; font-weight: 600; font-size: 30px; letter-spacing: -.06em; }
.partner-logo-overlay { position: absolute; top: 0; bottom: 0; width: 35%; }
.partner-logo-overlay._1 { left: 0; background-image: linear-gradient(90deg, #fff, #fff0); }
.partner-logo-overlay._2 { right: 0; background-image: linear-gradient(270deg, #fff, #fff0); }
.text-sub-partner { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; }

/* ---------- awards ---------- */
.awwards-wrapper { display: flex; flex-flow: column; gap: var(--sp-large); }
.awwards-content { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.left-awwards-content, .right-awwards-content { display: flex; flex-flow: column; gap: var(--p-medium); }
.right-awwards-content { grid-column: span 3; }
.item-awwards { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; }
.prarent-item-awwards { grid-column: span 2; display: flex; flex-flow: column; gap: var(--p-medium); }
.child-item-awwards { display: flex; justify-content: space-between; }
.archive-project, .archive-date { color: var(--w-70); font-size: var(--fs-body-4); line-height: var(--lh-body-4); font-weight: 500; }
.desc-label-awwards { color: var(--n-500); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }

/* ---------- testimonials ---------- */
.testimonial-slider { position: relative; }
.slider-mask { position: relative; display: grid; }
.slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
.slide.is-active { opacity: 1; visibility: visible; transition: opacity .5s ease; }
.testimonial-item-inner { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.icon-quote { width: 100%; max-width: 206px; }
.testimonial-review { grid-area: 1 / 3 / 2 / 5; display: flex; flex-flow: column; align-items: flex-start; }
.heading-testimonial-review { font-size: var(--fs-h3); line-height: 1; letter-spacing: var(--ls-h234); font-weight: 600; }
.heading-testimonial-review.color-black { color: var(--black); }
.desc-testimonial-review { margin: var(--p-xmedium) 0 var(--sp-large); color: var(--n-600); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.left-arrow-testimonial, .right-arrow-testimonial {
  position: absolute; bottom: 0; z-index: 3; display: flex; justify-content: center; align-items: center;
  width: 48px; height: 48px; border-radius: 100px; background: var(--n-200); transition: background-color .2s;
}
.left-arrow-testimonial { left: 0; }
.right-arrow-testimonial { left: 52px; }
.left-arrow-testimonial:hover, .right-arrow-testimonial:hover { background: var(--n-300); }

/* ---------- team ---------- */
.team-member-wrap { display: flex; flex-flow: column; gap: var(--sp-large); }
.header-team-member { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.heading-title-team { grid-column: span 2; display: flex; flex-flow: column; gap: var(--sp-xsmall); }
.sub-title-team-wrap { display: flex; flex-flow: column; justify-content: space-between; gap: 24px; }
.sub-title-team { color: var(--n-700); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.list-op-job { display: flex; flex-flow: column; gap: 16px; }
.item-op-job { display: flex; gap: 8px; }
.name-op-job { color: var(--secondary); font-family: Inter, sans-serif; font-size: 14px; font-weight: 500; line-height: 1.28; }
.home-team-member { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.label-wrap-member { display: flex; flex-flow: column; justify-content: space-between; }
.sub-text-member-collection { display: flex; flex-flow: column; gap: var(--sp-xsmall); }
.sub-text-member { max-width: 12ch; font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: 600; }
.desc-sub-text-member { max-width: 30ch; color: var(--n-600); font-size: var(--fs-body-6); line-height: var(--lh-body-1); }
.the-team-member-list.home { grid-column: span 3; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.member-collection-item { position: relative; border-radius: 8px; overflow: hidden; aspect-ratio: 330 / 420; background: var(--n-300); }
.avatar-member-collection { width: 100%; height: 100%; object-fit: cover; }
.bg-cover-image { position: absolute; inset: 70% 0 0; background-image: linear-gradient(360deg, #fff, #fff0); }
.info-member-collection { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; gap: 16px; }
.line-label-member { width: 2px; background: var(--black); flex: none; }
.info-member { display: flex; flex-flow: column; }
.profile-hide-info-wrapper { height: 0; overflow: hidden; }
.profile-hide-info { margin-top: 6px; color: var(--black); font-size: var(--fs-body-6); line-height: 1.4; }
.link-member-wrap { position: absolute; inset: 0; }
.view-more-member { display: flex; flex-flow: column; justify-content: space-between; gap: 24px; padding: 24px; background: var(--white); border-radius: 8px; }
.text-view-more-member { display: flex; flex-flow: column; gap: var(--p-xsmall); }

/* ---------- pricing ---------- */
.plan-title { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.title-heading-plan { grid-area: 1 / 3 / 2 / 5; color: var(--white); font-size: var(--fs-h1); letter-spacing: var(--ls-h1); font-weight: 600; line-height: 1.1; }
.tab-category-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: var(--sp-large); padding: 10px; border: 1px solid var(--primary); border-radius: 8px; }
.category-tab { grid-column: span 2; padding: var(--p-medium) var(--p-xmedium); border-radius: 8px; color: var(--white); font-size: var(--fs-body-4); line-height: var(--lh-body-4); text-align: center; cursor: pointer; transition: background-color .3s, color .3s; }
.category-tab.w--current { background: var(--white); color: var(--black); }
.tabs-content { margin-top: 12px; }
.tab-pane { display: none; }
.tab-pane.is-active { display: block; animation: planIn .3s ease; }
@keyframes planIn { from { opacity: 0; } to { opacity: 1; } }
.plan-box { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.child-plan-box { background: var(--n-200); border-radius: 8px; transform-origin: 50% 0; }
.header-child-plan-box { display: flex; flex-flow: column; gap: 16px; padding: 56px 40px; border-bottom: 1px solid var(--n-400); }
.top-header-child { display: flex; justify-content: space-between; align-items: center; min-height: 60px; }
.heading-plan-child { font-size: var(--fs-h4); line-height: 1; letter-spacing: var(--ls-h234); font-weight: 600; }
.number-sub { font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-weight: 500; }
.sub-title-plan-child { max-width: 45ch; color: var(--n-700); font-size: var(--fs-body-5); line-height: var(--lh-body-4); }
.content-child-plan { display: flex; flex-flow: column; gap: var(--sp-large); padding: 56px 40px; }
.description-plan { display: flex; flex-flow: column; gap: 20px; }
.title-desc-plan { color: var(--n-600); font-size: var(--fs-body-4); line-height: var(--lh-body-4); text-transform: uppercase; font-weight: 500; }
.description-list-plan { display: flex; flex-flow: column; gap: 8px; }
.item-desc-plan { display: flex; align-items: center; gap: 8px; }
.plus-check { display: inline-flex; justify-content: center; align-items: center; width: 20px; height: 20px; font-size: 18px; font-weight: 500; color: var(--accent); }
.text-decs-plan { color: var(--black); font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-weight: 500; }
.price-plan-wrap { display: flex; flex-flow: column; align-items: center; gap: 16px; }
.price-plan { display: flex; flex-flow: column; justify-content: space-between; align-items: center; gap: 16px; height: 120px; }
.title-price { font-size: var(--fs-body-4); line-height: var(--lh-body-4); font-weight: 600; }
.price { display: flex; gap: 8px; }
.currency { font-size: var(--fs-h6); line-height: var(--lh-h6); font-weight: 500; }
.number-price { font-size: var(--fs-h2); letter-spacing: var(--ls-h234); font-weight: 600; line-height: 1; }
.button-price-wrap { width: 100%; max-width: 168px; overflow: hidden; }

/* ---------- newsletter ---------- */
.newsletter-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; align-items: center; }
.title-newsletter { font-family: Geist, sans-serif; font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: 600; }
.full-width-grid { position: relative; margin-right: -12px; }
.input-form-newsletter { position: relative; display: flex; }
.input-field-newsletter {
  width: 100%; height: 49px; padding: 14.5px 45px 14.5px 16px; background: transparent;
  border: 1px solid #1111111a; border-right: 0; outline: none; font-size: 14px; transition: border-color .3s;
}
.input-field-newsletter:focus { border-bottom-color: var(--accent); }
.input-form-newsletter.is-sent .input-field-newsletter::placeholder { color: var(--accent); }
.button-form-in-field { position: absolute; top: 6px; right: 6px; bottom: 6px; width: 37px; display: flex; justify-content: center; align-items: center; background: var(--secondary); border-radius: 100px; transition: opacity .3s; }
.button-form-in-field:hover { opacity: .65; }
.button-send-overlay { position: absolute; inset: 0; z-index: 2; }

/* ---------- blog ---------- */
.header-blog-list { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.header-blog-list .heading-h1 { grid-area: 1 / 2 / 2 / 5; }
.blog-list-wrap { margin-top: var(--sp-large); }
.blog-collection-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px 12px; align-items: flex-start; }
.link-blog { display: block; text-decoration: none; color: inherit; }
.author-blog { display: flex; justify-content: space-between; align-items: center; }
.author-wrap { display: flex; gap: 12px; }
.avatar-author-blog { width: 36px; height: 36px; border-radius: 100px; object-fit: cover; }
.author-name { color: var(--black); font-size: var(--fs-body-5); line-height: var(--lh-body-5); font-weight: 500; }
.author-position, .time-create-blog { color: var(--n-600); font-size: var(--fs-body-5); line-height: var(--lh-body-5); }
.image-blog-wrap { position: relative; margin: 26px 0 12px; border-radius: 8px; overflow: hidden; }
.image-item-blog { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; opacity: 0; }
.image-item-blog.ghost { position: absolute; inset: 0; opacity: 1; }
.image-item-blog.small { height: 161px; }
.image-item-blog.medium { height: 272px; }
.image-item-blog.large { height: 361px; }
.image-item-blog.xlarge { height: 400px; }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.faq-wrap { grid-column: span 3; display: flex; flex-flow: column; }
.faq-tab { margin: var(--sp-large) 0 40px; }
.faq-tab-menu { display: flex; flex-flow: column; gap: 12px; }
.faq-tab-link { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 28px 24px; background: var(--white); border: 1px solid var(--b-10); cursor: pointer; text-decoration: none; color: inherit; }
.faq-content { display: flex; flex-flow: column; }
.title-faq-tab { font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-weight: 500; }
.desc-faq-tab-wrap { height: 0; overflow: hidden; }
.desc-faq-tab { margin-top: 16px; color: var(--n-600); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.faq-icon { position: relative; display: flex; justify-content: center; align-items: center; min-width: 24px; min-height: 24px; overflow: clip; }
.plus-icon { position: absolute; width: 16.5px; height: 1.5px; background: var(--black); }
.plus-icon._02 { transform: rotate(90deg); }
.get-contact { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; }
.sub-get-contact { display: flex; flex-flow: column; gap: var(--p-xmedium); margin-right: -12px; }
@media (min-width: 1440px) { .faq-wrap { grid-column: span 2; } .faq { grid-template-columns: 1fr 1fr 2fr; } }

/* ---------- footer ---------- */
.footer { position: relative; padding-top: var(--pad-y); background: var(--primary); overflow: hidden; }
.footer-content { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.footer-left { grid-column: span 2; }
.footer-right { grid-area: 1 / 3 / 2 / 5; display: flex; flex-flow: column; gap: var(--sp-xmedium); margin-right: -12px; }
.footer-info-wrap { display: flex; flex-flow: column; gap: var(--sp-xsmall); }
.sub-heading-info { color: var(--w-70); line-height: var(--lh-body-1); text-transform: uppercase; font-weight: 500; font-size: var(--fs-body-1); }
.heading-info-wrap { display: flex; flex-flow: column; color: var(--white); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); text-decoration: none; }
.adress-info { color: var(--n-500); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.footer-newsletter-wrap { display: flex; flex-flow: column; align-items: flex-start; gap: var(--sp-xsmall); }
.heading-newsletter { color: var(--white); font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: 500; }
.form { display: flex; flex-flow: column; width: 100%; }
.newsletter-field { width: 100%; margin-bottom: var(--p-medium); padding: var(--p-xsmall) 0; background: transparent; border: 0; border-bottom: 1px solid var(--w-30); color: var(--w-70); font-size: var(--fs-body-5); line-height: var(--lh-body-5); outline: none; }
.newsletter-field::placeholder { color: var(--w-70); }
.newsletter-field:focus { border-bottom-color: var(--white); }
.newsletter-field.email { margin-bottom: var(--sp-xsmall); }
.button-newsletter-wrap { position: relative; display: inline-flex; width: 100%; max-width: 50%; }
.sub-newsletter { width: 32ch; color: var(--w-70); font-size: var(--fs-body-6); line-height: var(--lh-body-1); }
.footer-links { display: flex; justify-content: space-between; }
.navigation-wrap { display: flex; flex-flow: column; align-items: flex-start; gap: var(--p-xsmall); }
.socials-wrap { display: flex; flex-flow: column; align-items: stretch; gap: var(--p-xsmall); width: 90px; }
.title-footer-links { color: var(--w-50); font-size: var(--fs-body-6); line-height: var(--lh-body-1); text-transform: uppercase; font-weight: 500; }
.item-link-footer { color: var(--white); font-size: var(--fs-body-5); line-height: var(--lh-body-5); font-weight: 500; text-decoration: none; transition: opacity .3s; }
.item-link-footer:hover { opacity: .7; text-decoration: underline; }
.links-socials { display: inline-flex; justify-content: space-between; align-items: center; gap: var(--p-xsmall); text-decoration: none; }
.footer-logo { padding: 80px var(--p-medium) 0; }
.logo-footer { max-width: 100%; overflow: hidden; }
.logo-footer svg { display: block; }
.footer-word { fill: #fff; fill-opacity: .06; font-family: Geist, sans-serif; font-weight: 600; font-size: 330px; letter-spacing: -.04em; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 991px) {
  .split-content.white { display: none; }
  .navbar-wrapper { grid-template-columns: 1fr 1fr; }
  .split-content.has-button { grid-column: 2; justify-content: flex-end; gap: 24px; }
  .menu-left, .menu-right { grid-area: auto / span 12; }
  .menu-right { margin-top: 32px; }
  .section.hero-home { padding-top: 140px; }
  .left-hero-home { grid-column: span 3; }
  .text-hero-absolute { height: 250px; }
  .about-left-col { grid-column: span 2; }
  .scroll-text-wrap { grid-area: 1 / 3 / 2 / 5; }
  .our-approach-wrapper { height: auto; }
  .list-our-approach { position: relative; top: 0; grid-template-columns: 1fr 1fr; }
  .item-our-approach._1, .item-our-approach._2 { grid-column: span 1; }
  .item-our-approach._3 { grid-area: auto / span 2; margin-right: 0; }
  .sub-header-our-approach .heading-h6, .sub-header .heading-h6 { grid-column: span 2; }
  .wcu-title .heading-h1 { max-width: none; margin-left: 0; }
  .indicator-content { grid-template-columns: 1fr 1fr; }
  .left-content-contact { grid-column: span 2; }
  .tab-services-wrapper { height: auto; }
  .list-services-tabs { position: relative; }
  .services-tabs-collection, .services-tabs-collection._01 { height: auto !important; }
  .sequence-number-services-tabs { opacity: 1 !important; }
  .plus-icon-large.vertical { transform: rotate(90deg) !important; }
  .item-card { width: 480px; height: 480px; transform: translate(0, -1000px) translate(-50%, -50%); }
  .content-our-work-wrap { gap: 32px 12px; }
  .col-right-our-work { grid-column: 1 / 3; }
  .content-our-work-wrap .text-body-2 { grid-column: 3 / 5; }
  .partner-wrpper { grid-template-columns: 1fr; gap: 32px; }
  .content-partner-wrap { grid-column: auto; }
  .text-sub-partner { grid-template-columns: 1fr 1fr; }
  .awwards-content { grid-template-columns: 1fr; gap: 40px; }
  .right-awwards-content { grid-column: auto; }
  .testimonial-review { grid-area: 1 / 2 / 2 / 5; }
  .header-team-member { grid-template-columns: 1fr 1fr; gap: 32px 12px; }
  .heading-title-team { grid-column: span 2; }
  .sub-title-team-wrap { grid-column: span 2; }
  .home-team-member { grid-template-columns: 1fr; gap: 32px; }
  .the-team-member-list.home { grid-column: auto; }
  .plan-title .title-heading-plan { grid-column: 2 / 5; }
  .plan-box { grid-template-columns: 1fr; }
  .newsletter-wrapper { grid-template-columns: 1fr 1fr; gap: 24px 12px; }
  .title-newsletter { grid-column: span 2; }
  .full-width-grid { grid-column: span 2; margin-right: 0; }
  .blog-collection-list { grid-template-columns: 1fr 1fr; }
  .faq { grid-template-columns: 1fr; gap: 32px; }
  .faq-wrap { grid-column: auto; }
  .footer-content { gap: 48px 12px; }
  .footer-right { grid-area: auto / span 4; margin-right: 0; }
  .footer-left { grid-column: span 4; }
  .footer-logo { padding-top: 48px; }
}
@media (max-width: 767px) {
  .section.hero-home { min-height: 600px; height: 92vh; }
  .hero-home-wrapper { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .left-hero-home { grid-column: 1; gap: 24px; }
  .right-hero-home { grid-area: auto; justify-content: flex-end; gap: 20px; }
  .tabs-content-hero { display: none; }
  .tabs-menu-hero { margin-top: 0; }
  .text-hero-absolute { height: 180px; padding: 0 20px; }
  .button-hero-home { max-width: 260px; }
  .about-us-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .about-left-col { grid-column: auto; margin-right: 0; }
  .scroll-text-wrap { grid-area: auto; }
  .heading-h4.text-scroll-2 { width: 100%; }
  .sub-header-our-approach, .sub-header { grid-template-columns: 1fr; gap: 20px; }
  .sub-header-our-approach .text-body-4 { grid-area: auto; }
  .content-sub-right { grid-area: auto; }
  .single-content-sub { gap: 24px; }
  .list-our-approach { grid-template-columns: 1fr; }
  .item-our-approach._1, .item-our-approach._2, .item-our-approach._3 { grid-column: auto; }
  .imge-cover-our { width: 50%; }
  .image-why-choose-us { flex-direction: column; }
  .block-image-wrap { width: 100%; }
  .block-content-cover._03 { width: 300px; }
  .header-grid-2-col { grid-template-columns: 1fr; gap: 24px; }
  .title-feature-about-wrap { grid-area: auto; }
  .indicator-content { grid-template-columns: 1fr; }
  .left-content-contact { grid-column: auto; }
  .heading-type-2-wrap { grid-template-columns: 1fr auto; }
  .heading-type-2-wrap .heading-h1:first-child { grid-column: 1; }
  .heading-type-2-wrap .text-align-end { grid-area: 1 / 2 / 2 / 3; }
  .item-services-tabs { grid-template-columns: 1fr; gap: 12px; padding: 28px 0; }
  .sequence-number-services-tabs, .tabs-link-services { grid-area: auto; }
  .sequence-number-services-tabs .heading-h3 { font-size: 20px; }
  .item-card { width: 340px; height: 340px; transform: translate(0, -1000px) translate(-50%, -50%); }
  .brand-info { left: 20px; }
  .label-our-work .text-body-4 { font-size: 12px; }
  .ttile-our-work-wrap { margin: 60px 0; }
  .images-acess-cover-1 { width: 120px; height: 120px; }
  .images-acess-cover-3 { width: 100px; height: 100px; }
  .content-our-work-wrap { grid-template-columns: 1fr; margin-top: 60px; }
  .col-right-our-work, .content-our-work-wrap .text-body-2 { grid-column: auto; }
  .work-collection-list { grid-template-columns: 1fr; gap: 48px; }
  .text-sub-partner { grid-template-columns: 1fr; gap: 12px; }
  .item-awwards { grid-template-columns: 1fr; gap: 16px; }
  .prarent-item-awwards { grid-column: auto; }
  .testimonial-item-inner { grid-template-columns: 1fr; gap: 24px; padding-bottom: 72px; }
  .testimonial-review { grid-area: auto; }
  .icon-quote { max-width: 100px; }
  .the-team-member-list.home { grid-template-columns: 1fr 1fr; }
  .plan-title { grid-template-columns: 1fr; gap: 24px; }
  .plan-title .title-heading-plan { grid-area: auto; }
  .tab-category-bar { gap: 8px; }
  .header-child-plan-box, .content-child-plan { padding: 32px 20px; }
  .header-blog-list { grid-template-columns: 1fr; gap: 24px; }
  .header-blog-list .heading-h1 { grid-area: auto; }
  .get-contact { grid-template-columns: 1fr; gap: 24px; }
  .footer-links { gap: 32px; justify-content: flex-start; }
  .button-newsletter-wrap { max-width: 100%; }
}
@media (max-width: 479px) {
  .text-showreel { font-size: 40px; }
  .blog-collection-list { grid-template-columns: 1fr; }
  .the-team-member-list.home { grid-template-columns: 1fr; }
  .block-content-cover._03 { width: 260px; }
  .grid-overlay .line-overlay._03 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .page-transition-overlay { display: none; }
}

/* =========================================================
   INNER PAGES
   ========================================================= */
.text-color-black { color: var(--black); }
.text-color-white { color: var(--white); }
.text-span-netrual-600 { color: var(--n-600); }
.item-link-footer.text-color-black { color: var(--black); }
.item-link-footer.w--current { text-decoration: underline; }
.line.opacity-10 { background: var(--b-10); }
.text-body-1 { font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: 500; }
.text-body-1.bold { font-weight: 700; }
.text-body-1.padding-bottom { margin-bottom: var(--p-xmedium); }
.text-body-1 p { margin: var(--p-xmedium) 0 0; font-size: var(--fs-body-5); line-height: var(--lh-body-5); font-weight: 400; color: var(--n-600); }
.text-body-5.color-black-60 { color: #0009; }
.text-body-5.normal.color-white-70 { color: var(--w-70); position: relative; }
.text-body-4.color-black-50 { color: var(--b-50); }
.text-body-2.medium { font-weight: 500; }
.heading-h6.color-white-30 { color: var(--w-30); }
.heading-h6.semi-boild.color-black-30 { color: var(--b-30); }
.heading-h3.color-white { color: var(--white); line-height: 1; }
.icon-12x12 { width: 12px; height: 12px; }
.icon-20x20 { width: 20px; height: 20px; }
.icon-20x20.absolute { position: absolute; transform: scale(0); }
.icon-32x32 { width: 32px; height: 32px; }
.label-text.black.geist { text-transform: none; font-family: Geist, sans-serif; font-size: 16px; line-height: 1.25; }

/* black navbar variant (inner pages on white) */
.navbar.black .logo-image, .navbar.black .split-content.white, .navbar.black .link-block { color: var(--black); }
.navbar.black .hamburger-line-top, .navbar.black .hamburger-line-bottm { background: var(--black); }

/* inner hero */
.section.hero-inner-page { margin-top: var(--nav-offset); padding-top: 259px; padding-bottom: 148px; }
.title-large-wrap { position: relative; z-index: 2; height: 265px; max-width: var(--container); margin: 0 auto; padding-left: var(--pad-x); overflow: hidden; }
.title-large { color: var(--n-300); font-family: Geist, sans-serif; font-size: 394px; letter-spacing: -.05em; white-space: nowrap; font-weight: 400; line-height: 1; }
.image-hero-inner-page { position: absolute; z-index: 3; top: -250%; right: 20%; width: 180px; height: 180px; }
.image-cover-title-large { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.content-cover-title { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; padding-top: var(--sp-xsmall); }
.content-cover-title .socials-wrap { grid-column: 1; }
.content-cover-title .info-email { grid-column: 4; }
.content-cover-title .top-info-email { color: var(--n-600); }
.section.margin-hero-inner-page { z-index: 1; margin-top: -148px; background: var(--white); }

/* about */
.section.about-us { margin-top: var(--nav-offset); padding-top: 160px; padding-bottom: 0; }
.label-cover-hero { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; align-items: center; max-width: var(--container); margin: -48px auto 24px; padding: 0 var(--pad-x); }
.text-label-cover-hero { font-family: Geist, sans-serif; font-size: 16px; line-height: 1.25; }
.image-gallery { position: relative; z-index: 2; display: flex; justify-content: flex-end; width: 100%; overflow: hidden; }
.image-gallery-marqee-track { display: flex; flex: none; justify-content: flex-end; will-change: transform; }
.image-gallery-marqee-group { display: flex; flex: none; gap: 12px; margin-right: 12px; }
.vertical-image-gallery { display: flex; flex-flow: column; gap: 12px; }
.horizonal-image-gallery { display: flex; gap: 12px; }
.image-gallery-small, .image-gallery-medium, .image-gallery-large { object-fit: cover; border-radius: 8px; filter: grayscale(1); transition: filter .3s; }
.image-gallery-small:hover, .image-gallery-medium:hover, .image-gallery-large:hover { filter: grayscale(0); }
.image-gallery-small { width: 14vw; max-width: 206px; height: 264px; }
.image-gallery-medium { width: 30vw; max-width: 424px; height: 264px; }
.image-gallery-medium.tall { width: 14vw; max-width: 206px; height: 540px; }
.image-gallery-large { width: 45vw; max-width: 642px; height: 540px; }

.about-new { display: flex; flex-flow: column; gap: var(--sp-xmedium); height: 300vh; }
.header-about-2nd { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.title-about-2nd { grid-column: 3 / 5; display: flex; flex-flow: column; gap: var(--sp-xsmall); }
.title-about-2nd .text-body-5 { max-width: 44ch; }
.content-about-2nd { position: sticky; top: 15vh; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.left-col-about-2nd { grid-column: 1 / 3; display: flex; flex-flow: column; justify-content: flex-end; gap: 24px; }
.item-avatar-2nd { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; border: 1px solid var(--primary); border-radius: 36px; background: var(--n-200); overflow: hidden; }
.item-avatar-2nd._02, .item-avatar-2nd._03, .item-avatar-2nd._04 { margin-left: -16px; }
.right-col-about-2nd { grid-column: 3 / 5; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.indicator-item-2 { grid-column: span 2; display: grid; grid-template-columns: 1fr 1fr; gap: 0; background: var(--n-200); border-radius: 8px; }
.inner-indicator-top { display: flex; justify-content: space-between; align-items: flex-start; padding: var(--sp-xsmall); }
.inner-indicator-bottom { display: flex; flex-flow: column; justify-content: space-between; align-items: flex-end; gap: 16px; padding: var(--sp-xsmall); }
.sub-text-indicator { min-width: 120px; font-size: var(--fs-body-4); line-height: var(--lh-body-4); text-align: right; font-weight: 600; }

.about-feature { display: flex; flex-flow: column; gap: 106px; }
.list-card-feature-about { display: flex; gap: 12px; }
.item-card-feature-about { position: relative; isolation: isolate; flex: 1; height: 406px; display: flex; flex-flow: column; justify-content: space-between; padding: var(--sp-xsmall); border-radius: 8px; overflow: hidden; }
.item-card-feature-about:first-child { flex: 2.1; }
.image-card-feature-about { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; filter: grayscale(1); transition: filter .4s; }
.item-card-feature-about:hover .image-card-feature-about { filter: grayscale(0); }
.bg-item-card-feature { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(0deg, #000, #fff0); }
.text-body-4.semibold.color-white { color: var(--white); }

.wcu-2nd { display: flex; flex-flow: column; gap: var(--sp-large); }
.header-wcu-2nd { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; row-gap: 12px; }
.title-wcu-2nd { grid-column: 1 / 5; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.title-wcu-2nd .heading-h1 { grid-column: 1 / 3; }
.sub-title-wcu-2nd { grid-column: 3 / 4; margin: var(--p-xmedium) 0; color: var(--n-700); font-size: var(--fs-body-5); line-height: var(--lh-body-5); }
.content-wcu-2nd { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.content-wcu-2nd .item-wcu-2nd:nth-child(1), .content-wcu-2nd .item-wcu-2nd:nth-child(6) { grid-column: span 2; }
.item-wcu-2nd { display: flex; flex-flow: column; justify-content: space-between; height: 272px; padding: var(--sp-xsmall); background: var(--n-200); border-radius: 8px; }
.header-item-wcu { display: flex; justify-content: space-between; align-items: center; }
.icon-wcu-wrap { display: flex; justify-content: center; align-items: center; width: 64px; height: 64px; border-radius: 100px; background: var(--white); }
.dot-wcu-wrap { display: flex; gap: 4px; }
.dot-wcu { width: 4px; height: 16px; border-radius: 100px; background: #dadada; }
.dot-wcu.active { background: var(--accent); }
.content-item-wcu { display: flex; flex-flow: column; gap: var(--p-xmedium); }

.competitive-advantage { height: 300vh; }
.competitive-advantage-sticky { position: sticky; top: 10%; display: flex; flex-flow: column; gap: var(--sp-large); }
.span-spacer-2 { display: inline-block; width: 8vw; }
.label-competitive { margin-left: 8vw; }
.image-track-scroll-wrap { overflow: visible; }
.image-track-scroll { display: flex; gap: 12px; width: 100vw; }
.item-image-track-scroll { flex: none; width: 37.5vw; max-width: 533px; height: 559px; object-fit: cover; border-radius: 8px; filter: grayscale(1); transition: filter .4s; }
.item-image-track-scroll:hover { filter: grayscale(0); }
.the-team-member-list.home.all .member-collection-item { aspect-ratio: 330 / 400; }
.section.no-padding-bottom { padding-bottom: 0; }
.section.no-padding-bottom .team-member-wrap { padding-bottom: var(--pad-y); }

/* services */
.services-intro { grid-area: auto; }
.scroll-text-single { display: block; }
.scroll-text-single:first-child { padding-left: calc(50% + 6px); }
.block { display: none; }
.text-scroll-large { font-size: 96px; line-height: 1.1; letter-spacing: -.05em; font-weight: 500; }
.services-list { display: flex; flex-flow: column; }
.services-item { position: sticky; top: 5%; background: var(--n-200); }
.content-services-collection { position: relative; display: flex; gap: 12px; padding: var(--sp-xmedium) 0; cursor: pointer; }
.content-services-collection-absolute { position: absolute; inset: 0; z-index: 3; }
.services-content-text { display: flex; flex-flow: column; justify-content: space-between; width: 50%; }
.title-services-item { font-size: var(--fs-h2); line-height: 1; letter-spacing: var(--ls-h234); font-weight: 600; }
.info-content-services { display: flex; flex-flow: column; gap: var(--sp-xsmall); }
.info-services { width: 40ch; max-width: 100%; color: var(--b-50); font-family: Geist, sans-serif; font-size: var(--fs-body-4); line-height: 1.39; }
.info-services._02 { width: auto; margin-bottom: var(--sp-large); }
.categories-services-item._02 { background: var(--n-300); }
.services-content-image { display: flex; flex-flow: column; gap: 12px; width: 50%; }
.sequence-number-services { font-family: Geist, sans-serif; font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.image-single-services-wrap { border-radius: 8px; overflow: clip; }
.image-single-services { display: block; width: 100%; height: 518px; object-fit: cover; border-radius: 8px; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.content-services-collection:hover .image-single-services { transform: scale(1.05); }
.item-services-tabs .content-services-collection-absolute { z-index: 1; }

/* service detail */
.section.detail-services { margin-top: var(--nav-offset); padding-top: 172px; padding-bottom: 160px; }
.content-detail-services { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.content-text-detail-services { grid-column: 1 / 3; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto 1fr auto; column-gap: 12px; align-items: start; }
.image-cover-detail-services { grid-column: 1; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.services-categories-wrap._02 { grid-column: 1; margin: var(--sp-xsmall) 0; }
.content-text-detail-services .info-services { grid-column: 1; }
.content-text-detail-services .heading-h1 { grid-column: 1 / 3; align-self: end; }
.content-image-detail-services { grid-column: 3 / 5; width: 100%; height: 100%; min-height: 560px; object-fit: cover; border-radius: 8px; }
.process-header-wrap { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; margin-bottom: var(--sp-large); }
.process-heading { grid-column: 3 / 5; color: var(--b-30); font-size: var(--fs-h5); line-height: var(--lh-h5); letter-spacing: var(--ls-h5); font-weight: 500; }
.process-tabs-menu { display: flex; flex-flow: column; }
.process-tab-link { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; align-items: start; padding: 48px 0 40px; border-top: 1px solid var(--b-10); font-size: var(--fs-body-1); cursor: pointer; transition: font-size .5s; }
.process-tab-link.w--current { font-family: Geist, sans-serif; font-size: var(--fs-h1); font-weight: 600; }
.process-item-num { grid-column: 1; color: rgba(0,0,0,.2); letter-spacing: var(--ls-h1); font-family: "Inter Tight", sans-serif; font-weight: 600; line-height: 1; }
.process-tab-link.w--current .process-item-num { color: rgba(0,0,0,.2); }
.process-item-content { grid-column: 3 / 5; display: flex; flex-flow: column; }
.process-title-wrap { display: flex; justify-content: space-between; align-items: flex-start; }
.process-title { font-family: Geist, sans-serif; font-size: var(--fs-h4); line-height: var(--lh-h5); letter-spacing: var(--ls-h234); font-weight: 500; }
.process-tab-link.w--current .plus-icon._02 { transform: rotate(0deg); }
.process-desc-wrap { height: 0; overflow: hidden; }
.process-desc { margin-top: 40px; color: var(--b-50); font-family: "Inter Tight", sans-serif; font-size: var(--fs-body-4); line-height: var(--lh-body-4); font-weight: 400; }

/* shows / work detail */
.work-collection-list-wrapper.inner { padding-top: 0; }
.section.detail-work { height: 100vh; margin-top: var(--nav-offset); padding-top: 90px; padding-bottom: var(--sp-large); overflow: hidden; }
.detail-work .container { z-index: 3; }
.title-work-wrap { display: flex; align-items: flex-end; height: 100%; }
.title-work-wrap .heading-h1 { max-width: 60%; }
.image-hero-work { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.bg-cover-image-work { position: absolute; inset: 20% 0 0; z-index: 2; background-image: linear-gradient(360deg, #000, #fff0); }
.content-work { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.content-work._02 { padding: var(--pad-y) 0 80px; }
.left-content-detail-work { display: flex; flex-flow: column; gap: 12px; }
.content-work > .left-content-detail-work { grid-column: 1; }
.content-work._03 > .left-content-detail-work { grid-column: 1 / 3; margin-left: calc(var(--pad-x) * -1); }
.content-work > .right-content-detail-work { grid-column: 3 / 5; display: flex; flex-flow: column; justify-content: flex-end; }
.content-work-info { display: flex; justify-content: space-between; gap: 12px; }
.date-info-work { display: flex; gap: 4px; }
.collection-info-work-list { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; text-align: right; }
.image-content-work-1 { width: 100%; height: 396px; margin-top: 57px; object-fit: cover; border-radius: 8px; }
.image-content-work-2 { width: 100%; height: 236px; object-fit: cover; border-radius: 8px; filter: grayscale(1); }
.image-content-work-3 { width: 100%; height: 640px; object-fit: cover; border-radius: 0 8px 8px 0; }
.blockquote-work-content { display: flex; flex-flow: column; gap: var(--p-xmedium); margin-top: var(--sp-medium); padding-left: 24px; border-left: 4px solid #000; }
.text-blockquote-work { font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-style: italic; font-weight: 500; }
.static-list-impact { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.static-item { display: flex; flex-flow: column; gap: var(--sp-xmedium); padding-right: 24px; }
.static-text { display: flex; flex-flow: column; gap: var(--p-medium); }
.work-collection-list.related { margin-top: var(--sp-large); }
.heading-type-2-wrap .heading-h1.color-black-10 { color: var(--b-10); }

/* journal */
.blog-toolbar-wrap { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--b-10); }
.category-list, .blog-pagination-wrap { display: flex; align-items: center; }
.category-button { margin-bottom: -1px; padding: var(--p-xmedium); color: var(--b-30); font-size: var(--fs-body-3); line-height: var(--lh-body-3); text-decoration: none; transition: color .3s; }
.category-button:hover { color: var(--black); }
.category-button.w--current { color: var(--black); border-bottom: 1px solid #000; }
.pagination-item { display: flex; justify-content: center; align-items: center; width: 40px; height: 40px; color: var(--black); font-size: var(--fs-body-3); text-decoration: none; }
.pagination-item.prev { background: var(--black); border-radius: 100px; transition: opacity .2s; }
.pagination-item.prev:hover { opacity: .6; }
.blog-list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; row-gap: var(--sp-large); align-items: flex-start; }
.image-item-blog-wrap { position: relative; height: 340px; margin: 26px 0 12px; border-radius: 8px; overflow: hidden; }
.image-blog { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 0; }

/* post */
.section.section-detail { padding-top: var(--sp-large); padding-bottom: 0; }
.hero-wrapper { display: flex; flex-flow: column; gap: 40px; }
.name-blog-post { max-width: 16em; margin: 0; color: #111827; font-family: Geist, sans-serif; font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--ls-h234); font-weight: 500; }
.single-blog-pots { display: block; width: 100%; height: 620px; margin-top: 48px; object-fit: cover; border-radius: 8px; }
.section.content-single-blog { padding-bottom: 0; }
.single-blog-content-wrapper { display: grid; grid-template-columns: repeat(10, 1fr); column-gap: 12px; }
.sidebar-blog { grid-column: 2 / 3; display: flex; flex-flow: column; gap: var(--sp-medium); }
.single-blog-content { grid-column: 3 / 10; display: flex; flex-flow: column; gap: var(--sp-xmedium); }
.date-create { font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-weight: 500; }
.list-social { display: flex; flex-flow: column; gap: 8px; }
.item-icon-social { position: relative; display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; border-radius: 100px; background: var(--n-200); cursor: pointer; }
.description-single-blog { color: #11182799; font-size: var(--fs-body-3); line-height: var(--lh-body-3); font-style: italic; font-weight: 500; }
.line-single-blog { width: 100%; height: 1px; background: var(--b-10); }
.blog-content h6 { margin: 0 0 16px; font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: 500; letter-spacing: -.01em; }
.blog-content p { margin: 0 0 16px; color: #11182799; font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.image-content-blog-wrap { width: 100%; margin: var(--sp-xsmall) 0; border-radius: 8px; overflow: hidden; }
.image-content-blog-wrap .image-blog { aspect-ratio: 3 / 2; height: auto; }
.blockquote-content { display: flex; flex-flow: column; gap: var(--sp-xsmall); padding: var(--p-medium) 0 var(--p-medium) 36px; border-left: 4px solid #000; }
.text-blockquote-blog { font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-style: italic; font-weight: 500; }
.blockquote-author { color: #6b7280; font-size: var(--fs-body-4); line-height: var(--lh-body-4); }

/* contact */
.contact-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.contact-wrapper .left-content-contact { grid-column: 1; }
.right-content-contact { grid-column: 3 / 5; }
.contact-form { display: flex; flex-flow: column; }
.contact-content-item { display: flex; gap: 12px; }
.contact-content-item .contact-field { flex: 1; min-width: 0; }
.contact-field { width: 100%; margin-bottom: 24px; padding: var(--p-xmedium) 0; background: transparent; border: 0; border-bottom: 1px solid var(--b-10); font-family: Geist, sans-serif; font-size: var(--fs-body-3); line-height: var(--lh-body-3); outline: none; transition: border-color .3s; }
.contact-field:focus { border-bottom-color: var(--accent); }
.contact-field.textarea { height: 200px; margin-bottom: 40px; resize: none; }
.button-full-wrap { position: relative; }
.button-full-wrap .secondar-button { width: 100%; }
.form-done, .form-error { display: none; margin-top: 16px; font-size: 14px; color: var(--n-600); }
.form-done.is-shown, .form-error.is-shown { display: block; }
.form-error { color: var(--accent); }

/* pricing compare */
.compare-pricing-title { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.title-compare-pricing { grid-column: 2 / 4; color: var(--black); font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--ls-h1); font-weight: 600; }
.feature-pricing-content { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; margin-top: var(--sp-large); }
.compare-wrapper { grid-column: 2 / 5; display: flex; flex-flow: column; }
.compare-content { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 12px; border-top: 1px solid var(--b-10); }
.compare-content.no-border { border-top: 0; }
.compare-heading-item { padding: var(--sp-xsmall) var(--p-xsmall); }
.compare-content-item { padding: var(--p-xmedium) 0 var(--p-xmedium) var(--p-xsmall); }

/* member */
.section.detail-member { margin-top: var(--nav-offset); padding: 0; }
.detail-member-wrap { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; margin-top: 92px; }
.col-left-member-detail { grid-column: 1 / 3; display: flex; flex-flow: column; justify-content: space-around; gap: 48px; padding-top: 48px; }
.profile-member-detail { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; margin-top: var(--p-xmedium); }
.text-profile-member-detail { display: flex; flex-flow: column; gap: var(--p-xmedium); }
.image-profile-cover { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 8px; }
.name-mamber { font-size: var(--fs-h1); line-height: 1; letter-spacing: var(--ls-h1); font-weight: 600; }
.col-right-member-detail { grid-column: 3 / 5; position: relative; margin-left: 1px; }
.image-avatar-member { display: block; width: 100%; max-height: 86vh; object-fit: cover; border-radius: 8px 8px 0 0; }
.col-right-member-detail .bg-cover-image { inset: 60% 0 0; }

/* utility pages */
.page-wrapper.pages-bg-black { background: var(--primary); }
.section.is-first { margin-top: var(--nav-offset); }
.section.is-first.utility { padding: 200px 0 100px; }
.hero-utility-pages { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; align-items: center; }
.hero-utility-pages > .section-label-wrap { grid-column: 1; grid-row: 1; }
.heading-hero-utility-wrap { grid-column: 2 / 5; grid-row: 1; overflow: hidden; }
.heading-hero-utility { color: var(--white); font-size: var(--fs-h1); line-height: 1; letter-spacing: -.02em; font-weight: 600; white-space: nowrap; }
.sub-heading-hero-utility-wrap { grid-column: 3 / 4; grid-row: 2; }
.sub-heading-hero-utility { margin-top: var(--sp-medium); color: var(--w-50); font-size: var(--fs-body-5); line-height: var(--lh-body-5); }
.section.main-content { background: var(--white); }
.main-cotent-wrapper { display: flex; flex-flow: column; gap: var(--sp-large); }
.item-content, .version-wrap, .color-style-wrap, .typo-style-wrap, .button-style-wrap, .image-style-wrap, .font-family-style-wrap { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.item-content > .section-label-wrap, .version-wrap > .section-label-wrap { align-self: end; }
.item-content > .content-child, .version-wrap > .content-child, .content-color-style, .content-typo-style, .content-button-style, .content-parent-style, .font-family-style-wrap > .content-child { grid-column: 2 / 5; }
.content-child { display: flex; flex-flow: column; align-items: flex-start; gap: var(--p-xmedium); }
.content-child.gap-16 { gap: var(--p-medium); }
.heading-item-privacy { font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: 500; }
.item-list-ordered { display: flex; flex-flow: column; gap: 8px; }
.title-list-ordered { font-size: var(--fs-body-4); line-height: var(--lh-body-3); font-weight: 700; }
.sub-title-list-unordered, .text-item-list-unordered { color: var(--n-600); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.item-list-unordered { display: flex; align-items: center; }
.dot-item-list { width: 4px; height: 4px; margin: 0 10px; border-radius: 100px; background: var(--n-600); }
.title-version { color: #1a1a1a; font-size: var(--fs-h4); font-weight: 600; line-height: 1.1; }
.desc-version { color: var(--n-600); font-size: var(--fs-body-4); line-height: var(--lh-h6); }
.content-color-style { display: flex; flex-flow: column; gap: var(--p-xmedium); }
.heading-content-color { font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: 500; }
.list-color { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.item-color { position: relative; isolation: isolate; display: flex; flex-flow: column; justify-content: flex-end; height: 120px; padding: var(--p-xsmall); font-size: var(--fs-body-5); line-height: var(--lh-body-5); overflow: hidden; }
.item-color.typo-white { color: var(--white); }
.bg-item-color { position: absolute; inset: 0; z-index: -1; border-radius: 8px; }
.bg-item-color._000 { background: #000; } .bg-item-color._191a1d { background: #191a1d; } .bg-item-color._404040 { background: #404040; }
.bg-item-color._575757 { background: #525252; } .bg-item-color.a0a0a0 { background: #a0a0a0; } .bg-item-color.a3a3a3 { background: #a3a3a3; }
.bg-item-color.d4d4d4 { background: #e6e6e6; } .bg-item-color.e5e5e5 { background: #f2f2f2; } .bg-item-color.fafafb { background: #fafafb; border: 1px solid #e6e6e6; }
.bg-item-color.accent { background: var(--accent); }
.code-item-color { font-weight: 600; }
.content-typo-style { display: flex; flex-flow: column; gap: var(--sp-xmedium); }
.font-family-wrap, .font-size-wrap { display: flex; flex-flow: column; gap: var(--p-xmedium); }
.font-family { font-size: var(--fs-h2); letter-spacing: var(--ls-h234); font-weight: 600; line-height: 1; }
.demo-font-family { color: var(--n-600); line-height: var(--lh-body-1); }
.title-font-size { color: var(--n-600); line-height: var(--lh-body-1); font-weight: 600; font-size: var(--fs-body-4); }
.font-size-h1 { font-size: var(--fs-h1); letter-spacing: var(--ls-h1); font-weight: 600; line-height: 1; }
.font-size-h2 { font-size: var(--fs-h2); letter-spacing: var(--ls-h234); font-weight: 600; line-height: 1; }
.font-size-h3 { font-size: var(--fs-h3); letter-spacing: var(--ls-h234); font-weight: 600; line-height: 1; }
.font-size-h4 { font-size: var(--fs-h4); letter-spacing: var(--ls-h234); font-weight: 600; line-height: 1; }
.font-size-h5 { font-size: var(--fs-h5); letter-spacing: var(--ls-h5); font-weight: 600; line-height: 1; }
.font-size-h6 { font-size: var(--fs-h6); letter-spacing: var(--ls-h6); font-weight: 600; line-height: 1; }
.font-size-body-1 { font-size: var(--fs-body-1); font-weight: 500; } .font-size-body-2 { font-size: var(--fs-body-2); font-weight: 500; }
.font-size-body-3 { font-size: var(--fs-body-3); font-weight: 500; } .font-size-body-4 { font-size: var(--fs-body-4); font-weight: 500; } .font-size-body-5 { font-size: var(--fs-body-5); font-weight: 500; }
.content-button-style { display: flex; flex-flow: column; align-items: flex-start; gap: var(--p-xmedium); }
.demo-button { width: 140px; }
.demo-button-primary { width: 280px; }
.content-parent-style { display: flex; flex-flow: column; gap: var(--sp-large); }
.images-style-wrap { width: 100%; height: 480px; border-radius: 8px; overflow: hidden; }
.images-cover { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.link-underline-wrap.dark .text-link-underline.has-images { color: var(--n-600); font-size: var(--fs-body-1); line-height: var(--lh-body-1); font-weight: 500; }
.line-under-text._600 { background: var(--n-600); }
.title-font-family { color: #0a0a0a; font-size: var(--fs-h3); letter-spacing: var(--ls-h234); font-weight: 600; line-height: 1; }
.desc-font-family { color: var(--n-600); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.link-font-family { color: var(--n-600); text-underline-position: under; }

/* 404 / 401 */
.page-wrapper.section-404 { min-height: 100vh; }
.section.section-404 { min-height: calc(100vh - 40px); margin-top: var(--nav-offset); padding-top: 200px; }
.title-h0-wrap { max-width: var(--container); height: 185px; margin: 0 auto; padding-left: var(--pad-x); overflow: hidden; }
.title-h0 { color: var(--n-300); font-family: Geist, sans-serif; font-size: 280px; line-height: .7; letter-spacing: -.05em; white-space: nowrap; font-weight: 400; }
._404-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; padding-top: var(--pad-x); }
._404-content-left { grid-column: 1 / 3; }
._404-content-right { grid-column: 3 / 4; display: flex; flex-flow: column; gap: var(--sp-xsmall); }
._404-heading { font-size: var(--fs-h6); line-height: var(--lh-h6); letter-spacing: var(--ls-h6); font-weight: 600; }
._404-description { color: var(--n-700); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.password-content { padding-top: 220px !important; padding-bottom: 120px !important; display: flex; flex-flow: column; gap: var(--sp-large); }
.title-banner { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.inner-title { grid-column: 2 / 5; font-size: var(--fs-h1); line-height: 1; font-weight: 600; letter-spacing: -.02em; }
.password-form { display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 12px; }
.inner-password-form { grid-column: 3 / 4; margin-right: -13px; }
.form-password-label { margin-bottom: 24px; color: var(--n-700); font-size: var(--fs-body-4); line-height: var(--lh-body-4); }
.input-form-password { position: relative; display: flex; }
.input-field-password { width: 100%; height: 49px; padding: 14.5px 45px 14.5px 16px; border: 1px solid #1111111a; border-right: 0; outline: none; font-size: 14px; transition: border-color .3s; }
.input-field-password:focus { border-bottom-color: var(--accent); }

/* inner pages — responsive */
@media (max-width: 991px) {
  .title-large { font-size: 280px; }
  .title-large-wrap { height: 200px; }
  .section.hero-inner-page { padding-top: 200px; }
  .image-hero-inner-page { width: 130px; height: 130px; top: -200%; }
  .content-cover-title .info-email { grid-column: 3 / 5; }
  .about-new { height: auto; }
  .content-about-2nd { position: relative; top: 0; grid-template-columns: 1fr; gap: 48px; }
  .left-col-about-2nd, .right-col-about-2nd { grid-column: auto; }
  .title-about-2nd { grid-column: 2 / 5; }
  .list-card-feature-about { flex-wrap: wrap; }
  .item-card-feature-about, .item-card-feature-about:first-child { flex: 1 1 45%; }
  .content-wcu-2nd { grid-template-columns: 1fr 1fr; }
  .content-wcu-2nd .item-wcu-2nd:nth-child(1), .content-wcu-2nd .item-wcu-2nd:nth-child(6) { grid-column: span 1; }
  .title-wcu-2nd .heading-h1 { grid-column: 1 / 5; }
  .sub-title-wcu-2nd { grid-column: 1 / 4; }
  .competitive-advantage { height: auto; }
  .competitive-advantage-sticky { position: relative; top: 0; padding-bottom: 80px; }
  .image-track-scroll { overflow-x: auto; width: auto; }
  .item-image-track-scroll { width: 60vw; height: 420px; }
  .text-scroll-large { font-size: 64px; }
  .title-services-item { font-size: var(--fs-h3); }
  .image-single-services { height: 360px; }
  .content-detail-services { grid-template-columns: 1fr; gap: 40px; }
  .content-text-detail-services, .content-image-detail-services { grid-column: auto; }
  .content-image-detail-services { min-height: 420px; }
  .process-heading { grid-column: 2 / 5; }
  .process-tab-link.w--current { font-size: var(--fs-h2); }
  .process-item-content { grid-column: 2 / 5; }
  .content-work > .right-content-detail-work { grid-column: 2 / 5; }
  .content-work._03 > .left-content-detail-work { grid-column: 1 / 5; margin: 0 0 32px; }
  .content-work._03 { row-gap: 32px; }
  .content-work._03 > .right-content-detail-work { grid-column: 1 / 5; }
  .image-content-work-3 { height: 460px; border-radius: 8px; }
  .static-list-impact { grid-template-columns: 1fr 1fr; row-gap: 48px; }
  .blog-list { grid-template-columns: 1fr 1fr; }
  .single-blog-content-wrapper { grid-template-columns: 1fr; gap: 32px; }
  .sidebar-blog, .single-blog-content { grid-column: auto; }
  .sidebar-blog { flex-direction: row; align-items: center; justify-content: space-between; }
  .list-social { flex-direction: row; }
  .single-blog-pots { height: 420px; }
  .right-content-contact { grid-column: 2 / 5; }
  .title-compare-pricing { grid-column: 1 / 5; margin-top: 24px; }
  .compare-pricing-title .child-grid-layout { grid-column: 1 / 5; }
  .feature-pricing-content { grid-template-columns: 1fr; gap: 32px; }
  .compare-wrapper { grid-column: auto; }
  .detail-member-wrap { grid-template-columns: 1fr; gap: 32px; }
  .col-left-member-detail, .col-right-member-detail { grid-column: auto; }
  .heading-hero-utility { font-size: var(--fs-h2); }
  .item-content > .content-child, .version-wrap > .content-child, .content-color-style, .content-typo-style, .content-button-style, .content-parent-style, .font-family-style-wrap > .content-child { grid-column: 1 / 5; }
  .item-content, .version-wrap, .color-style-wrap, .typo-style-wrap, .button-style-wrap, .image-style-wrap, .font-family-style-wrap { row-gap: 24px; }
  .title-h0 { font-size: 180px; }
  ._404-content-right { grid-column: 3 / 5; }
  .inner-password-form { grid-column: 2 / 5; margin-right: 0; }
}
@media (max-width: 767px) {
  .title-large { font-size: 180px; }
  .title-large-wrap { height: 140px; }
  .section.hero-inner-page { padding-top: 160px; padding-bottom: 120px; }
  .image-hero-inner-page { width: 100px; height: 100px; right: 8%; }
  .content-cover-title { grid-template-columns: 1fr 1fr; }
  .content-cover-title .info-email { grid-column: 2; }
  .label-cover-hero { grid-template-columns: 1fr 1fr; row-gap: 8px; margin-top: -20px; }
  .image-gallery-small { width: 28vw; height: 180px; }
  .image-gallery-medium { width: 50vw; height: 180px; }
  .image-gallery-medium.tall { width: 28vw; height: 372px; }
  .image-gallery-large { width: 70vw; height: 372px; }
  .header-about-2nd { grid-template-columns: 1fr; gap: 24px; }
  .title-about-2nd { grid-column: auto; }
  .right-col-about-2nd { grid-template-columns: 1fr; }
  .indicator-item-2 { grid-column: auto; grid-template-columns: 1fr; }
  .item-card-feature-about, .item-card-feature-about:first-child { flex: 1 1 100%; height: 340px; }
  .about-feature { gap: 48px; }
  .content-wcu-2nd { grid-template-columns: 1fr; }
  .header-wcu-2nd, .title-wcu-2nd { grid-template-columns: 1fr; }
  .title-wcu-2nd .heading-h1, .sub-title-wcu-2nd { grid-column: auto; }
  .item-wcu-2nd { height: 230px; }
  .scroll-text-single:first-child { padding-left: 0; }
  .text-scroll-large { font-size: 40px; }
  .content-services-collection { flex-direction: column-reverse; gap: 24px; padding: 32px 0; }
  .services-content-text, .services-content-image { width: 100%; gap: 20px; }
  .image-single-services { height: 260px; }
  .info-services { width: auto; }
  .services-item { position: relative; top: 0; }
  .process-header-wrap { grid-template-columns: 1fr; gap: 20px; }
  .process-heading { grid-column: auto; }
  .process-tab-link { grid-template-columns: 1fr; gap: 12px; padding: 32px 0; }
  .process-item-content { grid-column: auto; }
  .process-tab-link.w--current { font-size: var(--fs-h1); }
  .title-work-wrap .heading-h1 { max-width: 100%; }
  .content-work { grid-template-columns: 1fr; gap: 32px; }
  .content-work > .left-content-detail-work, .content-work > .right-content-detail-work { grid-column: auto !important; }
  .content-work._03 > .left-content-detail-work { margin: 0; }
  .image-content-work-3 { height: 360px; }
  .static-list-impact { grid-template-columns: 1fr; }
  .blog-toolbar-wrap { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 16px; }
  .category-button { padding: 12px 14px 12px 0; }
  .blog-list { grid-template-columns: 1fr; }
  .image-item-blog-wrap { height: 280px; }
  .name-blog-post { font-size: 30px; }
  .single-blog-pots { height: 300px; }
  .contact-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .contact-wrapper .left-content-contact, .right-content-contact { grid-column: auto; }
  .compare-content { grid-template-columns: 1.1fr 1fr 1fr; column-gap: 6px; }
  .compare-content .text-body-4, .compare-content .text-body-1 { font-size: 12px; }
  .compare-content-item, .compare-heading-item { padding-left: 0; }
  .profile-member-detail { grid-template-columns: 1fr; gap: 20px; }
  .hero-utility-pages { grid-template-columns: 1fr; gap: 24px; }
  .hero-utility-pages > .section-label-wrap, .heading-hero-utility-wrap, .sub-heading-hero-utility-wrap { grid-column: auto; grid-row: auto; }
  .heading-hero-utility { white-space: normal; }
  .sub-heading-hero-utility { margin-top: 0; }
  .section.is-first.utility { padding: 160px 0 64px; }
  .list-color { grid-template-columns: repeat(2, 1fr); }
  .title-h0 { font-size: 120px; }
  .title-h0-wrap { height: 100px; }
  ._404-wrapper { grid-template-columns: 1fr; gap: 24px; }
  ._404-content-left, ._404-content-right { grid-column: auto; }
  .title-banner, .password-form { grid-template-columns: 1fr; }
  .inner-title, .inner-password-form { grid-column: auto; }
}
.heading-type-2-wrap .text-align-end { grid-column: 3 / 5; }
.password-content > .container { width: 100%; }