/* ========================================
     CSS RESET & BASE
  ======================================== */
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
  body{font-family:'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background:#050505;color:#F5F5F5;line-height:1.6;overflow-x:hidden}
  img{max-width:100%;display:block;height:auto}
  a{color:inherit;text-decoration:none}
  ul{list-style:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  :focus-visible{outline:2px solid #C9C9C9;outline-offset:2px}

  /* ========================================
     TYPOGRAPHY (Industrial/Construction Tone)
  ======================================== */
  h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.15;letter-spacing:-0.02em;color:#FFFFFF;text-transform:uppercase}
  h1{font-size:clamp(2.2rem,5vw,3.8rem);letter-spacing:-0.03em}
  h2{font-size:clamp(1.6rem,3.5vw,2.4rem);margin-bottom:1rem}
  h3{font-size:clamp(1.1rem,2vw,1.4rem);margin-bottom:0.6rem}
  p{font-size:clamp(0.95rem,1.2vw,1.05rem);color:#C9C9C9;margin-bottom:1rem;max-width:65ch}
  .lead{font-size:clamp(1.05rem,1.5vw,1.25rem);color:#F5F5F5;font-weight:400}
  .label{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.12em;color:#C9C9C9;margin-bottom:0.5rem;display:block}

  /* ========================================
     UTILITIES
  ======================================== */
  .container{width:100%;max-width:1200px;margin:0 auto;padding:0 1.5rem}
  .section-padding{padding:5rem 0}
  .text-center{text-align:center}
  .flex{display:flex}
  .grid{display:grid}
  .btn{display:inline-flex;align-items:center;justify-content:center;padding:0.9rem 2rem;font-weight:600;font-size:0.9rem;text-transform:uppercase;letter-spacing:0.08em;border-radius:0;transition:all 0.25s ease}
  .btn-primary{background:#FFFFFF;color:#050505}
  .btn-primary:hover{background:#C9C9C9;color:#050505}
  .main-nav .btn-primary{background:#2A2A2A;color:#FFFFFF;border:1px solid #2A2A2A}
  .main-nav .btn-primary:hover{background:#3A3A3A;color:#FFFFFF;border-color:#C9C9C9}
  .btn-outline{background:transparent;color:#FFFFFF;border:2px solid #FFFFFF}
  .btn-outline:hover{background:#FFFFFF;color:#050505}
  .btn-block{width:100%}

  /* ========================================
     HEADER & NAVIGATION
  ======================================== */
  .site-header{position:fixed;top:0;left:0;width:100%;z-index:1000;background:rgba(5,5,5,0.92);backdrop-filter:blur(12px);border-bottom:1px solid #2A2A2A}
  .site-header .container{height:70px;display:flex;align-items:center;justify-content:space-between}
  .brand{display:flex;align-items:center;gap:0.75rem}
  .brand-icon{width:44px;height:44px;border-radius:50%;background:#111111;border:2px solid #2A2A2A;display:grid;place-items:center}
  .brand-icon svg{width:24px;height:24px}
  .brand-text{font-size:1.15rem;font-weight:700;color:#FFFFFF;letter-spacing:0.04em;text-transform:uppercase;white-space:nowrap}
  .brand-text span{color:#C9C9C9;font-weight:400}
  .brand-logo{width:44px;height:44px;border-radius:50%;display:block}
  .brand-logo-footer{width:60px;height:60px;border-radius:50%;display:block}

  .main-nav{display:none}
  .main-nav ul{display:flex;gap:2rem}
  .main-nav a{font-size:0.8rem;font-weight:600;text-transform:uppercase;letter-spacing:0.08em;color:#C9C9C9;transition:color 0.2s}
  .main-nav a:hover{color:#FFFFFF}

  .mobile-toggle{display:flex;flex-direction:column;gap:5px;padding:6px;background:none;border:none}
  .mobile-toggle span{display:block;width:26px;height:2px;background:#FFFFFF;transition:0.3s}
  .mobile-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .mobile-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .mobile-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  .mobile-nav{position:fixed;inset:70px 0 0 0;background:#111111;z-index:999;padding:2rem 1.5rem;transform:translateX(100%);transition:transform 0.3s ease;overflow-y:auto}
  .mobile-nav.active{transform:translateX(0)}
  .mobile-nav a{display:block;padding:1rem 0;font-size:1rem;font-weight:600;text-transform:uppercase;letter-spacing:0.06em;color:#C9C9C9;border-bottom:1px solid #2A2A2A;transition:color 0.2s}
  .mobile-nav a:hover{color:#FFFFFF}

  @media(min-width:900px){
    .main-nav{display:block}
    .mobile-toggle{display:none}
    .mobile-nav{display:none !important}
  }

  /* ========================================
     HERO SECTION
  ======================================== */
  .hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:8rem 1.5rem 5rem;overflow:hidden}
  .hero-bg{position:absolute;inset:0;background:url('../images/hero.jpg') center/cover no-repeat;z-index:1}
  .hero-overlay{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,5,5,0.75) 0%,rgba(5,5,5,0.6) 50%,rgba(5,5,5,0.85) 100%);z-index:2}
  .hero-content{position:relative;z-index:3;max-width:900px}
  .hero .label{margin-bottom:1rem}
  .hero h1{margin-bottom:1.25rem}
  .hero .lead{margin:0 auto 2rem;color:#F5F5F5;max-width:60ch;text-shadow:0 1px 4px rgba(0,0,0,0.5)}
  .hero-buttons{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center}

  /* ========================================
     ABOUT SECTION
  ======================================== */
  .about{background:#111111;border-top:1px solid #2A2A2A}
  .about-grid{display:grid;grid-template-columns:1fr;gap:3rem;align-items:center}
  .about-text{order:2}
  .about-visual{order:1;overflow:hidden;border:1px solid #2A2A2A}
  .about-visual img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;}
  @media(min-width:768px){
    .about-grid{grid-template-columns:1fr 1fr}
    .about-text{order:1}
    .about-visual{order:2}
  }

  /* ========================================
     SERVICES SECTION
  ======================================== */
  .services{background:#050505}
  .services-header{text-align:center;margin-bottom:3rem}
  .services-grid{display:grid;grid-template-columns:1fr;gap:1.25rem}
  .service-card{background:#111111;border:1px solid #2A2A2A;padding:2rem;transition:border-color 0.3s,transform 0.3s}
  .service-card:hover{border-color:#C9C9C9;transform:translateY(-3px)}
  .service-icon{width:48px;height:48px;margin-bottom:1.25rem;color:#C9C9C9}
  .service-card h3{color:#FFFFFF;margin-bottom:0.5rem}
  .service-card p{font-size:0.9rem;color:#C9C9C9;margin:0}
  @media(min-width:640px){.services-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.services-grid{grid-template-columns:repeat(4,1fr)}}

  /* ========================================
     WHY CHOOSE US
  ======================================== */
  .why-us{background:#111111;border-top:1px solid #2A2A2A}
  .why-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}
  .why-card{background:#050505;border:1px solid #2A2A2A;padding:1.75rem}
  .why-card h3{display:flex;align-items:center;gap:0.75rem;font-size:1rem;margin-bottom:0.5rem}
  .why-card .check{width:24px;height:24px;background:#FFFFFF;color:#050505;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:0.8rem;flex-shrink:0}
  .why-card p{font-size:0.9rem;margin:0}
  @media(min-width:640px){.why-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.why-grid{grid-template-columns:repeat(3,1fr)}}

  /* ========================================
     PROJECTS SECTION
  ======================================== */
  .projects{background:#050505}
  .projects-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}
  .project-card{position:relative;background:#111111;border:1px solid #2A2A2A;overflow:hidden}
  .project-image{aspect-ratio:16/9;overflow:hidden}
  .project-image img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease;}
  .project-card:hover .project-image img{transform:scale(1.05)}
  .project-info{padding:1.25rem}
  .project-info h3{font-size:1rem;margin-bottom:0.25rem}
  .project-info span{font-size:0.8rem;color:#C9C9C9;text-transform:uppercase;letter-spacing:0.08em}
  @media(min-width:640px){.projects-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.projects-grid{grid-template-columns:repeat(3,1fr)}}

  /* ========================================
     TESTIMONIALS
  ======================================== */
  .testimonials{background:#111111;border-top:1px solid #2A2A2A}
  .testimonials-grid{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:2rem}
  .testimonial-card{background:#050505;border:1px solid #2A2A2A;padding:2rem;position:relative}
  .testimonial-card::before{content:"\201C";font-size:3rem;color:#2A2A2A;line-height:1;position:absolute;top:1rem;left:1.25rem}
  .testimonial-card blockquote{position:relative;z-index:1;margin-bottom:1.25rem;font-style:italic;color:#F5F5F5}
  .testimonial-author{display:flex;align-items:center;gap:0.75rem}
  .author-avatar{width:40px;height:40px;border-radius:50%;background:#2A2A2A;display:grid;place-items:center;font-size:0.75rem;font-weight:700;color:#C9C9C9}
  .author-name{font-weight:600;color:#FFFFFF;font-size:0.9rem}
  .author-location{font-size:0.8rem;color:#C9C9C9}
  @media(min-width:768px){.testimonials-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.testimonials-grid{grid-template-columns:repeat(3,1fr)}}

  /* ========================================
     PROCESS SECTION
  ======================================== */
  .process{background:#050505}
  .process-steps{display:grid;grid-template-columns:1fr;gap:2rem;margin-top:2rem;position:relative}
  .process-step{text-align:center;padding:1.5rem;position:relative}
  .step-number{width:56px;height:56px;border-radius:50%;background:#FFFFFF;color:#050505;font-weight:700;font-size:1.1rem;display:grid;place-items:center;margin:0 auto 1rem;border:3px solid #2A2A2A}
  .process-step h3{font-size:1.1rem;margin-bottom:0.5rem}
  .process-step p{font-size:0.9rem;margin:0 auto;max-width:30ch}
  @media(min-width:768px){
    .process-steps{grid-template-columns:repeat(4,1fr)}
    .process-steps::before{content:"";position:absolute;top:40px;left:12.5%;right:12.5%;height:2px;background:#2A2A2A}
  }

  /* ========================================
     FAQ SECTION
  ======================================== */
  .faq{background:#111111;border-top:1px solid #2A2A2A}
  .faq-list{max-width:800px;margin:2rem auto 0}
  .faq-item{border-bottom:1px solid #2A2A2A}
  .faq-question{width:100%;display:flex;justify-content:space-between;align-items:center;padding:1.25rem 0;background:none;border:none;color:#FFFFFF;font-weight:600;font-size:1rem;text-align:left;cursor:pointer}
  .faq-question::after{content:"+";font-size:1.4rem;color:#C9C9C9;transition:transform 0.3s}
  .faq-item.active .faq-question::after{content:"-"}
  .faq-answer{max-height:0;overflow:hidden;transition:max-height 0.35s ease,padding 0.35s ease}
  .faq-item.active .faq-answer{max-height:300px;padding-bottom:1.25rem}
  .faq-answer p{color:#C9C9C9;font-size:0.95rem;margin:0}

  /* ========================================
     CONTACT SECTION
  ======================================== */
  .contact{background:#050505;border-top:1px solid #2A2A2A}
  .contact-grid{display:grid;grid-template-columns:1fr;gap:3rem}
  .contact-info h2{margin-bottom:1rem}
  .contact-detail{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem}
  .contact-detail .icon{width:40px;height:40px;background:#111111;border:1px solid #2A2A2A;display:grid;place-items:center;color:#C9C9C9;flex-shrink:0}
  .contact-detail div h4{font-size:0.85rem;text-transform:uppercase;letter-spacing:0.08em;color:#C9C9C9;margin-bottom:0.2rem}
  .contact-detail div p{font-size:0.95rem;color:#FFFFFF;margin:0}
  .contact-detail a{color:#FFFFFF;transition:color 0.2s}
  .contact-detail a:hover{color:#C9C9C9}
  .contact-actions{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
  .contact-actions .btn{gap:0.6rem}
  .contact-actions .btn svg{width:18px;height:18px}
  @media(min-width:768px){.contact-grid{grid-template-columns:1fr 1fr}}

  /* ========================================
     FOOTER
  ======================================== */
  .site-footer{background:#050505;border-top:1px solid #2A2A2A;padding:3rem 0 2rem}
  .footer-grid{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}
  .footer-brand .brand-text{font-size:1rem;margin-bottom:0.75rem;display:block}
  .footer-brand p{font-size:0.85rem;color:#C9C9C9;margin:0}
  .footer-links h4{font-size:0.75rem;text-transform:uppercase;letter-spacing:0.1em;color:#FFFFFF;margin-bottom:1rem}
  .footer-links a{display:block;font-size:0.85rem;color:#C9C9C9;margin-bottom:0.5rem;transition:color 0.2s}
  .footer-links a:hover{color:#FFFFFF}
  .footer-bottom{display:flex;flex-direction:column;gap:1rem;align-items:center;border-top:1px solid #2A2A2A;padding-top:1.5rem}
  .footer-bottom p{font-size:0.8rem;color:#666666;margin:0}
  .social-links{display:flex;gap:1rem}
  .social-links a{width:36px;height:36px;background:#111111;border:1px solid #2A2A2A;display:grid;place-items:center;color:#C9C9C9;transition:all 0.2s}
  .social-links a:hover{background:#2A2A2A;color:#FFFFFF}
  @media(min-width:640px){.footer-grid{grid-template-columns:repeat(2,1fr)}}
  @media(min-width:1024px){.footer-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
  @media(min-width:640px){.footer-bottom{flex-direction:row;justify-content:space-between}}

  /* ========================================
     ACCESSIBILITY HELPERS
  ======================================== */
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}

/* ========================================
   VISIT CARD (CONTACT SECTION)
======================================== */
.visit-card{background:#111111;border:1px solid #2A2A2A;padding:2rem;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
.visit-card h3{font-size:1.2rem;margin-bottom:0.75rem;color:#FFFFFF}
.visit-card p{font-size:0.95rem;color:#C9C9C9;margin-bottom:1.5rem}
.visit-address{font-size:0.85rem;color:#666666;margin:0}

/* ========================================
   CONTACT ACTIONS
======================================== */
.contact-actions{display:flex;flex-direction:column;gap:1rem;margin-top:2rem}
.contact-actions .btn{gap:0.6rem}
.contact-actions .btn svg{width:18px;height:18px}

/* ========================================
   CONTACT DETAIL LINKS
======================================== */
.contact-detail a{color:#FFFFFF;transition:color 0.2s}
.contact-detail a:hover{color:#C9C9C9}