/* =============================================
       FONT IMPORTS — works on all devices
       ============================================= */

    /* Town 60 Contrast Bold — for .p1, .p3, .p5 */
    @font-face {
      font-family: 'Town 60 Contrast Bold';
      src: url('../fonts/Town60ContrastBold.woff2') format('woff2'),
           url('../fonts/Town60ContrastBold.woff') format('woff');

      font-style: normal;
      font-display: swap;
    }

    /* Aileron Light — for .p2, .p4, .p6 */
    @font-face {
      font-family: 'Aileron Light';
      src: url('../fonts/Aileron-Light.woff2') format('woff2'),
           url('../fonts/Aileron-Light.woff') format('woff');

      font-style: normal;
      font-display: swap;
    }

	 /* Aileron Light — for .extrabold*/
    @font-face {
      font-family: 'Aileron Heavy';
      src: url('../fonts/Aileron-Heavy.woff2') format('woff2'),
           url('../fonts/Aileron-Heavy.woff') format('woff');

      font-style: normal;
      font-display: swap;
    }
	@font-face {
      font-family: 'Aileron Black';
      src: url('../fonts/Aileron-Black.woff2') format('woff2'),
           url('../fonts/Aileron-Black.woff') format('woff');

      font-style: normal;
      font-display: swap;
    }
	@font-face {
      font-family: 'Aileron Thin';
      src: url('../fonts/Aileron-Thin.woff2') format('woff2'),
           url('../fonts/Aileron-Thin.woff') format('woff');

      font-style: normal;
      font-display: swap;
    }




	/* SOPHIA MARTINI*/

@font-face {
      font-family: 'Sophia Martini';
      src: url('../fonts/SOPHIA MARTINI.woff2') format('woff2'),
           url('../fonts/SOPHIA MARTINI.woff') format('woff');

      font-style: normal;
      font-display: swap;
    }

    /* =============================================
       RESET
       ============================================= */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      max-width:100%;
    }

	
    body{
	width:100%;
	overflow-x:hidden;
	}

	  /* ===== NAVBAR ===== */
    #navbar {
      position: fixed;
	  top:0;
      width: 100%;
      z-index: 100;
      height: 70px;
      padding: 0 60px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      background: #b3b3b3;
    }
    #navbar.sticky {
      position: fixed;
      top: 0; left: 0;
      background: rgba(179, 179, 179, 0.95);
      backdrop-filter: blur(14px);
      -webkit-backdrop-filter: blur(14px);
      box-shadow: 0 1px 0 rgba(0,0,0,0.1);
    }
    .nav-logo {
      height: 40px;
      width: auto;
      object-fit: contain;
    }
    .nav-links {
      display: flex;
      gap: 48px;
      list-style: none;
    }
    .nav-links a {
      font-weight: 100;
      font-size: 13px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #1a1a1a;
      text-decoration: none;
      position: relative;

    }
    .nav-links a::after {
      content: '';
      position: absolute;
      bottom: -3px; left: 0;
      width: 0; height: 1px;
      background: #1a1a1a;
      transition: width 0.35s;
    }
    .nav-links a:hover::after { width: 100%; }

    /* Hamburger */
    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      background: none;
      border: none;
      padding: 8px;
    }
    .hamburger span {
      display: block;
      width: 24px; height: 1px;
      background: #1a1a1a;
      transition: all 0.3s;
    }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(4px,4px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(4px,-4px); }

    .mobile-menu {
      display: none;
      position: fixed;
      inset: 0;
      top: 70px;
      background: rgba(179,179,179,0.98);
      z-index: 99;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 44px;
    }
    .mobile-menu.open { display: flex; }
    .mobile-menu a {
      font-weight: 100;
      font-size: 36px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: #1a1a1a;
      text-decoration: none;
    }

    @keyframes bounce {
      0%,100% { transform: translateY(0); }
      50%      { transform: translateY(-10px); }
    }


	  /* ===== HERO VIDEO ===== */
  /* VIDEO */
#hero {
  width: 100%;
height:100vh;
  display:flex;
		align-items:center;
		background-color:#2b2a29;
}

#hero video {
  width: 100%;
  height: auto;
  object-fit: cover;

}
    @supports (-webkit-touch-callout: none) {
      #hero { height: -webkit-fill-available; }
    }


    .main {
      background-color: #2b2a29;
      width:100%;
      overflow-x:hidden;
    }

    p {
      color: white;
    }

    /* =============================================
       TYPOGRAPHY — applied globally
       ============================================= */

    /* Heading paragraphs */
    .p1, .p3, .p5, .loc-p5 {
      font-family: 'Town 60 Contrast Bold', 'Georgia', 'Times New Roman', serif;

    }

    .by{
        font-family:Sophia Martini;
        position:absolute;
        left:50%;
        top:26%;
        font-size:80px;
    }

    /* Body / description paragraphs */
    .p2, .p4, .p6, .loc-p6 {
      font-family: 'Aileron Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;

    }

	.extra-bold{
		font-family:'Aileron Heavy', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	}

	#for-size{
		font-size:32px;
		padding-top:20px;
	}

	.addr-line, .form-field label, .submit-btn {
 	   	font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    		font-weight: 400;
	}
	.inquire-bar h2 {
    		font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    		font-weight: 900;
	}


	   /* =============================================
       PART 0
       ============================================= */
	   .part0{
	   display:flex;
		justify-content:center;
		padding-top:5vw;
	   }
		.img-0 {
      width: 20%;
    }
    .img-0 img {
      width: 100%;
      height: auto;
        padding-top: 5vw;
    }
    /* =============================================
       PART 1
       ============================================= */

    .text-1 img{
        position: absolute;
        left:75%;
        height: 100px;

    }
    .part1 {
      display: flex;
      position: relative;
      justify-content: right;
      align-items: center;

      padding: 5vw;
    }
    .text-1 {
      position: absolute;
      left: 20%;
      bottom: 8%;
      height: auto;
    }
    .text-1 p {
      width: 100%;
      height: auto;
    }
    .p1 {
      font-size: clamp(28px, 7vw, 100px);
      line-height: 0.85em;
    }
    .p2 {
      font-size: clamp(11px, 2vw, 26px);
    }
    #p2{
        margin-top: 110px;
    }
    .img-1 {
      width: 70%;
    }
    .img-1 img {
      width: 100%;
      height: auto;
    }

    /* =============================================
       PART 2
       ============================================= */
    .part2 {
      display: flex;
      position: relative;
      justify-content: left;
      align-items: center;
      gap: 10px;
      padding: 5vw;
    }
    .text-2 {
      position: absolute;
      right: 20%;
      bottom: 8%;
      height: auto;
    }
    .text-2 p {
      width: 100%;
      height: auto;
      text-align: right;
    }
    .p3 {
      font-size: clamp(28px, 7vw, 100px);
      line-height: 0.85em;
    }
    .p4 {
      font-size: clamp(11px, 2vw, 26px);
    }
    .img-2 {
      width: 70%;
    }
    .img-2 img {
      width: 100%;
      height: auto;
    }

    /* =============================================
       PART 3
       ============================================= */
    .part3 {
      padding: 5vw;
      position: relative;
    }
    .img-3 {
      width: 100%;
    }
    .img-3 img {
      width: 100%;
      height: auto;
    }

    /* =============================================
       PART 4
       ============================================= */
    .part4 {
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 5vw;
      gap: 20px;
    }
    .text-4 {
      width: 40%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .text-4 img {
      width: 80%;
      height: auto;
    }
    .img-4 {
      width: 60%;
    }
    .img-4 img {
      width: 100%;
      height: auto;
    }

    /* =============================================
       PART 5
       ============================================= */
    .part5 {
      display: flex;
      position: relative;
      justify-content: right;
      align-items: center;
      gap: 10px;
      padding: 5vw;
    }
    .text-5 {
      position: absolute;
      left: 20%;
      bottom: 10%;
      height: auto;
    }
    .text-5 p {
      width: 100%;
      height: auto;
    }
    .p5 {
      font-size: clamp(28px, 7vw, 100px);
      line-height: 0.85em;
    }
    .p6 {
      font-size: clamp(11px, 2vw, 26px);
    }
    .img-5 {
      width: 65%;
    }
    .img-5 img {
      width: 100%;
      height: auto;
    }

    /* =============================================
       PART 6 overlay text
       ============================================= */
    .text-6 {
      position: absolute;
      right: 5%;
      bottom: 10%;
      text-align: right;
    }



.location {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 5vw;
  gap: 4vw;
}

.text-location {
  width: 30%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.text-location p {
  width: 100%;
  text-align: left;
}

.loc-p5 {
  font-family: 'Town 60 Contrast Bold', 'Georgia', 'Times New Roman', serif;
  font-size: clamp(28px, 7vw, 100px);
  line-height: 0.85em;
  color: white;
}

.loc-p6 {
  font-family: 'Aileron Light', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-size: clamp(11px, 2vw, 26px);
  color: white;
}

.img-location {
  width: 70%;
}

.img-location img {
  width: 100%;
  height: auto;
  display: block;
}

#for-size{
	 font-size: clamp(15px, 2vw, 26px);
}

	   /* ===== CONTACT ===== */
    #contact { background: #2b2a29; }

    .inquire-bar {
      width: 100%;
      padding: 30px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
    }
    .inquire-bar h2 {
            font-weight: 900;
      font-size: 300px;
      line-height: 1;
      letter-spacing: -0.02em;
      color: #f0ece4;
      text-transform: uppercase;
      white-space: nowrap;
      display: block;
    }

    .contact-grid {
      display: flex;
      justify-content: center;
      align-items: flex-start;
      gap: 100px;
      padding: 60px 80px;
    }

    .contact-left,
    .contact-right {
      flex: 1;
      max-width: 480px;
    }

    .contact-left {
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .contact-logo {
      height: 100px;
      width: auto;
      object-fit: contain;
      object-position: left top;
    }

    .addr-block { display: flex; flex-direction: column; margin-top: 60px; }

    .addr-line {
      font-weight: 400;
      font-size: 16px;
      line-height: 1.4;
      color: #f0ece4;
    }

    .addr-dot { color: #c0392b; }

    .contact-phone {
      font-weight: 700;
      font-size: 28px;
      color: #f0ece4;
      letter-spacing: 0.04em;
    }

    /* FORM */
    .contact-right {
      display: flex;
      flex-direction: column;
      gap: 26px;
    }

    .form-field {
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid rgba(255,255,255,0.15);
      padding-bottom: 14px;
    }

    .form-field label {
      font-weight: 400;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(240, 236, 228, 0.5);
      margin-bottom: 6px;
    }

    .form-field label .req { color: #c0392b; }

    .form-field input {
      background: transparent;
      border: none;
      outline: none;
      color: #f0ece4;
      font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 400;
      font-size: 15px;
      width: 100%;
      padding: 2px 0;
    }

    .submit-btn {
      margin-top: 8px;
      background: transparent;
      border: none;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Aileron', 'Helvetica Neue', Helvetica, Arial, sans-serif;
      font-weight: 700;
      font-size: 14px;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #f0ece4;
      transition: opacity 0.3s;
    }
    .submit-btn:hover { opacity: 0.55; }
    .submit-btn .arr { font-size: 1.1em; transition: transform 0.3s; }
    .submit-btn:hover .arr { transform: translate(3px,-3px); }

    footer {
      padding: 18px 80px;
      border-top: 1px solid rgba(255,255,255,0.07);
      font-weight: 100;
      font-size: 10px;
      letter-spacing: 0.18em;
      color: rgba(240,236,228,0.28);
      text-transform: uppercase;
    }


    /* =============================================
       RESPONSIVE — 769px to 1980px
       ============================================= */

    /* Small desktop / large tablet — 769px to 1024px */
    @media (min-width: 769px) and (max-width: 1024px) {

      .p1, .p3, .p5 {
        font-size: clamp(28px, 5.5vw, 60px);
        line-height: 0.88em;
      }
      .p2, .p4, .p6 {
        font-size: clamp(11px, 1.6vw, 18px);
      }

      .by{
        font-size:45px;
        top:25%;
        left:45%;
      }
	  /* VIDEO */
#hero {
  width: 100%;
height:100vh;
  display:flex;
                align-items:center;
                background-color:#2b2a29;
}

#hero video {
  width: 100%;
  height: auto;
  object-fit: cover;

}
    @supports (-webkit-touch-callout: none) {
      #hero { height: -webkit-fill-available; }
    }
		.img-0{
			width:30%;
		}
      .text-1 {
        left: 18%;
        bottom: 6%;
      }
      #p2{
          margin-top: 80px;
      }
      .text-1 img{
          height: 70px;
      }
      .text-2 {
        right: 18%;
        bottom: 6%;
      }
      .text-5 {
        left: 18%;
        bottom: 8%;
      }
      .text-6 {
        right: 6%;
        bottom: 8%;
      }

      .img-1, .img-2 {
        width: 72%;
      }
      .img-5 {
        width: 68%;
      }

      .text-4 {
        width: 40%;
      }
      .text-4 img {
        width: 90%;
      }
      .img-4 {
        width: 60%;
      }

	   .loc-p5 { font-size: clamp(28px, 5.5vw, 60px); line-height: 0.88em; }
  .loc-p6 { font-size: clamp(11px, 1.6vw, 18px); }
  #for-size { font-size: clamp(16px, 2.5vw, 28px); padding-top: 15px; }
  .text-location { width: 32%; }
  .img-location { width: 68%; }

	 .inquire-bar h2{
		font-size:200px;

	  }

    }

    /* Medium desktop — 1025px to 1440px */
    @media (min-width: 1025px) and (max-width: 1440px) {

      .p1, .p3, .p5 {
        font-size: clamp(36px, 6vw, 80px);
        line-height: 0.85em;
      }
      .p2, .p4, .p6 {
        font-size: clamp(12px, 1.6vw, 22px);

      }

      .by{
        top:30%;
      }

	.img-0{
		width:25%;
	}
      .text-1 {
        left: 16%;
        bottom: 8%;
      }
      #p2 {
        margin-top: 110PX;
}
      .text-2 {
        right: 16%;
        bottom: 8%;
      }
      .text-5 {
        left: 16%;
        bottom: 10%;
      }
      .text-6 {
        right: 6%;
        bottom: 10%;
      }

      .img-1, .img-2 {
        width: 70%;
      }
      .img-5 {
        width: 65%;
      }

      .text-4 {
        width: 40%;
      }
      .text-4 img {
        width: 80%;
      }
      .img-4 {
        width: 60%;
      }



  .loc-p5 { font-size: clamp(36px, 6vw, 80px); line-height: 0.85em; }
  .loc-p6 { font-size: clamp(12px, 1.6vw, 22px); }
  #for-size { font-size: clamp(18px, 2.2vw, 32px); padding-top: 18px; }
  .text-location { width: 40%; }
  .img-location { width: 60%; }
}



    /* Large desktop — 1441px to 1980px */
    @media (min-width: 1441px) and (max-width: 1980px) {

      .p1, .p3, .p5 {
        font-size: clamp(60px, 6.5vw, 100px);
        line-height: 0.85em;
      }
      .p2, .p4, .p6 {
        font-size: clamp(16px, 1.5vw, 20px);
      }

		.img-0{
			width:25%;
		}
      .text-1 {
            left: 18%;
            bottom: 8%;
      }
      #p2 {
        margin-top: 120PX;
}
      .text-2 {
        right: 18%;
        bottom: 8%;
      }
      .text-5 {
        left: 18%;
        bottom: 10%;
      }
      .text-6 {
        right: 5%;
        bottom: 10%;
      }

      .img-1, .img-2 {
        width: 68%;
      }
      .img-5 {
        width: 63%;
      }

      .text-4 {
        width: 38%;
      }
      .text-4 img {
        width: 75%;
      }
      .img-4 {
        width: 62%;
      }

	  @media (min-width: 1441px) and (max-width: 1980px) {
  .loc-p5 { font-size: clamp(60px, 6.5vw, 100px); line-height: 0.85em; }
  .loc-p6 { font-size: clamp(16px, 1.5vw, 26px); }
  #for-size { font-size: clamp(22px, 2vw, 36px); padding-top: 20px; }
  .text-location { width: 40%; }
  .img-location { width: 60%; }
}

    }

 /* ===== RESPONSIVE — TABLET (max 900px) ===== */
    @media (max-width: 900px) {
	#hero {
  		width: 100%;
		height:100vh;
  		display:flex;
                align-items:center;
                background-color:#2b2a29;
		}

	#hero video {
  		width: 100%;
  		height: auto;
  		object-fit: cover;

		}
    	@supports (-webkit-touch-callout: none) {
      		#hero { height: -webkit-fill-available; }
    		}		

 .contact-grid {
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding: 40px 30px;
      }
      .contact-left,
      .contact-right {
        max-width: 100%;
        width: 100%;
      }
      footer {
        padding: 16px 30px;
      }
	  .inquire-bar{
		display:flex;
		justify-content:flex-start;
		padding:30px 15px;
	  }
	  .inquire-bar h2{
		font-size:150px;

	  }
    }
	  @media (max-width: 640px) {
  	/* VIDEO */
	#hero {
  		width: 100%;
		height:100vh;
  		display:flex;
                align-items:center;
                background-color:#2b2a29;
	}

	#hero video {
  		width: 100%;
  		height: auto;
  		object-fit: cover;

		}
    @supports (-webkit-touch-callout: none) {
      #hero { height: -webkit-fill-available; }
    }
      .contact-grid {
        padding: 30px 20px;
        gap: 36px;
      }
      .contact-phone {
        font-size: 20px;
      }
      footer {
        padding: 14px 20px;
      }

    }


    /* =============================================
       MOBILE — below 768px
       ============================================= */
    @media (max-width: 768px) {
	  /* VIDEO */
	#hero {
  		width: 100%;
		height:100vh;
  		display:flex;
                align-items:center;
                background-color:#2b2a29;
	}

	#hero video {
  	width: 100%;
  	height: auto;
 	 object-fit: cover;

	}
    @supports (-webkit-touch-callout: none) {
      #hero { height: -webkit-fill-available; }
    }
	.img-0{
		width:35%;
	}
	.by{
	    font-size:30px;
	    left:20%;
	    top:68%;
	}
	
	#navbar {
   		 height: 56px;
    		padding: 0 20px;
  		}
  	.mobile-menu {
    		top: 56px;
  		}
  	.nav-links {
    		display: none;
  		}
  	.hamburger {
    		display: flex;
  	}

	
      /* --- PART 1 --- */
      .part1 {
        flex-direction: column;
        padding: 6vw 5vw;
        justify-content: flex-start;
        align-items: flex-start;
		gap:0px;
      }
      .img-1 {
        width: 100%;
        order: 1;
      }
      .text-1 {
        position: static;
        order: 2;
        width: 100%;
        padding-top: 12vw;
      }
      .text-1 img{
          height: 50px;
          left:27%;
      }
      #p2{
          margin-top: 60px;
      }

      /* --- PART 2 --- */
      .part2 {
        flex-direction: column;
        padding: 6vw 5vw;
        justify-content: flex-start;
        align-items: flex-start;
		gap:0px;
      }
      .img-2 {
        width: 100%;
        order: 1;
      }
      .text-2 {
        position: static;
        order: 2;
        width: 100%;
        padding-top: 12vw;
      }

      /* --- PART 3 --- */
      .part3 {
        padding: 6vw 5vw;
        display: flex;
        flex-direction: column;
		gap:0px;
      }
      .img-3 {
        width: 100%;
        order: 1;
      }
      .text-6 {
        position: static;
        order: 2;
        width: 100%;
        padding-top: 12vw;

      }

      /* --- PART 4 --- */
      .part4 {
        flex-direction: column;
        padding: 6vw 5vw;
        align-items: flex-start;
		gap:0px;
      }
      .img-4 {
        width: 100%;
        order: 1;
      }
      .text-4 {
        width: 100%;
        order: 2;
        justify-content: flex-start;
        padding-top: 12vw;
      }
      .text-4 img {
        width: 100%;
        max-width: 100%;
      }

      /* --- PART 5 --- */
      .part5 {
        flex-direction: column;
        padding: 6vw 5vw;
        justify-content: flex-start;
        align-items: flex-start;
		gap:0px;
      }
      .img-5 {
        width: 100%;
        order: 1;
      }
      .text-5 {
        position: static;
        order: 2;
        width: 100%;
        padding-top: 12vw;
      }

	  .location {
    flex-direction: column-reverse;
    padding: 6vw 5vw;
    gap: 0;
    align-items: flex-start;
  }
  .text-location {
    order: 1;
    width: 100%;
    align-items: flex-start;
    padding-top: 12vw;
  }
  .img-location {
    order: 2;
    width: 100%;
  }
 /* Inquire heading scale */
      .inquire-bar h2 {
        font-size: clamp(36px, 20vw, 100px);
      }
}



	 /* ===== RESPONSIVE — MOBILE (max 640px) ===== */
    @media (max-width: 640px) {
	 .contact-grid {
        padding: 30px 20px;
        gap: 36px;
      }
      .contact-phone {
        font-size: 20px;
      }
      footer {
        padding: 14px 20px;
      }

    }

@media (max-width: 480px) {
    .by{
        top:65%;
    }
     .text-1 {
        position: static;
        order: 2;
        width: 100%;
        padding-top: 12vw;
      }
      .text-1 img{
          height: 50px;
          left:32%;
      }
}

@media (max-width: 375px) {
    .by{
        font-size:25px;
        top:65%;
    }
}