@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;800;900&family=Caveat:wght@600&display=swap');
 

         :root { 
             --bg-primary: #f9f9f9; 
             --text-primary: #111111; 
             --text-secondary: #777777; 
             --accent: #000000; 
             --white: #ffffff; 
             --border-light: #e0e0e0; 
             --hire-green: #10b981; 
         } 

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

         body { 
             font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
             background-color: var(--bg-primary); 
             color: var(--text-primary); 
             -webkit-font-smoothing: antialiased; 
             -moz-osx-font-smoothing: grayscale; 
             line-height: 1.6; 
             overflow-x: hidden; 
         } 

         a { 
             color: var(--text-primary); 
             text-decoration: none; 
             transition: color 0.3s ease; 
         } 

         a:hover { 
             color: var(--text-secondary); 
         } 

         /* --- EXPERT EDITORIAL HEADER --- */ 
         header { 
             position: fixed; 
             top: 0; 
             left: 0; 
             width: 100%; 
             padding: 24px 5vw; 
             background: rgba(249, 249, 249, 0.95); 
             backdrop-filter: blur(12px); 
             z-index: 1000; 
             border-bottom: 1px solid var(--border-light); 
             display: flex; 
             justify-content: space-between; /* Pushes Logo left, Links Right */ 
             align-items: center; 
         } 

         .nav-brand { 
             display: flex; 
             align-items: center; 
         } 

         .nav-brand img { 
             height: 24px; 
             width: auto; 
             display: block; 
         } 

         .nav-links { 
             display: flex; 
             gap: 36px;  
         } 

         .nav-link { 
             font-size: 11.5px; 
             font-weight: 700; 
             text-transform: uppercase; 
             letter-spacing: 1.5px; 
             cursor: pointer; 
             position: relative; 
             color: var(--text-secondary); 
             transition: color 0.3s ease; 
             padding-bottom: 4px; 
         } 
         
         .nav-link:hover { 
             color: var(--text-primary); 
         } 

         .nav-link[aria-current="page"] { 
             color: var(--text-primary); 
         } 

         .nav-link[aria-current="page"]::after { 
             content: ''; 
             position: absolute; 
             bottom: 0; 
             left: 0; 
             width: 100%; 
             height: 2px; 
             background-color: var(--accent); 
         } 

         /* --- BADGE STYLES (EXCLUSIVELY ON CONTACT PAGE) --- */ 
         .status-badge { 
             display: inline-flex; 
             align-items: center; 
             gap: 8px; 
             padding: 8px 14px; 
             border: 1px solid var(--border-light); 
             border-radius: 50px; 
             background: var(--white); 
             font-size: 10px; 
             font-weight: 700; 
             text-transform: uppercase; 
             letter-spacing: 1px; 
             box-shadow: 0 4px 10px rgba(0,0,0,0.03); 
             border-color: var(--accent); 
         } 

         .status-dot { 
             width: 6px; 
             height: 6px; 
             background-color: var(--hire-green); 
             border-radius: 50%; 
             animation: pulse 2s infinite; 
         } 

         @keyframes pulse { 
             0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); } 
             70% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); } 
             100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); } 
         } 

         /* --- MAIN CONTENT AREA --- */ 
         main { 
             padding: 150px 5vw 100px 5vw; 
             min-height: 100vh; 
             display: flex; 
             flex-direction: column; 
             justify-content: center; 
         } 

                  .page-section { 
             max-width: 1200px; 
             margin: 0 auto; 
             width: 100%; 
         } 

         /* Swup Transition Styles */
         .transition-fade {
             transition: opacity 0.5s ease, transform 0.5s ease;
             opacity: 1;
             transform: translateY(0);
         }

         html.is-animating .transition-fade {
             opacity: 0;
             transform: translateY(15px);
         } 

         /* --- TYPOGRAPHY --- */ 
         .hero-title { 
             font-size: clamp(40px, 8vw, 120px); 
             font-weight: 900; 
             line-height: 0.95; 
             letter-spacing: -2px; 
             text-transform: uppercase; 
             margin-bottom: 25px; 
             max-width: 1000px; 
         } 

         .hero-subtitle { 
             font-size: clamp(14px, 1.5vw, 18px); 
             font-weight: 400; 
             color: var(--text-secondary); 
             max-width: 650px; 
             line-height: 1.6; 
         } 

         .section-label { 
             font-size: 12px; 
             font-weight: 800; 
             text-transform: uppercase; 
             letter-spacing: 2px; 
             color: var(--text-secondary); 
             margin-bottom: 20px; 
             display: block; 
         } 

         h2 { 
             font-size: 32px; 
             font-weight: 800; 
             letter-spacing: -1px; 
             margin-bottom: 40px; 
             text-transform: uppercase; 
         } 

         p { 
             font-size: 16px; 
             margin-bottom: 24px; 
             max-width: 700px; 
         } 

         /* --- GRID LAYOUTS --- */ 
         .grid-2 { 
             display: grid; 
             grid-template-columns: 1.2fr 1fr; 
             gap: 80px; 
         } 

         /* --- ABOUT PAGE STYLES --- */ 
         .about-manifesto p { 
             font-size: 17px; 
             line-height: 1.7; 
             color: var(--text-primary); 
             margin-bottom: 20px; 
         } 

         .signature { 
             font-family: 'Caveat', cursive; 
             font-size: 42px; 
             color: var(--accent); 
             margin-top: 40px; 
             transform: rotate(0deg); 
             display: inline-block; 
         } 

         .sidebar-heading { 
             font-size: 12px; 
             font-weight: 800; 
             text-transform: uppercase; 
             letter-spacing: 1px; 
             margin-bottom: 25px; 
             color: var(--text-secondary); 
             border-bottom: 1px solid var(--border-light); 
             padding-bottom: 10px; 
         } 

         .speaking-item { 
             margin-bottom: 35px; 
         } 

         .speaking-item h4 { 
             font-size: 16px; 
             font-weight: 800; 
             line-height: 1.4; 
             margin-bottom: 4px; 
             text-transform: uppercase; 
         } 

         .speaking-meta { 
             font-size: 12px; 
             font-weight: 600; 
             color: var(--text-secondary); 
             text-transform: uppercase; 
             letter-spacing: 0.5px; 
             display: block; 
             margin-bottom: 10px; 
         } 

         .speaking-item p { 
             font-size: 14px; 
             line-height: 1.6; 
             color: var(--text-secondary); 
             margin-bottom: 0; 
         } 

         /* --- EDITORIAL EXPERIENCE STYLES --- */ 
         .experience-item { 
             margin-bottom: 60px; 
             padding-bottom: 60px; 
             border-bottom: 1px solid var(--border-light); 
             display: grid; 
             grid-template-columns: 300px 1fr; 
             gap: 40px; 
             align-items: start; 
         } 

         .experience-item:last-child { 
             border-bottom: none; 
             margin-bottom: 0; 
             padding-bottom: 0; 
         } 

         .exp-meta { 
             position: sticky; 
             top: 120px; 
         } 

         .exp-company { 
             font-size: 24px; 
             font-weight: 900; 
             text-transform: uppercase; 
             letter-spacing: -0.5px; 
             margin-bottom: 5px; 
         } 

         .exp-role { 
             font-size: 14px; 
             font-weight: 600; 
             color: var(--text-secondary); 
             text-transform: uppercase; 
             margin-bottom: 5px; 
         } 

         .exp-date { 
             font-size: 12px; 
             font-weight: 500; 
             color: var(--text-secondary); 
             text-transform: uppercase; 
             letter-spacing: 1px; 
         } 

         .exp-narrative { 
             font-size: 16px; 
             line-height: 1.7; 
             color: var(--text-primary); 
         } 

         /* --- CLIENT ROSTER GRID --- */ 
         .client-roster-grid { 
             display: grid; 
             grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
             gap: 15px; 
             margin-top: 30px; 
         } 

         .client-roster-grid div { 
             font-size: 13px; 
             font-weight: 500; 
             color: var(--text-secondary); 
             padding-bottom: 8px; 
             border-bottom: 1px solid var(--border-light); 
         } 

         /* --- BUTTONS --- */ 
         .btn { 
             background-color: var(--accent); 
             color: var(--white); 
             border: 2px solid var(--accent); 
             padding: 16px 32px; 
             font-family: 'Inter', sans-serif; 
             font-size: 13px; 
             font-weight: 800; 
             text-transform: uppercase; 
             letter-spacing: 1px; 
             cursor: pointer; 
             transition: all 0.3s ease; 
             display: inline-block; 
             text-align: center; 
         } 

         .btn:hover { 
             background-color: transparent; 
             color: var(--accent); 
         } 

         /* --- RESUME SECTION --- */ 
         .resume-header { 
             display: flex; 
             justify-content: space-between; 
             align-items: flex-end; 
             margin-bottom: 40px; 
             border-bottom: 1px solid var(--border-light); 
             padding-bottom: 20px; 
         } 

         .resume-container { 
             background-color: #e0e0e0; 
             padding: 40px 0; 
             border: 1px solid var(--border-light); 
             width: 100%; 
             display: flex; 
             justify-content: center; 
         } 

         .res-image-stack { 
             width: 100%; 
             max-width: 850px; 
             display: flex; 
             flex-direction: column; 
             gap: 20px; 
             padding: 0 20px; 
         } 

         .res-image-stack img { 
             width: 100%; 
             height: auto; 
             display: block; 
             box-shadow: 0 20px 50px rgba(0,0,0,0.15); 
         } 

         /* --- FORM STYLES --- */ 
         .contact-layout { 
             display: grid; 
             grid-template-columns: 1fr 1.5fr; 
             gap: 80px; 
         } 

         .form-group { 
             margin-bottom: 30px; 
         } 

         .form-group label { 
             display: block; 
             font-size: 12px; 
             font-weight: 600; 
             text-transform: uppercase; 
             letter-spacing: 1px; 
             margin-bottom: 10px; 
             color: var(--text-secondary); 
         } 

         .form-group input, 
         .form-group select, 
         .form-group textarea { 
             width: 100%; 
             padding: 15px 0; 
             background: transparent; 
             border: none; 
             border-bottom: 2px solid var(--border-light); 
             font-family: 'Inter', sans-serif; 
             font-size: 16px; 
             color: var(--text-primary); 
             transition: border-color 0.3s ease; 
             outline: none; 
             border-radius: 0; 
             -webkit-appearance: none; 
         } 

         .form-group textarea { 
             min-height: 100px; 
             resize: vertical; 
         } 

         .form-group input:focus, 
         .form-group select:focus, 
         .form-group textarea:focus { 
             border-bottom-color: var(--accent); 
         } 

         #form-success { 
             display: none; 
             padding: 40px; 
             background: var(--white); 
             border: 1px solid var(--border-light); 
             text-align: center; 
         } 

         /* --- RESPONSIVE --- */ 
         @media (max-width: 1024px) { 
             header { 
                 flex-direction: column; 
                 align-items: flex-start; 
                 gap: 15px; 
                 padding: 20px 5vw 15px 5vw; 
             } 
             
             /* Left Aligned Swipeable Mobile Nav */ 
             .nav-links {  
                 width: 100%; 
                 justify-content: flex-start; 
                 gap: 25px; 
                 overflow-x: auto; 
                 -webkit-overflow-scrolling: touch; 
                 padding-bottom: 5px; 
                 scrollbar-width: none;  
                 -ms-overflow-style: none;  
             } 
             
             .nav-links::-webkit-scrollbar { 
                 display: none;  
             } 
             
             .nav-link { 
                 white-space: nowrap; 
             } 
             
             .grid-2, .contact-layout { 
                 grid-template-columns: 1fr; 
                 gap: 40px; 
             } 
             .experience-item { 
                 grid-template-columns: 1fr; 
                 gap: 20px; 
             } 
             .exp-meta { 
                 position: relative; 
                 top: 0; 
             } 
             main { 
                 padding-top: 180px; 
             } 
             .resume-header { 
                 flex-direction: column; 
                 align-items: flex-start; 
                 gap: 20px; 
             } 
             .resume-container { 
                 padding: 30px 10px; 
             } 
         } 

         @media (max-width: 600px) { 
             .nav-links { 
                 gap: 20px; 
             } 
             .hero-title { 
                 font-size: 12vw; 
             } 
         }