/* Global resets and typography */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------
 * Overrides and utilities
 *
 * The following rules override earlier declarations to adjust spacing and
 * hide certain elements according to the latest design requirements.
 */

/* Hide the small Canadian flag beneath the company name. The flag markup
 * remains in the HTML for potential future use but is not displayed. */
.logo-flag {
  display: none !important;
}

/* Hide the maple leaf within the scarf graphic so the scarf appears as
 * simple red bands. */
.scarf svg {
  display: none !important;
}

/* Increase spacing between the wolf icon and the company name to avoid
 * a cramped appearance. */
.logo {
  gap: 1rem !important;
}

/* Increase the gap between top‑level navigation items to give call and
 * quote buttons more breathing room. */
nav > ul {
  gap: 1.5rem !important;
}

/* Add more space before call and quote buttons so they do not butt up
 * against preceding items. */
.call-btn,
nav .cta-btn {
  margin-left: 1rem !important;
}

/*
 * The original site used a very dark theme. To unify the look and feel across
 * all of the pages we switched to a light colour palette that matches the new
 * service pages. A light background with dark text improves readability and
 * ensures consistency whether visitors land on the home page or a service
 * landing page.
 */
body {
  font-family: 'Montserrat', sans-serif;
  /* Use a dark neutral text colour on a very light grey background for readability */
  color: #333333;
  /* Light grey background sets a neutral tone across all pages */
  background-color: #f0f0f0;
  line-height: 1.6;
}

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

/* Header styles */
/* Header uses a dark blue background to contrast with the light page and
   anchors the navigation on every page. */
header {
  /* A black header anchors the navigation on every page and ties into the black/grey/white theme */
  background-color: #000000;
  color: #ffffff;
  padding: 1rem 0;
  position: sticky;
  top: 0;
  z-index: 100;

  /* Include a subtle decorative graphic of the Canadian Rockies on the right side
     of the header. The image file is a white silhouette on a transparent
     background, so it blends seamlessly with the dark header. The size is
     constrained to prevent overlap with the navigation links. */
  /* Include a decorative silhouette of the Rockies on the right side of the
     header. The image file is a white silhouette on a transparent
     background, so it blends seamlessly with the dark header. By using
     `background-position` we can anchor it to the right, while
     `background-size` controls its footprint. */
  /* Use the custom mountain silhouette provided by the user */
  background-image: url('logo_mountains_custom.png');
  background-repeat: no-repeat;
  background-position: right 16px center;
  /* Make the mountains graphic larger so it blends more with the heading */
  /* Enlarge the mountains graphic further to fill more of the header */
  background-size: 140px auto;

  /* Provide extra right padding so that navigation links do not overlap the
     background graphic. */
  /* Increase right padding to accommodate the larger mountains graphic */
  /* Increase right padding to prevent navigation overlap with the larger mountain graphic */
  padding-right: 320px;
}

.logo {
  font-size: 1.5rem;
  font-weight: 700;

  /* Display the logo text alongside an icon. Using flex allows us to
     horizontally align the wolf logo image with the company name and add
     consistent spacing. */
  display: flex;
  align-items: center;
  /* Increase the gap between the wolf icon and the company name so the text doesn't look crammed.
     A larger gap improves readability, especially when the company name has multiple words. */
  gap: 0.75rem;
  /* Position the logo container relative so the scarf overlay can be absolutely positioned within it */
  position: relative;
}

/* Style the logo icon to maintain consistent sizing across pages. */
.logo img {
  /* Increase the size of the wolf logo to improve visibility on larger screens.
     A taller icon better balances the left side of the header with the
     mountains graphic on the right. */
  height: 110px;
  width: auto;
}

/* Scarf overlay on the wolf logo. A red rectangle with a white maple leaf centred,
   positioned across the lower part of the wolf to resemble a scarf. */
.scarf {
  position: absolute;
  /* Place the scarf roughly over the wolf's neck.
     These values were chosen empirically to align with the 110px tall wolf icon. */
  top: 70px;
  left: 60px;
  /* Use a linear gradient to emulate the Canadian flag with red bands on the left and right and a white centre. */
  background: linear-gradient(to right, #ff0000 0%, #ff0000 25%, #ffffff 25%, #ffffff 75%, #ff0000 75%, #ff0000 100%);
  /* Increase horizontal padding slightly to accommodate the flag stripes. */
  padding: 2px 10px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.scarf svg {
  /* Increase the size of the maple leaf icon slightly and make it red to stand out on the white centre. */
  width: 16px;
  height: 16px;
  fill: #ff0000;
}

/* Canadian flag displayed beneath the company name in the header. The flag
   consists of red bands on the sides and a white centre containing a red
   maple leaf. This component is used in the logo to further emphasise
   Grey Wolf’s Canadian identity. */
/*
 * The logo‑flag class positions the small Canadian flag under the
 * "Grey Wolf 3PL" and "& Warehousing" text. To ensure the flag is
 * centred, the container stretches to the full width of the logo text
 * and centres its contents horizontally. A small top margin creates
 * breathing room between the text and the flag.  
 */
.logo-flag {
  /* Hide the small Canadian flag for now.  When the flag needs to be shown
     again, remove the display property and restore flex properties. */
  display: none;
  justify-content: center;
  width: 100%;
  margin-top: 0.2rem;
}
.logo-flag .flag {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(to right, #ff0000 0%, #ff0000 25%, #ffffff 25%, #ffffff 75%, #ff0000 75%, #ff0000 100%);
  padding: 1px 6px;
  border-radius: 2px;
}
.logo-flag .flag svg {
  width: 14px;
  height: 14px;
  fill: #ff0000;
}

/* Logo text wrapper holds the company name on two lines. Using flex and
   column direction stacks the main and sub lines vertically. A small
   left margin separates the text from the icon. */
.logo-text {
  display: flex;
  flex-direction: column;
  /* Slightly increase the margin to the left of the text to provide breathing room from the icon. */
  margin-left: 0.5rem;
  line-height: 1.1;
}

/* First line of the company name (primary). Slightly larger and bold to
   emphasise "Grey Wolf 3PL". */
.logo-main {
  font-size: 1.4rem;
  font-weight: 700;
  color: #ffffff;
  /* Add slight spacing below the main line to separate it from the sub‑line */
  margin-bottom: 0.1rem;
  /* Increase letter spacing to avoid a cramped appearance */
  letter-spacing: 0.5px;
}

/* Second line of the company name (sub). Smaller font and lighter colour to
   distinguish "& Warehousing" from the main line. */
.logo-sub {
  font-size: 1rem;
  font-weight: 500;
  color: #cccccc;
  /* Increase letter spacing to avoid a cramped appearance */
  letter-spacing: 0.5px;
}

/* Apply flex layout only to the top‑level list in the navigation. Using the
   child selector (>) prevents nested dropdown lists from inheriting the flex
   display and ensures they stack vertically. */
nav > ul {
  list-style: none;
  display: flex;
  align-items: center;
  /* Allow items to wrap onto the next line on small screens or when space is limited, preventing overlap of call and quote buttons. */
  flex-wrap: wrap;
  /* Increase the gap between top‑level navigation items to prevent the call/quote buttons from appearing too tight. */
  /* Increase gap between top-level navigation items to prevent call and quote
     buttons from feeling crowded. */
  gap: 1.5rem;
}

nav a {
  color: #ffffff;
  text-decoration: none;
  padding: 0.5rem 1rem;
  transition: color 0.3s;
}

nav a:hover,
nav a:focus {
  /* Lighten the link colour slightly on hover for contrast */
  color: #cccccc;
}

nav .cta-btn {
  background-color: #555555;
  color: #ffffff;
  border-radius: 30px;
  /* Increase the horizontal padding to make the button feel less cramped */
  padding: 0.5rem 1.25rem;
  font-weight: 600;
  transition: background-color 0.3s;
  /* Add a small left margin so this button doesn't butt up against the previous navigation link */
  /* Provide extra space before the request-a-quote button */
  margin-left: 0.75rem;
}

nav .cta-btn:hover,
nav .cta-btn:focus {
  background-color: #333333;
}

/* Call Now button styles */
/* The call now button prominently displays our phone number and
   flashes to draw attention. Using a mid‑grey background ties into
   the monochrome colour palette. */
.call-btn {
  background-color: #888888;
  color: #ffffff;
  /* Increase the horizontal padding to make the button feel less cramped */
  padding: 0.5rem 1.25rem;
  border-radius: 30px;
  font-weight: 700;
  text-decoration: none;
  animation: flash 1.5s infinite;
  /* Add a small left margin so this button doesn't butt up against the previous navigation link */
  /* Provide extra space before the call button to separate it from other links */
  margin-left: 0.75rem;
}

.call-btn:hover,
.call-btn:focus {
  background-color: #666666;
  color: #ffffff;
}

@keyframes flash {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

/* Hamburger menu toggle for mobile screens */
.menu-toggle {
  display: none;
  cursor: pointer;
}
.menu-toggle i {
  font-size: 1.5rem;
  color: #ffffff;
}

/* Sticky call button displayed only on smaller devices */
.mobile-call-sticky {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: none;
}

/* Chat widget styles */
.chat-widget {
  position: fixed;
  bottom: 80px;
  right: 20px;
  z-index: 1000;
  display: none;
}
.chat-toggle {
  /* Use a dark grey toggle to complement the monochrome palette */
  background-color: #444444;
  color: #ffffff;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  font-size: 0.8rem;
}
.chat-window {
  display: none;
  position: absolute;
  bottom: 60px;
  right: 0;
  background-color: #ffffff;
  color: #333333;
  width: 280px;
  padding: 1rem;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.chat-window.open {
  display: block;
}
.chat-window h4 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  color: #000000;
  font-size: 1.1rem;
}
.chat-window p {
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.chat-window button {
  background-color: #000000;
  color: #ffffff;
  border: none;
  border-radius: 20px;
  padding: 0.4rem 0.8rem;
  cursor: pointer;
  font-size: 0.9rem;
}

/* Hero section */
.hero {
  position: relative;
  height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* The hero element will rely on an absolutely positioned image rather than
     a CSS background. See `.hero-bg` for details. */
  /* The dark overlay defined below enhances text contrast over the image. */
  background: none;
  overflow: hidden; /* ensure the background image does not overflow */
}

/* Hero background image when using an <img> element. The image fills the
   entire hero area using object-fit and is positioned behind other content. */
.hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Dark overlay to improve contrast between the warehouse image and the hero text.  A semi‑transparent
     black layer helps ensure the heading and tagline remain legible over the background. */
  /* Darken the overlay so that white hero text remains readable over the image */
  /* Provide a moderate dark overlay to enhance hero text contrast without overpowering the image */
  /* Increase opacity slightly to enhance contrast between the background image and the
     white hero text. A darker overlay helps the hero content pop without
     completely obscuring the warehouse image. */
  background: rgba(0, 0, 0, 0.65);
  z-index: 0;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
  z-index: 1;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 1.5rem;
  z-index: 1;
  color: #ffffff;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/*
 * Wrap the hero heading and tagline in a semi‑transparent container. By giving
 * the hero content its own dark background and some padding, the white text
 * remains crisp and easy to read against even the busiest warehouse image. A
 * subtle border radius softens the edges while keeping the focus on the
 * message. This class is applied to a wrapper div in the HTML so it
 * automatically affects both the heading and paragraph.
 */
.hero-content {
  background-color: rgba(0, 0, 0, 0.6);
  padding: 1.5rem 2rem;
  border-radius: 10px;
  display: inline-block;
  max-width: 90%;
  /* Elevate the hero content above the overlay to ensure it remains visible. */
  z-index: 1;
  position: relative;
  /* Force all text inside the hero content to render white regardless of the global body colour. */
  color: #ffffff;
}

.btn {
  background-color: #00aaff;
  color: #fff;
  padding: 0.75rem 1.5rem;
  border-radius: 30px;
  font-weight: 600;
  transition: background-color 0.3s;
  text-decoration: none;
  display: inline-block;
}

.btn:hover,
.btn:focus {
  background-color: #0088cc;
}

/* Services section */
/* Services section now uses a very light background so that each card stands
   out. */
.services {
  padding: 4rem 0;
  background-color: #ffffff;
}

.services h2 {
  text-align: center;
  margin-bottom: 2rem;
  font-size: 2.5rem;
  color: #000000;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
}

/* Individual service cards share common styling. We include a closing brace to
   encapsulate all base properties before defining the hover state below. */
.service-card {
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 10px;
  text-align: center;
  transition: transform 0.3s;
  border: 1px solid #cccccc;
}

/* On hover, cards rise slightly and change border colour to highlight the
   interactive state. */
.service-card:hover {
  transform: translateY(-5px);
  border-color: #777777;
}

/* Icon styling within service cards */
.service-card .icon {
  font-size: 2.5rem;
  color: #555555;
  margin-bottom: 1rem;
}

/* Title styling within service cards */
.service-card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.5rem;
  color: #000000;
  /* Allow long service titles to wrap instead of causing horizontal overflow */
  word-wrap: break-word;
  word-break: break-word;
}

/* Paragraph styling within service cards */
.service-card p {
  color: #333;
  font-size: 0.9rem;
}

/* About section */
/* About section now uses the same light theme as other sections */
.about {
  padding: 4rem 0;
  background-color: #ffffff;
}

.about h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  color: #000000;
}

.about p {
  max-width: 800px;
  margin: 0 auto 3rem;
  text-align: center;
  color: #333333;
  font-size: 1rem;
}

.features {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}

.feature {
  background-color: #f0f0f0;
  padding: 2rem;
  border-radius: 10px;
  width: 280px;
  border: 1px solid #e0e0e0;
}

.feature h3 {
  margin-bottom: 0.5rem;
  color: #000000;
  font-size: 1.3rem;
}

.feature p {
  color: #333333;
  font-size: 0.9rem;
}

/* Contact section */
.contact {
  padding: 4rem 0;
  /* Use a light background for the contact section to improve readability on service and FAQ pages. */
  background-color: #f0f0f0;
}

.contact h2 {
  text-align: center;
  margin-bottom: 1rem;
  font-size: 2.5rem;
  /* Dark text on light background for contrast */
  color: #000000;
}

.contact p {
  text-align: center;
  max-width: 600px;
  margin: 0 auto 2rem;
  /* Darker body text for readability */
  color: #333333;
  font-size: 1rem;
}

.contact-details {
  text-align: center;
  margin-bottom: 2rem;
  line-height: 1.7;
  /* Dark text for details on light background */
  color: #333333;
}

.contact-details a {
  color: #000000;
  text-decoration: none;
}

/* Learn more links in service cards */
/* Learn more buttons styled as call-to-action. They adopt a pill shape and
   colour matching the primary accent. When hovering over a service card, the
   button flashes subtly to draw attention. */
.learn-more {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background-color: #555555;
  color: #ffffff;
  border-radius: 30px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s;
  font-size: 0.9rem;
}

.learn-more:hover,
.learn-more:focus {
  background-color: #333333;
}

/* Flash animation for learn-more buttons when hovering over the service card */
.service-card:hover .learn-more {
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(136, 136, 136, 0.5); }
  50% { box-shadow: 0 0 0 10px rgba(136, 136, 136, 0.0); }
  100% { box-shadow: 0 0 0 0 rgba(136, 136, 136, 0.5); }
}

.contact-form {
  max-width: 600px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 1rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  border: none;
  border-radius: 5px;
  /* Light input backgrounds and dark text to ensure legibility on the contact form */
  background-color: #ffffff;
  color: #333;
  font-size: 0.9rem;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  /* Lighter placeholders on light inputs */
  color: #999;
}

.contact-form .btn {
  width: 100%;
  border: none;
  background-color: #000000;
  transition: background-color 0.3s;
}

.contact-form .btn:hover,
.contact-form .btn:focus {
  background-color: #222222;
}

/* Footer styles */
footer {
  background-color: #000000;
  padding: 1rem 0;
  text-align: center;
  color: #fff;
  font-size: 0.9rem;
}

.social-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.social-icons a {
  color: #cccccc;
  font-size: 1.5rem;
  transition: color 0.3s;
}

/* Hover and focus styles for social icons */
.social-icons a:hover,
.social-icons a:focus {
  color: #ffffff;
}

/*
 * Override: Ensure the wolf icon has enough space on its right so that it does
 * not appear on top of the first navigation item. By using a more
 * specific selector and adding `!important`, this rule overrides earlier
 * declarations. Increasing the right margin pushes the navigation links
 * further right and shifts the logo towards the left of the header.
 */
header .logo img {
  margin-right: 1rem !important;
}

/* ---------------------------------------------------------------------------
 * Custom overrides for the latest header requirements.
 * These rules hide the scarf overlay, adjust the logo spacing, and ensure the
 * logo and navigation align horizontally within the header container.
 */

/* Hide the scarf overlay across all pages. This ensures the wolf logo remains clean
   while still allowing us to keep the markup for future reference if needed. */
.scarf {
  display: none !important;
}

/* Shift the wolf icon slightly away from the navigation and add spacing. */
.logo img {
  /* Reduce the spacing between the wolf icon and the text to shift the logo slightly further left. */
  margin-right: 0.25rem;
}

/* Align the logo and navigation horizontally so the tall wolf icon does not push
   the navigation links downward. The container uses flexbox to place the logo
   and navigation in a row. The nav is pushed to the right using auto margin
   so the call button and quote links remain aligned with the menu items. */
header .container {
  display: flex;
  align-items: center;
}

/* Push the navigation to the right side of the header. */
header nav {
  margin-left: auto;
}

/* Dropdown navigation styles. When a list item contains a nested list, it
   becomes a dropdown. The submenu is hidden by default and appears on hover. */
nav ul li {
  position: relative;
}

nav ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #000000;
  /* Initially hide the dropdown and scale it down slightly for the pop effect */
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 4px;
  min-width: 200px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transform-origin: top;
  transform: scale(0.95);
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

nav ul li:hover ul,
nav ul li:focus-within ul {
  display: block;
  /* When the parent menu is hovered or focused, animate the dropdown to full size and full opacity */
  transform: scale(1);
  opacity: 1;
}

nav ul li ul li a {
  color: #ffffff;
  padding: 0.5rem 1rem;
  display: block;
  white-space: nowrap;
}

nav ul li ul li a:hover,
nav ul li ul li a:focus {
  /* Highlight dropdown items on hover with a slightly lighter background and bold text */
  background-color: #333333;
  font-weight: 700;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero h1 {
    font-size: 2.5rem;
  }
  .hero p {
    font-size: 1rem;
  }
  /* On mobile, display hamburger icon and hide the navigation until toggled */
  .menu-toggle {
    display: block;
  }
  nav > ul {
    flex-direction: column;
    gap: 0.5rem;
    display: none;
  }
  /* When nav receives the .open class (toggled by the hamburger), show the menu */
  nav > ul.open {
    display: flex;
  }
  nav li {
    margin-bottom: 0.5rem;
  }
  .features {
    flex-direction: column;
    align-items: center;
  }
  /* Display sticky call button and chat widget on mobile */
  .mobile-call-sticky {
    display: block;
  }
  .chat-widget {
    display: block;
  }

  /* On small screens remove the decorative mountain background to free up
     horizontal space for navigation and avoid overlap. Also reset the right
     padding. */
  header {
    background-image: none;
    padding-right: 1rem;
  }
}

/* USA flag added */
.header-flags {
    position:absolute;
    top:0;
    right:0;
    display:flex;
    gap:8px;
    padding:8px;
}
.header-flags img {
    height:40px;
    width:auto;
}

/* FORCE FLAGS DISPLAY */
.header-flags{
 position:absolute;
 top:10px;
 right:20px;
 display:flex;
 gap:10px;
 z-index:9999;
}
.header-flags img{
 height:36px;
 width:auto;
 display:block;
}


/* --- Flags + header cleanup (fix duplicate/background flag) --- */
header{
  background-image: none !important;
  padding-right: 0 !important;
  position: relative; /* for absolute-positioned flags */
}
.header-flags{
  top: 10px !important;
  right: 20px !important;
  gap: 10px !important;
}
.header-flags img{
  height: 28px !important;
}


/* Nearby map links */
.nearby-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin-top:10px;
  font-size:0.95rem;
}
.nearby-title{ opacity:0.9; }
.nearby-item{
  text-decoration:underline;
}
.nearby-sep{ opacity:0.7; }


/* --- Mobile responsiveness improvements --- */
img, video, iframe { max-width: 100%; height: auto; }
.container, .wrapper { max-width: 1100px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
header nav { flex-wrap: wrap; }
header nav a { display: inline-block; }

/* If tables exist, make them scroll on small screens */
table { width: 100%; }
.table-wrap { overflow-x: auto; }

/* Buttons: allow wrapping */
button, .btn, a.button { white-space: normal; }

@media (max-width: 768px) {
  /* Reduce header padding so nav fits */
  header { padding: 0.75rem 0; }
  .header-flags { right: 12px !important; top: 8px !important; }
  .header-flags img { height: 22px !important; }

  /* Make nav links stack if needed */
  nav { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
  nav a { padding: 8px 10px; }

  /* Headings */
  h1 { font-size: 1.6rem; line-height: 1.2; margin: 14px 0; }
  h2 { font-size: 1.25rem; line-height: 1.25; }

  /* Sections spacing */
  section, .section { padding-left: 16px; padding-right: 16px; }

  /* If there are multi-column layouts, force to single column */
  .grid, .columns, .row { flex-direction: column; }
  .col, .column { width: 100% !important; }

  /* Map block */
  iframe { width: 100% !important; }

  /* Prevent horizontal overflow */
  body { overflow-x: hidden; }
}

@media (max-width: 420px) {
  h1 { font-size: 1.4rem; }
  nav a { padding: 7px 9px; font-size: 0.95rem; }
}


/* Quote questionnaire form */
.quote-form-wrap{
  max-width: 1000px;
  margin: 22px auto 0;
  padding: 18px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
}
.quote-form-title{ margin: 0 0 8px; }
.quote-form-note{ margin: 0 0 14px; opacity: 0.95; }
.quote-form label{
  display: block;
  font-weight: 600;
  margin: 10px 0 6px;
}
.quote-form input, .quote-form select, .quote-form textarea{
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.25);
  color: #fff;
  font-size: 1rem;
}
.quote-form input::placeholder, .quote-form textarea::placeholder{ color: rgba(255,255,255,0.7); }
.qrow{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.qactions{
  display:flex;
  gap: 12px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.quote-submit{
  background:#e10600;
  color:#fff;
  border:none;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  cursor:pointer;
}
.quote-clear{
  background: transparent;
  color:#fff;
  border: 1px solid rgba(255,255,255,0.25);
  padding: 12px 18px;
  border-radius: 8px;
  cursor:pointer;
}
@media (max-width: 768px){
  .qrow{ grid-template-columns: 1fr; }
  .quote-form-wrap{ padding: 14px; }
}


/* Quote form status + action buttons */
#quoteFormStatus{
  margin-top: 10px;
}
.quote-open-email{
  margin-left: 0;
}


/* --- Device aware tweaks (auto-detect) --- */
html.is-mobile header nav { justify-content: center; }
html.is-mobile .header-flags { position: absolute; right: 10px; top: 10px; }
html.is-mobile .header-flags img { height: 18px !important; width: auto; }

/* Prevent header overflow on small screens */
@media (max-width: 768px){
  header { position: relative; }
  .logo-wrap, .logo, .logo-text { max-width: 100%; }
  .logo-text { line-height: 1.1; }
  .logo-text .logo-title { font-size: 1.05rem !important; }
  .logo-text .logo-sub { font-size: 0.85rem !important; }

  /* If you have a call pill/button, keep it from pushing content off screen */
  .call-pill, .call-button, .header-call, .top-call, a.call-btn {
    max-width: 100%;
    white-space: nowrap;
  }

  /* Nav becomes multi-line */
  nav { flex-wrap: wrap; gap: 10px; }
  nav a { padding: 8px 10px; }

  /* Ensure any hero text doesn't overflow */
  .hero, .hero-content, .hero-text { padding-left: 16px; padding-right: 16px; }
}


/* --- FIX: keep header flags as small icons (prevent full-width flag rendering) --- */
.header-flags{
  position: absolute;
  right: 14px;
  top: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  z-index: 1100;
}
.header-flags a, .header-flags img{
  display: block;
}
.header-flags img{
  height: 18px;
  width: auto;
  max-width: none !important;
  max-height: 18px;
  border-radius: 2px;
}

/* Ensure hero/header images don't affect flags */
.hero img, .hero-image img{
  max-width: 100%;
  height: auto;
}

/* If global rule sets img{max-width:100%}, keep it, but override flags */
img{ max-width: 100%; height: auto; }
.header-flags img{ max-width: none !important; height: 18px !important; }

/* Mobile tweak */
@media (max-width: 768px){
  .header-flags{ right: 10px; top: 10px; }
  .header-flags img{ height: 16px !important; max-height: 16px; }
}