@charset "UTF-8";

/* ======================================================================
   ITCSS LAYERS
   01. Settings (tokens/vars) 02. Generic (reset/base/a11y)
   03. Elements (HTML tags) 04. Objects (layout/structure)
   05. Components (UI sections) 06. Utilities (helpers/overrides)
   ====================================================================== */

/* =========================================
   01. SETTINGS / TOKENS
========================================= */

/* 01.1 Fonts */
@import url("https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,200;1,300;1,400;1,500;1,600;1,700&display=swap");

/* 01.2 Design Tokens */
:root{
	
  /* Colors */
  --primary:#111;
  --secondary:#555;
  --border:rgba(17,17,17,.10);
  --bg:#EDECE8;
  --black:#000;
  --white:#FFF;
  --text-muted:#666;
  --border-light:#DADADA;
  --overlay-dark:rgba(0,0,0,.45);
  /* Loader bg fallback */
  --action: var(--black);
  /* Fonts */
  --font_bai:"Bai Jamjuree", sans-serif;
  /* Z-Index scale */
  --z-progress:99;
  --z-overlay:900;
  --z-header:9999;
  --z-drawer:99999;
  --z-loader:100000;
  /* Typography */
  --fs-10:10px; --fs-12:12px; --fs-14:14px; --fs-16:16px; --fs-18:18px; --fs-20:20px; --fs-24:24px;
  --fs-28:28px; --fs-30:30px; --fs-35:35px; --fs-40:40px; --fs-42:42px; --fs-48:48px; --fs-50:50px;
  --fs-60:60px; --fs-70:70px; --fs-75:75px; --fs-80:80px; --fs-90:90px; --fs-100:100px; --fs-150:150px;
  --lh-1:1;
  --lh-16:16px; --lh-18:18px; --lh-20:20px; --lh-22:22px; --lh-24:24px; --lh-26:26px;
  --lh-30:30px; --lh-40:40px; --lh-45:45px; --lh-50:50px; --lh-80:80px; --lh-145:145px;
  --ls--0_48:-0.48px; --ls--0_5:-0.5px; --ls--0_8:-0.8px; --ls--1_2:-1.2px; --ls--2:-2px; --ls--2_5:-2.5px; --ls--10:-10px;
  /* Spacing Tokens */
  --sp-0:0; --sp-3:3px; --sp-5:5px; --sp-8:8px; --sp-10:10px; --sp-12:12px; --sp-14:14px; --sp-16:16px;
  --sp-18:18px; --sp-20:20px; --sp-25:25px; --sp-30:30px; --sp-35:35px; --sp-40:40px; --sp-45:45px; --sp-50:50px;
  --sp-60:60px; --sp-70:70px; --sp-80:80px; --sp-100:100px; --sp-130:130px; --sp-150:150px; --sp-180:180px;
  --sp-200:200px; --sp-250:250px; --sp-270:270px; --sp-300:300px; --sp-340:340px; --sp-400:400px; --sp-500:500px;
  --sp-560:560px; --sp-600:600px; --sp-700:700px; --sp-800:800px; --sp-1890:1890px;
  /* Radius */
  --radius-2:2px; --radius-5:5px; --radius-50:50px; --radius-500:500px;
  /* Motion */
  --dur-200:.2s; --dur-300:.3s; --dur-350:.35s; --dur-400:.4s; --dur-450:.45s; --dur-500:.5s;
  --ease:ease; --ease-in-out:ease-in-out; --linear:linear;
  /* Global Radius Sync */
  --radius-card:10px;
  --radius-card-hover:10px;
  --radius-img:var(--radius-card);
  /* Section Title Tokens */
  --section-title-span-pl: var(--sp-500);
  /* Hero Tokens */
  --hero-pt:clamp(400px,24vw,600px);
  --hero-pb:var(--sp-50);
  --hero-gutter:var(--sp-30);
  --hero-title-size:clamp(35px,8vw,150px);
  --hero-title-ls:clamp(-2px,-0.8vw,-10px);
  --hero-desc-max:190px;
  --hero-desc-top:clamp(90px,16vw,600px);
  /* FX Tokens */
  --fx-ease-out:cubic-bezier(.16,1,.3,1);
  /* A11y focus */
  --focus-ring: rgba(59,130,246,.65);
  --focus-ring-offset: 3px;
  /* Theme hint */
  color-scheme: light;
}

/* =========================================
   02. GENERIC / RESET / BASE / A11Y
========================================= */
/* 02.1 Reset */
*{margin:0;padding:0;}
*,*::before,*::after{box-sizing:border-box;}
ul,ol,p,h1,h2,h3,h4,h5,h6,img{margin:0;padding:0;}
html{
  scroll-behavior:smooth;
  text-size-adjust:100%;
}
body{
  font-family:var(--font_bai);
  line-height:1;
  font-size:var(--fs-16);
  font-weight:500;
  letter-spacing:var(--ls--0_48);
  color:var(--primary);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
a{
  text-decoration:none;
  color:inherit;
  transition:color var(--dur-300) var(--ease);
}
button{background-color:transparent;border:0;cursor:pointer;}
button,input,textarea,select{font:inherit;color:inherit;}
:where(a,button,input,textarea,select,[tabindex]):focus{outline:none;}
:focus-visible{
  outline:2px solid var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}
strong{font-weight:600;}

/* 02.2 Base Elements default */
h1,h2,h3,h4,h5,h6{
  color:var(--primary);
  line-height:1.2;
  font-weight:500;
}
img{
  max-width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius-img);
}

/* 02.3 Visually hidden */
.visually-hidden:not(:focus):not(:active){
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  height:1px;
  width:1px;
  overflow:hidden;
  position:absolute;
  white-space:nowrap;
}

/* 02.4 Reduced motion */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  *{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
    will-change:auto !important;
    filter:none !important;
    backdrop-filter:none !important;
  }
}

/* =========================================
   03. ELEMENTS / TYPOGRAPHY
========================================= */
h1{font-size:var(--fs-48);}
h2{font-size:var(--fs-40);}
h3{font-size:var(--fs-30);}
h4{font-size:var(--fs-24);}
h5{font-size:var(--fs-20);}
h6{font-size:var(--fs-18);}

/* =========================================
   04. OBJECTS / LAYOUT / STRUCTURE
========================================= */
/* 04.1 Layout Containers */
main{display:inline-block;width:100%;overflow:hidden;}
.container{--container-gutter-x:var(--sp-30);}
.rr-container-1890{max-width:var(--sp-1890);}

/* GSAP smooth wrappers */
#smooth-wrapper{position:relative;}
#smooth-content{position:relative;}

/* 04.2 Utility-like structural helpers */
.rr-pos-rel{position:relative;}
.rr-ov-hidden{overflow:hidden;}
.rr-bg-light-gray{background-color:var(--bg);}
hr{margin:0;border-top:1px solid var(--border);opacity:1;}

/* 04.3 Section Spacing */
.section-spacing{--pt:var(--sp-180);padding:var(--pt) 0;}
.section-spacing-140{--pt:var(--sp-150);padding:var(--pt) 0;}
.section-spacing-top-140{--pt:var(--sp-150);padding-top:var(--pt);}

/* Responsive scaling */
@media (max-width:1919px){
  .section-spacing,
  .section-spacing-140,
  .section-spacing-top-140{--pt:var(--sp-100);}
}
@media (max-width:1399px){
  .section-spacing,
  .section-spacing-140,
  .section-spacing-top-140{--pt:var(--sp-80);}
}
@media (max-width:991px){
  .section-spacing,
  .section-spacing-140,
  .section-spacing-top-140{--pt:var(--sp-60);}
}

/* =========================================
   05. COMPONENTS / UI SECTIONS
========================================= */
/* 05.1 Language Switch */
.lang-en,.lang-zh{transition:opacity var(--dur-200) var(--ease);}
[data-site-lang="en"] .lang-zh,
[data-site-lang="zh"] .lang-en{display:none !important;}
.lang-switch{
  display:flex;
  gap:var(--sp-10);
  align-items:center;
}
.lang-switch button{
  font-size:var(--fs-16);
  padding:10px 12px;
}

/* 05.2 Scrollbar */
::-webkit-scrollbar{width:var(--sp-5);}
::-webkit-scrollbar-track{background:#d6d6d6;}
::-webkit-scrollbar-thumb{background:#888;}
::-webkit-scrollbar-thumb:hover{background:#555;}

/* 05.3 Offcanvas Overlay + Modal Drawer */
.offcanvas-overlay{
  position:fixed;
  inset:0;
  background:#000;
  z-index:var(--z-overlay);
  opacity:0;
  visibility:hidden;
  transition:opacity var(--dur-500) var(--ease), visibility var(--dur-500) var(--ease);
  pointer-events:none;
}
.is-drawer-open .offcanvas-overlay{
  opacity:.45;
  visibility:visible;
  pointer-events:auto;
}
.is-drawer-open{
  overflow:hidden;
  touch-action:none;
}
.side-info-close{
  font-size:var(--fs-20);
  transition:transform var(--dur-300) var(--linear);
  color:var(--black);
  width:var(--sp-40);
  height:var(--sp-40);
  border:1px solid var(--black);
  border-radius:var(--radius-5);
  line-height:38px;
}
.side-info-close:hover{transform:rotate(90deg);}
.side-info{
  background:var(--white);
  padding:var(--sp-40) var(--sp-45);
  position:fixed;
  right:0;
  top:0;
  width:var(--sp-500);
  height:100%;
  transform:translateX(calc(100% + 80px));
  transition:transform var(--dur-450) var(--ease-in-out), opacity var(--dur-450) var(--ease-in-out);
  z-index:var(--z-drawer);
  overflow-y:auto;
  overscroll-behavior-y:contain;
  scrollbar-width:none;
}
.side-info::-webkit-scrollbar{display:none;}
.side-info.info-open{
  opacity:1;
  transform:translateX(0);
}
@media (max-width:1199px){ .side-info{width:var(--sp-500);} }
@media (max-width:575px){ .side-info{width:var(--sp-250);padding:var(--sp-30) var(--sp-20);} }

/* 05.4 Header & Mobile Menu */
.offset-header{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-20);}
.header__logo a{display:inline-flex;align-items:center;gap:8px;}
.header__logo span{
  font-size:var(--fs-16);
  font-weight:500;
}

/* Mobile menu */
.mobile-menu{margin-top:var(--sp-40);padding-bottom:var(--sp-50);}
.mobile-menu.mean-container .mean-nav{background:none;margin-top:0;}
.mobile-menu.mean-container .mean-nav > ul{
  width:100%;
  list-style-type:none;
  display:block !important;
}
.mobile-menu.mean-container .mean-nav > ul > li:last-child > a{
  border-bottom:1px solid var(--border);
}
.mobile-menu.mean-container .mean-nav .new{
  font-size:var(--fs-10);
  font-weight:600;
  background:#FFA38E;
  color:#999;
  padding:var(--sp-3) var(--sp-8);
  line-height:1;
  display:flex;
  align-items:center;
  border-radius:var(--radius-2);
}
.mobile-menu.mean-container .mean-nav ul li a{
  width:100%;
  padding:var(--sp-16) 0;
  font-weight:500;
  font-size:var(--fs-18);
  line-height:1;
  color:var(--primary);
  text-transform:capitalize;
  border-top:1px solid var(--border);
  display:flex;
  gap:var(--sp-8);
  justify-content:flex-start;
  align-items:center;
  outline:none;
  transition:transform var(--dur-400) var(--ease), box-shadow var(--dur-400) var(--ease);
}
.mobile-menu.mean-container .mean-nav ul li a:hover{color:var(--primary);}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand{
  height:48px;
  justify-content:end;
  font-weight:300;
  border:none !important;
}
.mobile-menu.mean-container .mean-nav ul li a.mean-expand:hover{background:rgba(255,255,255,.1);}

/* 05.5 Preloader & Progress */
.loader-wrap{
  position:fixed;
  height:100vh;
  width:100vw;
  inset:0;
  display:flex;
  overflow:hidden;
  align-items:center;
  justify-content:center;
  background:var(--action, var(--black));
  z-index:var(--z-loader);
}
.loader-wrap svg{
  position:absolute;
  top:0;
  width:100vw;
  height:110vh;
  fill:#000;
}
.loader-wrap .loader-wrap-heading .load-text{
  font-size:var(--fs-100);
  font-weight:800;
  text-transform:uppercase;
  color:var(--white);
  z-index:20;
}
.load-text span{animation:loading 1s infinite alternate;}
.load-text span:nth-child(1){animation-delay:0s;}
.load-text span:nth-child(2){animation-delay:.1s;}
.load-text span:nth-child(3){animation-delay:.2s;}
.load-text span:nth-child(4){animation-delay:.3s;}
.load-text span:nth-child(5){animation-delay:.4s;}
.load-text span:nth-child(6){animation-delay:.5s;}
@keyframes loading{0%{opacity:1;}100%{opacity:0;}}
.progress-wrap{
  position:fixed;
  right:var(--sp-20);
  bottom:var(--sp-20);
  height:var(--sp-50);
  width:var(--sp-50);
  cursor:pointer;
  display:grid;
  place-items:center;
  border-radius:var(--radius-50);
  z-index:var(--z-progress);
  opacity:0;
  visibility:hidden;
  transform:translateY(-100px);
  transition:all 300ms linear;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.12);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}
.progress-wrap__text{
  font-size:10px;
  letter-spacing:.16em;
  font-weight:700;
}
.progress-wrap.active-progress{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* 05.6 Header & Menu (Desktop) */
.header-area{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:var(--z-header);
  background:rgba(237,236,232,.8);
  backdrop-filter:blur(5px);
  transition:background var(--dur-300) var(--ease);
}
.header-area__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--sp-50);
}
.header-area .header__nav{margin-left:auto;}
.header-area .header-right{display:flex;align-items:center;gap:var(--sp-20);}

/* Menu Base */
.main-menu > ul{display:flex;}
.main-menu li{position:relative;list-style:none;}
.main-menu li a{
  display:flex;
  align-items:center;
  font-weight:400;
  font-size:var(--fs-18);
  line-height:1;
  color:var(--primary);
  padding:var(--sp-40) var(--sp-16);
  text-transform:capitalize;
  transition:color var(--dur-300) var(--ease);
}
.header-area .main-menu li a{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-16);
  color:var(--black);
  padding:var(--sp-16) var(--sp-20);
}
.main-menu > ul > li:hover > a,
.header-area .main-menu li a:hover{color:var(--secondary);}

/* Header Buttons & Toggles */
.header-area .rr-btn-primary{
  padding: 8px 10px;
  color:var(--black);
  display:flex;
  align-items:center;
  gap:var(--sp-10);
}
.header-area .rr-btn-primary button{
  background:transparent;
  padding:8px 10px;
}
.header-area .rr-btn-primary button:hover{background:rgba(0,0,0,.05);}
.header-area .rr-btn-primary button[aria-pressed="true"]{background:rgba(0,0,0,.08);}
.header-area .header-right .side-toggle .bar-icon{
  width:35px;
  height:15px;
  overflow:visible;
}
@media (max-width:575px){
  .header-area .header-right .side-toggle{
    border-left:none;
    margin-left:0;
    padding:var(--sp-16) var(--sp-20);
  }
  .header-area .rr-btn-primary{display:none;}
}

/* Shared icon button */
.bar-icon{
  width:var(--sp-30);
  height:18px;
  display:flex;
  overflow:hidden;
  flex-direction:column;
  justify-content:space-between;
  transition:color var(--dur-200) var(--ease);
}
.bar-icon span{
  width:100%;
  height:2px;
  display:inline-block;
  background:var(--primary);
  transition:background var(--dur-200) var(--ease);
}
.bar-icon:hover span{background:var(--secondary);}

/* 05.7 Media/Card radius */
.works__thumb,
.works-section__thumb,
.services__thumb,
.about-overview__thumb,
.projects__item{
  border-radius:var(--radius-card);
  overflow:hidden;
  transition:border-radius var(--dur-300) var(--ease);
}
.works__thumb:hover,
.works-section__thumb:hover,
.services__thumb:hover,
.about-overview__thumb:hover,
.projects__item:hover{border-radius:var(--radius-card-hover);}
.card,[class*="card"]{
  border-radius:var(--radius-card);
  transition:border-radius var(--dur-300) var(--ease);
}
.card:hover,[class*="card"]:hover{border-radius:var(--radius-card-hover);}

/* 05.8 Section Titles */
.section-title__wrapper{
  gap:var(--sp-30);
  display:grid;
  grid-template-columns:var(--sp-400) var(--sp-800) 1fr;
}
.section-title__wrapper .section-sub-title{
  font-size:var(--fs-16);
  font-weight:500;
  margin-top:var(--sp-10);
  line-height:var(--lh-20);
  margin-left:var(--sp-50);
  position:relative;
  letter-spacing:var(--ls--0_48);
}
.section-title__wrapper .section-title{
  font-size:var(--fs-50);
  font-weight:500;
  line-height:var(--lh-50);
  letter-spacing:var(--ls--2_5);
}
.section-title__wrapper .desc{margin-top:var(--sp-10);}
.section-subtitle__wrap .subtitle{
  font-size:var(--fs-16);
  font-weight:400;
  line-height:var(--lh-20);
  color:var(--primary);
}
.section-subtitle__wrap .white{color:var(--white);}
.section-title__wrap{display:flex;justify-content:space-between;gap:var(--sp-20);}
.section-title__wrap.project{padding:var(--sp-100) 0 var(--sp-80);}
.section-title__wrap.work{display:block;text-align:center;}
.section-title__wrap .mission-title{
  display:block;
  padding-bottom:var(--sp-130);
  text-align:center;
  margin:0 auto;
}
.section-title__wrap .section-title{
  font-weight:300;
  font-size:var(--fs-150);
  line-height:var(--lh-145);
  color:var(--black);
  text-transform:uppercase;
}
.section-title__wrap .section-title span{
  display:block;
  text-align:right;
  margin-top:-15px;
  padding-left:var(--section-title-span-pl);
}
.section-title__wrap .number-text{
  font-weight:300;
  font-size:var(--fs-150);
  line-height:var(--lh-24);
  padding-top:var(--sp-60);
  color:var(--black);
  letter-spacing:-0.03em;
}

/* Responsive titles */
@media (max-width:1919px){
  .section-title__wrapper{grid-template-columns:400px 650px 1fr;}
  .section-title__wrap .number-text{font-size:var(--fs-100);}
}
@media (max-width:1399px){
  .section-title__wrapper{grid-template-columns:300px 500px 1fr;}
  .section-title__wrap .section-title span{padding-left:var(--sp-270);}
  .section-title__wrap .section-title{font-size:var(--fs-75);line-height:var(--sp-100);}
  .section-title__wrap .number-text{font-size:var(--fs-75);}
}
@media (max-width:1199px){
  .section-title__wrapper{grid-template-columns:300px var(--sp-500) 1fr;}
  .section-title__wrap .section-title{font-size:var(--fs-60);line-height:88px;}
  .section-title__wrap .number-text{font-size:var(--fs-60);}
}
@media (max-width:991px){
  .section-title__wrapper{grid-template-columns:1fr;}
  .section-title__wrapper .section-title{margin-top:0;letter-spacing:0;}
  .section-title__wrapper .section-title br{display:none;}
  .section-title__wrapper .desc{margin-top:0;}
  .section-subtitle__wrap.overview{margin-top:0;padding-left:var(--sp-10);white-space:nowrap;}
  .section-title__wrap .section-title span{padding-left:var(--sp-200);}
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand{height:25px;}
}
@media (max-width:767px){
  .g-0{padding-right:var(--sp-16);padding-left:var(--sp-16);}
  .row.g-0{padding-right:0;padding-left:0;}
  .loader-wrap .loader-wrap-heading .load-text{font-size:var(--fs-50);}
  .section-subtitle__wrap.overview{margin-top:var(--sp-20);}
  .section-title__wrap .section-title span{padding-left:var(--sp-150);}
  .section-title__wrap .section-title{font-size:var(--fs-42);line-height:var(--lh-50);}
  .section-title__wrap .number-text{font-size:var(--fs-50);}
  .mobile-menu.mean-container .mean-nav ul li a{font-size:var(--fs-20);}
  .mobile-menu.mean-container .mean-nav ul li a.mean-expand{height:50px;}
  .mobile-menu.mean-container .mean-nav ul li li a.mean-expand{height:22px;}
}
@media (max-width:575px){
  .loader-wrap .loader-wrap-heading .load-text{font-size:var(--fs-40);}
  .section-title__wrapper{gap:var(--sp-20);}
  .section-title__wrapper .section-title{font-size:var(--fs-30);line-height:40px;}
  .section-title__wrap{flex-wrap:wrap;}
  .section-title__wrap.project{padding:var(--sp-40) 0;}
  .section-title__wrap .mission-title{padding-bottom:var(--sp-60);}
  .section-title__wrap .section-title span{padding-left:0;text-align:left;}
  .section-title__wrap .section-title{font-size:var(--fs-30);line-height:var(--lh-50);}
  .section-title__wrap .number-text{font-size:var(--fs-35);}
}

/* br hiding scoped */
@media (max-width:767px){
  .hero-section__title br,
  .section-title__wrapper .section-title br,
  .services__desc br{display:none;}
}

/* 05.10 Hero Section */
.hero-section__content{margin:0 auto;padding:var(--hero-pt) 0 var(--hero-pb);}
.hero-section__title{
  line-height:1;
  font-size:var(--hero-title-size);
  font-weight:500;
  text-align:center;
  letter-spacing:var(--hero-title-ls);
  color:var(--primary);
  text-wrap:balance;
}
.hero-section__bottom{
  display:flex;
  margin:0 var(--hero-gutter);
  align-items:center;
  justify-content:space-between;
  padding-bottom:var(--sp-18);
  gap:var(--sp-16);
}
.hero-section__bottom span{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  color:var(--primary);
}
.hero-section__thumb{
  position:relative;
  width:100%;
  height:100vh;
  overflow:hidden;
}
.hero-section__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transform:translate3d(0,0,0);
  will-change:transform;
  backface-visibility:hidden;
}
.hero-section__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.hero-section__desc{
  position:absolute;
  top:var(--hero-desc-top);
  right:var(--hero-gutter);
  font-size:var(--fs-12);
  max-width:var(--hero-desc-max);
  line-height:var(--lh-20);
  text-align:right;
  color:var(--white);
  text-shadow:0 2px 12px rgba(0,0,0,.35);
}
@media (max-width:1399px){ .hero-section__desc{right:var(--sp-30);} }
@media (max-width:575px){
  .hero-section__desc{
    height:100svh;
    bottom:var(--sp-20);
    right:var(--sp-20);
    left:auto;
    max-width:calc(100% - var(--sp-40));
    text-align:left;
    font-size:var(--fs-14);
  }
}
@media (prefers-reduced-motion: reduce){
  .hero-section__thumb img{transition:none !important;will-change:auto !important;}
}

/* About、Services、Works、Awards、Footer、Utilities*/
.about-overview__thumb{position:relative;}
.about-overview__thumb img{width:100%;height:100%;object-fit:cover;}
.about-overview__wrap{
  display:grid;
  gap:var(--sp-150);
  grid-template-columns:var(--sp-600) 84px 1fr;
}
@media (max-width:1919px){ .about-overview__wrap{gap:var(--sp-60);} }
@media (max-width:1399px){ .about-overview__wrap{gap:var(--sp-40);grid-template-columns:var(--sp-500) 84px 1fr;} }
@media (max-width:1199px){ .about-overview__wrap{gap:var(--sp-25);} }
@media (max-width:991px){ .about-overview__wrap{gap:var(--sp-16);grid-template-columns:var(--sp-340) 0 1fr;} }
@media (max-width:767px){ .about-overview__wrap{grid-template-columns:1fr;} }
.about-overview__content{
  display:flex;
  flex-direction:column;
  gap:var(--sp-340);
  max-width:var(--sp-800);
  padding-top:32px;
  text-align:left;
}
@media (max-width:1199px){ .about-overview__content{gap:var(--sp-40);} }
@media (max-width:767px){ .about-overview__content{padding-top:0;} }
.about-overview__title{
  font-size:var(--fs-35);
  font-weight:500;
  line-height:var(--lh-50);
  margin-bottom:var(--sp-50);
  letter-spacing:var(--ls--2);
  color:var(--primary);
}
@media (max-width:1399px){ .about-overview__title{font-size:var(--fs-42);} }
@media (max-width:1199px){ .about-overview__title{font-size:34px;line-height:46px;letter-spacing:0;} }
@media (max-width:991px){ .about-overview__title{font-size:var(--fs-28);line-height:35px;margin-bottom:25px;} }
@media (max-width:767px){ .about-overview__title{padding-top:var(--sp-10);} }
@media (max-width:575px){ .about-overview__title{font-size:25px;line-height:33px;} }
.about-overview__desc{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  max-width:var(--sp-600);
  color:var(--secondary);
}
@media (max-width:1919px){ .about-overview__desc{max-width:100%;} }
.about-overview__desc.one{margin-bottom:var(--sp-20);}
.about-overview__counter{display:flex;align-items:center;}
@media (max-width:575px){ .about-overview__counter{flex-wrap:wrap;} }
.about-overview__counter-item{
  padding:0 var(--sp-50);
  border-right:1px solid var(--border);
}
.about-overview__counter-item:first-child{padding-left:0;}
.about-overview__counter-item:last-child{padding-right:0;border-right:none;}
@media (max-width:1919px){ .about-overview__counter-item{padding:0 var(--sp-16);} }
@media (max-width:1399px){ .about-overview__counter-item{padding:0 var(--sp-20);} }
@media (max-width:1199px){ .about-overview__counter-item{padding:0 12px;} }
@media (max-width:575px){ .about-overview__counter-item{border-right:0;} }
.about-overview__counter-item h2{
  font-size:var(--fs-90);
  font-weight:600;
  line-height:var(--lh-80);
  color:var(--primary);
  letter-spacing:var(--ls--2);
}
@media (max-width:1399px){ .about-overview__counter-item h2{font-size:var(--fs-48);letter-spacing:0;} }
@media (max-width:1199px){ .about-overview__counter-item h2{font-size:31px;} }
.about-overview__counter-item p{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-22);
  color:var(--secondary);
}
@media (max-width:1199px){ .about-overview__counter-item p{font-size:15px;} }
.about-overview__btn{max-width:var(--sp-50);margin-top:var(--sp-30);}
.about-overview__icon svg{position:absolute;top:var(--sp-30);left:var(--sp-30);z-index:2;}
.about-sub-banner__thumb{position:relative;}
.about-sub-banner__thumb img{width:100%;height:auto;}
.about-sub-banner__info{
  position:absolute;
  left:var(--sp-10);
  bottom:var(--sp-10);
  display:flex;
  gap:var(--sp-40);
  max-width:530px;
  padding:var(--sp-25) var(--sp-25) var(--sp-25) var(--sp-30);
  background:var(--white);
  border-radius:var(--radius-5);
}
@media (max-width:767px){
  .about-sub-banner__info{position:static;max-width:100%;}
}
@media (max-width:575px){ .about-sub-banner__info{flex-wrap:nowrap;} }
.about-sub-banner__item{position:relative;}
.about-sub-banner__title,
.about-sub-banner__title span{
  font-size:var(--fs-30);
  line-height:var(--lh-30);
  color:var(--black);
}
.about-sub-banner__title{font-weight:400;}
.about-sub-banner__title span{font-weight:700;}
.about-sub-banner__title span sup{top:-10px;left:-4px;}
@media (max-width:991px){
  .about-sub-banner__title,
  .about-sub-banner__title span{font-size:var(--fs-28);}
}
.about-sub-banner__subtext{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-18);
  color:var(--text-muted);
  padding-top:var(--sp-30);
}
.about-sub-banner__tagline{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-30);
  text-align:right;
  color:var(--black);
  margin-bottom:var(--sp-12);
}

/* Services */
.services__thumb{position:relative;}
.services__thumb img{width:100%;height:auto;object-fit:cover;}
.services__item{text-align:right;}
.services__item:first-child,
.services__content:nth-child(2){text-align:left;}
.services__item:nth-child(2){padding-top:var(--sp-150);}
@media (max-width:1199px){ .services__item:nth-child(2){padding-bottom:var(--sp-80);} }
@media (max-width:991px){ .services__item:nth-child(2){padding-bottom:var(--sp-60);} }
@media (max-width:767px){ .services__item:nth-child(2){padding-bottom:var(--sp-40);} }
.services__wrapper{
  display:grid;
  gap:var(--sp-300);
  justify-content:end;
  grid-template-columns:1fr var(--sp-800);
}
.services__wrapper:nth-child(2){text-align:right;}
@media (max-width:1919px){ .services__wrapper{gap:var(--sp-180);grid-template-columns:1fr var(--sp-700);} }
@media (max-width:1399px){ .services__wrapper{gap:var(--sp-100);grid-template-columns:1fr var(--sp-600);} }
@media (max-width:1199px){ .services__wrapper{gap:87px;grid-template-columns:1fr var(--sp-500);} }
@media (max-width:991px){ .services__wrapper{gap:var(--sp-60);grid-template-columns:1fr var(--sp-340);} }
@media (max-width:767px){ .services__wrapper{grid-template-columns:1fr;} }
@media (max-width:575px){ .services__wrapper{gap:var(--sp-40);} }
.services__wrap .services__item{
  display:flex;
  flex-direction:column;
  gap:var(--sp-270);
}
@media (max-width:1199px){ .services__wrap .services__item{gap:var(--sp-130);} }
@media (max-width:991px){ .services__wrap .services__item{gap:var(--sp-80);} }
@media (max-width:767px){ .services__wrap .services__item{gap:var(--sp-20);} }
.services__wrap-box .services__item:first-child{text-align:right;}
.services__title{
  font-size:var(--fs-35);
  font-weight:500;
  margin:var(--sp-30) 0 var(--sp-5);
  letter-spacing:var(--ls--2);
  transition:color var(--dur-300) var(--ease);
}
.services__title:hover{color:var(--secondary);}
@media (max-width:1199px){ .services__title{font-size:var(--fs-40);} }
@media (max-width:991px){
  .services__title{font-size:var(--fs-30);line-height:var(--lh-45);margin-top:28px;letter-spacing:0;}
}
@media (max-width:767px){ .services__title{margin-top:var(--sp-40);} }
@media (max-width:575px){ .services__title{font-size:var(--fs-24);} }
.services__number{
  position:absolute;
  left:-22px;
  bottom:var(--sp-10);
  display:block;
  transform:rotate(-90deg);
}
.services__number.one{
  left:auto;
  right:-22px;
  display:inline-block;
  transform:none;
}
@media (max-width:1919px){ .services__number.one{right:-20px;} }
@media (max-width:1399px){ .services__number.one{right:-22px;} }
@media (max-width:767px){
  .services__number{left:0;bottom:-20px;transform:rotate(0);}
  .services__number.one{left:0;right:auto;}
}
@media (max-width:575px){ .services__number{bottom:-24px;} }
.services__desc{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  color:var(--secondary);
}

/* Works & Projects */
.works-section__wrapper{position:relative;}
.works-section__subtext{
  position:absolute;
  right:9.5%;
  width:100%;
  display:block;
  text-align:center;
  text-transform:uppercase;
  color:var(--text-muted);
}
@media (max-width:1919px){ .works-section__subtext{right:6.9%;} }
@media (max-width:1399px){ .works-section__subtext{right:5.5%;} }
@media (max-width:1199px){ .works-section__subtext{right:8.5%;} }
@media (max-width:991px){ .works-section__subtext{right:-3.5%;} }
@media (max-width:767px){ .works-section__subtext{left:0;text-align:right;} }
@media (max-width:575px){ .works-section__subtext{padding-right:0;} }
.works-section__wrap{
  display:grid;
  gap:var(--sp-100) var(--sp-20);
  justify-content:space-between;
  grid-template-columns:repeat(3,2fr);
}
@media (max-width:767px){
  .works-section__wrap{gap:var(--sp-30) var(--sp-16);grid-template-columns:repeat(2,2fr);}
}
@media (max-width:575px){ .works-section__wrap{grid-template-columns:1fr;} }
.works-section__thumb,
.works__thumb{overflow:hidden;position:relative;}
.works-section__thumb img,
.works__thumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform var(--dur-500) var(--ease-in-out);
}
.works-section__thumb img:hover,
.works__thumb img:hover{transform:scale(1.1);}

/* Hover overlay */
.work-hover-overlay{
  position:absolute;
  inset:0;
  background:var(--overlay-dark);
  opacity:0;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  transition:opacity var(--dur-350) var(--ease);
}
.work-hover-inner{
  opacity:0;
  transform:translateY(8px);
  transition:opacity var(--dur-350) var(--ease), transform var(--dur-350) var(--ease);
}
.work-hover-inner h3{
  margin:var(--sp-50);
  font-size:var(--fs-16);
  color:var(--white);
  line-height:var(--lh-24);
}
.works__thumb:hover .work-hover-overlay{opacity:1;}
.works__thumb:hover .work-hover-inner{opacity:1;transform:translateY(0);}
.works-section .title{
  font-size:var(--fs-20);
  font-weight:500;
  margin-top:var(--sp-12);
  line-height:var(--lh-24);
  color:var(--primary);
  transition:color var(--dur-300) var(--ease-in-out);
}
.works-section .title:hover a{color:var(--secondary);}
.works-section .meta .tag{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-24);
  color:var(--primary);
  display:inline-block;
}
.works-section .meta .date{
  display:block;
  font-size:var(--fs-20);
  font-weight:500;
  line-height:var(--lh-24);
  color:var(--primary);
}
.works__content{
  display:flex;
  margin-top:var(--sp-14);
  align-items:center;
  justify-content:space-between;
}
.works__title{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  color:var(--black);
  transition:color var(--dur-300) var(--ease-in-out);
}
.works__title:hover{color:var(--secondary);}
.works__wrap-one{
  display:grid;
  gap:var(--sp-20);
  grid-template-columns:repeat(3,var(--sp-700));
}
@media (max-width:1919px){ .works__wrap-one{grid-template-columns:repeat(3,var(--sp-500));} }
@media (max-width:1399px){ .works__wrap-one{grid-template-columns:repeat(3,500px);} }
@media (max-width:1199px){ .works__wrap-one{grid-template-columns:repeat(3,400px);} }
@media (max-width:991px){ .works__wrap-one{grid-template-columns:1fr 1fr;} }
@media (max-width:575px){ .works__wrap-one{grid-template-columns:1fr;} }
.works__sub-title{
  font-size:var(--fs-14);
  font-weight:500;
  line-height:var(--lh-24);
  color:var(--black);
  margin-bottom:var(--sp-8);
  text-transform:uppercase;
}
.works__item.one{padding-left:81px;display:block;}
@media (max-width:1919px){ .works__item.one{padding-left:0;} }
.works__btn{margin-top:var(--sp-40);}
@media (max-width:575px){ .works__btn{margin-top:var(--sp-25);} }

/* Projects */
.projects__item{position:relative;}
.projects .swiper-slide-active .projects__item .title,
.projects__item:hover .title{transform:translate(0,0);}
.projects__item .title{
  position:absolute;
  left:var(--sp-20);
  bottom:var(--sp-20);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-26);
  color:var(--black);
  transition:transform var(--dur-300) var(--ease), color var(--dur-300) var(--ease);
  letter-spacing:var(--ls--1_2);
  transform:translate(0,100px);
}
.projects__item .title:hover a{color:var(--white);}

/* Awards */
.awards-list__wrapper{
  display:grid;
  gap:var(--sp-30);
  grid-template-columns:150px 1fr 200px;
}
@media (max-width:1399px){ .awards-list__wrapper{grid-template-columns:250px 1fr 355px;} }
@media (max-width:1199px){ .awards-list__wrapper{grid-template-columns:150px 1fr 300px;} }
@media (max-width:991px){ .awards-list__wrapper{grid-template-columns:1fr;} }
.awards-list__wrapper .awards-list__box{display:flex;}
.awards-list__wrapper .awards-list__box .sub-title{
  position:relative;
  padding-left:var(--sp-50);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  color:var(--primary);
  letter-spacing:var(--ls--0_48);
}
.awards-list__wrapper .awards-list__box .awards-list{list-style:none;}
.awards-list__wrapper .awards-list__box .awards-list li{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--sp-10);
  color:var(--text-muted);
  font-size:var(--fs-40);
  font-weight:500;
  line-height:var(--lh-40);
  letter-spacing:var(--ls--2_5);
}
.awards-list__wrapper .awards-list__box .awards-list li:not(:last-child){margin-bottom:var(--sp-30);}
.awards-list__wrapper .awards-list__box .awards-list li.active{color:var(--primary);}
@media (max-width:1199px){ .awards-list__wrapper .awards-list__box .awards-list li{font-size:var(--fs-30);} }
@media (max-width:575px){
  .awards-list__wrapper .awards-list__box .awards-list li{
    font-size:var(--fs-20);
    line-height:var(--lh-20);
    letter-spacing:var(--ls--0_5);
  }
}
.awards-list__wrapper .awards-list__box .awards-list li .award-title{
  font-size:inherit;line-height:inherit;font-weight:inherit;letter-spacing:inherit;
}
.awards-list__wrapper .awards-list__box .awards-list li .award-sub,
.awards-list__wrapper .awards-list__box .awards-list li span{
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-20);
  letter-spacing:var(--ls--0_48);
}
.awards-list__wrapper .awards-list__box .awards-list li .award-sub{color:var(--text-muted);}
.awards-list__wrapper .awards-list__box .thumb{margin-top:auto;}
.awards-list__wrapper .awards-list__box .thumb img{width:100%;height:100%;object-fit:cover;}

/* 05.16 Footer */
.footer{background:var(--bg);}
.footer-widget-wrapper{
  display:grid;
  grid-template-columns:645px 405px 405px auto;
}
@media (max-width:1919px){ .footer-widget-wrapper{grid-template-columns:repeat(4,1fr);} }
@media (max-width:767px){ .footer-widget-wrapper{gap:var(--sp-30) 0;grid-template-columns:repeat(2,1fr);} }
@media (max-width:575px){ .footer-widget-wrapper{gap:0;grid-template-columns:1fr;} }
.footer-widget-box{
  display:flex;
  padding:var(--sp-35) 0 var(--sp-40);
  flex-direction:column;
}
@media (max-width:991px){ .footer-widget-box{padding-bottom:var(--sp-20);} }
@media (max-width:767px){ .footer-widget-box{padding-bottom:var(--sp-10);} }
.footer-widget-box:not(:last-child){border-right:1px solid var(--white);}
@media (max-width:767px){ .footer-widget-box:not(:last-child){border-right:none;} }
.footer-widget-box:not(:first-child){padding-left:var(--sp-40);}
@media (max-width:1399px){ .footer-widget-box:not(:first-child){padding-left:var(--sp-30);} }
@media (max-width:991px){ .footer-widget-box:not(:first-child){padding-left:var(--sp-16);} }
@media (max-width:767px){ .footer-widget-box:not(:first-child){padding-left:0;} }
.footer-widget-box .title{
  color:var(--text-muted);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-18);
  letter-spacing:var(--ls--0_48);
}
@media (max-width:575px){ .footer-widget-box .title{margin-bottom:var(--sp-16);} }
.footer-widget-box .copyright-text{margin-top:var(--sp-250);}
@media (max-width:1399px){ .footer-widget-box .copyright-text{margin-top:var(--sp-200);} }
@media (max-width:575px){ .footer-widget-box .copyright-text{margin-top:var(--sp-50);} }
.footer-widget-box .footer-nav-list{margin-top:auto;list-style:none;}
.footer-widget-box .footer-nav-list li{
  color:var(--primary);
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-18);
  letter-spacing:var(--ls--0_48);
}
.footer-widget-box .footer-nav-list li a{
  position:relative;
  display:inline-block;
  font-size:var(--fs-16);
  font-weight:500;
  line-height:var(--lh-30);
  color:var(--primary);
  letter-spacing:var(--ls--0_48);
  overflow:hidden;
}
.footer-widget-box .footer-nav-list li a span{
  display:inline-block;
  transform:translateY(0%);
  transition:transform var(--dur-300) var(--ease);
}
.footer-widget-box .footer-nav-list li a::after{
  content:attr(data-text);
  position:absolute;
  left:0;
  top:100%;
  width:100%;
  color:var(--primary);
  transition:top var(--dur-300) var(--ease);
}
.footer-widget-box .footer-nav-list li a:hover span{transform:translateY(-100%);}
.footer-widget-box .footer-nav-list li a:hover::after{top:0;}

/* =========================================
   06. UTILITIES / HELPERS / MOTION FX
========================================= */
.fx-media{
  position:relative;
  display:block;
  overflow:hidden;
  transform:translateZ(0);
  will-change:transform;
  transition:transform .55s var(--fx-ease-out), box-shadow .55s var(--fx-ease-out);
  background:rgba(255,255,255,.02);
}
.fx-media > img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transform:scale(1);
  will-change:transform, filter;
  transition:transform .85s var(--fx-ease-out), filter .85s var(--fx-ease-out);
  filter:saturate(1) contrast(1);
}
.fx-media::after{
  content:"";
  position:absolute;
  inset:-40%;
  pointer-events:none;
  background:linear-gradient(
    115deg,
    transparent 30%,
    rgba(255,255,255,.20) 45%,
    rgba(255,255,255,.06) 55%,
    transparent 70%
  );
  transform:translateX(-35%) rotate(12deg);
  opacity:0;
  transition:opacity .55s var(--fx-ease-out), transform .9s var(--fx-ease-out);
}
.fx-reveal{
  opacity:0;
  transform:translateY(16px) scale(.985);
  transition:opacity .85s var(--fx-ease-out), transform .85s var(--fx-ease-out);
}
.fx-reveal.is-inview{
  opacity:1;
  transform:translateY(0) scale(1);
}
@media (hover:hover){
  .fx-media:hover,
  .fx-media:focus-within{
    transform:translateY(-6px) scale(1) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  }
  .fx-media:hover::after,
  .fx-media:focus-within::after{
    opacity:1;
    transform:translateX(35%) rotate(12deg);
  }
  .fx-media:hover > img,
  .fx-media:focus-within > img{
    transform:scale(1);
    filter:saturate(1.05) contrast(1.03);
  }
}
.fx-media:focus-within{
  outline:2px solid var(--focus-ring);
  outline-offset:var(--focus-ring-offset);
}
@media (prefers-reduced-motion: reduce){
  .fx-media,
  .fx-media > img,
  .fx-media::after,
  .fx-reveal{
    transition:none !important;
    transform:none !important;
    animation:none !important;
  }
  .fx-media{will-change:auto !important;}
  .fx-media > img{filter:none !important;will-change:auto !important;}
  .fx-reveal{opacity:1;}
}