/* Define custom fonts and styles */
 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

 /* CSS Variables for Colors */
 :root {
     --primary-black: #000000;
     --primary-white: #FFFFFF;
     --mid-gray: #808080;
     --dark-gray: #111111;
     --light-gray: #333333;
 }

 .bebas {
     font-family: 'Bebas Neue', sans-serif;
 }

 .architect {
     font-family: 'Arial', sans-serif;
 }

 /* Custom scroll padding for fixed header navigation */
 .section-scroll-padding {
     scroll-padding-top: 80px;
     padding-top: 80px;
 }

 /* Dark mode default styling */
 body {
     background-color: #000000;
     color: #FFFFFF;
 }

 /* Input field styling */
 input[type="text"],
 input[type="email"],
 textarea {
     background-color: #111111;
     border: 1px solid #333333;
     color: #FFFFFF;
 }

 input:focus,
 textarea:focus {
     border-color: #FFFFFF;
     outline: none;
 }

 /* Custom Card Hover Effect */
 .work-card-hover {
     transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
     transform: scale(1);
 }

 .work-card-hover:hover {
     transform: scale(1.02);
     box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05);
 }

 /* Ensure smooth scrolling when anchor links are clicked */
 html {
     scroll-behavior: smooth;
 }

 /* Home hero grid layout */
 .home-grid {
     display: grid;
     grid-template-columns: repeat(5, 1fr);
     grid-template-rows: repeat(5, 1fr);
     gap: 8px;
 }

 .home-grid .hero-left {
     grid-column: span 3 / span 3;
     grid-row: span 4 / span 4;
 }

 .home-grid .hero-right {
     grid-column: span 2 / span 2;
     grid-row: span 4 / span 4;
     grid-column-start: 4;
 }

 /* Ensure hero media scales nicely */
 .hero-media {
     width: 100%;
     max-width: 24rem;
     aspect-ratio: 3 / 4;
     height: auto;
     max-height: 26rem;
 }

 .hero-media img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 0.5rem;
 }

 /* Straight loop marquee between hero and stats */
 .curved-loop {
     overflow: hidden;
 }

 .curved-loop svg {
     width: 100%;
     height: 140px;
     display: block;
 }

 .curved-loop text {
     font-family: 'Bebas Neue', sans-serif;
     font-size: clamp(1.6rem, 4vw, 3rem);
     letter-spacing: 0.08em;
     fill: #ffffff;
     text-transform: uppercase;
     font-weight: bold;
 }

 @media (max-width: 1024px) {
     .home-grid {
         grid-template-columns: 1fr;
         grid-template-rows: auto;
         gap: 16px;
     }

     .home-grid .hero-left,
     .home-grid .hero-right {
         grid-column: auto;
         grid-row: auto;
     }

     .home-grid .hero-right {
         justify-content: flex-start;
         padding-top: 1rem;
     }

     .hero-media {
         max-width: 18rem;
         max-height: 20rem;
         margin: 0 auto;
     }

     .curved-loop svg {
         height: 120px;
     }

     .curved-loop text {
         font-size: clamp(1.4rem, 3.6vw, 2.6rem);
         letter-spacing: 0.07em;
     }
 }

 @media (max-width: 640px) {
     .curved-loop {
         display: none;
     }

     .hero-media {
         max-width: 15rem;
         max-height: 16rem;
     }

     .curved-loop svg {
         height: 95px;
     }

     .curved-loop text {
         font-size: clamp(1.2rem, 3.4vw, 2rem);
         letter-spacing: 0.05em;
     }

     .footer-letter {
         font-size: 24vw;
     }

     .footer-tm {
         font-size: 4vw;
     }
 }

 /* Light mode overrides derived from user preference */
 .light-mode {
     background-color: #f9f9f9;
     color: #111111;
 }

 .light-mode input[type="text"],
 .light-mode input[type="email"],
 .light-mode textarea {
     background-color: #ffffff;
     border: 1px solid #cccccc;
     color: #111111;
 }

 .light-mode input:focus,
 .light-mode textarea:focus {
     border-color: #111111;
 }

 .light-mode .bg-black {
     background-color: #f9f9f9 !important;
 }

 .light-mode .bg-white {
     background-color: #111111 !important;
 }

 .light-mode .bg-dark-gray {
     background-color: #f1f1f1 !important;
 }

 .light-mode .bg-mid-gray {
     background-color: #e2e2e2 !important;
 }

 .light-mode .border-mid-gray {
     border-color: #d1d1d1 !important;
 }

 .light-mode .border-white {
     border-color: #111111 !important;
 }

 .light-mode .border-black {
     border-color: #f9f9f9 !important;
 }

 .light-mode .text-white {
     color: #111111 !important;
 }

 .light-mode .text-black {
     color: #f9f9f9 !important;
 }

 .light-mode .text-mid-gray {
     color: #444444 !important;
 }

 /* Light mode button and link hover states */
 .light-mode .hover\:bg-mid-gray:hover {
     background-color: #333333 !important;
     color: #f9f9f9 !important;
 }

 .light-mode .hover\:bg-white:hover {
     background-color: #111111 !important;
 }

 .light-mode .hover\:text-white:hover {
     color: #f9f9f9 !important;
 }

 .light-mode .hover\:text-black:hover {
     color: #111111 !important;
 }

 .light-mode .hover\:text-mid-gray:hover {
     color: #555555 !important;
 }

 .light-mode .hover\:bg-dark-gray:hover {
     background-color: #e8e8e8 !important;
 }

 .light-mode .work-card-hover:hover {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
 }

 /* Bold Footer with large letters */

 .footer-header {
     width: 100%;
     min-height: 60vh;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     padding: 2em 2em;
     position: relative;
     z-index: 10;
     background-color: #000000;
 }

 .footer-caption {
     width: 100%;
     text-align: center;
     margin-bottom: 2rem;
 }

 .footer-caption p {
     font-size: 1.25rem;
     color: #ffffff;
     margin: 0;
     max-width: 90%;
     margin-left: auto;
     margin-right: auto;
 }

 .footer-letters {
     display: flex;
     width: 100%;
     justify-content: space-evenly;
     align-items: center;
     gap: 0;
 }

 .footer-letter {
     font-family: 'Anton', sans-serif;
     font-size: 18vw;
     font-weight: 900;
     color: #ffffff;
     line-height: 0.9;
     letter-spacing: -0.02em;
     position: relative;
     flex: 1;
     text-align: center;
 }

 .footer-letter-s {
     margin-left: 0;
 }

 .footer-tm {
     font-size: 3vw;
     position: absolute;
     top: 0;
     right: 0;
     font-weight: 700;
 }

 /* Reduce hover effect opacity on mobile/touch devices to prevent blocking content */
 @media (max-width: 768px) {

     /* Make mobile menu hover backgrounds more transparent */
     #mobile-menu a:hover {
         background-color: rgba(17, 17, 17, 0.3) !important;
     }

     .light-mode #mobile-menu a:hover {
         background-color: rgba(241, 241, 241, 0.3) !important;
     }
 }

 /* Only apply hover effects on devices that support true hover (not touch screens) */
 @media (hover: none) {

     /* Disable background hover effects on touch devices */
     #mobile-menu a:hover {
         background-color: transparent !important;
     }

     nav a:hover {
         background-color: transparent !important;
     }
 }

 /* Stats Counter Animation */
 @keyframes countUp {
     from {
         opacity: 0;
         transform: translateY(20px);
     }

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

 .stat-item {
     animation: countUp 0.8s ease-out forwards;
 }

 .stat-item:nth-child(1) {
     animation-delay: 0.2s;
 }

 .stat-item:nth-child(2) {
     animation-delay: 0.4s;
 }

 .stat-item:nth-child(3) {
     animation-delay: 0.6s;
 }

 .stat-item:nth-child(4) {
     animation-delay: 0.8s;
 }

 .stat-counter {
     display: inline-block;
 }