/* Base */
body {
    margin: 0;
    padding: 0;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #231F20;
    color: white;
    background-image: linear-gradient(#231F20, #231F20), url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100"><rect x="0" y="0" width="100" height="100" fill="none" stroke="%23333" stroke-width="1"/></svg>');
    background-size: 50px 50px;
}

.container {
    text-align: center;
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.logo {
    max-width: 600px;
    margin: 20px auto;
    display: block;
}

.headline {
    font-size: 2em;
    font-weight: bold;
    line-height: 1.4;
    margin: 40px 0 50px;
}

.description {
    font-size: 1.1em;
    margin-bottom: 40px;
    color: #fff;
}

/* Features grid */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-top: 60px;
}

.feature {
    width: 250px;
    background-color: #1a1a1a;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);
}

.feature img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 15px;
}

.feature h3 {
    color: #1989A6;
    font-size: 1.2em;
    margin-bottom: 10px;
}

.feature p {
    font-size: 0.95em;
    color: #fff;
}

/* CTA button */
.button {
    background-color: #1989A6;
    color: white;
    text-decoration: none;
    padding: 15px 30px;
    font-weight: bold;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}
.button:hover { background-color: #14708a; }

/* Two-up images (Standard + Mobile) */
.two-images {
    display: flex;
    justify-content: center;
    gap: 1px;           /* space between the two image blocks */
    flex-wrap: wrap;    /* stack on small screens */
    margin: 60px 30;
}
.two-images .image-block {
    flex: 1 1 300px;
    text-align: center;
}
.two-images .image-block > img {
    max-width: 40%;
    height: auto;
    border-radius: 8px;
}

/* Captions under the two main images */
.caption {
    margin-top: 30px;
    font-size: 1em;
    font-weight: bold;
    color: #fff;
}

/* Subheadline under the main headline */
.subheadline {
    font-size: 1.35em;   /* ~4pt larger than original body size */
    font-weight: bold;
    color: #fff;
    margin: -10px 0 40px;
}

/* Fabtech logo block (left of Standard image) */
.fabtech-with-image {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 60px;           /* space between logo block and image */
}
.fabtech-label {
    display: inline-flex;        /* shrink-wrap to the content */
    flex-direction: column;      /* Featured at -> logo -> 2025 */
    align-items: center;         /* center text with the logo */
    justify-content: center;
    font-size: 1.35em;
    font-weight: bold;
    color: #fff;
    line-height: 1.1;            /* tight vertical spacing */
    text-align: center;
    min-width: 100px;            /* keep it from collapsing too narrow */
    margin-right: 30px;          /* extra space between label and image */
}
.fabtech-label p {
    margin: 6px 0;               /* tighten text spacing */
}
.fabtech-logo {
    display: block;
    margin: 3px auto;            /* reduce space above/below logo */
    /* sizing override so the 70% rule doesn't affect the logo */
    max-width: none !important;
    height: 30px !important;
    width: auto !important;
    border-radius: 0 !important;
}

/* Nudge Standard image away from the logo block */
.fabtech-with-image .standard-config { margin-left: 70px; }

/* Right image block: keep "Place Part. Hit Start. Done." beside the image */
.image-row {
    display: flex;
    align-items: center;   /* vertically center the text relative to the image */
    justify-content: center;
    gap: 2px;
}
.side-label.right {
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertical center */
    color: #fff;
    font-weight: bold;
    text-align: center;
}
.side-label.right p {
    margin: 1px 0;
    line-height: 1.2;
}

/* Centered demo UI images (smaller to match feature thumbnails) */
.centered img {
    max-width: 250px;
    height: auto;
    border-radius: 6px;
}

/* Keep "Place Part. Hit Start. Done." beside the image on all screen sizes */
@media (max-width: 900px) {
  .image-row {
    flex-direction: row;     /* stay side-by-side instead of stacking */
    align-items: center;     /* vertical alignment */
    justify-content: center; /* horizontal centering */
    flex-wrap: wrap;         /* allow graceful wrapping if too tight */
  }

  .side-label.right {
    text-align: left;        /* optional: keep alignment natural */
    margin-left: 10px;       /* small gap from image */
  }
}

/* Keep the two configs side-by-side on desktop */
@media (min-width: 901px) {
  .two-images .image-block { 
    flex: 0 1 48%;      /* each block ~half width */
    min-width: 0;       /* allow shrink to avoid wrap */
  }
  .fabtech-with-image .standard-config {
    margin-left: 24px;  /* smaller nudge so total width fits */
  }
  .image-row { gap: 16px; }
}

/* On narrower screens, let them stack and remove the extra offset */
@media (max-width: 900px) {
  .fabtech-with-image .standard-config {
    margin-left: 0;     /* prevent forced wrap on small screens */
  }
}

/* Left (Standard) image */
.fabtech-with-image .standard-config {
  max-width: 66% !important;   /* adjust size here */
  height: auto;
}

/* Right (Mobile) image */
.image-row > img {
  max-width: 70% !important;   /* adjust size here */
  height: auto;
}

/* Keep the label text centered, but push ONLY the logo to the left */
.two-images .image-block .fabtech-label .fabtech-logo {
  align-self: flex-start !important;  /* override parent align-items:center */
  margin-left: 30 !important;          /* cancel any auto-centering margins */
  margin-right: 0 !important;
}

/* Adjustable offsets for the two captions */
:root {
  --standard-caption-shift: 70px; /* move RIGHT (+) */
  --mobile-caption-shift: 80px;   /* move LEFT (+) */
}

/* Center both configuration captions */
.two-images .image-block:nth-of-type(1) .caption,
.two-images .image-block:nth-of-type(2) .caption {
  display: block;
  transform: none;         /* remove offsets */
  text-align: center;
  margin: 10px auto 0;     /* balanced spacing below each image */
}

/* Control spacing for Demo UI images */
.demo-ui {
    margin-top: 40px;   /* adjust spacing ABOVE demo UI picture */
    margin-bottom: 40px; /* adjust spacing BELOW demo UI picture */
}

.lead-in {
    font-size: 1.4em;     /* larger font than normal text */
    font-weight: bold;    /* make it bold */
    color: #fff;          /* keep it white (overridden inside band) */
    margin: 30px 0;       /* add a little spacing above/below */
}

/* Grid layout for features (8 items = 2 rows of 4) */
.features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);  /* 4 columns */
    gap: 30px;                              /* space between items */
    margin-top: 60px;
    justify-items: center;                  /* center tiles in each grid cell */
}

@media (max-width: 1000px) {
    .features {
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
    }
}

@media (max-width: 600px) {
    .features {
        grid-template-columns: 1fr; /* 1 column for phones */
    }
}

/* Match heights of images in positions 3 & 4 to position 2 */
.features .feature:nth-child(2) img {
    height: auto; /* reference (keep natural height) */
}

.features .feature:nth-child(3) img,
.features .feature:nth-child(4) img {
    max-height: 170px;   /* adjust until it visually matches #2 */
    width: auto;         /* prevent distortion */
}

/* Match heights of images in positions 5, 6, 8 to position 7 */
.features .feature:nth-child(7) img {
    height: auto; /* reference (keep natural height) */
}

.features .feature:nth-child(5) img,
.features .feature:nth-child(6) img,
.features .feature:nth-child(8) img {
    max-height: 180px;   /* adjust until it visually matches #7 */
    width: auto;         /* prevent distortion */
}

/* Fabtech logo stays fixed */
.fabtech-logo {
    display: block;
    margin: 2px auto;
    height: 40px;
    width: auto;
}

/* Top and bottom text only */
.fabtech-label p {
    margin: 2px 0;
    text-align: center;
    position: relative;
    left: 60px;   /* <<< adjust this number to move text right */
}

/* Keep Contact Us button always below features */
.contact-button {
  clear: both;
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 40px; /* adjust spacing from the grid */
}

/* If the Contact Us block is inside .features, force it to span a full row */
.features .contact-button {
  grid-column: 1 / -1 !important;  /* take the whole row (both columns on mobile) */
  justify-self: center;
  margin-top: 32px;                 /* space above the button */
  width: 100%;                      /* ensure full-width row occupancy */
  display: flex;
  justify-content: center;
}

/* Safety if Contact Us is in a separate container */
.container .contact-button {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 32px;
  clear: both;
}


/* ========================= */
/*  LIGHT-GRAY BAND STYLES   */
/* ========================= */

.feature-band {
  background: #f5f5f7;           /* sleek light gray */
  color: #0f0f14;                /* default text color on band */
  border-top: 1px solid #e7e7eb;
  border-bottom: 1px solid #e7e7eb;
  padding: 48px 0;
}

/* Utility tints for band text */
.band-head  { color: #0f172a; }  /* headers on band (very dark) */
.band-body  { color: #334155; }  /* body copy on band (dark slate) */
.band-muted { color: #4b5563; }  /* captions on band (muted)    */
.band-strong{ color: #1f2937; }  /* stronger paragraph emphasis  */

/* Cards that “pop” on light-gray band */
.card {
  background: #ffffff !important;
  color: #1f2937;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  padding: 16px;
}

/* Ensure feature tiles switch to dark text on white cards within the band */
.feature-band .feature h3 { color: #0f172a; }
.feature-band .feature p  { color: #334155; }

/* Image blocks get card treatment in band */
.feature-band .image-block { background: #ffffff; }

/* Fabtech chip readability on light background */
.band-chip {
  background: #111318;
  color: #e5e7eb;
  border-radius: 10px;
  padding: 8px 10px;
}

/* Captions on band */
.feature-band .caption { color: #4b5563; }

/* Demo UI images a bit larger on band */
.feature-band .centered img {
  max-width: 980px;
  width: 100%;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.06);
  border-radius: 14px;
  background: #fff;
}

/* Spacer row minimal height (if kept) */
.spacer-row { min-height: 0; margin-top: 6px; }

/* --- Fix: keep the two top images side-by-side on desktop --- */
.feature-band .two-images {
  display: grid;
  grid-template-columns: 1fr;   /* stack on mobile */
  gap: 32px;
}

@media (min-width: 900px) {
  .feature-band .two-images {
    grid-template-columns: 1fr 1fr;  /* 2 columns on desktop */
  }
}

/* Prevent oversized children from forcing a wrap */
.feature-band .two-images .image-block { min-width: 0; }

/* Make the Fabtech + image row more compact so it fits comfortably */
.fabtech-with-image {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;                  /* was large—shrink to fit two columns nicely */
  align-items: center;
}

/* Reduce the extra nudge on the standard image so it doesn't cause wrapping */
@media (min-width: 900px) {
  .fabtech-with-image .standard-config { margin-left: 16px; }
}
@media (max-width: 899px) {
  .fabtech-with-image .standard-config { margin-left: 0; }
}

/* Ensure images scale within their cards */
.image-row > img,
.fabtech-with-image .standard-config {
  max-width: 100%;
  height: auto;
}
/* Adjust subheadline position and color */
.subheadline {
  font-size: 2em;
  font-weight: bold;
  color: #000;            /* make text black */
  margin-top: 00px;      /* move it down to the white background */
  margin-bottom: 50px;
}
/* 1) Make the top logo fully responsive on small screens */
.logo {
  max-width: min(600px, 90vw);  /* cap at 600px but shrink to viewport */
  width: 100%;
  height: auto;
}

/* 2) Remove the horizontal nudge on the Fabtech text for mobile
      (that nudge can cause off-screen overflow) */
@media (max-width: 900px) {
  .fabtech-label p {
    left: 0;  /* cancel the 60px shift on phones */
  }
}

/* 3) Global safety: prevent any accidental horizontal overflow */
html, body {
  overflow-x: hidden;
}

/* 4) Ensure all images never exceed their containers on mobile */
img {
  max-width: 100%;
  height: auto;
}
/* Keep "Place Part. Hit Start. Done." BESIDE the image on mobile, too */
@media (max-width: 900px) {
  /* Force row layout even on phones */
  .image-row {
    display: flex;
    flex-direction: row !important;   /* override any earlier column rule */
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: nowrap;                /* keep side-by-side */
  }

  /* Scale the image so text has room on the right */
  .image-row > img {
    max-width: 55% !important;        /* adjust if needed (50–60%) */
    height: auto;
  }

  /* This is your side text block (uses .caption.band-muted in HTML) */
  .image-row > .caption.band-muted {
    max-width: 40%;
    text-align: left;                  /* looks better next to the image */
    margin: 0;                         /* no extra margins that could push it down */
  }
}
.footer {
    text-align: center;
    color: #ccc;
    font-size: 0.9em;
    margin-top: 60px;
    padding: 30px 10px;
    border-top: 1px solid #333;
}

.footer a {
    color: #ccc;
    text-decoration: none;
}

.footer a:hover {
    text-decoration: underline;
}