*,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  /* Tokens are declared once, in header.css, which every page loads. This copy
     set --primary-color to #1a5276 and won whenever a page listed pages.css
     after header.css, which is why the service and product-hub pages rendered
     a different navy from the rest of the site. */
  
  a:hover {
    color: var(--secondary-cta);
  }

  h1,
  h2 {
    font-size: 1.8rem;
    color: var(--heading-color);
  }


  /* A bare `th { background-color: #154360 }` used to live here, which painted
     every row header navy and made the three rules that chased it necessary:
     white link text for the navy cell, then navy link text again for the cells
     Bootstrap repainted white. All three are gone. A row header is a label, not
     a second header band, and it is styled as one by the table system further
     down - which also settles the link colour in one place instead of three
     that contradicted each other depending on <link> order. */

  /* Available Forms - the list of product forms a grade or family is stocked
     in. It used to run one plain link per line down the left, leaving most of
     the row empty; it is now a responsive grid of link cards - bold, with a
     navy accent bar, an orange arrow and a hover lift, the label and arrow
     going orange together on hover the way the header's Services menu does -
     so the forms read as the navigation they are. The .forms-columns class is
     carried on the <ul> of every page
     holding the list, so the whole treatment lives here and no per-page markup
     (no per-link <strong>) is needed. A grid of auto-filled minmax() tracks
     collapses to one column on a phone on its own, so this needs no media
     query, and cards in a row stay equal height when a long label wraps. */
  .forms-columns {
    list-style: none;
    padding: 0;
    margin: 0.75rem 0 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 0.6rem;
  }

  .forms-columns li {
    margin: 0;
    display: flex;
  }

  .forms-columns a {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.95rem;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-color);
    text-decoration: none;
    background: #fff;
    border: 1px solid var(--border-color);
    border-left: 3px solid var(--primary-color);
    border-radius: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease,
      box-shadow 0.15s ease, transform 0.15s ease;
  }

  /* A right-pointing arrow marks each card as a link and slides on hover. */
  .forms-columns a::after {
    content: "\2192";
    margin-left: auto;
    padding-left: 0.5rem;
    color: var(--secondary-color);
    font-weight: 700;
    transition: transform 0.15s ease;
  }

  .forms-columns a:hover,
  .forms-columns a:focus-visible {
    color: var(--secondary-color);
    background: var(--table-row-hover-bg);
    border-color: var(--primary-color);
    box-shadow: 0 2px 6px rgba(21, 67, 96, 0.12);
    transform: translateY(-1px);
  }

  .forms-columns a:hover::after,
  .forms-columns a:focus-visible::after {
    transform: translateX(3px);
  }

  .page-layout {
    display: flex;
    min-height: auto;
    align-items: flex-start;
    gap: 0px;
    margin-top: 40px;
    margin-bottom: 40px;
  }

  .sidebar-nav {
    background-color: #ffffff;
    padding: 15px;
    border-radius: 8px;
  }

  .sidebar {
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 320px;
  }

  .sidebar-title {
    width: 100%;
    color: var(--text-color);
    padding: 12px 16px;
    font-size: 1.1rem;
    border: none;
    text-align: left;
    border-radius: 6px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background 0.3s ease;
    border: 1px solid var(--primary-color);
  }

  .sidebar h2 {
    text-align: center;
    color: var(--primary-color);
  }

  .sidebar-title:hover {
    color: var(--secondary-color);
  }

  .sidebar a:hover {
    color: var(--secondary-color);
  }

  .link-list {
    display: none;
    padding-left: 16px;
    margin-bottom: 10px;
  }

  .sidebar-title.active {
    background: var(--primary-color);
    color: white;
  }

  /* Main Content */
  .main-content {
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
  }


  /* ========== Banner ========== */
  .flat-banner {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 280px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  }

  .flat-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    animation: zoomBanner 10s ease-in-out infinite alternate;
    opacity: 1;
  }

  @keyframes zoomBanner {
    from {
      transform: scale(1);
    }

    to {
      transform: scale(1.1);
    }
  }

  /* This is a heading - <h2> where the page has its own content heading, <h1>
     where the banner is the only one - so the browser's default heading margin
     has to be cleared or the banner caption sits off its mark. */
  .banner-title {
    position: absolute;
    bottom: 85px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 1px 1px 2px black;
    font-size: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    background-color: rgba(0, 0, 0, 0.5);
    color: #ffffff;
    padding: 10px;
    margin: 0;
  }


  /* ========== Product Grid ========== */
  .product-content {
    width: 100%;
    z-index: 1;
    padding: 0 40px;
  }

  .product-grid {
    /* display: grid; */
    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
    transition: all 0.3s ease-in-out;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px;
    padding: 40px 0;
  }

  .product-grid h2 {
    color: var(--primary-color);
  }

  /* ========== Product Card ========== */
  .product-card {
    background-color: #f9f9f9;
    color: #333;
    border-radius: 12px;
    overflow: hidden;
    width: 380px;
    display: flex;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  }

  .product-card img.product-img {
    width: 100%;
    object-fit: cover;
    height: 150px;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
  }

  .product-card .card-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  .product-card h2,

  .product-card h3 {
    font-size: 24px;
    font-weight: 600;
    color: var(--dark-color);
    margin-bottom: 10px;
  }

  .product-card ul {
    padding-left: 20px;
    line-height: 1.8;
  }

  .link_editing a {
    color: var(--primary-color);
    text-decoration: none;
  }

  .link_editing a:hover {
    color: var(--secondary-color);
  }

  /* .container {
    margin: 0 auto;
    padding: 20px;
    color: var(--text-color);
  } */

  .content {
    max-width: 1000px;
    width: 90%;
  }

  .title {
    margin: 0 auto;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: justify;
    text-transform: capitalize;
    margin-bottom: 40px;
    color: var(--text-color);
  }

  .toc-description-wrapper {
    text-align: justify;
    gap: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .table-of-content {
    flex: 0 0 auto;
    width: fit-content;
    block-size: auto;
    margin-top: 20px;
    border: white;
    padding: 4px 20px 5px 30px;
    margin: 20px;
    border-radius: 8px;
    background-color: #154360;
    --heading-color: currentColor;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transform: scale(1.05);
    display: inline-block;
  }

  .table-of-content h2 {
    text-align: center;
    color: var(--light-color);
    border-bottom: 1px solid var(--light-color);
  }

  .table-of-content a {
    text-align: left;
    color: var(--light-color);
    margin-left: 0%;
  }

  .table-of-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 1.8;
  }

  .table-of-content li {
    margin-bottom: 3px;
  }

  .table-of-content li a:hover {
    color: var(--secondary-color);
    padding-left: 8px;
  }

  @media (max-width: 768px) {
    .table-of-content {
      width: 100%;
      /* 100% and the 20px side margins above came to 40px wider than the
         column. On most pages .main-content's padding absorbed it, leaving the
         box off-centre; on the twelve that put the contents box straight into a
         12px container - the titanium alloy form pages among them - it pushed
         the page 28px past a 360px screen. Without the side margins it is
         centred in its column everywhere. */
      margin-left: 0;
      margin-right: 0;
      /* The 1.05 scale on a box this wide ran it 13px past a 768px tablet on
         the same twelve pages. */
      transform: none;
    }
  }
  .ss-section-img{
    text-align: justify;
    gap: 2px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }

  .description {
    flex: 1;
    padding: 0px 10px;
    /* A flex item is never narrower than its longest word or its widest table
       unless told it may be. Held open by one, it ran past a phone's screen. */
    min-width: 0;
  }

  .description p {
    line-height: 1.6;
    font-size: 1rem;
  }

  .image-section {
    flex: 0 0 auto;
    width: fit-content;
    /* fit-content took the width of a wide table inside - the foil pages put a
       comparison table here - and stretched the page past a phone's screen.
       The table has its own scroll wrapper; capped, it scrolls. */
    max-width: 100%;
    block-size: auto;
    margin-top: 5px;
    text-align: center;
    position: relative;
    overflow: hidden;
  }

  .image-section img {
    height: 300px;
    max-width: 90%;
    max-height: 300px;
    border-radius: 10px;
    border: 1px solid #ccc;
    cursor: pointer;

  }

  .image-section img:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  }

  .caption {
    margin-top: 20px;
    text-align: center;
    font-size: 0.95rem;
    color: #666;
    animation: fadeIn 0.6s ease;
  }

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }


  .ss-section {
    flex: 1;
    padding: 10px 5px;
  }

  .ss-content {
    max-width: 1100px;
    /* A flex item in .ss-section-img - see .description. */
    min-width: 0;
    margin: auto;
    text-align: justify;
    padding: 10px;
    border-radius: 16px;
    animation: fadeInUp 0.8s ease;
    color: #333;
    font-family: var(--font-sans);
  }

  .ss-content h2 {
    color: #1a1a1a;
    margin-bottom: 10px;
    font-size: 24px;
    font-weight: 700;
  }

  .ss-content h3 {
    color: #154360;
    margin-top: 30px;
    margin-bottom: 12px;
    font-size: 20px;
    font-weight: 600;
  }

  .ss-content h4 {
    color: #2c3e50;
    margin-top: 25px;
    font-size: 18px;
    font-weight: 600;
  }

  .ss-content p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    color: #444;
  }

  .ss-content .highlight {
    color: #c0392b;
    font-weight: 600;
  }

  .ss-content ul {
    padding-left: 20px;
    margin-bottom: 20px;
  }

  .ss-content ul li {
    line-height: 1.6;
    padding-left: 10px;
    position: relative;
    margin-bottom: 10px;
  }

  .ss-content ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #2980b9;
    font-size: 18px;
  }

  .ss-two-column {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 10px;
  }

  @keyframes fadeInUp {
    from {
      opacity: 0;
      transform: translateY(20px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* ===== table system : start =============================================
     One look for every table on the site. This block is kept identical with
     the block of the same name in CSS/tables.css; tools/seo_audit.py fails if
     the two drift, because a page loading only one of them would then render a
     different table. The values are tokens and live once, in header.css.

     It replaces three systems that disagreed about everything: .grade-table
     (15px text, 12/15px cells), .spec-table (16px text, 15/20px cells, a 30%
     label column) and bare Bootstrap .table (8px cells, no navy) - so a grade
     hub stacked two tables of the same kind of data that shared no measurement.

     WHY EVERY RULE IS QUALIFIED WITH `body`.
     Bootstrap paints cells with `.table > :not(caption) > * > *`, specificity
     (0,1,1) - exactly the same as the `.table th` rule this replaces. A tie is
     broken by source order, so which of two <link> tags came last decided
     whether a row header rendered navy-on-white or white-on-navy: 391 pages
     list pages.css first, 336 list bootstrap first, and 8,349 <th> cells went
     one way or the other with nobody choosing either. On six of the
     bootstrap-first pages it also put a navy link on a navy cell, which is how
     the three grade links on the Monel family hub came to be invisible - the
     same bug the deleted `.table th a` rule was written to fix on the other
     half of the site. `body` outranks Bootstrap in both orders: same fix, and
     for the same reason, as `body .container` further down.

     WHY BOOTSTRAP'S CELL PAINTING IS CLEARED RATHER THAN OVERRIDDEN.
     That rule sets a background-color AND an inset box-shadow, and the shadow
     is the mechanism behind .table-striped. A background set here would be
     painted over by the shadow, so both are cleared and this block paints
     instead. .table-striped and .table-hover are inert as a result, which is
     deliberate - they were a fourth and fifth look, on 109 and 38 tables.

     WHY THE ZEBRA IS PAINTED ON THE ROW, NOT THE CELL.
     .grade-table striped `tbody td` only, so the first column of a key/value
     table - a <th> - stayed unstriped while the rest of the row was tinted and
     the stripe ran at half width. Painting the <tr> and leaving cells
     transparent makes a stripe cross the whole row.

     WHY ROW HEADERS ARE NOT NAVY.
     A <th scope="row"> is a label, not a second header band. Painting it navy
     draws an L-shaped frame round the data on the 1,454 tables carrying both a
     <thead> and row headers, and stops the zebra at the label column. Weight
     and colour say "label" at neither cost.
     ======================================================================== */

  body table.table,
  body table.grade-table,
  body table.spec-table {
    width: 100%;
    margin-bottom: 1.25rem;
    border-collapse: collapse;
    font-size: var(--table-font-size);
    background-color: var(--table-row-bg);
    vertical-align: top;
  }

  /* Bootstrap's cell painting, cleared. See the note above. */
  body table.table > :not(caption) > * > * {
    background-color: transparent;
    box-shadow: none;
  }

  /* Browsers default thead/tbody to vertical-align: middle, which stops a cell
     inheriting the table's own alignment. Bootstrap corrects this for .table;
     the two site classes need it too. */
  body table.table > tbody,
  body table.grade-table > tbody,
  body table.spec-table > tbody {
    vertical-align: inherit;
  }

  body table.table > * > tr > *,
  body table.grade-table > * > tr > *,
  body table.spec-table > * > tr > * {
    padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
    text-align: left;
    border: 1px solid var(--table-border);
    background-color: transparent;
    box-shadow: none;
    /* Bootstrap routes cell colour through --bs-table-color-type, which
       .table-striped repoints at #000 for odd rows. Clearing the background
       above stops its stripe but not that, so 109 tables would still have set
       their odd rows in a different ink from every other table. */
    color: inherit;
  }

  body table.table > thead > tr > *,
  body table.grade-table > thead > tr > *,
  body table.spec-table > thead > tr > * {
    background-color: var(--table-head-bg);
    color: var(--table-head-fg);
    font-weight: 600;
    border-color: var(--table-head-rule);
  }

  /* A row header keeps the row's own background so the zebra is unbroken, and
     states itself with weight and colour instead. */
  body table.table > tbody > tr > th,
  body table.grade-table > tbody > tr > th,
  body table.spec-table > tbody > tr > th {
    color: var(--table-label-fg);
    font-weight: 600;
  }

  body table.table > tbody > tr:nth-of-type(even),
  body table.grade-table > tbody > tr:nth-of-type(even),
  body table.spec-table > tbody > tr:nth-of-type(even) {
    background-color: var(--table-row-alt-bg);
  }

  body table.table > tbody > tr:hover,
  body table.grade-table > tbody > tr:hover,
  body table.spec-table > tbody > tr:hover {
    background-color: var(--table-row-hover-bg);
    transition: background-color 0.2s ease;
  }

  /* Links: white inside the navy header band, ordinary navy in a label cell.
     Which of the two a row header got used to depend on the <link> order. */
  body table.table > thead > tr > * a,
  body table.grade-table > thead > tr > * a,
  body table.spec-table > thead > tr > * a,
  body table.table > thead > tr > * a:hover,
  body table.grade-table > thead > tr > * a:hover,
  body table.spec-table > thead > tr > * a:hover,
  body table.table > thead > tr > * a:focus,
  body table.grade-table > thead > tr > * a:focus,
  body table.spec-table > thead > tr > * a:focus,
  body table.table > thead > tr > * a:visited,
  body table.grade-table > thead > tr > * a:visited,
  body table.spec-table > thead > tr > * a:visited {
    color: var(--table-head-fg);
    text-decoration: underline;
  }

  body table.table > tbody > tr > th a,
  body table.grade-table > tbody > tr > th a,
  body table.spec-table > tbody > tr > th a,
  body table.table > tbody > tr > th a:hover,
  body table.grade-table > tbody > tr > th a:hover,
  body table.spec-table > tbody > tr > th a:hover,
  body table.table > tbody > tr > th a:focus,
  body table.grade-table > tbody > tr > th a:focus,
  body table.spec-table > tbody > tr > th a:focus,
  body table.table > tbody > tr > th a:visited,
  body table.grade-table > tbody > tr > th a:visited,
  body table.spec-table > tbody > tr > th a:visited {
    color: var(--primary-color);
  }

  /* Every table scrolls inside its own wrapper rather than widening the page.
     tools/seo_audit.py checks that one of these three is the tag immediately
     before each <table>, so do not rename one without teaching that check.
     .grade-table-wrapper also carried a drop shadow, which left 16 of 2,466
     tables looking raised and every other one flat. */
  .table-responsive,
  .spec-table-wrapper,
  .grade-table-wrapper {
    overflow-x: auto;
    margin: 0 auto;
    /* The containing block for anything absolutely positioned in a cell.
       Bootstrap's .visually-hidden is position: absolute, and the powder pages'
       check-mark cells carry a hidden "Yes" each; with no positioned ancestor
       nearer than the page, those escaped the scroll box and widened the
       document, so 8 of the 11 tabled powder pages scrolled sideways on a phone. */
    position: relative;
  }

  /* Horizontal padding is 0 so a table is the full reading measure wherever it
     landed. build-specs.mjs writes the same block bare into <main> on 50 pages,
     inside .spec-table-section on 86 and inside .grade-table-section on 1, and
     the 40px/20px this used to carry made the Specifications table 40px wider
     than the Equivalent Grades table directly above it. Nesting one of these
     sections inside another is free now, which is what that generator does. */
  .spec-table-section,
  .grade-table-section {
    padding: 32px 0;
  }

  /* Left, like every other heading on the page. Centring this one was the rest
     of why the two generated tables did not read as a pair. */
  .grade-table-section h2 {
    font-size: 1.8rem;
    color: var(--heading-color);
    margin-bottom: 20px;
    font-weight: 600;
  }
  /* ===== table system : end =============================================== */

  @keyframes fadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .people-search {
    background-color: #ffffff;
    animation: fadeIn 0.6s ease-in-out;

  }

  .people-search h2 {
    text-align: center;
    font-size: 1.8rem;
    color: #154360;
    margin-top: 15px;
    margin-bottom: 20px;
    font-weight: 600;
  }

  .people-search-description {
    padding: 5% 3%;
    color: #ffffff;
    text-align: left;
    border-radius: 15px;
    overflow: auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
  }

  .table-container-city h2 {
    text-align: center;
    color: #154360;
    margin-bottom: 10px;
  }

  .table-container-city {
    max-width: 1200px;
    margin: auto;
    padding: 30px;
  }

  table {
    width: 100%;
    border-collapse: collapse;
  }

  th,
  td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #ddd;
  }

  tr:nth-child(even) {
    background-color: #f4f4f4;
  }

  /* Scroll  */
  section {
    scroll-margin-top: 100px;
  }

  #scrollUpBtn {
    display: none;
    position: fixed;
    bottom: 55px;
    right: 30px;
    z-index: 999;
    font-size: 24px;
    background-color: #154360;
    color: white;
    border: none;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    animation: bounce 2s infinite;
    transition: background 0.3s ease;
  }

  #scrollUpBtn:hover {
    background-color: #1a5276;
  }

  @keyframes bounce {

    0%,
    20%,
    50%,
    80%,
    100% {
      transform: translateY(0);
    }

    40% {
      transform: translateY(-8px);
    }

    60% {
      transform: translateY(-4px);
    }
  }

  .page-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 20px;
    align-items: flex-end;
    flex-wrap: wrap;
  }

  /* Contact  */
  .floating-contact-bar {
    position: fixed;
    top: 40%;
    right: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    border-radius: 8px 0 0 8px;
    animation: pulse 2s infinite;
  }

  .contact-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    width: 60px;
    color: white;
    text-decoration: none;
    font-size: 18px;
    transition: all 0.3s ease;
  }

  .contact-item span {
    display: none;
  }

  .contact-item.email {
    background-color: #666666;
    border-bottom: 1px solid #fff;
  }

  .contact-item.whatsapp {
    background-color: #25D366;
    border-top: 1px solid #fff;
  }

  .contact-item:hover {
    width: 150px;
    justify-content: start;
    padding-left: 15px;
  }

  .contact-item:hover span {
    display: inline-block;
    margin-left: 10px;
  }

  @keyframes pulse {
    0% {
      transform: translateY(0px);
    }

    50% {
      transform: translateY(-5px);
    }

    100% {
      transform: translateY(0px);
    }
  }

  * {
    font-family: var(--font-sans);
  }

  body {
    line-height: 1.6;
    color: var(--text-color);
  }

  body a {
    color: var(--primary-color);
  }

/* Links carry an underline again. Colour alone could not do the job: the link
   navy against body text measures 1.21:1, well under the 3:1 WCAG 1.4.1 asks
   for before colour is the only thing distinguishing a link. That left 2,135
   in-sentence links and 25,000 table links looking exactly like plain text. */
p a,
li a,
td a,
dd a,
figcaption a,
.ss-content a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-thickness: 0.07em;
}

p a:hover,
li a:hover,
td a:hover,
dd a:hover,
figcaption a:hover,
.ss-content a:hover {
  text-decoration-thickness: 0.14em;
  color: var(--secondary-cta);
}

/* Chrome that already reads as interactive from shape or position: a button, a
   nav item, a breadcrumb, a sidebar list of sibling products, a search result,
   the footer columns. Underlining these adds noise, not information. Listed
   after the block above so equal-specificity selectors like `footer a` win. */
.btn,
.navbar a,
.nav-link,
.dropdown-item,
.breadcrumb a,
.link-list a,
.site-search__results a,
.card a,
.pagination a,
.contact-item,
.social-links a,
footer a,
footer li a,
footer p a {
  text-decoration: none;
}


  ul {
    list-style: none;
  }

  img {
    width: 100%;
    height: auto;
  }

  p {
    text-align: justify;
    color: var(--text-color);
    line-height: 1.6;
  }

  /* The .lead intro paragraph is Bootstrap's, which sets font-weight:300 -
     lighter than body text - so the opening line under each hub's h1 read faint
     against the page. Bring it to a normal 400 so it has presence without
     shouting or competing with the title; the colour is already #333 from the
     p rule above, so weight was the whole problem. Qualified with body so it
     outranks Bootstrap's own .lead (both 0,1,0) in either link order - the same
     reason body .container does. */
  body .lead {
    font-weight: 400;
  }

  .container {
    margin: 0 auto;
    /* Bootstrap's 12px, not 10: a .row's negative margins are half its 24px
       gutter, so in a 10px container every row ran 2px past each side of a
       phone's screen, and the page scrolled sideways by that much. */
    padding: 0 12px;
  }

  /* Bootstrap's .badge never wraps, and seven pages put more into one than a
     screen holds: whole applications on the Monel K-500 foil page (446px of
     text at 360px), "Worldwide Export" at fs-5 on the combined foil pages,
     which overran a 768px tablet. body outranks Bootstrap in either link
     order, and the K-500 page links it after this file. */
  body .badge {
    white-space: normal;
  }

  /* Bootstrap's .btn-group is a row that never wraps. The 32140 strip page puts
     its four related-format links in one, which ran 23px past a 320px screen. */
  body .btn-group {
    flex-wrap: wrap;
  }

  /* One reading measure for page content. Three rules used to decide how wide a
     page was: the max-width that used to sit in the rule above said 1200px,
     bootstrap.min.css says 1320px at wide viewports, and the generated spec and
     grade table wrappers cap at 1100px. Both .container rules are a single
     class, so the winner was whichever stylesheet the page happened to link
     last - 396 pages rendered 1320px wide and 353 at 1200px, and nobody chose
     either. The tables inside stretched to fill whichever it was, which is how
     a nine-character cell like "ASTM B162" came to hold 300px of empty space.
     Qualified with body so it outranks bootstrap whatever the link order, and
     set to the 1100px the generated tables already use. */
  body .container {
    max-width: 1100px;
  }

  /* The header and footer are chrome, not reading matter, and the navbar needs
     about 1170px before it starts to wrap - logo, eight nav items, the quote
     button and the search field. Pinned here so they are also the same width on
     every page, which the accidental 1200/1320 split above meant they were not.
     Breadcrumbs are deliberately not exempt: they belong to the page and should
     line up with it, including on the 64 pages that put the breadcrumb nav
     before <main> rather than inside it. */
  #header__container .container,
  #footer-container .container,
  #footer__container .container {
    max-width: 1320px;
  }

  /* The detailed product pages - 619 of them - put their sidebar and content in
     a .container-fluid, which is 100% wide, so they had no measure at all: on a
     wide monitor the content column and its tables simply ran to the edge of
     the window, and the breadcrumb directly above sat in a .container. Same
     1100px as everything else, so the breadcrumb and the block beneath it line
     up. .content-container itself carried no CSS whatsoever before this.

     This only became safe once every table had a scrolling ancestor: 975 of
     them across 367 pages had none, so narrowing the column would have made
     them overflow the page instead of scrolling inside it. They are wrapped in
     .table-responsive now. Do not widen the sidebar's column or drop that
     wrapping without re-checking the widest chemistry tables. */
  body .content-container {
    max-width: 1100px;
  }

  /* On a phone the page comes before its sidebar. Below Bootstrap's md
     breakpoint the two columns stack in source order, and the source puts the
     "Similar Products" sidebar first - on 271 pages as an accordion expanded by
     default - so a visitor from search scrolled past a list of sibling products
     before reaching the product they had searched for: the <h1> of
     /inconel/625/sheets/ sat 1,043px down a 390x844 phone. `order` moves the
     sidebar after the content without editing the 620 pages or moving a pixel
     of the desktop layout, and the sidebar stays whole, only lower down.

     Three shapes carry it. 599 pages put nav.col-md-3 and the content column
     (a div, or <main> on 48) side by side in one .row, and 2 use a
     div.col-md-3 > div.sidebar; the first rule covers all of them. 19 close
     the .row straight after the sidebar, so the content column is the row's
     next sibling rather than its partner, and only the parent can reorder
     them - hence the :has(), which leaves any other .content-container as it
     was.

     `order` moves pixels, not focus. Tab and the accessibility tree still read
     the source, sidebar first: on /inconel/625/sheets/ at 390px, Tab went from
     the breadcrumb (y 372) to the sidebar at y 9,296 - 13 stops - and only
     then back up to the page's first link at y 1,232, which is what a
     keyboard user, a screen reader and a desktop zoomed past 200% all met.
     reading-flow: flex-visual makes both follow the drawn order instead, on
     the same containers `order` acts on. Measured in Chromium on the one-row
     and the row-closing shapes: Tab and the accessibility tree now reach the
     content first and the sidebar after it. Safari and Firefox do not support
     it yet and keep the source order; only moving the sidebar after the
     content in the pages' own markup would fix those. */
  @media (max-width: 767.98px) {
    body .content-container > .row > .col-md-3 {
      order: 1;
    }

    body .content-container:has(> .row + .col-md-9) {
      display: flex;
      flex-direction: column;
    }

    body .content-container > .row + .col-md-9 {
      order: -1;
    }

    body .content-container > .row:has(> .col-md-3),
    body .content-container:has(> .row + .col-md-9) {
      reading-flow: flex-visual;
    }
  }

  /* Prose gets a measure of its own; tables, figures and card grids keep the
     full container width. At 1100px a paragraph runs about 120 characters to
     the line, well past the point where the eye loses the start of the next
     one - and p is justified site-wide a few rules up, which makes a long line
     worse rather than better. */
  main .container > p,
  main .container > section > p {
    max-width: 78ch;
  }

  /* A centred paragraph has to stay centred once it is narrower than the block
     it sits in. 816 paragraphs carry .text-center - the export and supply
     network blurbs on every detailed product page among them - and capping the
     width alone would have pulled all of them to the left. */
  main .container.text-center > p,
  main .container > section.text-center > p,
  main .container > p.text-center,
  main .container > section > p.text-center {
    margin-inline: auto;
  }

  .btn {
    display: inline-block;
    background: var(--secondary-cta);
    color: #fff;
    padding: 10px 25px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
  }

  .btn:hover {
    background: var(--secondary-cta-dark);
    transform: translateY(-2px);
  }

  .btn-primary {
    background: var(--primary-color);
  }

  .btn-primary:hover {
    background: #154360;
  }

  /* Footer */
  footer {
    background: var(--dark-color);
    color: #fff;
    padding: 60px 0 20px;
  }

  .footer-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    margin-bottom: 40px;
    z-index: 1;
  }

  .footer-logo {
    margin-bottom: 20px;
  }

  .footer-links h3 {
    margin-bottom: 20px;
    font-size: 1.2rem;
  }

  .footer-links ul li {
    margin-bottom: 10px;
  }

  .footer-links ul li a {
    color: #ddd;
    transition: color 0.3s ease;
  }

  .footer-links ul li a:hover {
    color: var(--secondary-color);
  }

  .social-links {
    display: flex;
    gap: 15px;
  }

  .social-links a {
    color: #fff;
    font-size: 1.2rem;
    transition: color 0.3s ease;
  }

  .social-links a:hover {
    color: var(--secondary-color);
  }

  .copyright {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }

  .footer-links p a {
    color: #ddd;
    transition: color 0.3s ease;
    text-decoration: none;
  }

  footer .footer-links p a:hover {
    color: var(--secondary-color);
  }

  .nav-link:hover,
  .nav-link:focus,
  .nav-link.active {
    color: var(--secondary-color);
  }

  @media (min-width: 992px) {
    .dropdown:hover>.dropdown-menu {
      display: block;
    }

    .nav-link {
      color: var(--primary-color);
    }

    .dropend:hover>.dropdown-menu {
      display: block;
      margin-top: -2.5rem;
      margin-left: 10rem;
      color: var(--secondary-color);
    }
  }

  .dropdown-item:hover {
    color: var(--secondary-color);
  }

  .dropdown-item {
    color: var(--primary-color);
  }

  .navbar-brand {
    color: var(--primary-color);
  }

  .btn-primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
  }

  .btn-primary:hover {
    background-color: var(--secondary-cta);
    border-color: var(--secondary-cta);
  }

  /* `.table` and `.table th` were declared here. `.table th` was specificity
     (0,1,1), the same as Bootstrap's own `.table > :not(caption) > * > *`, so
     the two tied and the winner was whichever stylesheet the page linked last.
     Both are now part of the table system above, qualified with body so the
     result no longer depends on the <head>. */

  .accordion-button {
    color: var(--primary-color);
  }

  .accordion-button:not(.collapsed) {
    background-color: var(--light-color);
    color: var(--primary-color);
  }

  #loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--light-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 9999;
  }

  .logo-container {
    position: relative;
    width: 180px;
    height: 180px;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .logo-outer-ring {
    position: absolute;
    width: 100%;
    height: 100%;
    border: 3px solid rgba(255, 157, 0, 0.3);
    border-top: 3px solid #ff9d00;
    border-radius: 50%;
    animation: spin 2s linear infinite;
  }

  .logo-middle-ring {
    position: absolute;
    width: 80%;
    height: 80%;
    border: 2px solid rgba(0, 198, 255, 0.3);
    border-top: 2px solid var(--primary-color);
    border-radius: 50%;
    animation: spinReverse 1.5s linear infinite;
  }
  
  .loading-logo {
    width: 100px;
    height: 100px;
    z-index: 10;
    border-radius: 50%;
    padding: 15px;
    background: var(--primary-color);
    box-shadow: 0 0 25px rgba(4, 49, 65, 0.7);
    animation: pulse 2s infinite ease-in-out;
  }

  .loading-text {
    font-size: 1.4rem;
    margin-top: 20px;
    color:var(--primary-color);
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
    text-shadow: 0 0 10px rgba(4, 49, 65, 0.7);
  }

  .progress-container {
    width: 280px;
    height: 6px;
    background: var(--light-color);
    border-radius: 10px;
    overflow: hidden;
    margin-top: 25px;
  }

  .progress-bar {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #1a5276, #2c3e50);
    border-radius: 10px;
    transition: width 0.3s ease;
  }

  .hint {
    margin-top: 25px;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    font-style: italic;
    max-width: 300px;
    text-align: center;
  }


  @keyframes spin {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(360deg);
    }
  }

  @keyframes spinReverse {
    0% {
      transform: rotate(0deg);
    }

    100% {
      transform: rotate(-360deg);
    }
  }

  @keyframes pulse {

    0%,
    100% {
      transform: scale(1);
      opacity: 1;
    }

    50% {
      transform: scale(1.05);
      opacity: 0.9;
    }
  }

  @keyframes bounce {

    0%,
    100% {
      transform: translateY(0);
    }

    50% {
      transform: translateY(-8px);
    }
  }
  .particle {
    position: absolute;
    background: #6c6d72;
    border-radius: 50%;
    pointer-events: none;
    animation: float 8s linear forwards;
  }

  @keyframes float {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }

    100% {
      transform: translateY(-100vh) rotate(360deg);
      opacity: 0;
    }
  }

  .trademark-note{
    text-align: center;
  }

  /* The weight-calculator call to action, written into the form pages by
     docs/build-calc-links.mjs. It sits under the Specification Overview, where a
     buyer is already thinking about size, and deep-links to the calculator with
     this grade and form pre-selected. White on --secondary-cta clears AA (it is
     the darkened brand fill). */
  .calc-cta {
    margin: 22px 0;
    padding: 16px 20px;
    background: var(--light-color);
    border: 1px solid #d9e2ea;
    border-left: 4px solid var(--secondary-cta);
    border-radius: 6px;
  }

  .calc-cta-text {
    margin: 0 0 10px;
    color: var(--text-color);
  }

  .calc-cta-link {
    display: inline-block;
    padding: 9px 16px;
    font-weight: 600;
    color: #fff;
    background: var(--secondary-cta);
    border-radius: 5px;
    text-decoration: none;
  }

  .calc-cta-link:hover,
  .calc-cta-link:focus {
    background: var(--secondary-cta-dark);
    color: #fff;
  }

  /* The sibling-form block, written after the calc-cta by
     docs/build-form-links.mjs. It exists so a grade's plates and sheets pages
     have inbound links from the pages Google actually crawls; it borrows the
     .calc-cta box in a quieter navy so the page reads as one family. */
  .form-links {
    margin: 22px 0;
    padding: 14px 20px;
    background: var(--light-color);
    border: 1px solid #d9e2ea;
    border-left: 4px solid var(--primary-color, #1b2a49);
    border-radius: 6px;
  }

  /* The one-sentence bar-standard note written by docs/build-bar-notes.mjs under the
     Specification Overview. `p` is justified site-wide, which opens rivers in a sentence
     this short, so it is left-aligned. */
  .bar-standard-note {
    margin: 12px 0 22px;
    text-align: left;
  }

  .form-links-title {
    margin: 0 0 6px;
    text-align: left;
  }

  .form-links-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
    margin: 0 0 8px;
    padding: 0;
    list-style: none;
  }

  .form-links-list a,
  .form-links-hub a {
    display: inline-block;
    padding: 6px 0;
    font-weight: 600;
  }

  .form-links-hub {
    margin: 0;
    text-align: left;
  }

  /* The quote call to action, written into the product pages by
     docs/build-quote-cta.mjs directly under the lead heading block. A headless
     audit found 298 of 382 grade-and-form pages with no quote, call or WhatsApp
     link in their content, and 6 of 382 showing any enquiry link on a 390px
     phone's first screen: there the header's "Get a Quote" sits inside the
     collapsed menu and the floating launcher is an unlabelled circle.

     It borrows the .calc-cta box above so the two read as one family, with a
     navy rule where that one is orange so a page carrying both can tell them
     apart. The quote button is the one solid fill - white on --secondary-cta is
     4.58:1, AA - and WhatsApp and Call are outlined, navy on white at 10:1, so
     the eye lands on the action first. Every link is at least 44px tall. The
     text is left-aligned because `p` is justified site-wide, which opens
     rivers in a sentence this short. */
  .quote-cta {
    margin: 0 0 24px;
    padding: 14px 16px;
    background: var(--light-color);
    border: 1px solid #d9e2ea;
    border-left: 4px solid var(--primary-color);
    border-radius: 6px;
    text-align: left;
  }

  .quote-cta-text {
    margin: 0 0 12px;
    color: var(--text-color);
    text-align: left;
  }

  .quote-cta-text strong {
    color: var(--primary-color);
  }

  .quote-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .quote-cta-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
  }

  .quote-cta-actions .quote-cta-btn {
    color: #fff;
    background: var(--secondary-cta);
  }

  .quote-cta-actions .quote-cta-btn:hover,
  .quote-cta-actions .quote-cta-btn:focus {
    color: #fff;
    background: var(--secondary-cta-dark);
  }

  .quote-cta-actions .quote-cta-wa,
  .quote-cta-actions .quote-cta-call {
    color: var(--primary-color);
    background: #fff;
    border-color: var(--primary-color);
  }

  /* No white-space: nowrap on the call button. A phone number split across two
     lines is a number misread, so the generator writes its spaces as &nbsp;
     and the only place the label can break is between "Call" and the number.
     nowrap on the whole link kept the number whole too, but at 320px it held
     the button 8px wider than the block's content box on the 521 pages
     anchored on div#title. */
  .quote-cta-actions .quote-cta-wa:hover,
  .quote-cta-actions .quote-cta-wa:focus,
  .quote-cta-actions .quote-cta-call:hover,
  .quote-cta-actions .quote-cta-call:focus {
    color: #fff;
    background: var(--primary-color);
  }

  /* On a phone the buttons grow to fill each row, so a row is never ragged:
     "Get a quote" and "WhatsApp" share a row where they fit side by side, with
     the call button full width beneath, and take a row each where they do not.
     How wide that is depends on the column and the font. Measured in headless
     Chromium's fallback sans: two rows at 390 and 414px, three at 320px, and at
     360px two on the wider hub column and three on the div#title pages. */
  @media (max-width: 575.98px) {
    .quote-cta {
      padding: 12px;
    }

    .quote-cta-actions a {
      flex: 1 1 auto;
    }
  }