/****************************************
  1) BASE RESET & TYPOGRAPHY
 ****************************************/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


:root {
  --radius-1: 6px;
  --radius-2: 10px;
  --shadow-1: 0 2px 10px rgba(0,0,0,.06);
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

img,
video,
iframe {
  max-width: 100%;
  display: block;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

a {
  color: #007acc;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}


/* Things that should feel like cards/images */
.hero-tagline,
.why-tsi.single-col,
.personnel-card,
.solution-item img,
.service-image img,
.quality-image img,
.youtube-placeholder img,
.certifications img {
  border-radius: var(--radius-2);
  overflow: hidden; /* keeps rounded corners clean on contained media */
}

.solution-item,
.industry-item,
.contact-content,
.service-block {
  border-radius: var(--radius-1);
  background: #fff;
  box-shadow: var(--shadow-1);
  padding: 1rem; /* only applies where you want a true "card" */
}


/* Buttons & CTA chips */
.site-nav ul li a.nav-quote,
.btn-primary,
.btn-download {
  border-radius: var(--radius-1);
}

/****************************************
  2) HEADER & NAVIGATION
 ****************************************/
.site-header {
  background: #fff;
  border-bottom: 1px solid #e5e5e5;
  position: sticky;
  top: 0;
  z-index: 100;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
}

.logo img {
  height: 60px;
}

/* Important: position relative so the dropdown menu can position absolutely */
.site-nav {
  position: relative;
}

.site-nav ul {
  display: flex;         /* show horizontally by default */
  gap: 1.5rem;           /* spacing between items */
  position: static;      /* no absolute positioning for desktop */
  background: none;
  border: none;
  box-shadow: none;
  padding: 0;
  margin: 0;
  list-style: none;
}

.site-nav ul li {
  margin-bottom: 0.5rem;
  list-style: none; /* remove bullet for each li */
}

.site-nav ul li a {
  color: #333;
  font-weight: normal;
  text-transform: none; 
  font-size: 1rem;
  padding: 0.5rem;
  display: block;
}

.site-nav ul li a:hover {
  background: #f4f4f4;
}

.site-nav ul li::before,
.site-nav ul li::after {
  content: none !important; /* kill any leftover pseudo elements */
}

.nav-toggle {
  display: none; /* hidden by default, shown on mobile via media queries */
  background-color: #005a9c;  /* Button background color */
  color: #fff;               /* Icon color */
  border: none;
  border-radius: 4px;
  font-size: 1.5rem;
  padding: 0.4rem 0.75rem;
  cursor: pointer;
  transition: background 0.3s ease;
}

/* On hover (desktop emulators or if you want it on mobile too) */
.nav-toggle:hover {
  background-color: #00457c;
}

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

/* Make the "active" nav link stand out (e.g. 'Request a Quote') */
.site-nav ul li a.active {
  background-color: #005a9c; /* brand color or CTA color */
  color: #fff;
  font-weight: 600;         /* bolder text */
  padding: 0.5rem 1rem;     /* some spacing around the text */
  border-radius: 4px;       /* optional rounding */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* subtle shadow */
  transition: background 0.3s ease;
}

.site-nav ul li a.active:hover {
  background-color: #00457c; /* darken on hover */
  text-decoration: none;     /* no underline on hover */
}

/* Make the "Request a Quote" link stand out like a CTA button */
.site-nav ul li a.nav-quote {
  background-color: #5DA448; /* or another accent color */
  color: #fff;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  display: inline-block;  /* ensure the background wraps the text */
  text-transform: uppercase; /* optional for a bolder look */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* subtle shadow */
  transition: background 0.3s ease;
  margin-left: 0.5rem; /* small spacing if needed */
}

/* Hover effect for desktop */
.site-nav ul li a.nav-quote:hover {
  background-color: #00457c; /* slightly darker on hover */
  text-decoration: none;     /* remove any underline */
}

/****************************************
  3) HERO / VIDEO SECTIONS
     (Used on other pages, e.g. homepage)
 ****************************************/
.hero {
  position: relative;
  height: 60vh;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

.hero-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-overlay {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-top: 2rem;
}

.hero-tagline {
  display: inline-block;
  background: rgba(255, 255, 255, 0.8);
  padding: 1rem 2rem;
  border-radius: 4px;
}
.hero-tagline h1 {
  font-size: 2rem;
  color: #005a9c;
  margin-bottom: 0.5rem;
}
.hero-tagline p {
  font-size: 1.1rem;
  color: #333;
}

/* CONTACT PAGE HERO */
.contact-content a[href^="mailto"] {
  color: #005a9c;
  font-weight: 600;
  text-decoration: none; /* remove underline if you want */
}
.contact-content a[href^="mailto"]:hover {
  text-decoration: underline; /* or background color, etc. */
}

.contact-hero {
  position: relative;
  height: 40vh; /* Adjust as desired */
  background: url('../images/contact-hero-bg.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-hero .hero-overlay {
  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.contact-hero h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

.contact-info {
  margin-bottom: 3rem; 
}

/* Two-column layout with a “card” for the text */
.contact-block {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 2rem; /* spacing above the block */
}

/* Text column with a subtle background card effect */
.contact-content {
  flex: 1;
  background: #f9f9f9;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

.contact-content h2 {
  color: #005A9C;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.contact-content p {
  line-height: 1.6;
  margin-bottom: 1rem;
  color: #444;
}

/* Image column */
.contact-image img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* PERSONNEL GRID */
.personnel {
  padding: 2rem 0;
  text-align: center;
}
.personnel h2 {
  color: #005A9C;
  font-size: 2rem;
  margin-bottom: 2rem;
}
.personnel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
}
.personnel-card {
  background: #f9f9f9;
  border-radius: 6px;
  padding: 1rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.personnel-card img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.personnel-card h3 {
  color: #007ACC;
  font-size: 1.1rem;
  margin-bottom: 0.2rem;
}
.personnel-card p {
  margin-bottom: 0;
  font-size: 0.95rem;
  color: #555;
}

/****************************************
  4) ABOUT PAGE STYLES
 ****************************************/
.about.container h2 {
  font-size: 2rem;
  color: #005a9c;
  margin-bottom: 1rem;
  text-align: center;
}

.about.container h3 {
  font-size: 1.3rem;
  color: #007acc;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
}

.about.container p,
.about.container li {
  font-size: 1.05rem;
  color: #444;
  margin-bottom: 1rem;
  line-height: 1.7;
}

.about.container ul {
  padding-left: 1.5rem;
  list-style-type: disc;
}

.about-hero {
  position: relative;
  height: 40vh; /* Adjust as desired */
  background: url('../images/deception-pass-bridge.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}


.about-hero .hero-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-hero h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}


/****************************************
  5) QUALITY PAGE HERO
 ****************************************/
.quality-hero {
  position: relative;
  height: 40vh; /* Adjust as needed */
  background: url('../images/quality-hero-bg.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quality-hero .hero-overlay {
  background-color: rgba(0,0,0,0.4);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.quality-hero h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
}

/****************************************
  6) QUALITY SECTION
 ****************************************/
.quality.container {
  padding: 2rem 0;
  text-align: left;
}

.quality.container h2 {
  color: #005A9C;
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.quality.container h3 {
  color: #007ACC;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.quality.container p {
  color: #444;
  font-size: 1.05rem;
  line-height: 1.7;
  margin-bottom: 1rem;
}

.cert-download {
  margin-top: 2rem;
  text-align: center;
}
.cert-download p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
}

/* Download Button */
.btn-download {
  display: inline-block;
  background: #005A9C;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.btn-download:hover {
  background: #00457c;
}

/****************************************
  7) INDUSTRIES SECTION — CLEAN
 ****************************************/
.industries h2 {
  text-align: center;
  margin: 3rem 0 1.5rem;
  font-size: 1.9rem;
  color: #005a9c;
}


/* Extra breathing room below Industries */
.industries.container {
  padding-bottom: 2.5rem;   /* padding avoids margin-collapsing with next section */
}

.industry-grid {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr; /* 1 column on mobile */
}

@media (min-width: 768px) {
  .industry-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 columns tablet/desktop */
  }
}

.industry-item h3 {
  font-size: 1.25rem;
  margin: 0 0 .35rem;
  color: #007acc;
}

.industry-item p {
  font-size: .98rem;
  color: #444;
  margin: 0 0 .5rem;
}

.industry-item ul {
  list-style: disc;                 /* real bullets */
  list-style-position: outside;     /* text aligns just past bullet */
  padding-left: 1.25rem;            /* bullet gutter */
  margin: .25rem 0 0;
  font-size: .98rem;
  color: #444;
}

.industry-item li {
  margin: .3rem 0;
  line-height: 1.5;
}

.industry-item li::marker {
  color: #005a9c;
  font-weight: 700;
}
/****************************************
  8) MEDIA SECTION (VIDEO EMBEDS)
 ****************************************/
.media.container {
  max-width: 100% !important;
  padding: 0 1rem;
  margin: 3rem 0;
  display: flex;
  justify-content: center;
}
.video-wrap {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 1rem;
}
.video-wrap iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
}

/****************************************
  9) SOLUTIONS SECTION
 ****************************************/
.solutions h2 {
  text-align: center;
  margin: 3rem 0 2rem;
  font-size: 1.8rem;
  color: #005a9c;
}
.solutions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.solution-item {
  text-align: center;
}
.solution-item img {
  width: 100%;
  max-width: 250px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  margin: 0 auto;
}
.solution-item h3 {
  margin-top: 0.75rem;
  font-size: 1rem;
  color: #333;
}

/****************************************
  10) QUALITY PAGE: ADDITIONAL
 ****************************************/
.quality h2 {
  text-align: center;
  margin: 3rem 0 1rem;
  font-size: 1.8rem;
  color: #005a9c;
}
.quality p {
  margin-bottom: 1rem;
  color: #444;
}
.quality ul {
  list-style: disc inside;
  margin-bottom: 1rem;
}
.certifications {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  margin-top: 1rem;
}
.certifications img {
  height: 48px;
}

/* Two-column layout for Quality bullet points + image */
.quality-block {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-top: 2rem; /* add spacing above if desired */
}
.quality-text {
  flex: 1;
}
.quality-text h3 {
  color: #007ACC;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.quality-text ul {
  list-style: disc;
  margin-left: 1.5rem;
  line-height: 1.7;
  color: #444;
}
.quality-text ul li {
  margin-bottom: 0.75rem;
}
.quality-image img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* Floated image for bullet wrap (if used) */
.float-right-img {
  float: right;
  width: 300px;
  margin: 0 0 1rem 1rem;
  border-radius: 6px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}
/* Clear the float below the bullet points if needed */
.quality.container::after {
  content: "";
  display: block;
  clear: both;
}
/* Justify paragraphs & list items for a "magazine" look (if desired) */
.quality.container p,
.quality.container li {
  text-align: justify;
}

/****************************************
 11) YOUTUBE PLACEHOLDER
 ****************************************/
.youtube-placeholder {
  position: relative; /* so the button can be absolutely positioned within */
  cursor: pointer;    /* helps indicate clickable area */
}

.youtube-placeholder img {
  display: block;
  width: 100%;
}

.youtube-placeholder .play-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;  /* ensure it's above the img */
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 2rem;
  width: 3rem; height: 3rem;
  display: flex; 
  align-items: center; 
  justify-content: center;
  cursor: pointer;
}
.youtube-placeholder .play-btn:hover {
  background: rgba(0,0,0,0.7);
}


/****************************************
 12) SERVICES PAGE HERO
 ****************************************/
.services-hero {
  position: relative;
  height: 40vh; /* Adjust as desired */
  background: url('../images/hero-services-bg.jpg') center/cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-hero .hero-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.services-hero h1 {
  color: #fff;
  font-size: 2.5rem;
  margin: 0;
  text-align: center;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

/****************************************
 13) SERVICES SECTION LAYOUT
 ****************************************/
.services {
  padding: 2rem 0;
}

.service-block {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  margin-bottom: 3rem;
}
.service-block.reverse {
  flex-direction: row-reverse;
}

.service-image img {
  max-width: 400px;
  width: 100%;
  height: auto;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.service-info {
  flex: 1;
}
.service-info h2 {
  color: #005a9c;
  margin-bottom: 1rem;
  font-size: 1.5rem;
}
.service-info p {
  line-height: 1.7;
  margin-bottom: 1rem;
}
.service-info ul {
  list-style: disc;
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}
.service-info ul li {
  margin-bottom: 0.5rem;
}

/****************************************
 14) SERVICES CALL-TO-ACTION
 ****************************************/
.services-cta {
  background: #f4f4f4;
  padding: 2rem 0;
  text-align: center;
  margin-top: 2rem;
}
.services-cta .container {
  max-width: 800px;
}
.services-cta h2 {
  color: #005a9c;
  font-size: 2rem;
  margin-bottom: 1rem;
}
.services-cta p {
  font-size: 1.1rem;
  color: #444;
  margin-bottom: 1.5rem;
}
.btn-primary {
  display: inline-block;
  background: #005a9c;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.3s ease;
}
.btn-primary:hover {
  background: #00457c;
}

/* PRIVACY POLICY SECTION */
.privacy.container {
  /* Center the content area and add vertical spacing */
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem; 
  line-height: 1.7;
  color: #444; /* or your preferred text color */
}

/* Headings */
.privacy.container h1 {
  text-align: center;
  color: #005a9c;
  margin-bottom: 1rem;
}

.privacy.container h2 {
  color: #005a9c;
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
}

.privacy.container h3 {
  color: #007acc;
  font-size: 1.2rem;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}

/* Paragraphs */
.privacy.container p {
  margin-bottom: 1rem;
}

/* Lists */
.privacy.container ul {
  margin-bottom: 1rem;
  padding-left: 1.5rem;  /* indentation for bullets */
  list-style: disc;      /* disc bullets */
}
.privacy.container li {
  margin-bottom: 0.5rem; /* spacing between list items */
}

/* Optional: Style strong text if desired */
.privacy.container strong {
  color: #005a9c;
}

/****************************************
  QUOTE PAGE HERO
****************************************/
.quote-hero {
  position: relative;
  height: 40vh; /* Adjust as needed */
  /* Use any image you like: */
  background: url('../images/quote.jpg') center/cover no-repeat;
  overflow: hidden; /* in case the overlay or content goes out of bounds */
}

/* The semi-transparent overlay that dims the background */
.quote-hero .hero-overlay {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4); 
  /* Or a gradient, e.g.:
     linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.1))
  */
  z-index: 1; /* behind the text */
}

/* The text container, sits above the overlay */
.quote-hero-content {
  position: relative;
  z-index: 2; /* ensures text is above the overlay */
  text-align: center;
  color: #fff;
  text-shadow: 0 2px 4px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.quote-hero-content h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}
.quote-hero-content p {
  max-width: 600px;
  margin: 0 auto;
  font-size: 1rem;
  line-height: 1.6;
}

/* QUOTE FORM AREA */
.quote-form {
  padding: 2rem 0;
}
.quote-form h2 {
  color: #005A9C;
  font-size: 1.8rem;
  margin-bottom: 1rem;
}
.quote-form-wrap {
  display: flex;
  flex-direction: column;
  gap: 1rem; /* spacing between form fields */
}
.quote-form-wrap label {
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.quote-form-wrap input[type="text"],
.quote-form-wrap input[type="email"],
.quote-form-wrap textarea,
.quote-form-wrap input[type="file"] {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.quote-form-wrap button[type="submit"] {
  align-self: flex-start; /* or center, if you prefer */
}

/****************************************
 15) FOOTER
 ****************************************/
.site-footer {
  background: #f4f4f4;
  padding: 1.5rem 0;
  text-align: center;
  margin-top: 3rem;
}
.site-footer p {
  font-size: 0.9rem;
  color: #666;
}


/* === WHY TSI — polished list === */
.why-tsi.single-col {
  background: #f9f9f9;                 /* cleaner than grey here */
  border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  padding: 2rem 2rem 2.25rem;
  max-width: 980px;                    /* a bit wider but still readable */
}

.why-tsi.single-col h2 {
  text-align: center;
  margin-bottom: 1.25rem;
}

.why-tsi.single-col ul {
  /* stop faked bullets from earlier rules */
  list-style: disc;
  padding-left: 1.25rem;               /* bullet gutter */
  margin: .5rem auto 1.75rem;
  max-width: 820px;
  column-gap: 2rem;                    /* spacing between columns */
}

.why-tsi.single-col li {
  margin: 0 0 .7rem;
  line-height: 1.55;
  break-inside: avoid;                 /* don’t split an li across columns */
}

/* modern bullet styling */
.why-tsi.single-col li::marker {
  color: #0B5EA8;                      /* brand-ish blue */
  font-weight: 700;
}

/* make key phrases pop without shouting */
.why-tsi.single-col li strong {
  color: #0B5EA8;
  font-weight: 700;
}


/* center the badge and give it space */
.why-badge {
  display: flex;
  justify-content: center;
}
.why-badge img {
  border-radius: 12px;
  max-width:  200px;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}


/* About: text left, video right; stacks on mobile */
.about-video-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;  /* text a bit wider than video */
  gap: 2rem;
  align-items: start;
  margin: 2.5rem 0;
}

@media (max-width: 900px) {
  .about-video-row {
    grid-template-columns: 1fr;
  }
}

.about-copy p { margin-bottom: 1rem; }

/* Default two‑column layout (keeps what we had) */
.about-video-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2rem;
  align-items: start;
  margin: 2.5rem 0;
}

/* About: single video centered */
.about-video-row.single {
  display: flex;                 /* override grid when 1 item */
  justify-content: center;       /* center horizontally */
  margin: 2.5rem 0;
}

.about-video-row.single .about-video {
  max-width: 960px;              /* your preferred cap */
  width: 100%;
  margin: 0 auto;                /* double‑ensure centering */
}

/* (Keep your previous .about-video styles: radius, shadow, etc.) */
.about-video {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
  background: #000;
}
.about-video video { width: 100%; display: block; }


/* Accessibility helper for figcaption */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px); white-space: nowrap; border: 0;
}

/* Optional: add a little space before the next section */
.about-more { margin-top: 1.5rem; }

/****************************************
 16) RESPONSIVE ADJUSTMENTS
 ****************************************/

/* switch to two columns on desktop */
@media (min-width: 980px) {
  .why-tsi.single-col ul { columns: 2; }
}

@media (max-width: 768px) {
  /* Anchor the dropdown to the header's right edge */
  .site-header .container { position: relative; }
  .nav-toggle { display: inline-block; } /* ensure hamburger shows on mobile */
  .site-nav { position: static; }

  .site-nav ul {
    position: absolute;
    top: calc(100% + 8px);      /* just below the header */
    right: 1rem;                /* align with right edge / button */
    left: auto;
    width: min(88vw, 280px);    /* responsive width with a sensible cap */
    background: #fff;
    flex-direction: column;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    display: none;              /* hidden until .open is toggled */
    padding: 0.5rem;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    margin: 0;
    list-style: none;
    z-index: 1000;
  }

  .site-nav.open ul { display: flex; }   /* show menu when nav has .open */

  /* Optional: small arrow pointing to the button */
  .site-nav ul::before {
    content: "";
    position: absolute;
    top: -8px;
    right: 20px;
    border-width: 8px 8px 0 8px;
    border-style: solid;
    border-color: #fff transparent transparent transparent;
    filter: drop-shadow(0 -1px 0 rgba(0,0,0,.08));
  }

  /* Hero adjustments */
  .quote-hero { height: 30vh; }
  .quote-hero-content h1 { font-size: 1.8rem; }
  .quote-hero-content p  { font-size: 0.95rem; }

  /* Media container */
  .media.container { padding: 0 1rem; display: block; }
  .video-wrap { width: 100%; max-width: none; }

  /* Quality hero smaller on mobile */
  .quality-hero { height: 30vh; }
  .quality-hero h1 { font-size: 2rem; padding: 0 1rem; }

  /* Services hero smaller on mobile */
  .services-hero { height: 30vh; }
  .services-hero h1 { font-size: 2rem; padding: 0 1rem; }

  /* Add padding to .quality.container so text isn't flush */
  .quality.container { padding: 2rem 1rem; }
  .services.container { padding: 2rem 1rem; }

  /* Stack service blocks vertically */
  .service-block,
  .service-block.reverse { flex-direction: column; }
  .service-block.reverse .service-image { order: 1; }
  .service-block.reverse .service-info  { order: 2; }
  .service-image img { max-width: 100%; margin-bottom: 1rem; }

  /* Float helper reset */
  .float-right-img {
    float: none;
    display: block;
    margin: 0 auto 1rem auto;
    width: 80%;
    max-width: 400px;
  }

  /* CTA look inside dropdown */
  .site-nav ul li a.nav-quote {
    display: block;
    text-align: center;
    margin: 0.5rem 0;
  }

  /* Quote form padding on mobile */
  .quote-form.container { padding: 2rem 1rem; }

  /* Keep hero text padded on small screens */
  .quote-hero-content.container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}