:root {
           --primary-color: #0c2d48;
           /* Deep Navy Blue */
           --secondary-color: #b1c7d6;
           /* Light Blue-Grey */
           --accent-color: #d9534f;
           /* Muted Red for Call-to-Actions */
           --text-color: #333;
           --light-bg: #f4f4f4;
           --header-height: 100px;
           /* Starting height */
           --header-shrink: 70px;
           /* Scrolled height */
       }

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

       html {
           scroll-behavior: smooth;
           width: 100%;
       }

       body {
           font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
           line-height: 1.6;
           color: var(--text-color);
           padding-top: var(--header-height);
           /* CRITICAL FIX: Prevent horizontal scrolling */
           overflow-x: hidden;
           width: 100%;
       }

       a {
           text-decoration: none;
           color: inherit;
       }

       ul {
           list-style: none;
       }

       /* --- Header & Nav --- */
       header {
           background: var(--primary-color);
           color: white;
           position: fixed;
           top: 0;
           left: 0;
           width: 100%;
           z-index: 1000;
           transition: all 0.4s ease;
           height: var(--header-height);
           display: flex;
           align-items: center;
           border-bottom: 0px solid white;
       }

       /* Scrolled State */
       header.scrolled {
           height: var(--header-shrink);
           box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
       }

       .container {
           width: 90%;
           max-width: 1100px;
           margin: auto;
       }

       .navbar {
           display: flex;
           justify-content: space-between;
           align-items: center;
           width: 100%;
           position: relative;
       }

       /* --- SVG Logo Styling --- */
       .logo-svg {
           width: 180px;
           height: auto;
           transition: all 0.5s ease;
           display: block;
       }

       .roof-path {
           fill: none;
           stroke: white;
           stroke-width: 8;
           stroke-linecap: round;
           stroke-linejoin: round;
           transition: d 0.5s ease;
       }

       .chimney {
           fill: white;
           transition: opacity 0.3s;
       }

       .logo-text {
           fill: white;
           font-family: sans-serif;
           font-weight: bold;
           font-size: 24px;
           text-transform: uppercase;
           letter-spacing: 1px;
           opacity: 1;
           transition: opacity 0.3s;
       }

       /* Scrolled Logo States */
       header.scrolled .logo-svg {
           width: 50px;
       }

       header.scrolled .chimney {
           opacity: 0;
       }

       header.scrolled .logo-text {
           opacity: 0;
           display: none;
       }

       /* --- Desktop Navigation --- */
       .nav-links {
           display: flex;
           align-items: center;
       }

       .nav-links a {
           margin-left: 20px;
           font-weight: 500;
           font-size: 1rem;
           transition: color 0.3s;
           white-space: nowrap;
       }

       .nav-links a:hover {
           color: var(--secondary-color);
       }

       .cta-button {
           background: var(--accent-color);
           color: white;
           padding: 10px 20px;
           border-radius: 5px;
           font-weight: bold;
       }

       .cta-button:hover {
           background-color: #c9302c;
       }

       /* --- Hamburger Menu (Hidden on Desktop) --- */
       .hamburger {
           display: none;
           cursor: pointer;
           flex-direction: column;
           gap: 5px;
           z-index: 1001;
       }

       .hamburger div {
           width: 30px;
           height: 3px;
           background-color: white;
           transition: 0.4s;
       }

       .sticky-call-btn {
           display: none;
           /* Hidden by default (on desktop) */
           position: fixed;
           bottom: 0;
           left: 0;
           width: 100%;
           background-color: var(--accent-color);
           /* Uses your Red accent color */
           color: white;
           text-align: center;
           padding: 15px;
           font-size: 1.2rem;
           font-weight: bold;
           z-index: 9999;
           /* Ensures it sits on top of everything */
           box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.2);
           text-decoration: none;
           transition: background-color 0.3s;
       }

       .sticky-call-btn:hover {
           background-color: #c9302c;
           /* Slightly darker red on tap */
       }

       .sticky-call-btn span {
           margin-right: 10px;
       }

       /* Show only on Mobile */
       @media (max-width: 768px) {
           .sticky-call-btn {
               display: block;
               /* Show the button */
           }

           /* Add a little padding to the bottom of the body so the button doesn't cover the footer text */
           body {
               padding-bottom: 60px;
           }
       }

       /* --- Mobile Styles --- */
       @media (max-width: 768px) {
           .hamburger {
               display: flex;
           }

           /* Adjust Logo size for mobile */
           .logo-svg {
               width: 140px;
           }

           /* Mobile Menu Container */
           .nav-links {
               position: absolute;
               top: 100%;
               /* Position directly below header */
               left: 0;
               width: 100%;
               background-color: var(--primary-color);
               flex-direction: column;
               align-items: center;
               max-height: 0;
               overflow: hidden;
               transition: max-height 0.4s ease-in-out;
               box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
           }

           .nav-links.mobile-menu-active {
               max-height: 400px;
               padding-bottom: 20px;
               border-bottom: 4px solid var(--accent-color);
           }

           .nav-links li {
               margin: 15px 0;
               width: 100%;
               text-align: center;
           }

           .nav-links a {
               margin-left: 0;
               font-size: 1.2rem;
               display: block;
           }

           .hero h1 {
               font-size: 2rem;
           }
       }

       /* --- Page Sections --- */
       .hero {
           background-color: var(--secondary-color);
           padding: 100px 0;
           text-align: center;
           background-image: linear-gradient(rgba(12, 45, 72, 0.7), rgba(12, 45, 72, 0.7)), url('images/slate-roof-hero.jpg');

           background-size: cover;
           background-position: center;
           color: white;
       }

       .hero h1 {
           font-size: 3rem;
           margin-bottom: 1rem;
       }

       .hero p {
           font-size: 1.2rem;
           margin-bottom: 2rem;
       }

       .services {
           padding: 60px 0;
           background: #fff;
       }

       .section-title {
           text-align: center;
           margin-bottom: 40px;
           color: var(--primary-color);
       }

       /* FIX: Ensure grid doesn't force width on small screens */
       .services-grid {
           display: grid;
           grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
           gap: 20px;
       }

       .service-card {
           background: var(--light-bg);
           padding: 20px;
           text-align: center;
           border-radius: 8px;
           transition: 0.3s;
       }

       .service-card:hover {
           transform: translateY(-5px);
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
       }

       .service-card h3 {
           color: var(--primary-color);
           margin-bottom: 10px;
       }

       .about {
           padding: 60px 0;
           background: var(--light-bg);
           text-align: center;
       }

       .contact {
           padding: 60px 0;
       }

       .contact-container {
           display: flex;
           flex-wrap: wrap;
           justify-content: space-between;
           gap: 40px;
       }

       /* FIX: Removed fixed min-width for mobile, set to 100% via media query below */
       .contact-info,
       .contact-form {
           flex: 1;
       }

       input,
       textarea {
           width: 100%;
           padding: 10px;
           margin-bottom: 15px;
           border: 1px solid #ccc;
           border-radius: 4px;
           font-family: inherit;
       }

       button[type="submit"] {
           background: var(--primary-color);
           color: white;
           padding: 10px 20px;
           border: none;
           cursor: pointer;
           font-size: 1rem;
           border-radius: 4px;
           width: 100%;
       }

       button[type="submit"]:hover {
           background: #0a2339;
       }

       /* Media Query for Contact Form sizing on mobile */
       @media (max-width: 768px) {

           .contact-info,
           .contact-form {
               flex-basis: 100%;
               min-width: 100%;
               /* Forces full width on mobile so it doesn't overflow */
           }

           .services-grid {
               grid-template-columns: 1fr;
               /* Single column on mobile */
           }
       }

       footer {
           background: #222;
           color: #fff;
           text-align: center;
           padding: 20px 0;
           margin-top: auto;
       }

       /* --- Tabbed Services Section --- */

       .tabs-container {
           display: flex;
           justify-content: center;
           flex-wrap: wrap;
           gap: 15px;
           margin-bottom: 30px;
       }

       .tab-btn {
           background-color: white;
           border: 2px solid var(--primary-color);
           /* Navy Blue border */
           color: var(--primary-color);
           padding: 12px 25px;
           border-radius: 50px;
           /* Makes them pill-shaped */
           font-size: 1rem;
           font-weight: bold;
           cursor: pointer;
           transition: all 0.3s ease;
       }

       /* Hover state */
       .tab-btn:hover {
           background-color: #eef4f8;
           transform: translateY(-2px);
       }

       /* Active State (The selected tab) */
       .tab-btn.active {
           background-color: var(--primary-color);
           /* Fill with Navy Blue */
           color: white;
           box-shadow: 0 4px 10px rgba(12, 45, 72, 0.4);
       }

       /* The Grey Content Box */
       .tab-content-wrapper {
           background-color: #5d666d;
           /* Dark Grey background like your image */
           color: white;
           border-radius: 15px;
           overflow: hidden;
           /* Keeps image inside rounded corners */
           box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
           min-height: 400px;
       }

       /* Individual Content Panels (Hidden by default) */
       .tab-content {
           display: none;
           /* Hidden */
           display: flex;
           /* Flex is used when active, handled by JS */
           flex-direction: row;
           opacity: 0;
           transition: opacity 0.4s ease-in;
       }

       /* The 'Active' class makes it visible */
       .tab-content.active {
           display: flex;
           /* Show it */
           opacity: 1;
           /* Fade in */
           animation: fadeIn 0.5s ease-in-out;
       }

       @keyframes fadeIn {
           from {
               opacity: 0;
               transform: translateY(10px);
           }

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

       .content-text {
           flex: 1;
           padding: 40px;
       }

       .content-text h3 {
           font-size: 2rem;
           margin-bottom: 10px;
           color: white;
       }

       .content-text h4 {
           font-size: 0.9rem;
           text-transform: uppercase;
           letter-spacing: 1px;
           margin-bottom: 20px;
           color: #b1c7d6;
           /* Light blue accent text */
           font-weight: 700;
       }

       .content-text p {
           margin-bottom: 20px;
           line-height: 1.8;
           color: #f0f0f0;
       }

       .service-list {
           list-style: none;
           margin-top: 20px;
       }

       .service-list li {
           position: relative;
           padding-left: 30px;
           margin-bottom: 12px;
           font-weight: 500;
       }

       /* Custom Bullet Point (Arrow) */
       .service-list li::before {
           content: '➤';
           /* You can also use an SVG here */
           position: absolute;
           left: 0;
           color: var(--secondary-color);
           /* Light Blue arrow */
           font-size: 0.8rem;
           top: 4px;
       }

       .content-image {
           flex: 1;
           min-height: 300px;
       }

       .content-image img {
           width: 100%;
           height: 100%;
           object-fit: cover;
           /* Ensures image covers the box without stretching */
           display: block;
       }

       /* Mobile Responsiveness for Tabs */
       @media (max-width: 768px) {
           .tab-content.active {
               flex-direction: column-reverse;
               /* Stack text below image on mobile */
           }

           .content-image {
               height: 250px;
           }

           .content-text {
               padding: 30px 20px;
           }

           .content-text h3 {
               font-size: 1.5rem;
           }

           .tab-btn {
               padding: 10px 15px;
               font-size: 0.9rem;
               flex: 1 1 auto;
               /* Allow buttons to shrink/grow */
           }
       }

       /* --- Process / How It Works Section --- */

       .process-container {
           display: flex;
           justify-content: space-between;
           align-items: flex-start;
           gap: 20px;
           margin-top: 40px;
           position: relative;
       }

       .process-step {
           flex: 1;
           background: white;
           padding: 30px 20px;
           border-radius: 10px;
           box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
           transition: transform 0.3s ease;
           z-index: 2;
           /* Sits above lines if we add them */
       }

       .process-step:hover {
           transform: translateY(-5px);
           box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
       }

       .step-icon {
           width: 50px;
           height: 50px;
           background-color: var(--accent-color);
           /* Red */
           color: white;
           font-size: 1.5rem;
           font-weight: bold;
           border-radius: 50%;
           display: flex;
           align-items: center;
           justify-content: center;
           margin: 0 auto 20px auto;
           /* Centered */
           box-shadow: 0 4px 10px rgba(217, 83, 79, 0.4);
       }

       .process-step h3 {
           color: var(--primary-color);
           margin-bottom: 15px;
           font-size: 1.3rem;
       }

       .process-step p {
           font-size: 0.95rem;
           color: #666;
       }

       .step-arrow {
           font-size: 2rem;
           color: var(--secondary-color);
           align-self: center;
           padding-bottom: 20px;
           /* Adjust alignment */
           font-weight: bold;
       }

       /* Mobile Responsiveness for Process */
       @media (max-width: 768px) {
           .process-container {
               flex-direction: column;
               gap: 30px;
           }

           .step-arrow {
               transform: rotate(90deg);
               /* Point arrow down */
               margin: -10px 0;
               /* Tighten gap */
           }

           .process-step {
               width: 100%;
           }
       }