:root{
  --bg:#071018;
  --surface:#0f1720;
  --muted:#98a3b3;
  --accent:#F59E0B; /* amber */
  --accent-2:#ffb84d;
  --card:#0b1220;
  --glass: rgba(255,255,255,0.03);
  --radius:14px;
  --maxw:1200px;
  --brand-name: "Phehla Konke";
}
* { box-sizing: border-box; }

html, body {
    min-height: 100%; 
    max-width: 100vw;
    overflow-x: hidden; /* This is the specific fix for the 'zoom out' issue */
    margin: 0;
}

body {
    font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    background: linear-gradient(180deg, var(--bg), #041018);
    color: #eaf1f6;
    -webkit-font-smoothing: antialiased;
    line-height: 1.45;
    position: relative; /* Anchor for the WhatsApp button */
}

/* Ensure the WhatsApp button is truly fixed and stays in the viewport */
.whatsapp-float {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999 !important; /* Keep it above the hero and background */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Force the hero container to respect the screen width */
.hero, .wrap {
    width: 100%;
    max-width: 100%;
    overflow: hidden; 
}

/* container */
.wrap{max-width:var(--maxw);margin:0 auto;padding:28px}

/* header */
header{
  position:sticky;top:0;z-index:90;
  background:linear-gradient(180deg, rgba(7,16,24,0.6), rgba(7,16,24,0.25));
  border-bottom:1px solid rgba(255,255,255,0.03);
  backdrop-filter: blur(6px);
  padding:12px 20px;
}
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;gap:12px;align-items:center; font-weight:700}
.logo{
  width:48px;height:48px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  color:#071018;font-family:'Playfair Display',serif;font-weight:800;font-size:16px;
  box-shadow:0 8px 28px rgba(245,158,11,0.12)
}
nav ul{display:flex;gap:18px;list-style:none;margin:0;padding:0}
nav a{color:var(--muted);text-decoration:none;font-weight:600;font-size:15px}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));padding:10px 16px;border-radius:10px;color:#071018;font-weight:700;text-decoration:none;box-shadow:0 10px 30px rgba(245,158,11,0.08)}

/* hero */
.hero{display:grid;grid-template-columns:1fr 420px;gap:28px;align-items:center;padding:64px 0}
.eyebrow{display:inline-block;padding:8px 12px;background:var(--glass);border-radius:999px;color:var(--accent);font-weight:700;font-size:13px;margin-bottom:16px}
h1{font-family:'Playfair Display',serif;font-size:44px;margin:0 0 12px;letter-spacing:-0.02em}
.lead{color:var(--muted);font-size:16px;margin-bottom:18px;max-width:700px}

/* hero card */
.hero-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:18px;padding:18px;box-shadow:0 20px 40px rgba(2,6,23,0.6);
  border:1px solid rgba(255,255,255,0.02);
}
.hero-image{width:100%;height:260px;background-size:cover;background-position:center;border-radius:12px;overflow:hidden;position:relative}
.badge{position:absolute;left:14px;top:14px;background:rgba(2,6,23,0.6);padding:8px 10px;border-radius:10px;font-weight:700;font-size:13px}

/* services */
.services{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:48px 0}
.service{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));padding:20px;border-radius:14px;border:1px solid rgba(255,255,255,0.02)}
.service h4{margin:12px 0 8px}
.icon{width:56px;height:56px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg, rgba(245,158,11,0.12), rgba(255,184,77,0.06));font-weight:700;color:var(--accent)}

/* projects grid */
.projects-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.proj{position:relative;border-radius:12px;overflow:hidden;cursor:pointer}
.proj img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .55s cubic-bezier(.2,.9,.2,1)}
.proj:hover img{transform:scale(1.06)}
.proj .label{position:absolute;left:12px;bottom:12px;background:rgba(2,6,23,0.6);padding:8px 10px;border-radius:10px;font-weight:700}

/* testimonials */
.testimonials{margin:40px 0;background:linear-gradient(90deg, rgba(255,255,255,0.015), rgba(255,255,255,0.01));padding:28px;border-radius:16px;display:flex;align-items:center;gap:20px}
.quote{font-size:18px;font-style:italic;color:var(--muted)}

/* about timeline */
.about{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:40px 0}
.timeline{display:flex;flex-direction:column;gap:14px}
.tcard{background:var(--card);padding:14px;border-radius:12px;border:1px solid rgba(255,255,255,0.02)}
.tcard h5{margin:0 0 6px}

/* contact */
.contact{display:grid;grid-template-columns:1fr 380px;gap:20px;margin:48px 0}
.form{background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(255,255,255,0.01));padding:18px;border-radius:12px}
input,textarea,select{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.04);background:transparent;color:inherit;margin-top:10px}
button[type=submit]{margin-top:12px;padding:12px 16px;border-radius:10px;border:0;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#071018}

/* footer */
footer{padding:28px 0;color:var(--muted);text-align:center;font-size:14px;border-top:1px solid rgba(255,255,255,0.02)}

/* responsive */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;gap:22px}
  .services{grid-template-columns:repeat(2,1fr)}
  .projects-grid{grid-template-columns:repeat(2,1fr)}
  .about{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
  nav ul{display:none}
}
@media (max-width:520px){
  .services{grid-template-columns:1fr}
  .projects-grid{grid-template-columns:1fr}
  h1{font-size:28px}
}

/* small animation helpers */
.fade-up{opacity:0;transform:translateY(8px);transition:all .6s cubic-bezier(.2,.9,.2,1)}
.fade-up.show{opacity:1;transform:none}
.smooth-scroll{scroll-behavior:smooth}

/* --- FUNCTIONAL UPDATES (Bottom of style.css) --- */

/* 1. Hamburger Button Styling */
.menu-toggle {
  display: none; /* Hidden by default on desktop */
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 10px;
  z-index: 101;
}

.hamburger, .hamburger::before, .hamburger::after {
  content: '';
  display: block;
  background: var(--accent);
  height: 2px;
  width: 24px;
  transition: all 0.3s ease;
  position: relative;
}
.hamburger::before { position: absolute; top: -8px; left: 0; }
.hamburger::after { position: absolute; top: 8px; left: 0; }

/* 2. Mobile Logic (Inside the Media Query) */
@media (max-width: 980px) {
  .menu-toggle { 
    display: block; /* Show button on mobile */
  }

  /* The actual navigation drawer */
  nav[aria-label="Primary"] ul {
    display: none; /* Hide the list initially */
    flex-direction: column;
    position: absolute;
    top: 70px; /* Adjust based on your header height */
    left: 0;
    right: 0;
    background: var(--surface);
    padding: 24px;
    border-bottom: 2px solid var(--accent);
    gap: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  }

  /* Functional class triggered by JavaScript */
  nav.is-open ul {
    display: flex;
  }

  /* 3. Responsive Alignment Fixes */
  /* Fixes the "Ready to start" section layout on mobile */
  section[style*="display:flex"] {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  
  .hero-cta {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* Hide the mobile-only list item on desktop */
.mobile-only { display: none; }

@media (max-width: 980px) {
  /* 1. Header Layout */
  .nav.wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 2. Hide the original "Top" CTA on mobile */
  header .nav > .cta { 
    display: none; 
  }

  /* 3. Show the CTA inside the menu */
  .mobile-only { 
    display: block; 
    margin-top: 10px; 
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.05);
  }

  .mobile-only .cta {
    display: block;
    text-align: center;
    width: 100%; /* Makes it stand out as a full-width button */
  }

  /* 4. The Hamburger stays on the far right */
  .menu-toggle { 
    display: block; 
  }

  /* 5. Menu Drawer Styles */
  nav[aria-label="Primary"] ul {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--surface);
    padding: 30px 24px;
    gap: 20px;
    border-bottom: 3px solid var(--accent);
  }

  nav.is-open ul {
    display: flex;
  }
}

@media (max-width: 980px) {
  /* ... previous header code ... */

  /* Fix for the bottom CTA section overlap */
  section[style*="margin:28px 0"] {
    flex-direction: column !important; /* Stack text and button vertically */
    text-align: center;
    padding: 32px 20px !important;
    gap: 24px;
  }

  /* Make the button fill more width on mobile for easier tapping */
  section[style*="margin:28px 0"] .cta {
    display: inline-block;
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 980px) {
  /* Fix the Stat Grid (200+ Projects, etc) */
  .stat-grid {
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px !important;
  }

  .stat {
    flex: 1 1 40%; /* Allows stats to sit 2-by-2 on medium screens */
    text-align: center;
  }

  /* Adjust Lead text width */
  .lead {
    font-size: 15px;
    line-height: 1.6;
  }
}

@media (max-width: 520px) {
  .services {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  
  .service {
    padding: 25px; /* Added extra room for touch */
    text-align: center; /* Often looks cleaner on mobile */
  }

  .icon {
    margin: 0 auto; /* Centers the emoji/icon */
  }
}

/* Layout Logic */
.project-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 40px;
  align-items: start;
}

.sticky-card {
  background: var(--glass);
  padding: 24px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.03);
  position: sticky;
  top: 100px; /* Sticks as you scroll */
}

/* Mobile Fixes */
@media (max-width: 980px) {
  .project-grid {
    grid-template-columns: 1fr; /* Stack into one column */
  }
  
  .project-sidebar {
    order: -1; /* Moves "At a glance" above the description text */
    margin-bottom: 24px;
  }
  
  #proj-title {
    font-size: 2rem !important;
  }
}

/* Add to style.css */
#proj-gallery img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.05);
  transition: transform 0.3s ease;
}

/* On desktop, if you have 2 images, they sit side-by-side */
@media (min-width: 981px) {
  #proj-gallery {
    grid-template-columns: 1fr 1fr;
  }
  /* Make the first image span full width if it's the main shot */
  #proj-gallery img:first-child {
    grid-column: span 2;
  }
}

.project-card-link {
  display: block;
  transition: transform 0.3s ease;
}

.project-card-link:hover {
  transform: translateY(-5px); /* Small lift effect on hover */
}

.proj .label {
  line-height: 1.4; /* Better spacing for two-line titles */
}

/* 1. Ensure the Header is always the top-most layer */
header {
  position: sticky;
  top: 0;
  z-index: 10000; /* Boost this to stay above all main content */
  background: var(--bg); /* Ensure it's not transparent so text doesn't bleed through */
  backdrop-filter: blur(10px);
}

/* 2. Add a 'Safe Zone' to the top of the detail page */
.project-header {
  z-index: 500; /* Boost this to stay above all main content */
  padding-top: 40px; /* Pushes the 'Loading Project' text down from the menu */
  margin-bottom: 24px;
}

/* 3. Ensure the mobile nav drawer sits BELOW the header but ABOVE content */
@media (max-width: 980px) {
  nav[aria-label="Primary"] ul {
    z-index: 998; /* One level below the main header bar */
    top: 100%; /* Sits exactly at the bottom of the header */
  }
}

.ledger-section {
    padding: 60px 0;
}

.ledger-container {
    background: rgba(255, 255, 255, 0.03); /* Subtle contrast against the dark bg */
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 30px;
}

.ledger-header h3 {
    color: var(--accent);
    margin-bottom: 10px;
    font-size: 1.5rem;
}

.ledger-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.ledger-table th {
    text-align: left;
    color: var(--accent);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    padding: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
}

.ledger-table td {
    padding: 18px 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

.ledger-table strong {
    color: #fff;
}

/* Mobile responsive table */
@media (max-width: 768px) {
    .ledger-table thead { display: none; }
    .ledger-table td { display: block; padding: 10px 15px; border: none; }
    .ledger-table tr { border-bottom: 1px solid rgba(255, 255, 255, 0.1); display: block; padding: 10px 0; }
}

.p-case-study .p-header {
  margin-bottom: 20px;
}

.p-tag {
  color: var(--accent);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.p-gallery-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 15px;
  height: 450px;
}

.p-main-img {
  grid-row: span 2;
}

.p-gallery-grid img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
  filter: grayscale(20%);
  transition: 0.3s;
}

.p-gallery-grid img:hover {
  filter: grayscale(0%);
}

.ledger-table {
  width: 100%;
  border-collapse: collapse;
}

.ledger-table td {
  padding: 15px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 14px;
}

@media (max-width: 768px) {
  .p-gallery-grid {
    grid-template-columns: 1fr;
    height: auto;
  }
  .p-main-img { height: 250px; }
  .p-sub-img { height: 150px; }
}

/* The container for all cards */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 30px;
}

/* Remove default link styling */
.p-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

/* The Card */
.p-card {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  overflow: hidden; /* CRITICAL: Stops images from overlapping */
  height: 100%;
  transition: transform 0.3s ease;
}

.p-card:hover {
  transform: translateY(-5px);
  border-color: var(--accent);
}

/* The Image Container */
.p-img-container {
  width: 100%;
  height: 240px; /* Forces a fixed height */
  overflow: hidden;
}

.p-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Forces the image to fill the box without stretching */
  display: block;
}

/* The Text Content */
.p-content {
  padding: 24px;
}

.p-category {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
}

.p-content h3 {
  margin: 10px 0;
  font-size: 1.4rem;
  color: #fff;
}

.p-content p {
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* This ensures the link color is muted by default */
nav ul li a {
    color: var(--muted);
    transition: 0.3s;
}

/* This highlights the link if the URL matches the page */
nav ul li a:hover, 
nav ul li a.active {
    color: var(--accent) !important;
}

#proj-gallery img {
    width: 100%;
    height: 300px; /* Or whatever height looks best */
    object-fit: cover; /* This is the magic line that crops them perfectly */
    margin-bottom: 20px;
}

/* 1. The Container: Use Grid with a 'Flexible' setup */
#proj-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columns on Desktop */
    gap: 20px;
    margin-top: 30px;
}

/* 2. The Images: Ensure they fill the boxes */
#proj-gallery img {
    width: 100%;
    height: 300px;       /* Fixed height for uniformity */
    object-fit: cover;   /* Prevents stretching/distortion */
    border-radius: 4px;
}

/* 3. THE FIX: Media Query for Mobile */
@media (max-width: 768px) {
    #proj-gallery {
        grid-template-columns: 1fr; /* Force 1 column on Mobile */
        gap: 15px;
    }
    
    #proj-gallery img {
        height: auto; /* Allow images to show more detail on mobile if preferred */
        max-height: 400px; 
    }
}

.whatsapp-float {
    position: fixed;
    width: 60px;
    height: 60px;
    bottom: 40px;
    right: 40px;
    background-color: #25d366;
    color: #FFF;
    border-radius: 50px;
    text-align: center;
    font-size: 30px;
    box-shadow: 2px 2px 3px #999;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s;
}
.whatsapp-float:hover {
    transform: scale(1.1);
    color: #fff;
}

.whatsapp-float {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7); }
  70% { transform: scale(1.05); box-shadow: 0 0 0 15px rgba(37, 211, 102, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); }
}

/* Orange Button Hover (The Solid CTA) */
.cta {
    transition: all 0.3s ease; /* Makes the transition smooth, not instant */
    display: inline-block;
}

.cta:hover {
    background-color: #e69500; /* A slightly darker shade of your orange */
    transform: translateY(-3px); /* Subtle "lift" effect */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Adds depth on hover */
}

/* Outline Button Hover (The White Border CTA) */
.cta-outline {
    transition: all 0.3s ease;
    display: inline-block;
}

.cta-outline:hover {
    background-color: #ffffff; /* Fills the button with white */
    color: #000000; /* Changes text to black so it's readable on white */
    transform: translateY(-3px);
}

.tcard {
    /* Use a slightly lighter version of your background to create depth */
    background: rgba(255, 255, 255, 0.03); 
    border: 1px solid rgba(255, 255, 255, 0.1); 
    padding: 30px;
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    backdrop-filter: blur(10px); /* Optional: gives it a premium glass feel */
}

.tcard:hover {
    transform: translateY(-8px);
    background: rgba(255, 255, 255, 0.07);
    border-color: var(--accent); /* Glows with your orange brand color */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4);
}

.tcard h3 {
    color: #ffffff; /* Crisp white headers */
    margin-bottom: 15px;
    font-size: 1.3rem;
    font-family: 'Playfair Display', serif; /* Matching your H1 */
}

.tcard p {
    color: var(--muted) !important; /* Uses your existing gray */
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.tcard a {
    color: #ffffff !important; /* White text for the link */
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    border-bottom: 1px solid var(--accent); /* Orange underline instead of standard */
    align-self: flex-start;
    padding-bottom: 2px;
    transition: all 0.3s ease;
}

.tcard a:hover {
    color: var(--accent) !important;
    border-bottom: 1px solid #ffffff;
}

/* Initial state: Invisible and slightly shifted down */
.hidden-section {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* State after JS triggers: Visible and in original position */
.reveal {
    opacity: 1 !important;
    transform: translateY(0) !important;
}