@charset "UTF-8";

   :root {
       --brand-dark: #1b1b1b;
       --brand-dark-2: #262626;
       --brand-gold: #b89a68;
       --brand-gold-light: #d8c29b;
       --brand-cream: #f3f0ea;
       --brand-white: #ffffff;
       --brand-muted: #707070;
       --line: rgba(27, 27, 27, .11);
       --shadow: 0 22px 60px rgba(0, 0, 0, .12);
   }

   * {
       box-sizing: border-box;
   }

   html {
       scroll-behavior: smooth;
   }

   body {
       margin: 0;
       overflow-x: hidden;
       font-family: "Manrope", sans-serif;
       color: var(--brand-dark);
       background: var(--brand-white);
   }

   .font-display {
       font-family: "Playfair Display", serif;
   }

   .section-pad {
       padding: 90px 0;
   }

   .section-label {
       display: inline-flex;
       align-items: center;
       gap: 10px;
       color: var(--brand-gold);
       font-size: .76rem;
       font-weight: 800;
       letter-spacing: .18em;
       text-transform: uppercase;
   }

   .section-label::before {
       content: "";
       width: 34px;
       height: 1px;
       background: currentColor;
   }

   .section-title {
       margin-top: 15px;
       font-size: 3rem;
       line-height: 1.08;
       letter-spacing: -.025em;
   }

   /* HERO */
   .hero {
       min-height: 100vh;
       position: relative;
       display: flex;
       align-items: center;
       color: #fff;
       isolation: isolate;
       overflow: hidden;
       background:
           radial-gradient(circle at 14% 20%, rgba(216, 194, 155, .22), transparent 28%),
           radial-gradient(circle at 82% 14%, rgba(184, 154, 104, .20), transparent 24%),
           linear-gradient(135deg, #111111 0%, #1b1b1b 48%, #28231c 100%);
   }


   .hero-grid {
       position: absolute;
       inset: 0;
       z-index: -2;
       opacity: .24;
       background-image:
           linear-gradient(rgba(255, 255, 255, .065) 1px, transparent 1px),
           linear-gradient(90deg, rgba(255, 255, 255, .065) 1px, transparent 1px);
       background-size: 56px 56px;
       mask-image: linear-gradient(to bottom, rgba(0, 0, 0, .9), transparent 92%);
   }

   .hero-city {
       position: absolute;
       right: 3%;
       bottom: 0;
       width: min(46vw, 720px);
       height: 78%;
       z-index: -1;
       opacity: .92;
       pointer-events: none;
   }

   .city-building {
       position: absolute;
       bottom: 0;
       border: 1px solid rgba(216, 194, 155, .34);
       border-bottom: 0;
       background:
           linear-gradient(180deg, rgba(216, 194, 155, .10), rgba(255, 255, 255, .018));
       box-shadow:
           inset 0 0 35px rgba(216, 194, 155, .035),
           0 0 35px rgba(184, 154, 104, .05);
       overflow: hidden;
   }

   .city-building::before {
       content: "";
       position: absolute;
       inset: 12px;
       background-image:
           linear-gradient(rgba(216, 194, 155, .24) 1px, transparent 1px),
           linear-gradient(90deg, rgba(216, 194, 155, .24) 1px, transparent 1px);
       background-size: 28px 25px;
       opacity: .55;
   }

   .city-building::after {
       content: "";
       position: absolute;
       left: 50%;
       top: -42px;
       width: 1px;
       height: 42px;
       background: rgba(216, 194, 155, .48);
   }

   .building-one {
       left: 3%;
       width: 23%;
       height: 42%;
       clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%);
   }

   .building-two {
       left: 25%;
       width: 25%;
       height: 70%;
       clip-path: polygon(0 9%, 78% 0, 100% 8%, 100% 100%, 0 100%);
   }

   .building-three {
       left: 48%;
       width: 24%;
       height: 56%;
       clip-path: polygon(0 0, 100% 12%, 100% 100%, 0 100%);
   }

   .building-four {
       right: 0;
       width: 26%;
       height: 82%;
       clip-path: polygon(0 8%, 78% 0, 100% 5%, 100% 100%, 0 100%);
   }

   .city-ground {
       position: absolute;
       left: 0;
       right: 0;
       bottom: 0;
       height: 2px;
       background: linear-gradient(90deg, transparent, rgba(216, 194, 155, .6), transparent);
       box-shadow: 0 -18px 40px rgba(184, 154, 104, .16);
   }

   .city-crane {
       position: absolute;
       top: 3%;
       right: 17%;
       width: 46%;
       height: 42%;
       opacity: .56;
   }

   .city-crane::before {
       content: "";
       position: absolute;
       right: 18%;
       top: 0;
       width: 2px;
       height: 100%;
       background: rgba(216, 194, 155, .48);
   }

   .city-crane::after {
       content: "";
       position: absolute;
       right: 18%;
       top: 0;
       width: 82%;
       height: 2px;
       background: rgba(216, 194, 155, .48);
       transform-origin: right center;
       transform: rotate(-4deg);
   }

   .crane-cable {
       position: absolute;
       top: 7%;
       left: 24%;
       width: 1px;
       height: 42%;
       background: rgba(216, 194, 155, .42);
   }

   .crane-cable::after {
       content: "";
       position: absolute;
       left: -5px;
       bottom: -8px;
       width: 11px;
       height: 11px;
       border: 1px solid rgba(216, 194, 155, .55);
       transform: rotate(45deg);
   }

   .city-glow {
       position: absolute;
       right: 8%;
       bottom: 2%;
       width: 75%;
       height: 55%;
       border-radius: 50%;
       background: radial-gradient(circle, rgba(184, 154, 104, .18), transparent 68%);
       filter: blur(18px);
       animation: cityGlow 5s ease-in-out infinite;
   }

   @keyframes cityGlow {

       0%,
       100% {
           opacity: .55;
           transform: scale(.98);
       }

       50% {
           opacity: .9;
           transform: scale(1.04);
       }
   }


   .hero::before {
       content: "";
       position: absolute;
       inset: 0;
       z-index: -1;
       background:
           radial-gradient(circle at 20% 28%, rgba(184, 154, 104, .25), transparent 34%),
           linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, .72));
   }

   .hero-logo {
       width: min(330px, 72vw);
       height: auto;
       display: block;
       margin-bottom: 44px;
       filter: drop-shadow(0 8px 25px rgba(0, 0, 0, .25));
   }

   .hero h1 {
       max-width: 900px;
       margin: 18px 0 22px;
       font-size: 3.5rem;
       line-height: .97;
       letter-spacing: -.04em;
   }

   .hero-copy {
       max-width: 720px;
       margin: 0;
       color: rgba(255, 255, 255, .76);
       font-size: 1.2rem;
       line-height: 1.8;
   }

   .hero-actions {
       display: flex;
       flex-wrap: wrap;
       gap: 12px;
       margin-top: 32px;
   }

   .btn-brand {
       border: 0;
       border-radius: 999px;
       padding: 14px 24px;
       color: #151515;
       background: linear-gradient(135deg, var(--brand-gold-light), var(--brand-gold));
       font-weight: 800;
       box-shadow: 0 14px 32px rgba(184, 154, 104, .24);
       transition: .25s ease;
   }

   .btn-brand:hover {
       color: #151515;
       transform: translateY(-2px);
   }

   .btn-glass {
       border: 1px solid rgba(255, 255, 255, .3);
       border-radius: 999px;
       padding: 13px 24px;
       color: #fff;
       background: rgba(255, 255, 255, .06);
       backdrop-filter: blur(10px);
       font-weight: 700;
       transition: .25s ease;
   }

   .btn-glass:hover {
       color: var(--brand-dark);
       background: #fff;
   }

   /* PROJECTS */
   .projects-section {
       background: var(--brand-cream);
   }

   .project-card {
       height: 100%;
       overflow: hidden;
       border: 1px solid var(--line);
       border-radius: 24px;
       background: #fff;
       box-shadow: 0 12px 36px rgba(0, 0, 0, .07);
       transition: transform .35s ease, box-shadow .35s ease;
   }

   .project-card:hover {
       transform: translateY(-8px);
       box-shadow: var(--shadow);
   }

   .project-media {
       position: relative;
       height: 245px;
       overflow: hidden;
       background: #ddd;
   }

   .project-media img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .55s ease;
   }

   .project-card:hover .project-media img {
       transform: scale(1.06);
   }

   .project-tag {
       position: absolute;
       top: 16px;
       left: 16px;
       padding: 7px 12px;
       border: 1px solid rgba(255, 255, 255, .18);
       border-radius: 999px;
       color: #fff;
       background: rgba(20, 20, 20, .82);
       backdrop-filter: blur(8px);
       font-size: .7rem;
       font-weight: 800;
       letter-spacing: .08em;
       text-transform: uppercase;
   }

   .project-body {
       padding: 24px;
   }

   .project-title {
       margin-bottom: 10px;
       font-size: 1.25rem;
       line-height: 1.2;
   }

   .project-title a {
       text-decoration: none;
       color: #000;
   }

   .project-copy {
       min-height: 70px;
       margin-bottom: 0;
       color: var(--brand-muted);
       font-size: 0.875;
       line-height: 1.7;
   }

   .project-actions {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 10px;
       margin-top: 22px;
   }

   .btn-project {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: 7px;
       padding: 12px 10px;
       border-radius: 12px;
       font-size: .84rem;
       font-weight: 800;
       text-decoration: none;
   }

   .btn-location {
       color: #fff;
       background: var(--brand-dark);
   }

   .btn-location:hover {
       color: #fff;
       background: #000;
   }

   .btn-brochure {
       color: var(--brand-dark);
       border: 1px solid var(--line);
       background: var(--brand-cream);
   }

   .btn-brochure:hover {
       color: var(--brand-dark);
       border-color: var(--brand-gold);
       background: #fff;
   }

   /* TRUSTED BRANDS */
   .brands-section {
       overflow: hidden;
       color: #fff;
       background: var(--brand-dark);
   }

   .brand-loop {
       position: relative;
       overflow: hidden;
       margin-top: 45px;
       padding: 20px 0;
   }

   .brand-loop::before,
   .brand-loop::after {
       content: "";
       position: absolute;
       top: 0;
       bottom: 0;
       width: 110px;
       z-index: 2;
       pointer-events: none;
   }

   .brand-loop::before {
       left: 0;
       background: linear-gradient(90deg, var(--brand-dark), transparent);
   }

   .brand-loop::after {
       right: 0;
       background: linear-gradient(270deg, var(--brand-dark), transparent);
   }

   .brand-track {
       display: flex;
       width: max-content;
       animation: scrollBrands 30s linear infinite;
   }

   .brand-loop:hover .brand-track {
       animation-play-state: paused;
   }

   .brand-item {
       width: 220px;
       height: 105px;
       margin-right: 22px;
       padding: 18px 28px;
       display: flex;
       align-items: center;
       justify-content: center;
       border: 1px solid rgba(255, 255, 255, .11);
       border-radius: 18px;
       background: rgba(255, 255, 255, .96);
       box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
       backdrop-filter: blur(8px);
   }

   .brand-item img {
       display: block;
       width: 100%;
       height: 58px;
       object-fit: contain;
       /* filter: grayscale(1);
       opacity: .72;
       transition: filter .25s ease, opacity .25s ease, transform .25s ease; */
   }

   .brand-item:hover img {
       filter: grayscale(0);
       opacity: 1;
       transform: scale(1.04);
   }

   @keyframes scrollBrands {
       from {
           transform: translateX(0);
       }

       to {
           transform: translateX(calc(-242px * 7));
       }
   }

   /* CONTACT */
   .contact-section {
       background: #fff;
   }

   .contact-wrap {
       position: relative;
       overflow: hidden;
       border-radius: 30px;
       color: #fff;
       background:
           radial-gradient(circle at 90% 15%, rgba(184, 154, 104, .28), transparent 28%),
           linear-gradient(135deg, #171717, #292929);
       box-shadow: var(--shadow);
   }

   .contact-main {
       padding: clamp(32px, 6vw, 70px);
   }

   .contact-card {
       height: 100%;
       padding: 24px;
       border: 1px solid rgba(255, 255, 255, .11);
       border-radius: 20px;
       background: rgba(255, 255, 255, .055);
       backdrop-filter: blur(9px);
   }

   .contact-icon {
       width: 48px;
       height: 48px;
       display: inline-flex;
       align-items: center;
       justify-content: center;
       margin-bottom: 18px;
       border-radius: 15px;
       color: var(--brand-dark);
       background: var(--brand-gold-light);
       font-size: 1.2rem;
   }

   .contact-card small {
       display: block;
       margin-bottom: 7px;
       color: rgba(255, 255, 255, .55);
       font-size: .72rem;
       font-weight: 800;
       letter-spacing: .1em;
       text-transform: uppercase;
   }

   .contact-card a,
   .contact-card p {
       margin: 0;
       color: #fff;
       text-decoration: none;
       line-height: 1.65;
       word-break: break-word;
   }

   .contact-card a:hover {
       color: var(--brand-gold-light);
   }

   .footer-note {
       padding: 24px 12px 34px;
       color: var(--brand-muted);
       font-size: .86rem;
       text-align: center;
   }


   @media (min-width: 992px) and (max-width: 1199px) {
       .hero h1 {
           font-size: 2.5rem;
       }

       .section-title {
           font-size: 2rem;
       }
   }

   @media (min-width: 768px) and (max-width: 991px) {
       .hero h1 {
           font-size: 2rem;
       }
   }

   @media (min-width: 576px) and (max-width: 767px) {
       .section-pad {
           padding: 72px 0;
       }

       .hero {
           min-height: auto;
           padding: 70px 0 80px;
       }

       .hero-logo {
           margin-bottom: 32px;
       }

       .project-media {
           height: 220px;
       }

       .project-copy {
           min-height: auto;
       }

       .brand-item {
           width: 185px;
       }

       @keyframes scrollBrands {
           from {
               transform: translateX(0);
           }

           to {
               transform: translateX(calc(-207px * 7));
           }
       }
   }

   @media (max-width: 575px) {
       .hero h1 {
           font-size: 1.5rem;
       }

       .hero-copy {
           font-size: 1rem;
       }

       .section-title {
           font-size: 1.7rem;
       }

       .brand-loop::before,
       .brand-loop::after {
           width: 60px;
       }
   }