html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
}

html{box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}

a {
  text-decoration: none;
}



/* Base setup */
.fa-solid {
  font-family: 'Font Awesome 7 Free';
  font-weight: 900;
    font-style: normal !important; /* This forces it to stand up straight */
  display: inline-block;
}

/* The star definition */
.fa-star::before {
  content: "\f005";
}


.call-button
 {
  
  text-decoration:none !important;
   font-weight: 500; /* This makes the text bold */
  background-color: rgb(241, 241, 245);
  color: white;
  border: 2px solid white;
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between icon and text */
  transition: opacity 0.3s;
    /* Adds a safety zone so buttons aren't too close together */
  margin: 8px 0;      
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


a.call-button-white {
  background-color: rgb(238, 238, 243);
  text-decoration: none !important;
  font-weight: 700;
  font-size: 26px;
    cursor: pointer;
  
  /* 1. Fix the character spacing */
  letter-spacing: -0.5px;      /* Pulls the letters closer together */
   gap: 6px; /* space between icon and text */
  
  /* 2.  padding */
  padding: 14px 20px;           /
  /* 3. Ensure it behaves like a button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;              /* Prevents extra height from line spacing */
  
  /* Your existing styles */
  background-color: transparent;
  color:  rgb(52, 93, 148);           
   border: 2px solid rgb(52, 93, 148);
  border-radius: 7px;
}


.call-button i {
  font-size: 1.2rem; /* icon size */

}

/* Optional hover effect */
.call-button:hover {
  background-color: rgb(32, 61, 141);
  color: #f8f9fa; /* or your blue background color */
  opacity: 0.8;
}

.call-button-white {
  background-color: rgb(238, 238, 243);
  color: white;
  border: 2px solid rgb(52, 93, 148);
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between icon and text */
  transition: opacity 0.3s;
}

.call-button-white i {
  font-size: 1.2rem; /* icon size */
}

/* Optional hover effect */
.call-button-white:hover {
  background-color: rgb(170, 170, 175);
  color: #0053ba; /* or your blue background color */
  opacity: 0.8;
}

a.schedule-button {
  background-color:rgb(71, 143, 83);
  text-decoration: none !important;
  font-weight: 500;
  font-size: 26px;
    cursor: pointer;
    margin: 3px;
  
  /* 1. Fix the character spacing */
  letter-spacing: 0.5px;      
   gap: 6px; /* space between icon and text */
  
  /* 2.  padding */
  padding: 14px 20px;           
  /* 3. Ensure it behaves like a button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;              /* Prevents extra height from line spacing */
  
  /* Your existing styles */
  color:  rgb(255, 255, 255);           
     border: 2px solid rgb(41, 121, 59)1);
  border-radius: 7px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

a.call-button {
   background-color: rgb(241, 241, 245);
  text-decoration: none !important;
  font-weight: 700;
  font-size: 26px;
    cursor: pointer;
      border: 2px solid rgb(52, 93, 148);
    
  
  /* 1. Fix the character spacing */
  letter-spacing: 0.5px;      
   gap: 6px; /* space between icon and text */
  
  /* 2.  padding */
  padding: 15px 15px;           /
  /* 3. Ensure it behaves like a button */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;              /* Prevents extra height from line spacing */
  
  /* Your existing styles */
  color:  rgb(49, 73, 126);           
     border: 4px solid rgb(90, 160, 43);
  border-radius: 7px;
}

.schedule-button {
   color: #ffffff !important; /* Forces the text to pure white for better contrast */
  background-color: rgb(72, 136, 88);
    border: 2px solid rgb(70, 91, 114);
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 1rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between icon and text */
  transition: opacity 0.3s;
}

.schedule-button i {
  font-size: 1.2rem; /* icon size */
}

/* Optional hover effect */
.schedule-button:hover {
  background-color: rgb(32, 61, 141);
  color: #f8f9fa; /* or your blue background color */
  opacity: 0.8;
}



.standard-button {
   color: #ffffff !important; /* Forces the text to pure white for better contrast */
  background-color: rgb(40, 58, 87);
    border: 2px solid rgb(73, 146, 76);
  border-radius: 6px;
  padding: 8px 18px;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 6px; /* space between icon and text */
  transition: opacity 0.3s;
}


  /* Google Review Graphics */
  .feature-google-rating-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 18px;
    background-color: #ffffff;
    border: 1px solid #e2e8f0; /* Ultra-thin gray profile border tracking */
    border-radius: 100px; /* Forces the exact symmetrical pill shape layout */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04); /* Soft depth baseline layer */
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  /* Micro-interaction jump transform on pointer focus hover states */
  .feature-google-rating-badge:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
  }

  /* Official geometric canvas positioning frame */
  .feature-google-rating-logo-frame {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
  }

  .feature-google-rating-svg {
    width: 100%;
    height: 100%;
  }

  /* Star track formatting map row rules */
  .feature-google-rating-stars-track {
    display: flex;
    align-items: center;
    gap: 3px; /* Clean internal alignment separating vectors */
  }

  /* Vector parameters for the five-star metrics */
  .feature-google-rating-star {
    width: 16px;
    height: 16px;
    color: #fbbc05; /* Official Google Review rating gold hex tone */
    flex-shrink: 0;
  }

  /* Score text typography string tracker */
  .feature-google-rating-number {
    font-size: 1.05rem;
    font-weight: 700;
    color: #334155; /* Sharp contrast dark slate */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1;
    margin-left: 1px;
  }




article,aside,details,figcaption,figure,footer,main,menu,nav,section{display:block}summary{display:list-item}


audio,canvas,progress,video{display:inline-block}progress{vertical-align:baseline}
audio:not([controls]){display:none;height:0}[hidden],template{display:none}
a{background-color:transparent}a:active,a:hover{outline-width:0}

abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}
b,strong{font-weight:bolder}dfn{font-style:italic}mark{background:#ff0;color:#000}

small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}


sub{bottom:-0.25em}sup{top:-0.5em}figure{margin:1em 40px}img{border-style:none}
code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}
hr{box-sizing:border-box;height:0;overflow:visible}


button,input,select,textarea,optgroup{font:inherit;margin:0}optgroup{font-weight:bold}
button,input{overflow:visible}button,select{text-transform:none}
button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}
button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}



fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:.35em .625em .75em}


legend{color:inherit;display:table;max-width:100%;padding:0;white-space:normal}textarea{overflow:auto}
[type=checkbox],[type=radio]{padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}


/* End extract */


.h5-f12{font-size:12px!important}
.h5-f14{font-size:14px!important}
.h5-f15{font-size:15px!important}
.h5-f16{font-size:16px!important}
.h5-f18{font-size:18px!important}

.h5-f48{font-size:48px!important}
.h5-f45{font-size:45px!important}ture2
.h5-f42{font-size:42px!important}
.h5-f40{font-size:40px!important}
.h5-f38{font-size:38px!important}
.h5-f36{font-size:36px!important}
.h5-f32{font-size:32px!important}
.h5-f30{font-size:30px!important}
.h5-f28{font-size:28px!important}
.h5-f26{font-size:26px!important}
.h5-f23{font-size:23px!important}
.h5-f20{font-size:20px!important}


  /* ==========================================================================
       COMPACT SINGLE-ROW GRID SYSTEM
       ========================================================================== */

        :root {
   
      /* SVG & Brand Colors (Your custom Gray-Steel Blue) */
      --brand-steel-blue: #3077a7;
      --svg-artwork-color: #ffffff;
      --svg-bg-fill: var(--brand-steel-blue);
      --svg-border-stroke: var(--brand-steel-blue);

      /* Hover States */
      --hover-svg-artwork-color: var(--brand-steel-blue);
      --hover-svg-bg-fill: #f1f7fa;
      --hover-svg-border-stroke: #e6e9ee;
   
            --bg-color: #ffffff;
            --bg2-color: #ffffff;
            --card2-bg: #f2f5f7;
            --card-bg: rgba(78, 100, 155, 0.85); /* Slightly transparent to let back image subtly peak through */
            --text-white: #f4f6f8;
            --accent-blue: #c9e0f7;
            --accent-bluegrey: #1d4f7a;
            --accent-cyan: #c5e0f1;
             --accent-orange: #db9e42;
              --accent-orange2: #b38033;
            --text-main: #416991;
            --text-muted: #e3e9ee;
            --border-color: #6887c0;
            --border-color-blue: #637da0;
            --border-color-orange: #c27a29;
            --border-color-grey: #575f6e;
            --border-color-purple: #7555b1;
   

    }

    .h5-text-blue-grey,.h5-hover-text-blue-grey:hover,.h5-text-blue-gray,.h5-hover-text-blue-gray:hover{color:#4b729e!important}


  .featurecontainer {
       max-width: 1400px;
      background: #f9faf9;
       
      margin: 0 auto;
       padding:20px;
      border-radius: 20px;
       box-shadow: 0 20px 50px rgba(206, 217, 228, 0.836);
    }

    .sampling-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
      gap: 10px;
   
    }

    .sample-card, 
    .sample-card-blue,
       .sample-card-orange,
       .sample-card-grey, 
    .sample-card-purple
    {
      background: var(--card2-bg);
      border-radius: 12px;
      padding: 20px 20px;
      flex-direction: column;
      cursor: pointer;
      position: relative;
      transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s, border-color 0.25s;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

.samplingfeature-tagline {
  display: block;
  text-align: center;
  font-size: 1.7rem;
  font-weight: 700;
  color: #69b14cec;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 18px;
}


       .sample-card-blue {
      background: var(--card2-bg);
      border: 4px solid var(--border-color-blue);
    }

      .sample-card-orange {
      background: var(--card2-bg);
      border: 4px solid var(--border-color-orange);
    }

       .sample-card-grey {
      background: var(--card2-bg);
      border: 4px solid var(--border-color-grey);
    }

      .sample-card-purple {
      background: var(--card2-bg);
      border: 4px solid var(--border-color-purple);
    }


    /* Combined Card Lift and High-to-Low Icon Inversion Trigger */
    .sample-card:hover,
     .sample-card-blue:hover,
     .sample-card-orange:hover, 
       .sample-card-grey:hover, 
    .sample-card-purple:hover 
    {
      transform: translateY(-5px);
      box-shadow: 0 16px 20px -6px rgba(36, 80, 121, 0.548);
      border-color: #5c9e3e;
        background: #f7f0e4;
      --svg-artwork-color: var(--hover-svg-artwork-color);
      --svg-bg-fill: var(--hover-svg-bg-fill);
      --svg-border-stroke: var(--hover-svg-border-stroke);
    }

    .card-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      border-bottom: 1px solid var(--border-color);
      padding-bottom: 16px;
      margin-bottom: 16px;
    }

    .mold-icon-container {
      width: 76px;
      height: 76px;
      margin-bottom: 12px;
    }

    /* Embedded Vector Target Hooks */
    .bg-circle { 
      fill: var(--svg-bg-fill); 
      stroke: var(--svg-border-stroke); 
      stroke-width: 1px; 
      transition: fill 0.25s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.25s;
    }

    .stroke-layer {
      stroke: var(--svg-artwork-color);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .fill-layer {
      fill: var(--svg-artwork-color);
      stroke: none;
      transition: fill 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .card-title {
      font-size: 2rem;
      color:#5a8d46;
      font-weight: 700;
      margin: 0;
    }

    .info2-section {
      margin-bottom: 16px;
    }

    .info2-section:last-child {
      margin-bottom: 0;
    }

    .info2-label {
      font-size: 1.5rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--brand-steel-blue);
      margin-bottom: 6px;
    }

    .info2-text {
      font-size: 1.2rem;
      line-height: 1.3;
      margin: 0;
    }

     .orangeaccent {
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--accent-orange);
      margin-bottom: 6px;
    }

         .orangeaccent2 {
      font-size: 1.2rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: var(--accent-orange2);
      margin-bottom: 6px;
    }

 /* Base CSS Fade-In Animation keyframe setup */
  @keyframes featureFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }

/* Our Process Section Header Styling */
  .feature-process-main-title {
    text-align: center;
    font-size: 3rem; 
    font-weight: 800;
    color: #4a75a0;
    margin: 10px auto 24px auto;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Layout Container */
  .feature-process-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center; 
    gap: 10px; 
    max-width: 1400px;
    margin: 0 auto;
    padding: 10px 12px 10px 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

    .processfeature-tagline {
  display: block;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #637286ec;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}


  /* Card Structural Base */
  .feature-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 8px; 
    box-sizing: border-box;
    cursor: pointer;
     box-shadow: 0 16px 28px rgba(86, 101, 117, 0.219);
    
    width: 100%;
    max-width: 320px; 
    
    opacity: 0; 
    animation: featureFadeIn 0.8s ease forwards;
    transition: transform 0.25s cubic-bezier(0.2, 0.4, 0.2, 1), box-shadow 0.25s ease;
  }

  /* Staggered entry timing for cards */
  .feature-card:nth-child(1) { animation-delay: 0.1s; }
  .feature-card:nth-child(2) { animation-delay: 0.2s; }
  .feature-card:nth-child(3) { animation-delay: 0.3s; }
  .feature-card:nth-child(4) { animation-delay: 0.4s; }

  /* Interactive Hover Jump */
  .feature-card:hover {
    transform: translateY(-12px); 
    box-shadow: 0 16px 28px rgba(0, 0, 0, 0.12);
  }

  /* 4px green circle border framework */
  .feature-card-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px; 
    height: 72px;
    border: 4px solid #5a9144; 
    border-radius: 50%;
    margin-bottom: 20px;
    box-sizing: border-box;
    background-color: transparent;
    color: #4a75a0; 
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  /* High Contrast Icon Trigger */
  .feature-card:hover .feature-card-icon-wrapper {
    background-color: #5a9144;
    border-color: #5a9144;
    color: #ffffff; 
  }

  .feature-card-icon {
    width: 32px; 
    height: 32px;
    flex-shrink: 0;
  }

  /* Square Photo Frame Assembly */
  .feature-card-image-container {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1; 
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 16px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
  }

  .feature-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Card Title Overlay Banner */
  .feature-card-title {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    background-color: #4a773c; 
    color: #ffffff;
    margin: 0;
    padding: 10px 10px; 
    font-size: 1.27rem; 
    font-weight: 600; 
    text-align: center;
    letter-spacing: 0.2px;
    transition: background-color 0.25s ease;
  }

  /* Interactive Hover Effect */
  .feature-card:hover .feature-card-title {
    background-color: #4a75a0;
  }

  /* Body Content Framework */
  .feature-card-description {
    font-size: 1.2rem; 
    line-height: 1.65;
    color: #444444; 
    text-align: left;
    margin: 0;
    padding: 0 4px;
    width: 100%; 
  }

  /* Added custom highlight namespace to match keywords to the 'OUR PROCESS' slate-blue tone */
  .feature-card-highlight {
    color: #4a75a0; 
    font-weight: 700;
  }

  /* Responsive Display Engine */
  @media (max-width: 1100px) {
    .feature-process-main-title {
      font-size: 2.2rem;
    }
    .feature-process-container {
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
    }
    .feature-card {
      max-width: 340px; 
    }
  }
  @media (max-width: 600px) {
    .feature-process-main-title {
      font-size: 2rem;
      margin: 20px auto 15px auto;
    }
    .feature-process-container {
      grid-template-columns: 1fr;
      gap: 12px;
      padding: 10px 12px;
    }
    .feature-card {
      max-width: 340px; 
    }
  }




    /* 2nd Feature Section Header Alignment Block */
  .secondfeature-main-title {
    text-align: center;
    font-size: 3rem; 
    font-weight: 800;
    color: #497aaa; /* Signature Corporate Slate Blue */

    margin: 60px auto 24px auto;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Base Component Layout Chassis mapping up to your 1400px maximum */
  .secondfeature-section-wrapper {
    display: flex;
     background-color: #ffffff;
    align-items: center;
    justify-content: space-between;
    gap: 20px; 
    max-width: 1400px;
    margin: 0 auto 40px auto;
    padding: 0 12px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Left Side Display Canvas */
  .secondfeature-visual-panel {
    flex: 1.1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }

  /* Hero Image - Capped at max 600px with slightly rounded corners */
  .secondfeature-hero-image {
    width: 100%;
    height: auto;
    max-width: 600px; /* Securely capped at 600px maximum size */
    border-radius: 8px; /* Elegant, slightly rounded corners applied here */
    object-fit: contain;
  }

  /* Right Side Component Column Base Track */
  .secondfeature-content-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px; 
  }

  /* Individual Block Card Formatting Framework (Default State) */
  .secondfeature-row-item {
    display: flex;
    align-items: flex-start;
    gap: 5px; 
    padding: 1px;
    border-radius: 12px;
    background-color: transparent;
    border: 1px solid transparent;
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1), background-color 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
  }

  /* Light Green Highlight Theme Integration Settings */
  .secondfeature-row-item:hover {
    background-color: #e8f5e9; /* Light green signature background fill overlay */
    transform: translateX(6px) scale(1.005);
    box-shadow: 0 8px 24px rgba(74, 119, 60, 0.04);
  }

  /* Icon Column Bounding Box */
  .secondfeature-icon-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2px;
    flex-shrink: 0;
  }

  /* Enhanced Heavy Stroke Vector Metrics */
  .secondfeature-vector-graphic {
    width: 40px;   
    height: 40px;  
    color: #719c68; /* Balanced slate neutral grey default color tracking */
    transition: color 0.25s ease;
  }

  /* Switches vector line colors directly to your core brand accent green */
  .secondfeature-row-item:hover .secondfeature-vector-graphic {
    color: #5a9144; 
  }

  /* Text Tracking Column Frame */
  .secondfeature-text-column {
    display: flex;
    flex-direction: column;
    gap: 4px; 
  }

  /* Card Primary Header Typography Element */
  .secondfeature-row-headline {
    margin: 0;
    font-size: 1.79rem;
    font-weight: 600;
    color: #404f64; 
    line-height: 1.3;
    letter-spacing: -0.2px;
    transition: color 0.25s ease;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Accents header texts forward into deep charcoal-forest green under focus */
  .secondfeature-row-item:hover .secondfeature-row-headline {
    color: #2e5420; 
  }

  .secondfeature-arrow {
    display: inline-block;
    margin-left: 4px;
    font-weight: 400;
    opacity: 0.8;
    transition: transform 0.25s ease;
  }

  .secondfeature-row-item:hover .secondfeature-arrow {
    transform: translateX(6px);
  }

  /* Sub-headline Text Frame System */
  .secondfeature-row-subheadline {
    margin: 0 0 4px 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: #3a75b1; /* Stays signature corporate blue by default */
    line-height: 1.4;
    transition: color 0.25s ease;
        font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Transits keywords cleanly to bright core brand green over active canvas panels */
  .secondfeature-row-item:hover .secondfeature-row-subheadline {
    color: #4a773c; 
  }

  /* Body Copy/Paragraph Typography Content Layout Framework */
  .secondfeature-row-copy {
    margin: 0;
    font-size: 1.2rem; 
    line-height: 1.65;
    color: #3d3e41; 
    transition: color 0.25s ease;
  }

  /* Gently darkens copy descriptions during hover fills for accessibility targets */
  .secondfeature-row-item:hover .secondfeature-row-copy {
    color: #2d3748; 
  }



  /* Responsive Multi-Device Display Breakpoint Engine */
  @media (max-width: 1024px) {
    .secondfeature-main-title {
      font-size: 2.3rem;
    }
    
    .secondfeature-section-wrapper {
      flex-direction: column;
      gap: 32px;
      margin: 40px auto;
    }

    .secondfeature-visual-panel,
    .secondfeature-content-panel {
      width: 100%;
      flex: none;
    }

    .secondfeature-hero-image {
      max-width: 460px;
    }
  }

  @media (max-width: 640px) {
    .secondfeature-main-title {
      font-size: 1.8rem;
    }

    .secondfeature-hero-image {
      max-width: 320px;
    }

    .secondfeature-row-item {
      flex-direction: column;
      gap: 14px;
      padding: 20px;
    }

    /* Shift the lift-jump direction upward safely on single columns mobile grids */
    .secondfeature-row-item:hover {
      transform: translateY(-4px); 
    }

    .secondfeature-row-headline {
      font-size: 1.2rem;
    }

    .secondfeature-row-subheadline {
      font-size: 1rem;
    }

    .secondfeature-row-copy {
      font-size: 1rem;
    }
  }

    /* Certs Root structural container mapping up to a max-width of 1400px */
  .cert-badge-section-wrapper {
    max-width: 1400px;
    margin: 60px auto;
    padding: 40px 24px;
    box-sizing: border-box;
    background-color: #e5e7eb; /* Soft neutral background frame overlay to ground the section */
    border-radius: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Top text positioning frame system */
  .cert-badge-info-header {
    text-align: center;
    max-width: 950px;
    margin: 0 auto 36px auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* Typography hierarchies tailored exactly to your text strings configuration */
  .cert-badge-main-headline {
    margin: 0;
    font-size: 1.15rem;
    color: #1e293b;
    line-height: 1.4;
    letter-spacing: 0.1px;
  }

  .cert-badge-serial {
    color: #475569;
    font-weight: 500;
    margin-left: 4px;
  }

  .cert-badge-sub-headline {
    margin: 4px 0 0 0;
    font-size: 1.05rem;
    color: #334155;
    line-height: 1.5;
  }

  .cert-badge-meta-details {
    margin: 0 0 6px 0;
    font-size: 0.95rem;
    color: #64748b; /* Lighter clean gray tone for secondary certificate string tags */
    font-weight: 500;
    letter-spacing: 0.2px;
  }

  /* Bottom horizontal asset alignment engine */
  .cert-badge-logos-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 32px; /* Uniform horizontal gap distribution separating logos */
    flex-wrap: wrap;
    margin-top: 12px;
  }

  /* Flexible graphic image container tracking nodes */
  .cert-badge-image-container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 110px; /* Bounding safety canvas height parameter */
    transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  /* Clean micro-interaction when badges are focused/hovered */
  .cert-badge-image-container:hover {
    transform: scale(1.05);
  }

  .cert-badge-asset-img {
    height: 100%;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.04)); /* Soft depth baseline anchors images neatly */
  }

  /* Responsive Display Rules */
  @media (max-width: 768px) {
    .cert-badge-section-wrapper {
      padding: 30px 16px;
      margin: 40px auto;
    }

    .cert-badge-main-headline {
      font-size: 1.05rem;
    }

    .cert-badge-sub-headline {
      font-size: 0.98rem;
    }

    .cert-badge-meta-details {
      font-size: 0.9rem;
    }

    .cert-badge-logos-row {
      gap: 20px;
    }

    .cert-badge-image-container {
      height: 90px; /* Shifts slightly more compact on smaller tablet screens */
    }
  }

  @media (max-width: 480px) {
    .cert-badge-logos-row {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2x2 grid pattern layout map for vertical mobile phone screens */
      gap: 24px 16px;
      justify-items: center;
    }

    .cert-badge-image-container {
      height: 80px;
    }
  }

  /* Information Banner Frame Layout */
  .secondfeature-alert-banner {
    max-width: 1400px;
    margin: 0 auto 16px auto; /* 24px bottom space matches the section grid tracking gaps */
    padding: 30px 100px;
    background-color: #263f5fde; /* Soft green alert tint perfectly matching the home grid styles */
    border-left: 25px solid #d4a746; /* Clean solid brand green accent flag */
    border-radius: 4px 8px 8px 4px;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }

  /* Text Typography System */
  .secondfeature-alert-text {
    margin: 0;
    font-size: 1.7rem; /* Marginally punchier than standard body description sizes */
    line-height: 1.6;
    color: #dee2e9; /* Dark accessibility-focused neutral charcoal copy */
  }

  /* High Contrast Flag Text Indicator badge */
  .secondfeature-alert-badge {
    color: #d3b553; /* Linked directly to your primary dark green brand accent */
    font-weight: 700;
    margin-right: 4px;
    letter-spacing: 0.1px;
  }

  /* Responsive Display adjustments */
  @media (max-width: 1024px) {
    .secondfeature-alert-banner {
      max-width: calc(100% - 40px); /* Keeps standard outer padding alignments clean on tablet screens */
      padding: 14px 20px;
      margin-bottom: 12px;
    }
    
    .secondfeature-alert-text {
      font-size: 1.05rem;
    }
  }

  @media (max-width: 640px) {
    .secondfeature-alert-banner {
      max-width: calc(100% - 32px);
      padding: 12px 16px;
      border-left-width: 3px; /* Slightly slimmed profile tracker for smartphone views */
    }

    .secondfeature-alert-text {
      font-size: 1rem;
    }

    
  }

/* OUR SERVICES */
/* Outer wrapper adjustments to guarantee structural breathing room */


.servicefeature-wrapper {
  width: 100%;
  margin: 0 auto;
   background: linear-gradient(to bottom, #2e4257, #5b738a);
  padding: 2rem 1.5rem;
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* NEW INNER CONTAINER: Keeps all text and grid content perfectly aligned within 1350px */
.servicefeature-inner-content {
  width: 100%;
  max-width: 1350px; 
  margin: 0 auto;                 /* Centers content smoothly on wide displays */
  padding: 0 1rem;              /* Safety margin for tablet and mobile devices */
  box-sizing: border-box;
}

/* Centered Section Header Branding Tagline */
.servicefeature-tagline {
  display: block;
  text-align: center;
  font-size: 1.3rem;
  font-weight: 700;
  color: #c9ddb9ec;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 8px;
}



/* Main Title - Matched perfectly to the "Our Process" styling specifications */
.servicefeature-main-title {
  text-align: center;
  font-family: var(--h6-font-main);
   font-size: clamp(2.3rem, 4vw, 3rem);
  font-weight: 800;
   line-height: 1.15;
  color: #eaecf1; 
  margin: 0 auto 30px auto;
  letter-spacing: 1px;
  text-transform: uppercase;
    margin-top: 1.5rem;
}




/* Navigation Tabs Track Layout Container */
.servicefeature-tabs-container {
  display: flex;
  justify-content: center;
  gap: 230px; 
  margin-bottom: 20px;
  padding-bottom: 16px;
}

/* Clickable Individual Tab Buttons */
.servicefeature-tab-button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  outline: none;
  width: 150px;
}

/* Symmetrical Clean Vector Icon Boxes (Default Unselected State) */
.servicefeature-icon-frame {
  width: 165px;
  height: 100px;
  background-color: #f7fcf9;
  border: 8px solid #afc2df;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #85a371; /* Default Slate Blue icon strokes */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.02);
  transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.servicefeature-icon-frame svg {
  width: 50px;
  height: 50px;
}

.servicefeature-tab-label {
  margin-top: 14px;
  font-size: 1.8rem;
  font-weight: 700;
  color: #dfe4dbec;
  transition: color 0.25s ease;
}

/* Drop Indicator Arrow pointing to active block content */
.servicefeature-active-arrow {
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  color: #e7b65a; /* Arrow flipped to match corporate blue theme choice */
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

/* State Logic Active Focus Classes (Flipped: Solid Slate Blue Fill + Rich Shadow Accent) */
.servicefeature-tab-button.servicefeature-active .servicefeature-icon-frame {
  background-color: #3489c2; /* Fills block space with signature corporate slate blue */
  border-color: #f1bb27;
  color: #e4ebe1e0; /* Symmetrical vector strokes convert cleanly to high-contrast white */
  box-shadow: 0 14px 14px rgba(203, 205, 207, 0.493); /* Rich slate blue focus accent shadow */
  transform: translateY(-4px);
}

.servicefeature-tab-button.servicefeature-active .servicefeature-tab-label {
  color: #fcfcfc;
  font-weight: 700; 
}

.servicefeature-tab-button.servicefeature-active .servicefeature-active-arrow {
  opacity: 1;
  transform: translateX(-50%) translateY(-2px);
}

/* Interactive Hover states for secondary unselected tabs */
.servicefeature-tab-button:not(.servicefeature-active):hover .servicefeature-icon-frame {
  border-color: #ecae27;
   background-color: #c3e0ee;
  border-width: 4px;
  color: #79af55; /* Hover contrast keeps deep slate blue focus tracking */
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.05);
}

/* Description Display Panel Engine */
.servicefeature-display-panel {
  display: flex;
   max-width: 1200px;       /* Set your desired maximum width */
  width: 100%;             /* Ensures it looks good and stays responsive on smaller screens */
  margin: 0 auto;          /*  Centers the box horizontally */

  
  justify-content: space-between;
  align-items:flex-start;
  gap: 30px;
  background-color: #f3f6f7;
  padding: 24px 30px 30px 30px;
   box-shadow: 0 4px 8px rgba(177, 194, 212, 0.479);
   border-radius: 1rem;
  transition: opacity 0.2s ease, transform 0.2s ease;
  box-sizing: border-box;
}

.servicefeature-text-block {
  flex: 1.2;
  max-width: 800px;
}

.servicefeature-headline {
  margin: 0 0 12px 0;
  font-size: 2.3rem;
  font-weight: 700;
  color: #4a75a0;
}

.servicefeature-copy {
  margin: 0;
  
  font-size: 1.3rem; 
  line-height: 1.6;
  color: #4a5568;
}

/* Pill-Shaped Dynamic CTA Button Frame Link */
/* 1. Force the right column block to stack items from top to bottom */
.servicefeature-action-block {
  display: flex;
  flex-direction: column; 
  align-items: flex-end;     /* Keeps both the button and image right-aligned */
  gap: 16px;                 /* Adds clean vertical spacing between the button and image */
}

/* 2. Your original button CSS with one addition: ensure it aligns cleanly */
.servicefeature-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;   /* Centers text inside the flex button */
  gap: 10px;
  padding: 12px 24px;
  background-color: #5a9144;
  border: 2px solid #578acc; 
  border-radius: 5px; 
  color: #ffffff; 
  font-size: 1.4rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  align-self: flex-end;      /* Prevents the button from stretching vertically to match the container height */
  transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

/* 3. The container for the image underneath the button */
.servicefeature-image-container {
  width: 240px;              /* Sets the width of your thumbnail frame */
  height: 140px;             /* Sets the height of your thumbnail frame */
  border-radius: 6px;
  overflow: hidden;          /* Cleanly clips the image to the rounded corners */
  border: 1px solid rgba(0, 0, 0, 0.1); 
}

/* 4. Fixes the broken/stretched image inside its frame */
#servicefeature-img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* Makes sure the picture fills the box perfectly without stretching */
  display: block;
}


/* Dynamic Button Interactive Hover States */
.servicefeature-button-link:hover {
  background-color: #e6ebe5;
  color: #63a744; 
  transform: translateY(-2px);
}

/* Multi-Breakpoint Structural Adaptive Media Query Engines */
@media (max-width: 1024px) {
  .servicefeature-main-title {
    font-size: 2.2rem;
    margin-bottom: 36px;
  }

  .servicefeature-tabs-container {
    gap: 40px;
  }
  
  .servicefeature-display-panel {
    flex-direction: column;
    gap: 28px;
  }

  .servicefeature-text-block,
  .servicefeature-action-block {
    width: 100%;
    max-width: 100%;
  }

  .servicefeature-action-block {
    justify-content: flex-start;
    padding-top: 0;
  }
}

@media (max-width: 640px) {
  .servicefeature-main-title {
    font-size: 1.8rem;
  }

  .servicefeature-tabs-container {
    gap: 7px;                    /* Snugs buttons closer together for small screens */
    overflow-x: hidden;          /* Shuts off horizontal scroll completely */
    overflow-y: hidden;          /* Shuts off vertical scroll bar tracks completely */
    justify-content: center;     /* Centers the locked row on screen */
    padding-bottom: 4px;         /* Prevents container layout clipping */
    width: 100%;
    height: auto;
  }

  .servicefeature-tab-button {
    width: 33.33%;               /* Dynamic equal width split row layout */
    flex-shrink: 1;              /* Allows items to compress safely on tiny screens */
    height: auto;                /* Removes high fixed height desktop limits */
    overflow: hidden;
  }

  .servicefeature-icon-frame {
    width: 70px;
    height: 70px;
    border-radius: 12px;
  }

  .servicefeature-icon-frame svg {
    width: 28px;
    height: 28px;
  }

  .servicefeature-tab-label {
    font-size: 0.85rem;          /* Sized down cleanly to allow text to wrap */
    text-align: center;
    word-wrap: break-word;       /* Safely drops multi-word headers downward */
    margin-top: 15px;
  }

  .servicefeature-active-arrow {
    bottom: 3px;
  }

  .servicefeature-headline {
    font-size: 1.4rem;
  }

  .servicefeature-copy {
    font-size: 1.05rem;
  }
   .servicefeature-button-link {
    display: block;          /* Allows the button to behave like a block element */
    width: 100%;             /* Makes the button span the full width of its area on mobile */
    max-width: 280px;        /* Prevents it from getting awkwardly wide on tablets */
    margin: 15px auto 0;     /* Centers it and adds space above it so it doesn't crowd text */
    padding: 10px 15px;      /* Shrinks the internal padding so it fits small screens */
    font-size: 14px;         /* Lowers the font size so the text doesn't overflow or wrap poorly */
    text-align: center;      /* Keeps the text perfectly centered inside the button */
  }

}


 /* 2. Create the 2-column grid inside the container */
    .centeredcontainer {
                min-height: 120px;

            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            text-align: center;
            position: relative;
            padding: 0.5rem;

  
      background: #ffffff;
      padding: 30px;
      border-radius: 8px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

  
    }

    .column {
      background: #e2e8f0;
      padding: 20px;
      border-radius: 4px;

}


 /* CONTACT US BOX */
/* Parent container */
.contactus-parent-container { 
  background: #ffffff;
  display: flex; 
  justify-content: center; 
  align-items: center;     
  padding: 10px; 
 width: 100%;
}

/* Forces both boxes to tightly wrap their contents */
.contactus-grid-layout {
  display: grid;
  grid-template-columns: max-content max-content; 
  gap: 10px; 
}

/* Base item styles */
.contactus-grid-item {
  padding: 5px 15px; 
  background-color: #ffffff; 
  border: none;              
  border-radius: 8px;
  display: flex;
  align-items: center; 
}

/* Left side styling */
.contactus-left-side {
  text-align: right;
}

.contactus-left-side h2 {
  margin: 0;
  font-size: 1.8rem;
  line-height: 1.2;
}

/* Right side styling */
.contactus-right-side {
  display: flex;
  flex-direction: row;       
  align-items: center;       
  gap: 20px; 
}

/* Link wrapper block for the image */
.contactus-img-link-wrapper {
  display: flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}

/* UPDATED: Reduced from 180px to 140px to make the square image slightly smaller */
.contactus-img-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px; 
}

/* UPDATED: Added border-radius and prepared transition for a stronger pop effect */
.feature-card-image {
  width: 100% !important;
  height: auto !important;
  display: block;
  border-radius: 12px; /* Smooth rounded corners */
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1), filter 0.25s ease; /* Enhanced timing curve for a snappier pop */
  filter: drop-shadow(0 0 0 rgba(0, 0, 0, 0)) contrast(100%); 
}

/* UPDATED: Increased vertical lift, increased scale to 1.06, and applied a much darker, larger shadow */
.contactus-img-link-wrapper:hover .feature-card-image {
  transform: translateY(-6px) scale(1.06); /* Stronger pop out and upward floating lift */
  filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.22)) contrast(112%); /* Much stronger, richer shadow depth */
}

/* Responsive behavior for mobile devices */
@media (max-width: 768px) {
  .contactus-grid-layout {
    grid-template-columns: 1fr; 
    max-width: 100%;
    padding: 0 15px;
  }

  .contactus-left-side {
    text-align: center;
    justify-content: center;
    padding-top: 15px; 
  }

  .contactus-right-side {
    justify-content: center;
    padding-bottom: 15px;
  }
}


/* ==========================================================
   NAV MENU
   ========================================================== */
/* ==========================================================
   MAX-SPECIFICITY ISOLATION RESET
   ========================================================== */
.contactus-nav-header,
.contactus-nav-header *,
.contactus-nav-header *::before,
.contactus-nav-header *::after {
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

/* Header Container */
.contactus-nav-header {
  width: 100% !important;
  background-color: #ffffff !important;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 9999 !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
}

/* Three-element centering distribution grid */
.contactus-nav-header .contactus-nav-container {
  display: grid !important;
  grid-template-columns: max-content 1fr max-content; 
  align-items: center !important;
  width: 100% !important;
  max-width: 1200px !important;       
  margin: 0 auto !important;         
  padding: 8px 20px !important; 
  text-align: left !important;  
}

/* Logo Alignment & Typography */
.contactus-nav-header .contactus-nav-logo {
  font-size: 1.4rem !important;
  font-weight: 700 !important;          
  color: #1a4480 !important;            
  text-decoration: none !important;
  letter-spacing: -0.02em !important;   
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Centered Featured Phone Element */
.contactus-nav-header .contactus-nav-center-phone {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
}

/* Styled anchor to match the custom green button background and white font */
.contactus-nav-header .contactus-nav-phone-anchor {
  font-size: 1.1rem !important;
  letter-spacing: 0.09rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;                     
  background-color: #357a45 !important;          
  text-decoration: none !important;
  padding: 8px 18px !important;                  
  border-radius: 6px !important;                 
  transition: background-color 0.2s ease !important;
  display: inline-block !important;
}

.contactus-nav-header .contactus-nav-phone-anchor:hover {
  background-color: #355d83 !important;          
}

/* Main Horizontal Link List Positioned on the Right Side */
.contactus-nav-header .contactus-nav-menu {
  display: block !important;
  width: auto !important;
}

.contactus-nav-header .contactus-nav-list {
  display: flex !important;
  flex-direction: row !important;
  list-style: none !important;
  gap: 5px !important;
  padding: 0 !important;
  margin: 0 !important;
}

.contactus-nav-header .contactus-nav-item {
  position: relative !important; 
  list-style: none !important;
  display: inline-block !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Main Link Font Configuration */
.contactus-nav-header .contactus-nav-link {
  display: block !important;
  padding: 6px 12px !important; 
  color: #1a4480 !important;            
  text-decoration: none !important;
  font-weight: 700 !important;          
  font-size: 1.15rem !important;                
  transition: color 0.2s ease !important;
}

.contactus-nav-header .contactus-nav-link:hover {
  color: #418f53 !important;                     
}

.contactus-nav-header .contactus-nav-arrow {
  font-size: 0.65rem !important;
  margin-left: 4px !important;
  vertical-align: middle !important;
  display: inline-block !important;
}

/* Dropdown Sub-Panels with kept font properties (Desktop Only rules) */
.contactus-nav-header .contactus-nav-dropdown {
  position: absolute !important;
  top: 100% !important;
  left: 0 !important; 
  background-color: #ffffff !important;
  min-width: 250px !important; 
  max-height: 400px !important; 
  overflow-y: auto !important; 
  box-shadow: 0 4px 12px rgba(0,0,0,0.1) !important;
  border-radius: 6px !important;
  list-style: none !important;
  padding: 10px 0 !important;
  margin: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(10px) !important;
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s !important;
}

.contactus-nav-header .contactus-nav-dropdown li {
  list-style: none !important;
  display: block !important;
  width: 100% !important;
}

/* Submenu link text rules */
.contactus-nav-header .contactus-nav-dropdown li a {
  display: block !important;
  padding: 10px 20px !important;
  color: #1a4480 !important;            
  text-decoration: none !important;
  font-size: 0.95rem !important;                
  font-weight: 500 !important;          
  transition: background-color 0.15s ease, color 0.15s ease !important; 
}

.contactus-nav-header .contactus-nav-dropdown li a:hover {
  background-color: #56a160 !important;          
  color: #ffffff !important;                     
}

.contactus-nav-header .contactus-nav-item:hover .contactus-nav-dropdown {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.contactus-nav-header .contactus-nav-list .contactus-nav-item:last-child .contactus-nav-dropdown {
  left: auto !important;
  right: 0 !important;
}

/* Mobile Toggle Systems hidden on Desktop screens */
.contactus-nav-header .contactus-nav-toggle-check {
  display: none !important;
}

.contactus-nav-header .contactus-nav-toggle-button {
  display: none !important;
}

/* ==========================================================
   Responsive Breakpoint Rules (Mobile Screens Less Than 768px)
   ========================================================== */
@media (max-width: 768px) {
  .contactus-nav-header .contactus-nav-container {
    grid-template-columns: max-content 1fr max-content !important; 
    padding: 12px 20px !important; 
  }

  .contactus-nav-header .contactus-nav-phone-anchor {
    font-size: 1rem !important;
    padding: 5px 10px !important;
  }

  .contactus-nav-header .contactus-nav-toggle-button {
    display: flex !important; 
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 24px !important;
    height: 18px !important;
    cursor: pointer !important;
  }

  .contactus-nav-header .contactus-nav-toggle-button span {
    display: block !important;
    height: 2px !important;
    width: 100% !important;
    background-color: #1a4480 !important; 
    border-radius: 2px !important;
    transition: all 0.3s ease !important;
  }

  /* FIXED: Turned this into a viewport-bound layout container that scrolls cleanly from the top */
  .contactus-nav-header .contactus-nav-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    border-top: 1px solid #eeeeee !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05) !important;
    max-height: 0 !important;
    overflow-y: scroll !important; /* Enables smooth native momentum scrolling on smartphones */
    -webkit-overflow-scrolling: touch !important;
    transition: max-height 0.35s ease-in-out !important;
  }

  .contactus-nav-header .contactus-nav-list {
    flex-direction: column !important;
    padding: 10px 0 !important;
    gap: 0 !important;
  }

  .contactus-nav-header .contactus-nav-link {
    padding: 12px 20px !important;
    border-bottom: 1px solid #fafafa !important;
  }

  /* FIXED: Completely removed max-height restrictions and layout overrides for nested submenus on mobile */
  .contactus-nav-header .contactus-nav-dropdown {
    position: static !important;
    box-shadow: none !important;
    background-color: #fcfdfe !important;
    padding: 0 !important;
    max-height: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    overflow: hidden !important;
    transform: none !important;
    transition: max-height 0.3s ease-out !important;
  }

  .contactus-nav-header .contactus-nav-dropdown li a {
    padding: 12px 35px !important; /* Slightly larger padding touch targets for mobile users */
  }

  /* FIXED: Set container height dynamically based on the phone monitor screen height when opened */
  .contactus-nav-header .contactus-nav-toggle-check:checked ~ .contactus-nav-menu {
    max-height: calc(100vh - 60px) !important; /* Forces menu drawer to fit dynamically within phone screens */
  }

  /* FIXED: Adjusted submenu layout sizes to allow the full list of items to cascade cleanly */
  .contactus-nav-header .contactus-nav-has-dropdown:hover .contactus-nav-dropdown {
    max-height: none !important; /* Removes the clipping window so all locations list items are readable */
  }
}


/* ==========================================================================
   FOOTER SECTION
   ========================================================================== */


/* ==========================================================================
   ISOLATED FOOTER LAYER WITH STRICT DIMENSION ENFORCEMENT
   ========================================================================== */
.footer2-container {
    /* Premium Modernized Color Space Tokens */
    --f2-bg: #292d33;            
    --f2-accent: #589661;        
    --f2-accent-hover: #059669;  
    --f2-text-primary: #f4f6f8;  
    --f2-text-secondary: #dfe3e9;
    --f2-text-muted: #c2ccda;     

    /* 🚨 CRITICAL FIXES: Forces block context, clears layouts, & traps children dimensions */
    display: block !important;
    clear: both !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important; /* Traps all floating children elements inside */
    box-sizing: border-box !important;

    /* Enforce solid backdrop background color down through mobile elements */
    background: #313336 !important; 
    background-color: #2c3e50 !important;
    color: var(--f2-text-primary);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    padding: 60px 20px 40px 20px;
    margin-top: 60px;
}
/* ==========================================================================
   FOOTER STRUCTURES & INTERFACE GRID
   ========================================================================== */
.footer2-content {
    max-width: 1350px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    padding-bottom: 30px;
}

.footer2-column {
    flex: 1;
    min-width: 200px;
}

.footer2-column-wide {
    flex: 2.5;
    min-width: 320px;
}

/* Premium Rounded Button Headings layout */
.footer2-heading {
    display: block;
    text-align: center;
    box-sizing: border-box;
    background-color: #4a8d4d;
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700; 
    padding: 7px 14px;
    border-radius: 6px;
    margin: 0 0 20px 0;
    letter-spacing: 0.1px;
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.15);
}

.footer2-home-heading {
    margin-top: 25px;
}

.footer2-list {
    list-style: none !important;
    padding: 0;
    margin: 0;
}

.footer2-list li {
    margin-bottom: 7px; 
    list-style: none !important;
}

.footer2-column:nth-child(1) .footer2-list,
.footer2-column:nth-child(2) .footer2-list {
    padding-left: 15px;
}

/* Fluid Hover Line Transformations for Core Links */
.footer2-link {
    color: #E0E0E0;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600; 
    display: inline-block;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer2-link:hover {
    color: var(--f2-text-primary);
    transform: translateX(4px);
    text-decoration: underline; 
}

.footer2-location-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 2px 15px;
}

.footer2-text {
    font-size: 0.95rem;
    color: #E0E0E0;
    margin: 0;
}

.footer2-phone {
    font-weight: 700;
    padding-left: 15px;
}

.footer2-phone a {
    color: #E0E0E0;
    text-decoration: none;
    transition: color 0.15s ease;
}

.footer2-phone a:hover {
    color: var(--f2-accent);
    text-decoration: underline;
}

/* ==========================================================================
   TRUST DISPLAY ROWS & CERTIFICATION SYSTEM
   ========================================================================== */
/* Ensure the inner certification section rows also calculate flow properly */


.footer2-certifications-row {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 35px 0;
    text-align: center;
}

.footer2-nextdoor {
    font-size: 1.1rem;
    margin-bottom: 20px;
    color: #E0E0E0;
}

.footer2-nextdoor img {
    height: 24px;
    width: auto;
}

.footer2-badges {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 25px;
    margin-bottom: 25px;
}

.footer2-badges img {
    height: 48px;
    width: auto;
    object-fit: contain;
    filter: brightness(0.98) contrast(1.02);
}

.footer2-badges .footer2-badge-eurofins {
    height: 26px; 
}

.footer2-cert-text {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #E0E0E0;
    max-width: 1000x;
    margin: 0 auto;
}

.footer2-cert-text p {
    margin: 0 0 10px 0;
}



/* Prevents the link from turning default browser purple after being visited */
.footer2-link:visited {
  color: #efedf3; /* Keeps the color identical to the base state */
}

/* Optional hover state - always placed AFTER :visited */
.footer2-link:hover {
  text-decoration: underline;
  opacity: 0.9;
}



/* ==========================================================================
   SEO GROUNDING RUNWAY CONFIGURATIONS
   ========================================================================== */
.footer2-seo-grounding-row {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 30px 10px;
    text-align: center;
}

.seo-coverage-text {
    font-size: 0.82rem;
    line-height: 1.6;
    color: var(--f2-text-muted);
    margin: 0 0 20px 0;
}

.seo-keywords-links {
    font-size: 1rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.2);
    margin: 0;
}

.seo-keywords-links a {
    color: var(--f2-text-secondary);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
    display: inline-block;
    margin: 2px 4px;
}

.seo-keywords-links a b {
    color: var(--f2-text-primary);
    font-weight: 600;
}

.seo-keywords-links a:hover {
    color: var(--f2-accent);
    text-decoration: underline;
}

/* ==========================================================================
   CONSOLIDATED SINGLE-ROW ROADWAY BOTTOM BAR
   ========================================================================== */
.footer2-bottom-bar {
    max-width: 1200px;
    margin: 0 auto;
    border-top: 1px solid rgba(255, 255, 255, 0.08); 
    padding-top: 25px;
    clear: both;
    position: relative;
    box-sizing: border-box;
}

.footer2-bottom-row-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    width: 100%;
    box-sizing: border-box;
}

.footer2-copyright {
    font-size: 0.85rem;
    font-weight: 400;
    color: var(--f2-text-muted); 
    margin: 0;
}

.footer2-bottom-links {
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer2-bottom-links a {
    color: var(--f2-text-muted);
    text-decoration: none;
    transition: color 0.15s ease-in-out;
}

.footer2-bottom-links a:hover {
    color: var(--f2-text-primary);
    text-decoration: underline;
}

.link-pipe {
    color: rgba(255, 255, 255, 0.15);
    font-size: 0.8rem;
    user-select: none;
}

.footer2-certifications-row,
.footer2-seo-grounding-row,
.footer2-bottom-bar {
    display: block !important;
    clear: both !important;
    position: relative !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   MEDIA FLUID RESPONSIVE SYSTEM
   ========================================================================== */
@media (max-width: 768px) {
    .footer2-content {
        flex-direction: column !important;
        gap: 40px;
    }
    .footer2-location-grid {
        grid-template-columns: 1fr !important;
    }
    .footer2-bottom-row-content {
        flex-direction: column !important;
        text-align: center !important;
        justify-content: center !important;
        gap: 12px;
    }
}

/* BOOKING SECTION */
  /* Quick Resources Section Card Styles */
.booking-resources-card {
    margin-top: 30px;
    background-color: #55636b;
    padding: 18px;
    border-radius: 10px;
    border: 1px solid #eaeaea;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    max-width: 350px;
}

.resources-card-title {
    color: #e9edf0;
    font-size: 2rem;
    font-weight: 700;
    margin: 0 0 16px 0;
    letter-spacing: -0.2px;
}

.resources-links-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Reusable link button framework */
.resource-btn-link {
    display: flex;
    align-items: center;
    gap: 14px;
    background-color: #fafafa;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 12px 12px;
    color: #3e6483;
    font-size: 1.2rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.2s ease-in-out;
}

/* Professional Vector Brand Blue Icon Profiles */
.resource-svg-icon {
    width: 22px;
    height: 22px;
    color: #67946e; /* Authorities Brand Navy Tone */
    flex-shrink: 0;
    transition: color 0.2s ease-in-out;
}

/* Interactive Hover States styling */
.resource-btn-link:hover {
    background-color: #ffffff;
    border-color: #439655; /* Focus Green boundary transition */
    color: #0b3c5d;
    box-shadow: 0 4px 10px rgba(67, 150, 85, 0.08);
    transform: translateX(3px);
}

.resource-btn-link:hover .resource-svg-icon {
    color: #439655; /* Dynamic icon color transformation on text hover */
}

/* Fluid responsive breakdown safety checks */
@media (max-width: 992px) {
    .booking-resources-card {
        max-width: 100%;
        margin-top: 20px;
    }
}





/* ==========================================================================
   UPDATED BOOKING CONTAINER LAYER
   ========================================================================== */
.booking-section-container {
    background-color: #fcfcfc;
    padding: 80px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    border-bottom: 1px solid #eaeaea;
    
    /* Forces browser heights to render dynamically without overlapping */
    display: block !important;
    clear: both !important;
    position: relative !important;
    width: 100%;
    box-sizing: border-box;
}

.booking-section-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 60px;
    box-sizing: border-box;
}

/* Left Metadata Grid Placement */
.booking-meta-column {
    flex: 1;
    min-width: 300px;
}

.booking-sub-label {
    display: block;
    color: #439655; /* Brand green tone */
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.booking-main-title {
    font-size: 3rem; 
    font-weight: 800;
    color: #4a75a0;
    margin: 10px auto 24px auto;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.booking-tagline {
    color: #555555;
    font-size: 1.4rem;
    line-height: 1.5;
    margin: 0 0 40px 0;
}

.booking-info-block {
    margin-bottom: 25px;
}

.info-block-label {
    display: block;
    color: #0b3c5d;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 6px;
    opacity: 0.8;
}

.info-block-value {
    font-size: 1.4rem;
    font-weight: 700;
    color: #457cc5;
    margin: 0;
}

.info-block-value a {
    color: #416d8f;
    text-decoration: none;
    transition: color 0.15s ease;
}

.info-block-value a:hover {
    color: #439655;
}

.booking-hours-list {
    list-style: none;
    padding: 0;
    margin: 5px 0 0 0;
    max-width: 320px;
}

.booking-hours-list li {
    display: flex;
    justify-content: space-between;
    font-size: 1.2rem;
    padding: 6px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
    color: #444444;
}

.booking-hours-list li:last-child {
    border-bottom: none;
}

.booking-hours-list li span:first-child {
    font-weight: 600;
    color: #222222;
}

/* Right Interactive Input Form Area styling */
.booking-form-column {
    flex: 1.3;
    min-width: 320px;
    background: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    border: 1px solid #f0f0f0;
}

/* Clear Form Section Internal Titles */
.form-section-heading {
    color: #0b3c5d;
    font-size: 1.6rem;
    font-weight: 700;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 8px;
    margin: 30px 0 20px 0;
}

.form-section-heading:first-of-type {
    margin-top: 0;
}

.form-group {
    margin-bottom: 20px;
    position: relative;
}

.form-row-split {
    display: flex;
    gap: 16px;
}

.form-row-split .form-group {
    flex: 1;
    min-width: 140px;
}

.booking-form-column label {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #333333;
    margin-bottom: 6px;
}

/* Custom indicator styles for explicit parameters required fields */
.booking-form-column label.required::after {
    content: " *";
    color: #439655;
    font-weight: bold;
}

/* Standard Fields Text Inputs formatting styles */
.booking-form-column input[type="text"],
.booking-form-column input[type="email"],
.booking-form-column input[type="tel"],
.booking-form-column select,
.booking-form-column textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 14px;
    font-size: 1rem;
    color: #333333;
    background-color: #fafafa;
    border: 1px solid #cccccc;
    border-radius: 6px;
    transition: all 0.2s ease-in-out;
    font-family: inherit;
}

.booking-form-column textarea {
    resize: vertical;
}

/* Custom interactive focused fields rules */
.booking-form-column input:focus,
.booking-form-column select:focus,
.booking-form-column textarea:focus {
    outline: none;
    border-color: #439655;
    background-color: #ffffff;
    box-shadow: 0 0 0 3px rgba(67, 150, 85, 0.12);
}

/* Services Selection Matrix Grid styling */
.form-checkbox-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px 15px;
    margin-top: 8px;
}

.checkbox-item {
    display: flex !important;
    align-items: flex-start;
    gap: 8px;

    font-weight: 500 !important;
    color: #444444 !important;
    cursor: pointer;
}

.checkbox-item input[type="checkbox"] {
    margin-top: 3px;
    scale: 1.5; /* Makes the checkbox 1.5x larger */

    accent-color: #439655;
    cursor: pointer;
}

/* Legal Container Terms row alignment styles */
.legal-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 6px;
}

.legal-checkbox-container input[type="checkbox"] {
    margin-top: 4px;
     scale: 1.5; /* Makes the checkbox 1.5x larger */
    accent-color: #439655;
    cursor: pointer;
}

.legal-checkbox-container span {
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.4;
}

.legal-checkbox-container a {
    color: #0b3c5d;
    text-decoration: underline;
    font-weight: 600;
}

.legal-checkbox-container a:hover {
    color: #439655;
}

.form-captcha-container {
    margin: 25px 0;
}

/* Modernized CTA Action Button style definitions */
.booking-submit-button {
    width: 100%;
    background-color: #439655;
    color: #ffffff;
    border: none;
    border-radius: 6px;
    padding: 14px 20px;
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(67, 150, 85, 0.2);
}

.booking-submit-button:hover {
    background-color: #367d45;
    box-shadow: 0 6px 16px rgba(67, 150, 85, 0.3);
    transform: translateY(-1px);
}

.booking-submit-button:active {
    transform: translateY(1px);
}

.booking-submit-button:disabled {
    background-color: #a3cfae;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ==========================================================================
   FLUID MOBILE RESPONSIVE LAYOUT ENGINE OVERRIDES
   ========================================================================== */
@media (max-width: 992px) {
    .booking-section-content {
        flex-direction: column !important;
        gap: 40px;
    }
    
    .booking-meta-column, 
    .booking-form-column {
        width: 100% !important;
        min-width: 100% !important;
        display: block !important;
        position: relative !important;
    }
}

@media (max-width: 576px) {
    .form-row-split {
        flex-direction: column;
        gap: 0;
    }
    .booking-section-container {
        padding: 50px 15px;
    }
    .form-checkbox-grid {
        grid-template-columns: 1fr;
    }
}

.wrapper-3rdfeature {
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    color: #333333;
    line-height: 1.6;
    overflow-x: hidden; /* Prevents layout edge bleeding on mobile devices */
}

.section-3rdfeature {
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
}

.container-3rdfeature {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
}

.row-3rdfeature {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.section-light-3rdfeature {
    background-color: #ffffff;
}

/* High contrast slate blue container module styling */
.section-dark-3rdfeature {
    background-color: #3c4e6f;
    color: #ffffff;
}

/* Gallery Module Layout Styling */
.gallery-layout-3rdfeature {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.gallery-text-3rdfeature {
    display: flex;
    flex-direction: column;
}

.gallery-tag-3rdfeature {
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #61a151; /* Accent green from mockup */
    letter-spacing: 1.4px;
    margin-bottom: 6px;
}

.gallery-title-3rdfeature {
  
    font-size: 3rem; 
    font-weight: 800;
    color: #4a75a0;
    margin: 10px auto 24px auto;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;



    line-height: 1.2;
    margin-bottom: 12px;
}

.gallery-description-3rdfeature {
    font-size: 1.5rem;
    color: #4a5568;
    max-width: 400px;
    margin-bottom: 20px;
}

/* Gallery Controls */
.gallery-arrows-3rdfeature {
    display: flex;
    gap: 12px;
    margin-top: auto;
}

.arrow-btn-3rdfeature {
    width: 40px;
    height: 40px;
    border: 2px solid #7d8a97;
    border-radius: 50%;
    background-color: #ffffff;
    color: #4a5568;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: background-color 0.2s, color 0.2s;
}

.arrow-btn-3rdfeature:hover {
    background-color: #5ca845;
    color: #ffffff;
    border-color: #2bb673;
}

/* Image Carousel Viewport Mask */
.carousel-container-3rdfeature {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Track controlled cleanly via script transitions */
.carousel-track-3rdfeature {
    display: flex;
    gap: 16px;
    width: max-content;
    transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
}

.carousel-slide-3rdfeature {
    width: calc(100vw - 56px); /* Adaptive width constraint elements across mobile viewports */
    flex-shrink: 0;
}

.carousel-slide-3rdfeature img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 12px;
    display: block;
}

/* Descriptive Row Layout Typography */
.text-block-3rdfeature {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subtitle-3rdfeature {
    font-size: 1.25rem;
    color: #8a333d;
    font-weight: 500;
    margin-bottom: 6px;
    letter-spacing: 0.5px;
}

.section-dark-3rdfeature .subtitle-3rdfeature {
    color: #f7fafc;
    opacity: 0.95;
}

.title-3rdfeature {
    font-size: 2rem;
    font-weight: 700;
    color: #1a202c;
    line-height: 1.25;
    margin-bottom: 16px;
}

.section-dark-3rdfeature .title-3rdfeature {
    color: #ffffff;
}

.description-3rdfeature {
    font-size: 0.95rem;
    color: #4a5568;
    margin-bottom: 20px;
    max-width: 560px;
}

.section-dark-3rdfeature .description-3rdfeature {
    color: #e2e8f0;
}

.meta-text-3rdfeature {
    font-size: 0.85rem;
    color: #718096;
    margin-bottom: 12px;
}

.section-dark-3rdfeature .meta-text-3rdfeature {
    color: #cbd5e0;
}

/* Inner Standard Badges List Layout formatting */
.icons-list-3rdfeature {
    display: flex;
    gap: 16px;
    margin-top: 4px;
}

.icon-item-3rdfeature {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    color: #4a5568;
    gap: 6px;
    width: 60px;
}

.section-dark-3rdfeature .icon-item-3rdfeature {
    color: #e2e8f0;
}

.icon-circle-3rdfeature {
    width: 44px;
    height: 44px;
    border: 1px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #1a202c;
    font-size: 1.1rem;
}

.section-dark-3rdfeature .icon-circle-3rdfeature {
    border-color: #4a5568;
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

/* Base Picture Component Layout */
.image-block-3rdfeature {
    flex: 1;
    width: 100%;
    position: relative;
}

.picture-3rdfeature img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Row Direction Slider Nav Arrows Formatting */
.nav-arrows-3rdfeature {
    display: flex;
    gap: 10px;
    margin-top: 16px;
    justify-content: center;
}

.arrow-3rdfeature {
    width: 36px;
    height: 36px;
    border: 1px solid #cbd5e0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    color: #718096;
    background-color: #ffffff;
    transition: background-color 0.2s, border-color 0.2s;
}

.section-dark-3rdfeature .arrow-3rdfeature {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: #4a5568;
}

.arrow-3rdfeature:hover {
    background-color: #f7fafc;
}

.section-dark-3rdfeature .arrow-3rdfeature:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Tablet and Desktop Responsiveness Constraints (Max 1200px) */
@media (min-width: 768px) {
    .section-3rdfeature {
        padding: 80px 40px;
    }
    
    .row-3rdfeature {
        flex-direction: row;
        align-items: center;
        gap: 60px;
    }
    
    .row-reverse-3rdfeature {
        flex-direction: row-reverse;
    }

    .title-3rdfeature {
        font-size: 2.3rem;
    }

    .nav-arrows-3rdfeature {
        justify-content: flex-start;
    }

    /* Split Screen 2-Image Desktop View Adjustments */
    .gallery-layout-3rdfeature {
        flex-direction: row;
        align-items: flex-start;
        gap: 48px;
    }

    .gallery-text-3rdfeature {
        width: 300px;
        flex-shrink: 0;
        padding-top: 12px;
    }

    .carousel-container-3rdfeature {
        flex-grow: 1;
    }

    /* Sets accurate side-by-side spacing inside desktop layout constraint limits */
    .carousel-slide-3rdfeature {
        width: calc((1200px - 300px - 48px - 16px) / 2);
    }
}



/* CSS Stylesheet Block */
.faq-layout-3rdfeature {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-content-3rdfeature {
    flex: 1;
    width: 100%;
}

.faq-title-3rdfeature {
    font-size: 3rem; 
    font-weight: 800;
    color: #4a75a0;
    margin: 10px auto 24px auto;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* Category Filter Tabs Layout */
.faq-tabs-3rdfeature {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 32px;
    border-bottom: 1px solid #e2e8f0;
    padding-bottom: 16px;
}

.tab-btn-3rdfeature {
    padding: 8px 18px;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    background-color: #ffffff;
    color: #4a5568;
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.tab-btn-3rdfeature:hover {
    background-color: #dbe2e7;
    border-color: #cbd5e0;
}

.tab-btn-3rdfeature.active-3rdfeature {
    background-color: #ffffff;
    color: #294b91;
    font-weight: 700;
    border: 2px solid #72c767;
    box-shadow: 0 0 0 1px #1a202c;
}

/* Accordion Row Structural Rules */
.accordion-item-3rdfeature {
    border-bottom: 1px solid #e2e8f0;
    width: 100%;
}

.accordion-header-3rdfeature {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 24px 0;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.accordion-num-3rdfeature {
    font-size: 1.1rem;
    font-weight: 600;
    color: #389146; /* Accent green numbered matching system */
    min-width: 40px;
}

.accordion-title-3rdfeature {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1a202c;
    flex-grow: 1;
    padding-right: 20px;
}

.accordion-icon-3rdfeature {
    font-size: 1.2rem;
    color: #a0aec0;
    transition: transform 0.2s ease;
}

/* Content Area Transitions Rules */
.accordion-body-3rdfeature {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.accordion-text-3rdfeature {
    padding: 0 0 24px 40px;
    font-size: 0.98rem;
    color: #4a5568;
    line-height: 1.6;
}

/* Open Panel Modifier System states */
.accordion-item-3rdfeature.open-3rdfeature .accordion-body-3rdfeature {
    max-height: 500px; /* Provides fluid smooth overflow buffer heights */
    transition: max-height 0.35s ease-in;
}

/* Decorative image container layout constraints */
.faq-image-block-3rdfeature {
    width: 100%;
    max-width: 450px;
    align-self: center;
}

.faq-image-block-3rdfeature img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Desktop Presentation Layout Modifiers (768px and up) */
@media (min-width: 768px) {
    .faq-layout-3rdfeature {
        flex-direction: row;
        align-items: flex-start;
        gap: 64px;
    }
    
    .faq-content-3rdfeature {
        flex: 1.4; /* Allocates optimal desktop whitespace to text on the left */
    }

    .faq-image-block-3rdfeature {
        flex: 0.8;
        position: sticky;
        top: 40px; /* Sticks photo to window layout viewports during scrolls */
    }
}

/* ==========================================================================
   COMPLETE MIDDLE BLOG MODULE STYLES (3rdfeature Class Spec)
   ========================================================================== */

/* Main Section Split Grid Matrix */
.blog-split-layout-3rdfeature {
    width: 100%;
    display: flex;
    flex-direction: column-reverse; /* Stacks text above cards naturally on mobile displays */
    gap: 32px;
}

/* Right Side Static Content Blueprint Container */
.blog-header-panel-3rdfeature {
    width: 100%;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.blog-subtitle-3rdfeature {
   font-size:  clamp(1rem, 4vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    color: #87bd78; /* Accent green from mockup */
    letter-spacing: 1.4px;
    margin-bottom: 6px;
}

.blog-main-title-3rdfeature {
    font-size: clamp(1.8rem, 2vw, 2.8rem);
    font-weight: 800;
     color: #ffffff;
    margin: 10px auto 20px auto;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.blog-intro-text-3rdfeature {
    font-size: 1.4rem;
    color: #cbd5e0;
    line-height: 1.5;
}

/* Left Side Multi-Card Dynamic Row */
.blog-grid-container-3rdfeature {
    width: 100%;
}

.blog-row-3rdfeature {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 20px; /* Tight compact column spacing gutters */
}

/* 
   Block-Clickable Panel Structural Settings
   Flips to solid high-contrast white with gray text on pointer hover actions
*/
.blog-card-3rdfeature {
    background-color: rgba(91, 112, 72, 0.849);
    border: 2px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    text-decoration: none; /* Strip text underlines from block anchor tracking wrappers */
    transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}

.blog-card-3rdfeature:hover {
    background-color: #ffffff; 
    border-color: #ffffff;
    transform: translateY(-5px);
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);
}

/* Image Presentation Masking rules */
.blog-image-wrapper-3rdfeature {
    width: 100%;
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
}

.blog-image-wrapper-3rdfeature img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: filter 0.25s ease, transform 0.25s ease;
    filter: brightness(0.9); /* Subtle defaults down-exposure map */
}

.blog-card-3rdfeature:hover .blog-image-wrapper-3rdfeature img {
    filter: brightness(1);
    transform: scale(1.02); /* Clean cinematic active lens zooming scale */
}

/* Inner Text Padding Parameters */
.blog-body-3rdfeature {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* Card Content Typography Scale Sets with Text Color Flipping Engine definitions */
.blog-title-3rdfeature {
    font-size: 1.35rem; /* Large font weight spec format rules */
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 8px;
    transition: color 0.2s ease;
}

.blog-card-3rdfeature:hover .blog-title-3rdfeature {
    color: #1a202c; /* Text switches to dark on white hover background canvas */
}

.blog-description-3rdfeature {
    font-size: 1.05rem; /* Up-scaled reading comfort size index targets */
    color: #e2e8f0;
    line-height: 1.5;
    margin-bottom: 20px;
    flex-grow: 1;
    transition: color 0.2s ease;
}

.blog-card-3rdfeature:hover .blog-description-3rdfeature {
    color: #4a5568; /* Description switches to dark slate gray on hover */
}

/* Text-Indicator Link Mark Arrow rules */
.blog-link-3rdfeature {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s ease, gap 0.2s ease;
    align-self: flex-start;
}

.blog-card-3rdfeature:hover .blog-link-3rdfeature {
    color: #3c4e6f; /* Links match dark theme structural brand accent markers on hover toggle */
    gap: 12px; /* Smoothly stretches indicator arrows spatial gaps layout fields */
    text-decoration: underline;
}

/* ==========================================================================
   WIDESCREEN RESPONSIVE ADJUSTMENT OVERRIDES (768px Width & Up)
   ========================================================================== */
@media (min-width: 768px) {
    .blog-split-layout-3rdfeature {
        flex-direction: row; /* Horizontal alignment routing orientation rules toggle */
        gap: 40px;
        align-items: flex-start;
    }

    /* Left Grid element commands wide majority layout footprint */
    .blog-grid-container-3rdfeature {
        flex: 2.2; 
    }

    /* Right Text group remains structural compact sidebar panel size constraint map */
    .blog-header-panel-3rdfeature {
        flex: 0.9;
        position: sticky;
        top: 40px; /* Sticks content block along viewport tracking line columns during scrolling */
    }

    .blog-row-3rdfeature {
        grid-template-columns: repeat(3, 1fr); /* Spreads grid items symmetrically across 3 items columns matrix array maps */
        gap: 16px;
    }


}


.google-follow-widget {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;              /* Perfectly matches the vertical height of your custom buttons */
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  overflow: hidden;
  transition: transform 0.2s ease;
}

.google-follow-widget:hover {
  transform: translateY(-2px);
}

/* Mobile full-bleed width adaptation adjustments */
@media screen and (max-width: 992px) {
  .google-follow-widget {
    width: 100%;
    max-width: 280px;
  }
}

/* ==========================================================================
   STANFORD DESIGN SYSTEM (Fully Scoped with h6-)
   Optimized for Web Performance & Core Web Vitals (Zero CLS)
   ========================================================================== */

:root {
  --h6-font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  
  /* Brand Typography & Layout Palette from Screen Previews */
  --h6-color-green-label: #4d8c40;    /* For 'GALLERY' and 'OUR BLOGS' upper-case tags */
  --h6-color-blue-dark: #2c587b;      /* Slate-navy branding color */
  --h6-color-text-dark: #434d5e;      /* Deep off-black body font color */
  --h6-color-text-body: #555555;      /* Slate grey text for standard section paragraphs */
  --h6-color-white: #ffffff;
  
  /* Notification Color Codes */
  --h6-color-alert-bg: #f8f8f5;
  --h6-color-alert-border: #ce9224;
  --h6-color-alert-text: #423d3a;
  
  /* Layout Architecture Framework */
  --h6-max-width: 1350px;
  --h6-transition: all 0.3s ease;

    /* Headings Scale */
  --h6-font-size-hero-title: clamp(2.25rem, 5vw, 3.4rem);   /* Main Banner */
  --h6-font-size-section-title: clamp(2rem, 4vw, 2.65rem); /* Section Heading */
  --h6-font-size-card-title: clamp(1.4rem, 2.5vw, 1.9rem);/* Card/Tab Title */
  
  /* Body Copy Scale */
  --h6-font-size-featured-text: clamp(1.3rem, 2vw, 1.35rem); /* Callouts */
  --h6-font-size-body: clamp(1rem, 1.5vw, 1.2rem);        /* Standard Paragraph */
  --h6-font-size-meta: clamp(0.8rem, 1.2vw, 0.88rem);          /* Tags/Labels */
}

/* ==========================================================================
   STANDARD BASE BUTTON (.h6-cta-button) - SCALED DOWN FONT VARIANT
   ========================================================================== */
.h6-green {
color:#4d8c40;
  }

  .h6-bluegrey {
color:#50718a;
  }


   .h6-cta-button {
  /* Layout & Alignment */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  width: auto;
  min-width: 180px;
  max-width: 100%;
  box-sizing: border-box;
  
  /* Sizing & Structure (Slightly lowered padding to match smaller font) */
  padding: 0.4rem 0.7rem;
  border-radius: 8px;
  border: 4px solid #568b41;
  background-color: #f5f6fa;
  
  /* Typography Control */
  color: #404b61;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.3px;
  
  /* Scaled Down Fluid Text Size */
  font-size: clamp(1.1rem, 2.0vw, 1.4rem);
  
  /* Smooth Hover Interpolation Curve */
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
}

/* --- Interactive Hover Effect --- */
.h6-cta-button:hover {
  background-color: #365579;
  color: #ffffff;
  box-shadow: 0 6px 12px rgba(84, 131, 66, 0.25);
  transform: translateY(-2px);
}

/* --- Click / Active Effect --- */
.h6-cta-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 4px rgba(84, 131, 66, 0.2);
}

/* ==========================================================================
   HIGH CONTRAST MODIFIER (.h6-cta-button-high-contrast)
   ========================================================================== */
.h6-cta-button-high-contrast {
  border: 4px solid #1a2c14;
  background-color: #ffffff;
  color: #0b1a3a;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.08);
}

/* --- High Contrast Hover Curve --- */
.h6-cta-button-high-contrast:hover {
  background-color: #0b1a3a;
  border-color: #0b1a3a;
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(11, 26, 58, 0.3);
}

/* ==========================================================================
   TYPOGRAPHY PROFILE CONFIGURATION
   ========================================================================== */
.h6-subheading {
  font-family: var(--h6-font-main);
  font-size: 1.4rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--h6-color-green-label);
  margin-top: 0;
  margin-bottom: 0.75rem;
  display: block;
}

.h6-main-title {
  font-family: var(--h6-font-main);
  font-size: clamp(2.3rem, 4vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--h6-color-blue-dark);
  margin-top: 0;
  margin-bottom: 1.25rem;
  letter-spacing: 0.01em;
}

.h6-sub-title {
  font-family: var(--h6-font-main);
  font-size: clamp(1.25rem, 3vw, 2rem);
  font-weight: 500;
  line-height: 1.6;
  color: #4d8c40;
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.h6-featured-text-description {
  font-family: var(--h6-font-main);
  font-size: 1.45rem;
  line-height: 1.6;
  letter-spacing: 1.2px;
  color: var(--h6-color-text-dark);
  font-weight: 500;
  border-left: 4px solid var(--h6-color-blue-dark);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.h6-main-text-description {
  font-family: var(--h6-font-main);
  font-size: 1.3rem;
  line-height: 1.5;
  color: var(--h6-color-text-body);
  margin-top: 0;
  margin-bottom: 1.5rem;
}

.h6-alert-banner {
  font-family: var(--h6-font-main);
  background-color: var(--h6-color-alert-bg);
  border: 2px solid var(--h6-color-alert-border);
  border-left: 5px solid var(--h6-color-alert-border);
  color: var(--h6-color-alert-text);
  padding: 1rem 1.5rem;
  border-radius: 6px;
  margin-bottom: 2rem;
}
/* ==========================================================================
   GLOBAL LAYOUT STRUCTURAL WRAPPERS
   ========================================================================== */
.h6-layout-section {
  width: 100%;
  padding: 1rem 1rem;
  box-sizing: border-box;
}

.h6-layout-container {
  width: 100%;
  max-width: var(--h6-max-width);
  margin: 0 auto;
  margin-top: 1.5rem;
}


/* ==========================================================================
   COMPONENT: BALANCED SERVICES GRID LAYOUT (INTEGRATED SPECIFIC EXTRA FIX)
   ========================================================================== */



/* Structural block element clear wrapper settings */
.h6-services-container {
  width: 100%;
  display: block;
  clear: both;
  box-sizing: border-box;
  margin-bottom: 45px; /* Creates clean breathing room above your interactive icon track area */
}


/* The Core 4x2 Horizontal Grid Architecture Matrix */
.h6-services-grid {
  display: grid;
  padding: 1.19rem;
  grid-template-columns: repeat(4, 1fr); /* Generates 4 columns across rows flawlessly */
  grid-auto-rows: 1fr;                   /* Forces every single element box height into total unity */
  gap: 1rem;                          /* Clean spatial alignment gaps surrounding buttons */
  width: 100%;
  box-sizing: border-box;
  align-items: stretch; 
}

/* Single Service Block Anchor Element styling configuration rules */
.h6-service-btn {
  display: flex;
  align-items: center;      
  justify-content: center;  
  text-align: center;
  box-sizing: border-box;
  text-decoration: none;
  
  padding: 0.3rem 0.3rem; 
  border-radius: 8px;
  background-color: #eceff1fd;
  border: 5px solid rgba(93, 161, 62, 0.952);
  
  font-family: var(--h6-font-main);
  color: #3c668f;
  font-size: var(--h6-font-size-body);
  font-weight: 700;
  line-height: 1.2; 
  
  transition: var(--h6-transition);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* Link Actions Hover Profile Curves */
.h6-service-btn:hover {
  background-color: var(--h6-color-blue-dark);
  color: var(--h6-color-white);
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.25);
}

.h6-service-btn:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS (Fluid Screen Optimization Rules)
   ========================================================================== */

/* Tablet Screen Sizes: Adapts to a 2-column wide layout profile block */
@media (max-width: 1024px) {
  .h6-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .servicefeature-wrapper {
    padding: 40px 1rem; /* Lowers desktop vertical padding for medium devices */
  }
}

/* Mobile Screen Sizes: Vertically lines up elements cleanly to match narrow device viewports */
@media (max-width: 600px) {
  .h6-services-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto; /* Relaxes uniform row limits for tight responsive mobile stacking */
    gap: 1rem;
  }

    .h6-service-btn {
    min-height: 48px;     /* Core Fix: Enforces Google's minimum required touch target footprint height */
    padding: 0.75rem 1rem; /* Bumps up internal cushion so text never hugs the thick borders on narrow rows */
  }
  
  .servicefeature-main-title {
    font-size: clamp(2rem, 8vw, 2.8rem); /* Fluid text fallback to prevent header screen clip overflow */
    margin-bottom: 20px;
  }
}





/* --- THEME VARIATION OVERRIDES --- */
.h6-layout-section.h6-theme-dark {
  background-color: #34495e;
  color: var(--h6-color-white);
}

.h6-layout-section.h6-theme-dark .h6-subheading {
  color: #79c16b; /* Muted neon accessibility green for readability against dark backgrounds */
}

.h6-layout-section.h6-theme-dark .h6-main-title {
  color: var(--h6-color-white);
}

.h6-layout-section.h6-theme-dark .h6-main-text-description {
  color: #e2e8f0;
}





/* ==========================================================================
   COMPONENT 1: HERO TITLE CONTAINER WITH BACKGROUND PIC OPTION
   ========================================================================== */
/* ==========================================================================
   ENHANCED HERO & NOTICE INTERFACES (Scoped with h6-)
   ========================================================================== */




.h6-hero-wrapper {
  position: relative;
  width: 100%;
  padding: clamp(4rem, 8vw, 4rem) 1.5rem; /* Dynamic fluid padding layout scales smoothly */

  /* CRITICAL PERFORMANCE FALLBACK: Prevents visual jumps or blank screens prior to image loading */
  background-color: #2f4358; 
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  display: flex;
  align-items: center;
  box-sizing: border-box;


}

/* Enhanced Background Layer Blending overlay script logic */
.h6-hero-wrapper.h6-has-bg {
  /* Added a linear contrast scrim gradient to guarantee text is completely readable regardless of image brightness */
  background-image: linear-gradient(
    rgba(17, 29, 41, 0.85), 
    rgba(40, 63, 85, 0.75)
  ), var(--h6-hero-bg);
}

/* Force light contrast on headings when overlaid on hero background images */
.h6-hero-wrapper .h6-main-title {
  color: var(--h6-color-white);
  font-size: var(--h6-font-size-hero-title); /* Uses our updated fluid typography system scale */
  max-width: 1300px;
}

.h6-hero-wrapper .h6-sub-title {
  color: #e2e8f0; /* Soft contrast silver readability tone */
  font-size: var(--h6-font-size-card-title);
  margin-bottom: 0;
  max-width: 940px;
}

.h6-hero-wrapper .h6-subheading {
  color: #79c16b; /* Highly visible neon-accent label contrast setting */
}

/* --- OPTIMIZED ACCESSIBLE NOTICE HOOKS --- */
.h6-alert-banner {
  font-family: var(--h6-font-main);
  background-color: var(--h6-color-alert-bg);
  border: 1px solid var(--h6-color-alert-border);
  border-left: 6px solid var(--h6-color-alert-border);
  color: var(--h6-color-alert-text);
  padding: 1.25rem 1.5rem;
  border-radius: 8px;
  margin-bottom: 2rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.h6-alert-badge {
  font-size: 1.25rem;
  line-height: 1;
  user-select: none;
}

.h6-alert-body-content {
  font-size: 1.3rem;
  line-height: 1.5;
}


.h6-hero-container {
  width: 100%;
  max-width: var(--h6-max-width);
  margin: 0 auto;
}

/* ==========================================================================
   COMPONENT 2: BASIC FLEXIBLE CARD GRID LAYOUTS (2 and 3 Columns)
   ========================================================================== */
.h6-card-grid {
  display: grid;
  gap: 2rem;
  width: 100%;
}

.h6-grid-2-col { grid-template-columns: 1fr; }
.h6-grid-3-col { grid-template-columns: 1fr; }

@media (min-width: 640px) {
  .h6-grid-2-col { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
  .h6-grid-3-col { grid-template-columns: repeat(3, 1fr); }
}

.h6-card-item, .h6-visual-card {
  background-color: #eeeeee;
  border: 2px solid #7ba070;
  border-radius: 8px;
  padding: 1rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
  transition: var(--h6-transition);
  box-sizing: border-box;
}

.h6-card-item, .h6-visual-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(56, 56, 55, 0.596);
}

/* Accessibility visually-hidden utility scoped to your framework */
.h6-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Structural card architecture & transition bindings */
.h6-visual-card { display: flex; flex-direction: column; cursor: pointer; }

/* Inheriting typography and color palettes from your .h6-theme-dark definitions */
.h6-card-body-text { 
  padding-top: 1.25rem; 
  font-family: var(--h6-font-main); 
  font-size: var(--h6-font-size-body); 
  line-height: 1.6; 
  color: #e2e8f0; /* Matches your theme's .h6-main-text-description color variable */
}
.h6-card-body-text p { margin: 0 0 1.25rem 0; }
.h6-card-body-text p:last-child { margin-bottom: 0; }
.h6-card-body-text strong { font-weight: 700; color: var(--h6-color-white); }

/* First Paragraph Font Enhancement */
.h6-card-body-text p:first-of-type {
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  line-height: 1.5;
  color: var(--h6-color-white);
}

/* Image Container Frame (Locks aspect ratios to ensure Zero Cumulative Layout Shift) */
.h6-card-media { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 16px; overflow: hidden; background: rgba(255,255,255,0.05); transition: var(--h6-transition); }
.h6-card-media picture,
.h6-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.h6-card-media-short { 
  position: relative; 
  width: 100%; 
  /* Force a maximum height limit */
  height: 320px; 
  border-radius: 16px; 
  overflow: hidden; 
  background: rgba(255,255,255,0.05); 
  transition: var(--h6-transition); 
}

/* This ensures the image stretches horizontally AND vertically to fill the 16:9 box */
.h6-card-media-short img,
.h6-card-media-short picture {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;       /* Automatically crops and fills perfectly without stretching the content */
  display: block;
}


/* Badge overlay leveraging system variables */
.h6-card-tag { 
  position: absolute; 
  top: 6px; 
  left: 6px; 
  z-index: 2; 
  background: #447730;
  color: var(--h6-color-white); 
  font-family: var(--h6-font-main); 
  font-size: clamp(1.15rem, 1.8vw, 1.45rem); 
  font-weight: 700; 
   letter-spacing: 0.05rem; 
  padding: 0.45rem 0.55rem; 
  border-radius: 4px; 
}

/* Integrated Hover Animation using your system styles */
.h6-visual-card:hover .h6-card-media {
  transform: translateY(-5px);
  box-shadow: 0 10px 15px -3px rgba(56, 56, 55, 0.596);
}


/* ==========================================================================
   COMPONENT 3: ASYMMETRIC GRID SYSTEM (Split Configurations)
   ========================================================================== */
.h6-split-layout {
  display: grid;
  padding: 1rem;
  gap: 1rem;
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 992px) {
  /* Pattern A: 1/3 text left side layout, 2/3 imagery elements grid right side */
  .h6-split-gallery {
    grid-template-columns: 1fr 2fr;
  }
  /* Pattern B: 3/4 layout for card sets left, 1/4 info description block right side */
  .h6-split-blogs {
    grid-template-columns: 3fr 1fr;
  }
}

/* --- PATTERN A DETAIL ELEMENTS (Gallery Slider Style Split) --- */
.h6-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.h6-gallery-item {
  width: 100%;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

.h6-gallery-item img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.h6-slider-controls {
  display: flex;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.h6-control-btn {
  background: transparent;
  border: 1px solid #cbd5e0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--h6-transition);
}

.h6-layout-section.h6-theme-dark .h6-control-btn {
  border-color: #718096;
  color: var(--h6-color-white);
}

.h6-control-btn:hover {
  background: var(--h6-color-blue-dark);
  color: var(--h6-color-white);
  border-color: var(--h6-color-blue-dark);
}

/* --- PATTERN B DETAIL ELEMENTS (Blog Cards Block Set) --- */


.h6-blog-card-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  align-items: start; /* Forces all grid items to align perfectly to the top line */
}


/* 2. Desktop Layout Breakpoint: Seamlessly split into 3 side-by-side columns on larger displays */
@media (min-width: 768px) {
  .h6-blog-card-wrapper {
    grid-template-columns: repeat(3, 1fr) 
  }
}

.h6-blog-card {
  background: rgba(44, 55, 70, 0.651);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

}

.h6-blog-card-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.h6-blog-card-content {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  
   
}

.h6-blog-card-title {
  font-family: var(--h6-font-main);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.4;
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: var(--h6-color-white);
}

.h6-blog-card-text {
  font-family: var(--h6-font-main);
  font-size: 1.2rem;
  line-height: 1.5;
  color: #cbd5e0;
  margin-bottom: 1.5rem;
  flex-grow: 1;
}

.h6-blog-card-link {
  font-family: var(--h6-font-main);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--h6-color-white);
  text-decoration: none;
  margin-top: auto;
  display: inline-flex;
  align-items: center;
}

.h6-blog-card-link:hover {
  text-decoration: underline;
}

/* ==========================================================================
   6. VALUE PROPOSITION & ICON-LIST LAYOUTS (Scoped with h6-)
   ========================================================================== */

/* Centered Header Variant */
.h6-center-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.h6-center-header .h6-main-title {
  margin-bottom: 0;
}

/* Bold Callout Banner with Thick Gold Accent Border */
.h6-accent-callout-banner {
  background-color: #3f546b; /* Matches dark palette */
  color: var(--h6-color-white);
  padding: 1rem 2rem;
  border-radius: 4px;
  border-left: 14px solid #cca142; /* Thick gold border accent on left edge */
  font-family: var(--h6-font-main);
  font-size: 1.05rem;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  max-width: 1300px;
}

.h6-accent-callout-banner strong {
  color: #cca142; /* Highlighted gold title phrase text */
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Asymmetric 50/50 Split for Images and Listed Points */
.h6-split-value-block {
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: 1fr;
  padding: 0px;
  margin: 0;
}

@media (min-width: 992px) {
  .h6-split-value-block {
    grid-template-columns: 1fr 1fr; /* True side-by-side layout on desktop */
  }
}


/* Asymmetric 70/30 Split for Images and Listed Points */

.h6-split-value-block-70 {
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: 1fr; /* Stacked on mobile */
  padding: 0px;
  margin: 0;
}

@media (min-width: 992px) {
  .h6-split-value-block-70 {
    /* Left side gets roughly 70% width, Right side gets roughly 30% width */
    grid-template-columns: 7fr 3fr; 
  }
}


/* Asymmetric 60/40 Split for Images and Listed Points */

.h6-split-value-block-60{
  display: grid;
  gap: 1rem;
  align-items: center;
  grid-template-columns: 1fr; /* Stacked on mobile */
  padding: 0px;
  margin: 0;
}

@media (min-width: 992px) {
  .h6-split-value-block-60 {
    /* Left side gets roughly 70% width, Right side gets roughly 30% width */
    grid-template-columns: 6fr 4fr; 
  }
}


/* Image Framing Container with Explicit Aspect Ratio Layout */
.h6-value-media-frame {
  width: 100%;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.h6-value-media-frame img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

/* List Content Rows Container */
.h6-value-list-wrapper {
  width:100%;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

/* Single List Item Block Row */
.h6-value-list-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  font-family: var(--h6-font-main);
}

/* Icon Container Scopes */
.h6-list-icon-box {
  flex-shrink: 0;
  width: 28px;
  font-size: 1.5rem;
  line-height: 1;
  text-align: center;
  color: #4d8c40; /* Vibrant green accent matching your branding tags */
}

/* Internal Typography Hierarchy inside Rows */
.h6-list-content-box {
  display: flex;
  flex-direction: column;
}

.h6-list-heading {
  font-size: 1.8rem;
  font-weight: 700;
  color: #2c587b; /* Deep branding blue slate */
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.h6-list-tagline {
  font-size: 1.4rem;
  font-weight: 700;
  color: #4878b3; /* Accent navy-blue string text */
  margin: 0 0 0.5rem 0;
}

.h6-list-description {
  font-size: 1.17rem;
  line-height: 1.5;
  color: var(--h6-color-text-body);
  margin: 0;
}

.h6-list-description strong {
  color: var(--h6-color-text-dark);
}
/* ==========================================================================
   7. INTERACTIVE MOUSE-OVER / HOVER STATES (Scoped with h6-)
   ========================================================================== */

/* --- Standard Layout Cards Interactions --- */
.h6-card-item {
  /* Ensure a solid transition baseline is active */
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              box-shadow 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              border-color 0.3s ease;
  will-change: transform, box-shadow; /* Optimizes browser rendering layer */
}

.h6-card-item:hover {
  transform: translateY(-6px); /* Smooth vertical lift */
  border-color: var(--h6-color-blue-dark); /* Subtle shift to brand primary color */
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 
              0 10px 10px -5px rgba(0, 0, 0, 0.04); /* Deep rich volumetric shadow */
}


/* --- Dark Theme Blog Cards Interactions --- */
.h6-blog-card {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94), 
              background-color 0.3s ease, 
              box-shadow 0.3s ease;
  will-change: transform, background-color;
}

.h6-blog-card:hover {
  transform: translateY(-4px) scale(1.01); /* Gentle scaling effect */
  background-color: rgba(255, 255, 255, 0.14); /* Illuminated surface brightness */
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Link Arrow Translation effect inside the Blog Cards */
.h6-blog-card-link span {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.h6-blog-card:hover .h6-blog-card-link span {
  transform: translateX(5px); /* Smooth link arrow sliding displacement */
  color: #79c16b; /* Accent green color change on active link arrow */
}


/* ==========================================================================
   8. 4-COLUMN SAMPLING INFOGRAPHIC LAYOUT (Scoped with h6-)
   ========================================================================== */

.h6-sampling-grid {
  display: grid;
  gap: 1.5rem;
  width: 100%;
  grid-template-columns: 1fr;
}

@media (min-width: 576px) {
  .h6-sampling-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 992px) {
  .h6-sampling-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Premium Contrast Interactive Card */
.h6-sampling-card {
  background: var(--h6-color-white);
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 2rem 1.25rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.3s ease,
              box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform, border-color, box-shadow;
}

/* High Contrast Hover Over Behavior */
.h6-sampling-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: var(--h6-color-blue-dark); /* Dark solid blue replacement boundary line */
  box-shadow: 0 20px 30px -10px rgba(44, 88, 123, 0.15);
}

/* Circular Central Floating Icon Badge Frame */
.h6-sampling-icon-badge {
  width: 54px;
  height: 54px;
  background-color: var(--h6-color-blue-dark);
  color: var(--h6-color-white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.25rem;
  transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Icon response tracking card interaction */
.h6-sampling-card:hover .h6-sampling-icon-badge {
  background-color: var(--h6-color-green-label); /* Swaps background on focus */
  transform: rotate(10deg);
}

/* Internal Metadata Architecture Styling */
.h6-sampling-card .h6-subheading {
  font-size: 1.35rem;
  font-weight: 700;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 1.25rem;
}

/* Card Specific Title Coloring */
.h6-color-air { color: #5c9354; }
.h6-color-surface { color: #3e818f; }
.h6-color-bulk { color: #436d93; }
.h6-color-cavity { color: #729653; }

.h6-meta-tag {
  font-family: var(--h6-font-main);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--h6-color-blue-dark);
  text-transform: uppercase;
  margin: 0 auto 0.5rem auto;
  display: block;
}

.h6-meta-tag.h6-tag-orange {
  color: var(--h6-color-alert-border);
}

.h6-sampling-text {
  font-family: var(--h6-font-main);
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--h6-color-text-dark);
  margin: 0 0 1.5rem 0;
}

.h6-sampling-text strong {
  font-weight: 700;
}

/* Sub-list structure inside cards */
.h6-sampling-bullets {
  font-family: var(--h6-font-main);
  font-size: 0.88rem;
  line-height: 1.4;
  color: #4a5568;
  margin: 0;
  padding: 0;
  list-style: none;
  width: 100%;
}

.h6-sampling-bullets li {
  margin-bottom: 0.4rem;
}

/* ==========================================================================
   9. INTERACTIVE TABBED SERVICE MATRIX LAYOUT (Scoped with h6-)
   ========================================================================== */

/* Top Navigation Grid */
.h6-tabs-nav-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 800px;
  margin: 0 auto 2rem auto;
}

/* Individual Tab Button Element */
.h6-tab-btn {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid transparent;
  border-radius: 12px;
  padding: 1.5rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: var(--h6-transition);
  text-align: center;
}

/* Base icon block configuration inside buttons */
.h6-tab-icon-box {
  width: 56px;
  height: 56px;
  background-color: var(--h6-color-white);
  color: var(--h6-color-blue-dark);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  transition: var(--h6-transition);
}

.h6-tab-label {
  font-family: var(--h6-font-main);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--h6-color-white);
  line-height: 1.3;
}

/* Mouse-over Hover States */
.h6-tab-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Active / Selected Tab State (Matching the screenshot yellow focus border look) */
.h6-tab-btn.h6-active {
  border-color: #f1c40f; /* High-contrast golden yellow border focus marker */
}

.h6-tab-btn.h6-active .h6-tab-icon-box {
  background-color: var(--h6-color-blue-dark);
  color: var(--h6-color-white);
}

/* --- Content Panel Pane --- */
.h6-tabs-content-viewport {
  position: relative;
  width: 100%;
}

.h6-tab-panel {
  display: none; /* Hidden by default */
  background: var(--h6-color-white);
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  animation: h6-fade-in 0.3s ease forwards;
}

/* Active panel style state display hook */
.h6-tab-panel.h6-active {
  display: block;
}

.h6-panel-split-layout {
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
}

@media (min-width: 768px) {
  .h6-panel-split-layout {
    grid-template-columns: 1.5fr 1fr; /* Text on left, link/image components on right */
  }
}

/* Content Element Structuring */
.h6-panel-heading {
  font-family: var(--h6-font-main);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--h6-color-blue-dark);
  margin: 0 0 1rem 0;
}

.h6-panel-desc {
  font-family: var(--h6-font-main);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--h6-color-text-dark);
  margin: 0;
}

.h6-panel-desc strong {
  font-weight: 700;
}

/* Learn More Action Button */
.h6-panel-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background-color: #4d8c40; /* Branding solid green accent background from screenshot */
  color: var(--h6-color-white);
  text-decoration: none;
  font-family: var(--h6-font-main);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 6px;
  margin-bottom: 1.5rem;
  transition: var(--h6-transition);
  align-self: flex-start;
}

.h6-panel-cta-btn:hover {
  background-color: #3e7233;
}

/* Performance CSS fade transition animation rule */
@keyframes h6-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ==========================================================================
   PRODUCTION REFINEMENTS & REWRITES (Scoped with h6-)
   ========================================================================== */

/* Enhanced Bullet Lists for Section Galleries */
.h6-gallery-bullet-list {
  font-family: var(--h6-font-main);
  font-size: var(--h6-font-size-body);
  line-height: 1.6;
  color: var(--h6-color-text-body);
  margin: 0 0 2rem 0;
  padding-left: 1.25rem;
}

.h6-gallery-bullet-list li {
  margin-bottom: 0.5rem;
}

/* Tinted Layout Variant Background Variable */
.h6-layout-section.h6-theme-tinted {
  background-color: #f7fafc;
}

/* Standardizing the Card Headings without inline hooks */
.h6-card-item-title {
  font-family: var(--h6-font-main);
  font-size: var(--h6-font-size-card-title);
  font-weight: 700;
  color: var(--h6-color-blue-dark);
  margin-top: 0;
  margin-bottom: 0.75rem;
}

/* ACCESSIBILITY FOCUS: Full Card Click Target expansion layer */
.h6-blog-card {
  position: relative; /* Anchor point context for inner link tags */
}

.h6-blog-card-link::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1; /* Scales the clickable area across the entire card body */
}

/* Ensure link text elements remain active underneath layout overlays */
.h6-blog-card-link {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   VALUE PROPOSITION SEMANTIC UPGRADES (Scoped with h6-)
   ========================================================================== */

/* Enhanced Callout Banner Internal Text Controls */
.h6-accent-callout-banner {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.h6-callout-heading {
  font-family: var(--h6-font-main);
  font-size: var(--h6-font-size-card-title);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #d8ad51; /* Premium Gold Accent color text header */
  margin: 0;
}

.h6-callout-text {
  margin: 0;
  font-size: 1.7rem;
  color: #f3f1ee;
  line-height: 1.6;
}

/* Reset Default Browser Unordered List Spacings */
ul.h6-value-list-wrapper {
  list-size: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

li.h6-value-list-item {
  list-style: none; /* Removes bullet overlays */
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}

/* Clear Responsive Fluid Image Max Width Constraints */
.h6-value-media-frame img {
  max-width: 100%;
  height: auto; /* Maintains proportional scaling parameters on mobile screen footprints */
}

/* Custom Typography Nesting adjustments */
.h6-list-heading {
  font-size: clamp(1.1rem, 2vw, 1.25rem); /* Upgraded fluid heading size calculation */
}

/* ==========================================================================
   4-COLUMN SAMPLING ALIGNMENT UPGRADES (Scoped with h6-)
   ========================================================================== */

/* Section Layout Token Additions */
.h6-layout-section.h6-theme-light-gray {
  background-color: #f8fafc;
}

.h6-mb-medium {
  margin-bottom: 3.5rem;
}

/* Card Flex Uniformity Fixes */
.h6-sampling-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: 100%; /* Forces cards to expand to matching heights within grid rows */
}

/* Semantic Metadata Header Refinement */
h4.h6-meta-tag {
  font-family: var(--h6-font-main);
  font-size: var(--h6-font-size-meta);
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--h6-color-blue-dark);
  text-transform: uppercase;
  margin: 0 auto 0.5rem auto;
  display: block;
}

h4.h6-meta-tag.h6-tag-orange {
  color: var(--h6-color-alert-border);
}

/* Alert Condition Text Control */
.h6-sampling-alert-text {
  font-family: var(--h6-font-main);
  font-size: var(--h6-font-size-body);
  color: var(--h6-color-alert-border);
  font-weight: 700;
  margin: 0 auto 1.25rem auto;
}

/* Bullet Point Container Alignment Engine */
.h6-sampling-bullets {
  width: 100%;
  margin-top: auto; /* Pushes list section down cleanly to align card bases */
  padding-left: 1.25rem;
  text-align: left;
}

.h6-sampling-bullets li {
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--h6-color-text-dark);
  margin-bottom: 0.5rem;
}

/* ==========================================================================
   INTERACTIVE TAB REFINEMENTS & REWRITES (Scoped with h6-)
   ========================================================================== */

/* Shifting Raw Gradients into Class Rules */
.h6-layout-section.h6-gradient-bg {
  background: linear-gradient(135deg, #2c3e50, #34495e);
}

.h6-text-silver {
  color: #cbd5e0;
}

/* Fluid Content Height Equalization to Prevent Layout Shift (CLS) */
.h6-panel-split-layout {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  .h6-panel-split-layout {
    flex-direction: row;
    align-items: stretch; /* Forces equal heights on text and media block wrappers */
  }
  
  .h6-panel-text-block {
    flex: 1.5;
  }
  
  .h6-panel-media-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Ensures the CTA button and Image space out perfectly */
  }
  
  .h6-split-layout.h6-split-gallery {
    grid-template-columns: 1fr 1fr;
  }

}

/* Smooth Arrow Slider Animation inside Tab Panels */
.h6-panel-cta-btn span {
  display: inline-block;
  transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.h6-panel-cta-btn:hover span {
  transform: translateX(4px);
}