:root {
     --earth: #f0f5fe;
     --asphalt: #0d2d6b;
     --concrete: #2563c8;
     --warm-grey: #2563c8;
     --sand: #0c2d6a;
     --sand-light: #0c2d6a;
     --orange: #e07c2a;
     --orange-bright: #f09040;
     --white: #ffffff;
     --off-white: #ece6d8;
     --mid: #8b8985;
     --dark-text: #000000;
     --card-bg: rgb(8, 7, 5);
     --border: rgba(200, 169, 110, 0.15);
     --border-warm: rgba(200, 169, 110, 0.3);
     --font-display: 'Syne', sans-serif;
     --font-serif: 'Syne', sans-serif;
 }

 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }


 /* ── HERO ── */
 .hero {
     min-height: 50vh;
     position: relative;
     display: flex;
     align-items: flex-end;
     overflow: hidden;
 }

 .hero-visual {
     position: absolute;
     inset: 0;
     background:
         linear-gradient(rgba(8, 33, 61, 0.178), rgba(26, 79, 160, 0.274)),
         url(/assete/images/page-banner/road&highways.webp);
     background-size: cover;
     background-position: center;
 }


 .road-lanes {
     position: absolute;
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
     width: 0;
     height: 0;
     border-left: 180px solid transparent;
     border-right: 180px solid transparent;
     border-bottom: 400px solid rgba(200, 169, 110, 0.04);
     filter: blur(2px);
 }

 .road-stripe {
     position: absolute;
     bottom: 60px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 24px;
 }

 .stripe {
     width: 3px;
     height: 32px;
     background: rgba(200, 169, 110, 0.2);
     border-radius: 2px;
     animation: roadMove 2s linear infinite;
 }

 .stripe:nth-child(2) {
     animation-delay: .4s;
 }

 .stripe:nth-child(3) {
     animation-delay: .8s;
 }

 .stripe:nth-child(4) {
     animation-delay: 1.2s;
 }

 .stripe:nth-child(5) {
     animation-delay: 1.6s;
 }

 @keyframes roadMove {
     from {
         opacity: .2;
         transform: translateY(-10px)
     }

     to {
         opacity: 0;
         transform: translateY(10px)
     }
 }

 .hero-dots {
     position: absolute;
     /* top: 10%; */
     right: 5%;
     width: 200px;
     height: 200px;
     background-image: radial-gradient(rgba(200, 169, 110, 0.12) 1px, transparent 1px);
     background-size: 20px 20px;
     border-radius: 50%;
     opacity: .6;
 }

 .hero-content {
     position: relative;
     z-index: 2;
     max-width: 1280px;
     margin: 0 auto;
     width: 100%;
 }


 .hero-label {
     display: inline-flex;
     align-items: center;
     gap: .6rem;
     padding: .35rem 1rem;
     border-radius: 4px;
     border: 1px solid var(--border-warm);
     background: rgba(200, 169, 110, 0.08);
     font-size: .72rem;
     font-weight: 700;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: 2px;
     margin-bottom: 1.5rem;
     animation: fadeUp .5s .05s ease both;
 }

 .hero h1 {
     font-family: 'Syne', sans-serif;
     font-size: clamp(2.2rem, 4.5vw, 44px);
     font-weight: 700;
     line-height: 1.05;
     color: var(--white);
     /* max-width: 700px; */
     animation: fadeUp .5s .1s ease both;
 }

 .hero h1 em {
     font-style: italic;
     color: var(--sand);
 }

 .hero-sub {
     margin: 1.5rem 0 0.5rem;
     max-width: 580px;
     font-size: 1.1rem;
     color: #ffffff;
     font-weight: 400;
     line-height: 1.75;
     animation: fadeUp .5s .15s ease both;
 }

 .hero-ctas {
     display: flex;
     gap: 1rem;
     flex-wrap: wrap;
     animation: fadeUp .5s .2s ease both;
 }

 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: .85rem 2rem;
     border-radius: 5px;
     background: var(--orange);
     color: #fff;
     font-weight: 700;
     font-size: .95rem;
     text-decoration: none;
     transition: all .25s;
     box-shadow: 0 4px 24px rgba(224, 124, 42, 0.3);
 }

 .btn-primary:hover {
     background: var(--orange-bright);
     transform: translateY(-2px);
     box-shadow: 0 8px 32px rgba(224, 124, 42, 0.45);
 }

 .btn-outline {
     display: inline-flex;
     align-items: center;
     gap: .5rem;
     padding: .85rem 2rem;
     border-radius: 5px;
     border: 1px solid #fff;
     color: #fff;
     font-weight: 600;
     font-size: .95rem;
     text-decoration: none;
     transition: all .25s;
     background: #2d659a;
 }

 .btn-outline:hover {
     border-color: var(--sand);
     background: rgba(200, 169, 110, 0.12);
     transform: translateY(-2px);
 }

 .hero-stats {
     display: flex;
     gap: 2.5rem;
     flex-wrap: wrap;
     /* margin-top: 4rem; */
     padding-top: 3rem;
     border-top: 1px solid var(--border);
     animation: fadeUp .5s .25s ease both;
 }

 .stat-num {
     font-family: var(--font-serif);
     font-size: 2.2rem;
     font-weight: 700;
     color: #fff;
     line-height: 1;
     display: block;
 }

 .stat-desc {
     font-size: .82rem;
     color: #fff;
     margin-top: .3rem;
     font-weight: 500;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(20px)
     }

     to {
         opacity: 1;
         transform: translateY(0)
     }
 }

 /* ── SECTIONS ── */
 section {
     padding: 5rem 2.5rem;
 }

 .container {
     max-width: 1280px;
     margin: 0 auto;
 }

 .sec-label {
     font-size: .7rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 3px;
     color: var(--orange);
     margin-bottom: .8rem;
     display: block;
 }

 .sec-title {
     font-family: var(--font-serif);
     font-size: clamp(2.2rem, 4.5vw, 44px);
     line-height: 1.15;
     color: #000;
     font-weight: 700;
 }

 .sec-title em {
     font-style: italic;
     color: var(--sand);
 }

 .sec-title-dark {
     font-family: var(--font-serif);
     font-size: clamp(2.2rem, 4.5vw, 44px);
     line-height: 1.15;
     color: var(--dark-text);
     font-weight: 700;
 }

 .sec-title-dark em {
     font-style: italic;
     color: var(--sand);
 }

 .sec-body {
     font-size: 1rem;
     color: #908070;
     margin-top: .9rem;
     line-height: 1.8;
     max-width: 580px;
 }

 .rule {
     width: 40px;
     height: 3px;
     background: var(--orange);
     border-radius: 2px;
     margin: 1.1rem 0;
 }

 /* ── WHY ── */
 .why-section {
     background: #fff;
 }

 .why-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 5rem;
     align-items: center;
     margin-top: 3rem;
 }

 .why-body p {
     font-size: 1.05rem;
     color: #000000;
     line-height: 1.85;
     margin-bottom: 1rem;
 }

 .why-body p strong {
     color: var(--sand-light);
     font-weight: 600;
 }

 .scheme-pills {
     display: flex;
     flex-wrap: wrap;
     gap: .6rem;
     margin-top: 1.5rem;
 }

 .pill {
     padding: .35rem .9rem;
     border-radius: 4px;
     background: rgba(224, 124, 42, 0.1);
     border: 1px solid rgba(224, 124, 42, 0.25);
     font-size: .78rem;
     font-weight: 700;
     color: #000000;
     letter-spacing: .5px;
 }

 .why-visual {
     display: flex;
     flex-direction: column;
     gap: 1rem;
 }

 .why-card {
     padding: 1.4rem 1.6rem;
     border-radius: 10px;
     background: var(--card-bg);
     border: 1px solid var(--border);
     display: flex;
     gap: 1.2rem;
     align-items: flex-start;
     transition: all .3s;
 }

 .why-card:hover {
     border-color: var(--border-warm);
     transform: translateX(6px);
 }

 .why-icon {
     font-size: 1.6rem;
     flex-shrink: 0;
 }

 .why-card-title {
     font-weight: 700;
     font-size: .95rem;
     color: var(--white);
     margin-bottom: .3rem;
 }

 .why-card-desc {
     font-size: .88rem;
     color: var(--mid);
     line-height: 1.6;
 }

 /* ── SERVICES ── */
 .services-section {
     background: var(--earth);
 }

 .services-intro {
     margin-bottom: 3.5rem;
 }

 .services-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5px;
     background: var(--border);
     border-radius: 12px;
     overflow: hidden;
 }

 .svc-card {
     padding: 2.2rem;
     background: var(--earth);
     transition: all .3s;
     position: relative;
     overflow: hidden;
     cursor: default;
 }

 .svc-card::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     right: 0;
     height: 2px;
     background: linear-gradient(90deg, transparent, var(--sand), transparent);
     opacity: 0;
     transition: opacity .3s;
 }

 .svc-card:hover {
     background: var(--warm-grey);
 }

 .svc-card:hover::before {
     opacity: 1;
 }

 .svc-num {
     font-family: var(--font-serif);
     font-size: 3rem;
     font-weight: 700;
     color: rgb(0, 0, 0);
     line-height: 1;
     margin-bottom: .5rem;
 }

 .svc-icon {
     font-size: 1.8rem;
     margin-bottom: .8rem;
     display: block;
 }

 .svc-title {
     font-weight: 700;
     font-size: 1.05rem;
     color: var(--dark-text);
     margin-bottom: .6rem;
 }

 .svc-desc {
     font-size: .9rem;
     color: var(--mid);
     line-height: 1.7;
 }

 .svc-tags {
     margin-top: 1rem;
     display: flex;
     flex-wrap: wrap;
     gap: .4rem;
 }

 .svc-tag {
     font-size: .7rem;
     font-weight: 700;
     padding: .2rem .65rem;
     border-radius: 3px;
     background: rgba(200, 169, 110, 0.08);
     border: 1px solid rgba(200, 169, 110, 0.15);
     color: var(--dark-text);
     letter-spacing: .5px;
     text-transform: uppercase;
 }

 /* ── PROCESS ── */
 .process-section {
     background: var(--asphalt);
 }

 .process-track {
     position: relative;
     margin-top: 4rem;
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 0;
 }

 .process-track::before {
     content: '';
     position: absolute;
     top: 2.2rem;
     left: calc(12.5%);
     right: calc(12.5%);
     height: 1px;
     background: linear-gradient(90deg, transparent, var(--border-warm), transparent);
     z-index: 0;
 }

 .process-step {
     padding: 0 1.5rem;
     text-align: center;
     position: relative;
     z-index: 1;
 }

 .step-circle {
     width: 44px;
     height: 44px;
     border-radius: 50%;
     background: var(--warm-grey);
     border: 2px solid var(--border-warm);
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0 auto 1.5rem;
     font-weight: 800;
     font-size: .85rem;
     color: var(--sand);
     transition: all .3s;
 }

 .process-step:hover .step-circle {
     background: var(--orange);
     border-color: var(--orange);
     color: #fff;
     box-shadow: 0 0 20px rgba(224, 124, 42, 0.4);
 }

 .step-phase {
     font-size: .68rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 2px;
     color: var(--orange);
     margin-bottom: .5rem;
 }

 .step-name {
     font-weight: 700;
     font-size: 1rem;
     color: var(--white);
     margin-bottom: .6rem;
 }

 .step-desc {
     font-size: .88rem;
     color: var(--mid);
     line-height: 1.65;
 }

 /* ── PROJECT TYPES ── */
 .project-types {
     background: #fff;
 }

 .types-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 1.5rem;
     margin-top: 3rem;
 }

 .type-card {
     border-radius: 12px;
     padding: 2rem;
     border: 1px solid var(--border);
     background: var(--card-bg);
     transition: all .3s;
     position: relative;
     overflow: hidden;
 }

 .type-card::after {
     content: attr(data-label);
     position: absolute;
     top: 1.2rem;
     right: 1.5rem;
     font-size: .68rem;
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 1.5px;
     color: var(--sand);
     opacity: .5;
 }

 .type-card:hover {
     border-color: var(--border-warm);
     transform: translateY(-4px);
     box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
 }

 .type-icon {
     font-size: 2rem;
     margin-bottom: 1rem;
     display: block;
 }

 .type-title {
     font-weight: 700;
     font-size: 1.1rem;
     color: var(--white);
     margin-bottom: .6rem;
 }

 .type-desc {
     font-size: .92rem;
     color: var(--mid);
     line-height: 1.7;
 }

 .type-list {
     margin-top: 1rem;
     display: flex;
     flex-direction: column;
     gap: .4rem;
 }

 .type-list li {
     font-size: .88rem;
     color: #ffffff;
     padding-left: 1rem;
     position: relative;
     list-style: none;
 }

 .type-list li::before {
     content: '—';
     position: absolute;
     left: 0;
     color: var(--sand);
     opacity: .5;
     font-size: .8rem;
 }

 /* ── COMPLIANCE ── */
 .compliance {
     background: var(--earth);
 }

 .compliance-inner {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: start;
     margin-top: 3rem;
 }

 .comp-block {
     padding: 2rem;
     border-radius: 12px;
     background: var(--card-bg);
     border: 1px solid var(--border);
 }

 .comp-title {
     font-weight: 700;
     font-size: 1rem;
     color: var(--sand-light);
     margin-bottom: 1.2rem;
 }

 .comp-list {
     display: flex;
     flex-direction: column;
     gap: .7rem;
 }

 .comp-item {
     display: flex;
     gap: .8rem;
     align-items: flex-start;
 }

 .comp-bullet {
     color: var(--orange);
     font-weight: 900;
     flex-shrink: 0;
     margin-top: .15rem;
 }

 .comp-text {
     font-size: .92rem;
     color: var(--mid);
     line-height: 1.6;
 }

 .comp-text strong {
     color: var(--white);
     display: block;
     font-size: .95rem;
     margin-bottom: .15rem;
 }

 /* ── FAQ ── */
 .faq-section {
     background: #fff;
 }

 .faq-wrap {
     max-width: 800px;
     margin: 3rem auto 0;
     display: flex;
     flex-direction: column;
     gap: .8rem;
 }

 .faq-item {
     border-radius: 8px;
     border: 1px solid var(--border);
     background: var(--card-bg);
     overflow: hidden;
     transition: border-color .3s;
 }

 .faq-item.open {
     border-color: var(--border-warm);
 }

 .faq-q {
     width: 100%;
     padding: 1.2rem 1.5rem;
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 1rem;
     font-weight: 600;
     font-size: .97rem;
     color: var(--white);
     cursor: pointer;
     background: none;
     border: none;
     text-align: left;
 }

 .faq-arrow {
     color: var(--sand);
     font-size: 1.1rem;
     flex-shrink: 0;
     transition: transform .3s;
 }

 .faq-item.open .faq-arrow {
     transform: rotate(45deg);
 }

 .faq-a {
     padding: 0 1.5rem 1.3rem;
     font-size: .93rem;
     color: var(--mid);
     line-height: 1.7;
     display: none;
 }

 .faq-item.open .faq-a {
     display: block;
 }

 /* ── CTA ── */
 .cta-section {
     background: linear-gradient(135deg, var(--warm-grey) 0%, var(--earth) 50%, rgba(224, 124, 42, 0.08) 100%);
     border-top: 1px solid var(--border);
     padding: 6rem 2.5rem;
     text-align: center;
     position: relative;
     overflow: hidden;
 }

 .cta-bg-text {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     font-family: var(--font-serif);
     font-size: 18vw;
     font-weight: 800;
     color: rgba(200, 169, 110, 0.03);
     white-space: nowrap;
     pointer-events: none;
     user-select: none;
 }

 .cta-section .container {
     position: relative;
     z-index: 1;
 }

 .cta-section h2 {
     font-family: var(--font-serif);
     font-size: clamp(2.2rem, 4.5vw, 44px);
     color: var(--white);
     font-weight: 800;
     line-height: 1.1;
 }

 .cta-section h2 em {
     font-style: italic;
     color: var(--sand);
 }

 .cta-section p {
     font-size: 1.05rem;
     color: var(--mid);
     margin: 1rem auto 2.5rem;
     max-width: 520px;
 }

 .cta-btns {
     display: flex;
     gap: 1rem;
     justify-content: center;
     flex-wrap: wrap;
 }

 .contact-bar {
     display: flex;
     gap: 3rem;
     justify-content: center;
     flex-wrap: wrap;
     margin-top: 3.5rem;
     padding-top: 3rem;
     border-top: 1px solid var(--border);
 }

 .c-item {
     display: flex;
     align-items: center;
     gap: .75rem;
 }

 .c-icon {
     font-size: 1.2rem;
 }

 .c-detail a {
     color: var(--sand-light);
     text-decoration: none;
     font-weight: 600;
     font-size: .95rem;
     display: block;
 }

 .c-label {
     font-size: .72rem;
     color: var(--mid);
     font-weight: 500;
 }

 /* ── REVEAL ── */
 .reveal {
     opacity: 0;
     transform: translateY(28px);
     transition: opacity .7s ease, transform .7s ease;
 }

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

 /* ── RESPONSIVE ── */
 @media (max-width: 900px) {

     .why-grid,
     .compliance-inner,
     .types-grid {
         grid-template-columns: 1fr;
         gap: 2rem;
     }

     .services-grid {
         grid-template-columns: 1fr 1fr;
     }

     .process-track {
         grid-template-columns: 1fr 1fr;
     }

     .process-track::before {
         display: none;
     }

     nav .nav-links {
         display: none;
     }
 }

 @media (max-width: 600px) {
     section {
         padding: 3.5rem 1.2rem;
     }

     .hero-content {
         padding: 0 1.2rem;
     }

     .services-grid {
         grid-template-columns: 1fr;
     }

     .process-track {
         grid-template-columns: 1fr;
     }

     .hero-stats {
         gap: 1.5rem;
     }

     .cta-bg-text {
         display: none;
     }

     .hero-sub {
         line-height: normal;
     }
 }

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

 ::-webkit-scrollbar-track {
     background: var(--asphalt);
 }

 ::-webkit-scrollbar-thumb {
     background: var(--warm-grey);
     border-radius: 3px;
 }