html {
   scroll-behavior: smooth;
 }

 .blueprint-grid {
   background-image:
     linear-gradient(to right, rgba(245, 243, 238, 0.5) 1px, transparent 1px),
     linear-gradient(to bottom, rgba(245, 243, 238, 0.5) 1px, transparent 1px);
   background-size: 42px 42px;
 }

 /* ---------- Nav link underline hover ---------- */
 .nav-link {
   position: relative;
 }

 .nav-link::after {
   content: "";
   position: absolute;
   left: 0;
   bottom: -4px;
   width: 0;
   height: 2px;
   background: #F2761A;
   transition: width .25s ease;
 }

 .nav-link:hover::after {
   width: 100%;
 }

 /* ---------- Mobile sidebar ---------- */
 #sidebar-overlay {
   opacity: 0;
   pointer-events: none;
   transition: opacity .3s ease;
 }

 #sidebar-overlay.is-open {
   opacity: 1;
   pointer-events: auto;
 }

 #mobile-sidebar {
   transform: translateX(-100%);
   transition: transform .35s cubic-bezier(.4, 0, .2, 1);
 }

 #mobile-sidebar.is-open {
   transform: translateX(0);
 }

 .sidebar-link {
   opacity: 0;
   transform: translateX(-12px);
   transition: opacity .35s ease, transform .35s ease;
 }

 #mobile-sidebar.is-open .sidebar-link {
   opacity: 1;
   transform: translateX(0);
 }

 #mobile-sidebar.is-open .sidebar-link:nth-child(1) {
   transition-delay: .05s;
 }

 #mobile-sidebar.is-open .sidebar-link:nth-child(2) {
   transition-delay: .10s;
 }

 #mobile-sidebar.is-open .sidebar-link:nth-child(3) {
   transition-delay: .15s;
 }

 #mobile-sidebar.is-open .sidebar-link:nth-child(4) {
   transition-delay: .20s;
 }

 #mobile-sidebar.is-open .sidebar-link:nth-child(5) {
   transition-delay: .25s;
 }

 #mobile-sidebar.is-open .sidebar-link:nth-child(6) {
   transition-delay: .30s;
 }

 /* ---------- Hero slider ---------- */
 #hero-slider {
   display: grid;
 }

 .hero-slide {
   opacity: 0;
   visibility: hidden;
   transition: opacity .8s ease;
 }

 .hero-slide.is-active {
   opacity: 1;
   visibility: visible;
   z-index: 1;
 }

 .slider-dot.is-active {
   background-color: #F2761A !important;
   width: 2.5rem;
 }

 /* ---------- Card hover lift ---------- */
 .lift-card {
   transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
 }

 .lift-card:hover {
   transform: translateY(-6px);
   box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .35);
 }

 .img-zoom {
   overflow: hidden;
 }

 .img-zoom img {
   transition: transform .5s ease;
 }

 .img-zoom:hover img {
   transform: scale(1.08);
 }

 /* ---------- Scroll reveal ---------- */
 .reveal {
   opacity: 0;
   transform: translateY(24px);
   transition: opacity .6s ease, transform .6s ease;
 }

 .reveal.is-visible {
   opacity: 1;
   transform: translateY(0);
 }

 /* ---------- Search pill ---------- */
 #desktop-search {
   width: 0;
   opacity: 0;
   overflow: hidden;
   transition: width .3s ease, opacity .3s ease;
 }

 #desktop-search.is-open {
   width: 200px;
   opacity: 1;
 }

 ::-webkit-scrollbar {
   width: 10px;
 }

 ::-webkit-scrollbar-track {
   background: #F5F3EE;
 }

 ::-webkit-scrollbar-thumb {
   background: #10131A;
 }

 /* start */


 .reveal {
   opacity: 0;
   transform: translateY(18px);
   transition: opacity .6s ease, transform .6s ease;
 }

 .reveal.in {
   opacity: 1;
   transform: translateY(0);
 }

 .card {
   transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
 }

 .card:hover {
   transform: translateY(-6px);
   box-shadow: 0 20px 40px -18px rgba(25, 27, 30, 0.18);
   border-color: #D9631E;
 }

 .img-zoom img {
   transition: transform .6s ease;
 }

 .card:hover .img-zoom img {
   transform: scale(1.08);
 }

 /* stage tracker */
 .stage-track {
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .stage-seg {
   height: 4px;
   flex: 1;
   background: #E4E2DA;
   border-radius: 2px;
   overflow: hidden;
 }

 .stage-seg>span {
   display: block;
   height: 100%;
   background: #D9631E;
   transform-origin: left;
 }

 /* end */

 /* about css */
 @keyframes floatSlow {

   0%,
   100% {
     transform: translateY(0px);
   }

   50% {
     transform: translateY(-8px);
   }
 }

 .animate-float {
   animation: floatSlow 4s ease-in-out infinite;
 }

 /* about css */


 /* contuct  */
 .ruler-edge {
    background-image: repeating-linear-gradient(to bottom, #F2761A 0, #F2761A 1px, transparent 1px, transparent 12px);
    background-size: 1px 12px;
    background-position: left top;
    background-repeat: repeat-y;
  }
 /* contuct  */