/*
 * Siddhgiri Overseas -- additive home-page fixes only.
 *
 * This file NEVER edits themes.css/responsive.css directly. It is loaded
 * last (see app_top.php), after the theme's own stylesheets, and every
 * rule below is scoped to a class we control ourselves (the "sg-" prefixed
 * classes, plus "head-sec"/"feature-bx"/"tx-bx" only when combined with one
 * of our own scoping classes). That means nothing here can leak onto other
 * pages or other sections that happen to reuse the same base theme classes.
 */

/* ---------------------------------------------------------------------
 * 1) Home-page highlight boxes ("Precision Manufacturing", etc.)
 *
 * These render inside .sg-home-highlights (added in index.php). Their
 * heading is a real <h2 class="tt"> now instead of a plain <div>, but a
 * bare <h2> still needs an explicit size/weight/margin reset -- and the
 * theme's own rule for this heading (".feature-container .feature-bx .tt")
 * no longer applies at all now that the .feature-container wrapper was
 * removed, so without this the heading falls back to an unstyled browser
 * default. Also gives each box its own self-contained card so they read
 * as a clean 4-up grid instead of bare floating text on the grey band.
 * --------------------------------------------------------------------- */

.sg-home-highlights .feature-bx {
    background-color: var(--white);
    border-radius: 10px;
    box-shadow: 0 3px 30px 0 rgba(40, 40, 40, 0.08);
    padding: 28px 24px;
}

.sg-home-highlights .feature-bx h2.tt {
    font-family: var(--font);
    color: var(--text-color);
    font-weight: 700;
    font-size: 24px;
    line-height: 1.15;
    margin-bottom: 10px;
}

.sg-home-highlights .feature-bx p {
    margin-bottom: 0;
    color: var(--para-color);
}

/* ---------------------------------------------------------------------
 * 2) "Top Category" featured image blocks -- heading/eyebrow/button were
 * floating directly on top of busy product photos with dark theme text
 * (var(--text-color), #222), so on a bright/high-contrast photo the text
 * became close to unreadable. Bootstrap's bg-dark/bg-opacity-75/text-white
 * utilities (applied directly in index.php) already do most of the work;
 * these rules are the safety net that guarantees the win over the theme's
 * own ".imgCate-bx .tx-bx .sub-tt"/".tt" color rules regardless of the
 * exact Bootstrap build's utility specificity, and add the backdrop shape
 * Bootstrap alone doesn't give us (rounded corners hugging the text only,
 * not the whole image). Scoped to .sg-tx-overlay so the shared .tx-bx
 * class used elsewhere (e.g. blog cards) is completely unaffected.
 * --------------------------------------------------------------------- */

.imgCate-bx .tx-bx.sg-tx-overlay {
    max-width: calc(100% - 40px);
}

.imgCate-bx .tx-bx.sg-tx-overlay .sub-tt,
.imgCate-bx .tx-bx.sg-tx-overlay .tt {
    color: var(--white);
}

.imgCate-bx .tx-bx.sg-tx-overlay .sub-tt {
    opacity: 0.85;
}

@media (max-width: 575.98px) {
    .imgCate-bx .tx-bx.sg-tx-overlay {
        right: 20px;
        left: 20px;
        max-width: none;
        padding: 14px !important;
    }

    .imgCate-bx .tx-bx.sg-tx-overlay .tt {
        font-size: 26px;
    }
}

/* ---------------------------------------------------------------------
 * 3) "Industries We Dealing With" -- rectangular photo cards with a
 * bottom-left title + arrow over a dark scrim, in a carousel with round
 * prev/next buttons (per the user's reference screenshot). Markup is in
 * index.php inside .sg-industries-slider-wrap, riding the theme's existing
 * ".cateSlider" Swiper instance (already initialised with a 1/2/4-per-row
 * breakpoint set in designer/js/themes.js, previously unused anywhere on
 * the site) -- no JS changes needed. The theme ships zero CSS for any of
 * its swiper nav buttons on any slider, so the card shape and nav button
 * look below are new, not overrides of an existing rule.
 * --------------------------------------------------------------------- */

.sg-industries-slider-wrap {
    position: relative;
    padding: 0 34px;
}

.sg-industries-slider {
    overflow: hidden;
}

.sg-industry-card {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 4px 24px 0 rgba(20, 20, 20, 0.14);
}

.sg-industry-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s ease;
}

.sg-industry-card:hover img {
    transform: scale(1.08);
}

.sg-industry-overlay {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 16px 18px;
    background: linear-gradient(to top,
            rgba(0, 0, 0, 0.78) 0%,
            rgba(0, 0, 0, 0.4) 55%,
            rgba(0, 0, 0, 0) 100%);
}

.sg-industry-name {
    font-family: var(--font);
    font-weight: 700;
    font-size: 19px;
    color: var(--white);
    line-height: 1.2;
}

.sg-industry-arrow {
    flex-shrink: 0;
    color: var(--white);
    opacity: 0.9;
}

.sg-swiper-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background-color: var(--pri);
    color: var(--white);
    box-shadow: 0 3px 12px 0 rgba(0, 0, 0, 0.25);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.sg-swiper-nav:hover {
    background-color: var(--text-color);
}

.sg-swiper-nav.swiper-button-disabled {
    opacity: 0.35;
    cursor: default;
}

.sg-swiper-nav-prev {
    left: 0;
}

.sg-swiper-nav-next {
    right: 0;
}

@media (max-width: 767.98px) {
    .sg-industries-slider-wrap {
        padding: 0 4px 44px;
    }

    .sg-swiper-nav {
        top: auto;
        bottom: 0;
        transform: none;
    }

    .sg-swiper-nav-prev {
        left: calc(50% - 52px);
    }

    .sg-swiper-nav-next {
        right: calc(50% - 52px);
    }
}

/* ---------------------------------------------------------------------
 * 4) Home-page SEO content section (.sg-seo-content-sec) -- a full-width,
 * long-form article (hardcoded H1 + admin-editable body from pageDesc1)
 * placed between the India map and the FAQs. The theme has no existing
 * "article body" styling anywhere (its only rich-text container is
 * .scroll-bx, which is a narrow 400px-max-height scrolling box meant for
 * a short blurb, not a ~1,100-word article with headings/lists/links), so
 * this is new, additive prose styling rather than an override of
 * anything. Content column is width-capped for readability regardless of
 * how wide the container is, and every heading/link/list style below is
 * scoped under .sg-seo-content so nothing leaks onto other rich-text
 * areas (blog body, product description, etc.) that reuse plain
 * h2/h3/p/ul tags with no wrapper class of their own.
 * --------------------------------------------------------------------- */

.sg-seo-content-sec {
    padding-top: 60px;
    padding-bottom: 60px;
}

.sg-seo-h1 {
    font-family: var(--font);
    color: var(--text-color);
    font-weight: 700;
    font-size: 30px;
    line-height: 1.2;
    margin-bottom: 24px;
    max-width: 100%;
}

.sg-seo-content {
    max-width: 100%;
    color: var(--para-color);
    font-size: 16px;
    line-height: 1.75;
    max-height: 200px;
    overflow-y: auto;
    padding-right: 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--pri) #eee;
}

.sg-seo-content::-webkit-scrollbar {
    width: 8px;
}

.sg-seo-content::-webkit-scrollbar-track {
    background: #eee;
    border-radius: 8px;
}

.sg-seo-content::-webkit-scrollbar-thumb {
    background-color: var(--pri);
    border-radius: 8px;
}

.sg-seo-content h2,
.sg-seo-content h3 {
    font-family: var(--font);
    color: var(--text-color);
    font-weight: 700;
    line-height: 1.3;
}

.sg-seo-content h2 {
    font-size: 24px;
    margin-top: 42px;
    margin-bottom: 14px;
}

.sg-seo-content h3 {
    font-size: 19px;
    margin-top: 26px;
    margin-bottom: 10px;
}

.sg-seo-content h2:first-child,
.sg-seo-content h3:first-child {
    margin-top: 0;
}

.sg-seo-content p {
    margin-bottom: 16px;
}

.sg-seo-content ul {
    margin-bottom: 16px;
    padding-left: 22px;
}

.sg-seo-content li {
    margin-bottom: 8px;
}

.sg-seo-content li:last-child {
    margin-bottom: 0;
}

.sg-seo-content a {
    color: var(--pri);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(var(--pri-rgb, 0, 0, 0), 0.35);
    text-underline-offset: 2px;
}

.sg-seo-content a:hover {
    text-decoration-color: currentColor;
}

.sg-seo-content strong {
    color: var(--text-color);
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .sg-seo-h1 {
        font-size: 24px;
    }

    .sg-seo-content {
        font-size: 15px;
    }

    .sg-seo-content h2 {
        font-size: 21px;
    }

    .sg-seo-content h3 {
        font-size: 17px;
    }
}

/* ---------------------------------------------------------------------
 * 5) Semantic landmarks -- <main> in index.php now wraps the ENTIRE page
 * content region (hero through the clients section) instead of just the
 * hero carousel, so a screen reader / search engine can identify the
 * page's actual main content area. Previously <main> wrapped only the
 * carousel, and themes.css has a tag-selector rule (`main, main img`)
 * that letterbox-crops the carousel to a 1920:750 aspect ratio -- if that
 * rule applied to the new, page-wide <main>, EVERY image on the page
 * would get forced into that crop, breaking the whole layout. So the
 * carousel wrapper itself was renamed from <main> to
 * <div class="hero-banner-sec">, and the exact same rule is reproduced
 * here, scoped to that class instead -- same visual result for the
 * carousel, and (unlike the tag selector it replaces) no effect on any
 * other image on the page.
 *
 * CRITICAL FOLLOW-UP FIX: themes.css actually has TWO "main, main img"
 * rules, not one -- the desktop one above (themes.css line ~1487) and a
 * SECOND, mobile-only one in responsive.css (`@media (max-width: 680px)
 * { main, main img { aspect-ratio: 1/1; } }`), missed on the first pass.
 * That second rule was still targeting the bare <main> tag, so on any
 * screen <=680px wide it was forcing the entire page-wide <main> (now
 * spanning the hero through the clients section, thousands of pixels
 * tall) into a square 1:1 box -- collapsing/overlapping the whole page
 * on mobile, which is what broke site-wide responsiveness. Reproduced
 * below, rescoped to .hero-banner-sec exactly like the desktop rule, so
 * the carousel keeps its original mobile crop and nothing else on the
 * page is constrained by it.
 * --------------------------------------------------------------------- */

.hero-banner-sec,
.hero-banner-sec img {
    aspect-ratio: 1920 / 750;
    overflow: hidden;
    display: block;
    width: 100%;
    position: relative;
}

@media (max-width: 680px) {

    .hero-banner-sec,
    .hero-banner-sec img {
        aspect-ratio: 1 / 1;
    }
}

/* ---------------------------------------------------------------------
 * REAL ROOT CAUSE of the "only header, banner and footer visible" /
 * "whole site broken" report -- the fix above was necessary but not
 * sufficient. themes.css/responsive.css both style ANY element with the
 * tag name `main` (`main, main img { aspect-ratio: ...; overflow: hidden;
 * ... }`), and that file can't be edited. Renaming the hero *carousel*
 * wrapper to .hero-banner-sec did not change the fact that index.php
 * still has a real <main id="main-content"> tag -- it just moved to wrap
 * the entire page (hero through the clients section) instead of only the
 * carousel. Because the selector in themes.css/responsive.css matches by
 * TAG NAME, not by the old wrapper's identity, it kept right on matching
 * this new, page-wide <main>: forcing the whole content region's height
 * to a fixed aspect-ratio (1920:750 desktop, 1:1 on screens <=680px) with
 * overflow:hidden. Everything past that height got silently clipped --
 * which is exactly the header/banner/...gap.../footer pattern reported,
 * since the header sits before <main> and the footer sits after it, and
 * only whatever fit inside that short forced box (basically just the
 * hero) stayed visible. This explicit ID-scoped reset cancels the
 * tag-selector rule for the real <main> element (an ID selector always
 * outranks a bare tag selector, so this wins regardless of stylesheet
 * order) while leaving .hero-banner-sec's own aspect-ratio crop (above)
 * completely untouched.
 * --------------------------------------------------------------------- */

#main-content,
#main-content img {
    /* aspect-ratio: auto; */
    overflow: visible;
}

/* ---------------------------------------------------------------------
 * 6) Top-bar (phone / email / opening hours / social) on narrow screens.
 *
 * .call-now boxes are built for a wide desktop row: icon + two-line text
 * + a 1px divider + 25px padding + 25px margin, all laid out with
 * display:flex (no wrap) inside another flex row that also has no wrap.
 * On a phone-width screen there isn't enough room for three of these
 * side by side, so the flex boxes get squeezed far below their content's
 * natural width and the text itself wraps word-by-word ("Phone" /
 * "Number", "+91-" / "96194-" / "06392"), with the email address
 * overflowing off the right edge -- the exact breakage in the reported
 * screenshots. Fix: below tablet width, stack each item as its own
 * full-width row instead of squeezing them side by side, and drop the
 * desktop-only divider between them (a vertical line makes no sense
 * once they're stacked). Nothing here changes anything above 767px, so
 * the desktop top-bar is completely untouched.
 * --------------------------------------------------------------------- */

@media (max-width: 767.98px) {
    .top-bar .d-flex {
        flex-wrap: wrap;
        justify-content: flex-start !important;
        row-gap: 10px;
    }

    .top-bar .call-now {
        border-right: 0;
        padding-right: 0;
        margin-right: 0;
        width: 100%;
    }

    .top-bar .ft-bx {
        margin-top: 2px;
    }
}

/* ---------------------------------------------------------------------
 * 7) Category page: "Category Highlight Tabs" (category.php, Round 17).
 *
 * Replaces the old static "Table of Contents" sidebar. Bootstrap's own
 * .nav-tabs/.tab-content give correct behaviour out of the box; these
 * rules only tint the active tab with the site's brand red (--pri, set
 * in themes.css) instead of Bootstrap's default blue, and let the tab
 * row scroll horizontally on narrow screens instead of wrapping into a
 * cramped multi-row mess when a category has many tabs.
 * --------------------------------------------------------------------- */
.sg-cat-tabs-sec .sg-cat-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.sg-cat-tabs-sec .sg-cat-tabs .nav-link {
    white-space: nowrap;
    color: #333;
    border-color: transparent;
}

.sg-cat-tabs-sec .sg-cat-tabs .nav-link.active {
    color: var(--pri);
    border-color: #dee2e6 #dee2e6 #fff;
    font-weight: 600;
}

.sg-cat-tabs-sec .sg-cat-tab-content {
    border-color: #dee2e6;
}

.sg-cat-tabs-sec .sg-cat-tab-body img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 575.98px) {
    .sg-cat-tabs-sec .sg-cat-tabs .nav-link {
        font-size: 0.9rem;
        padding: 0.5rem 0.75rem;
    }
}
/* ==========================================================================
   SPECIFICATION TABLES  (sg-spec-tables.php)
   Composition / mechanical / equivalent-grade / standards blocks on category
   and sub-category pages.

   Uses the existing theme variables (--pri, --text-color, --para-color,
   --border-color, --off-white) so these inherit the site palette rather than
   introducing a second one. Additive only; themes.css is untouched.
   ========================================================================== */

.sg-spec-sec .head-sec { margin-bottom: 1.25rem; }

.sg-spec-block { margin: 0 0 2.25rem; }

.sg-spec-title {
  margin: 0 0 .65rem;
  color: var(--text-color, #222);
}

.sg-spec-note {
  margin: 0 0 1rem;
  padding: .8rem 1rem;
  background: var(--off-white, #f9f9f9);
  border-left: 3px solid var(--pri, #2A4DBB);
  color: var(--para-color, #444);
  font-size: .95rem;
  line-height: 1.65;
}

/* A ten-column composition table cannot fit a phone without either horizontal
   scroll or type too small to read. Scroll is the honest answer; the fade on
   the right edge signals there is more content off-screen. */
.sg-spec-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color, rgba(0,0,0,.1));
  border-radius: 6px;
  background: var(--white, #fff);
  background-image: linear-gradient(to right, rgba(0,0,0,.07), rgba(0,0,0,0) 14px);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: 14px 100%;
  background-attachment: local;
}

/* The container is tabbable so keyboard users can scroll it. */
.sg-spec-scroll:focus-visible {
  outline: 2px solid var(--pri, #2A4DBB);
  outline-offset: 2px;
}

.sg-spec-table {
  width: 100%;
  min-width: 36rem;          /* force scroll rather than crushing columns */
  margin: 0;
  border-collapse: collapse;
  font-size: .9rem;
  color: var(--text-color, #222);
  /* Keeps decimal points aligned down a column, which is what makes a
     numeric table scannable. */
  font-variant-numeric: tabular-nums;
}

.sg-spec-table caption {
  caption-side: top;
  text-align: left;
  padding: .75rem 1rem;
  font-size: .85rem;
  color: var(--text-light, #8c8c8c);
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,.1));
}

.sg-spec-table thead th {
  background: var(--pri, #2A4DBB);
  color: var(--white, #fff);
  font-weight: 600;
  text-align: left;
  padding: .7rem .85rem;
  white-space: nowrap;
}

.sg-spec-table tbody th {
  text-align: left;
  font-weight: 600;
  white-space: nowrap;
  width: 42%;
}

.sg-spec-table th,
.sg-spec-table td {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--border-color, rgba(0,0,0,.1));
  vertical-align: top;
}

.sg-spec-table tbody tr:nth-child(even) { background: var(--off-white, #f9f9f9); }
.sg-spec-table tbody tr:last-child th,
.sg-spec-table tbody tr:last-child td { border-bottom: 0; }

/* An unattributed composition table is worth much less than one naming its
   source standard. Keep this visible. */
.sg-spec-source {
  margin: .65rem 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--text-light, #8c8c8c);
}

.sg-spec-standards {
  list-style: none;
  margin: 0 0 .5rem;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.sg-spec-standards li {
  padding: .4rem .75rem;
  background: var(--off-white, #f9f9f9);
  border: 1px solid var(--border-color, rgba(0,0,0,.1));
  border-radius: 4px;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-color, #222);
}

/* Buyers do print spec tables, to file alongside a quotation. */
@media print {
  .sg-spec-scroll { overflow: visible; border: 0; background-image: none; }
  .sg-spec-table  { min-width: 0; font-size: 9pt; }
  .sg-spec-table thead th {
    background: #eee !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .sg-spec-block { break-inside: avoid; }
}

@media (max-width: 480px) {
  .sg-spec-table          { font-size: .85rem; }
  .sg-spec-table th,
  .sg-spec-table td       { padding: .55rem .6rem; }
  .sg-spec-table caption  { padding: .6rem .75rem; }
}

/* ==========================================================================
   PRODUCT INDEX  (products.php)
   ========================================================================== */

.sg-products-group {
  padding: 1.25rem 1.35rem;
  border: 1px solid var(--border-color, rgba(0,0,0,.1));
  border-radius: 6px;
  background: var(--white, #fff);
}

.sg-products-group > h2 { margin: 0 0 .75rem; }

.sg-products-group > h2 a {
  color: var(--pri, #2A4DBB);
  text-decoration: none;
}

.sg-products-group > h2 a:hover { text-decoration: underline; }

.sg-products-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sg-products-list .sg-products-list {
  /* nested grades sit indented under their type, with a rule showing the
     hierarchy rather than relying on indentation alone */
  margin: .35rem 0 .6rem .25rem;
  padding-left: .85rem;
  border-left: 2px solid var(--border-color, rgba(0,0,0,.1));
}

.sg-products-list li { margin: 0 0 .35rem; }

.sg-products-list a {
  color: var(--para-color, #444);
  text-decoration: none;
  font-size: .95rem;
  line-height: 1.5;
}

.sg-products-list a:hover {
  color: var(--pri, #2A4DBB);
  text-decoration: underline;
}

.sg-products-cta {
  background: var(--off-white, #f9f9f9);
  border-left: 3px solid var(--pri, #2A4DBB);
  border-radius: 4px;
}

/* ==========================================================================
   WEIGHT CALCULATOR  (pipe-weight-calculator.php)
   --------------------------------------------------------------------------
   Was six full-width stacked rows plus a side column of reference text, which
   pushed the actual result below the fold on a laptop. Rebuilt as a compact
   grid: the two selects span the full width (their option text is long), the
   four numeric inputs pair up two-across, and the results sit in a three-up
   row directly under them.

   Icons are inline SVG rather than image files — no extra requests, crisp at
   any density, and they inherit currentColor so they follow the theme.
   ========================================================================== */

.sg-calc-wrap {
  max-width: 860px;
}

.sg-calc {
  padding: 1.5rem 1.5rem 1.25rem;
  border: 1px solid var(--border-color, rgba(0,0,0,.1));
  border-radius: 10px;
  background: var(--white, #fff);
}

/* Two columns on desktop; the two selects override to span both. */
.sg-calc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .9rem 1.1rem;
}

.sg-calc-row--full { grid-column: 1 / -1; }

.sg-calc-row { margin: 0; }

.sg-calc-row label {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin-bottom: .35rem;
  font-weight: 600;
  font-size: .88rem;
  color: var(--text-color, #222);
}

.sg-ico {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--pri, #2A4DBB);
}

/* Unit and "optional" markers sit quietly beside the label. */
.sg-calc-unit,
.sg-calc-opt {
  font-weight: 400;
  font-size: .78rem;
  color: var(--text-light, #8c8c8c);
}

.sg-calc-opt {
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .68rem;
}

.sg-calc-row input,
.sg-calc-row select {
  width: 100%;
  padding: .55rem .7rem;
  border: 1px solid var(--border-color, rgba(0,0,0,.15));
  border-radius: 6px;
  font-size: .98rem;
  color: var(--text-color, #222);
  background: var(--white, #fff);
  font-variant-numeric: tabular-nums;
}

.sg-calc-row input:focus,
.sg-calc-row select:focus {
  outline: 2px solid var(--pri, #2A4DBB);
  outline-offset: 1px;
  border-color: var(--pri, #2A4DBB);
}

.sg-calc-error {
  margin: 1rem 0 0;
  padding: .65rem .85rem;
  border-left: 3px solid #b3261e;
  background: rgba(179,38,30,.06);
  color: #8c1d18;
  font-size: .88rem;
  line-height: 1.5;
  border-radius: 0 4px 4px 0;
}

/* --- results: three tiles across, total emphasised --- */
.sg-calc-out {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .75rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-color, rgba(0,0,0,.1));
}

.sg-calc-figure {
  padding: .8rem .85rem;
  border-radius: 8px;
  background: var(--off-white, #f9f9f9);
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

.sg-ico--out { width: 19px; height: 19px; margin-bottom: .1rem; }

.sg-calc-label {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-light, #8c8c8c);
}

.sg-calc-figure strong {
  font-size: .98rem;
  line-height: 1.35;
  font-variant-numeric: tabular-nums;
  color: var(--text-color, #222);
}

.sg-calc-figure--total {
  background: var(--pri, #2A4DBB);
}

.sg-calc-figure--total .sg-ico--out,
.sg-calc-figure--total .sg-calc-label { color: rgba(255,255,255,.82); }
.sg-calc-figure--total strong { color: #fff; font-size: 1.08rem; }

/* --- actions --- */
.sg-calc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.25rem;
}

.sg-calc-link {
  font-size: .9rem;
  font-weight: 600;
  color: var(--pri, #2A4DBB);
  text-decoration: none;
}

.sg-calc-link:hover { text-decoration: underline; }

/* --- collapsed reference panel --- */
.sg-calc-note {
  margin-top: 1rem;
  border: 1px solid var(--border-color, rgba(0,0,0,.1));
  border-radius: 8px;
  background: var(--off-white, #f9f9f9);
}

.sg-calc-note > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .8rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: .92rem;
  color: var(--text-color, #222);
  list-style: none;
}

.sg-calc-note > summary::-webkit-details-marker { display: none; }

.sg-calc-note > summary::after {
  content: "";
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s ease;
}

.sg-calc-note[open] > summary::after { transform: rotate(-135deg); }

.sg-calc-note > summary:focus-visible {
  outline: 2px solid var(--pri, #2A4DBB);
  outline-offset: -2px;
}

.sg-calc-note__body {
  padding: 0 1rem 1rem;
  font-size: .9rem;
  line-height: 1.65;
  color: var(--para-color, #444);
}

.sg-calc-note__body p { margin-bottom: .75rem; }
.sg-calc-note__body p:last-child { margin-bottom: 0; }

.sg-calc-formula {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--text-color, #222);
  padding: .6rem .8rem;
  background: var(--white, #fff);
  border-left: 3px solid var(--pri, #2A4DBB);
  border-radius: 0 4px 4px 0;
}

@media (max-width: 575px) {
  .sg-calc { padding: 1.1rem 1rem 1rem; }
  .sg-calc-grid { grid-template-columns: 1fr; gap: .75rem; }
  .sg-calc-out { grid-template-columns: 1fr; gap: .5rem; }
  .sg-calc-figure { flex-direction: row; align-items: center; gap: .6rem; }
  .sg-calc-figure .sg-calc-label { flex: 0 0 auto; }
  .sg-calc-figure strong { margin-left: auto; text-align: right; }
}

/* ==========================================================================
   INDUSTRY PAGES  (industry.php / industries.php)
   ========================================================================== */

.sg-industry-intro {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--para-color, #444);
}

.sg-industry-drivers li {
  margin-bottom: .5rem;
  line-height: 1.6;
  color: var(--para-color, #444);
  font-size: .97rem;
}

.sg-industry-caution {
  /* Amber rather than the brand blue: this block carries "do not get this
     wrong" content, and it should not read as ordinary body copy. */
  border-left-color: #b26a00;
  background: rgba(178,106,0,.06);
  font-size: .97rem;
}

.sg-industry-card-text {
  font-size: .93rem;
  line-height: 1.6;
  color: var(--para-color, #444);

  /* Cards sit in a two-up grid; clamping keeps the grid even without
     truncating the data itself, which lives on the industry page. */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The grade-rationale column needs room to breathe and must wrap, unlike the
   numeric columns elsewhere in .sg-spec-table */
.sg-spec-table__feature {
  min-width: 20rem;
  white-space: normal;
  line-height: 1.55;
}

@media (max-width: 575px) {
  .sg-industry-card-text { -webkit-line-clamp: 3; }
}

/* ==========================================================================
   CLS — RESERVED IMAGE SPACE
   --------------------------------------------------------------------------
   Most <img> tags in this codebase have no width/height attributes, so the
   browser cannot reserve space before the image loads and the page shifts as
   each one arrives. That is Cumulative Layout Shift, a Core Web Vitals metric.

   The correct fix is width/height on every tag, but most of them build their
   src from an inline ternary, so the dimensions are not adjacent to the tag
   and a scripted fix was not safe. aspect-ratio achieves the same reservation
   from CSS for the known card components, without touching 56 templates.

   If those attributes are added later by hand, these rules stay harmless —
   the attributes simply take precedence.
   ========================================================================== */

/* Category / product / blog cards — the images are square or near-square
   thumbnails produced by getImage() at matched dimensions. */
.sg-industry-card img,
.sg-products-group img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

/* Blog cards are produced at 500x340 and 900x500 by getImage(). */
.blog-card img,
.sg-blog-card img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Client and certificate logo strips: contain, never crop a logo. */
.sg-client-logos img,
.sg-certificate-icons img {
  display: block;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

/* Any image without explicit dimensions still gets a sane intrinsic
   behaviour rather than collapsing to zero height before load. */
img:not([width]) {
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Visually-hidden labels for the enquiry forms.
   Every field previously relied on placeholder text alone. Placeholders
   disappear the moment a user starts typing, are not reliably announced by
   screen readers, and are not a label. These are invisible on screen and
   change nothing visually, but give every input a real accessible name. */
.sg-visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — becomes visible only on keyboard focus. */
.sg-skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: .75rem 1.25rem;
  background: var(--pri, #2A4DBB);
  color: #fff;
  text-decoration: none;
  border-radius: 0 0 4px 0;
}

.sg-skip-link:focus {
  left: 0;
  color: #fff;
}

/* Visible keyboard focus. Many themes remove the default outline and replace
   it with nothing, which makes the site unusable by keyboard. This restores a
   consistent, visible indicator without affecting mouse users. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--pri, #2A4DBB);
  outline-offset: 2px;
}

/* Touch targets: 44x44 CSS px is the accepted minimum. Small icon links in
   the header and footer commonly fall short. */
.sg-touch-min {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   STATIC / CONTENT PAGE LAYOUT
   --------------------------------------------------------------------------
   ROOT CAUSE: `.web-lead-section` is used by every static page (about,
   contact, quality, infrastructure, products, the size chart, the industry
   pages, every new page) and IS NOT DEFINED IN ANY STYLESHEET. The defined
   class is `.web-lead-sec` — note the different ending. So all of these pages
   have been rendering with no section padding at all, which is why content
   collides with the banner above it.

   Rather than rename the class across ~20 templates and risk missing one,
   this defines it — tuned tighter than the 60px `.web-lead-sec` used on the
   homepage, because content pages do not want homepage-sized breathing room.
   ========================================================================== */

.web-lead-section {
  padding: 48px 0 56px;
  position: relative;
}

/* The breadcrumb banner already carries 60px of its own padding. Stacking
   another 48px on top of it is where the dead white band came from. */
.breadcum-sec + .web-lead-section,
.breadcum-sec + .web-lead-sec {
  padding-top: 36px;
}

/* Stray <br> tags were being used to push content down inside .head-sec.
   The padding above does that job properly; the <br> just adds an
   unpredictable line box. */
.web-lead-section .head-sec > br,
.web-lead-sec .head-sec > br {
  display: none;
}

/* --------------------------------------------------------------------------
   READING MEASURE — the biggest readability problem on these pages
   --------------------------------------------------------------------------
   .container maxes out at 1380px (responsive.css). At a 1400px viewport that
   leaves ~10px of side gutter and sets body copy at roughly 200 characters
   per line. Comfortable reading is 60–80. Long measures make the eye lose its
   place on the return sweep, and on a technical page people are scanning for
   a number — they give up.

   Tables, grids and cards still use the full container width; only running
   prose is constrained. That is deliberate: a spec table wants every pixel,
   a paragraph does not.
   -------------------------------------------------------------------------- */
.web-lead-section > .container > p,
.web-lead-section > .container > h2,
.web-lead-section > .container > h3,
.web-lead-section > .container > h4,
.web-lead-section > .container > ul,
.web-lead-section > .container > ol,
.web-lead-section > .container > .sg-spec-note,
.web-lead-section > .container > .sg-spec-source {
  max-width: 78ch;
}

/* Headings sit tighter to the text they introduce than to the text above. */
.web-lead-section > .container > h2 { margin-top: 2.5rem; margin-bottom: .75rem; }
.web-lead-section > .container > h3 { margin-top: 1.75rem; margin-bottom: .5rem; }
.web-lead-section > .container > p  { margin-bottom: 1.1rem; line-height: 1.7; }

/* First heading after the page title should not add another big gap. */
.web-lead-section > .container > .head-sec + h2 { margin-top: 0; }

/* --------------------------------------------------------------------------
   HEAD-SEC ON CONTENT PAGES
   --------------------------------------------------------------------------
   The theme's .head-sec is centred with max-width 950px, which is right for a
   homepage section header sitting above a centred grid. On a content page it
   produces the mismatch visible on the size chart: a centred H1 over
   left-aligned, much wider body copy. Left-align it so the H1 and the first
   paragraph share a left edge.
   -------------------------------------------------------------------------- */
.web-lead-section > .container > .head-sec {
  text-align: left;
  max-width: 78ch;
  margin-left: 0;
  margin-right: 0;
  margin-bottom: 1.5rem;
}

/* Page title: slightly tighter leading, and no oversized bottom gap. */
.web-lead-section > .container > .head-sec .tt,
.web-lead-section > .container > .head-sec h1 {
  line-height: 1.15;
  margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   SIDE GUTTERS
   At 1400px viewport the container leaves ~10px each side, so text very
   nearly touches the window edge. Guarantee a real gutter at every width.
   -------------------------------------------------------------------------- */
.web-lead-section > .container,
.breadcum-sec > .container {
  padding-left: max(16px, 1rem);
  padding-right: max(16px, 1rem);
}

/* --------------------------------------------------------------------------
   TIGHTER VERTICAL RHYTHM AT SMALLER WIDTHS
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
  .web-lead-section { padding: 36px 0 40px; }
  .breadcum-sec + .web-lead-section { padding-top: 28px; }
}

@media (max-width: 575px) {
  .web-lead-section { padding: 28px 0 32px; }
  .breadcum-sec + .web-lead-section { padding-top: 22px; }
  .web-lead-section > .container > h2 { margin-top: 1.75rem; }
}

/* Trailing CTA / related blocks should not double up their own margin with
   the section's bottom padding. */
.web-lead-section > .container > :last-child { margin-bottom: 0; }

/* ==========================================================================
   BREADCRUMB BANNER — vertical weight
   --------------------------------------------------------------------------
   The banner carries 60px padding plus a full-bleed background image, which
   on a laptop viewport puts the page H1 roughly 400px down the page. On a
   content page that is a lot of screen spent before the visitor reaches the
   thing they came for.

   Trimmed rather than removed: the banner does real work establishing the
   section, and deleting it would make the pages feel unfinished.
   ========================================================================== */

.breadcum-sec {
  padding: 42px 0 38px;
}

/* The page name in the banner and the H1 below it say the same thing twice.
   Keep both — the banner title is a visual anchor, the H1 is the document
   heading — but stop the banner title competing on size. */
.breadcum-sec .main-tt {
  line-height: 1.15;
  margin-bottom: .5rem;
}

.breadcum-sec ul {
  margin-bottom: 0;
}

@media (max-width: 991px) {
  .breadcum-sec { padding: 32px 0 28px; }
}

@media (max-width: 575px) {
  .breadcum-sec { padding: 24px 0 22px; }
}

/* ==========================================================================
   HEADER — reclaim the top strip
   --------------------------------------------------------------------------
   The utility bar (phone / email / hours) and the logo row together push the
   nav a long way down. These are modest trims, not a redesign: the header
   keeps its structure and the logo keeps its size on desktop.
   ========================================================================== */

@media (min-width: 992px) {
  /* .top-bar is the real class -- the utility strip carrying phone, email
     and opening hours. Verified against app_header.php markup. */
  .top-bar {
    padding-top: 8px;
    padding-bottom: 8px;
  }
  .logo {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

/* --------------------------------------------------------------------------
   PRIMARY NAV WIDTH
   --------------------------------------------------------------------------
   Adding a 9th item pushed the nav past the container width and "Contact Us"
   wrapped onto a second row, doubling the bar height.

   Correct selector is `.navigation .menu ul li a` (theme default
   padding: 14px 15px). My first attempt targeted `.navigation > ul > li > a`,
   which matches nothing here, so the rule was silently dead.

   Budget at a 1380px container: nine labels plus carets plus the Company
   Profile button came to roughly 1370px — right on the limit, which is why it
   tipped over. Trimming the horizontal padding buys back ~70px, and the
   shorter "Tools" label buys ~90px more.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .navigation .menu ul li a {
    padding-left: 11px;
    padding-right: 11px;
  }
}

@media (min-width: 1300px) and (max-width: 1399px) {
  .navigation .menu ul li a {
    padding-left: 9px;
    padding-right: 9px;
    font-size: 14.5px;
  }
}

/* 992–1299px is the tightest desktop band — the container drops to 1200px
   while the nav keeps all nine items. Measured budget here was ~1187px
   against a 1200px container, i.e. 13px of headroom, which is not enough to
   survive a font fallback or a longer category name from the admin panel. */
@media (min-width: 992px) and (max-width: 1299px) {
  .navigation .menu ul li a {
    padding-left: 7px;
    padding-right: 7px;
    font-size: 14px;
  }
  /* The Company Profile button is ~200px of that budget. */
  /* .company-profile does not exist in this theme -- removed rather than
     left as a dead selector. The button is .main-btn / a PDF link. */
  .navigation .menu.main_header .main-btn,
  .navigation .menu.main_header a[href$=".pdf"] {
    padding-left: 12px;
    padding-right: 12px;
    font-size: 14px;
  }
}

/* Belt and braces: never let the primary nav wrap to a second row on desktop.
   If a future menu item overflows, this keeps the bar one row high and the
   overflow visible as a problem rather than silently doubling the header. */
@media (min-width: 992px) {
  .navigation .menu.main_header > ul.nav {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
  }
  .navigation .menu.main_header > ul.nav > li {
    white-space: nowrap;
  }
}


/* --------------------------------------------------------------------------
   TOP BAR — header height
   --------------------------------------------------------------------------
   Three things were stacking up to make this band far taller than it needed
   to be:

   1. logo2.png is 500x180. The theme caps it at max-width:205px, so it
      renders ~74px tall — larger than the contact block beside it, which
      means the LOGO sets the row height.
   2. `.logo` is an <a>, i.e. an inline element. An inline box containing an
      image sits on the text baseline, so the browser reserves descender
      space underneath it — the classic unexplained gap below an image.
      line-height adds more on top of that.
   3. The theme's own padding-block sits outside all of the above.

   Fixing only the padding (as I did first) leaves 1 and 2 untouched, which is
   why the band stayed tall. All three are addressed here.

   The logo is reduced to 58px tall (≈161px wide at its 2.78 aspect), which is
   in the normal range for a B2B header and keeps the wordmark comfortably
   legible. Total band: 58 + 12 = ~70px, down from ~95px.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .top-bar {
    padding-block: 6px;
  }

  /* Kills the inline baseline gap — this is the single biggest win here. */
  .top-bar .logo {
    display: inline-block;
    line-height: 0;
    font-size: 0;
  }

  .top-bar .logo img {
    display: block;
    max-height: 58px;
    max-width: 100%;
    width: auto;
    height: auto;
  }

  /* The contact block is now the same visual weight as the logo rather than
     being dwarfed by it. */
  .top-bar .call-now {
    padding-right: 20px;
    margin-right: 20px;
  }
}

@media (max-width: 991px) {
  .top-bar { padding-block: 6px; }
  .top-bar .logo { display: inline-block; line-height: 0; font-size: 0; }
  .top-bar .logo img { display: block; max-height: 46px; width: auto; }
}

/* ==========================================================================
   CONTENT-PAGE REFINEMENTS — applies to every page under Tools
   (size chart · weight calculator · 304 vs 316 · MTC · industries · products)
   ========================================================================== */

/* Callout notes were set with generous padding and a full 1rem bottom margin.
   On the size chart two of them stack directly under the intro, which pushed
   the actual table a long way down. Tightened, and the left accent carries
   the emphasis instead of the whitespace. */
.web-lead-section .sg-spec-note {
  padding: .7rem .9rem;
  margin-bottom: .75rem;
  font-size: .92rem;
  line-height: 1.6;
  border-radius: 0 6px 6px 0;
}

.web-lead-section .sg-spec-note:last-of-type {
  margin-bottom: 1.25rem;
}

/* Spec blocks sat 2.25rem apart, which on a page with four of them adds up
   to a lot of scrolling between tables. */
.web-lead-section .sg-spec-block {
  margin: 0 0 1.75rem;
}

.web-lead-section .sg-spec-block .sg-spec-title {
  margin-bottom: .5rem;
}

/* Source lines are reference text — quieter and closer to their table. */
.web-lead-section .sg-spec-source {
  margin-top: .5rem;
  font-size: .8rem;
}

/* --------------------------------------------------------------------------
   RELATED LINKS — chip row instead of a bullet list
   The trailing "Related" list is a navigation aid, not prose. As a bullet
   list it reads as more body copy to wade through; as a wrapped row of chips
   it scans in one pass and invites a click, which is what it is there for.
   -------------------------------------------------------------------------- */
/* Scoped by explicit class, NOT by position. An h2-followed-by-list shape
   also matches real content lists -- the "What an MTC records" list on the
   mill test certificate page is exactly that, and turning its descriptive
   bullets into navigation chips would have been wrong. */
.web-lead-section .sg-related-links {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  max-width: none;
  padding-left: 0;
  list-style: none;
}

.web-lead-section .sg-related-links > li {
  margin: 0;
}

.web-lead-section .sg-related-links > li > a {
  display: inline-block;
  padding: .45rem .85rem;
  border: 1px solid var(--border-color, rgba(0,0,0,.12));
  border-radius: 999px;
  background: var(--white, #fff);
  font-size: .88rem;
  font-weight: 600;
  color: var(--pri, #2A4DBB);
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease;
}

.web-lead-section .sg-related-links > li > a:hover {
  background: var(--off-white, #f9f9f9);
  border-color: var(--pri, #2A4DBB);
}

/* Nested lists (the product index tree) must NOT become chips — they carry
   hierarchy that the chip row would flatten. */
.sg-products-list .sg-products-list,
.sg-products-group .sg-products-list {
  display: block;
}

.sg-products-group .sg-products-list > li > a {
  all: unset;
  color: var(--para-color, #444);
  font-size: .95rem;
  cursor: pointer;
}

.sg-products-group .sg-products-list > li > a:hover {
  color: var(--pri, #2A4DBB);
  text-decoration: underline;
}

/* CTA band: trim so it does not read as a whole extra screen. */
.web-lead-section .sg-products-cta {
  padding: 1.25rem 1.4rem !important;
  margin-top: 2rem !important;
  border-radius: 8px;
}

.web-lead-section .sg-products-cta h2 { margin-top: 0; }
.web-lead-section .sg-products-cta p  { margin-bottom: .9rem; }